/*
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 Salbei, klare Typografie aus Fraunces und Hanken Grotesk. Ohne Page Builder, ohne Icon-Bibliotheken, Schriften lokal ausgeliefert.
Version: 0.15.1
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: die untere Kante ------------------------------------
   Vorher eine durchgehende Haarlinie in Creme — ein kühler, technischer
   Strich quer über die Seite. Jetzt ein Verlauf, der in der Mitte am
   wärmsten ist (Safran) und zu beiden Rändern hin ausläuft. Er trennt
   ebenso deutlich, wirkt aber gezeichnet statt gezogen.

   Der Verlauf liegt in einem ::after, nicht in border-bottom: eine Kante
   kann keinen Verlauf tragen. */
.shantam-kopf {
	position: relative;
}

.shantam-kopf::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(
		to right,
		transparent,
		color-mix(in srgb, var(--wp--preset--color--terrakotta) 22%, transparent) 15%,
		color-mix(in srgb, var(--wp--preset--color--safran) 55%, transparent) 50%,
		color-mix(in srgb, var(--wp--preset--color--terrakotta) 22%, transparent) 85%,
		transparent
	);
}

/* --- 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;
}

.shantam-marke .wp-block-site-tagline {
	margin-block: 0;
	line-height: 1.2;
	text-wrap: nowrap;
}

/* Auf schmalen Geräten darf der Untertitel umbrechen, dort ist Platz nach
   unten und der Kopf ohnehin einzeilig ohne Menü. */
@media (max-width: 479px) {
	.shantam-marke .wp-block-site-tagline {
		text-wrap: pretty;
	}
}

/* --- 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;
}

.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;
}

/* Über der aufgeklappten Liste steht derselbe Schwung wie über den
   Abschnittsauftakten — rechtsbündig, weil die Liste rechts steht. Er nimmt
   dem Menü das Nüchterne, ohne einen Eintrag hinzuzufügen. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "";
	display: block;
	width: clamp(110px, 38vw, 150px);
	aspect-ratio: 160 / 16;
	margin: 0 0 2rem auto;
	background-color: var(--wp--preset--color--safran);
	-webkit-mask: var(--shantam-schwung) center / contain no-repeat;
	mask: var(--shantam-schwung) center / contain no-repeat;
}

/* 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);
}

.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);
}

.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.

   Deshalb ist diese Form zugleich eine Begrenzung: feste Proportion,
   `object-fit: cover` (das Bild fuellt den Rahmen, statt sich zu verzerren)
   und eine Deckelung der Hoehe. Kein Bild kann eine Seite mehr fluten —
   weder am Schreibtisch noch auf dem Handy.

   Angemeldet ist die Form als Block-Stil (siehe functions.php), damit sie im
   Editor unter „Stile" auswaehlbar ist und niemand Klassennamen kennen muss.

   Auf schmalen Geraeten wird der Ausschnitt weniger breit: 16:7 waere dort
   ein Schlitz von 80 px Hoehe. */
.wp-block-image.is-style-shantam-ausschnitt img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	max-height: 46vh;
	object-fit: cover;
	object-position: center;
	border-radius: var(--shantam-weich);
}

@media (max-width: 599px) {
	.wp-block-image.is-style-shantam-ausschnitt img {
		aspect-ratio: 3 / 2;
		max-height: 38vh;
	}
}

/* --- Die Bühne: der erste Blick füllt das Fenster ------------------------
   Der Auftakt der Startseite. Oben der Text, darunter trägt das Bild die
   restliche Höhe des Fensters (object-fit: cover). min-height statt height:
   auf kleinen Fenstern darf der Abschnitt wachsen, das Bild behält dafür
   eine Mindesthöhe. 100svh rechnet die eingeklappten Browserleisten auf
   Mobilgeräten mit ein; die Kopfhöhe ist gemessen (117 px einzeilig).
   WENN DER KOPFBEREICH UMGEBAUT WIRD, DIESEN WERT NEU MESSEN. */
:root {
	--shantam-kopf: 117px;
}

.ist-buehne {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: calc(100vh - var(--shantam-kopf));
	min-height: calc(100svh - var(--shantam-kopf));
}

/* Das Bild liegt absolut in seiner Figur: sonst hielte seine natürliche
   Höhe die Figur auf und die Bühne wüchse über das Fenster hinaus. So
   bestimmt allein der freie Raum die Bildhöhe, das Bild füllt ihn
   (object-fit: cover) und behält eine Mindesthöhe für kleine Fenster. */
.ist-buehne > .wp-block-image {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: min(44vh, 30rem);
	margin-bottom: 0;
}

.ist-buehne > .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 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 ist deshalb ein eigenes Band in Creme: Inhalt senkrecht
   mittig, feste Proportion (nie mehr als 40 % der Fensterhöhe, nie unter
   16rem), und unten eine klare Farbkante. Der Raum oben ist damit gefärbt
   und gewollt, und was folgt, wird an einer Kante angeschnitten — das lädt
   zum Weiterscrollen ein, statt beschnitten zu wirken.

   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.

   Die Polsterung ist bewusst knapper als bei den übrigen Bändern (50 statt
   70): die Mindesthöhe trägt den Raum, ein zweites Mal 8rem Polsterung
   obendrauf machte aus dem Auftakt wieder ein leeres Feld.

   REGEL: auf eine Schwelle in Creme folgt nie ein zweites Creme-Band.
   Wer eine Seite umbaut, prüft die Bandfolge. */
.ist-schwelle {
	display: grid;
	align-content: center;
	box-sizing: border-box;
	min-height: clamp(14rem, 34vh, 19rem);
	padding-block: var(--wp--preset--spacing--50);
}

/* 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. */
.ist-schwelle + *:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--60);
}

/* 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 in der Schwelle 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. */
.ist-schwelle a[href^="tel:"],
.ist-schwelle 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;
}

/* --- Abschnitte in Farbe -------------------------------------------------
   Die Seite atmet in Baendern: Sand, Creme, tiefes Salbei, 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. */
.ist-wege .wp-block-heading a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}

.ist-wege .wp-block-heading 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 {
	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 {
	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);
}

/* --- Fußbereich: viele Links auf kleinem Raum. In Terrakotta wäre das eine
   rote Wand, deshalb hier Tinte mit feiner Unterlinie, Terrakotta erst beim
   Hover. --- */
.shantam-fuss a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--tinte);
}

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

/* Das Logo im Fuß trägt keine Unterstreichung. */
.shantam-fuss .wp-block-site-logo a {
	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;
}

/* 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 -----------------------------------------------------
   Keine Kästen. Die Felder stehen als Haarlinien da, wie die Verzeichnisse
   der übrigen Seiten — die Schrift sitzt auf einer Linie, statt in einem
   Rahmen zu stecken. Beim Hineinschreiben wird die Linie terrakotta und
   kräftiger; das ist die einzige Bewegung, die das Formular macht. */
/* Das Formular steht breit (alignwide), damit seine linke Kante unter der
   Überschrift sitzt. Begrenzt werden nur die Felder: ein Textfeld über die
   ganze Breite von 1150 px ist 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);
}

.shantam-feld label {
	display: block;
	margin-bottom: 0.4rem;
	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.55rem 0 0.65rem;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--tinte) 28%, transparent);
	border-radius: 0;
	background-color: 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;
}

.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) 48%, 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.65rem - 1px);
}

/* 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. */
.shantam-formular__paar {
	display: grid;
	gap: 0 var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.shantam-formular__paar {
		grid-template-columns: 1fr 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--salbei-tief);
}

/* --- 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;
}