/* ==========================================================================
   sphere – Newsletter: Formular und Meldungen auf der Website

   Felder, Beschriftungen und Hinweise gestaltet das Theme „sphere“ über .formular, .feld, .ganz
   und .hinweis – wie beim Bestell- und Widerrufsformular. Den Knopf färbt theme.json über
   .wp-element-button (schwarz, beim Darüberfahren lila). Hier steht nur, was das Theme nicht
   kennt: Breite, Knopfmaß, Falle, Meldungen. Farben aus dem Theme, mit Ersatzwerten.
   ========================================================================== */

.snl {
	max-width: 734px;   /* wie der Bereich „Bestellen“ der Buchseite */
}

/* Mehr Luft als im Bestellformular (Wunsch 13.10.2026, Vorbild: Seite „Presse“): die Seite hat nur
   drei Felder, und das Formular steht für sich – Abstände zwischen den Feldern 28 px statt 10 px,
   Beschriftung 8 px über dem Feld, Knopf und Hinweis deutlich abgesetzt. */
.formular.snl-form {
	gap: 28px 24px;
}

.snl-form .feld {
	gap: 8px;
}

.snl-form .feld > span {
	font-size: 15px;
}

.snl-form .hinweis {
	max-width: 560px;
	line-height: 1.6;
}

/* Knopf in der Einheitsgröße der Website: 264 × 55 (Breite der linken Buchspalte). „Newsletter
   abonnieren“ füllte in 18 px den Knopf fast ganz (199 von 224 px Platz); in 15 px wie die Rezensions-
   Knöpfe steht er mit Luft darin. */
.snl .snl-button {
	font-size: 15px;
	box-sizing: border-box;
	width: var(--spalte, 264px);
	max-width: 100%;
	height: 55px;
	margin: 0;
	border: 0;
	border-radius: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: background-color .2s linear;
}

.snl .snl-senden {
	margin: 12px 0 0;   /* mit dem Abstand im Raster 40 px unter dem letzten Feld */
}

.snl-optional {
	color: var(--leise, #5f5f5f);
}

.snl-hinweis p {
	margin: 0;
}

.snl-hinweis p + p {
	margin-top: 8px;
}

/* Falle für Spam-Programme: ganz ausgeblendet, nicht nur aus dem Bild geschoben – sonst sehen
   Passwortverwalter und Auto-Ausfüllen das Feld und füllen es (Erfahrung von liepach.com). */
.snl-falle {
	display: none !important;
}

/* ---- Meldungen und Zwischenseite (Bestätigen, Abmelden) ----------------------------------- */

/* Wie die Dankesanzeige des Bestellformulars: graue Fläche, Titel in Roboto Condensed */
.snl-meldung,
.snl-aktion {
	box-sizing: border-box;
	background: var(--feld, #f4f4f4);
	padding: 28px 32px;
	margin-bottom: 48px;
}

.snl-meldung--problem {
	border-left: 3px solid #b00020;
	background: #fbe9e9;
}

.snl .snl-titel {
	margin: 0 0 12px;
	font-size: 18px;
}

.snl .snl-text p {
	margin: 0;
}

.snl .snl-text p + p {
	margin-top: 10px;
}

.snl-aktion form {
	margin: 0;
}

.snl-aktion .snl-senden {
	margin-top: 24px;
}