/* =========================================================================
   BD Strecke
   =========================================================================
   Gilt nur auf den Seiten, auf denen ein Shortcode der Strecke steht.
   Lädt nichts von fremden Servern: Die Schriften bringt das Theme mit.
   Keine runden Ecken, keine Schatten, keine Verläufe.

   Die Töne folgen dem Entwurf vom 2. Oktober 2026, übersetzt in die
   Websitepalette vom 13. September 2026. Eine Ausnahme ist vermerkt.
   ========================================================================= */
.bd-befragung,
.bd-anmeldung {
	--bd-grund: #fbf8f2;        /* Elfenbein */
	--bd-ruhig: #f3eee3;        /* ruhige Fläche */
	--bd-lese: #ffffff;
	--bd-dunkel: #2c3244;       /* Nachtblau 700: dunkle Flächen */

	/* Die Schaltfläche hat ihre eigene Marke, getrennt von den dunklen
	   Flächen. Sonst würde eine Änderung an ihr auch die ausgewählte Stufe
	   der Selbstbefragung und die dunkle Fläche des Ergebnisses aufhellen.
	   Werte nach Bauplan und nach dem Nachtrag zu /karte vom 10.10.2026:
	   Nachtblau 600 in Ruhe, Nachtblau 700 im Hover. Die Landingpage trägt
	   dieselben Werte und bleibt dadurch unverändert. */
	--bd-knopf: #3c435b;        /* Nachtblau 600: Schaltfläche in Ruhe */
	--bd-knopf-hover: #2c3244;  /* Nachtblau 700: Hover und aktiv */
	--bd-dunkel-tief: #202431;  /* Nachtblau 800: Hover */
	--bd-tinte: #202431;        /* Nachtblau 800: Fließtext */
	--bd-leise: #4d5675;        /* Nachtblau 500: ergänzende Texte, Rubriken */
	--bd-messing: #b59969;      /* Messing 500: Linien */
	--bd-messing-hell: #daccb4; /* Messing 300: auf dunklem Grund */
	--bd-linie: #dcd5c5;
	--bd-linie-fein: #eae4d7;
	--bd-traegt: #5b7469;       /* Eukalyptus */
	--bd-ruft: #814b4f;         /* Altrosa 700 */
	--bd-ruft-linie: #a46569;   /* Altrosa 600 */

	--bd-mass: 8px;
	--bd-text: 19px;
	--bd-koerper: 640px;

	--bd-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--bd-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

	color: var(--bd-tinte);
	font-family: var(--bd-serif);
	font-size: var(--bd-text);
	line-height: 1.6;
}

body:has(.bd-befragung) {
	background-color: #fbf8f2;
}

.bd-befragung {
	max-width: calc(var(--bd-koerper) + var(--bd-mass) * 5);
	margin-inline: auto;
	padding-inline: calc(var(--bd-mass) * 2.5);
	padding-block: calc(var(--bd-mass) * 6) calc(var(--bd-mass) * 9);
	box-sizing: border-box;
}

/* --- Schrift ------------------------------------------------------------ */
.bd-befragung :is(h1, h2, h3),
.bd-anmeldung :is(h1, h2, h3) {
	font-family: var(--bd-serif);
	font-weight: 500;
	text-align: left;
	hyphens: none;
	text-wrap: balance;
	line-height: 1.15;
	margin: 0 0 calc(var(--bd-mass) * 2);
}

.bd-befragung__titel {
	font-size: clamp(34px, 6vw, 50px);
	font-weight: 400;
}

.bd-abschnitt__titel {
	font-size: clamp(26px, 4vw, 34px);
	margin-bottom: var(--bd-mass);
}

.bd-ergebnis__bewegung {
	font-size: 25px;
	margin-bottom: calc(var(--bd-mass) * 0.75);
}

.bd-befragung p {
	margin: 0 0 calc(var(--bd-mass) * 2);
}

/* Fließtext im Blocksatz mit Silbentrennung, wie im Auftrag. */
.bd-text {
	font-family: var(--bd-serif);
	font-size: var(--bd-text);
	line-height: 1.55;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Kurze Beschriftungen in Archivo, ausschließlich in Versalien.
   Der Entwurf setzt sie in Messing. Messing 500 erreicht auf Elfenbein nur
   2,56:1 und ist als Schrift zu schwach; es bleibt deshalb den Linien
   vorbehalten. Die Rubriken stehen in Nachtblau 500 mit 6,82:1. */
.bd-rubrik,
.bd-teil__kopf,
.bd-fortschritt,
.bd-aussage__marke {
	font-family: var(--bd-sans);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--bd-leise);
	text-align: left;
	hyphens: none;
}

.bd-rubrik {
	margin-bottom: calc(var(--bd-mass) * 1.5);
}

.bd-teil__kopf {
	margin-bottom: var(--bd-mass);
}

.bd-teil__kopf--traegt { color: var(--bd-traegt); }
.bd-teil__kopf--ruft   { color: var(--bd-ruft); }

.bd-befragung__lead {
	font-family: var(--bd-serif);
	font-size: 21px;
	line-height: 1.5;
	margin-bottom: calc(var(--bd-mass) * 3.5);
}

.bd-befragung__fakten {
	list-style: none;
	padding: 0;
	margin: 0 0 calc(var(--bd-mass) * 4.25);
	border-top: 1px solid var(--bd-linie);
}

.bd-befragung__fakten li {
	padding: calc(var(--bd-mass) * 1.25) 0;
	border-bottom: 1px solid var(--bd-linie-fein);
	font-size: 15px;
	font-family: var(--bd-sans);
}

.bd-befragung__anleitung,
.bd-abschnitt__erklaerung {
	color: var(--bd-leise);
}

.bd-abschnitt__erklaerung {
	font-family: var(--bd-serif);
	font-size: 19px;
	margin-bottom: calc(var(--bd-mass) * 2.75);
}

.bd-befragung__anleitung {
	font-family: var(--bd-sans);
	font-size: 14.5px;
	margin-bottom: calc(var(--bd-mass) * 3.5);
}

/* --- Fortschritt -------------------------------------------------------- */

.bd-fortschritt {
	display: flex;
	justify-content: space-between;
	gap: calc(var(--bd-mass) * 1.5);
	flex-wrap: wrap;
	margin-bottom: calc(var(--bd-mass) * 2.75);
}

.bd-striche {
	display: flex;
	gap: 4px;
	margin-bottom: calc(var(--bd-mass) * 3.5);
}

.bd-striche span {
	flex: 1;
	height: 2px;
	background-color: var(--bd-linie);
}

.bd-striche span.ist-an {
	background-color: var(--bd-messing);
}

/* --- Die Aussagen ------------------------------------------------------- */

.bd-aussage {
	border: 0;
	border-top: 1px solid var(--bd-linie);
	padding: calc(var(--bd-mass) * 2.25) 0 0;
	margin: 0 0 calc(var(--bd-mass) * 2.75);
}

.bd-aussage.ist-offen {
	border-top-color: var(--bd-ruft-linie);
}

/* Die Legende schwimmt über die volle Breite; sonst schneidet sie eine
   Kerbe in die Linie darüber. */
.bd-aussage__satz {
	font-family: var(--bd-serif);
	font-size: 20px;
	line-height: 1.38;
	padding: 0;
	margin-bottom: calc(var(--bd-mass) * 1.625);
	float: left;
	width: 100%;
	text-align: left;
	hyphens: none;
}

.bd-aussage__marke {
	margin-left: var(--bd-mass);
	color: var(--bd-ruft);
	white-space: nowrap;
	font-size: 10.5px;
	letter-spacing: 0.12em;
}

.bd-aussage__stufen {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background-color: var(--bd-linie);
	border: 1px solid var(--bd-linie);
}

.bd-stufe {
	flex: 1 1 90px;
	background-color: var(--bd-grund);
	padding: calc(var(--bd-mass) * 1.25) calc(var(--bd-mass) * 0.75);
	text-align: center;
	font-family: var(--bd-sans);
	font-size: 13px;
	color: var(--bd-leise);
	cursor: pointer;
	position: relative;
	margin: 0;
}

.bd-stufe:hover {
	color: var(--bd-tinte);
}

.bd-stufe input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.bd-stufe:has(input:checked) {
	background-color: var(--bd-dunkel);
	color: #ffffff;
	font-weight: 600;
}

.bd-stufe:has(input:focus-visible) {
	outline: 3px solid var(--bd-tinte);
	outline-offset: -3px;
}

.bd-befragung__offen {
	font-family: var(--bd-sans);
	font-size: 13.5px;
	color: var(--bd-ruft);
	margin-top: calc(var(--bd-mass) * 1.75);
}

/* --- Schaltflächen ------------------------------------------------------ */
.bd-knopf,
.bd-anmeldung button {
	font-family: var(--bd-sans);
	font-size: 15px;
	/* Mit Ersatzwert: Stünde ein .bd-knopf einmal außerhalb von .bd-befragung
	   und .bd-anmeldung, wäre die Marke undefiniert und der Knopf
	   durchsichtig — genau der Fehler, der in dieser Datei schon einmal
	   stand. */
	background-color: var(--bd-knopf, #3c435b);
	color: #ffffff;
	border: 1px solid var(--bd-knopf, #3c435b);
	padding: calc(var(--bd-mass) * 1.625) calc(var(--bd-mass) * 3.5);
	cursor: pointer;
}

.bd-knopf:hover,
.bd-knopf:active,
.bd-anmeldung button:hover,
.bd-anmeldung button:active {
	background-color: var(--bd-knopf-hover, #2c3244);
	border-color: var(--bd-knopf-hover, #2c3244);
}

.bd-knopf--still {
	background-color: transparent;
	color: var(--bd-tinte);
	border-color: var(--bd-linie);
}

.bd-knopf--still:hover {
	background-color: var(--bd-ruhig);
	color: var(--bd-tinte);
	border-color: var(--bd-messing);
}

button:disabled {
	background-color: var(--bd-leise);
	border-color: var(--bd-leise);
	cursor: default;
}

.bd-fuehrung {
	display: flex;
	gap: calc(var(--bd-mass) * 1.5);
	flex-wrap: wrap;
	align-items: center;
	margin-top: calc(var(--bd-mass) * 3.75);
}

.bd-fuehrung__notiz {
	font-family: var(--bd-sans);
	font-size: 12.5px;
	color: var(--bd-leise);
}

/* --- Ergebnis ----------------------------------------------------------- */

.bd-ergebnis__rahmen {
	font-family: var(--bd-serif);
	font-size: 20px;
	line-height: 1.5;
	color: var(--bd-leise);
	margin-bottom: calc(var(--bd-mass) * 5);
	padding-bottom: calc(var(--bd-mass) * 3.5);
	border-bottom: 1px solid var(--bd-linie);
}

.bd-ergebnis__luecken {
	font-family: var(--bd-sans);
	font-size: 14px;
	color: var(--bd-ruft);
	border-left: 2px solid var(--bd-ruft-linie);
	padding-left: calc(var(--bd-mass) * 1.75);
	margin: calc(var(--bd-mass) * -2.25) 0 calc(var(--bd-mass) * 4.25);
}

.bd-teil {
	margin-bottom: calc(var(--bd-mass) * 4.75);
}

.bd-teil__einleitung {
	font-family: var(--bd-sans);
	font-size: 15px;
	color: var(--bd-leise);
	margin-bottom: calc(var(--bd-mass) * 2.75);
}

.bd-bewegung {
	margin-bottom: calc(var(--bd-mass) * 3);
	padding-left: calc(var(--bd-mass) * 2.25);
	border-left: 2px solid var(--bd-linie);
}

.bd-bewegung--traegt { border-left-color: var(--bd-traegt); }
.bd-bewegung--ruft   { border-left-color: var(--bd-ruft-linie); }

.bd-ergebnis__doppelung {
	background-color: var(--bd-ruhig);
	padding: calc(var(--bd-mass) * 2.75) calc(var(--bd-mass) * 2.75) var(--bd-mass);
	margin-bottom: calc(var(--bd-mass) * 4.75);
}

.bd-ergebnis__uebung {
	border-top: 1px solid var(--bd-messing);
	border-bottom: 1px solid var(--bd-messing);
	padding: calc(var(--bd-mass) * 2.5) 0 calc(var(--bd-mass) * 0.75);
	margin-bottom: calc(var(--bd-mass) * 3.25);
}

.bd-ergebnis__speichern,
.bd-ergebnis__fuss {
	font-family: var(--bd-sans);
	font-size: 13px;
	color: var(--bd-leise);
}

.bd-ergebnis__speichern {
	margin-bottom: calc(var(--bd-mass) * 6);
}

.bd-ergebnis__fuss {
	border-top: 1px solid var(--bd-linie);
	padding-top: calc(var(--bd-mass) * 2);
	margin-top: calc(var(--bd-mass) * 2);
}

/* --- Der Anmeldeblock --------------------------------------------------- */

.bd-ergebnis__anmeldung {
	background-color: var(--bd-dunkel);
	color: #ffffff;
	padding: calc(var(--bd-mass) * 3.75) calc(var(--bd-mass) * 3.25) calc(var(--bd-mass) * 3.5);
	margin-bottom: calc(var(--bd-mass) * 4.25);
}

.bd-ergebnis__anmeldung h2,
.bd-ergebnis__anmeldung .bd-text,
.bd-ergebnis__anmeldung p,
.bd-ergebnis__anmeldung label {
	color: #ffffff;
}

.bd-ergebnis__anmeldung h2 {
	font-size: 30px;
}

.bd-ergebnis__anmeldung.ist-leise {
	background-color: var(--bd-ruhig);
	color: var(--bd-tinte);
}

.bd-ergebnis__anmeldung.ist-leise :is(h2, .bd-text, p, label) {
	color: var(--bd-tinte);
}

/* --- Formulare ---------------------------------------------------------- */
.bd-anmeldung {
	display: grid;
	gap: calc(var(--bd-mass) * 1.75);
	margin: 0;
}

.bd-feld label,
.bd-feld__beschriftung {
	display: block;
	font-family: var(--bd-sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--bd-mass);
}

.bd-feld input[type="email"],
.bd-feld input[type="text"] {
	font-family: var(--bd-serif);
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
	padding: calc(var(--bd-mass) * 1.375) calc(var(--bd-mass) * 1.5);
	border: 1px solid var(--bd-linie);
	background-color: transparent;
	color: inherit;
}

.bd-ergebnis__anmeldung:not(.ist-leise) .bd-feld input[type="email"] {
	border-color: rgba(255, 255, 255, 0.45);
}

.bd-feld input[aria-invalid="true"] {
	border-color: var(--bd-ruft-linie);
	border-width: 2px;
}

.bd-feld--kasten {
	display: flex;
	gap: calc(var(--bd-mass) * 1.375);
	align-items: flex-start;
}

.bd-feld--kasten label {
	font-family: var(--bd-serif);
	font-size: 14.5px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 0;
}

.bd-feld--kasten input[type="checkbox"] {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	margin-top: 4px;
	accent-color: var(--bd-messing);
}

.bd-anmeldung__klein {
	font-family: var(--bd-sans);
	font-size: 12.5px;
	margin: 0;
	opacity: 0.85;
}

.bd-anmeldung button {
	justify-self: start;
}

/* Nur auf der dunklen Fläche des Ergebnisses steht die Schaltfläche in
   Messing 300; sonst wäre sie auf Nachtblau zu leise. */
.bd-ergebnis__anmeldung:not(.ist-leise) .bd-anmeldung button {
	background-color: var(--bd-messing-hell);
	color: var(--bd-tinte);
	border-color: var(--bd-messing-hell);
	font-weight: 600;
}

.bd-ergebnis__anmeldung:not(.ist-leise) .bd-anmeldung button:hover {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--bd-tinte);
}/* Die beiden Strecken auf der Seite zum Abbestellen. */

/* Der Stand steht in Worten, nicht als Zeichen. Er wechselt ohne Skript:
   Das Stylesheet zeigt je nach Zustand des Kästchens das eine oder das
   andere Wort. Für die Vorlesesoftware ist er ausgeblendet, weil sie den
   Zustand des Kästchens ohnehin nennt. */

/* Der Honigtopf: für Menschen unsichtbar, für die Tastatur nicht erreichbar,
   aber nicht display:none, damit automatische Eintragungen ihn ausfüllen. */
.bd-honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bd-anmeldung__meldung:not(:empty) {
	border-left: 3px solid currentColor;
	padding: var(--bd-mass) calc(var(--bd-mass) * 1.5);
	font-family: var(--bd-sans);
	font-size: 14px;
}

.bd-anmeldung__meldung.ist-fehler {
	color: var(--bd-ruft);
}

.bd-ergebnis__anmeldung:not(.ist-leise) .bd-anmeldung__meldung.ist-fehler {
	color: var(--bd-messing-hell);
}/* --- Fokus -------------------------------------------------------------- */
.bd-befragung :is(a, button, input, label):focus-visible,
.bd-anmeldung :is(a, button, input):focus-visible {
	outline: 3px solid var(--bd-tinte);
	outline-offset: 2px;
}

.bd-ergebnis__anmeldung:not(.ist-leise) :is(button, input):focus-visible {
	outline-color: var(--bd-messing-hell);
}

.bd-befragung__titel:focus-visible,
.bd-abschnitt__titel:focus-visible {
	outline: 3px solid var(--bd-messing);
	outline-offset: 4px;
}

/* --- Schmale Geräte ----------------------------------------------------- */

@media (max-width: 520px) {
	.bd-stufe {
		flex: 1 1 30%;
		font-size: 12.5px;
	}
	.bd-text {
		font-size: 18px;
		text-align: left;
	}
	.bd-befragung {
		padding-inline: calc(var(--bd-mass) * 2);
	}
}

@media (prefers-reduced-motion: reduce) {	.bd-befragung *,
	.bd-anmeldung * {
		transition: none !important;
		animation: none !important;
	}
}

/* --- Druck -------------------------------------------------------------- */

@media print {
	.bd-kopf,
	.bd-fuss,
	.wp-block-navigation,
	.bd-sprungmarke,
	.bd-fuehrung,
	.bd-ergebnis__anmeldung,
	.bd-ergebnis__speichern,
	.bd-striche,
	.bd-knopf,
	button {
		display: none !important;
	}

	body { background: #fff; color: #000; }

	.bd-befragung {
		max-width: none;
		padding: 0;
		font-size: 11pt;
	}

	.bd-befragung :is(h1, h2) { page-break-after: avoid; }
	.bd-bewegung, .bd-ergebnis__uebung { page-break-inside: avoid; }
}

/* =========================================================================
   Die Landingpage /einundzwanzig-tage
   =========================================================================
   Sie trägt einen anderen Ton als die Selbstbefragung: Haupt-Hintergrund
   Altrosa 100, Leseflächen Weiß, Schaltflächen Nachtblau 600 und im Hover
   Nachtblau 700. Die Maße des Auftrags gelten nur hier und lassen die
   übrige Website unberührt. */

.bd-landing {
	--bd-grund: #f4ecec;        /* Altrosa 100 */
	--bd-lese: #ffffff;
	--bd-dunkel: #3c435b;       /* Nachtblau 600: Schaltfläche in Ruhe */
	--bd-dunkel-tief: #2c3244;  /* Nachtblau 700: Hover und aktiv */
	--bd-tinte: #202431;        /* Nachtblau 800 */
	--bd-leise: #4d5675;        /* Nachtblau 500 */
	--bd-messing: #b59969;      /* Messing 500: dekorative Linien */
	--bd-linie: #daccb4;        /* Messing 300: zurückhaltende Trennlinien */
	--bd-rosa: #814b4f;         /* Altrosa 700 */

	--bd-mass: 8px;
	--bd-text: 19px;
	--bd-koerper: 640px;
	--bd-inhalt: 1040px;

	--bd-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--bd-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* Der Seiteninhalt ist hier schmaler als sonst auf der Website. */
body:has(.bd-landing) .bd-landing .wp-block-group.alignwide,
.bd-landing > .wp-block-group > .alignwide {
	max-width: var(--bd-inhalt);
}

.bd-landing :is(p, li) {
	font-size: var(--bd-text);
	line-height: 1.6;
	color: var(--bd-tinte);
	max-width: var(--bd-koerper);
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.bd-landing :is(h1, h2) {
	text-align: left;
	hyphens: none;
	max-width: var(--bd-koerper);
}

.bd-landing__untertitel {
	font-size: 21px !important;
	line-height: 1.5;
	color: var(--bd-leise) !important;
	text-align: left !important;
	hyphens: none;
}

.bd-landing__fuss p {
	font-size: 15px;
	color: var(--bd-leise);
	text-align: left;
	hyphens: none;
}

/* Die vier Abschnitte, getrennt durch feine Messinglinien. */
.bd-landing__abschnitt + .bd-landing__abschnitt {
	border-top: 1px solid var(--bd-messing);
	padding-top: calc(var(--bd-mass) * 4);
	margin-top: calc(var(--bd-mass) * 4);
}

/* Das Formular steht genau einmal, auf einer weißen Lesefläche.
   Die Werte müssen hier noch einmal stehen: Das Formular setzt sie selbst,
   und die eigenen Werte eines Elements gehen den geerbten vor. */
.bd-landing .bd-anmeldung {
	--bd-dunkel: #3c435b;       /* Nachtblau 600 */
	--bd-dunkel-tief: #2c3244;  /* Nachtblau 700 */
	--bd-tinte: #202431;
	--bd-leise: #4d5675;
	--bd-messing: #b59969;
	--bd-linie: #daccb4;
	--bd-ruft-linie: #814b4f;
	--bd-grund: #ffffff;

	background-color: var(--bd-lese);
	border-top: 2px solid var(--bd-messing);
	padding: calc(var(--bd-mass) * 5) calc(var(--bd-mass) * 4);
	max-width: var(--bd-koerper);
	box-sizing: border-box;
}

.bd-landing .bd-anmeldung :is(p, label) {
	text-align: left;
	hyphens: none;
	max-width: none;
}

/* Der Kleintext bleibt klein: Die Schriftgröße der Seite greift sonst auch
   hier und macht ihn so groß wie den Fließtext. */
.bd-landing .bd-anmeldung .bd-anmeldung__klein {
	font-family: var(--bd-sans);
	font-size: 13px;
	line-height: 1.55;
	color: var(--bd-leise);
}

.bd-landing .bd-anmeldung .bd-feld--kasten label {
	font-family: var(--bd-serif);
	font-size: 16px;
	line-height: 1.5;
}

/* Archivo steht ausschließlich in Versalien, auch auf der Schaltfläche. */
.bd-landing .bd-anmeldung button {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 13px;
	font-weight: 600;
}

/* Die Farben der Schaltfläche stehen seit dem 10. Oktober 2026 einmal, bei
   .bd-knopf. Hier stand dasselbe ein zweites Mal; dieselbe Farbe an zwei
   Stellen heisst, dass eine davon irgendwann vergessen wird. */

.bd-landing .bd-anmeldung__klein a {
	color: var(--bd-leise);
}

@media (max-width: 520px) {
	.bd-landing :is(p, li) {
		text-align: left;
	}
	.bd-landing .bd-anmeldung {
		padding: calc(var(--bd-mass) * 3) calc(var(--bd-mass) * 2.5);
	}
}

/* --- Die Anmeldung auf /karte -------------------------------------------
   Die Seite hinter dem QR-Code der Visitenkarten braucht hier nichts mehr:
   Ihre Schaltfläche trägt Nachtblau 600 und im Hover Nachtblau 700, und das
   ist seit dem 10. Oktober 2026 der Wert für alle Anmeldeformulare, siehe
   --bd-knopf am Anfang dieser Datei. Die Klasse bd-anmeldung--karte bleibt im
   Seiteninhalt stehen, falls dort später doch etwas Eigenes nötig wird. */

/* --- Der Satz vor der Öffnung -------------------------------------------
   Steht dort, wo später das Formular steht, und sagt, wann es losgeht. Er
   sieht nicht aus wie ein Formular und nicht wie ein Hinweis am Rand,
   sondern wie das, was er ist: eine Ankündigung an der Stelle der Sache. */
.bd-anmeldung-vorher {
	font-family: var(--wp--preset--font-family--archivo), system-ui, sans-serif;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--nachtblau-600, #3c435b);
	border-left: 2px solid var(--wp--preset--color--messing-500, #b59969);
	padding: 0.9em 0 0.9em 1.1em;
	margin-block: 2em;
}

/* --- Das zweite Kästchen auf /brief --------------------------------------
   Es steht unter der Einwilligung und ein wenig abgesetzt, damit niemand die
   beiden Kästchen für eines hält. Gestalt und Maße kommen von
   .bd-feld--kasten; hier steht nur der Abstand. */
.bd-feld--zusatz {
	margin-top: calc(var(--bd-mass) * -0.5);
}

/* --- Der Hinweis über einem Formular vor seiner Freigabe ------------------
   Sieht absichtlich aus wie eine Notiz und nicht wie Seiteninhalt: Ihn sehen
   nur angemeldete Redakteure, Besucherinnen sehen an dieser Stelle den Satz
   mit dem Datum (.bd-anmeldung-vorher). */
.bd-anmeldung-vorschau {
	font-family: var(--wp--preset--font-family--archivo), system-ui, sans-serif;
	font-size: 0.8125rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--nachtblau-600, #3c435b);
	background: var(--wp--preset--color--messing-100, #f4efe6);
	border-left: 2px solid var(--wp--preset--color--messing-500, #b59969);
	padding: 0.7em 0.9em;
	margin: 0 0 1.6em;
}