/*
Theme Name: Benjamin Dio – Relationale Präsenz
Theme URI: https://benjamindio.com
Author: Benjamin Dio Sonnleitner
Author URI: https://benjamindio.com
Description: Block-Theme für benjamindio.com. Ruhig, literarisch, persönlich: große EB-Garamond-Typografie, kleine Archivo-Versalien, Altrosa als Grundstimmung, Weiß als Leseraum, Nachtblau als stärkster Akzent. Farben, Schriften und Abstände liegen zentral in der theme.json.
Version: 1.8.8
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: benjamin-dio
Tags: block-theme, full-site-editing, editorial, accessibility-ready
*/

/* =========================================================================
   1. Schriften, lokal eingebunden
   ========================================================================= */

@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("assets/fonts/EBGaramond-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("assets/fonts/EBGaramond-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "EB Garamond";
	font-style: italic;
	font-weight: 400 500;
	font-display: swap;
	src: url("assets/fonts/EBGaramond-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

@font-face {
	font-family: "EB Garamond";
	font-style: italic;
	font-weight: 400 500;
	font-display: swap;
	src: url("assets/fonts/EBGaramond-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 500;
	font-stretch: 100%;
	font-display: swap;
	src: url("assets/fonts/Archivo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 500;
	font-stretch: 100%;
	font-display: swap;
	src: url("assets/fonts/Archivo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. Grundlagen
   ========================================================================= */

:root {
	--bd-linie-messing: #b59969;
	--bd-linie-messing-zart: #daccb4;
	--bd-linie-altrosa: #d9bfc1;
	--bd-linie-salbei: #a7b6a1;
	--bd-fokus: #202431;
	--bd-fokus-hell: #ffffff;
	--bd-lesebreite: 38rem;
	--bd-abschnitt: clamp(2.5rem, 1.9rem + 3vw, 5rem);
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: oldstyle-nums;
	hyphens: manual;
}

/* Keine horizontalen Überläufe, auch nicht durch lange Wörter oder Adressen. */
p,
li,
h1,
h2,
h3,
h4,
dt,
dd,
blockquote {
	overflow-wrap: break-word;
}

/* Bilder reservieren ihren Platz, damit beim Laden nichts springt. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* =========================================================================
   3. Sichtbarer Fokus und Sprungmarke
   ========================================================================= */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--bd-fokus);
	outline-offset: 3px;
	border-radius: 0;
}

/* Auf dunklen Flächen wechselt der Fokusrahmen auf Weiß. */
.bd-dunkel :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-nachtblau-600-background-color :where(a, button, summary):focus-visible,
.has-nachtblau-700-background-color :where(a, button, summary):focus-visible,
.has-altrosa-700-background-color :where(a, button, summary):focus-visible,
.has-altrosa-600-background-color :where(a, button, summary):focus-visible,
.has-eukalyptus-background-color :where(a, button, summary):focus-visible {
	outline-color: var(--bd-fokus-hell);
}

.bd-sprungmarke {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	display: inline-block;
	padding: 0.9rem 1.5rem;
	background: var(--wp--preset--color--nachtblau-600);
	color: #fff;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
}

.bd-sprungmarke:focus {
	left: 1rem;
	top: 1rem;
}

/* =========================================================================
   4. Dunkle Flächen: die Schaltflächen
   =========================================================================
   Welche Fläche weiße Schrift trägt, erzeugt gestaltung/baue-flaechen-css.py
   weiter unten aus der Palette. Hier steht nur, was sich nicht rechnen lässt. */

/* Schaltflächen auf dunklem Grund: weiße Fläche, nachtblaue Schrift. */
.bd-dunkel .wp-block-button.is-style-outline .wp-block-button__link,
.has-nachtblau-600-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff;
	border: 1px solid #fff;
	background: transparent;
}

.bd-dunkel .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-nachtblau-600-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--nachtblau-600);
}

/* =========================================================================
   5. Typografie im Lesetext
   ========================================================================= */

.bd-lesetext > * {
	max-width: var(--bd-lesebreite);
}

/* Links im Fließtext zusätzlich unterstrichen. */
.entry-content a:where(:not(.wp-element-button):not(.wp-block-button__link)),
.bd-lesetext a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}

/* Große Überschriften brechen ausgeglichen um, statt eine kurze Restzeile
   stehen zu lassen. Browser ohne diese Eigenschaft ignorieren sie. */
h1,
h2,
.bd-claim {
	text-wrap: balance;
}

/* Kleine Archivo-Rubrik. */
.bd-rubrik {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--altrosa-700);
	margin-bottom: 0.75rem;
}

.bd-rubrik--gruen {
	color: var(--wp--preset--color--eukalyptus-dunkel);
}

.bd-rubrik--blau {
	color: var(--wp--preset--color--nachtblau-600);
}

/* Ergänzender Text: Datum, Hinweise, Nebenangaben. */
.bd-meta {
	color: var(--wp--preset--color--nachtblau-500);
	font-size: 1rem;
	line-height: 1.55;
}

/* Hinweisabsatz, etwa zum Charakter der Angebote. */
.bd-hinweis {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--nachtblau-500);
	border-top: 1px solid var(--bd-linie-messing-zart);
	padding-top: 1rem;
	max-width: var(--bd-lesebreite);
}

/* Feine Messinglinie als Gliederung. */
.bd-linie {
	border: 0;
	border-top: 1px solid var(--bd-linie-messing);
	width: 4rem;
	margin: 0 0 1.5rem;
	height: 0;
}

.bd-linie--voll {
	width: 100%;
	border-top-color: var(--bd-linie-messing-zart);
}

.bd-linie--altrosa {
	border-top-color: var(--bd-linie-altrosa);
}

.bd-linie--salbei {
	border-top-color: var(--bd-linie-salbei);
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	border-top: 1px solid var(--bd-linie-messing);
	border-bottom: 0;
	width: 4rem;
	opacity: 1;
}

/* Claim-Zeile. */
.bd-claim {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: var(--wp--preset--font-size--unter);
	line-height: 1.3;
	font-weight: 500;
	color: var(--wp--preset--color--nachtblau-600);
}

/* Großes Zitat auf farbiger Fläche. */
.bd-zitat p {
	font-size: var(--wp--preset--font-size--zitat);
	line-height: 1.28;
	font-weight: 400;
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

/* =========================================================================
   6. Kopfbereich
   ========================================================================= */

/* Der Kopf steht seit dem 10. Oktober 2026 auf Nachtblau 600, nach Bauplan 5.
   Die Farbe setzt der Baustein selbst als Blockfarbe; hier steht sie nicht
   noch einmal. Zwei Stellen für eine Farbe heißt, dass eine davon irgendwann
   das Gegenteil behauptet — vorher stand hier Altrosa 100. */
.bd-kopf {
	border-bottom: 1px solid var(--bd-linie-messing);
}

/* Die Wortmarke im Kopf trägt dieselbe dunkle Fassung wie im Fuß. Ihr Name
   wäre sonst in Nachtblau 700 auf Nachtblau 600 gesetzt und damit kaum zu
   lesen; .bd-marke--dunkel stellt ihn auf Weiß. */
.bd-kopf .bd-marke__werk {
	color: var(--wp--preset--color--messing-300);
}

/* Die Wortmarke: das Monogramm als gezeichnete Marke, Name und Werkbegriff
   als echter Text. So bleibt der Werkbegriff lesbar und die Marke skaliert
   mit der Schrift statt als Grafik zu verkleinern. */
.bd-marke {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
}

.bd-marke__monogramm {
	display: block;
	width: auto;
	height: clamp(2.125rem, 1.9rem + 1vw, 2.5rem);
	flex: 0 0 auto;
}

.bd-marke__text {
	display: block;
}

.bd-marke__name {
	display: block;
	font-family: var(--wp--preset--font-family--garamond);
	font-weight: 500;
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
	line-height: 1;
	letter-spacing: 0.14em;
	font-variant-caps: all-small-caps;
	color: var(--wp--preset--color--nachtblau-700);
	padding-bottom: 0.28rem;
	border-bottom: 1px solid var(--wp--preset--color--messing-500);
}

.bd-marke__werk {
	display: block;
	margin-top: 0.34rem;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 500;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nachtblau-500);
}

.bd-marke:hover .bd-marke__name,
.bd-marke:focus-visible .bd-marke__name {
	color: var(--wp--preset--color--nachtblau-600);
}

/* Im Fuß: sämtliche Schrift reines Weiß, die Linie bleibt Messing. */
.bd-marke--dunkel .bd-marke__name,
.bd-marke--dunkel .bd-marke__werk {
	color: #fff;
}

.bd-marke--dunkel .bd-marke__monogramm {
	height: clamp(2.375rem, 2.1rem + 1.2vw, 2.875rem);
}

.bd-marke--dunkel .bd-marke__name {
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
}

.bd-marke--dunkel .bd-marke__werk {
	font-size: 0.8125rem;
}

/* Die Navigation trägt sieben Einträge. Damit sie auf großen Bildschirmen
   neben der Wortmarke in einer Zeile bleibt, steht sie am unteren Ende des
   zulässigen Größenbereichs. Darunter bricht sie unter die Wortmarke um,
   ab 600 px übernimmt das beschriftete Menü. */
.bd-kopf .wp-block-navigation {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

@media (min-width: 87.5rem) {
	.bd-kopf .wp-block-navigation {
		font-size: 0.8125rem;
		letter-spacing: 0.09em;
	}
}

/* Die schmale Zeile über der Navigation, seit dem 29. Oktober 2026.

   Dios Wunsch: Konto, Warenkorb und das Sprachkürzel sollen nicht an der
   Menüleiste kleben, sondern eine Zeile höher und weiter rechts stehen.

   Warum das über die Reihenfolge und nicht über den Baustein geht: Konto und
   Warenkorb stehen gar nicht in parts/header.html. WooCommerce setzt sie beim
   Ausliefern selbst hinter die Navigation — nachgesehen am 29. Oktober 2026,
   die installierte Datei ist Zeichen für Zeichen dieselbe wie die im Projekt.
   Umhängen lassen sie sich von hier aus also nicht, ihre Reihenfolge in der
   Zeile schon. Wer den Kopf einmal umbaut, muss das wissen: Die beiden sind
   Gäste, keine Bewohner, und ein Plugin-Update kann sie woanders hinsetzen.

   Der Umbruch entsteht durch ein leeres Element in der Mitte, das eine ganze
   Zeile breit ist. Alles mit kleinerer Ordnungszahl steht darüber, alles mit
   größerer darunter. Das ist der übliche Weg, in einer einzigen Flex-Zeile
   zwei Zeilen zu bekommen, ohne die Verschachtelung zu ändern.

   Das Sprachkürzel bekommt den linken Außenabstand auto: Der verschluckt den
   freien Platz der oberen Zeile, bevor space-between ihn zwischen die drei
   verteilen kann. So stehen sie beieinander am rechten Rand statt auseinander-
   gezogen über die ganze Breite. */
.bd-kopf > .wp-block-group {
	row-gap: 0;
}

.bd-kopf > .wp-block-group::before {
	content: "";
	flex-basis: 100%;
	order: 0;
	height: 0;
	margin: 0;
}

/* Drei getrennte Ordnungszahlen, nicht eine gemeinsame: Bei gleicher Zahl
   entscheidet die Reihenfolge im Dokument, und dort stehen Konto und
   Warenkorb vor dem Sprachkürzel. Der linke Außenabstand auto greift dann
   nur vor dem Kürzel und schiebt die beiden anderen nicht mit -- sie blieben
   am linken Rand stehen, über dem Monogramm. Am 30. Oktober 2026 war genau
   das auf der Website zu sehen. Das Kürzel muss das erste der drei sein,
   damit sein Abstand den freien Platz vor der ganzen Gruppe verschluckt. */
.bd-kopf .bd-sprachmarke {
	order: -3;
}

.bd-kopf .wp-block-woocommerce-customer-account {
	order: -2;
}

.bd-kopf .wp-block-woocommerce-mini-cart {
	order: -1;
}

.bd-kopf .bd-marke {
	order: 1;
}

.bd-kopf .wp-block-navigation {
	order: 2;
}

.bd-kopf .bd-sprachmarke {
	margin: 0 0 0 auto;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bd-kopf .bd-sprachmarke a {
	color: var(--wp--preset--color--messing-300);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.1em;
}

.bd-kopf .bd-sprachmarke a:hover,
.bd-kopf .bd-sprachmarke a:focus-visible {
	border-bottom-color: var(--wp--preset--color--messing-300);
}

/* Die Flagge trägt keine Versalien und keine Sperrung: Beides verschiebt sie
   gegen das Kürzel daneben. Etwas größer als der Text, weil sie als Bild
   sonst kleiner wirkt als sie misst. */
.bd-kopf .bd-sprachmarke a span {
	letter-spacing: 0;
	font-size: 1.15em;
	vertical-align: -0.06em;
}



/* Navigation: nachtblau, Versalien, deutliche Trefferfläche. */
.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--nachtblau-600);
	text-decoration: none;
	padding-block: 0.65rem;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 1px;
}

/* Aktive Seite: nachtblaue Unterstreichung, auch im Glossarbereich. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--nachtblau-600);
}

/* Untermenüs ruhig halten. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid var(--bd-linie-altrosa);
	box-shadow: none;
	padding-block: 0.5rem;
	min-width: 16rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.1rem;
}

/* Menü-Schaltfläche mobil: beschriftet, ausreichend groß.
   Hier steht bewusst keine Angabe zu display: WordPress blendet diese
   Schaltflächen je nach Breite selbst ein und aus. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-height: 48px;
	min-width: 48px;
	align-items: center;
	gap: 0.5rem;
	/* Keine eigene Farbe: Der Knopf nimmt die der Navigation. Hier stand bis
	   zum 10. Oktober 2026 Nachtblau 600 — richtig, solange der Kopf Altrosa
	   trug, und unsichtbar, seit er selbst Nachtblau 600 ist. Eine Farbe an
	   zwei Stellen festzulegen heißt, dass eine davon irgendwann falsch ist. */
	color: inherit;
}

/* WordPress gibt der Schaltfläche nur ein Symbol. Eine sichtbare Beschriftung
   sagt deutlicher, was sie tut, als ein Symbol allein. */
.wp-block-navigation__responsive-container-open::after {
	content: "Menü";
}

.wp-block-navigation__responsive-container-close::after {
	content: "Schließen";
}

.wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-close::after {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Das geöffnete Menü: Farbe und Schrift stehen am Block selbst
   (overlayBackgroundColor, overlayTextColor) und werden hier nicht noch einmal
   gesetzt. Vorher stand hier Altrosa 100, während die Einträge auf Weiß
   standen — weiße Schrift auf hellem Grund. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.25rem, 0.25rem + 5vw, 2rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1rem;
	padding-block: 0.85rem;
}

/* Die Schaltfläche „Brief abonnieren“ im Kopf. */
.bd-kopf .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* =========================================================================
   7. Abschnitte und Bildflächen
   ========================================================================= */

.bd-abschnitt {
	padding-block: var(--bd-abschnitt);
}

.bd-abschnitt--schmal {
	padding-block: calc(var(--bd-abschnitt) * 0.66);
}

/* Bannerfläche: Fotos flächenfüllend, Zeichnungen vollständig sichtbar.
   Der Fokuspunkt lässt sich je Motiv über die Variablen einstellen. */
.bd-banner {
	--bd-banner-hoehe: clamp(16rem, 12rem + 24vw, 30rem);
	--bd-banner-fokus-x: 50%;
	--bd-banner-fokus-y: 50%;
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--altrosa-100);
	min-height: var(--bd-banner-hoehe);
}

.bd-banner figure,
.bd-banner .wp-block-image {
	margin: 0;
	height: 100%;
}

.bd-banner img {
	width: 100%;
	height: 100%;
	min-height: var(--bd-banner-hoehe);
	object-fit: cover;
	object-position: var(--bd-banner-fokus-x) var(--bd-banner-fokus-y);
	display: block;
}

/* Fokuspunkt je Motiv, getrennt wählbar. */
.bd-banner--fokus-oben {
	--bd-banner-fokus-y: 22%;
}

.bd-banner--fokus-unten {
	--bd-banner-fokus-y: 78%;
}

.bd-banner--fokus-links {
	--bd-banner-fokus-x: 25%;
}

.bd-banner--fokus-rechts {
	--bd-banner-fokus-x: 75%;
}

/* Höhen: ruhiges Band, hohe Fläche, oder volle Höhe neben Text. */
.bd-banner--band {
	--bd-banner-hoehe: clamp(12rem, 9rem + 18vw, 22rem);
}

.bd-banner--hoch {
	--bd-banner-hoehe: clamp(18rem, 13rem + 30vw, 34rem);
}

/* Neben Text: eine Höhe, die auch neben kurzen Einstiegen ruhig wirkt. */
.bd-banner--neben-text {
	--bd-banner-hoehe: clamp(15rem, 11rem + 22vw, 26rem);
}

@media (max-width: 40.625rem) {
	.bd-banner--neben-text {
		--bd-banner-hoehe: clamp(13rem, 10rem + 22vw, 18rem);
	}
}

/* Freigestellte Motive, etwa das Porträt: nie beschneiden, nichts dahinter
   legen, Originalfarben und Kanten erhalten. */
.bd-banner--freigestellt {
	background: transparent;
	min-height: 0;
}

.bd-banner--freigestellt img {
	object-fit: contain;
	height: auto;
	min-height: 0;
}

/* Zeichnungen: vollständig zeigen, feine Linien erhalten, nicht beschneiden. */
.bd-banner--zeichnung {
	background: var(--wp--preset--color--altrosa-100);
}

.bd-banner--zeichnung img {
	object-fit: contain;
	height: auto;
	min-height: 0;
}

/* =========================================================================
   7a. Die Fläche hinter der Seitenüberschrift, je Bereich
   =========================================================================
   Jeder Bereich der Website trägt eine eigene Fläche. Das ist keine zusätzliche
   Farbe, sondern eine Ordnung: Alle Töne stammen aus der Palette, und Grün
   bleibt dem Glossar vorbehalten. Die Website bleibt überwiegend hell, weil
   die große Lesefläche darunter in jedem Fall weiß ist. */

.bd-titelflaeche {
	background-color: var(--wp--preset--color--altrosa-100);
}

.bd-bereich-glossar .bd-titelflaeche {
	background-color: var(--wp--preset--color--salbei-hell);
}

.bd-bereich-konzept .bd-titelflaeche {
	background-color: var(--wp--preset--color--nachtblau-600);
}

.bd-bereich-buecher .bd-titelflaeche {
	background-color: var(--wp--preset--color--altrosa-700);
}

.bd-bereich-uebung .bd-titelflaeche {
	background-color: var(--wp--preset--color--altrosa-600);
}

.bd-bereich-salon .bd-titelflaeche {
	background-color: #3c435b;
	background-image: linear-gradient(115deg, #444c65 0%, #353e52 100%);
}

.bd-bereich-wort .bd-titelflaeche {
	background-color: #ffffff;
	border-bottom: 1px solid var(--bd-linie-messing-zart);
}

.bd-bereich-recht .bd-titelflaeche {
	background-color: var(--wp--preset--color--altrosa-100);
}

/* Auf den dunklen Bereichsflächen ist sämtliche Schrift reines Weiß. */
:is(.bd-bereich-konzept, .bd-bereich-buecher, .bd-bereich-uebung, .bd-bereich-salon)
	.bd-titelflaeche
	:is(h1, h2, p, a, .bd-rubrik, .bd-meta, .wp-block-post-date) {
	/* WordPress gibt Farbklassen mit !important aus. Ohne !important würde
	   eine im Editor gesetzte Textfarbe das Weiß hier überstimmen. */
	color: #fff !important;
	opacity: 1;
}

/* Die feine Linie wechselt auf dunklem Grund zum helleren Messing. */
:is(.bd-bereich-konzept, .bd-bereich-buecher, .bd-bereich-salon)
	.bd-titelflaeche
	:is(.bd-linie, .wp-block-separator) {
	border-top-color: var(--bd-linie-messing-zart);
}

/* Auf Altrosa 600 bliebe Messing zu schwach; dort steht die Linie in Weiß. */
.bd-bereich-uebung .bd-titelflaeche :is(.bd-linie, .wp-block-separator) {
	border-top-color: #fff;
}

/* =========================================================================
   7b. Frei gewählte Titelflächen
   =========================================================================
   Die Vorlagen „Seite: Titel auf …“ setzen die Fläche ausdrücklich und
   überstimmen damit die automatische Fläche des Bereichs. Die Schriftfarbe
   folgt der Fläche von selbst: auf dunklen Flächen Weiß, auf hellen Nachtblau.
   Dieselben Regeln gelten für die Bausteine „Titelbereich“ im Editor. */

/* Rückfall für den Verlauf: Greift er einmal nicht, bleibt die Fläche dunkel
   und die weiße Schrift lesbar. */
.has-nachtblau-verlauf-gradient-background {
	background-color: var(--wp--preset--color--nachtblau-600);
}

.bd-titelwahl.has-weiss-background-color {
	border-bottom: 1px solid var(--bd-linie-messing-zart);
}

.bd-titelwahl:is(
		.has-nachtblau-600-background-color,
		.has-nachtblau-700-background-color,
		.has-nachtblau-verlauf-gradient-background,
		.has-altrosa-700-background-color,
		.has-eukalyptus-background-color
	)
	:is(.bd-linie, .wp-block-separator) {
	border-top-color: var(--bd-linie-messing-zart);
}

/* Auf Altrosa 600 bliebe Messing zu schwach; dort steht die Linie in Weiß. */
.bd-titelwahl.has-altrosa-600-background-color :is(.bd-linie, .wp-block-separator) {
	border-top-color: #fff;
}

/* Rubrik über dem Titel: auf dunklen Flächen Weiß, auf Salbei grün. */
.bd-titelwahl.has-salbei-hell-background-color .bd-rubrik {
	color: var(--wp--preset--color--eukalyptus-dunkel);
}

/* Bildbanner hinter der Seitenüberschrift.
   Statt einer gleichmäßigen Abdunklung liegt ein Verlauf über dem Motiv: oben
   bleibt das Bild fast unberührt, unten, wo die Überschrift steht, trägt es
   Nachtblau. Dort erreicht Weiß etwa 6,3 zu 1 und ist damit in jeder Größe
   ausreichend. */
.bd-titelbanner {
	position: relative;
	min-height: clamp(19rem, 14rem + 26vw, 31rem) !important;
	padding-top: var(--wp--preset--spacing--70);
	/* Genug Raum unter der Überschrift, damit sie nicht auf der Kante sitzt. */
	padding-bottom: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);
}

/* Die Überschrift im Banner: kurze Zeilen, ausgeglichener Umbruch, etwas
   ruhigerer Zeilenabstand als auf hellem Grund, weil Weiß auf dunklem Bild
   optisch enger wirkt. */
.bd-titelbanner h1 {
	max-width: 18ch;
	line-height: 1.04;
	text-wrap: balance;
}

@media (max-width: 40.625rem) {
	.bd-titelbanner h1 {
		max-width: 14ch;
	}
}

.bd-titelbanner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Die Farbe kommt aus --bd-band-rgb, gesetzt von der Klasse bd-band-* am
	   Körper (erzeugt, siehe unten). Ohne Klasse bleibt es Nachtblau 800. So
	   trägt eine Vorlage mehrere Seiten mit je eigenem Band. */
	background: linear-gradient(
		180deg,
		rgb(var(--bd-band-rgb, 32 36 49) / 0.08) 0%,
		rgb(var(--bd-band-rgb, 32 36 49) / 0.42) 48%,
		rgb(var(--bd-band-rgb, 32 36 49) / 0.88) 100%
	);
}

.bd-titelbanner .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
}

.bd-titelbanner :is(h1, h2, p, .bd-rubrik) {
	color: #fff;
	opacity: 1;
}

/* Ohne Motiv bleibt eine ruhige nachtblaue Fläche, kein leeres Bildfeld. */
.bd-titelbanner .wp-block-cover__image-background {
	object-position: var(--bd-banner-fokus-x, 50%) var(--bd-banner-fokus-y, 50%);
}

/* Abschnitt mit Bild im Hintergrund: derselbe Verlauf wie beim Titelbanner,
   damit weiße Schrift auf jedem der Motive lesbar bleibt. */
.bd-bildflaeche {
	position: relative;
	min-height: clamp(18rem, 13rem + 20vw, 28rem) !important;
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);
}

.bd-bildflaeche::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Die Farbe kommt aus --bd-band-rgb, gesetzt von der Klasse bd-band-* am
	   Körper (erzeugt, siehe unten). Ohne Klasse bleibt es Nachtblau 800. So
	   trägt eine Vorlage mehrere Seiten mit je eigenem Band. */
	background: linear-gradient(
		180deg,
		rgb(var(--bd-band-rgb, 32 36 49) / 0.08) 0%,
		rgb(var(--bd-band-rgb, 32 36 49) / 0.42) 48%,
		rgb(var(--bd-band-rgb, 32 36 49) / 0.88) 100%
	);
}

.bd-bildflaeche .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
}

.bd-bildflaeche :is(h1, h2, h3, p, li, a, .bd-rubrik) {
	color: #fff;
	opacity: 1;
}

/* Wenn Text über einem dunklen Foto steht: dezente nachtblaue Abdunklung. */
.bd-banner--text-darauf::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(32, 36, 49, 0.15) 0%, rgba(32, 36, 49, 0.55) 100%);
	pointer-events: none;
}

.bd-banner__text {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(1.25rem, 0.25rem + 5vw, 2.5rem);
	color: #fff;
}

.bd-banner__text :is(h1, h2, h3, p, .bd-rubrik) {
	color: #fff;
}

/* Platzhalterfläche, solange ein Motiv fehlt: ruhige Farbfläche, kein Ersatzbild. */
.bd-platzhalter {
	min-height: clamp(14rem, 10rem + 22vw, 26rem);
	background: var(--wp--preset--color--altrosa-100);
	border: 1px solid var(--bd-linie-altrosa);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
}

/* Porträt und Zeichnungen im persönlichen Bereich. */
.bd-portraet img {
	display: block;
	width: 100%;
	height: auto;
}

/* Handschriftliche Signatur: Abschluss persönlicher Textblöcke. */
.bd-signatur img {
	display: block;
	width: clamp(9rem, 7rem + 8vw, 14rem);
	height: auto;
	margin-top: 1.5rem;
}

/* =========================================================================
   8. Zwei Spalten, die mobil sauber stapeln
   ========================================================================= */

.bd-zweispaltig {
	display: grid;
	gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 41rem) {
	.bd-zweispaltig {
		grid-template-columns: 1fr 1fr;
	}

	.bd-zweispaltig--text-breit {
		grid-template-columns: 1.15fr 0.85fr;
	}

	.bd-zweispaltig--bild-breit {
		grid-template-columns: 0.85fr 1.15fr;
	}
}

/* Gestapelt steht das Bild über dem Text, nicht darunter — dort, wo diese
   Klasse gesetzt ist. Gebraucht auf /karte: Das Porträt bestätigt die
   Begegnung, die der Vorspann darüber behauptet, und diese Reihenfolge soll
   auf dem Telefon dieselbe sein wie am Schirm. Steht das Gesicht erst unter
   dem ganzen Text, kommt es nach der Sache statt zu ihr.
   Dio am 16. Oktober 2026, Prüfliste Punkt 6.

   Dasselbe Mittel wie bei .bd-eroeffnung__bild auf der Startseite. Die
   Grenze ist 40.9375rem und nicht wie sonst 40.625rem, weil sie genau an
   .bd-zweispaltig anschließen muss: Die wird ab 41rem zweispaltig, und die
   sechs Pixel dazwischen wären sonst eine Lücke, in der das Bild wieder
   nach unten rutscht. */
@media (max-width: 40.9375rem) {
	.bd-zweispaltig > .bd-bild-zuerst-gestapelt {
		order: -1;
	}
}

/* Die Kernspalten-Blöcke brechen schon ab 650 px um, nicht erst bei 782 px. */
@media (max-width: 40.625rem) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* =========================================================================
   8a. Die Bücher als Karten
   ========================================================================= */

.bd-buchflaeche {
	background-color: var(--wp--preset--color--altrosa-100);
}

.bd-buchraster {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 40.625rem) {
	.bd-buchraster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62.5rem) {
	.bd-buchraster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Die Bücherreihen stehen in der weiten Fläche, nicht im Lesemaß.

   Das Raster ist ein nacktes ul aus inc/buecher.php und damit ein Kind der
   Inhaltsspalte. WordPress gibt deren Kindern max-width: content-size, also
   38rem. Drei Umschläge teilten sich darum 608 Pixel: jeder 141 Pixel breit,
   kleiner als ein Daumennagel, während rechts die halbe Seite leer blieb.
   Dio am 20. Oktober 2026: „Größe anpassen bei: Bücher."

   Zwei Dinge sind dafür nötig, und das zweite ist leicht zu übersehen: Die
   Breite allein reicht nicht, die max-width muss mit aufgehoben werden. Gegen
   sie helfen auch negative Ränder nichts — erst beides zusammen bricht aus
   der Lesespalte aus. Die Klasse alignwide tut es hier nicht: Die Layoutregeln
   von WordPress fassen nur Blöcke, keine eingefügten Listen.

   Die Maße kommen aus theme.json (71rem weit, 38rem Inhalt) und nicht als
   Zahl hierher, damit das Raster mitwandert, wenn dort jemand etwas ändert.
   Die Schranke bei 75rem lässt Luft für das Seitenpolster; darunter bleibt
   das Raster im Lesemaß, sonst liefe es aus dem Fenster. Nachgemessen am
   20. Oktober 2026 bei 1280 Pixeln: Raster 1136, Karte 357, Umschlag 317,
   kein waagrechter Überlauf. */
@media (min-width: 75rem) {
	.bd-buchraster {
		max-width: none;
		width: var(--wp--style--global--wide-size, 71rem);
	}
}

.bd-buch {
	position: relative;
	margin: 0;
	padding: 1.25rem 1.25rem 1.5rem;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Das Cover behält sein Format 5,5 zu 8,5 und wird nie beschnitten. */
.bd-buch__cover {
	aspect-ratio: 5.5 / 8.5;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--bd-linie-messing-zart);
	padding-bottom: 1.25rem;
	margin-bottom: 0.25rem;
}

.bd-buch__cover img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Fehlt ein Cover, steht dort eine ruhige Fläche mit dem Titel. */
.bd-buch__platzhalter {
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--altrosa-100);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	text-align: center;
}

.bd-buch__platzhalter span {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--wp--preset--color--nachtblau-600);
}

.bd-buch__rubrik {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--altrosa-700);
}

.bd-buch__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--garamond);
	font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--nachtblau-600);
}

.bd-buch__titel a {
	color: inherit;
	text-decoration: none;
}

/* Ein Link im Markup, die ganze Karte anklickbar. */
.bd-buch__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bd-buch__titel a:hover {
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.bd-buch__untertitel {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--wp--preset--color--nachtblau-500);
}

.bd-buch__satz {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--wp--preset--color--nachtblau-800);
}

.bd-buch__bewegung {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--wp--preset--color--nachtblau-500);
}

.bd-buch__status {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--altrosa-700);
}

.bd-buch__angaben {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--nachtblau-600);
}

.bd-buch__amazon {
	position: relative;
	z-index: 1;
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.bd-buch__amazon a {
	color: var(--wp--preset--color--nachtblau-600);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.bd-buch__weiter {
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 44px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nachtblau-600);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* Der Fokusrahmen der Karte steht, wie im Auftrag festgelegt, in Messing. */
.bd-buch__titel a:focus-visible {
	outline: none;
}

.bd-buch:has(.bd-buch__titel a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--messing-500);
	outline-offset: 2px;
}

/* Browser ohne :has bekommen den Rahmen am Titel selbst. */
@supports not selector(:has(*)) {
	.bd-buch__titel a:focus-visible {
		outline: 2px solid var(--wp--preset--color--messing-500);
		outline-offset: 2px;
	}
}

/* =========================================================================
   8b. Die Seite eines Bandes
   ========================================================================= */

.bd-band__cover img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 24rem;
}

.bd-band__angaben {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nachtblau-500);
}

.bd-band__untertitel {
	font-size: var(--wp--preset--font-size--unter);
	line-height: 1.3;
	font-weight: 400;
	color: var(--wp--preset--color--nachtblau-500);
}

/* Die Leseprobe steht auf einer eigenen ruhigen Fläche. */
.bd-leseprobe {
	background: var(--wp--preset--color--altrosa-100);
	padding: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);
}

.bd-leseprobe p {
	max-width: var(--bd-lesebreite);
}

/* Die Schaltfläche in Messing trägt nachtblaue Schrift, damit sie in jeder
   Größe lesbar bleibt; Weiß käme auf Messing nur auf 2 zu 1. */
.wp-block-button.is-style-bd-messing .wp-block-button__link {
	background-color: var(--wp--preset--color--messing-500);
	color: var(--wp--preset--color--nachtblau-800);
}

.wp-block-button.is-style-bd-messing .wp-block-button__link:hover {
	background-color: #a4884f;
	color: var(--wp--preset--color--nachtblau-800);
}

/* =========================================================================
   9. Ein Weiterweg am Ende jeder Seite
   ========================================================================= */

.bd-weiterweg {
	border-top: 1px solid var(--bd-linie-messing-zart);
	padding-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
	margin-top: var(--bd-abschnitt);
	max-width: var(--bd-lesebreite);
}

.bd-weiterweg .bd-rubrik {
	margin-bottom: 0.5rem;
}

.bd-weiterweg p {
	margin-bottom: 1.25rem;
}

/* =========================================================================
   10. Glossar
   ========================================================================= */

.bd-glossar-einstieg {
	background: var(--wp--preset--color--salbei-hell);
}

.bd-glossar-register {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
}

.bd-glossar-register li {
	margin: 0;
}

.bd-glossar-register a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 0.85rem;
	background: #fff;
	border: 1px solid var(--bd-linie-salbei);
	color: var(--wp--preset--color--eukalyptus-dunkel);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
}

.bd-glossar-register a:hover,
.bd-glossar-register a:focus-visible {
	background: var(--wp--preset--color--eukalyptus-dunkel);
	color: #fff;
}

.bd-glossar-gruppe {
	background: #fff;
	scroll-margin-top: 2rem;
}

.bd-glossar-gruppe > h2 {
	color: var(--wp--preset--color--nachtblau-600);
	border-bottom: 1px solid var(--bd-linie-salbei);
	padding-bottom: 0.75rem;
	margin-bottom: 1.5rem;
}

/* Begriffe als zugängliche aufklappbare Definitionen. */
.bd-begriff {
	border-bottom: 1px solid var(--bd-linie-salbei);
}

.bd-begriff > summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 2.5rem 1rem 0;
	min-height: 48px;
	position: relative;
	font-family: var(--wp--preset--font-family--garamond);
	font-size: var(--wp--preset--font-size--unter);
	line-height: 1.25;
	font-weight: 500;
	color: var(--wp--preset--color--eukalyptus-dunkel);
}

.bd-begriff > summary::-webkit-details-marker {
	display: none;
}

.bd-begriff > summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 1px solid var(--wp--preset--color--eukalyptus-dunkel);
	border-bottom: 1px solid var(--wp--preset--color--eukalyptus-dunkel);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.18s ease;
}

.bd-begriff[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.bd-begriff > summary:hover {
	color: var(--wp--preset--color--anthrazit);
}

.bd-begriff > *:not(summary) {
	max-width: var(--bd-lesebreite);
	color: var(--wp--preset--color--anthrazit);
}

.bd-begriff > *:not(summary):last-child {
	margin-bottom: 1.5rem;
}

/* Hinweise auf verwandte Begriffe. */
.bd-verwandt {
	background: var(--wp--preset--color--salbei-hell);
	padding: 1rem 1.25rem;
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--anthrazit);
}

/* Der Block „Was bewegt Dich?“ im Glossar-Teaser der Startseite. */
.bd-was-bewegt {
	background: var(--wp--preset--color--eukalyptus);
	color: #fff;
	padding: clamp(1.5rem, 1.2rem + 1.8vw, 2.5rem);
}

.bd-was-bewegt :is(h2, h3, p, li, a, .bd-rubrik) {
	color: #fff;
	opacity: 1;
}

.bd-was-bewegt ul {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}

.bd-was-bewegt li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.35rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.bd-was-bewegt li a:hover,
.bd-was-bewegt li a:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--eukalyptus);
	border-color: #fff;
}

/* Der Glossar-Teaser selbst steht vollständig auf Weiß, auch hinter der grünen Box. */
.bd-glossar-teaser {
	background: #ffffff;
}

/* =========================================================================
   11. Formulare
   ========================================================================= */

.bd-formular {
	background: #fff;
	padding: clamp(1.5rem, 1.2rem + 1.8vw, 2.5rem);
	border: 1px solid var(--bd-linie-altrosa);
	max-width: 34rem;
}

.bd-dunkel .bd-formular,
.has-nachtblau-600-background-color .bd-formular {
	border-color: rgba(255, 255, 255, 0.4);
	background: transparent;
}

/* Ein sichtbarer Bauhinweis, kein scheinbar klickbarer Platzhalter.
   Er verschwindet, sobald der Anmeldeblock eingesetzt ist. */
.bd-einbau {
	border: 1px dashed var(--wp--preset--color--altrosa-600);
	padding: 1rem 1.25rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--altrosa-700);
	background: var(--wp--preset--color--altrosa-100);
}

.bd-formular__titel {
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-size: var(--wp--preset--font-size--unter);
	line-height: 1.25;
	color: var(--wp--preset--color--nachtblau-600);
}

.bd-formular--bestaetigung p {
	margin: 0;
}

/* Der stille Köder gegen automatisierte Einträge bleibt für Menschen unsichtbar. */
.bd-koeder {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bd-feld {
	margin-bottom: 1.25rem;
}

.bd-feld label,
.bd-formular label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nachtblau-600);
}

.bd-formular :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	width: 100%;
	font-family: var(--wp--preset--font-family--garamond);
	font-size: 1.0625rem;
	line-height: 1.5;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	color: var(--wp--preset--color--nachtblau-800);
	background: #fff;
	border: 1px solid var(--wp--preset--color--nachtblau-500);
	border-radius: 0;
}

.bd-formular textarea {
	min-height: 10rem;
	resize: vertical;
}

.bd-formular :is(input, textarea, select):focus-visible {
	outline: 3px solid var(--bd-fokus);
	outline-offset: 1px;
}

/* Kästchen: nie vorangekreuzt, ausreichend groß, Beschriftung daneben. */
.bd-kaestchen {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.bd-kaestchen input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0.2rem;
	accent-color: var(--wp--preset--color--nachtblau-600);
}

.bd-kaestchen label {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--nachtblau-800);
	margin: 0;
}

/* Sichtbare Fehlermeldung. */
.bd-fehler {
	display: block;
	margin-top: 0.4rem;
	font-size: 1rem;
	color: var(--wp--preset--color--altrosa-700);
}

.bd-formular :is(input, textarea)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--altrosa-700);
	border-width: 2px;
}

/* Einwilligungssatz unter dem Formular. */
.bd-einwilligung {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--nachtblau-500);
	margin-top: 1rem;
	max-width: 34rem;
}

/* Primäre Schaltflächen mindestens 48 px hoch. */
.wp-block-button__link,
.bd-formular button,
.bd-formular input[type="submit"] {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
}

.bd-formular button,
.bd-formular input[type="submit"] {
	background: var(--wp--preset--color--nachtblau-600);
	color: #fff;
	border: 0;
	padding: 0.85rem 1.75rem;
}

.bd-formular button:hover,
.bd-formular input[type="submit"]:hover {
	background: var(--wp--preset--color--nachtblau-700);
}

/* Der Anmeldeblock des Newsletter-Dienstes übernimmt dieselben Maße. */
.ml-form-embedContainer input[type="email"],
.ml-form-embedContainer input[type="text"] {
	font-size: 1.0625rem !important;
	min-height: 48px !important;
	border-radius: 0 !important;
}

.ml-form-embedContainer button,
.ml-form-embedSubmit button {
	min-height: 48px !important;
	border-radius: 0 !important;
	background-color: var(--wp--preset--color--nachtblau-600) !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
}

/* =========================================================================
   12. Fuß
   ========================================================================= */

.bd-fuss {
	background: var(--wp--preset--color--nachtblau-600);
	color: #fff;
}

.bd-fuss__spalten {
	display: grid;
	gap: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);
}

@media (min-width: 41rem) {
	.bd-fuss__spalten {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Vier Spalten nach Bauplan 5. Auf mittleren Breiten zwei und zwei, erst
	   ab breit alle vier: Vier Spalten auf einem Tablet wären je gut 150
	   Pixel, und darin bricht „Die sechs Grundbewegungen“ dreimal um. */
	.bd-fuss__spalten--vier {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62rem) {
	.bd-fuss__spalten--vier {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Die Firmenangabe: drei Zeilen, die zusammengehören und darum enger stehen
   als Fließtext. */
.bd-fuss__firma {
	line-height: 1.65;
}

/* Die Zeile über Cookies, fremde Server und Zählung. Archivo in Versalien,
   wie Bauplan 5 es verlangt, und etwas heller als Weiß, damit sie nicht mit
   dem Fließtext um Aufmerksamkeit streitet. */
.bd-fuss__cookiezeile {
	font-family: var(--wp--preset--font-family--archivo);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--wp--preset--color--messing-300);
	margin-block-start: var(--wp--preset--spacing--40);
}

.bd-fuss ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bd-fuss li {
	margin: 0;
}

.bd-fuss li a {
	display: inline-block;
	padding-block: 0.45rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: #fff;
	text-decoration: none;
}

.bd-fuss li a:hover,
.bd-fuss li a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bd-fuss__abschluss {
	border-top: 1px solid var(--bd-linie-messing);
	margin-top: clamp(2rem, 1.6rem + 2vw, 3rem);
	padding-top: 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
	color: #fff;
}

/* Der Pflichtknopf „Vertrag widerrufen“ aus dem Widerrufsbutton-Plugin.

   Das Plugin hängt sein Element direkt an den <body>, hinter die Fußzeile.
   Es steht damit außerhalb jeder Vorlage, und unverändert liegt unter dem
   dunklen Fuß ein heller Streifen mit einem dunklen Block darauf. Diese
   Regel gibt dem Streifen die Farbe des Fußes, sodass die Zeile als dessen
   letzte liest.

   Leise ja, versteckt nein: Schriftgröße, Farbe und Zeilenhöhe sind die der
   übrigen Fußzeilenlinks, der Unterstrich steht dauerhaft, und die
   Beschriftung bleibt der Wortlaut, den das Gesetz verlangt — darum auch
   keine Versalien, die das Plugin sonst über .wp-element-button bekommt.
   Kleiner, blasser oder ohne Unterstrich wäre ein Mangel und nicht
   Zurückhaltung: Verlangt ist eine gut lesbare, deutlich beschriftete
   Schaltfläche. */
body .eu-owb-order-withdraw-from-contract-button {
	/* nachtblau-700, nicht -600: Die Fußzeile bekommt ihre Farbe nicht aus
	   der Regel .bd-fuss weiter oben, sondern aus parts/footer.html, wo der
	   Gruppenblock backgroundColor "nachtblau-700" trägt. Die Klasse des
	   Blocks sticht die Regel, und wer hier -600 nimmt, setzt einen hellen
	   Streifen unter einen dunklen Fuß. */
	background: var(--wp--preset--color--nachtblau-700);
	margin: 0;
	padding-block: 0.6rem 1.5rem;
	text-align: center;
}

body .eu-owb-order-withdraw-from-contract-button :is(a.button, a.wp-element-button) {
	display: inline-block;
	min-height: 0;
	padding: 0.45rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body .eu-owb-order-withdraw-from-contract-button :is(a.button, a.wp-element-button):hover,
body .eu-owb-order-withdraw-from-contract-button :is(a.button, a.wp-element-button):focus-visible {
	background: none;
	color: #fff;
	text-decoration-thickness: 2px;
}

/* =========================================================================
   13. Beiträge und Übersichten
   ========================================================================= */

.bd-beitragsliste {
	display: grid;
	gap: clamp(2rem, 1.6rem + 2vw, 3rem);
}

@media (min-width: 41rem) {
	.bd-beitragsliste {
		grid-template-columns: repeat(2, 1fr);
	}
}

.bd-beitrag {
	border-top: 1px solid var(--bd-linie-messing);
	padding-top: 1.25rem;
}

.bd-beitrag h2,
.bd-beitrag h3 {
	margin-top: 0.35rem;
}

/* =========================================================================
   14. Bewegung
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   14c. Weitere Blockvarianten
   =========================================================================
   Sie stehen im Editor rechts unter „Stile“ und brauchen keine Einstellung
   von Hand. */

/* Karte: eine Gruppe mit haarfeinem Messingrahmen auf weißem Grund. */
.bd-karte {
	background-color: #ffffff;
	border: 1px solid var(--bd-linie-messing-zart);
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}

.bd-karte > :first-child {
	margin-block-start: 0;
}

.bd-karte > :last-child {
	margin-block-end: 0;
}

/* Auf dunklem Grund kehrt sich die Karte um, damit sie nicht als weißer
   Fleck auf der Fläche steht. */
:is(.bd-dunkel, .bd-flaeche-dunkel, [class*="-background-color"]) .bd-karte:not(.has-background) {
	background-color: transparent;
	border-color: var(--bd-linie-messing-zart);
}

/* Die Linie über einem mittig gesetzten Titel steht ebenfalls mittig. */
.bd-linie-mittig {
	margin-inline: auto;
}

/* Bild mit haarfeinem Messingrahmen. */
.bd-bildrahmen img {
	border: 1px solid var(--bd-linie-messing);
}

/* Überschrift mit Linie darüber, als ruhiger Abschnittsanfang. */
.bd-ueberlinie {
	border-top: 1px solid var(--bd-linie-messing);
	padding-block-start: 0.6em;
}

/* Vorspann: der erste Absatz eines Textes, etwas größer und ruhiger. */
.bd-vorspann {
	font-size: var(--wp--preset--font-size--vorspann);
	line-height: 1.55;
	color: var(--wp--preset--color--nachtblau-600);
}

:is(.bd-dunkel, .bd-flaeche-dunkel) .bd-vorspann {
	color: #fff !important;
}

/* Weite Liste ohne Punkte, für Aufzählungen, die wie Absätze gelesen werden. */
.bd-liste-weit {
	list-style: none;
	padding-inline-start: 0;
}

.bd-liste-weit > li {
	padding-block: 0.55em;
	border-block-end: 1px solid var(--bd-linie-altrosa);
}

.bd-liste-weit > li:last-child {
	border-block-end: 0;
}

:is(.bd-dunkel, .bd-flaeche-dunkel) .bd-liste-weit > li {
	border-block-end-color: rgba(255, 255, 255, 0.28);
}

/* Der Initialbuchstabe ist jetzt erlaubt. Er steht in EB Garamond und
   bleibt in der Grundlinie des Textes, statt ihn auseinanderzuziehen. */
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: 3.2em;
	line-height: 0.82;
	font-weight: 400;
	margin-block-start: 0.06em;
	margin-inline-end: 0.08em;
	color: var(--wp--preset--color--altrosa-700);
}

:is(.bd-dunkel, .bd-flaeche-dunkel) .has-drop-cap:not(:focus)::first-letter {
	color: #fff;
}

/* Fragen und Antworten: der Details-Block, ruhig gesetzt. */
.wp-block-details {
	border-block-end: 1px solid var(--bd-linie-altrosa);
	padding-block: 0.7em;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--garamond);
}

.wp-block-details summary::marker {
	color: var(--bd-linie-messing);
}

/* ANFANG erzeugt: dunkle Flächen */
/* Nicht von Hand ändern. Erzeugt von gestaltung/baue-flaechen-css.py aus der
   Palette: jede Fläche, die weiße Schrift mit mindestens 4,5:1 trägt und
   nachtblaue nicht. 37 Flächen, 8 Verläufe. */

.bd-dunkel,
.bd-flaeche-dunkel,
.has-altrosa-600-background-color,
.has-altrosa-700-background-color,
.has-altrosa-800-background-color,
.has-nachtblau-400-background-color,
.has-nachtblau-500-background-color,
.has-nachtblau-600-background-color,
.has-nachtblau-700-background-color,
.has-nachtblau-800-background-color,
.has-eukalyptus-background-color,
.has-eukalyptus-dunkel-background-color,
.has-eukalyptus-tief-background-color,
.has-messing-700-background-color,
.has-anthrazit-background-color,
.has-tiefton-background-color,
.has-anthrazit-heller-background-color,
.has-anthrazit-warm-background-color,
.has-salbei-800-background-color,
.has-blaugrau-600-background-color,
.has-blaugrau-700-background-color,
.has-blaugrau-800-background-color,
.has-eukalyptus-kuehler-background-color,
.has-dunkelgruen-background-color,
.has-petrol-soft-background-color,
.has-petrolblau-tief-background-color,
.has-navy-tief-background-color,
.has-rosenrot-background-color,
.has-rosenholz-800-background-color,
.has-rose-gedaempft-background-color,
.has-altrosa-tief-background-color,
.has-rosenholz-background-color,
.has-rosenholz-tief-background-color,
.has-rosebraun-background-color,
.has-aubergine-background-color,
.has-messing-matt-700-background-color,
.has-messing-800-background-color,
.has-mattgold-700-background-color,
.has-mattgold-800-background-color,
.has-nachtblau-verlauf-gradient-background,
.has-altrosa-verlauf-gradient-background,
.has-eukalyptus-verlauf-gradient-background,
.has-nacht-altrosa-verlauf-gradient-background,
.has-papier-verlauf-gradient-background,
.has-messing-verlauf-gradient-background,
.has-auster-verlauf-gradient-background,
.has-eukalyptus-tief-verlauf-gradient-background {
	color: #fff;
}

:is(
		.bd-dunkel,
		.bd-flaeche-dunkel,
		.has-altrosa-600-background-color,
		.has-altrosa-700-background-color,
		.has-altrosa-800-background-color,
		.has-nachtblau-400-background-color,
		.has-nachtblau-500-background-color,
		.has-nachtblau-600-background-color,
		.has-nachtblau-700-background-color,
		.has-nachtblau-800-background-color,
		.has-eukalyptus-background-color,
		.has-eukalyptus-dunkel-background-color,
		.has-eukalyptus-tief-background-color,
		.has-messing-700-background-color,
		.has-anthrazit-background-color,
		.has-tiefton-background-color,
		.has-anthrazit-heller-background-color,
		.has-anthrazit-warm-background-color,
		.has-salbei-800-background-color,
		.has-blaugrau-600-background-color,
		.has-blaugrau-700-background-color,
		.has-blaugrau-800-background-color,
		.has-eukalyptus-kuehler-background-color,
		.has-dunkelgruen-background-color,
		.has-petrol-soft-background-color,
		.has-petrolblau-tief-background-color,
		.has-navy-tief-background-color,
		.has-rosenrot-background-color,
		.has-rosenholz-800-background-color,
		.has-rose-gedaempft-background-color,
		.has-altrosa-tief-background-color,
		.has-rosenholz-background-color,
		.has-rosenholz-tief-background-color,
		.has-rosebraun-background-color,
		.has-aubergine-background-color,
		.has-messing-matt-700-background-color,
		.has-messing-800-background-color,
		.has-mattgold-700-background-color,
		.has-mattgold-800-background-color,
		.has-nachtblau-verlauf-gradient-background,
		.has-altrosa-verlauf-gradient-background,
		.has-eukalyptus-verlauf-gradient-background,
		.has-nacht-altrosa-verlauf-gradient-background,
		.has-papier-verlauf-gradient-background,
		.has-messing-verlauf-gradient-background,
		.has-auster-verlauf-gradient-background,
		.has-eukalyptus-tief-verlauf-gradient-background
	)
	:is(
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		li,
		dt,
		dd,
		cite,
		figcaption,
		blockquote,
		small,
		strong,
		em,
		label,
		summary,
		.wp-block-post-date,
		.wp-block-post-date a,
		.wp-element-caption,
		.wp-block-navigation-item__label,
		.bd-rubrik,
		.bd-meta
	) {
	/* WordPress gibt Farbklassen mit !important aus. */
	color: #fff !important;
	opacity: 1;
}

:is(
		.bd-dunkel,
		.bd-flaeche-dunkel,
		.has-altrosa-600-background-color,
		.has-altrosa-700-background-color,
		.has-altrosa-800-background-color,
		.has-nachtblau-400-background-color,
		.has-nachtblau-500-background-color,
		.has-nachtblau-600-background-color,
		.has-nachtblau-700-background-color,
		.has-nachtblau-800-background-color,
		.has-eukalyptus-background-color,
		.has-eukalyptus-dunkel-background-color,
		.has-eukalyptus-tief-background-color,
		.has-messing-700-background-color,
		.has-anthrazit-background-color,
		.has-tiefton-background-color,
		.has-anthrazit-heller-background-color,
		.has-anthrazit-warm-background-color,
		.has-salbei-800-background-color,
		.has-blaugrau-600-background-color,
		.has-blaugrau-700-background-color,
		.has-blaugrau-800-background-color,
		.has-eukalyptus-kuehler-background-color,
		.has-dunkelgruen-background-color,
		.has-petrol-soft-background-color,
		.has-petrolblau-tief-background-color,
		.has-navy-tief-background-color,
		.has-rosenrot-background-color,
		.has-rosenholz-800-background-color,
		.has-rose-gedaempft-background-color,
		.has-altrosa-tief-background-color,
		.has-rosenholz-background-color,
		.has-rosenholz-tief-background-color,
		.has-rosebraun-background-color,
		.has-aubergine-background-color,
		.has-messing-matt-700-background-color,
		.has-messing-800-background-color,
		.has-mattgold-700-background-color,
		.has-mattgold-800-background-color,
		.has-nachtblau-verlauf-gradient-background,
		.has-altrosa-verlauf-gradient-background,
		.has-eukalyptus-verlauf-gradient-background,
		.has-nacht-altrosa-verlauf-gradient-background,
		.has-papier-verlauf-gradient-background,
		.has-messing-verlauf-gradient-background,
		.has-auster-verlauf-gradient-background,
		.has-eukalyptus-tief-verlauf-gradient-background
	)
	a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.55);
	text-underline-offset: 0.18em;
}

:is(
		.bd-dunkel,
		.bd-flaeche-dunkel,
		.has-altrosa-600-background-color,
		.has-altrosa-700-background-color,
		.has-altrosa-800-background-color,
		.has-nachtblau-400-background-color,
		.has-nachtblau-500-background-color,
		.has-nachtblau-600-background-color,
		.has-nachtblau-700-background-color,
		.has-nachtblau-800-background-color,
		.has-eukalyptus-background-color,
		.has-eukalyptus-dunkel-background-color,
		.has-eukalyptus-tief-background-color,
		.has-messing-700-background-color,
		.has-anthrazit-background-color,
		.has-tiefton-background-color,
		.has-anthrazit-heller-background-color,
		.has-anthrazit-warm-background-color,
		.has-salbei-800-background-color,
		.has-blaugrau-600-background-color,
		.has-blaugrau-700-background-color,
		.has-blaugrau-800-background-color,
		.has-eukalyptus-kuehler-background-color,
		.has-dunkelgruen-background-color,
		.has-petrol-soft-background-color,
		.has-petrolblau-tief-background-color,
		.has-navy-tief-background-color,
		.has-rosenrot-background-color,
		.has-rosenholz-800-background-color,
		.has-rose-gedaempft-background-color,
		.has-altrosa-tief-background-color,
		.has-rosenholz-background-color,
		.has-rosenholz-tief-background-color,
		.has-rosebraun-background-color,
		.has-aubergine-background-color,
		.has-messing-matt-700-background-color,
		.has-messing-800-background-color,
		.has-mattgold-700-background-color,
		.has-mattgold-800-background-color,
		.has-nachtblau-verlauf-gradient-background,
		.has-altrosa-verlauf-gradient-background,
		.has-eukalyptus-verlauf-gradient-background,
		.has-nacht-altrosa-verlauf-gradient-background,
		.has-papier-verlauf-gradient-background,
		.has-messing-verlauf-gradient-background,
		.has-auster-verlauf-gradient-background,
		.has-eukalyptus-tief-verlauf-gradient-background
	)
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--bd-fokus-hell);
}

:is(
		.bd-dunkel,
		.bd-flaeche-dunkel,
		.has-altrosa-600-background-color,
		.has-altrosa-700-background-color,
		.has-altrosa-800-background-color,
		.has-nachtblau-400-background-color,
		.has-nachtblau-500-background-color,
		.has-nachtblau-600-background-color,
		.has-nachtblau-700-background-color,
		.has-nachtblau-800-background-color,
		.has-eukalyptus-background-color,
		.has-eukalyptus-dunkel-background-color,
		.has-eukalyptus-tief-background-color,
		.has-messing-700-background-color,
		.has-anthrazit-background-color,
		.has-tiefton-background-color,
		.has-anthrazit-heller-background-color,
		.has-anthrazit-warm-background-color,
		.has-salbei-800-background-color,
		.has-blaugrau-600-background-color,
		.has-blaugrau-700-background-color,
		.has-blaugrau-800-background-color,
		.has-eukalyptus-kuehler-background-color,
		.has-dunkelgruen-background-color,
		.has-petrol-soft-background-color,
		.has-petrolblau-tief-background-color,
		.has-navy-tief-background-color,
		.has-rosenrot-background-color,
		.has-rosenholz-800-background-color,
		.has-rose-gedaempft-background-color,
		.has-altrosa-tief-background-color,
		.has-rosenholz-background-color,
		.has-rosenholz-tief-background-color,
		.has-rosebraun-background-color,
		.has-aubergine-background-color,
		.has-messing-matt-700-background-color,
		.has-messing-800-background-color,
		.has-mattgold-700-background-color,
		.has-mattgold-800-background-color,
		.has-nachtblau-verlauf-gradient-background,
		.has-altrosa-verlauf-gradient-background,
		.has-eukalyptus-verlauf-gradient-background,
		.has-nacht-altrosa-verlauf-gradient-background,
		.has-papier-verlauf-gradient-background,
		.has-messing-verlauf-gradient-background,
		.has-auster-verlauf-gradient-background,
		.has-eukalyptus-tief-verlauf-gradient-background
	)
	:is(.bd-linie, .wp-block-separator) {
	border-top-color: var(--bd-linie-messing-zart);
}
/* ENDE erzeugt: dunkle Flächen */

/* =========================================================================
   15. Druck
   ========================================================================= */

@media print {
	.bd-kopf,
	.bd-fuss,
	.bd-weiterweg,
	.wp-block-navigation {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}
}

/* Der Absatz direkt unter einem Formular ist ein Hinweis, kein Fließtext:
   Auf /kontakt steht dort der Datenschutzhinweis, den die Bauangaben
   ausdrücklich kleiner gesetzt verlangen. Als Regel am Formular statt als
   Klasse im Seiteninhalt, damit sie auch gilt, wenn jemand den Absatz im
   Editor neu schreibt. */
.bd-formular + p {
	font-size: var(--wp--preset--font-size--hinweis);
	color: var(--wp--preset--color--nachtblau-500);
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Bilder, die neben dem Text stehen statt ueber ihm.

   Das Portraet und das Fresko folgen demselben Gedanken: Der Text behaelt sein
   Mass von 38rem, und das Bild liegt im freien Raum rechts daneben. Wer die
   Seite oeffnet, faengt sofort zu lesen an und scrollt nicht erst an einem
   Banner vorbei. Gemessen bei 1024 Pixeln Fensterbreite stehen dort 353 Pixel
   leer; 20rem passen hinein, ohne dem Absatz etwas wegzunehmen.

   Auf dem Telefon gibt es diesen Raum nicht. Dort ruecken beide ueber den
   Absatz: das Portraet in voller Breite, das Fresko als schmales Band, hoechstens
   acht Zeilenhoehen hoch, damit es auch dort kein Banner wird. */
.bd-bild-neben,
.bd-fresko {
	margin-block: 1.6em;
}

.bd-bild-neben img {
	width: 100%;
	height: auto;
}

/* Das Portraet auf den Weitergehen-Seiten nahm auf dem Telefon in voller
   Breite rund eine halbe Bildschirmhoehe ein (330 mal 411 Pixel bei 375
   Pixeln Breite). Auf Dios Wunsch vom 28. Oktober 2026 dort kleiner, damit
   es den Schirm nicht fuellt. Nur unterhalb der Breite, ab der es neben dem
   Text steht; daneben gilt weiter das Mass von oben.

   Es steht links an der Textkante, nicht mittig. Mittig war geplant, aber
   WordPress setzt in der Inhaltsspalte margin-left: 0 !important, und so
   sah Dio es am 28. Oktober live und fand es passend. Darum hier kein
   Zentrieren, auch nicht mit !important. */
@media (max-width: 47.99rem) {
	.bd-bild-neben.bd-bild-portraet {
		width: min(14rem, 62%);
	}
}

/* Das Fresko ist Schmuck und keine Aussage: Es traegt einen leeren
   Alternativtext, und Vorlesesoftware ueberspringt es. Das ist richtig so. */
.bd-fresko img {
	display: block;
	width: 100%;
	height: clamp(6rem, 4rem + 6vw, 8rem);
	object-fit: cover;
	/* Etwas oberhalb der Mitte: Bei diesen Motiven liegt dort der Horizont. */
	object-position: center 38%;
}

@media (min-width: 48rem) {
	.bd-bild-neben,
	.bd-fresko {
		float: right;
		margin-inline-start: var(--wp--preset--spacing--50);
		margin-block-start: 0.3em;
	}

	/* Das Portraet begleitet den Text und fuehrt ihn nicht an; am 11. Oktober
	   2026 wurde es mit den uebrigen Bildern verdoppelt, von 11rem auf 15,5rem.
	   Die Wurzel aus zwei, nicht das Doppelte: Die Flaeche verdoppelt sich,
	   nicht die Kante. */
	.bd-bild-neben {
		width: min(22rem, 38%);
	}

	/* Zieht jemand im Editor an einem Bild, setzt WordPress eine eigene Breite
	   und haengt dem Rahmen die Klasse is-resized an. Dann tritt die
	   Voreinstellung zurueck und die eigene Breite gilt. Die Obergrenze bleibt:
	   Unter die Haelfte darf die Textspalte nicht fallen, sonst wird der Satz
	   unlesbar. Das ist der Unterschied zwischen einer Voreinstellung und einem
	   Kaefig. */
	.bd-bild-neben.is-resized,
	.bd-fresko.is-resized {
		width: auto;
	}

	.bd-bild-neben,
	.bd-fresko {
		max-width: min(32rem, 50%);
	}

	/* Am 11. Oktober 2026 verdoppelt, auf Dios Wunsch. Gemessen bei 1280
	   Pixeln: 448 mal 252 statt 320 mal 180, also die doppelte Flaeche, und
	   die Textspalte bleibt bei ihren 608 Pixeln. Auf schmalen Schirmen
	   bremsen die 40 Prozent, sonst naehme das Bild dem Text die Zeile. */
	.bd-fresko {
		width: min(28rem, 40%);
	}

	/* Neben dem Text darf das Fresko seine eigene Hoehe haben: Es ist dort kein
	   Band mehr, sondern ein Bild. */
	.bd-fresko img {
		height: auto;
	}

	.bd-bild-neben ~ :is(h2, h3, .wp-block-separator, .wp-block-buttons) {
		clear: both;
	}

	/* Der Abschnitt haelt das fliessende Fresko fest, damit es bei kurzen Texten
	   nicht unten herausragt. Nur dort, wo wirklich eines liegt. */
	.bd-abschnitt:has(> .bd-fresko) {
		display: flow-root;
	}
}

/* Auf der Briefseite reicht das Fresko bis zur Seitenmitte. Am 19. Oktober
   2026 von Dio ausdruecklich fuer diese eine Seite verlangt.

   Die Rechnung: Der Abschnitt ist 71rem breit und steht mittig im Fenster.
   Ein Bild, das rechts fliesst und die halbe Breite des Abschnitts einnimmt,
   hat seine linke Kante genau in dessen Mitte -- und die ist zugleich die
   Mitte der Seite. Darum 50 Prozent und nicht ein festes Mass in rem: Das
   waere auf jedem anderen Schirm wieder etwas anderes.

   Die Regel haengt am Seitennamen und nicht an .bd-fresko selbst, weil
   sechsundzwanzig Seiten ein Beitragsbild tragen. Sie alle zu vergroessern
   war nicht verlangt. Wer das spaeter doch will, zieht die beiden Zeilen in
   die allgemeine Regel darueber und loescht diesen Block.

   Unterhalb von 48rem bleibt alles, wie es war: Dort ist das Fresko ein
   schmales Band ueber dem Text, und daneben passt nichts. */
@media (min-width: 48rem) {
	.bd-seite-brief .bd-fresko {
		width: 50%;
		max-width: 50%;
	}
}

/* Über mich ist der eine Fall, in dem zwei Bilder rechts stehen: oben das
   Porträt, darunter das Fresko. Weil die Vorlage das Fresko vor den Text
   setzt, stünde es sonst über dem Porträt. Darum bleibt es dort aus der
   Vorlage weg und steht stattdessen im Seiteninhalt, gleich hinter dem
   Porträt — und dann in dessen Breite, damit die beiden eine Kante bilden. */
.bd-seite-ueber-benjamindio .bd-abschnitt > .bd-fresko {
	display: none;
}

@media (min-width: 48rem) {
	/* Diese Regel steht spaeter in der Datei als die zu is-resized und hatte
	   dieselbe Staerke; damit gewann sie, und das Fresko auf Ueber mich liess
	   sich als einziges Bild nicht ziehen. Darum traegt sie den Fall jetzt
	   selbst. */
	.bd-bild-neben + .bd-fresko.is-resized {
		width: auto;
	}

	.bd-bild-neben + .bd-fresko {
		width: min(22rem, 38%);
		margin-block-start: var(--wp--preset--spacing--30);
		/* Ohne dies stellen sich die beiden nebeneinander, sobald der freie Rand
		   breit genug fuer zwei ist: gemessen 176 und 176 Pixel in 353. Sie sollen
		   aber uebereinander stehen, das Portraet oben. */
		clear: right;
	}
}

/* Die Leitformel auf der Startseite: drei Sätze, die aufeinander aufbauen.
   Sie stehen größer und ruhiger als der Fließtext, aber nicht als Überschrift —
   sie sind Text, keine Gliederung. */
.bd-leitformel {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--nachtblau-600);
	margin-block: 1.4em;
}

/* Der Türen-Abschnitt. Die Spalten brechen auf dem Telefon untereinander; eine
   vierte oder fünfte Tür hängt sich an, ohne dass hier etwas zu ändern ist. */
.bd-tueren .wp-block-columns {
	align-items: stretch;
}

.bd-tueren .wp-block-column > .wp-block-group {
	height: 100%;
}

/* Der Preissatz unter den Türen: eine Zeile, kleiner gesetzt, mit Abstand zu
   den Karten. Er nennt Spannen, keine Einzelpreise. */
.bd-preissatz {
	margin-block-start: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--nachtblau-500);
}

/* Der Abschluss: Grußformel und Name stehen eng beieinander, wie unter einem
   Brief. Der Name trägt die Messinglinie der Wortmarke nicht, er ist Text. */
.bd-abschluss {
	margin-block-start: 0.35em;
	margin-block-end: 0;
}

.bd-abschluss--name {
	font-family: var(--wp--preset--font-family--garamond);
	font-variant-caps: all-small-caps;
	letter-spacing: 0.1em;
	margin-block-start: 0.6em;
}

/* Eine Karte, die als Ganzes zum Ziel ihrer Überschrift führt.
   Es gibt nur einen Anker, nämlich den in der Überschrift; seine ::after-Fläche
   legt sich über die Karte. Ein zweiter Anker um die Karte herum wäre
   verschachtelt und damit ungültiges HTML, und Vorlesesoftware würde das Ziel
   zweimal ansagen. */
.bd-karte--verweis {
	position: relative;
	transition: border-color 160ms ease;
}

.bd-karte--verweis :is(h2, h3) a {
	text-decoration: none;
}

.bd-karte--verweis :is(h2, h3) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bd-karte--verweis:hover {
	border-color: var(--bd-linie-messing);
}

/* Der Fokusring gehört um die ganze Karte, nicht um die Überschrift: Das
   Anklickbare ist die Karte. */
.bd-karte--verweis:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--messing-500);
	outline-offset: 3px;
}

.bd-karte--verweis:has(a:focus-visible) :is(h2, h3) a:focus-visible {
	outline: none;
}

/* Die Wortmarke im Titelband. Sie steht über der Überschrift und braucht
   darunter Luft, damit sie nicht an ihr klebt. */
.bd-wortmarke-band {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Fortsetzung eines Titelbands im Seiteninhalt.
   Die Vorlage setzt die Farbfläche mit der Überschrift; was darunter noch in
   dasselbe Band gehört — Wortmarke, der eine Satz — kann nur aus dem Inhalt
   kommen. Zwei angrenzende Flächen derselben Farbe lesen sich als eine, sofern
   zwischen ihnen kein Abstand entsteht. */
.bd-titelwahl--fortsetzung {
	margin-block-start: 0;
}

.bd-titelwahl--fortsetzung > * {
	margin-block-start: 0;
}

/* Der Herkunftssatz: eine Zeile darüber, woher die Arbeit kommt. Etwas
   kleiner und ruhiger als der Fließtext, aber nicht als Fußnote. */
.bd-herkunft {
	color: var(--wp--preset--color--nachtblau-500);
	max-width: 34rem;
}

/* Bauhinweis: eine Stelle, an der noch Text oder Material fehlt.
   Steht ausdrücklich im Weg und sieht nicht aus wie Inhalt, damit niemand sie
   für fertig hält. Eine Seite mit einem Bauhinweis wird nicht veröffentlicht;
   pruefung/seiteninhalt.py meldet jede davon. */
.bd-bauhinweis {
	font-family: var(--wp--preset--font-family--archivo), system-ui, sans-serif;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--nachtblau-700);
	background-color: var(--wp--preset--color--messing-100, #f6efe2);
	border: 1px dashed var(--bd-linie-messing);
	padding: 0.9em 1.1em;
	margin-block: 1.5em;
}

.bd-bauhinweis::before {
	content: "Noch zu erledigen: ";
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.75rem;
	display: block;
	margin-block-end: 0.35em;
	color: var(--wp--preset--color--altrosa-700);
}

/* ANFANG erzeugt: Gründe der Seiten */
/* Erzeugt von gestaltung/baue-gruende.py. Nicht von Hand ändern. */

body.bd-grund-altrosa-100 {
	background-color: var(--wp--preset--color--altrosa-100); /* #F4ECEC, Altrosa 100 – Haupt-Hintergrund */
}

body.bd-grund-eukalyptus-100 {
	background-color: var(--wp--preset--color--eukalyptus-100); /* #EEF2F0, Eukalyptus – Sehr hell */
}

body.bd-grund-greige-heller {
	background-color: var(--wp--preset--color--greige-heller); /* #F3F0EA, Warme Neutraltöne – Greige heller */
}

body.bd-grund-oyster-heller {
	background-color: var(--wp--preset--color--oyster-heller); /* #FAF8F6, Warme Neutraltöne – Oyster heller */
}

body.bd-grund-salbei-hell {
	background-color: var(--wp--preset--color--salbei-hell); /* #EEF2EC, Salbei hell – Glossar-Einstieg */
}

body.bd-grund-weiss {
	background-color: var(--wp--preset--color--weiss); /* #FFFFFF, Weiß – Lesefläche */
}

/* Titelband geteilter Vorlagen: nur die Farbe, der Verlauf
   steht bei .bd-titelbanner::after im Abschnitt Titelbanner. */

body.bd-band-blaugrau-700 {
	--bd-band-rgb: 62 86 104; /* #3E5668, Blaugrau – Tief */
}

body.bd-band-rosenholz-tief {
	--bd-band-rgb: 113 78 84; /* #714E54, Rosé-Referenzen aus den Bildern – Rosenholz tief */
}

body.bd-band-altrosa-700 {
	--bd-band-rgb: 129 75 79; /* #814B4F, Altrosa 700 – Textakzent und dunkler Block */
}

/* ENDE erzeugt: Gründe der Seiten */

/* ANFANG erzeugt: Eigenfarben der Seiten */
/* Erzeugt von gestaltung/baue-eigenfarben.py. Nicht von Hand ändern.
   Die Klasse setzt zwei Variablen; die Regeln darunter greifen sie auf.
   Betroffen sind nur Zwischenüberschriften und feine Trennlinien. */

body.bd-eigenfarbe-nachtblau-700-mit-mattgold-300 {
	--bd-eigen-ueberschrift: var(--wp--preset--color--nachtblau-700); /* #2C3244, Nachtblau 700 – Schaltfläche, dunkel */
	--bd-eigen-linie: var(--wp--preset--color--mattgold-300); /* #DBCCA7, Mattgold – Zart */
}

body.bd-eigenfarbe-aubergine-mit-messing-500 {
	--bd-eigen-ueberschrift: var(--wp--preset--color--aubergine); /* #260814, Aubergine – Umschlagtext When the Angel Stayed */
	--bd-eigen-linie: var(--wp--preset--color--messing-500); /* #B59969, Messing 500 – feine Linien */
}

/* Zwischenüberschriften im Inhalt. Die H1 bleibt unberührt: Sie steht im
   Titelbereich und trägt dessen Farbe. */
[class*="bd-eigenfarbe-"] main :is(h2, h3) {
	color: var(--bd-eigen-ueberschrift);
}

/* Die feinen Trennlinien. Die Messinglinie des Themes bleibt überall sonst
   wie sie ist; nur auf einer Seite mit Eigenfarbe nimmt sie deren Ton. */
[class*="bd-eigenfarbe-"] main .bd-linie {
	border-color: var(--bd-eigen-linie);
}

/* ENDE erzeugt: Eigenfarben der Seiten */


/* Die Sprungmarkenliste der langen Textseite. Sie steht unter dem Untertitel
   und vor dem ersten Abschnitt; auf dem Telefon ist der Essay ohne sie nicht
   zu ueberblicken. Keine Aufzaehlungspunkte: Das ist ein Inhaltsverzeichnis
   und keine Aufzaehlung. */
.bd-sprungmarken {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 2em;
	border-block: 1px solid var(--bd-linie-messing);
	padding-block: 1.2em;
}

.bd-sprungmarken li {
	margin-block: 0.45em;
}

/* Der Apparat am Ende: kleiner als der Fliesstext, wie ein Anhang, aber nicht
   kleiner als 16 Pixel, damit er lesbar bleibt. */
.bd-apparat {
	font-size: max(1rem, 0.92em);
	line-height: 1.62;
}

.bd-apparat li {
	margin-block: 1em;
}


/* Zwischen Titelflaeche und Text lag die Luft zweimal: das Polster unter dem
   Titel und darunter noch der Abstand, den WordPress zwischen zwei Abschnitten
   setzt. Das Polster bleibt, denn wo ein dunkles Band steht, gehoert es zum
   Band und traegt dessen Hoehe. Der zweite Abstand faellt weg. */
.bd-titelwahl + .bd-abschnitt {
	margin-block-start: 0;
}


/* Die Ausrichtungen, die WordPress selbst anbietet.

   Bis zum 11. Oktober 2026 kannte das Theme sie nicht: Wer im Editor auf
   "rechts ausrichten" klickte, bekam nur, was der Block-Editor von Haus aus
   mitbringt, ohne Abstaende und ohne Grenze. Damit jedes Bild auf jeder Seite
   so stehen kann wie das Portraet auf Ueber mich, gelten hier dieselben Masse.

   Gilt nur im Seiteninhalt, nicht im Kopf und nicht im Fuss. */
.entry-content > .alignright,
.entry-content > .alignleft {
	margin-block: 1.6em;
}

@media (min-width: 48rem) {
	.entry-content > .alignright {
		float: right;
		margin-inline-start: var(--wp--preset--spacing--50);
		margin-block-start: 0.3em;
		max-width: min(32rem, 50%);
	}

	.entry-content > .alignleft {
		float: left;
		margin-inline-end: var(--wp--preset--spacing--50);
		margin-block-start: 0.3em;
		max-width: min(32rem, 50%);
	}

	/* Eine Ueberschrift beginnt nicht neben einem Bild, sondern darunter. */
	.entry-content > :is(.alignright, .alignleft) ~ :is(h2, h3, .wp-block-separator, .wp-block-buttons) {
		clear: both;
	}
}

/* Auf dem Telefon steht jedes Bild ueber dem Absatz, nicht daneben. */
@media (max-width: 47.999rem) {
	.entry-content > .alignright,
	.entry-content > .alignleft {
		float: none;
		width: 100%;
		margin-inline: 0;
	}
}

/* Ein fliessendes Bild am Ende eines Abschnitts soll nicht unten herausragen. */
.entry-content::after {
	content: "";
	display: block;
	clear: both;
}


/* ---- Die Startseite ab dem 19. Oktober 2026 ------------------------------

   Gebaut nach Dios Entwurf vom 11. Oktober 2026. Drei Abschnitte tragen
   zwei Spalten, und alle drei fallen unter 980 Pixeln auf eine zurueck.
   980 ist kein runder Wert des Rasters, sondern die Breite, unter der
   38rem Text und 16rem Bild nebeneinander nicht mehr aufgehen. */

/* Die Eroeffnung: Text links, Fresko rechts.
   Das Bild fuellt die Hoehe des Textes und schliesst oben und unten mit ihm
   ab. Dafuer muessen Spalte, Bildrahmen und Bild selbst auf volle Hoehe
   gehen; faellt eines davon aus, steht das Bild wieder oben und laesst
   darunter eine Luecke. */
.bd-eroeffnung {
	gap: 4rem;
	/* Ausdruecklich, nicht nur geerbt: WordPress kennt fuer Spalten nur oben,
	   mittig und unten. Dehnen ist zwar das Verhalten von Flexboxen, aber
	   darauf will ich mich nicht verlassen, wenn das Bild davon abhaengt. */
	align-items: stretch;
}

.bd-eroeffnung__bild,
.bd-eroeffnung__bild figure,
.bd-eroeffnung__bild img {
	height: 100%;
}

.bd-eroeffnung__bild figure {
	margin: 0;
}

.bd-eroeffnung__bild img {
	display: block;
	width: 100%;
	object-fit: cover;
	border: 1px solid var(--bd-linie-messing);
}

/* Der erste Band: Umschlag links, Angaben rechts. */
.bd-buchblock .wp-block-columns {
	gap: 4rem;
}

.bd-buchblock__umschlag img {
	display: block;
	width: 100%;
	height: auto;
}

.bd-untertitel {
	color: var(--wp--preset--color--nachtblau-500);
	margin-block-end: 1.6rem;
}

.bd-angabe {
	font-family: var(--wp--preset--font-family--unter);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nachtblau-500);
	line-height: 1.7;
	margin-block-start: 1.8rem;
}

/* Der Hinweis auf die Vorbestellung, abgesetzt durch eine Messinglinie.
   Steht erst da, wenn die Adresse der Amazon-Seite vorliegt. */
.bd-vorbestellung {
	margin-block-start: 1.8rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--bd-linie-messing);
}

/* Unter 980 Pixeln steht alles untereinander. Beim Fresko wird die Hoehe
   beschnitten, damit es nicht die halbe Seite fuellt. */
@media (max-width: 61.25rem) {
	.bd-eroeffnung__bild {
		order: -1;
		max-height: 22rem;
		overflow: hidden;
	}

	.bd-eroeffnung__bild img {
		height: 22rem;
	}

	.bd-buchblock__umschlag {
		max-width: 18rem;
	}

	/* Die Tueren stehen untereinander, gleich wie viele es sind. Das Raster
	   von WordPress wuerde hier noch zwei Spalten bilden; eine Tuer mit
	   fuenfzehn Zeichen je Zeile liest sich aber nicht mehr. */
	.bd-tueren__raster {
		grid-template-columns: 1fr !important;
	}
}


/* Angesprungene Stellen bekommen Luft ueber sich.

   Ohne das klebt ein angesprungenes Lemma an der Oberkante des Fensters und
   sieht aus, als waere man zu weit gerutscht. Die Regel gilt fuer alles im
   Seiteninhalt, das eine Sprungmarke traegt: die hundertvier Lemmata des
   Glossars ebenso wie die elf Abschnitte der Textseite.

   Der Kopf der Website scrollt mit und klebt nicht, darum genuegt ein Abstand
   von zwei Zeilen. Wuerde der Kopf je stehenbleiben, gehoerte hier seine
   Hoehe hinein. */
.entry-content :is(h1, h2, h3, h4, h5, h6)[id],
.entry-content [id]:target {
	scroll-margin-top: 2.5rem;
}


/* ---- Das Sprungregister des Glossars --------------------------------------

   Es fuehrt die zwoelf Abschnitte und die hundertvier Begriffe. Erzeugt wird
   es beim Umwandeln aus denselben Ueberschriften wie die Seite; wer ein Lemma
   ergaenzt, bekommt den Eintrag von selbst. */
.bd-register {
	margin-block: 2.5em;
	padding-block: 1.5em;
	border-block: 1px solid var(--bd-linie-messing);
}

.bd-register__abschnitt {
	margin-block: 0.9em;
}

.bd-register__abschnitt > summary,
.bd-register__abschnitt--leer {
	font-family: var(--wp--preset--font-family--unter);
	font-size: var(--wp--preset--font-size--hinweis);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--nachtblau-600);
	cursor: pointer;
}

.bd-register__abschnitt > summary::marker {
	color: var(--bd-linie-messing);
}

/* Die Begriffe: eingerueckt, in Versalien der Stufe Beschriftung. */
.bd-register__begriffe {
	list-style: none;
	margin: 0.6em 0 0;
	padding-inline-start: 1.6em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.4em;
}

.bd-register__begriffe a {
	font-family: var(--wp--preset--font-family--unter);
	font-size: var(--wp--preset--font-size--beschriftung);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nachtblau-500);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.bd-register__begriffe a:hover,
.bd-register__begriffe a:focus-visible {
	color: var(--wp--preset--color--nachtblau-700);
	border-block-end-color: var(--bd-linie-messing);
}

/* Auf schmalen Schirmen stehen die Begriffe untereinander, damit die Zeile
   nicht reisst. Eingeklappt werden sie vom Skript, nicht hier: Ohne Skript
   soll das Register vollstaendig lesbar bleiben. */
@media (max-width: 61.25rem) {
	.bd-register__begriffe {
		display: block;
	}

	.bd-register__begriffe li {
		margin-block: 0.45em;
	}
}

/* ---- Anders gesagt im Glossar ---------------------------------------------

   Seit dem 31. Oktober 2026 hat jeder Eintrag einen leichten Absatz und
   darunter die Definition, eingeleitet mit "Anders gesagt:". Nur diese
   beiden Worte sind ausgezeichnet, der Satz dahinter steht aufrecht in der
   Grundschrift. Kapitaelchen und nicht Messing: #9D804D erreicht auf Weiss
   nur 3,7 zu 1, Fliesstext braucht 4,5 zu 1. Die eingebundene EB Garamond
   ist ohne Kapitaelchen geschnitten (smcp fehlt), darum bildet der Browser
   sie aus verkleinerten Versalien; der leichte Sperrsatz gleicht das aus. */
.bd-anders-gesagt {
	font-variant-caps: small-caps;
	letter-spacing: 0.04em;
}

/* ---- Der Ankerverweis je Lemma --------------------------------------------

   Ein Zeichen in Messing neben der Ueberschrift, das auf den eigenen Anker
   zeigt. Sichtbar erst bei Mauszeiger oder Tastaturfokus, aber immer in der
   Tabulatorreihenfolge und mit einer Beschriftung, die den Begriff nennt.
   Kein Kopierskript: Der Verweis fuehrt auf sich selbst, danach steht die
   Adresse in der Adresszeile. */
.bd-ankerverweis {
	margin-inline-start: 0.4em;
	color: var(--bd-linie-messing);
	text-decoration: none;
	font-size: 0.7em;
	vertical-align: 0.15em;
	opacity: 0;
	transition: opacity 120ms ease-in-out;
}

h3:hover > .bd-ankerverweis,
.bd-ankerverweis:focus-visible {
	opacity: 1;
}

/* Wer Bewegung nicht mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.bd-ankerverweis {
		transition: none;
	}
}

/* Auf Geraeten ohne Mauszeiger gibt es kein Schweben. Dort steht der Verweis
   dauerhaft, aber blass. */
@media (hover: none) {
	.bd-ankerverweis {
		opacity: 0.45;
	}
}


/* Der Pflichthinweis auf den Produktseiten.

   Ein leiser Hinweis, kein Warnkasten: Er steht zwischen Preis und Kaufknopf
   und soll gelesen werden, ohne die Seite zu beherrschen. Darum kleiner als
   der Fliesstext, in Nachtblau 500, mit einer Messinglinie an der Seite statt
   eines Rahmens ringsum. */
.bd-pflichthinweis {
	font-size: var(--wp--preset--font-size--hinweis);
	line-height: 1.55;
	color: var(--wp--preset--color--nachtblau-500);
	border-inline-start: 1px solid var(--bd-linie-messing);
	padding-inline-start: 1em;
	margin-block: 1.4em;
	max-width: 34em;
}


/* ---- Produktseiten ---------------------------------------------------------

   WooCommerce gibt Beschreibung und Kurzbeschreibung als rohes HTML aus, nicht
   als Bloecke. Die Abstaende aus theme.json gelten dort darum nicht: Die
   Schrift stimmt, aber Ueberschriften und Listen stehen ohne Luft. Hier
   bekommen sie dieselben Masse wie im Seiteninhalt. */
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel--description,
.wc-tab {
	max-width: 38rem;
}

/* Die Zwischenueberschrift war genauso gross wie der Fliesstext und
   unterschied sich nur durch die Zeilenhoehe. Beim Lesen wirkte sie dadurch
   wie ein Absatz, der zufaellig kurz ist. Jetzt traegt sie den groesseren
   Grad und das Nachtblau der uebrigen Ueberschriften; das ist derselbe Weg,
   den die Website sonst geht, und nicht der gesperrte Messingvorspann der
   Guides, der hier zwischen Preis und Kaufknopf zu laut waere. */
.woocommerce-product-details__short-description :is(h3, h4, h5),
.woocommerce-Tabs-panel--description :is(h3, h4, h5),
.woocommerce-Tabs-panel :is(h3, h4, h5),
.wc-tab :is(h3, h4, h5) {
	font-size: var(--wp--preset--font-size--vorspann);
	color: var(--wp--preset--color--nachtblau-600);
	margin-block: 1.8em 0.6em;
	line-height: 1.2;
}

/* Die Listenpunkte klebten aneinander, obwohl es getrennte Angaben sind. */
/* Nur Listen im Text, nicht die Reiterleiste darueber: Der Reiter
   "Beschreibung" ist ebenfalls ein li, und ein Abstand dort haette die
   Leiste auseinandergezogen. Gemessen am 12. Oktober 2026 — zweimal hatte
   ich beim Pruefen den Reiter erwischt statt der Liste. */
.woocommerce-product-details__short-description li,
.woocommerce-Tabs-panel li,
.wc-tab li {
	margin-block: 0.5em;
}

.woocommerce-product-details__short-description p,
.woocommerce-Tabs-panel--description p {
	margin-block: 0 1.2em;
}

.woocommerce-product-details__short-description :is(ul, ol),
.woocommerce-Tabs-panel--description :is(ul, ol) {
	margin-block: 0 1.2em;
	padding-inline-start: 1.4em;
}

/* Beschreibung und Kurzbeschreibung erscheinen je nach Vorlage unter
   verschiedenen Klassen; darum stehen beide Schreibweisen ueberall dabei. */
.woocommerce-Tabs-panel p,
.wc-tab p {
	margin-block: 0 1.2em;
}

.woocommerce-Tabs-panel :is(ul, ol),
.wc-tab :is(ul, ol) {
	margin-block: 0 1.2em;
	padding-inline-start: 1.4em;
}

/* Die Zeile mit Artikelnummer, Kategorie und Schlagwoertern: eine Angabe,
   kein Fliesstext. */
.product_meta {
	font-family: var(--wp--preset--font-family--unter);
	font-size: var(--wp--preset--font-size--hinweis);
	color: var(--wp--preset--color--nachtblau-500);
	margin-block-start: 1.8em;
	padding-block-start: 1.2em;
	border-block-start: 1px solid var(--bd-linie-messing);
}

.product_meta > span {
	display: block;
	margin-block: 0.3em;
}


/* ---- Die Zaesur -----------------------------------------------------------

   Eine Stelle, an der etwas kippt: ein Ton, eine Person, eine Haltung. Auf
   Ueber mich wechselt dort die dritte Person in die erste. Der Wechsel war
   gewollt, aber unausgesprochen, und Lesende blieben daran haengen.

   Darum sieht sie aus wie eine Zaesur und nicht wie ein Absatz: allein
   stehend, mit viel Luft davor und danach, zentriert, darueber das Ornament
   der Guides. Keine Kursive, keine Fettung; der Satz traegt sich selbst.

   Die Form ist bewusst allgemein gehalten: Sie laesst sich auf jeder Seite
   verwenden, auf der ein Ton- oder Perspektivwechsel vorbereitet wird. */
.bd-zaesur {
	margin-block: 4.5em;
	text-align: center;
}

.bd-zaesur__ornament {
	margin: 0 auto 1.8em;
	max-width: 16rem;
}

.bd-zaesur__ornament img {
	display: block;
	width: 100%;
	height: auto;
}

.bd-zaesur__satz {
	font-size: var(--wp--preset--font-size--vorspann);
	line-height: 1.5;
	color: var(--wp--preset--color--nachtblau-600);
	margin: 0 auto;
	max-width: 30rem;
	text-wrap: balance;
}

/* Ein Satz vor der Linie, in derselben Form wie der danach. Der Abstand zum
   Ornament ist derselbe wie vom Ornament zum Satz darunter. */
.bd-zaesur__satz--davor {
	margin-bottom: 1.8em;
}

/* Auf dem Telefon etwas weniger Luft, sonst zerfaellt die Seite in Teile. */
@media (max-width: 47.999rem) {
	.bd-zaesur {
		margin-block: 3em;
	}

	.bd-zaesur__ornament {
		max-width: 12rem;
	}
}


/* Der Steuervermerk unter dem Preis: eine Pflichtangabe, kein Verkaufsargument.
   Klein, ruhig, dicht am Preis, damit der Zusammenhang sichtbar bleibt. */
.bd-steuervermerk {
	font-size: var(--wp--preset--font-size--beschriftung);
	line-height: 1.5;
	color: var(--wp--preset--color--nachtblau-500);
	margin-block: -0.4em 1.4em;
}

/* Derselbe Vermerk unter jeder Produktkarte, von Germanized ausgegeben: gleich
   klein und ruhig, mittig wie Titel, Preis und Knopf der Karte. Germanized setzt
   ".product p.wc-gzd-additional-info"; die drei Klassen hier wiegen schwerer. */
p.wc-gzd-additional-info.wc-gzd-additional-info-loop.small-business-info {
	font-size: var(--wp--preset--font-size--beschriftung);
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--nachtblau-500);
	margin-block: 0.9em 0;
}


/* Die Metazeile der Produktseite: Artikelnummer, Kategorie, Schlagwoerter.

   Die Vorlage von WooCommerce setzt sie als Flexzeile ohne Umbruch. Am Handy
   teilen sich die drei Angaben dadurch 375 Pixel, und die erste Spalte wird so
   schmal, dass die Artikelnummer senkrecht Buchstabe fuer Buchstabe laeuft.

   Darum: am Schreibtisch nebeneinander, am Handy untereinander in voller
   Breite. Die Vorlage erlaubt zusaetzlich den Umbruch, damit auch zwischen
   den beiden Breiten nichts gequetscht wird. */
.wp-block-woocommerce-product-meta {
	font-family: var(--wp--preset--font-family--unter);
	font-size: var(--wp--preset--font-size--hinweis);
	color: var(--wp--preset--color--nachtblau-500);
	margin-block-start: 1.8em;
	padding-block-start: 1.2em;
	border-block-start: 1px solid var(--bd-linie-messing);
}

.wp-block-woocommerce-product-meta .wp-block-group {
	gap: 0.4em 2em;
}

@media (max-width: 47.999rem) {
	.wp-block-woocommerce-product-meta .wp-block-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.7em;
	}

	.wp-block-woocommerce-product-meta .wp-block-group > * {
		width: 100%;
	}
}


/* Ueberschriften brechen nicht mitten im Wort.

   Das Theme erlaubt im Fliesstext overflow-wrap: break-word, damit eine lange
   Adresse die Spalte nicht sprengt. Fuer Ueberschriften ist das falsch: Dort
   rutscht sonst ein einzelner Buchstabe in die naechste Zeile, aus
   "Geschaeftsbedingungen" wird "Geschaeftsbedingunge" und darunter ein "n".
   Auf der Website faellt es nicht auf, weil die Woerter passen; im Editor,
   dessen Arbeitsflaeche schmaler ist, schon.

   Gemessen bei 320 Pixeln, der schmalsten gebraeuchlichen Breite: Auch die
   laengste Ueberschrift der Website bleibt in ihrer Spalte. Es gibt also
   nichts, was ohne diese Regel herausragen wuerde.

   Silbentrennung bleibt aus: Dio hat sie fuer Ueberschriften ausgeschlossen. */
:is(h1, h2, h3, h4, h5, h6),
.wp-block-post-title {
	overflow-wrap: normal;
	word-break: normal;
}


/* ---- Die beiden englischen Seiten ----------------------------------------

   /en/ und /further/the-angel/, gebaut am 29. Oktober 2026 nach der Anweisung
   an Code vom selben Tag. Beide nutzen page-breit und bringen ihren Kopf
   selbst mit: Messinglinie, Ueberschrift und daneben das Portraet im
   Messingrahmen. Alles Weitere auf diesen Seiten ist gewoehnlicher Lesetext
   und braucht keine eigene Regel.

   Gestapelt wird hier und nicht ueber das Flex-Layout von WordPress: Das
   Layout kennt keine Reihenfolge je Breite, und auf dem Telefon soll das
   Portraet ueber dem Text stehen, so wie die Mockups es zeigen. */

.bd-englisch-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}

.bd-englisch-kopf__text {
	flex: 1 1 20rem;
	min-width: 16rem;
}

/* Das Portraet als Medaillon: rund, im Messingrahmen, mit einer haarfeinen
   Linie in Mattgold darum. Die Masse kommen aus den Mockups — 150 Pixel auf
   der Startseite, 112 auf der Begleitseite, wo es neben einer kuerzeren
   Ueberschrift steht und ihr nicht die Flaeche nehmen soll. */
.bd-medaillon {
	flex: 0 0 auto;
	margin: 0;
}

.bd-medaillon img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 3px solid var(--wp--preset--color--messing-500);
	box-shadow: 0 0 0 1px var(--wp--preset--color--mattgold-300);
}

.bd-medaillon--klein img {
	width: 112px;
	height: 112px;
}

/* Die Augenbraue ueber der Ueberschrift: kleine Archivo-Versalien in Messing,
   wie die Eyebrows im uebrigen Haus. Sie steht nur auf der Begleitseite und
   nennt dort Marke und Buchtitel. */
.bd-eyebrow {
	font-family: var(--wp--preset--font-family--unter);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--messing-matt-700);
	margin-block-end: 0.8em;
}

/* Die H1 der Begleitseite traegt die Eigenfarbe der Seite.

   Der erzeugte Abschnitt weiter oben laesst die H1 bewusst aus, weil sie dort,
   wo eine Titelvorlage sie setzt, die Farbe des Titelbereichs traegt. Diese
   Seite hat keine Titelvorlage: Ihre H1 steht im Inhalt, und ohne diese Regel
   bliebe sie Nachtblau, waehrend die Ueberschriften darunter Aubergine sind. */
body.bd-eigenfarbe-aubergine-mit-messing-500 main .bd-englisch-kopf h1 {
	color: var(--bd-eigen-ueberschrift);
}

@media (max-width: 34rem) {
	.bd-englisch-kopf {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 1.1rem;
	}

	.bd-englisch-kopf__text {
		flex: 0 0 auto;
	}
}