/*
Theme Name: Shantam
Theme URI: https://yoga-shantam.de/
Author: Philippe
Description: Ruhiges Block-Theme für die Yogaschule Yoga Shantam in Aachen. Warme Sandtöne, Terrakotta und Kastanie gegen ein kühles Petrol, klare Typografie aus Fraunces und Hanken Grotesk. Ohne Page Builder, ohne Icon-Bibliotheken, Schriften lokal ausgeliefert.
Version: 0.22.0
Requires at least: 6.5
Tested up to: 7.0
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: shantam
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu, editor-style, featured-images, translation-ready, blog
*/

/* Alles Gestalterische steht in theme.json. Hier nur, was theme.json nicht abbilden kann. */

/* --- Deutsche Texte in schmalen Spalten sauber umbrechen --- */
body {
	hyphens: auto;
	-webkit-hyphens: auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .wp-block-post-title, .wp-block-site-title {
	hyphens: manual;
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* --- Optischer Ausgleich der Fraunces-Achsen: weicher, leicht eigenwilliger Schnitt --- */
h1, h2, h3, .wp-block-post-title a, .wp-block-post-title,
.wp-block-site-title, .wp-block-site-title a,
.wp-block-quote, .wp-block-pullquote {
	font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

h1, .wp-block-post-title {
	font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 72;
}

/* --- Links: Unterstreichung mit Luft statt harter Linie --- */
a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: text-decoration-color 120ms ease, color 120ms ease;
}

a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	text-decoration-color: currentColor;
}

/* --- Sichtbarer Tastaturfokus, überall --- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--terrakotta);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Sprungmarke zum Inhalt --- */
.skip-link.screen-reader-text {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--tinte);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	padding: 0.9rem 1.4rem;
	border: 1px solid var(--wp--preset--color--terrakotta);
	text-decoration: none;
	z-index: 100000;
}

/* --- Kopfbereich: KEINE untere Kante ------------------------------------
   Bis 0.19.1 lag hier ein Verlauf in einem ::after (Safran in der Mitte,
   zu den Rändern auslaufend). Er ist am 30.07.2026 entfallen, und zwar
   nicht aus Geschmack, sondern weil er gemessen die dritte von drei
   waagerechten Kanten auf denselben 165 px war:

     y   0–116   Kopfbereich
     y     116   die Verlaufslinie
     y 116–140   24 px Sandstreifen (blockGap zwischen Kopf und main)
     y     140   die Farbkante der Schwelle in Creme

   Drei Trennungen für einen Übergang. Der Benutzer hat es als
   „unnötige Verkomplexifizierung" beanstandet, und die Messung gibt ihm
   recht. Jetzt trennt nichts: Kopfbereich, Auftakt und Inhalt liegen in
   einem durchgehenden Sandfeld, und die Trennung übernimmt der Raum.

   Wer eine Kante wieder einführt, muss die anderen zwei zuerst zählen. */
.shantam-kopf {
	position: relative;
}

/* --- Und der Sandstreifen darunter --------------------------------------
   Der Kopfbereich ist ein Vorlagenteil, `main` sein Geschwister. Zwischen
   beiden liegt der Standardabstand der Blocklayouts (gemessen 24 px). Die
   Regel `.alignfull + .alignfull` weiter unten greift hier nicht: sie gilt
   innerhalb des Inhalts, nicht über die Vorlagenteile hinweg.

   Seit 0.19.5 fällt er AUCH VOR DEM FUSSBEREICH weg. Solange der Fuß creme
   war, waren die 24 px ein gewollter Atemzug; jetzt ist er dunkel, und der
   Streifen stand als heller Strich zwischen dem Schlussband und dem Grund —
   gemessen 24 px, und damit genau das Zebra, das der Umbau beseitigen soll.
   Zwei Farbflächen stoßen aneinander, wie zwei Bänder im Inhalt auch. */
.wp-site-blocks > header + main,
.wp-site-blocks > main + footer {
	margin-top: 0;
}

/* --- Navigation: eine Linie, die beim Hover aufläuft, statt Kasten oder
   springender Unterstreichung. Nur die oberste Ebene, nicht die Untermenüs. --- */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.2rem;
}

/* Die auflaufende Linie steht in Terrakotta, nicht in der Textfarbe: eine
   Linie in Tinte unter einem Wort in Tinte ist ein technischer Unterstrich,
   in Terrakotta ist sie eine Antwort. */
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--wp--preset--color--terrakotta);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 180ms ease;
}

.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	transition: color 150ms ease;
}

.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--terrakotta);
}

.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* Die aktuelle Seite trägt die Linie dauerhaft, in Terrakotta. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	height: 2px;
	background-color: var(--wp--preset--color--terrakotta);
}

/* --- Marke im Kopf: Name und Untertitel gestapelt neben dem Zeichen ---
   Der Untertitel steht dicht unter dem Namen und darf nicht umbrechen —
   sonst wächst der Kopfbereich in die Höhe. */
.shantam-marke {
	line-height: 1.15;
}

.shantam-marke .wp-block-site-title {
	line-height: 1.1;
}

/* Die Größe steht HIER und nicht als `fontSize` im Blockmarkup. Grund,
   gemessen am 30.07.2026: WordPress liefert die Preset-Klasse
   `.has-klein-font-size` mit `!important` aus. Solange sie am Block hing,
   war jede Größenangabe aus dem Stylesheet wirkungslos — die Regel stand da,
   gerendert wurden weiter 14 px. Ohne die Klasse greift die Kaskade normal,
   und es braucht kein drittes `!important` im Theme. */
.shantam-marke .wp-block-site-tagline {
	margin-block: 0;
	font-size: 0.875rem;
	line-height: 1.2;
	text-wrap: nowrap;
}

/* Das Zeichen darf nicht schrumpfen. In der einzeiligen Reihe des Handys
   kann der Markenblock wegen `text-wrap: nowrap` nicht kleiner werden — also
   gab das Flexlayout beim Zeichen nach: bei 320 px gemessen 2 px statt 44.
   Ein Logo von 2 px ist kein Logo. */
.shantam-kopf .wp-block-site-logo {
	flex: 0 0 auto;
}

/* --- Der Untertitel auf dem Handy ---------------------------------------
   Bis 0.19.1 fiel er hier weg. Der Grund war gemessen und richtig: Zeichen,
   Name und Untertitel brauchten bei 375 px zusammen 335 px, das Menüzeichen
   fand daneben keinen Platz, rutschte in eine zweite Zeile und machte den
   Kopfbereich 192 px hoch statt 117 px.

   Der Schluss daraus war trotzdem falsch. „Die flexible Yogaschule in
   Aachen" sagt in fünf Wörtern, was die Schule ist und wo sie steht — auf
   einem Telefon ist das die wichtigste Zeile der ganzen Seite, und sie
   fehlte genau dort. Beanstandet am 30.07.2026.

   Die Ursache war nicht der Platz, sondern die Größe: der Untertitel lief
   in derselben Schriftgröße wie im Kopf des Desktops und stand mit
   `text-wrap: nowrap` auf seiner vollen Breite. Kleiner gesetzt passt er,
   ohne dass der Kopfbereich wächst. Die Werte sind bei 375 px und bei
   320 px nachgemessen, nicht geschätzt. */
@media (max-width: 599px) {
	.shantam-marke .wp-block-site-tagline {
		display: block;
		font-size: 0.6875rem;
		letter-spacing: 0.004em;
		opacity: 0.85;
	}

	/* Zeichen, Name und Menüzeichen stehen auf dem Handy in einer Zeile,
	   auch bei 320 px. Ohne das Folgende passte es dort weiterhin nicht:
	   gemessen brauchten Zeichen und Name 211 px, das Menüzeichen 44 px,
	   und der Abstand aus dem Blockmarkup fraß den Rest der 280 px
	   verfügbaren Breite. Ein kleineres Zeichen und ein knapperer Abstand
	   lassen 22 px Luft. */
	.shantam-kopf .wp-block-group.alignwide {
		flex-wrap: nowrap;
		column-gap: 0.75rem;
	}

	.shantam-kopf .wp-block-site-logo img {
		width: 44px;
		height: auto;
	}

	.shantam-kopf .wp-block-site-title {
		text-wrap: nowrap;
	}
}

/* --- Wechselnde Sprüche --------------------------------------------------
   Alle Sprüche liegen im selben Rasterfeld übereinander. Damit bleibt die
   Höhe die des längsten und nichts springt, wenn gewechselt wird.

   Ohne JavaScript fehlt die Klasse `laeuft`; dann ist schlicht der erste
   Spruch da und die übrigen sind ausgeblendet. Das Skript blendet danach
   mit `ist-sichtbar` über. */
.ist-sprueche {
	display: grid;
	align-items: center;
}

/* align-items: center statt des voreingestellten stretch — sonst hängt jeder
   Spruch an der Oberkante des Rasterfelds. Das Feld ist so hoch wie der
   längste (das Namaste-Zitat, fünf Zeilen); die drei kurzen Sprüche standen
   darin oben und ließen darunter eine halbe Bandhöhe leer. Mittig gestellt
   sitzt jeder in der Mitte des Bandes, und der Wechsel bleibt ruhig. */
.ist-sprueche > * {
	grid-area: 1 / 1;
	margin-block: 0;
}

.ist-sprueche:not(.laeuft) > *:not(:first-child) {
	display: none;
}

.ist-sprueche.laeuft > * {
	opacity: 0;
	visibility: hidden;
	transition: opacity 900ms ease, visibility 0s linear 900ms;
}

.ist-sprueche.laeuft > .ist-sichtbar {
	opacity: 1;
	visibility: visible;
	transition: opacity 900ms ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.ist-sprueche.laeuft > * {
		transition: none;
	}
}

/* --- Wann das Menü zusammenklappt ------------------------------------
   WordPress klappt bei 600 px zusammen. Das Menü trägt fünf Säulen ohne
   Untermenüs; gemessen im laufenden Dokument braucht die Leiste 595 px,
   Zeichen und Name daneben 251 px, mit Abstand und Seitenrand zusammen
   1006 px Ansichtsbreite. Darunter fiele das Menü in eine zweite Zeile und
   der Kopfbereich würde zum Doppeldecker (120 px statt 52 px hoch).
   Der Wechsel liegt deshalb bei 1040 px, mit etwas Luft.

   WENN MENÜEINTRÄGE DAZUKOMMEN, WEGFALLEN ODER LÄNGERE NAMEN BEKOMMEN, MUSS
   DIESER WERT NEU GEMESSEN WERDEN. Probe: Kopfhöhe bei der Zielbreite
   auslesen — 52 px heißt einzeilig, 120 px heißt Doppeldecker.
   (Zwischenstand 0.11.0: mit dreistufigem Menü nach Vorbild der Hauptdomain
   brauchte die Leiste 833 px und der Umbruchpunkt hätte bei 1200 px liegen
   müssen. Das Menü ist stattdessen wieder flach.)

   Die beiden Regeln spiegeln genau die, die WordPress ab 600 px setzt. */
@media (max-width: 1039px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Zeichen zum Auf- und Zuklappen: 28 px Strich plus Luft ergibt eine
   Trefferfläche von 44 px, ohne dass der Kopfbereich unruhig wird.

   Beide sitzen in einer weichen Scheibe in Creme statt als nacktes Zeichen
   auf dem Sandgrund — sonst sieht die einzige Schaltfläche im Kopfbereich
   aus wie ein Systemsymbol. Beim Berühren wird die Scheibe voll deckend und
   das Zeichen terrakotta. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.5rem;
	border-radius: 999px;
	color: var(--wp--preset--color--tinte);
	background-color: color-mix(in srgb, var(--wp--preset--color--creme) 80%, transparent);
	transition: background-color 150ms ease, color 150ms ease;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	background-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--terrakotta);
}

/* Auf Creme (im aufgeklappten Menü) braucht die Scheibe den helleren Grund,
   sonst verschwindet sie im Untergrund. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	background-color: color-mix(in srgb, var(--wp--preset--color--sand) 85%, transparent);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	background-color: var(--wp--preset--color--sand);
}

.wp-block-navigation__responsive-container-open {
	margin-inline-end: -0.5rem;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* --- Aufgeklapptes Menü: großzügig gesetzt, in der Titelschrift.
   Dort ist Platz, also darf es auch wirken. --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--titel-s);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* Das aufgeklappte Menü ist ein Raum, keine Liste am Rand.
   ------------------------------------------------------------------
   Vorher hing die Liste oben rechts in der Ecke: rechtsbündig, weil die
   Leiste am Schreibtisch rechts steht, und oben, weil WordPress den Inhalt
   dort beginnen lässt. Auf dem Handy stand sie damit an der Kante, die
   längeren Namen liefen bis an den Bildschirmrand, und darunter blieben
   drei Viertel des Fensters leer. Fünf Wörter in einer Ecke sehen nicht
   ruhig aus, sondern vergessen.

   Jetzt steht die Liste mittig im Fenster — dieselbe Haltung wie die
   Schwelle, mit der jede Seite öffnet: erst Raum, dann Inhalt. Darüber
   steht das runde Zeichen der Schule. Es tut hier, was sonst der Schwung
   tut, und bringt zugleich die Marke zurück, die das aufgeklappte Menü
   sonst verdeckt. Beides übereinander wäre zu viel Zierat für fünf Zeilen.

   Die Randbreite ist großzügiger als die 20 px, die WordPress setzt: an
   einer 20-px-Kante klebt Fraunces in Titelgröße förmlich am Glas.

   ZUR SCHREIBWEISE: die Regeln tragen alle `:not(.disable-default-overlay)`,
   obwohl diese Klasse hier nie vorkommt. WordPress schreibt seine eigenen
   Regeln für das aufgeklappte Menü so, und `:not()` mit einer Klasse darin
   zählt für die Spezifität mit. Ohne den Zusatz stünde hier 2 gegen 3, und
   keine dieser Regeln käme an. Gemessen, nicht vermutet: Rand und
   Ausrichtung blieben zunächst wirkungslos. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding-block: 1.25rem 2rem;
	padding-inline: clamp(1.5rem, 7vw, 3rem);

	/* Der Knopf, an dem WordPress selbst die Ausrichtung im aufgeklappten
	   Menü festmacht. Die Leiste am Schreibtisch steht rechts; das
	   aufgeklappte Menü soll trotzdem mittig stehen. */
	--navigation-layout-justification-setting: center;
	--navigation-layout-align: center;
	--navigation-layout-justify: center;
}

/* Die drei Hüllen zwischen Rand und Liste sind von Haus aus Blöcke und so
   hoch wie ihr Inhalt. Damit die Liste die Fenstermitte finden kann, muss
   die Höhe bis nach unten durchgereicht werden — deshalb wird jede Hülle
   selbst zur Spalte, die sich streckt. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}

/* Das Schließzeichen bleibt oben rechts, wo der Daumen es sucht. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
	align-self: flex-end;
	flex: 0 0 auto;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
	padding-top: 0;
	/* Das Schließzeichen steht 44 px hoch über der Liste. Ohne Ausgleich
	   säße die Mitte der Liste um diesen Betrag zu tief. */
	padding-bottom: 44px;
}

/* Das Zeichen der Schule als Krone über der Liste. Es liegt als
   Theme-Datei bei (siehe shantam_logo_ersatz in functions.php); CSS kann
   nicht in die Einstellungen sehen, deshalb steht hier die Datei. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	margin-bottom: clamp(1.75rem, 6vh, 2.75rem);
	background: url("assets/bilder/logo.webp") center / contain no-repeat;
}

/* Die Liste selbst: mittig, mit ruhigem Zeilenabstand. Der Abstand aus dem
   Blockmarkup (2,25 rem) ist für die waagerechte Leiste gedacht; senkrecht
   untereinander wirkt er zerrissen. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container {
	align-items: center;
	text-align: center;
	gap: clamp(1.1rem, 3.2vh, 1.75rem);
	width: 100%;

	/* WordPress lässt die Liste den ganzen freien Raum ausfüllen (flex: 1)
	   und setzt die Einträge an deren oberen Rand. Die Liste sah dadurch
	   trotz mittiger Ausrichtung nach oben gerutscht aus. Sie soll nur so
	   hoch sein wie ihre fünf Zeilen — mittig gestellt wird sie eine Ebene
	   darüber, zusammen mit dem Zeichen. */
	flex: 0 1 auto;
}

/* Die Einträge im aufgeklappten Menü bekommen beim Berühren dieselbe warme
   Antwort wie in der Leiste. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--terrakotta);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--sand);
	border: 1px solid var(--wp--preset--color--creme);
	border-radius: 3px;
	box-shadow: 0 8px 24px -12px rgba(59, 51, 44, 0.28);
	padding-block: 0.4rem;
}

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

/* --- Bildformen ----------------------------------------------------------
   Rechtecke stehen; Yoga fließt. Die Bilder bekommen deshalb eine Form statt
   eines Rahmens. Zwei Formen, mehr nicht — sonst wird aus Fluss Unruhe.

   Bogen  — aufrechte Bilder: oben eine weite Kuppel, unten fast gerade.
            Die Kuppel ist elliptisch (halbe Breite gegen ein Drittel der
            Höhe), damit sie trägt und den Kopf im Bild nicht anschneidet.
   Weich  — breite Bilder und Flächen: eine großzügig gerundete Kante, die
            mit der Fensterbreite mitwächst.

   Beides ist reine Form, kein Beschnitt: die Bilddaten bleiben unberührt,
   und ohne CSS steht wieder ein sauberes Rechteck da. */
:root {
	--shantam-kante: 4px;
	--shantam-weich: clamp(1.25rem, 3vw, 2.25rem);

	/* DAS HAUSMASS FÜR BILDER — beides gilt für jedes Bild im Seiteninhalt.
	   Vorher stand jedes Bild anders da: gemessen bei 1440 px waren es
	   1152 px auf Yogakurse, Yoga Spektrum und Yin Yoga, aber 672 px auf
	   Weitere Angebote und Persönliches, und die Höhen reichten von 294 bis
	   768 px. Fünf Bilder, fünf Formate — ohne Grund, den jemand sehen kann.

	   52rem statt 60rem (0.19.2): 60rem ergaben 960 px neben einer Textspalte
	   von 672 px — das Bild stand 1,43-mal so breit wie der Text, den es
	   begleitet, und der Blick sprang bei jedem Bild auf und wieder zu. Bei
	   52rem sind es 832 px gegen 672, also das 1,24-fache: erkennbar breiter,
	   als Absicht lesbar, kein Sprung. Nebengewinn bei den kleinen Dateien —
	   yoga-hund (640 px lange Kante) wird 1,3-fach hochgerechnet statt
	   1,5-fach.

	   3:2 STATT 2:1 — und das ist die wichtigere Änderung. 2:1 war für diese
	   Aufnahmen zu flach; beanstandet am 30.07.2026 als „zu krass
	   panoramamäßig". Die Rechnung dahinter, aus den Dateien gelesen:

	     spiegelung     1600 × 1066   3:2    bei 3:2 KEIN Beschnitt
	     zuhause-ueben  1200 × 800    3:2    bei 3:2 KEIN Beschnitt
	     klangschale    1200 × 798    3:2    bei 3:2 KEIN Beschnitt
	     indien          800 × 600    4:3    bei 3:2 elf Prozent Höhe weg
	     yoga-hund       640 × 480    4:3    bei 3:2 elf Prozent Höhe weg

	   Bei 2:1 verlor eine 3:2-Vorlage ein Viertel ihrer Höhe und eine
	   4:3-Vorlage ein Drittel. Bei 3:2 zeigen drei der fünf Aufnahmen die
	   ganze Fläche, und bei den beiden übrigen ist der Schnitt so klein, dass
	   kein Bildmittelpunkt mehr darüber entscheidet, ob ein Kopf im Bild ist.

	   DAS IST AUCH DIE ANTWORT FÜR DANIELES EIGENE BILDER: Kameras und
	   Telefone liefern 3:2 oder 4:3. Was sie hochlädt, steht damit ganz oder
	   nahezu ganz im Bild — bei 2:1 wäre von jedem ihrer Fotos ein Drittel
	   abgeschnitten worden, ohne dass sie den Grund sehen könnte. */
	--shantam-bildbreite: 52rem;
	--shantam-bildmass: 3 / 2;
}

.ist-bogen img,
.is-style-shantam-bogen img {
	border-radius:
		50% 50% var(--shantam-kante) var(--shantam-kante) /
		32% 32% var(--shantam-kante) var(--shantam-kante);
}

/* Die feine goldene Kontur um das Porträt.
   Im Bild selbst sind goldene Stellen — die Messingdrücker der Tür —, und die
   Bogenform endet sonst als weiche Kante ohne Abschluss. Ein Haar in Safran
   schließt sie ab, ohne einen Rahmen daraus zu machen. Safran ist im
   Gestaltungssystem der sparsame Akzent; genau dafür ist er da.

   box-shadow statt border: der Schatten folgt der elliptischen Kuppel exakt
   und kostet keinen einzigen Pixel Layout — ein Rahmen würde das Bild um
   2 px verschieben und die Kuppel abflachen. */
.ist-bogen img,
.is-style-shantam-bogen img {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--safran) 72%, transparent);
}

.ist-weich img,
.ist-weich video,
.wp-block-cover.ist-weich,
.is-style-shantam-weich img {
	border-radius: var(--shantam-weich);
}

/* --- Ausschnitt: die Form fuer Danieles eigene Aufnahmen ------------------
   Sie soll auf jeder Seite selbst ein Bild einsetzen koennen. Ihre Fotos sind
   Schnappschuesse; ueber die volle Flaeche zeigt so eine Aufnahme jeden
   Mangel, als ruhiger Ausschnitt in fester Proportion wirkt dieselbe Datei
   wie ein Detail aus etwas Groesserem.

   SEIT 0.18.0 IST DER AUSSCHNITT NICHT MEHR EINE FORM UNTER DREIEN, SONDERN
   DER GRUNDZUSTAND JEDES BILDES IM SEITENINHALT. Wer im Editor nichts
   auswaehlt, bekommt ihn — und damit auf jeder Seite dieselbe Breite und
   dieselbe Proportion. Nur wer ausdruecklich „Weich gerundet" waehlt, sieht
   das ganze Bild; das ist die einzige Ausnahme und muss gewollt sein.

   Angemeldet sind die Formen zusaetzlich als Block-Stile (siehe
   functions.php), damit sie im Editor unter „Stile" sichtbar sind und
   niemand Klassennamen kennen muss.

   `max-height` ist am 29.07.2026 ersatzlos entfallen. Es war als Deckel
   gedacht, hat aber in Wahrheit die Proportion umgeschrieben: bei einem
   Fenster von 900 px kappte `46vh` die 16:7-Hoehe von 504 auf 414 px, und
   aus dem angekuendigten 16:7 wurde ein gemessenes 2,78:1. Genau daran
   verlor klangschale.webp die untere Schale. Gedeckelt wird jetzt ueber die
   Breite (--shantam-bildbreite), und die Proportion stimmt dann immer.

   Seit 0.19.2 gilt 3:2 auf JEDER Breite. Die Sonderregel fuer schmale
   Geraete ist entfallen: sie stellte dort ohnehin 3:2 ein, weil 2:1 auf
   375 px ein Schlitz von 187 px Hoehe war. Wo Desktop und Handy dasselbe
   Mass brauchen, ist eine Sonderregel nur eine zweite Stelle, an der
   jemand vergisst, sie mitzuaendern. */
.wp-block-post-content .wp-block-image,
.wp-block-image.is-style-shantam-ausschnitt,
.wp-block-image.is-style-shantam-weich {
	width: 100%;
	max-width: var(--shantam-bildbreite);
	margin-inline: auto;
}

.wp-block-post-content .wp-block-image:not(.is-style-shantam-weich) img,
.wp-block-image.is-style-shantam-ausschnitt img {
	display: block;
	width: 100%;
	aspect-ratio: var(--shantam-bildmass);
	object-fit: cover;
	border-radius: var(--shantam-weich);
}

/* --- Das Beitragsbild folgt demselben Hausmaß --------------------------
   Es steht AUSSERHALB von `.wp-block-post-content` — die Regel darüber
   erfasst es nicht. Ohne eigene Regel lief das Beitragsbild in voller
   Wide-Breite (72rem) und in seiner eigenen Proportion, während jedes Bild
   IM Text 52rem und 3:2 hat: auf ein und derselben Seite zwei Maße, und das
   größere trüge ausgerechnet das Bild, das Daniele beim Schreiben am
   schnellsten hochlädt.

   Dieselben zwei Tokens wie oben, damit eine Änderung am Hausmaß auch hier
   ankommt. Wer das Beitragsbild je ausnehmen will, nimmt es hier heraus und
   nicht über eine dritte Variable. */
.wp-block-post-featured-image {
	width: 100%;
	max-width: var(--shantam-bildbreite);
	margin-inline: auto;
}

.wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: var(--shantam-bildmass);
	object-fit: cover;
	border-radius: var(--shantam-weich);
}

/* --- Der Bildmittelpunkt, je Aufnahme -----------------------------------
   Ein Ausschnitt in fester Proportion muss wissen, worauf er sich einmitten
   soll. `center` ist dafuer nur bei zwei der fuenf Aufnahmen richtig; bei den
   uebrigen liegt das Entscheidende nicht in der Bildmitte, und die Mitte
   schnitt es weg. Gemessen bei 1440 px, vorher:

     yoga-hund     Quellausschnitt y 100–380 von 480 — Vorderpfoten am Rand
     klangschale   Quellausschnitt y 183–615 von 798 — untere Schale ab

   Die Regel haengt am Dateinamen, weil der Bild-Block — anders als der
   Cover-Block — keinen Bildmittelpunkt kennt. Das ist Absicht und faellt
   sauber zurueck: tauscht Daniele eine Aufnahme aus, heisst die neue Datei
   anders, die Regel greift nicht mehr und es gilt wieder die Mitte.

   DIESE REGELN SIND SCHWAECHER ALS DIE HAUSMASS-REGEL DARUEBER: zwei Klassen
   gegen drei. Deshalb darf dort kein `object-position` stehen — es hat die
   Mittelpunkte hier still ueberschrieben (gemessen 29.07.2026: indien stand
   auf 50 % statt 60 %). Die Zeile war ohnehin ueberfluessig, `50% 50%` ist
   die Vorgabe des Browsers. Wer sie wieder eintraegt, muss die Mittelpunkte
   hier ebenso stark schreiben. */
.wp-block-image img[src*="yoga-hund"] {
	object-position: center 45%;
}

/* Fünf Stufen nebeneinander angesehen: bei 45 % lag die Kante der Decke auf
   der unteren Bildkante, ab 65 % schnitt die orangefarbene Fahne oben ab.
   Bei 60 % steht beides frei, und der Schrein liegt in der Bildmitte. */
.wp-block-image img[src*="indien"] {
	object-position: center 60%;
}

/* Aufsicht: die Haende oben, der Kopf unten. Die Mitte haette den Kopf
   angeschnitten, deshalb sitzt der Ausschnitt tief. */
.wp-block-image img[src*="zuhause-ueben"] {
	object-position: center 85%;
}

/* --- Die Bühne: der Auftakt der Startseite -------------------------------
   BIS 0.19.1 FÜLLTE SIE DAS FENSTER, und daran ist sie gescheitert. Die
   Höhe kam aus `calc(100svh - Kopfhöhe)`, das Bild lag absolut in seiner
   Figur und nahm den Rest. Gemessen bei 1440 × 900:

     Textspalte   672 px breit
     Bild        1328 px breit, 425 px hoch  →  3,12 : 1

   Drei Dinge waren damit falsch auf einmal. Das Bild stand doppelt so breit
   wie der Text, den es begleitet — der Blick sprang von schmal auf randlos
   und wieder auf schmal. Es war die einzige Stelle der Website mit einer
   anderen Bildbreite als alle übrigen (dort 960 px), also genau die
   Uneinheitlichkeit, die das Hausmaß beseitigen sollte. Und aus einer
   Vorlage im Verhältnis 3:2 schnitt ein 3,12:1-Ausschnitt die Hälfte der
   Höhe heraus: der Frau im Baum fehlten die Hände.

   Kein Bildmittelpunkt hätte das geheilt. Bei 3,12:1 aus 3:2 bleiben 48 %
   der Quellhöhe übrig; wo man den Ausschnitt auch hinschiebt, es fehlt
   immer die Hälfte. Die Proportion war der Fehler, nicht die Lage.

   JETZT GILT AUCH HIER DAS HAUSMASS. Die Bühne ist ein gewöhnlicher
   Abschnitt, ihr Bild ist so breit und so hoch wie jedes andere Bild der
   Website. Die Ausnahme ist ersatzlos entfallen — mit ihr die Variable
   `--shantam-kopf`, die nur sie brauchte und die nach jedem Umbau des
   Kopfbereichs neu zu messen war. */
.ist-buehne {
	display: block;
	box-sizing: border-box;
}

/* --- Die Schwelle: so öffnet jede Unterseite -----------------------------
   Jeder Bereich der Seite ist ein Raum, den man betritt. Vorher stand der
   Seitentitel in einem unbestimmten Sandfeld — viel Fläche, die nach
   Versehen aussah, und darunter ein Bild, das die Fensterkante zufällig
   anschnitt.

   Die Schwelle war bis 0.19.1 ein eigenes Band in CREME, 305 px hoch bei
   einem Fenster von 900 px. Zusammen mit dem Kopfbereich und dem
   Sandstreifen standen damit 445 px — die Hälfte des ersten Bildschirms —
   bevor ein Inhalt begann, und die Farbkante war die dritte waagerechte
   Trennung auf kurzer Strecke. Beanstandet am 30.07.2026, nachgemessen,
   geändert:

     - KEINE Farbe mehr. Die Schwelle ist Raum, nicht Fläche. Kopfbereich
       und Auftakt liegen jetzt in einem durchgehenden Sandfeld, und die
       Seite beginnt ohne Kante. Die Farbe steht als `backgroundColor` im
       Blockmarkup von zwanzig Patterns; sie hier zu überschreiben ist der
       einzige Weg, der auch die eingeflachten Seiten der Vorschau
       erreicht, ohne zwanzig Dateien anzufassen.
     - Die Mindesthöhe ist von clamp(14rem, 34vh, 19rem) auf
       clamp(8rem, 17vh, 11rem) zurückgenommen. Der Auftakt braucht Luft,
       aber kein Drittel des Fensters: gemessen trug die alte Schwelle
       169 px Inhalt in 305 px Band.

   Damit entfällt auch die alte Regel „auf eine Schwelle in Creme folgt nie
   ein zweites Creme-Band" — die Schwelle trägt keine Farbe mehr, jede
   Bandfolge ist wieder frei.

   Grid statt Flex, weil die Abstandsregeln der Blocklayouts (blockGap als
   margin-block-start) darin unverändert greifen und `align-content` die
   Zeilen als Ganzes mittig setzt. */
.ist-schwelle {
	display: grid;
	align-content: center;
	box-sizing: border-box;
	min-height: clamp(8rem, 17vh, 11rem);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: 0;
}

/* ZWEITE UND LETZTE STELLE MIT `!important` IM GANZEN THEME — und wie bei der
   ersten ist der Grund gemessen, nicht bequem. Zwei Klassen gegen eine hätten
   genügen müssen; sie genügen nicht, weil WordPress seine Preset-Klassen
   selbst mit `!important` ausliefert:

     .has-creme-background-color { background-color: … !important }   (inline im <head>)
     .ist-schwelle.has-background { background-color: transparent }   (hier)

   Ohne dasselbe Gewicht bleibt das Band stehen — nachgemessen am 30.07.2026,
   die Regel stand da und wirkte nicht. Wer hier aufräumen will, nimmt
   `backgroundColor` aus dem Blockmarkup der zwanzig Patterns; dann kann diese
   Regel weg. Solange die Seiten der Vorschau eingeflacht sind, erreicht das
   aber nur ein erneuter Abgleich, und diese Regel wirkt sofort und überall. */
.ist-schwelle.has-background {
	background-color: transparent !important;
}

/* --- DER EINE ÖFFNUNGSABSTAND ------------------------------------------
   Was direkt auf die Schwelle folgt, braucht Luft — aber nur, wenn es kein
   eigenes Band ist. Ein Band bringt seine Polsterung selbst mit; ein Abstand
   davor risse einen Sandstreifen zwischen zwei Farbflächen.

   Dieser Wert (88 px) ist seit 0.19.2 der EINZIGE Abstand zwischen dem
   Auftakt einer Seite und ihrem ersten Inhalt. Vorher addierte sich die
   untere Polsterung der Schwelle (52 px) dazu, und gemessen standen 140 px
   leere Fläche zwischen dem letzten Satz des Auftakts und dem ersten Bild.
   Solange die Schwelle ein Creme-Band war, las man die 52 px als Rand der
   Farbfläche; ohne Farbe sind sie nur noch Luft. Deshalb polstert die
   Schwelle jetzt oben und nicht unten.

   WER HIER EINEN WERT ÄNDERT, MISST DIE FOLGE AN DREI SEITEN NACH: eine mit
   Bild als erstem Inhalt (Yoga Spektrum), eine mit Text (Persönliches), eine
   mit Band (Kursinhalte). */
.ist-schwelle + *:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--60);
}

/* Der eine Fall, in dem die Schwelle doch unten polstert: folgt ein BAND, so
   liegt zwischen beiden kein Abstand (Regel weiter unten), und die Schwelle
   polstert seit 0.19.2 nicht — gemessen am 30.07.2026 standen damit 0 px
   zwischen der Textbox des letzten Auftaktsatzes und dem Farbwechsel. Der Satz
   klebte an der Kante. 32 px sind der kleinste Wert, der ihn ablöst, ohne
   wieder Fläche zu verschenken.

   Nicht zurückgeben darf man die Polsterung im ALLGEMEINEN: bei
   nicht-farbigem Inhalt addierte sie sich zum Öffnungsabstand von 88 px, und
   genau diese Addition (140 px) war der Grund, sie in 0.19.2 zu entfernen.
   Deshalb steht `.has-background` im Selektor und nicht nur `.alignfull`:
   vier Seiten öffnen mit einem Band, aber nur EINE mit einem farbigen
   (Kontakt). Auf den drei anderen — Kurse und Termine, Kursinhalte,
   Therapeutischer Yoga — ist das erste Band sandfarben, es gibt also keine
   Kante, und 32 px wären dort nur Luft zu den 128 px Polsterung des
   Bandes. Gemessen am 30.07.2026. */
.ist-schwelle:has(+ .alignfull.has-background) {
	padding-bottom: var(--wp--preset--spacing--40);
}

/* STOLPERSTEIN, teuer gefunden: In einem Grid- oder Flex-Container hebt
   `margin-inline: auto` — das die Blocklayouts jedem Kind mitgeben, um die
   Textspalte zu zentrieren — das Strecken auf. Jedes Kind schrumpft dann
   auf seine eigene Textbreite und steht mittig, obwohl es linksbündig
   gesetzt ist: auf Persönliches stand die Überschrift links und der Satz
   darunter in der Mitte. `width: 100%` stellt die gewohnte Breite wieder
   her, die `max-width` aus dem Blocklayout begrenzt sie weiterhin.
   Gilt für beide Container dieser Art — Bühne und Schwelle. */
.ist-buehne > *,
.ist-schwelle > * {
	width: 100%;
}

/* Telefon und Mail sind auf dem Handy die wahrscheinlichste Berührung der
   ganzen Seite. Die Zeilenhöhe allein ergab 28 px; mit etwas Polsterung wird
   daraus eine Trefferfläche von 44 px, ohne dass sich am Satzbild etwas
   ändert.

   Seit 0.19.3 gilt die Regel auch im VERZEICHNIS, nicht mehr nur in der
   Schwelle: der Umbau der Kontaktseite hat Nummer und Adresse aus der
   Schwelle in ein Verzeichnis neben dem Formular verschoben, und damit fiel
   die Trefferfläche still auf 28 px zurück (gemessen bei 375 px). Wer solche
   Angaben verschiebt, misst sie danach nach.

   Der Fußbereich steht mit in der Regel, weil er auf JEDER Seite die letzte
   Gelegenheit ist, anzurufen — dort waren es 25 px. */
.ist-schwelle a[href^="tel:"],
.ist-schwelle a[href^="mailto:"],
.ist-verzeichnis a[href^="tel:"],
.ist-verzeichnis a[href^="mailto:"],
footer a[href^="tel:"],
footer a[href^="mailto:"] {
	display: inline-block;
	padding-block: 0.5rem;
}

/* Zwei Bänder stoßen ohne Zwischenraum aneinander. Der Standardabstand der
   Blocklayouts (blockGap, gemessen 24 px) lag sonst als Sandstreifen zwischen
   zwei Farbflächen — zwischen Sand und Creme kaum zu sehen, zwischen Creme
   und Salbei tief sehr wohl. Ein Band bringt seine Polsterung selbst mit.
   Nur der obere Abstand fällt weg: ein ausdrücklich gesetzter Abstand nach
   unten (etwa unter der Bühne) bleibt erhalten. */
.wp-block-group.alignfull + .wp-block-group.alignfull {
	margin-top: 0;
}

/* --- Und dasselbe für alles, was VOR einem Band steht --------------------
   Derselbe Fehler eine Ebene weiter, und er war auf fast jeder Seite zu
   sehen. Ein Band bringt seine Polsterung selbst mit — bis zu 8rem oben. Trug
   der Block davor zusätzlich einen eigenen Abstand nach unten (spacing 60
   oder 70), addierten sich beide. Gemessen bei 1440 px:

     Weitere Angebote   88 px unter dem Bild + 128 px Bandpolster = 216 px
     Persönliches      128 px unter dem Text + 128 px Bandpolster = 256 px

   Ein Viertel Fensterhöhe, in der nichts steht. Es sah nicht ruhig aus,
   sondern wie ein Fehler im Aufbau — und es stand so auf sechzehn von
   einundzwanzig Seiten.

   Jetzt gibt der Vorgänger seinen unteren Abstand ab und behält nur so viel,
   dass der letzte Satz nicht an der Farbkante klebt (spacing 50, 52 px). Ein
   Bild gibt ihn ganz ab: es soll die Kante des Bandes berühren, wie die
   Schwelle das nächste Band berührt.

   :has() ist die einzige Möglichkeit, das im Stylesheet zu lösen — und die
   einzige, die auch die eingeflachten Seiten der Vorschau erreicht, wo die
   Patterns nicht mehr ankommen. Wo :has() fehlt, bleibt es beim alten
   Verhalten; kaputt geht dabei nichts.

   ZUM `!important`, das hier sonst nirgends im Theme steht: der Abstand, der
   korrigiert wird, ist ein INLINE-Stil aus dem Blockmarkup
   (`style="margin-bottom:var(--wp--preset--spacing--70)"`). Ein Inline-Stil
   schlägt jeden Selektor; ohne `!important` bliebe die Regel wirkungslos. In
   den Patterns sind diese Abstände zusätzlich entfernt — die Regel ist das
   Sicherheitsnetz für die Seiten, die schon in der Datenbank stehen. */
.wp-block-post-content > :not(.alignfull):has(+ .wp-block-group.alignfull) {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

.wp-block-post-content > .wp-block-image:has(+ .wp-block-group.alignfull) {
	margin-bottom: 0 !important;
}

/* Dieselbe Rechnung für die Bühne, und sie fiel erst auf, als die Bühne das
   Fenster nicht mehr füllte: sie trägt im Blockmarkup einen Abstand nach
   unten (spacing 70 = 128 px), und das folgende Creme-Band bringt 128 px
   Polsterung mit. Gemessen 256 px leere Fläche zwischen dem Bild der
   Startseite und dem Spruch darunter. Solange die Bühne bis an die
   Fensterkante reichte, war der Abstand die Einladung zum Weiterscrollen;
   jetzt ist er ein Loch. Die Bühne ist `alignfull`, deshalb greift die Regel
   für Nicht-Bänder darüber nicht. */
.wp-block-post-content > .ist-buehne:has(+ .wp-block-group.alignfull) {
	margin-bottom: 0 !important;
}

.wp-block-post-content > :not(.alignfull) + .wp-block-group.alignfull {
	margin-top: 0;
}

/* DIESELBE RECHNUNG FÜR DIE BLOG-VORLAGEN (0.21.0). Dort stehen die Blöcke
   direkt in `main` und NICHT in `.wp-block-post-content` — eine Seite kommt
   aus dem Inhaltsfeld, eine Beitragsliste aus der Vorlage. Die Regeln oben
   greifen deshalb auf `/aktuelles/` und auf jedem Beitrag von sich aus
   nicht, und das war zu sehen: gemessen standen 56 px leere Sandfläche
   zwischen der letzten Meldung und dem Schlussband, wo auf jeder anderen
   Seite 52 px stehen und das Band unmittelbar folgt.

   Kein `!important` nötig: in diesen Vorlagen steht der Abstand nicht als
   Inline-Stil im Markup — er ist dort ersatzlos entfallen. */
main > :not(.alignfull):has(+ .wp-block-group.alignfull) {
	margin-bottom: var(--wp--preset--spacing--50);
}

main > :not(.alignfull) + .wp-block-group.alignfull {
	margin-top: 0;
}

/* Dieselbe Rechnung nach unten: was auf ein Band folgt, steht schon hinter
   dessen unterer Polsterung. Auf Persönliches waren es 128 px Bandpolster
   plus 128 px eigener Abstand über „Eines meiner Herzensprojekte".
   Die Schwelle ist ausgenommen: sie polstert knapper (spacing 50) und
   bringt ihren Nachfolgerabstand selbst mit, weiter oben in dieser Datei. */
.wp-block-post-content > .wp-block-group.alignfull:not(.ist-schwelle) + :not(.alignfull) {
	margin-top: var(--wp--preset--spacing--50) !important;
}

/* Und dieselbe Ordnung um ein BILD herum. Vor einem Band gibt es seinen
   Abstand ganz ab (Regel oben), es berührt die Kante. Folgt aber freier
   Inhalt, galt bisher der Standardabstand der Blocklayouts: gemessen 24 px
   auf /yinyoga/ zwischen dem Bild und dem Absatz darunter — das Bild klebte
   am Text, während dasselbe Bild auf jeder anderen Seite 88 px Luft hatte.
   88 px ist derselbe Wert, den die Schwelle zum ersten Inhalt hält.

   Ohne `!important`: ein ausdrücklicher Abstand im Blockmarkup soll weiter
   gelten. Die Regel füllt nur, wo nichts steht — auch für jedes Bild, das
   Daniele künftig einsetzt. */
.wp-block-post-content > .wp-block-image + :not(.alignfull) {
	margin-top: var(--wp--preset--spacing--60);
}

/* Hier stand von 0.19.4 bis 0.19.6 eine Übergangsregel für die alte Klasse
   `has-salbei-tief-background-color`. Der Abgleich vom 30.07.2026 hat sie aus
   allen Vorschauseiten entfernt (nachgeprüft: 0 Treffer auf allen sieben
   betroffenen Adressen), deshalb ist sie fort. Wer die Vorschau aus einem
   alten Stand wiederherstellt, braucht sie wieder — sie steht in der
   Git-Historie. */

/* --- Abschnitte in Farbe -------------------------------------------------
   Die Seite atmet in Baendern: Sand, Creme, Petrol, Terrakotta. Die
   Farbe und die Polsterung stehen im Blockmarkup (backgroundColor + alignfull),
   nicht hier. Hier steht nur, was ein Block nicht selbst kann.

   Haarlinien werden nicht mehr in Creme gesetzt, sondern aus der Textfarbe
   gemischt — sonst verschwinden sie auf dem Creme-Band. */
:root {
	--shantam-linie: color-mix(in srgb, var(--wp--preset--color--tinte) 14%, transparent);

	/* Ein doppelter Schwung: eine kalligrafische Linie, die an beiden Enden
	   ausläuft und in der Mitte am breitesten ist. Kein Icon aus einer
	   Bibliothek, eine einzelne selbst gezeichnete Form. Als Maske, damit sie
	   die Farbe der Umgebung annimmt.

	   Sie hat den vorherigen Zweig mit zwei Blättern abgelöst: der stand als
	   kleiner Fleck über der Überschrift und nahm für seine Wirkung zu viel
	   Raum ein. Eine liegende Linie trennt, ohne sich vorzudrängen. */
	--shantam-schwung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath d='M2 11.4c14-6.4 30-8.2 45-4.6 11 2.6 20 6 33 6s22-3.4 33-6c15-3.6 31-1.8 45 4.6-14-4.6-29-5.6-43-2.4-11.4 2.6-21.6 6.2-35 6.2s-23.6-3.6-35-6.2C30.8 5.8 16 6.8 2 11.4z'/%3E%3C/svg%3E");
}

/* --- Abschnittsauftakt: mittig, mit dem Schwung darueber ---
   Eine Ueberschrift in der Mitte braucht ein Zeichen ueber sich, sonst steht
   sie im Nichts. Der Schwung ersetzt keine Dachzeile — er kommt zu ihr dazu
   oder steht allein, wo eine Dachzeile nur den Auftakt wiederholen wuerde.

   Safran ist im Gestaltungssystem der sparsame Akzent und nie fuer Text
   erlaubt. Eine Zierlinie ist genau der Ort, an den er gehoert. */
.ist-mitte,
.ist-auftakt {
	text-align: center;
}

.ist-auftakt::before {
	content: "";
	display: block;
	width: clamp(110px, 22vw, 150px);
	aspect-ratio: 160 / 16;
	margin: 0 auto 1.75rem;
	background-color: var(--wp--preset--color--safran);
	-webkit-mask: var(--shantam-schwung) center / contain no-repeat;
	mask: var(--shantam-schwung) center / contain no-repeat;
}

/* --- Haarlinien ---
   Statt an jeder Zeile dieselben sechs Rahmen-Angaben zu wiederholen, traegt
   die Liste die Regel einmal (.ist-verzeichnis); .ist-linie zieht eine
   einzelne Linie ueber einen Block. Unter der letzten Zeile eines
   Verzeichnisses steht eine Schlusslinie. */
.ist-linie,
.ist-verzeichnis > * {
	border-top: 1px solid var(--shantam-linie);
	padding-top: var(--wp--preset--spacing--30);
}

.ist-verzeichnis > :last-child {
	border-bottom: 1px solid var(--shantam-linie);
	padding-bottom: var(--wp--preset--spacing--30);
}

/* --- Dunkle Baender: Salbei tief und Terrakotta ---
   Auf farbigem Grund kehrt sich alles um. Sand traegt den Text in voller
   Deckung (6,7:1 auf Salbei tief, 5,4:1 auf Terrakotta) — abgeschwaecht faellt
   er unter 4,5:1, deshalb bleibt auch die Dachzeile voll deckend und
   unterscheidet sich nur durch Groesse und Sperrung. */
.ist-dunkel {
	--shantam-linie: color-mix(in srgb, var(--wp--preset--color--sand) 30%, transparent);
}

.ist-dunkel,
.ist-dunkel :where(h1, h2, h3, h4, h5, h6, p, li, cite, figcaption) {
	color: var(--wp--preset--color--sand);
}

/* Auf farbigem Grund traegt der Schwung Sand statt Safran: Safran auf
   Terrakotta sind zwei warme Mitteltoene, die Linie verschwaende darin. */
.ist-dunkel .ist-auftakt::before {
	background-color: var(--wp--preset--color--sand);
	opacity: 0.75;
}

.ist-dunkel a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--sand);
}

.ist-dunkel a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	color: var(--wp--preset--color--creme);
}

/* Der Knopf dreht sich mit: heller Grund, dunkle Schrift. */
.ist-dunkel .wp-block-button__link {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--tinte);
}

.ist-dunkel .wp-block-button__link:hover,
.ist-dunkel .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--tinte);
}

.ist-dunkel :where(a, button, input, textarea, select, summary):focus-visible {
	outline-color: var(--wp--preset--color--sand);
}

/* --- Wege: ein Verzeichnis, das weiterführt ------------------------------
   Diese Verzeichnisse sind keine Aufzählung, sondern die Navigation
   innerhalb eines Bereichs — jede Zeile führt auf eine eigene Seite. Vorher
   standen sie in `.ist-ruhig`, also in Tinte, damit nicht fünf terrakotta
   Überschriften als rote Leiter untereinanderstehen. Das war so ruhig, dass
   niemand mehr sah, dass es überhaupt Verweise sind: die Seite las sich als
   Textblock.

   Jetzt trägt jeder Name ein Winkelzeichen in Terrakotta, und die ganze
   Zeile antwortet auf den Zeiger — der Name wird terrakotta, der Winkel
   rückt vor. Die Farbe steckt damit im Zeichen und in der Bewegung statt in
   fünf roten Überschriften.

   Der Winkel ist aus zwei Rahmenkanten gedreht, keine Schriftzeichen und
   keine Bibliothek: ein Pfeil aus der Schrift (→) fehlt manchen Schnitten,
   und der Browser mischte dann wortlos eine Ersatzschrift dazu. */
/* Seit 0.18.0 ist jede Zeile zusätzlich eine FLÄCHE. Vorher trennten sie nur
   Haarlinien; das war ruhig, sah aber wie Fließtext mit Strichen aus, und die
   Zeilen waren als Ziele nicht zu erkennen — man musste sie mit dem Zeiger
   suchen. Jetzt liegt jede Zeile auf einer sehr hellen Wäsche aus Creme
   (55 % auf Sandgrund, ein Unterschied von wenigen Prozent Helligkeit) mit
   weich gerundeter Kante. Das genügt, damit die Zeile als eigenes Feld
   gelesen wird — eine gepflegte Tabelle, kein Knopfraster. Beim Zeigen wird
   die Wäsche voll deckend, dazu rückt der Winkel vor.

   Die Haarlinien von .ist-verzeichnis werden dabei zurückgenommen: Linie UND
   Fläche zusammen wären zwei Begründungen für dieselbe Trennung. Deshalb
   steht hier .ist-verzeichnis.ist-wege — dieselbe Zeile muss beides gewinnen,
   und die höhere Spezifität sagt das ausdrücklich. */
.ist-wege {
	display: grid;
	gap: 6px;

	/* Wie weit die Fläche seitlich über den Text hinausgeht. Der Wert steht
	   hier als Knopf, weil er auf dem Handy kleiner sein muss: der Seitenrand
	   der Seite ist dort genau 1,25rem breit, ein gleich breiter Überstand
	   liefe also bis an die Glaskante. */
	--shantam-wege-luft: var(--wp--preset--spacing--30);
}

/* Polsterung nach innen, derselbe Betrag als negativer Rand nach außen: der
   Text steht dadurch auf genau derselben Linie wie vorher, nur die Fläche
   greift darüber hinaus. Der negative Rand sitzt am Rasterfeld — deshalb
   funktioniert es unverändert, ob das Verzeichnis in einem Fluss- oder in
   einem eingeschränkten Container steht.

   Ohne diesen Kniff wurde die Textspalte um die Polsterung schmaler, und der
   Satz „Sanft und gleichzeitig intensiv …“ auf Yoga Spektrum brach in eine
   zweite Zeile — eine Zeile höher als die vier anderen, und die gepflegte
   Tabelle war wieder dahin. Gemessen: 762 px Spaltenbreite ohne Polsterung,
   734 px mit. Der Satz braucht 745. */
.ist-wege > *,
.ist-verzeichnis.ist-wege > *,
.ist-verzeichnis.ist-wege > :last-child {
	border: 0;
	padding: var(--wp--preset--spacing--30) var(--shantam-wege-luft);
	margin-inline: calc(-1 * var(--shantam-wege-luft));
	border-radius: 10px;
	background-color: color-mix(in srgb, var(--wp--preset--color--creme) 55%, transparent);
	transition: background-color 180ms ease;
}

@media (max-width: 599px) {
	.ist-wege {
		--shantam-wege-luft: 0.75rem;
	}
}

.ist-wege > *:hover,
.ist-wege > *:focus-within {
	background-color: var(--wp--preset--color--creme);
}

/* Auf farbigem Grund kehrt sich auch die Wäsche um: Sand, sehr schwach. */
.ist-dunkel .ist-wege > * {
	background-color: color-mix(in srgb, var(--wp--preset--color--sand) 10%, transparent);
}

.ist-dunkel .ist-wege > *:hover,
.ist-dunkel .ist-wege > *:focus-within {
	background-color: color-mix(in srgb, var(--wp--preset--color--sand) 18%, transparent);
}

/* Seit 0.21.0 gilt dieselbe Farblogik für die Beitragstitel auf „Aktuelles".
   Dort steht genau dieselbe Lage: eine Liste, in der JEDE Zeile auf eine
   eigene Seite führt. Ohne diese Regeln standen die zehn Meldungstitel in
   Terrakotta untereinander — die rote Leiter, die oben beschrieben ist, nur
   zehnmal statt fünfmal.

   Der Beitragstitel-Block trägt `.wp-block-post-title` und NICHT
   `.wp-block-heading`; die Regeln darüber greifen deshalb von sich aus
   nicht. Er wird hier aufgenommen, statt die Regeln ein zweites Mal zu
   schreiben — der Winkel ist an EINER Stelle definiert. */
.ist-wege .wp-block-heading a:where(:not(.wp-element-button)),
.ist-verzeichnis .wp-block-post-title a {
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}

.ist-wege .wp-block-heading a::after,
.ist-verzeichnis .wp-block-post-title a::after {
	content: "";
	display: inline-block;
	width: 0.36em;
	height: 0.36em;
	margin-left: 0.6em;
	vertical-align: 0.1em;
	border-right: 2px solid var(--wp--preset--color--terrakotta);
	border-bottom: 2px solid var(--wp--preset--color--terrakotta);
	transform: rotate(-45deg);
	transition: transform 180ms ease;
}

.ist-wege .wp-block-columns:hover .wp-block-heading a,
.ist-wege .wp-block-heading a:hover,
.ist-wege .wp-block-heading a:focus-visible,
.ist-verzeichnis > li:hover .wp-block-post-title a,
.ist-verzeichnis .wp-block-post-title a:hover,
.ist-verzeichnis .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--terrakotta);
}

/* Zuerst drehen, dann verschieben: die Reihenfolge steht von rechts nach
   links: so rückt der Winkel auf dem Bildschirm nach rechts und nicht
   schräg weg. */
.ist-wege .wp-block-columns:hover .wp-block-heading a::after,
.ist-wege .wp-block-heading a:hover::after,
.ist-verzeichnis > li:hover .wp-block-post-title a::after,
.ist-verzeichnis .wp-block-post-title a:hover::after {
	transform: translateX(3px) rotate(-45deg);
}

/* Auf farbigem Grund trägt der Winkel Sand, sonst verschwindet er darin. */
.ist-dunkel .ist-wege .wp-block-heading a,
.ist-dunkel .ist-wege .wp-block-columns:hover .wp-block-heading a {
	color: var(--wp--preset--color--sand);
}

.ist-dunkel .ist-wege .wp-block-heading a::after {
	border-color: var(--wp--preset--color--sand);
}

/* --- Ruhige Links: mehrere Verweise dicht untereinander, etwa als Überschrift
   in einem Verzeichnis. In Terrakotta stünde da eine rote Leiter; deshalb
   Tinte mit feiner Unterlinie, Terrakotta erst beim Hover. Dieselbe Regel wie
   im Fußbereich, nur an anderer Stelle. --- */
.ist-ruhig a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--tinte);
}

.ist-ruhig a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	color: var(--wp--preset--color--terrakotta);
}

/* --- DER FUSSBEREICH ERDET DIE SEITE (0.19.5) ---------------------------
   Beanstandung des Benutzers, 30.07.2026: helle Abschnitte, dann ein dunkles
   Band („Termine nach Vereinbarung"), dann wieder ein heller Fuß — „ein
   Zebra-Effekt, der im Prinzip hässlich ist". Sein Vorschlag, und er ist
   richtig: heller Inhalt mit leichten Variationen, und zum Ende hin das Ganze
   erden und abdunkeln.

   Der Fuß trägt deshalb `grund` #0A3A41 — dieselbe Farbfamilie wie das
   Petrol-Band, nur als Boden (OKLCH L 0,32 gegen 0,46). Die Seite läuft damit
   von hell über das warme Schlussband in einen kühlen dunklen Grund aus,
   statt nach dem dunklen Band wieder aufzuhellen.

   Drei Fassungen wurden nebeneinander gerendert und angesehen: Fuß in
   warmem Fast-Schwarz, Fuß in tiefem Petrol, und Schlussband plus Fuß in
   einem Stück dunkel. Das tiefe Petrol gewinnt, weil es die Hausfarbe
   aufnimmt, statt in ein beliebiges Schwarz zu fallen.

   Der Fuß trägt jetzt `ist-dunkel`; Überschriften, Absätze und Links kommen
   von dort. Hier steht nur, was dort anders sein muss. --- */

/* Viele Links auf kleinem Raum: voll deckendes Sand wäre eine helle Wand,
   deshalb etwas zurückgenommen und beim Zeigen voll. Kontrast auch
   zurückgenommen noch 8,1:1. */
.shantam-fuss a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: color-mix(in srgb, var(--wp--preset--color--sand) 82%, transparent);
}

.shantam-fuss a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	color: var(--wp--preset--color--sand);
}

/* Die Rubriken („Angebot", „Kontakt", „Rechtliches") sind der einzige
   Farbpunkt im Fuß — wie die Dachzeilen im Inhalt, nur aufgehellt: Petrol
   selbst hätte auf dem Grund 1,9:1 und wäre unlesbar. Gemischt mit Sand
   ergibt es 6,9:1 und bleibt erkennbar dieselbe Farbe.
   Der Website-Titel ist ebenfalls ein h2, trägt aber keine Größenklasse —
   deshalb der Zusatz `.has-klein-font-size`. */
.shantam-fuss .wp-block-heading.has-klein-font-size {
	color: color-mix(in srgb, var(--wp--preset--color--petrol) 40%, var(--wp--preset--color--sand));
}

/* Untertitel und Zeile mit dem Zeichen © stehen zurück, ohne zu verschwinden. */
.shantam-fuss .wp-block-site-tagline,
.shantam-fuss .has-klein-font-size:not(.wp-block-heading) {
	color: color-mix(in srgb, var(--wp--preset--color--sand) 66%, transparent);
}

/* Die Trennlinie kommt aus `--shantam-linie`; auf dunklem Grund setzt
   `ist-dunkel` sie auf Sand zu 30 %. Vorher stand sie als volle Sandfläche
   im Markup — auf Creme unauffällig, auf dem Grund ein greller Strich. */
.shantam-fuss .wp-block-separator {
	background-color: var(--shantam-linie);
	border: 0;
	height: 1px;
}

/* Das Logo im Fuß trägt keine Unterstreichung. */
.shantam-fuss .wp-block-site-logo a {
	text-decoration: none;
}

/* Der Name der Schule ist kein Verweis unter vielen: er steht voll deckend und
   ohne Unterlinie, sonst stünde die Marke schwächer da als die Links darunter. */
.shantam-fuss .wp-block-site-title a {
	color: var(--wp--preset--color--sand);
	text-decoration: none;
}

/* --- Aufklappbare Fragen -------------------------------------------------
   Vier Antworten untereinander wären eine Textwüste; aufgeklappt wird nur,
   was gefragt ist. Die Frage steht in der Titelschrift und hat Luft genug,
   um mit dem Finger getroffen zu werden.

   Statt des voreingestellten Dreiecks steht rechts ein Pluszeichen, das beim
   Aufklappen zum Strich wird — ein Schriftzeichen, kein Bildchen und keine
   Bibliothek. */
.wp-block-details summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.35;
	list-style: none;
	transition: color 120ms ease;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--terrakotta);
}

.wp-block-details[open] summary::after {
	content: "–";
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--terrakotta);
}

.wp-block-details[open] summary {
	margin-bottom: 0.6rem;
}

/* Auf farbigem Grund trägt auch das Zeichen die Schrift des Bandes. */
.ist-dunkel .wp-block-details summary::after {
	color: inherit;
}

/* --- Zitate: Anführungszeichen hängen lassen ---
   Und keine Silbentrennung: ein mittig gesetztes Zitat mit „durch-dringt“ am
   Zeilenende sieht nach Blocksatz aus, nicht nach Ruhe. Der Fließtext behält
   seine Trennung, hier ist sie aus. */
.wp-block-quote {
	hanging-punctuation: first;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* --- Der Gedanke: ein Satz, der aus dem Fließtext heraustritt ------------
   Auf mehreren Seiten steht ein einzelner Satz kursiv in der Titelschrift —
   ihr eigener, der stärkste des Abschnitts. Bis 0.17.0 unterschied er sich
   nur durch Schnitt und Größe; auf einer Seite wie Persönliches, die aus
   vier langen Absätzen in Tinte und einem Nachsatz in Weich besteht, ging er
   darin unter. Die Seite las sich, in den Worten des Benutzers, „wie ein
   Word-Dokument".

   Er trägt jetzt Terrakotta — dieselbe Farbe wie die Dachzeilen und die
   Links, also kein neuer Ton, sondern der vorhandene an der Stelle, an der
   er am meisten trägt. Kontrast auf Sand 5,3:1, auf Creme 4,8:1; der Satz
   steht in Titelgröße, gefordert wären 3:1.

   Auf farbigem Grund bleibt es bei Sand: dort ist Terrakotta entweder der
   Grund selbst oder zu dunkel. */
.ist-gedanke {
	color: var(--wp--preset--color--terrakotta);
}

.ist-dunkel .ist-gedanke {
	color: var(--wp--preset--color--sand);
}

/* Die Anrede über einem Zitat („Namaste“): aufrecht in der Titelschrift,
   während das Zitat selbst kursiv steht. Der Wechsel von aufrecht zu kursiv
   trennt Anrede und Satz, ohne dass es dafür Großbuchstaben braucht. */
.ist-anrede {
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.wp-block-quote cite {
	display: block;
	margin-top: 1.1rem;
	font-family: var(--wp--preset--font-family--text);
	font-style: normal;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--weich);
}

/* --- Kontaktformular -----------------------------------------------------
   Die Schrift sitzt auf einer Linie, nicht in einem Rahmen: beim
   Hineinschreiben wird die Linie terrakotta und kräftiger, und das ist die
   einzige Bewegung, die das Formular macht. Die Linie kommt aus derselben
   Werkstatt wie die Verzeichnisse der übrigen Seiten.

   SEIT 0.19.10 HAT DAS FELD ABER EINEN KÖRPER (Beanstandung des Benutzers,
   30.07.2026: „das Formular muss gut aussehen, nicht wie jetzt"). Vorher war
   der Grund durchsichtig, und gerendert stand da: Kennwort in Versalien,
   darunter 46 px Nichts, darunter ein Strich. Das Feld war kein Gegenstand,
   sondern eine Lücke zwischen zwei Zeichen — bei der Nachricht 180 px hoch.
   Daneben wirkte der Absendeknopf als einziger fester Körper wie ein
   Fremdkörper.

   Der Körper ist der leiseste, der noch trägt: 10 % Weich auf durchsichtig,
   gerechnet auf Sand also rgb(237, 231, 221) gegen rgb(251, 245, 236). Kein
   Kasten — keine Kontur, keine Ecken unten, nur oben gerundet, damit die
   Fläche in die Linie hineinläuft statt auf ihr zu stehen. WEICH und nicht
   CREME, weil das Formular auf jedem hellen Grund funktionieren muss:
   Creme auf einem Creme-Band wäre unsichtbar, eine Abdunklung ist es nie.
   Tinte darauf misst 9,8:1. */
/* Seit 0.19.10 trägt das Formular kein `alignwide` mehr (Begründung bei
   `shantam_kontaktformular()` in functions.php): es folgt der Breite seines
   Behälters, auf der Kontaktseite also der Textbreite von 42rem. Der Deckel
   von 46rem bleibt als Sicherung stehen — steht das Formular je in einem
   breiteren Behälter, ist ein Textfeld über 1150 px unangenehm zu
   beschreiben und die Zeilen liefen weiter als jeder Fließtext der Seite. */
.shantam-feld,
.shantam-formular__paar {
	max-width: 46rem;
}

.shantam-feld {
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* Das Kennwort sitzt jetzt DICHT auf seinem Feld (0.4rem waren es vorher,
   und dazwischen lag die leere Feldhöhe — Kennwort, Loch, Strich). */
.shantam-feld label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--weich);
}

.shantam-feld input,
.shantam-feld textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem 0.6rem;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--tinte) 26%, transparent);
	border-radius: 0.45rem 0.45rem 0 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--weich) 10%, transparent);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--basis);
	color: var(--wp--preset--color--tinte);
	transition: border-color 160ms ease, background-color 160ms ease;
}

/* 3rem ist die Trefferfläche, die auch ein Daumen sicher findet — dieselbe
   Rechnung wie bei Telefon und Mail weiter oben in dieser Datei. */
.shantam-feld input {
	min-height: 3rem;
}

.shantam-feld textarea {
	resize: vertical;
	line-height: 1.6;
}

.shantam-feld input:hover,
.shantam-feld textarea:hover {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--tinte) 45%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--weich) 15%, transparent);
}

.shantam-feld input:focus,
.shantam-feld textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--terrakotta);
	border-bottom-width: 2px;
	padding-bottom: calc(0.6rem - 1px);
	background-color: color-mix(in srgb, var(--wp--preset--color--weich) 15%, transparent);
}

/* Der Tastaturfokus muss trotzdem sichtbar bleiben, auch fuer alle, die
   nicht auf Farbe achten koennen: die globale Fokusregel greift weiter. */
.shantam-feld input:focus-visible,
.shantam-feld textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--terrakotta);
	outline-offset: 3px;
}

/* Name und E-Mail nebeneinander, sobald Platz ist — und zwar Platz in der
   SPALTE, nicht im Fenster. Vorher entschied das eine Medienabfrage
   (min-width: 40em): auf einem 1440-px-Bildschirm standen die beiden Felder
   damit auch dann nebeneinander, wenn das Formular in einer 360 px schmalen
   Spalte steht — zwei Felder zu je 154 px, in die kein Name mehr passt.
   `auto-fit` mit einem Mindestmass rechnet dagegen mit dem Behaelter: unter
   rund 470 px stapeln die Felder von selbst. Auf der Kontaktseite steht das
   Formular seit 0.19.10 ueber die volle Textbreite (672 px), die beiden
   Felder also nebeneinander — aber die Regel gilt jetzt unabhaengig davon,
   wo jemand den Shortcode hinsetzt. */
.shantam-formular__paar {
	display: grid;
	gap: 0 var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.shantam-feld--knopf {
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: 0;
}

/* Der Honigtopf: fuer Menschen nicht vorhanden, fuer Maschinen ein Feld.
   Nicht `display: none` — manche Maschinen erkennen genau das. */
.shantam-honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Rueckmeldung nach dem Absenden: im Satzbild der Seite, keine Systemmeldung. */
.shantam-rueckmeldung {
	max-width: 46rem;
	margin: 0 auto var(--wp--preset--spacing--40);
	padding: 0.9rem 1.1rem;
	border-left: 2px solid var(--wp--preset--color--terrakotta);
	background-color: color-mix(in srgb, var(--wp--preset--color--sand) 70%, transparent);
	font-size: var(--wp--preset--font-size--basis);
}

.shantam-rueckmeldung.ist-gut {
	border-left-color: var(--wp--preset--color--petrol);
}

/* --- Zahlen in Tabellen und Kurszeiten ausrichten --- */
table, .wp-block-table, time {
	font-variant-numeric: tabular-nums;
}

.wp-block-table td, .wp-block-table th {
	padding-block: 0.7rem;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--weich);
}

/* --- Bilder ruhig einblenden, aber nur wenn erwünscht --- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Breite Inhalte dürfen scrollen, die Seite nicht --- */
.wp-block-table, .wp-block-preformatted, .wp-block-code {
	overflow-x: auto;
}

/* --- Brücke zu den Elementor-Seiten -------------------------------------
   In den Elementor-Seiten stecken Einstellungen, die für Astras
   transparenten Kopfbereich gemacht waren. Diese Regeln nehmen sie zurück.
   Der ganze Block kann ersatzlos weg, sobald keine Seite mehr über
   Elementor läuft. */

/* Die erste Sektion war je nach Seite um 201 bis 220 px nach oben gezogen
   und verdeckte damit Logo und Menü vollständig. */
.elementor > .elementor-section:first-child {
	margin-top: 0 !important;
}

/* Kopfbereich deckend halten, damit ihn nichts unterwandert. */
.wp-site-blocks > .wp-block-group:first-child {
	background-color: var(--wp--preset--color--sand);
	position: relative;
	z-index: 2;
}