/*
Theme Name: Sternbild
Theme URI: https://github.com/restitutio777/daniele-astro-wp
Author: Philippe Jean
Description: Block-Theme für die Astrologie-Seite von Daniele Weiler. Creme, Gold und Nachtblau; das Sternenrad und alle übrige Zier zeichnet das Theme, nicht der Seiteninhalt. Abschnitte sind als contentOnly gesperrt: Texte und Bilder sind frei, das Layout nicht.
Version: 0.4.4
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sternbild
Tags: block-theme, full-site-editing, one-page
*/

/*
 * Hier steht NUR, was theme.json nicht kann.
 *
 * Alles Gestalterische — Farben, Schriften, Schriftgrade, Abstände, Breiten —
 * gehört als benanntes Token nach theme.json. Wer hier einen Farbwert hart
 * einträgt, hat ihn im Editor nicht und findet ihn beim nächsten Wechsel nicht
 * wieder.
 */

/* ============================================================
   1 — Rollenebene
   ============================================================ */

:root {
	/* Tiefen für Schatten und Verläufe. Nicht in der Palette, weil sie nie
	   als Flächen- oder Textfarbe gewählt werden sollen. */
	--sb-nacht-tief: #0c0a1e;
	--sb-nacht-violett: #35285e;

	/*
	 * Die beiden Farben der Wortmarke. Sie stehen hier und NICHT in der
	 * Palette: im Editor wären sie zwei Einträge, die niemand je wählen soll,
	 * und ein falsch gewählter „Marke Indigo" in einem Fließtext fiele erst
	 * beim Korrekturlesen auf.
	 *
	 * `--sb-marke-tief` ist ein tiefes Blau, kein Schwarz — die Wortmarke stand
	 * bis 0.4.1 auf `tinte` #2C2440 und las sich als Schwarz (gemeldet am
	 * 08.09.2026: „das Wort Sternen in Schwarz?").
	 *
	 * `--sb-marke-gold` trägt „Sternen" und ist die Leitfarbe der Seite, eine
	 * Stufe dunkler als das Palettengold #C4A265. Gerechnet auf Creme: #C4A265
	 * kommt auf 2,27:1 und wäre als tragendes Wort ausgewaschen, #A8823F auf
	 * 3,34:1. Die Zier darf hell bleiben, ein Wort muss lesbar sein.
	 */
	--sb-marke-tief: #2a2560;
	--sb-marke-gold: #a8823f;
	--sb-salbei-hell: #9aaf8f;
	--sb-salbei-dunkel: #5a6e50;
	--sb-rose: #e8cfc4;

	/* Derselbe Seitenrand, den theme.json als Wurzelpolsterung setzt. Die
	   Bühnengeometrie muss ihn kennen, sonst sitzt die Scheibe nicht auf der
	   Kante des Inhaltsrasters. */
	--sb-rand: clamp(1.5rem, 5vw, 3.5rem);
}

/* ============================================================
   2 — Grundlagen
   ============================================================ */

html {
	scroll-behavior: smooth;
}

/* Sprungziele der Ankernavigation dürfen nicht unter dem Kopfbereich landen.
   Mit dem Untertitel unter der Wortmarke misst der Kopf 87 px (gemessen am
   08.09.2026); 5 rem waren zu knapp und schnitten die Überschrift oben an. */
[id] {
	scroll-margin-top: 6.5rem;
}

::selection {
	background: var(--wp--preset--color--gold-hell);
	color: var(--wp--preset--color--nacht);
}

/* Sichtbarer Fokus. Der Standardrahmen von WordPress verschwindet auf Creme. */
:where(a, button, input, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/*
 * Deutsche Silbentrennung im Fließtext: die Spalten sind schmal, Komposita
 * sind lang. NICHT in zentriertem Text — dort steht der Trennstrich am Rand
 * einer Zeile, die ohnehin flattert, und in den schmalen Kartenspalten trennte
 * er drei Zeilen von vier („ge-deutet", „ab-liest"). Zentrierter Satz darf
 * lieber ungleich lang laufen.
 */
p:not(.has-text-align-center),
li,
blockquote {
	hyphens: auto;
	-webkit-hyphens: auto;
}

/*
 * Kursive Akzente in Überschriften laufen auf Cormorant, nicht auf Acheria.
 *
 * Acheria hat keinen kursiven Schnitt. Ohne diese Regel schrägt der Browser
 * die aufrechten Buchstaben selbst an — das sieht nach Fehler aus, nicht nach
 * Betonung. Deshalb eine Systemregel und keine Klasse je Fall: sonst steht sie
 * beim nächsten Akzent wieder nicht da.
 */
:where(h1, h2, h3, h4) :where(em, i, cite) {
	font-family: var(--wp--preset--font-family--serife);
	font-style: italic;
	font-weight: 500;
}

/* ============================================================
   3 — Zier
   ============================================================ */

/*
 * Das Ornament über zentrierten Überschriften: zwei Haarlinien und dazwischen
 * die Saat des Lebens, sieben Kreise. Es ist eine Maske und kein Markup —
 * so kann es im Seiteninhalt weder gelöscht noch ungültig werden, und ein
 * Wechsel erreicht jede bestehende Seite sofort.
 */
.hat-ornament::before {
	content: "";
	display: block;
	width: 9rem;
	height: 1.5rem;
	margin: 0 auto var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: var(--sb-ornament) center / contain no-repeat;
	mask: var(--sb-ornament) center / contain no-repeat;
}

:root {
	--sb-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 24'%3E%3Cg fill='none' stroke='%23fff'%3E%3Cpath d='M0 12h48M96 12h48' opacity='.6'/%3E%3Cg stroke-width='.7'%3E%3Ccircle cx='72' cy='12' r='3'/%3E%3Ccircle cx='72' cy='6.8' r='3'/%3E%3Ccircle cx='72' cy='17.2' r='3'/%3E%3Ccircle cx='76.5' cy='9.4' r='3'/%3E%3Ccircle cx='76.5' cy='14.6' r='3'/%3E%3Ccircle cx='67.5' cy='9.4' r='3'/%3E%3Ccircle cx='67.5' cy='14.6' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

	/* Sternenspuren einer Langzeitbelichtung — Bogen um einen Pol weit außerhalb
	   des Bildes. Grund für das dunkle Zitatband. */
	--sb-sternenspuren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 620' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23D9C49A' stroke-linecap='round'%3E%3Ccircle cx='1440' cy='-80' r='180' stroke-width='1.2' opacity='.3' stroke-dasharray='200 700'/%3E%3Ccircle cx='1440' cy='-80' r='260' stroke-width='1' opacity='.26' stroke-dasharray='320 900' stroke-dashoffset='140'/%3E%3Ccircle cx='1440' cy='-80' r='350' stroke-width='1.2' opacity='.22' stroke-dasharray='260 1100' stroke-dashoffset='400'/%3E%3Ccircle cx='1440' cy='-80' r='450' stroke-width='1' opacity='.2' stroke-dasharray='420 1400' stroke-dashoffset='220'/%3E%3Ccircle cx='1440' cy='-80' r='560' stroke-width='1.2' opacity='.16' stroke-dasharray='380 1800' stroke-dashoffset='600'/%3E%3Ccircle cx='1440' cy='-80' r='680' stroke-width='1' opacity='.13' stroke-dasharray='500 2200' stroke-dashoffset='300'/%3E%3Ccircle cx='1440' cy='-80' r='800' stroke-width='1.2' opacity='.1' stroke-dasharray='450 2600' stroke-dashoffset='900'/%3E%3C/g%3E%3Cg fill='%23FAF7F1'%3E%3Ccircle cx='180' cy='120' r='1.3' opacity='.7'/%3E%3Ccircle cx='340' cy='420' r='1' opacity='.5'/%3E%3Ccircle cx='120' cy='500' r='1.5' opacity='.6'/%3E%3Ccircle cx='620' cy='520' r='1.1' opacity='.4'/%3E%3Ccircle cx='80' cy='300' r='1' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");

	/*
	 * Fünf Mondphasen, von der Sichel über den vollen Mond zurück.
	 *
	 * STOLPERSTEIN, aus dem Prototyp übernommen und dort bis heute wirksam:
	 * die Sicheln standen als `A7 7 … A5 5 …` da — ein äußerer Halbkreis mit
	 * Radius 7 und ein innerer Bogen mit Radius 5 über dieselbe Sehne von
	 * 14 Einheiten. Ein Radius von 5 kann eine Sehne von 14 nicht spannen;
	 * die SVG-Regel vergrößert ihn dann stillschweigend auf 7, beide Bögen
	 * fallen zusammen, und die eingeschlossene Fläche ist null. Gemessen
	 * durch Rastern der Maske: an den Stellen der beiden Sicheln kamen
	 * 0 gefüllte Bildpunkte heraus, beim vollen Mond 2512.
	 *
	 * Mit Radius 9 spannt der zweite Bogen die Sehne und wölbt sich zur
	 * anderen Seite — daraus wird die Sichel.
	 */
	--sb-mondphasen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 18'%3E%3Cg fill='%23C4A265'%3E%3Ccircle cx='9' cy='9' r='7' fill='none' stroke='%23C4A265'/%3E%3Cpath d='M34 2 A7 7 0 0 1 34 16 A9 9 0 0 0 34 2 Z'/%3E%3Ccircle cx='58' cy='9' r='7'/%3E%3Cpath d='M82 2 A7 7 0 0 0 82 16 A9 9 0 0 1 82 2 Z'/%3E%3Ccircle cx='107' cy='9' r='7' fill='none' stroke='%23C4A265'/%3E%3C/g%3E%3C/svg%3E");
}

/* Die drei Ebenen des Sternenrads.

   `transform-box: view-box` bezieht den Drehpunkt auf das viewBox der SVG und
   nicht auf den Umriss der Pfade — ohne das wandert jede Ebene beim Drehen aus.

   `will-change` ist hier kein Aberglaube, sondern gemessen: ohne die Ankündigung
   rastert der Browser die Guilloche-Ebenen bei jedem Bild neu, mehrere tausend
   Haarliniensegmente, zweimal im Dokument, in drei Geschwindigkeiten. Mit ihr
   legt er jede Ebene einmal als Textur ab und dreht nur noch diese. */
/*
 * `will-change` ist hier kein Aberglaube, sondern am Prototyp gemessen: ohne
 * die Ankündigung rastert der Browser die Guilloche-Ebenen bei jedem Bild neu,
 * mehrere tausend Haarliniensegmente, zweimal im Dokument, in drei
 * Geschwindigkeiten. Mit ihr legt er jede Ebene einmal als Textur ab und dreht
 * nur noch diese.
 */
.sb-dreht {
	transform-origin: 400px 400px;
	transform-box: view-box;
	will-change: transform;
	animation: sb-radlauf 240s linear infinite;
}

/* Der Gegenlauf hält die Ebenen davon ab, als eine starre Scheibe zu lesen. */
.sb-dreht--rueck {
	animation: sb-radlauf 400s linear infinite reverse;
}

.sb-dreht--traege {
	animation: sb-radlauf 620s linear infinite;
}

@keyframes sb-radlauf {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* ============================================================
   4 — Die Bühne
   ============================================================ */

/*
 * Maße als CSS-Variablen, damit Rad und Scheibe nicht auseinanderdriften: die
 * Scheibe trägt eine zweite Kopie derselben Figur, und jede Abweichung zeigt
 * sich sofort als doppelte Linie.
 *
 * Die Scheibe hängt an der rechten Kante des INHALTSRASTERS, nicht an einem
 * Prozentsatz der Fensterbreite. An vw gehängt wanderte sie auf breiten
 * Bildschirmen immer weiter nach rechts, bis sie allein im rechten Drittel
 * stand und die Überschrift auf der anderen Seite strandete.
 *
 * Die Hälften sind ausgeschrieben statt geteilt: ihre Umschaltpunkte müssen
 * exakt zu den vollen Werten passen (36vw erreicht 420px bei derselben Breite,
 * bei der 18vw 210px erreicht), sonst sind die Kreise nicht mehr konzentrisch.
 */
.ist-buehne {
	--scheibe: min(32vw, 420px);
	--scheibe-halb: min(16vw, 210px);
	--rad: min(64vw, 900px);
	--rad-halb: min(32vw, 450px);
	--raster-rechts: min(100vw - var(--sb-rand), 50vw + 36rem);
	--rad-x: calc(var(--raster-rechts) - var(--scheibe-halb));

	position: relative;
	isolation: isolate;
	overflow: hidden;
	/*
	 * Spalte, nicht Zeile. Als reines `display: flex` legt der Browser
	 * Dachzeile, Überschrift, Satz und Knöpfe NEBENEINANDER — die Bühne sah
	 * damit aus wie vier Bruchstücke quer über die Scheibe. `column` mit
	 * `justify-content: center` erreicht dasselbe wie die senkrechte
	 * Zentrierung des Prototyps, ohne die Kinder umzusortieren.
	 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	/* 7rem, weil der Kopfbereich fest über der Bühne steht und keinen Platz
	   im Fluss belegt. Den seitlichen Rand setzt die Bühne selbst: mit
	   `layout: default` bekommt die Gruppe die Wurzelpolsterung nicht. */
	padding: 7rem var(--sb-rand) 6rem;
	background-color: var(--wp--preset--color--creme);
}

/* Der Papierton: warmer Hauch oben links, Gold unten rechts, ein Zug Salbei,
   dazu ein Bodenverlauf. Darüber eine kaum wahrnehmbare Vignette — ohne sie
   liegt die Creme flach da. */
.ist-buehne::before,
.ist-buehne::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ist-buehne::before {
	background:
		radial-gradient(ellipse 60% 50% at 14% 8%, rgb(232 207 196 / 42%) 0%, rgb(232 207 196 / 0%) 62%),
		radial-gradient(ellipse 75% 60% at 88% 78%, rgb(196 162 101 / 16%) 0%, rgb(196 162 101 / 0%) 60%),
		radial-gradient(ellipse 55% 45% at 68% 22%, rgb(124 144 112 / 9%) 0%, rgb(124 144 112 / 0%) 62%),
		linear-gradient(178deg, rgb(250 248 244 / 0%) 55%, rgb(240 237 230 / 75%) 100%);
}

.ist-buehne::after {
	background: radial-gradient(ellipse 90% 75% at 50% 45%, rgb(44 36 64 / 0%) 55%, rgb(44 36 64 / 5.5%) 100%);
}

/*
 * Die Zier liegt über der ganzen Bühne und nimmt im Fluss keinen Platz ein —
 * sonst stünde sie als leerer Kasten zwischen den Textblöcken.
 *
 * KEIN `z-index` an dieser Stelle. Ein `z-index: 0` machte sie zu einem
 * eigenen Stapelzusammenhang: die Ebenen 1 bis 6 darin wären dann unter sich
 * geblieben, und das Foto der Nachtscheibe — das im Seiteninhalt steht und
 * deshalb ein Geschwister der Zier ist — hätte sich nicht mehr zwischen sie
 * schieben können. Ohne z-index reihen sich alle sieben Ebenen in denselben
 * Zusammenhang ein, den `isolation: isolate` an der Bühne aufspannt.
 */
.ist-buehne__zier {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ist-buehne__zier > * {
	position: absolute;
	display: block;
	pointer-events: none;
}

/* Das Rad blutet über die rechte Kante hinaus. Ab lg zieht es sich auf die
   Rasterkante zurück und nimmt die Nachtscheibe mit. */
.ist-buehne__rad {
	top: 50%;
	right: -38vw;
	width: 86vw;
	height: 86vw;
	z-index: 6;
	transform: translateY(-50%);
	color: var(--wp--preset--color--gold);
	opacity: 0.6;
}

.ist-buehne .sb-rad {
	width: 100%;
	height: 100%;
}

/* Die Nachtscheibe steht erst ab lg. Darunter läuft die Textspalte in sie
   hinein, und dunkle Schrift auf Nachthimmel ist nicht zu lesen; dort trägt
   die Bühne allein das goldene Rad, wie in den ersten Fassungen. */
.ist-buehne__scheibengrund,
.ist-buehne__scheibenwaerme,
.ist-buehne__scheibenfenster,
.ist-buehne__fassung,
.ist-buehne .sb-scheibe {
	display: none;
}

/* Der Hinweis zum Scrollen. Die Linie fällt und zieht sich wieder ein. */
.ist-buehne__hinweis {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	z-index: 7;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	transform: translateX(-50%);
	color: var(--wp--preset--color--gedaempft);
	font-size: 0.65rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.ist-buehne__hinweis::after {
	content: "";
	display: block;
	width: 1px;
	height: 42px;
	background: linear-gradient(180deg, var(--wp--preset--color--gold-hell), transparent);
	animation: sb-fallende-linie 2.4s ease-in-out infinite;
}

@keyframes sb-fallende-linie {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}

	45% {
		transform: scaleY(1);
		transform-origin: top;
	}

	55% {
		transform: scaleY(1);
		transform-origin: bottom;
	}

	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/* Inhalt der Bühne über der Zier. Die Nachtscheibe ist ausgenommen: sie ist
   zwar Seiteninhalt, gehört aber in die Ebenenfolge der Zier. */
.ist-buehne > :not(.ist-buehne__zier):not(.sb-scheibe) {
	position: relative;
	z-index: 7;
}

/*
 * Der Inhalt der Bühne steht in einer schmalen Spalte an der LINKEN Kante des
 * Inhaltsrasters, damit rechts Platz für Rad und Scheibe bleibt.
 *
 * Die Bühne benutzt deshalb `layout: default` und nicht `constrained`. Die
 * eingebaute Zentrierung von WordPress setzt `margin-inline: auto !important`
 * und hätte hier zweierlei kaputtgemacht: die Textspalte stünde mittig, und
 * die Zier — selbst ein Kind der Gruppe — wäre auf 42 rem eingeschnürt und
 * zentriert worden. Gemessen stand die Nachtscheibe dadurch 384 px zu weit
 * rechts, während das Foto an der richtigen Stelle lag: zwei Scheiben
 * nebeneinander.
 *
 * `max(0px, (100% - 72rem) / 2)` ist dieselbe Rechnung, die `constrained` für
 * die weite Breite anstellt — nur eben nach links statt nach beiden Seiten.
 */
.ist-buehne > :not(.ist-buehne__zier):not(.sb-scheibe) {
	max-width: 42rem;
	/* 1.5rem zusätzlich: im Prototyp steckt die Textspalte in einem 72-rem-
	   Kasten, der SEINERSEITS 1.5 rem Innenabstand trägt. Ohne den Zuschlag
	   steht die Überschrift 24 px weiter links als in der Vorlage. */
	margin-left: calc(max(0px, (100% - 72rem) / 2) + 1.5rem);
	margin-right: auto;
}

.ist-buehne .sb-dachzeile {
	margin-bottom: var(--wp--preset--spacing--50);
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.ist-buehne h1 {
	margin-bottom: var(--wp--preset--spacing--40);
}

/*
 * Der Zeilenumbruch in der Hero-Überschrift ist für die breite Ansicht
 * gesetzt („Klarheit aus einer / größeren Ordnung."). Auf 390 px zerlegte er
 * die Zeile in vier Stücke — „Klarheit aus / einer / größeren / Ordnung." —
 * weil er zum ohnehin nötigen Umbruch noch einen erzwungenen dazulegt. Unter
 * 48 rem bricht die Überschrift deshalb von selbst.
 */
@media (max-width: 47.999em) {
	.ist-buehne h1 br {
		display: none;
	}

	/*
	 * Die Bühne war mit 857 px höher als ein 844 px hohes Fenster; der Hinweis
	 * zum Scrollen stand damit genau auf der Falz.
	 *
	 * Der Fuß ist seit dem 08.09.2026 weiter: mit dem größeren Kopfbereich
	 * rutschte der Inhalt so weit hinunter, dass der zweite Weg („Wie es
	 * abläuft") den Hinweis zum Scrollen überlappte — auf 375 × 812 px
	 * gemessen, Knöpfe endeten bei 766, der Hinweis begann bei 762, und in der
	 * Breite überschnitten sie sich von 143 bis 199 px. Die Polsterung schiebt
	 * den Inhalt nach oben, statt den Hinweis zu verschieben: er gehört an den
	 * unteren Rand der Bühne, dort ist seine Aussage.
	 */
	.ist-buehne {
		padding-top: 6rem;
		padding-bottom: 7.5rem;
	}
}

/* Kürzer als die Überschrift: der Satz soll unter ihr stehen, nicht neben ihr
   auslaufen. */
.ist-buehne .sb-subline {
	max-width: 28rem;
}

/* Der zweite Weg aus der Bühne ist kein zweiter Knopf, sondern eine Zeile mit
   goldener Unterkante — sonst stünden zwei gleich laute Aufforderungen
   nebeneinander. */
.wp-block-button.is-style-sb-still .wp-block-button__link {
	padding: 0 0 0.35rem;
	background: none;
	border: 0;
	border-bottom: 1px solid rgb(196 162 101 / 45%);
	color: var(--wp--preset--color--gedaempft);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.wp-block-button.is-style-sb-still .wp-block-button__link:hover,
.wp-block-button.is-style-sb-still .wp-block-button__link:focus {
	background: none;
	border-bottom-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}

@media (min-width: 48em) {
	.ist-buehne__rad {
		right: -20vw;
		width: 64vw;
		height: 64vw;
		opacity: 0.9;
	}
}

@media (min-width: 64em) {
	.ist-buehne__rad {
		right: auto;
		left: calc(var(--rad-x) - var(--rad-halb));
		width: var(--rad);
		height: var(--rad);
	}

	/*
	 * Die fünf Ebenen der Scheibe, von unten nach oben:
	 *   1 Grund      dunkler Kreis, damit das Foto nicht auf Creme klebt
	 *   2 Foto       core/image aus dem Seiteninhalt — Daniele kann es tauschen
	 *   3 Wärme      Gold nach unten rechts, Indigo in die Ecken
	 *   4 Rad        dieselbe Gravur in hellerem Gold, auf den Kreis beschnitten
	 *   5 Fassung    Ring und innerer Abfall, sonst liest sich die Scheibe flach
	 * Sie hängen alle an denselben Variablen und können deshalb nicht
	 * gegeneinander verrutschen.
	 */
	.ist-buehne__scheibengrund,
	.ist-buehne__scheibenwaerme,
	.ist-buehne__fassung,
	.ist-buehne .sb-scheibe {
		display: block;
		position: absolute;
		top: 50%;
		left: calc(var(--rad-x) - var(--scheibe-halb));
		width: var(--scheibe);
		height: var(--scheibe);
		margin: 0;
		border-radius: 50%;
		transform: translateY(-50%);
		overflow: hidden;
	}

	.ist-buehne__scheibengrund {
		z-index: 1;
		background: var(--sb-nacht-tief);
		box-shadow:
			0 0 0 1px rgb(196 162 101 / 34%),
			0 60px 110px -50px rgb(23 18 46 / 55%);
	}

	.ist-buehne .sb-scheibe {
		z-index: 2;
		pointer-events: none;
	}

	.ist-buehne .sb-scheibe img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Hoch am sternendichten Himmel angeschnitten; die Baumsilhouetten am
		   Fuß der Aufnahme säßen als schwarzer Keil in der Scheibe. */
		object-position: 50% 30%;
		filter: contrast(1.12) saturate(0.88);
	}

	.ist-buehne__scheibenwaerme {
		z-index: 3;
		background:
			radial-gradient(ellipse 68% 58% at 74% 76%, rgb(196 162 101 / 22%) 0%, rgb(196 162 101 / 0%) 62%),
			linear-gradient(202deg, rgb(23 18 46 / 40%) 0%, rgb(23 18 46 / 4%) 52%, rgb(36 28 69 / 32%) 100%);
	}

	/*
	 * Die zweite Kopie des Rades. Sie ist so groß wie die äußere und teilt
	 * deren Mittelpunkt; sichtbar ist sie nur im Kreis der Scheibe. Gravur
	 * liest sich als eine durchgehende Linie über beide Gründe, braucht dafür
	 * aber zwei Farben: auf Creme ein Flüstern, auf dem Nachthimmel einen
	 * hellen Strich.
	 *
	 * Beschnitten wird über ein eigenes Fenster mit `overflow: hidden` und
	 * nicht über `clip-path` an der Ebene selbst — dieselbe Bauweise wie im
	 * Prototyp, und robuster gegenüber den Kompositionsebenen, die
	 * `will-change` aufspannt.
	 */
	.ist-buehne__scheibenfenster {
		display: block;
		z-index: 4;
		top: 50%;
		left: calc(var(--rad-x) - var(--scheibe-halb));
		width: var(--scheibe);
		height: var(--scheibe);
		border-radius: 50%;
		overflow: hidden;
		transform: translateY(-50%);
	}

	.ist-buehne__scheibenrad {
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--rad);
		height: var(--rad);
		transform: translate(-50%, -50%);
		color: var(--wp--preset--color--gold-hell);
		opacity: 0.92;
	}

	.ist-buehne__fassung {
		z-index: 5;
		box-shadow:
			inset 0 0 0 1px rgb(217 196 154 / 42%),
			inset 0 0 6px 1px rgb(12 10 30 / 50%),
			inset 0 0 110px 26px rgb(12 10 30 / 45%);
	}
}

/* ============================================================
   5 — Bänder und Abschnitte
   ============================================================ */

/* Ein dunkles Band mit Sternenspuren. Der Grund ist ein Verlauf von Nacht über
   Nacht-weich in ein tiefes Violett; die Spuren liegen darüber. */
.ist-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(160deg, var(--wp--preset--color--nacht) 0%, var(--wp--preset--color--nacht-weich) 60%, var(--sb-nacht-violett) 100%);
	color: var(--wp--preset--color--creme);
	text-align: center;
}

.ist-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--sb-sternenspuren) center / cover no-repeat;
	pointer-events: none;
}

.ist-band > * {
	position: relative;
	z-index: 1;
}

.ist-band cite {
	display: block;
	color: var(--wp--preset--color--gold-hell);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--klein);
	font-style: normal;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

/* Karten: die drei Wege und die Stimmen. Sie heben sich beim Zeigen leicht an
   — mehr Bewegung braucht eine Seite nicht, die sonst nur langsam rotiert. */
.ist-karte {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ist-karte:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgb(0 0 0 / 8%);
}

/*
 * Die Aufnahmen der vier Elemente stammen aus verschiedenen Handschriften und
 * brauchen je eigene Werte. Diese Werte hängen NICHT am Dateinamen: tauscht
 * Daniele ein Foto, griffe eine solche Regel nicht mehr. Sie sind stattdessen
 * Blockstile, die sie im Editor mitwählen kann.
 */
.is-style-sb-waermer img {
	filter: saturate(0.72) contrast(0.96) brightness(1.16);
}

.is-style-sb-kuehler img {
	filter: saturate(0.46) contrast(1.14) brightness(1.12);
}

.is-style-sb-entsaettigt img {
	filter: saturate(0.32) contrast(1.06) brightness(0.9);
}

.is-style-sb-ruhig img {
	filter: saturate(0.78) contrast(1.04);
}

/* Das Porträt: oben ein Rundbogen, unten gerade. */
.ist-vita .sb-portraet img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	border-radius: 999px 999px 8px 8px;
	box-shadow: 0 24px 48px -24px rgb(44 36 64 / 25%);
	filter: saturate(0.85) contrast(1.03) brightness(1.02) sepia(0.06);
}

/* Der Hinweis auf die Yoga-Seite: ein schmales Band zwischen zwei Haarlinien. */
.ist-hinweis {
	border-top: 1px solid var(--wp--preset--color--linie);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

/* Die Ziffern des Ablaufs. */
.ist-schritte .sb-ziffer {
	display: block;
	color: var(--wp--preset--color--gold-hell);
	font-family: var(--wp--preset--font-family--serife);
	font-size: var(--wp--preset--font-size--zahl);
	font-style: italic;
	line-height: 1;
}

/* Kleine Versalzeilen — Dachzeilen, Kartenfußzeilen, Namen unter Stimmen. */
.sb-versalien {
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* ============================================================
   6 — Kopf und Fuß
   ============================================================ */

/*
 * Der Kopfbereich steht fest über der Seite und ist am Seitenanfang
 * durchsichtig — die Bühne beginnt dadurch am oberen Fensterrand, und die
 * Wortmarke steht auf dem Papierton statt auf einem eigenen Streifen. Erst
 * beim Scrollen legt sich Creme darunter; die Klasse `ist-gescrollt` setzt
 * `kopf.js`.
 *
 * DIE RICHTUNG IST DER GANZE WITZ. Andersherum geschrieben — Creme als
 * Grundzustand, eine Klasse fürs Durchsichtige — zeigte jeder Seitenaufruf
 * einen hellen Streifen quer über der Bühne, in dem die Wortmarke stand: das
 * Stylesheet steht im `<head>`, `kopf.js` läuft mit `defer` erst nach dem
 * Aufbau der Seite, und die halbe Sekunde Überblendung kam obendrauf. In einem
 * Hintergrund-Tab blieb der Streifen sogar stehen, bis jemand hinsah — ein
 * unsichtbares Fenster rechnet keine Übergänge. Am 30.08.2026 auf der Vorschau
 * gemeldet und nachgemessen.
 *
 * Der Grundzustand einer Klasse, die JavaScript setzt, gehört deshalb ins CSS,
 * nicht ins Skript.
 */
.sb-kopf {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 20;
	background: transparent;
	box-shadow: none;
	transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.sb-kopf.ist-gescrollt {
	background: rgb(250 248 244 / 95%);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 2px rgb(44 36 64 / 6%);
}

/*
 * Hier stand einmal ein luftigeres `padding-block` für den Kopf am
 * Seitenanfang. Es hat nie gewirkt: `parts/header.html` schreibt die Polsterung
 * als `style`-Attribut an die innere Gruppe, und ein Attribut schlägt jede
 * Klassenregel. Wer den Kopf beim Scrollen schmaler werden lassen will, nimmt
 * die Polsterung aus dem Blockmarkup heraus und setzt beide Werte hier.
 */

/*
 * DIE WORTMARKE — „Sternen" kräftig, „Sprache" leicht.
 *
 * Die beiden Hüllen setzt `sternbild_wortmarke_zweiteilig()` in
 * `functions.php`; Schrift, Größe und Sperrung stehen in `theme.json`. Der
 * Unterschied ist ein echter Gewichtsunterschied der variablen Cormorant und
 * keine nachgestellte Kontur — Acheria hat nur einen Schnitt, und eine Kontur
 * war bei 24 wie bei 34 px nicht zu sehen (zweimal gerastert, 08.09.2026).
 *
 * Die Regeln stehen ohne `.sb-kopf`, weil die Wortmarke auch im Fußbereich
 * steht und dort gleich aussehen soll.
 */
/*
 * DIE FARBEN LIEGEN SO HERUM UND NICHT ANDERS: Gold auf „Sternen", Blau auf
 * „Sprache". Sterne sind das Leuchtende, die Sprache das Ruhige — andersherum
 * gelesen ergibt die Marke keinen Sinn, auch wenn sie satztechnisch gleich
 * aussieht. Zuerst stand es verkehrt herum, am 08.09.2026 gemeldet.
 */
.sb-marke-stark {
	color: var(--sb-marke-gold);
	font-weight: 600;
}

.sb-marke-fein {
	color: var(--sb-marke-tief);
	font-weight: 300;
}

/* Der Rückfall, falls der Titel einmal keine Trennstelle hat und die beiden
   Hüllen ausbleiben: dann steht die ganze Marke im tiefen Blau, nie in Tinte. */
.sb-kopf .wp-block-site-title,
.sb-kopf .wp-block-site-title a {
	color: var(--sb-marke-tief);
	text-decoration: none;
}

/*
 * Wortmarke und Untertitel stehen als Paar. Der Untertitel ist die
 * Versalzeile aus `theme.json` (Jost) — bewusst eine andere Schriftsippe als
 * die Wortmarke, sonst verschwimmen beide zu einem Block.
 *
 * Die Sperrung des Untertitels ist mit 0.09em bewusst knapp: die Zeile trägt
 * einen Namen und ein Fachwort und soll als EINE Angabe gelesen werden.
 * Weiter gesperrt zerfiel sie in Einzelbuchstaben und wurde länger als die
 * Wortmarke, unter der sie steht.
 */
.sb-marke {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.sb-marke .wp-block-site-tagline {
	margin: 0;
	/* Die Wortmarke ist gesperrt und schiebt dadurch minimal ein; ohne diesen
	   Ausgleich stehen die beiden linken Kanten sichtbar versetzt. */
	padding-left: 0.06em;
}

/*
 * DER KOPF AUF DEM HANDY.
 *
 * Neben der Wortmarke steht dort nur der Menüknopf, die Spalte ist also breit
 * genug — der Untertitel bleibt und wird nicht ausgeblendet. Er bricht aber
 * gern in zwei Zeilen und schöbe den Kopf dann über die Bühne; deshalb rückt
 * er enger und kleiner, und die Wortmarke gibt ihre Sperrung zum Teil wieder
 * ab. Beide Zeilen passen damit bis hinunter zu 320 px in je eine Zeile.
 */
@media (max-width: 47.99rem) {
	.sb-marke {
		gap: 0.25rem;
	}

	.sb-kopf .wp-block-site-title {
		letter-spacing: 0.03em;
	}

	.sb-kopf .wp-block-site-tagline {
		font-size: 0.625rem;
		letter-spacing: 0.06em;
	}
}

/* Die Navigation stand mit 0.875 rem und 0.14em Sperrung zu leise neben der
   Wortmarke. Jetzt Grundgröße; die Sperrung geht im selben Zug zurück, sonst
   wird die Zeile allein durch die Vergrößerung zu lang für vier Einträge. */
.sb-kopf .wp-block-navigation {
	font-size: var(--wp--preset--font-size--basis);
	letter-spacing: 0.08em;
}

.sb-kopf .wp-block-navigation a {
	color: var(--wp--preset--color--tinte-weich);
	text-decoration: none;
}

.sb-kopf .wp-block-navigation a:hover {
	color: var(--wp--preset--color--gold);
}

/*
 * DAS MENÜ ALS ÜBERLAGERUNG (`overlayMenu: mobile`, also unter 600 px).
 *
 * WordPress reicht die Ausrichtung des Kopfmenüs an die Überlagerung durch:
 * aus `justifyContent: right` wurde dort `align-items: flex-end`. Gemessen am
 * 30.08.2026 auf der Vorschau standen die vier Einträge dadurch in einer 80 px
 * schmalen Spalte am rechten Rand, dicht unter dem Schließkreuz — bei 390 px
 * Fensterbreite und 844 px Höhe. Der Grund der Überlagerung war außerdem
 * reines Weiß, das einzige Weiß auf der ganzen Seite.
 *
 * Das Theme hatte für die Überlagerung bis dahin keine einzige Regel. Die
 * Ausrichtung gehört hierher und nicht in die Blockeinstellungen: das Kopfmenü
 * SOLL rechts stehen, die Überlagerung nicht.
 *
 * DIE FARBEN dagegen stehen NICHT hier, sondern als `overlayBackgroundColor`
 * und `overlayTextColor` am Navigationsblock in `parts/header.html`. Der Kern
 * setzt sein Weiß mit
 * `.wp-block-navigation:not(.has-background) …:not(.disable-default-overlay)`
 * — fünf Klassen, gegen die eine Themeregel nur mit Aufschlag ankäme. Die
 * Blockattribute hängen dem Behälter `has-background` an und schalten die
 * Regel damit an ihrer eigenen Bedingung ab. Das ist der vorgesehene Weg und
 * überlebt die nächste WordPress-Fassung.
 *
 * Die Selektoren unten sind absichtlich vier Klassen lang. Der Kern setzt
 * seine Ausrichtung mit drei; bei Gleichstand entschiede die Reihenfolge im
 * `<head>`, und die hängt davon ab, wann welcher Block gerendert wurde.
 */
.sb-kopf .wp-block-navigation__responsive-container.is-menu-open {
	padding-inline: var(--sb-rand);
}

/*
 * Zwischen dem Behälter und dem Inhalt liegen beim Kern ZWEI weitere Kästen:
 * `__responsive-close` und `__responsive-dialog`, beide `display: block`. Sie
 * wachsen nur bis zur Höhe der vier Einträge, ein `flex: 1` am Inhalt darin
 * läuft deshalb ins Leere — gemessen 408 px in einem 844 px hohen Fenster, die
 * Einträge klebten unter dem Schließkreuz statt in der Mitte der Fläche. Beide
 * Kästen müssen mitwachsen, nicht nur der innerste.
 */
.sb-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.sb-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.sb-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	align-items: center;
	justify-content: center;
	padding-bottom: var(--wp--preset--spacing--60);
}

/*
 * `flex: 0 0 auto` ist hier der Unterschied zwischen „mittig“ und „oben“: die
 * Liste wächst sonst auf die ganze Höhe des Inhalts, und das `center` darüber
 * hat nichts mehr zu zentrieren. Gemessen: Kasten 732 px hoch, Einträge
 * zusammen 296 px, alle vier oben.
 */
.sb-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex: 0 0 auto;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.sb-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--titel-s);
	letter-spacing: 0.08em;
}

.sb-fuss a {
	color: var(--wp--preset--color--creme);
	text-decoration: none;
}

.sb-fuss a:hover {
	color: var(--wp--preset--color--gold-hell);
}

/* Die Mondphasen als Schlusszeichen des Fußbereichs: fünf Phasen, links und
   rechts davon eine Haarlinie. Beides sind Hintergründe einer leeren Gruppe —
   im Markup steht kein einziges zusätzliches Element, und Daniele kann in der
   Fußzeile nichts anklicken, was gar kein Inhalt ist. */
.sb-mondzeile {
	height: 1.125rem;
	background-image:
		var(--sb-mondphasen),
		linear-gradient(90deg,
			rgb(250 248 244 / 8%) 0 calc(50% - 4.6rem),
			transparent calc(50% - 4.6rem) calc(50% + 4.6rem),
			rgb(250 248 244 / 8%) calc(50% + 4.6rem) 100%);
	background-position: center, center;
	background-size: 7.25rem 1.125rem, 100% 1px;
	background-repeat: no-repeat;
}

.sb-fussliste {
	list-style: none;
	padding-left: 0;
}

.sb-fussliste li + li {
	margin-top: 0.625rem;
}

.sb-fusszeile {
	font-size: var(--wp--preset--font-size--klein);
	opacity: 0.6;
}

/*
 * Die Wortmarke im Fußbereich, groß in der ersten Spalte.
 *
 * Sie steht dort als `core/site-title` und nicht als Überschrift mit
 * eingetragenem Namen: Ändert Daniele den Seitentitel in den Einstellungen,
 * soll der Fußbereich mitgehen. Auf Nachtblau braucht sie Creme statt Tinte.
 */
/*
 * Im Fußbereich steht die Wortmarke auf Nachtblau. Beide Farben müssen dort
 * andere sein: das tiefe Blau von „Sprache" verschwände im Grund, und das
 * dunklere Gold von „Sternen" ist für einen hellen Grund gerechnet. Die
 * Rollen bleiben, die Töne drehen — „Sternen" bekommt das helle Gold der
 * Palette, „Sprache" Creme.
 */
.sb-fuss .wp-block-site-title,
.sb-fuss .wp-block-site-title a,
.sb-fuss .sb-marke-fein {
	color: var(--wp--preset--color--creme);
	text-decoration: none;
}

.sb-fuss .sb-marke-stark {
	color: var(--wp--preset--color--gold-hell);
}

/*
 * DIE ZEILE GANZ UNTEN: „© SternenSprache · Daniele … | Psychologische
 * Astrologie".
 *
 * Sie setzt sich aus drei Blöcken zusammen — Zeichen, Wortmarke, Untertitel —
 * statt aus einem Satz mit eingetragenem Namen. Der Name steht seit dem
 * 08.09.2026 im Untertitel der Seite; ein zweites Mal eingetragen wäre er
 * eine Stelle, die beim nächsten Namenswechsel vergessen wird.
 *
 * Beide Blöcke bringen ihre eigene Größe mit (die Wortmarke 1.6875 rem, der
 * Untertitel 0.6875 rem). In der Fußzeile gilt für beide dieselbe kleine
 * Schrift; die zwei Klassen reichen dafür aus, weil `theme.json` seine Größen
 * über `:root :where(…)` setzt und damit die schwächere Regel hat.
 */
.sb-fussmarke {
	align-items: baseline;
	gap: 0.4rem;
}

.sb-fusszeile .wp-block-site-title,
.sb-fusszeile .wp-block-site-tagline {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

/* Der Untertitel bekommt seinen Trennpunkt aus dem Stylesheet, nicht als
   eigenen Textblock — ein Punkt zum Anklicken wäre im Editor ein Feld, das
   niemand füllen soll. */
.sb-fusszeile .wp-block-site-tagline::before {
	content: "· ";
}

/* ============================================================
   7 — Rücksicht auf Bewegungsempfindlichkeit
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.sb-dreht,
	.ist-buehne__hinweis::after,
	.ist-karte {
		animation: none;
		transition: none;
	}

	.ist-karte:hover {
		transform: none;
	}
}

/* ============================================================
   8 — Die Abschnitte im Einzelnen
   ============================================================ */

/* Der Satz unter einer Abschnittsüberschrift. Schmaler als der Abschnitt,
   damit er als Vorspann liest und nicht als erste Textspalte. */
.sb-vorspann {
	max-width: 36rem;
	margin-inline: auto;
}

/* Kleine Versalzeile — Dachzeilen und Namen unter Stimmen. */
.sb-dachzeile {
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* Die Fußzeile einer Karte: Unterrichtsform und Ort. */
.sb-meta {
	font-family: var(--wp--preset--font-family--serife);
	font-style: italic;
}

/* --- Drei Wege ------------------------------------------------------- */

.ist-karte {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 1px solid rgb(196 162 101 / 20%);
	border-radius: 1rem;
	background: rgb(240 237 230 / 60%);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ist-karte:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgb(44 36 64 / 8%);
}

/* Das Zeichen über jeder Karte. Eine Maske, kein Markup: es kann dadurch im
   Seiteninhalt weder gelöscht noch ungültig werden. */
.ist-karte::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 0 auto var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: var(--zeichen) center / contain no-repeat;
	mask: var(--zeichen) center / contain no-repeat;
}

.ist-karte--sonne {
	--zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Ccircle cx='27' cy='27' r='18'/%3E%3Ccircle cx='27' cy='27' r='7'/%3E%3Cpath d='M27 2v7M27 45v7M2 27h7M45 27h7'/%3E%3C/svg%3E");
}

.ist-karte--mond {
	--zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M36 8A22 22 0 1 0 36 46 18 18 0 1 1 36 8'/%3E%3Ccircle cx='42' cy='14' r='1.6' fill='%23fff'/%3E%3Ccircle cx='47' cy='24' r='1.2' fill='%23fff'/%3E%3C/svg%3E");
}

.ist-karte--stern {
	--zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M27 10C27 22 18 28 8 28c10 0 19 6 19 18 0-12 9-18 19-18-10 0-19-6-19-18Z'/%3E%3C/svg%3E");
}

/* --- Die vier Elemente ----------------------------------------------- */

/* Die Haarlinie hinter den Kreisen liest sich wie eine Aspektlinie. Sie sitzt
   auf halber Höhe der Kreise, also unter dem Vorspann und über den Namen. */
.sb-elementenreihe {
	position: relative;
}

.sb-elementenreihe::before {
	content: "";
	position: absolute;
	top: 5.25rem;
	right: 6%;
	left: 6%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold) 16%, var(--wp--preset--color--gold) 84%, transparent);
	opacity: 0.4;
}

.sb-elementenreihe .wp-block-column {
	position: relative;
}

.sb-elementenreihe .wp-block-image {
	position: relative;
	max-width: 10.5rem;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
}

.sb-elementenreihe .wp-block-image img {
	display: block;
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
}

/* Ein gemeinsamer Verlauf über allen vier Kreisen. Er bindet Aufnahmen
   zusammen, die aus verschiedenen Handschriften stammen. */
.sb-elementenreihe .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(ellipse 70% 60% at 72% 78%, rgb(196 162 101 / 26%) 0%, rgb(196 162 101 / 0%) 64%),
		linear-gradient(200deg, rgb(250 248 244 / 12%) 0%, rgb(196 162 101 / 9%) 46%, rgb(23 18 46 / 34%) 100%);
	pointer-events: none;
}

/*
 * Der Ausschnitt hängt an der Stelle in der Reihe und ist auf das jeweilige
 * Motiv eingestellt. Wer ein Bild tauscht, prüft ihn nach — das steht so auch
 * im Kopf von `patterns/elemente.php`.
 *
 * Erde und Wasser sind Hochformate, deren Motiv tief und links sitzt; ohne
 * Zoom und Versatz stünde im Kreis leeres Bokeh beziehungsweise eine leere
 * dunkle Fläche.
 */
.sb-elementenreihe .wp-block-column:nth-child(1) img {
	object-position: 53% 50%;
}

.sb-elementenreihe .wp-block-column:nth-child(2) img {
	object-position: 50% 76%;
	transform: scale(1.25) translateX(-6%);
}

.sb-elementenreihe .wp-block-column:nth-child(3) img {
	object-position: 50% 50%;
}

.sb-elementenreihe .wp-block-column:nth-child(4) img {
	object-position: 50% 86%;
	transform: scale(1.5) translateX(-5.5%);
}

/* --- Zitatband und Stimmen ------------------------------------------- */

.sb-zitat {
	font-style: italic;
	line-height: 1.45;
}

.ist-band .sb-zitat {
	max-width: 36rem;
	margin-inline: auto;
}

.ist-stimme {
	padding: var(--wp--preset--spacing--50);
	border-left: 2px solid var(--wp--preset--color--gold);
	border-radius: 0 1rem 1rem 0;
	background: var(--wp--preset--color--weiss);
}

/* --- Über mich -------------------------------------------------------- */

/* Die Breite der beiden Spalten steht als Blockattribut im Pattern und nicht
   hier: WordPress setzt bei gesetzter Breite `flex-grow: 0` mit, sonst wächst
   die Spalte trotz `flex-basis` über den freien Raum weiter. Gemessen stand
   das Porträt sonst 755 px breit neben einer 317 px schmalen Textspalte. */
.ist-vita .sb-portraet .wp-block-image {
	max-width: 28rem;
	margin: 0;
}

.sb-signatur {
	margin-top: var(--wp--preset--spacing--40);
	font-style: italic;
}

.sb-quali {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linie);
}

/* Die Aufzählung trägt goldene Punkte statt der Systemzeichen und läuft ab
   36rem zweispaltig — sechs Zeilen untereinander wären eine Liste, nebeneinander
   sind es zwei kurze Spalten. */
.sb-qualiliste {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--30);
}

.sb-qualiliste li {
	position: relative;
	padding-left: 1rem;
	margin-bottom: 0.625rem;
}

.sb-qualiliste li::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

@media (min-width: 36rem) {
	.sb-qualiliste {
		columns: 2;
		column-gap: var(--wp--preset--spacing--40);
	}

	.sb-qualiliste li {
		break-inside: avoid;
	}
}

/* --- Ablauf ----------------------------------------------------------- */

.sb-ziffer {
	margin-bottom: 0;
	color: var(--wp--preset--color--gold-hell);
	font-family: var(--wp--preset--font-family--serife);
	font-size: var(--wp--preset--font-size--zahl);
	font-style: italic;
	line-height: 1;
}

/* --- Kontakt ---------------------------------------------------------- */

.sb-formular {
	margin-top: var(--wp--preset--spacing--50);
	text-align: left;
}

.sb-feld {
	margin-bottom: var(--wp--preset--spacing--30);
}

.sb-feld label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--wp--preset--color--gedaempft);
}

.sb-feld input,
.sb-feld textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 0;
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--tinte);
	font: inherit;
}

.sb-feld input:focus,
.sb-feld textarea:focus {
	border-color: var(--wp--preset--color--gold);
	outline: none;
}

.sb-absenden button {
	width: 100%;
}

/* Der Honigtopf steht für Menschen nicht da, für Maschinen schon. `display:
   none` wäre zu offensichtlich; so bleibt er im Baum und außerhalb des Bildes. */
.sb-honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sb-rueckmeldung {
	padding: var(--wp--preset--spacing--30);
	border-left: 2px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--creme);
	text-align: left;
}

.sb-direktweg {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--gedaempft);
}

/* ============================================================
   9 — Seiten ohne Bühne
   ============================================================ */

/*
 * Der Kopfbereich steht fest über der Seite, weil die Bühne unter ihm beginnen
 * soll. Auf jeder anderen Seite verdeckte er dadurch die ersten Zeilen: das
 * Seitengerüst bringt keinen Ausgleich mit, und ein fester Kopf belegt im
 * Fluss keinen Platz.
 *
 * Statt überall einen Abstand aufzuaddieren und ihn auf der Startseite wieder
 * abzuziehen, entscheidet die Seite selbst: gibt es keine Bühne, steht der
 * Kopf im Fluss und klebt beim Scrollen oben — dieselbe Wirkung, ohne
 * Rechnerei.
 */
body:not(:has(.ist-buehne)) .sb-kopf {
	position: sticky;
}

/*
 * ...und umgekehrt: gibt es eine Bühne, muss sie am oberen Fensterrand
 * beginnen.
 *
 * WordPress setzt zwischen die Kinder von `.wp-site-blocks` den Blockabstand,
 * hier 1.5 rem. Der Kopfbereich steht über der Seite und belegt im Fluss
 * keinen Platz — sein Abstand nach unten blieb trotzdem stehen und schob die
 * Bühne um 24 px hinunter. Oben blieb ein Streifen blankes Creme, ohne den
 * rosigen Schein aus `.ist-buehne::before`, und die Kante lief quer durch die
 * Wortmarke. Am 30.08.2026 gemessen und gemeldet.
 */
body:has(.ist-buehne) .wp-site-blocks > main {
	margin-block-start: 0;
}

/* Die Textspalte der Vita ist 670 px breit und liefe damit auf rund 95 Zeichen
   je Zeile hinaus. Lesbar sind 60 bis 75. */
.ist-vita .wp-block-column:not(.sb-portraet) {
	max-width: 34rem;
}

/* ============================================================
   10 — Bausteine für neue Seiten
   ============================================================ */

/*
 * Die Schwelle: das Band, mit dem jede Seite außer der Startseite öffnet.
 * Farblos in Creme, unmittelbar unter dem Kopfbereich — ohne sie begänne eine
 * Unterseite mit einer weißen Fläche und der Titel schwebte darin.
 */
.ist-schwelle {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.ist-schwelle h1 {
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: 0;
}

/* Der gewöhnliche Textabschnitt einer Unterseite. Die Satzbreite steht in
   theme.json (contentSize), hier steht nur der Rhythmus. */
.ist-text h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.ist-text > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

/* In einem laufenden Text ist eine h2 eine Zwischenüberschrift und keine
   Abschnittsüberschrift. Auf 390 px lief „Angaben gemäß § 5 DDG" in
   Abschnittsgröße über zwei Zeilen und stand lauter da als der Seitentitel. */
.ist-text h2 {
	font-size: var(--wp--preset--font-size--titel-s);
}