/* Newsletter-Anmeldeblock („Credit Risk Monitor") unter Beiträgen und auf
   Themenseiten. Markup: inc/newsletter-cta.php.

   Setzt auf .cta-band--soft auf (neutrale Bühne, kompakte Innenabstände) und
   ergänzt nur die zweite Spalte mit dem Formular. Alles unter .bks-rd gescoped,
   wie das gesamte Redesign-CSS — die alten DE-Seiten bleiben unberührt.

   WARUM CONTAINER-QUERY UND KEINE MEDIA-QUERY:
   Der Block steht in zwei sehr verschiedenen Umgebungen — unter einem Beitrag
   in der schmalen Inhaltsspalte (~745 px) und auf Themenseiten über die volle
   Breite. Eine Media-Query misst das Fenster, nicht die Spalte: Auf einem
   1568 px breiten Bildschirm hätte der Beitragsfall die Desktop-Regel bekommen,
   obwohl dort nur 745 px zur Verfügung stehen — das Formular wäre umgebrochen
   und rechtsbündig unter dem Text gelandet. Gemessen wird deshalb der Container. */

.bks-rd .nl-cta {
	container-type: inline-size;
	margin-top: 56px;
}

/* .cta-band .wrap zentriert seine Spalten vertikal — hier steht neben dem Text
   eine Formularkarte, die höher ist. Oben ausrichten, sonst schwebt die
   Überschrift auf halber Höhe neben den Eingabefeldern. */
.bks-rd .nl-cta .wrap {
	align-items: flex-start;
	gap: 28px;
}

/* Grundfall: eine Spalte, beide Blöcke über die volle Breite. Das ist der
   Beitragskontext — und zugleich das Mobil-Layout. */
.bks-rd .nl-cta__intro,
.bks-rd .nl-cta__form {
	flex: 1 1 100%;
	min-width: 0;
	max-width: none;
}

.bks-rd .nl-cta__kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--grey-700);
	margin: 0 0 10px;
}

/* Der Kicker gehört zur Überschrift und muss an ihr kleben. Ohne das erbt die
   h2 ihren Standardabstand nach oben und reißt eine Lücke von rund 80 px
   zwischen „NEWSLETTER" und „Credit Risk Monitor". */
.bks-rd .nl-cta__intro h2 {
	margin-top: 0;
}

/* Das Formular bringt seine eigene Karte mit (.nl-form.card). Auf der neutralen
   Bühne des Bands läge die Karte als zweite graue Fläche darauf — deshalb hier
   weiß und mit ruhiger Kante statt Schatten. */
.bks-rd .nl-cta__form .nl-form.card {
	background: #fff;
	border: 1px solid var(--grey-200, rgba(0, 0, 0, .1));
	box-shadow: none;
	margin: 0;
}

/* Erst wenn der Container selbst breit genug ist, nebeneinander: 46ch Text plus
   440 px Formular plus Abstand brauchen rund 820 px. */
@container (min-width: 820px) {
	.bks-rd .nl-cta .wrap {
		gap: 48px;
	}

	.bks-rd .nl-cta__intro {
		flex: 1 1 320px;
		max-width: 46ch;
	}

	.bks-rd .nl-cta__form {
		flex: 0 1 440px;
	}
}