/* Der Inhaltsbereich des Eltern-Themes ist begrenzt. Auf unseren Vorlagen
   soll er das nicht sein — die Abschnittsflächen laufen bis zum Rand,
   die Breite regeln wir selbst über .sgs-innen. */
/* body. davor, weil das Eltern-Theme mit
   body:not([class*=elementor-page-]) .site-main arbeitet — das ist
   spezifischer als eine einzelne Klasse. */
body.sgs-vorlage .site-main {
	max-width: none;
	width: auto;
	margin: 0;
	padding-inline: 0;
}

/* ==================================================================
   Bausteine — der Baukasten.
   Ableitung aus allen sechs Entwürfen, Liste in PROJEKT.md Abschnitt 6b.
   Jeder Baustein ist für sich verwendbar und kennt keine Nachbarn.
   ================================================================== */

/* Abstände am Entwurf gemessen (Startseite.png, hochgerechnet auf 1280):
   dort sind es rund 56 px oben und unten, bei uns waren es 96. */
.sgs-abschnitt {
	padding: clamp(34px, 4.4vw, 60px) 0;
}
.sgs-abschnitt--creme { background: var(--sgs-creme); }
.sgs-abschnitt--weiss { background: var(--sgs-weiss); }
/* Auf der Yoga-Seite ist der Kopfbereich im Entwurf weiß, nicht creme.
   Zwei Klassen, weil die Grundregel .sgs-hero weiter unten steht und bei
   gleicher Gewichtung sonst gewinnt. */
.sgs-hero.sgs-hero--weiss { background: var(--sgs-weiss); }
/* Es gibt genau eine Inhaltsbreite: --sgs-breite.
   .sgs-abschnitt--breit hatte hier eine zweite (1340px) — historisch
   gewachsen, für die Kursliste auf Yoga und die Therapieliste auf
   Naturheilkunde. Zwei Wahrheiten im System sind eine zu viel; entschieden
   am 09.09., beide Listen laufen auf der Standardbreite.
   Die Klasse selbst bleibt: sie trägt auf Microkinesi und Paarberatung
   die vollflächig geteilten Blöcke, die gar kein .sgs-innen haben. */

.sgs-abschnitt__kopf {
	max-width: 720px;
	margin: 0 auto clamp(24px, 3vw, 40px);
	text-align: center;
}
.sgs-abschnitt__kopf p { margin-top: 12px; }

/* Symbole -------------------------------------------------------- */
.sgs-symbol { width: 1em; height: 1em; display: block; }

.sgs-symbolkreis {
	flex: 0 0 auto;
	width: 56px; height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sgs-salbei);
	color: var(--sgs-weiss);
	font-size: 30px;
}
.sgs-symbolkreis--hell {
	background: var(--sgs-gelb);
	color: var(--sgs-anthrazit);
}
/* Blasses Salbei mit grünem Symbol — so stehen die Beschwerdebilder
   im Entwurf NHK.png. */
.sgs-symbolkreis--salbei {
	background: color-mix(in srgb, var(--sgs-salbei) 24%, var(--sgs-weiss));
	color: var(--sgs-salbei-dunkel);
}

/* ------------------------------------------------------------------
   1 · Hero mit Porträt im Bogenrahmen
   ------------------------------------------------------------------ */
.sgs-hero {
	background: var(--sgs-creme);
	padding: clamp(30px, 4.4vw, 60px) 0;
}
.sgs-hero__gitter {
	max-width: var(--sgs-breite);
	margin-inline: auto;
	padding-inline: var(--sgs-rand);
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.sgs-hero__text h1 { margin: 0 0 16px; }
.sgs-hero__unterzeile {
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: clamp(19px, 2vw, 24px);
	color: var(--sgs-salbei-dunkel);
	margin: 0 0 20px;
}
/* Das Eltern-Theme nimmt Absätzen den Abstand — hier braucht der Text Luft. */
.sgs-hero__text p + p { margin-top: 16px; }
.sgs-hero__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

/* Der Bogen: oben rund, unten gerade — wie in allen sechs Entwürfen. */
.sgs-hero__bild {
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 50vw 50vw 12px 12px;
	overflow: hidden;
	background: var(--sgs-sand);
}
.sgs-hero__bild img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* Kopfbereich, dessen Bild die Fläche ist — nach Entwurf.
   Das Bild liegt hinter dem Text, läuft bis an den rechten Bildschirmrand
   und wird nach links über einen Verlauf in die Abschnittsfarbe aufgelöst.
   Der Verlauf steckt im ::after, damit die Bilddatei unverändert bleibt. */
.sgs-hero--flaeche {
	position: relative;
	overflow: hidden;
	padding-block: 0;
	min-height: 520px;
	display: grid;
	align-items: center;
}
.sgs-hero__flaeche {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(64%, 900px);
	margin: 0;
	pointer-events: none;
}
.sgs-hero__flaeche img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}
/* Der weiche Übergang in die Fläche. currentColor geht hier nicht,
   deshalb die Farbe zweimal: einmal deckend, einmal durchsichtig. */
.sgs-hero--flaeche.sgs-hero--weiss .sgs-hero__flaeche::after,
.sgs-hero--flaeche .sgs-hero__flaeche::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--sgs-weiss) 0%,
		rgba(255, 255, 255, .92) 14%,
		rgba(255, 255, 255, .35) 38%,
		rgba(255, 255, 255, 0) 62%
	);
}
.sgs-hero--flaeche .sgs-hero__gitter {
	position: relative;
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(40px, 5vw, 76px);
}
.sgs-hero--flaeche .sgs-hero__text { max-width: 620px; }

@media (max-width: 900px) {
	.sgs-hero--flaeche { min-height: 0; }
	.sgs-hero__flaeche {
		position: relative;
		inset: auto;
		width: 100%;
		height: 300px;
	}
	.sgs-hero__flaeche::after { display: none; }
	.sgs-hero--flaeche .sgs-hero__text { max-width: none; }
}

/* Freigestelltes Motiv: kein Bogen, kein Hintergrund, keine Kante — es
   steht direkt auf der Fläche. Schwarzweiß nur in der Darstellung, damit
   die Datei farbig bleibt und ein Rückbau eine Zeile ist. */
.sgs-hero__bild--frei {
	aspect-ratio: auto;
	border-radius: 0;
	overflow: visible;
	background: none;
	align-self: end;
}
.sgs-hero__bild--frei img {
	width: 100%;
	height: auto;
	object-fit: contain;
	filter: grayscale(.8);   /* 80 % entfaerbt, ein Rest Farbe bleibt */
	display: block;
}
/* Das freigestellte Motiv fuellte seine Spalte bis zur letzten Pixelspalte
   aus — es klebte am Fensterrand, ohne jeden Abstand, und wirkte dadurch
   zu gross. Jetzt drei Viertel der Spaltenbreite, rechtsbuendig, mit einem
   Rand, der mit dem Fenster mitwaechst. Nur ab 861 px: darunter steht das
   Bild ueber dem Text und ist schon durch max-width begrenzt. */
/* Kein eigener Randabstand mehr am Bild: Die dritte Rasterspalte haelt
   den Rand, das Bild fuellt seine Spalte aus und endet damit von selbst
   buendig mit dem Knopf „Termin vereinbaren" in der Kopfleiste. */

@media (max-width: 900px) {
	.sgs-hero__gitter { grid-template-columns: 1fr; }
	.sgs-hero__bild { order: -1; aspect-ratio: 1 / 1; max-width: 420px; }
	/* Das freigestellte Motiv hat keinen Rahmen, an dem man die 420 px
	   ablesen koennte — es klebte dadurch auf dem Tablet linksbuendig in
	   der halben Breite, mit 414 px Leere daneben. Mittig und breiter. */
	.sgs-hero__bild--frei {
		max-width: min(100%, 560px);
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------
   2 · Icon-Merkmalsreihe
   ------------------------------------------------------------------ */
.sgs-merkmale {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(18px, 2vw, 26px);
}
.sgs-merkmal {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.sgs-merkmal__titel {
	font-family: var(--sgs-schrift-text);
	font-size: 16px;
	font-weight: 700;
	color: var(--sgs-anthrazit);
	margin: 0 0 4px;
	line-height: 1.3;
}
.sgs-merkmal p { margin: 0; font-size: 15px; }

/* ------------------------------------------------------------------
   3 · Karten-Raster ohne Bild  (Yoga 14, Schwimmen 4)
   ------------------------------------------------------------------ */
.sgs-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(18px, 2.5vw, 28px);
}
.sgs-karte {
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sgs-karte h3 {
	font-size: 21px;
	margin: 0;
	line-height: 1.3;
}
.sgs-karte p { margin: 0; flex: 1 1 auto; }

.sgs-karte__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sgs-salbei-dunkel);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	align-self: flex-start;
	padding-bottom: 2px;
}
.sgs-karte__link .sgs-symbol { font-size: 15px; }
.sgs-karte__link:hover { color: var(--sgs-anthrazit); }

/* ------------------------------------------------------------------
   4 · Karten-Raster mit Bild  (Naturheilkunde 7)
   ------------------------------------------------------------------ */
.sgs-karte--bild { padding: 0; overflow: hidden; }
.sgs-karte--bild > img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
.sgs-karte__inhalt {
	padding: 24px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
}

/* ------------------------------------------------------------------
   5 · Aufklappzeilen  (Microkinesi 8, Naturheilkunde 11, Yoga-Kurse 14)
   Nutzt <details>: klappt auch ohne JavaScript und ist von Haus aus
   für Screenreader bedienbar.
   ------------------------------------------------------------------ */
.sgs-klapper { display: flex; flex-direction: column; gap: 12px; }

.sgs-klapp {
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	overflow: hidden;
}
.sgs-klapp > summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: 20px;
	color: var(--sgs-anthrazit);
}
.sgs-klapp > summary::-webkit-details-marker { display: none; }
.sgs-klapp > summary:hover { background: var(--sgs-creme); }

.sgs-klapp__pfeil {
	margin-left: auto;
	font-size: 20px;
	color: var(--sgs-salbei-dunkel);
	transition: transform .2s ease;
}
/* Zu: Pfeil nach rechts wie im Entwurf. Offen: nach unten. */
.sgs-klapp[open] .sgs-klapp__pfeil { transform: rotate(90deg); }

.sgs-klapp__inhalt {
	padding: 0 22px 22px 94px;
}
@media (max-width: 620px) {
	.sgs-klapp__inhalt { padding-left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.sgs-klapp__pfeil { transition: none; }
}

/* ------------------------------------------------------------------
   6 · Abschluss-Band mit Handlungsaufruf
   ------------------------------------------------------------------ */
.sgs-band {
	background: var(--sgs-gelb-band);
	padding: 0;
	position: relative;
	overflow: hidden;
}
/* Blumenbild links, das nach rechts in die Bandfarbe ausläuft — im Entwurf
   ist es Teil der Fläche, kein abgesetztes Bild. */
.sgs-band::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: min(34%, 430px);
	background-image:
		linear-gradient(to right, rgba(248,242,200,0) 55%, var(--sgs-gelb-band) 97%),
		url("grafiken/band-blumen.jpg");
	background-size: cover, cover;
	background-position: center, center;
	pointer-events: none;
}
/* Das helle Logo, das hier bis zum 17.09.2026 rechts stand, ist raus.
   Es stammte aus Raphaelas Entwurf (heller Kreis, cremefarbene Schrift),
   ging auf dem gelben Grund aber fast unter — sie hat es am 14.09. selbst
   angesprochen und am 17.09. entschieden: weglassen. Begruendung, die sie
   mitgetragen hat: es ist reine Zier, und direkt darunter im Fussbereich
   steht dasselbe Zeichen noch einmal.
   Damit faellt die dritte Rasterspur weg; der Text bekommt den Platz. */
.sgs-band__innen {
	position: relative;
	max-width: var(--sgs-breite);
	margin-inline: auto;
	padding: clamp(34px, 4.4vw, 58px) var(--sgs-rand);
	display: grid;
	grid-template-columns: min(34%, 430px) 1fr;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	text-align: left;
}
.sgs-band__text { grid-column: 2; }
.sgs-band h2 { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 34px); }
.sgs-band p { margin: 0 0 22px; max-width: 46ch; color: var(--sgs-anthrazit); }

@media (max-width: 900px) {
	/* Ab hier faellt auch das Blumenbild links weg, es bleibt eine Spur. */
	.sgs-band::before { display: none; }
	.sgs-band__innen { grid-template-columns: 1fr; }
	.sgs-band__text { grid-column: 1; }
}

/* Umbrüche aus den Entwürfen: gelten nur, solange Platz dafür ist.
   Auf dem Telefon bricht der Text von selbst — ein zusätzlicher fester
   Umbruch lässt Absätze ausfransen. Siehe sgs_umbruch() in functions.php. */
@media (max-width: 620px) {
	br.sgs-umbruch { display: none; }
}

/* ------------------------------------------------------------------
   7 · Stundenplan-Tabelle  (nur Yoga)
   Aufbau wie im Entwurf: keine Kopfzeile, eine Zeile je Wochentag,
   darin die Kurse untereinander, ein Anmeldelink je Tag.
   ------------------------------------------------------------------ */
.sgs-plan__rolle { overflow-x: auto; }          /* schmale Bildschirme */
/* Auf dem Telefon passt die Tabelle nicht in die Breite. Ohne Hinweis merkt
   niemand, dass es seitlich weitergeht — Schattenkanten verdeckt die Tabelle
   selbst, also lieber ein Satz. */
/* Präventionskurs-Vermerk hinter dem Kursnamen, dazu die Fußnote unter
   dem Plan — gleiche Aussage wie unter den Preisen. */
.sgs-plan__praevention {
	white-space: nowrap;
	font-size: .85em;
	color: var(--sgs-salbei-dunkel);
}
.sgs-plan__fussnote {
	color: var(--sgs-salbei-dunkel);
	margin-top: 14px;
}

/* Zwei Fassungen desselben Plans: die Tabelle ab 700 px, darunter Karten.
   Immer genau eine ist im Baum — display:none nimmt sie auch Vorlesern,
   sonst hoert man den Stundenplan zweimal. */
.sgs-plan__karten { display: none; }
@media (max-width: 620px) {
	.sgs-plan__rolle { display: none; }
	.sgs-plan__karten {
		display: grid;
		gap: 12px;
	}
}

.sgs-plan__tag {
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 16px 18px;
}
.sgs-plan__tagname {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--sgs-anthrazit);
	border-bottom: 1px solid rgba(219, 199, 175, .5);
	padding-bottom: 8px;
}
.sgs-plan__stunden {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.sgs-plan__stunden > li {
	display: grid;
	gap: 2px;
}
/* Die Uhrzeit steht ueber dem Kursnamen, nicht daneben: nebeneinander
   bleiben auf 390 px nur zwei Woerter je Zeile fuer den Namen uebrig. */
.sgs-plan__uhr {
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	color: var(--sgs-salbei-dunkel);
	font-weight: 700;
}
.sgs-plan__name { line-height: 1.45; }
.sgs-plan__tag .sgs-plan__anmelden {
	margin-top: 14px;
	display: inline-flex;
}

table.sgs-plan {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	overflow: hidden;
	font-variant-numeric: tabular-nums;
}
/* Die erste Zeile bekam die Rahmenlinie der Tabelle *und* ihre eigene
   Zellenlinie — das sah nach einem doppelten Strich aus. */
table.sgs-plan tbody tr:first-child > * { border-top: 0; }
table.sgs-plan th,
table.sgs-plan td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid rgba(219, 199, 175, .5);
	background: var(--sgs-weiss);
}
table.sgs-plan tbody tr:last-child > * { border-bottom: 0; }
/* Elementor zeichnet Tabellenzellen seitliche Rahmen — im Entwurf gibt es
   nur die eine Linie rechts der Tagesspalte. */
table.sgs-plan td { border-inline: 0; }
/* Elementor streift die Zeilen abwechselnd ein — im Entwurf sind alle weiß. */
table.sgs-plan > tbody > tr > td,
table.sgs-plan > tbody > tr:nth-child(odd) > td { background: var(--sgs-weiss); }

/* Tagesspalte: heller Beigeton und senkrechte Trennlinie, wie im Entwurf. */
table.sgs-plan tbody th[scope="row"] {
	width: 1%;
	white-space: nowrap;
	font-family: var(--sgs-schrift-text);
	font-weight: 700;
	color: var(--sgs-anthrazit);
	background: var(--sgs-creme-gruen);
	border-right: 1px solid rgba(219, 199, 175, .5);
}

/* Zeiten und Kurse stehen je Tag untereinander. */
.sgs-plan__zeiten,
.sgs-plan__kurse {
	display: table-cell;
}
.sgs-plan__zeiten > span,
.sgs-plan__kurse > span {
	display: block;
	line-height: 1.5;
}
/* Der Präventionskurs-Vermerk läuft in der Kurszeile mit, nicht darunter —
   sonst wächst die Kursspalte und die Zeiten daneben verrutschen. */
.sgs-plan__kurse .sgs-plan__praevention { display: inline; }
.sgs-plan__zeiten > span + span,
.sgs-plan__kurse > span + span { margin-top: 8px; }
.sgs-plan__zeiten {
	white-space: nowrap;
	color: var(--sgs-grau);
}
.sgs-plan__kurse { color: var(--sgs-anthrazit); }

.sgs-plan__spalte-anmelden { width: 1%; white-space: nowrap; text-align: right; }
table.sgs-plan a.sgs-plan__anmelden,
table.sgs-plan a.sgs-plan__anmelden:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sgs-salbei-dunkel);
	text-decoration: none;
}
table.sgs-plan a.sgs-plan__anmelden .sgs-symbol { font-size: 15px; }
table.sgs-plan a.sgs-plan__anmelden:hover { color: var(--sgs-anthrazit); }

@media (max-width: 620px) {
	table.sgs-plan th,
	table.sgs-plan td { padding: 14px 14px; }
}

/* ------------------------------------------------------------------
   8 · Preistabellen, dreispaltig  (nur Yoga)
   ------------------------------------------------------------------ */
.sgs-preise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(18px, 2.5vw, 28px);
	align-items: start;
}
.sgs-preis {
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sgs-preis--hervor {
	border-color: var(--sgs-salbei);
	box-shadow: 0 10px 30px rgba(52, 52, 52, .07);
}
.sgs-preis h3 { font-size: 22px; margin: 0; }
.sgs-preis__betrag {
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: 38px;
	line-height: 1;
	color: var(--sgs-anthrazit);
}
.sgs-preis__betrag small {
	display: block;
	font-family: var(--sgs-schrift-text);
	font-size: 13px;
	color: var(--sgs-grau);
	margin-top: 6px;
}
.sgs-preis ul { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.sgs-preis li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 10px;
	font-size: 15px;
}
.sgs-preis li .sgs-symbol { font-size: 18px; color: var(--sgs-salbei); flex: 0 0 auto; margin-top: 2px; }

/* ------------------------------------------------------------------
   9 · Nummerierter Ablauf  (nur Paarberatung)
   ------------------------------------------------------------------ */
.sgs-ablauf { list-style: none; margin: 0; padding: 0; counter-reset: sgs-schritt; }

.sgs-ablauf > li {
	counter-increment: sgs-schritt;
	position: relative;
	padding: 0 0 34px 78px;
}
.sgs-ablauf > li::before {
	content: counter(sgs-schritt);
	position: absolute;
	left: 0; top: 0;
	width: 52px; height: 52px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sgs-gelb);
	color: var(--sgs-anthrazit);
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: 22px;
}
/* Verbindungslinie zwischen den Schritten, beim letzten weggelassen. */
.sgs-ablauf > li::after {
	content: "";
	position: absolute;
	left: 26px; top: 60px; bottom: 8px;
	width: 1px;
	background: var(--sgs-sand);
}
.sgs-ablauf > li:last-child { padding-bottom: 0; }
.sgs-ablauf > li:last-child::after { display: none; }

.sgs-ablauf h3 { font-size: 22px; margin: 8px 0 8px; }
.sgs-ablauf p { margin: 0; }

/* ------------------------------------------------------------------
   10 · „Für wen ist … hilfreich" — Checklisten nebeneinander
   ------------------------------------------------------------------ */
.sgs-checklisten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(18px, 2.5vw, 28px);
}
.sgs-checkliste {
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 28px 26px;
}
.sgs-checkliste h3 { font-size: 20px; margin: 0 0 16px; }

/* Häkchenliste — eigenständig, damit sie auch außerhalb einer Checkliste
   verwendbar ist (etwa im Baustein „Über mich"). */
ul.sgs-hakenliste {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.sgs-hakenliste > li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	font-size: 15px;
	list-style: none;
}
ul.sgs-hakenliste > li::marker { content: ""; }
ul.sgs-hakenliste > li .sgs-symbol {
	position: absolute;
	left: 0; top: 3px;
	font-size: 18px;
	color: var(--sgs-salbei);
}

/* ------------------------------------------------------------------
   11 · Über mich — Porträt und Häkchenliste
   ------------------------------------------------------------------ */
.sgs-uebermich {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
.sgs-uebermich__bild {
	margin: 0;
	aspect-ratio: 3 / 4;
	border-radius: 50vw 50vw 12px 12px;
	overflow: hidden;
	background: var(--sgs-sand);
}
.sgs-uebermich__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgs-uebermich h2 { margin: 0 0 16px; }

@media (max-width: 900px) {
	.sgs-uebermich { grid-template-columns: 1fr; }
	.sgs-uebermich__bild { max-width: 340px; }
}

/* ------------------------------------------------------------------
   12 · Ausbildungen und Qualifikationen
   ------------------------------------------------------------------ */
.sgs-qualifikationen { list-style: none; margin: 0; padding: 0; }
.sgs-qualifikationen > li {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--sgs-sand);
}
.sgs-qualifikationen > li:last-child { border-bottom: 0; }
.sgs-qualifikationen__jahr {
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: 19px;
	color: var(--sgs-salbei-dunkel);
	font-variant-numeric: tabular-nums;
}
.sgs-qualifikationen__titel { color: var(--sgs-anthrazit); font-weight: 600; }
.sgs-qualifikationen p { margin: 4px 0 0; font-size: 15px; }

@media (max-width: 620px) {
	.sgs-qualifikationen > li { grid-template-columns: 1fr; gap: 4px; }
}

/* ------------------------------------------------------------------
   13 · Stimmen — waagerecht scrollbar, ohne JavaScript
   Ein echtes Karussell bräuchte Skript und wäre mit der Tastatur
   schlechter bedienbar. Einrasten reicht und funktioniert überall.
   ------------------------------------------------------------------ */
.sgs-stimmen {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 380px);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	scrollbar-width: thin;
}
.sgs-stimme {
	scroll-snap-align: start;
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sgs-stimme blockquote {
	margin: 0;
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: 19px;
	line-height: 1.45;
	color: var(--sgs-anthrazit);
}
.sgs-stimme figcaption { font-size: 14px; color: var(--sgs-grau); margin-top: auto; }

.sgs-hinweis {
	background: var(--sgs-hellgrau);
	border-left: 4px solid var(--sgs-apricot);
	padding: 16px 20px;
	border-radius: 6px;
	font-size: 15px;
}

/* Sprungmarke je Aufklappzeile — der Link, den sie verschicken kann. */
.sgs-klapp__titel { flex: 1 1 auto; }

.sgs-klapp__adresse {
	margin: 16px 0 0;
	font-size: 13px;
}
.sgs-klapp__adresse a {
	color: var(--sgs-salbei-dunkel);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
.sgs-klapp__adresse a:hover { color: var(--sgs-anthrazit); }

/* Der Abstand zur klebrigen Kopfleiste steht seit dem 10.09. als
   scroll-padding-top am Wurzelelement (style.css) und gilt für jedes
   Sprungziel. Hier stand dieselbe Rechnung noch einmal als
   scroll-margin-top — beide addieren sich, der Sprung wäre doppelt
   so weit gegangen. */

/* Beim Anspringen kurz hervorheben, damit klar ist, wo man gelandet ist. */
.sgs-klapp:target {
	border-color: var(--sgs-salbei);
	box-shadow: 0 0 0 3px rgba(166, 181, 154, .25);
}

/* ==================================================================
   Varianten, die der Yoga-Entwurf zusätzlich braucht
   ================================================================== */

/* Hero mit breitem Bild rechts statt Bogen (so im Yoga-Entwurf) ---
   Der Kopfbereich läuft von Fensterkante zu Fensterkante, seine Textspalte
   steht aber auf der Inhaltskante der Seite — derselben Linie wie Logo und
   Kopfleiste. Das leistet --sgs-vollraster; die Spalte wird über den
   Spurnamen angesteuert, nicht über eine eigene Maximalbreite. Vorher hing
   der Text an max-width plus margin-left:auto und richtete sich damit an
   seiner eigenen Spalte aus statt am Raster — die Überschrift wanderte
   dadurch mit der Fensterbreite (−29 px bei 1280, −6 px bei 1856).

   width und margin sind wichtig: Bei den Seiten, deren Kopfbereich zusätzlich
   .sgs-hero--flaeche trägt (Yoga, Naturheilkunde), sitzt dieses Raster
   selbst in einem Raster. Mit dem geerbten margin-inline:auto bekäme es dort
   keine feste Breite — und in einem Kasten ohne feste Breite sind Prozente
   in einer Spurenliste wirkungslos. Genau daran ist der Kopfbereich beider
   Seiten am 08.09. zusammengefallen. */
.sgs-hero--breit .sgs-hero__gitter {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
	grid-template-columns: var(--sgs-vollraster);
	gap: 0;
	align-items: stretch;
}
.sgs-hero--breit .sgs-hero__text {
	grid-column: inhalt-start / mitte;
	max-width: none;
	margin-left: 0;
	/* Links kein Polster: dort ist schon die Rasterlinie. Rechts Luft
	   zum Bild. */
	padding: clamp(26px, 3.6vw, 50px) clamp(24px, 4vw, 64px) clamp(26px, 3.6vw, 50px) 0;
	align-self: center;
}
/* Das Bild endet an der Inhaltskante — genau dort, wo in der Kopfleiste
   darüber der Knopf „Termin vereinbaren" endet. */
.sgs-hero--breit .sgs-hero__bild {
	grid-column: mitte / inhalt-ende;
	aspect-ratio: auto;
	border-radius: 0;
	min-height: 420px;
}
@media (max-width: 900px) {
	.sgs-hero--breit .sgs-hero__gitter { grid-template-columns: 1fr; }
	.sgs-hero--breit .sgs-hero__text {
		grid-column: auto;
		max-width: none;
		padding-inline: var(--sgs-rand);
	}
	.sgs-hero--breit .sgs-hero__bild { grid-column: auto; min-height: 300px; order: -1; }
}

/* Merkmalsreihe auf sandfarbenem Band, mit Trennstrichen ---------- */
/* Farbe am Entwurf gemessen — creme war zu blass, das Band verschwand. */
.sgs-band-merkmale {
	background: var(--sgs-creme-hell);
	padding: clamp(24px, 3vw, 38px) 0;
}
/* Symbol links neben dem Text, ohne Kreis — so steht es im Entwurf.
   Beide auf einer Mittelachse: Symbol links, Textblock rechts. */
.sgs-band-merkmale .sgs-merkmal { flex-direction: row; gap: 16px; align-items: center; }
.sgs-merkmal__symbol {
	flex: 0 0 auto;
	font-size: clamp(58px, 5vw, 78px);
	color: var(--sgs-salbei-dunkel);
	line-height: 1;
	display: flex;
	align-items: center;
}
.sgs-merkmal__symbol .sgs-symbol,
.sgs-merkmal__symbol svg { width: 1em; height: 1em; }
.sgs-band-merkmale .sgs-merkmale > * + * {
	border-left: 1px solid var(--sgs-sand);
	padding-left: clamp(18px, 2vw, 26px);
}
@media (max-width: 900px) {
	.sgs-band-merkmale .sgs-merkmale > * + * { border-left: 0; padding-left: 0; }
}

/* Klappkarte — Karte im Raster, die sich an Ort und Stelle öffnet.
   So bleibt das Raster aus dem Entwurf erhalten, ohne 14 Unterseiten. */
details.sgs-klappkarte {
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 14px 14px 12px;
}
details.sgs-klappkarte[open] { border-color: var(--sgs-salbei); }
details.sgs-klappkarte:target {
	border-color: var(--sgs-salbei);
	box-shadow: 0 0 0 3px rgba(166, 181, 154, .25);
}
/* Die Karte füllt ihre Rasterzelle, die Zusammenfassung füllt die Karte.
   Nur so sitzt „Mehr erfahren" in allen Karten auf gleicher Höhe. */
details.sgs-klappkarte {
	display: flex;
	flex-direction: column;
}
details.sgs-klappkarte > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	/* Im Entwurf sind die Karten breiter als hoch (rund 227 x 190 bei 1280
	   Bildschirmbreite). Wächst mit, wenn der Text mehr braucht. */
	min-height: 130px;
}
details.sgs-klappkarte > summary::-webkit-details-marker { display: none; }

.sgs-klappkarte__symbol { font-size: 22px; color: var(--sgs-salbei); }
.sgs-klappkarte__titel {
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: 17px;
	color: var(--sgs-anthrazit);
	line-height: 1.25;
}
.sgs-klappkarte__unter { font-size: 12.5px; color: var(--sgs-salbei-dunkel); }
.sgs-klappkarte__text  { font-size: 12.5px; margin: 4px 0 0; line-height: 1.45; }
.sgs-klappkarte__mehr {
	/* schiebt sich an den unteren Rand — daher gleiche Höhe in jeder Karte */
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	color: var(--sgs-salbei-dunkel);
}
.sgs-klappkarte__mehr span::after { content: " →"; }
details.sgs-klappkarte[open] .sgs-klappkarte__mehr { display: none; }

.sgs-klappkarte__inhalt {
	border-top: 1px solid var(--sgs-sand);
	margin-top: 16px;
	padding-top: 16px;
	font-size: 14px;
}

/* Preisliste — Bezeichnung links, Betrag rechts ------------------- */
.sgs-preislisten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(18px, 2.5vw, 28px);
	align-items: start;
}
.sgs-preisliste {
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 26px;
}
.sgs-preisliste h3 {
	font-size: 20px;
	margin: 0 0 18px;
	text-align: center;
}
.sgs-preisliste dl {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 12px;
	font-variant-numeric: tabular-nums;
}
.sgs-preisliste dt,
.sgs-preisliste dd {
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--sgs-hellgrau);
	font-size: 14px;
}
.sgs-preisliste dd { text-align: right; color: var(--sgs-anthrazit); font-weight: 600; }
.sgs-preisliste dt:last-of-type,
.sgs-preisliste dd:last-of-type { border-bottom: 0; }

/* Band mit Bild links, Text mittig, Liste rechts ------------------ */
.sgs-dreiklang {
	display: grid;
	grid-template-columns: .9fr 1.3fr .8fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.sgs-dreiklang__bild { margin: 0; }
.sgs-dreiklang__bild img {
	width: 100%;
	border-radius: var(--sgs-radius);
	display: block;
}
@media (max-width: 900px) {
	.sgs-dreiklang { grid-template-columns: 1fr; }
}

/* Kartenraster mit fünf Spalten (Yoga-Entwurf: 5 + 5 + 4)
   Als Flex statt Raster: bleibt in der letzten Reihe eine Karte übrig,
   steht sie mittig statt links angeschlagen. Das wirkt ruhiger. */
/* Das Kartenraster läuft im Entwurf breiter als die übrigen Abschnitte —
   erst dadurch werden die Karten breiter als hoch. */
/* Fünf Karten nebeneinander (Angebote auf der Startseite).
   Bisher zählte eine Leiter aus drei eigenen Umbruchpunkten (1100 · 760 ·
   520) die Spalten herunter — drei von zehn Punkten im ganzen Projekt, nur
   für diesen einen Baustein. Statt zu zählen, rechnet das Raster jetzt
   selbst: so viele Spalten, wie bei 208 px Mindestbreite hineinpassen.
   Das ergibt dieselbe Leiter (5 · 4 · 3 · 2 · 1), ohne einen einzigen
   Umbruchpunkt — und sie kann nicht mehr zwischen zwei Punkten falsch
   liegen. Bei voller Inhaltsbreite sind es die fünf des Entwurfs. */
.sgs-karten--fuenf {
	--sgs-luecke: clamp(10px, 1.2vw, 15px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sgs-luecke);
	grid-template-columns: none;
}
/* 208px ist die Mindestbreite, ab der eine Karte lesbar bleibt: Symbol,
   Überschrift, zwei Zeilen Text, Verweis. Darüber wächst sie mit, bis
   260px — sonst würde eine einzelne Karte in der letzten Zeile auf volle
   Breite aufgeblasen. Bleibt eine Zeile unvollständig, steht sie mittig
   unter den anderen, nicht links in der Ecke. */
.sgs-karten--fuenf > * {
	flex: 1 1 208px;
	max-width: 260px;
	min-width: 0;
}

/* In den zweispaltigen Abschnitten sind die großen Überschriftengrößen
   zu wuchtig — der Text steht dort in einer schmalen Spalte. */
.sgs-dreiklang h2 { font-size: clamp(26px, 2.6vw, 34px); }
.sgs-dreiklang h3 { font-size: clamp(20px, 2vw, 24px); margin-top: 0; }

/* Yogatherapie-Abschnitt nach Entwurf: Bild sitzt randlos am linken Rand
   und füllt die volle Höhe des Bandes. Überschrift auf einer Zeile. */
.sgs-abschnitt--therapie {
	background: var(--sgs-creme-gruen);
	padding: 0;
}
/* Das Band läuft bis an den Bildschirmrand — sonst klebt das Bild nicht links. */
.sgs-abschnitt--therapie .sgs-innen {
	max-width: none;
	padding-inline: 0;
}
.sgs-abschnitt--therapie .sgs-dreiklang {
	max-width: none;
	padding-inline: 0;
	padding-right: clamp(24px, 5vw, 90px);
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr) minmax(0, .92fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.sgs-dreiklang__bild--quer {
	margin: 0;
	align-self: stretch;
	height: 100%;
	/* Im Entwurf ist das Band flach — rund 210 px bei 1280 Bildschirmbreite.
	   Ganz so flach geht es mit unserem Text nicht, aber deutlich flacher. */
	min-height: 300px;
}
.sgs-dreiklang__bild--quer img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center 22%;   /* sonst wird der Kopf angeschnitten */
	border-radius: 0;
	display: block;
}
.sgs-abschnitt--therapie .sgs-dreiklang > *:not(.sgs-dreiklang__bild--quer) {
	padding-block: clamp(24px, 3vw, 40px);
}
.sgs-abschnitt--therapie h2 { text-wrap: balance; margin-bottom: 10px; }
.sgs-dreiklang__knopf { margin-top: 20px; }

@media (max-width: 900px) {
	.sgs-abschnitt--therapie .sgs-dreiklang { grid-template-columns: 1fr; }
	.sgs-dreiklang__bild--quer { min-height: 260px; }
	.sgs-abschnitt--therapie .sgs-dreiklang > *:not(.sgs-dreiklang__bild--quer) {
		padding-inline: var(--sgs-rand);
	}
}

/* ------------------------------------------------------------------
   Lehrerin und Ausbildungen — Aufbau wie im Entwurf
   Drei Spalten: links Vorstellung, in der Mitte das Porträt, rechts die
   Ausbildungen als durchlaufende Zeilen. Keine Trennstriche, keine
   fetten Titel, kein Wegklappen — die Vorlage zeigt eine ruhige Liste.
   ------------------------------------------------------------------ */
.sgs-lehrerin {
	display: grid;
	grid-template-columns: 1.2fr .75fr 1.2fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.sgs-lehrerin__titel {
	font-size: clamp(21px, 1.95vw, 26px);
	margin: 0 0 20px;
	text-align: left;
	text-wrap: balance;
}
.sgs-lehrerin__vorstellung p { font-size: 15px; }
.sgs-lehrerin__knopf { margin: 26px 0 0; }
.sgs-lehrerin__bild { margin: 0; }
.sgs-lehrerin__bild img {
	width: 100%;
	aspect-ratio: 1 / 1.1;
	object-fit: cover;
	border-radius: var(--sgs-radius);
	display: block;
}
.sgs-lehrerin__ausbildung h3 {
	margin: 0 0 16px;
	font-size: clamp(19px, 1.8vw, 23px);
}

ul.sgs-ausbildungen { list-style: none; margin: 0; padding: 0; }
ul.sgs-ausbildungen > li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sgs-grau);
}
ul.sgs-ausbildungen > li:last-child { margin-bottom: 0; }
/* Haken im Kreis, wie im Entwurf — der Ring kommt aus dem Rahmen des SVG. */
ul.sgs-ausbildungen > li > .sgs-symbol {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	padding: 3px;
	margin-top: 3px;
	border: 1px solid var(--sgs-salbei);
	border-radius: 50%;
	color: var(--sgs-salbei);
}

@media (max-width: 900px) {
	.sgs-lehrerin { grid-template-columns: 1fr 1fr; }
	.sgs-lehrerin__ausbildung { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
	.sgs-lehrerin { grid-template-columns: 1fr; }
	.sgs-lehrerin__bild img { aspect-ratio: 4 / 3; }
}


/* ==================================================================
   Startseite — Varianten für Mockups/Startseite.png
   ================================================================== */

/* Kurzer Strich unter der Überschrift, wie im Entwurf ------------- */
/* 18px Luft nach oben, 26px nach unten. Die 26 standen bisher nur im
   Über-mich-Block als „.sgs-strich + p"; im Kopfbereich und beim
   Lehrerin-Block fehlten sie ganz, der Text klebte am Strich (gemessen
   0 px). Jetzt gilt derselbe Abstand überall. */
.sgs-strich {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--sgs-salbei);
	margin: 18px 0 26px;
}
/* Ausnahme: wo der Strich das letzte Element eines Kopfbereichs ist,
   trägt der Kopf selbst den Abstand zum Inhalt darunter — sonst zählt er
   doppelt. Betrifft die Abschnittsköpfe und den Kopf der Rechtsseiten. */
.sgs-abschnitt__kopf .sgs-strich,
.sgs-rechtseite__kopf .sgs-strich {
	margin-bottom: 0;
}
.sgs-abschnitt__kopf .sgs-strich { margin-inline: auto; }

/* Kleines Auge über der Überschrift („ÜBER MICH") ----------------- */
.sgs-auge {
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sgs-salbei-dunkel);
	margin: 0 0 12px;
}

/* Angebotskarte: alles mittig, Symbol im Kreis darüber ------------ */
.sgs-karte--mitte {
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 32px 22px 28px;
}
.sgs-karte--mitte h3 { font-size: 20px; }
.sgs-karte--mitte p { font-size: 15px; }
.sgs-karte--mitte .sgs-karte__link { align-self: center; }

/* Über mich: Bild bis an den linken Rand, Text rechts -------------
   Auch dieser Block läuft von Fensterkante zu Fensterkante und muss
   trotzdem auf der Inhaltskante enden. Vorher teilte er die Fläche
   halbe/halbe und verließ sich darauf, dass eine Maximalbreite von
   --sgs-breite/2 dort landet. Das ging nicht auf: der geerbte Abstand
   zwischen den Spalten (bis 64px) verschiebt die Spaltenkante, und der
   Text endete 32px hinter der Linie. Jetzt sagt das Raster, wo die Kante
   ist, statt sie auszurechnen. */
.sgs-uebermich--breit {
	display: grid;
	grid-template-columns: var(--sgs-vollraster);
	gap: 0;
	align-items: center;
	background: var(--sgs-weiss);
}
.sgs-uebermich--breit .sgs-uebermich__bild { grid-column: voll-start / mitte; }
.sgs-uebermich--breit .sgs-uebermich__text {
	grid-column: mitte / inhalt-ende;
	max-width: none;
	margin: 0;
	/* Außen kein Polster — dort ist die Rasterlinie. Innen Luft zum Bild. */
	padding: clamp(28px, 3.6vw, 52px) 0 clamp(28px, 3.6vw, 52px) clamp(24px, 4vw, 64px);
}
.sgs-uebermich--breit .sgs-uebermich__bild {
	margin: 0;
	aspect-ratio: auto;
	min-height: 380px;
	border-radius: 0;
	overflow: hidden;
	background: var(--sgs-sand);
}
.sgs-uebermich--breit .sgs-uebermich__bild img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* Bild rechts statt links (Was ist Microkinesi?). */
/* Diese Fassung stand bis 10.09. rund 500 Zeilen weiter unten und damit
   HINTER dem Telefon-Block. Sie hat dessen padding-inline überschrieben,
   der Text klebte auf Microkinesi links am Bildschirmrand. Sie gehört
   neben ihre Grundfassung — nicht ans Ende der Datei. */
/* Gespiegelte Fassung: Text links, Bild rechts.
   Die Spiegelung drehte bisher nur die Reihenfolge um (order), nicht die
   Ausrichtung — der Textkasten hing weiter am linken Rand seiner Spalte und
   wanderte mit wachsendem Fenster von der Rasterlinie weg, bei 1856 px um
   288 px. Jetzt werden beide Fassungen über dieselben Spuren gesetzt, nur
   gedreht; order wird dafür nicht mehr gebraucht. */
.sgs-uebermich--umgekehrt .sgs-uebermich__bild { grid-column: mitte / voll-ende; }
.sgs-uebermich--umgekehrt .sgs-uebermich__text {
	grid-column: inhalt-start / mitte;
	padding: clamp(28px, 3.6vw, 52px) clamp(24px, 4vw, 64px) clamp(28px, 3.6vw, 52px) 0;
}

/* Die Rechnung dockt den Text an die Inhaltskante an: halbe Inhaltsbreite,
   am inneren Rand der eigenen Spalte ausgerichtet, außen --sgs-rand als
   Polster. Damit endet die Textkante rechts exakt dort, wo auch .sgs-innen
   endet — bei jeder Fensterbreite, gemessen ±0,0 px. */
.sgs-uebermich__text {
	max-width: calc(var(--sgs-breite) / 2);
	margin-right: auto;
	padding: clamp(28px, 3.6vw, 52px) var(--sgs-rand) clamp(28px, 3.6vw, 52px) clamp(24px, 4vw, 64px);
}
.sgs-uebermich__text h2 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); }
.sgs-uebermich__text > p { margin: 0; }
.sgs-uebermich__text > p + p { margin-top: 16px; }
/* Knopfzeilen: dieselbe Rechnung wie im Kopfbereich (.sgs-hero__knoepfe).
   Vorher waren das schlichte Absaetze mit inline-block-Knoepfen darin —
   der Abstand war das Leerzeichen zwischen den Tags im Quelltext.
   Gemessen am 10.09. auf der Paarberatung: 4 px auf Tablet, und ab
   1280 px brachen die beiden Knoepfe auf zwei Zeilen um, mit einem
   Abstand aus der Zeilenhoehe. Das sah nach Fehler aus, weil es einer
   war. Flex mit gap macht den Abstand zu einer Entscheidung. */
.sgs-uebermich__knopf,
.sgs-lehrerin__knopf,
.sgs-dreiklang__knopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.sgs-uebermich__knopf { margin-top: 30px !important; }

@media (max-width: 900px) {
	.sgs-uebermich--breit { grid-template-columns: 1fr; }
	/* Gestapelt gibt es keine Spuren mehr, auf die man setzen könnte —
	   sonst suchte der Browser Linien, die es hier nicht gibt. */
	.sgs-uebermich--breit .sgs-uebermich__bild,
	.sgs-uebermich--breit .sgs-uebermich__text,
	.sgs-uebermich--umgekehrt .sgs-uebermich__bild,
	.sgs-uebermich--umgekehrt .sgs-uebermich__text { grid-column: auto; }
	/* max-width kommt aus Baustein 11 und schnitte das Bild sonst auf 340px. */
	.sgs-uebermich--breit .sgs-uebermich__bild {
		max-width: none;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	/* Gestapelt braucht der Text auf beiden Seiten dasselbe Polster.
	   Die Klassenketten müssen mit, sonst gewinnt oben das
	   „padding-right: 0" aus der Vollbreiten-Fassung (0,2,0 schlägt
	   0,1,0) und der Text läuft rechts bis an den Bildschirmrand,
	   während der Knopf darunter schon bei --sgs-rand endet.
	   --sgs-rand ist dieselbe Kante wie überall sonst auf der Seite. */
	.sgs-uebermich--breit .sgs-uebermich__text,
	.sgs-uebermich--umgekehrt .sgs-uebermich__text,
	.sgs-uebermich__text {
		max-width: none;
		padding-inline: var(--sgs-rand);
	}
}

/* Vier Merkmale auf einer cremefarbenen Tafel, Symbol über dem Text */
.sgs-merkmale--tafel {
	background: var(--sgs-creme);
	border-radius: var(--sgs-radius);
	padding: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0;
}
.sgs-merkmal--mitte {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding-inline: clamp(14px, 2vw, 26px);
}
.sgs-merkmale--tafel > * + * { border-left: 1px solid var(--sgs-sand); }
.sgs-merkmal--mitte .sgs-merkmal__symbol {
	font-size: 44px;
	color: var(--sgs-salbei);
}
.sgs-merkmal--mitte .sgs-merkmal__titel {
	font-family: var(--sgs-schrift-ueberschrift);
	font-weight: 400;
	font-size: 19px;
	margin-bottom: 8px;
}
@media (max-width: 900px) {
	.sgs-merkmale--tafel { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.sgs-merkmale--tafel > *:nth-child(odd) { border-left: 0; }
}
@media (max-width: 620px) {
	.sgs-merkmale--tafel { grid-template-columns: 1fr; }
	.sgs-merkmale--tafel > * + * { border-left: 0; }
}

/* Die Startseiten-Überschrift steht im Entwurf in einer Zeile. */
.sgs-hero--breit .sgs-hero__text h1 {
	font-size: clamp(34px, 4vw, 54px);
	line-height: 1.12;
}

/* ==================================================================
   Kontaktformular (eigenes, ohne Elementor Pro)
   ================================================================== */
.sgs-formular { max-width: 640px; }
.sgs-formular__feld { margin: 0 0 18px; }
.sgs-formular__feld label,
.sgs-formular__zustimmung label {
	display: block;
	font-size: 14px;
	color: var(--sgs-anthrazit);
	margin-bottom: 6px;
}
.sgs-formular input[type="text"],
.sgs-formular input[type="email"],
.sgs-formular input[type="tel"],
.sgs-formular select,
.sgs-formular textarea {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--sgs-anthrazit);
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: 8px;
	padding: 12px 14px;
}
.sgs-formular textarea { resize: vertical; }
.sgs-formular :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--sgs-salbei-dunkel);
	outline-offset: 1px;
	border-color: var(--sgs-salbei-dunkel);
}
.sgs-formular p.sgs-formular__feld { margin: 0 0 18px; }
/* Elementors globale Linkfarbe macht den Datenschutzlink sonst fast unsichtbar. */
.sgs-formular a { color: var(--sgs-salbei-dunkel); text-underline-offset: 3px; }
.sgs-formular a:hover { color: var(--sgs-anthrazit); }
.sgs-formular__zustimmung {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 14px;
}
.sgs-formular__zustimmung input { margin-top: 3px; flex: 0 0 auto; }
.sgs-formular__zustimmung label { margin: 0; }
.sgs-formular p.sgs-formular__zustimmung { margin: 0 0 12px; }
.sgs-formular p.sgs-formular__pflicht { font-size: 13px; color: var(--sgs-grau); margin: 0 0 24px; }

/* Honigtopf — unsichtbar, aber nicht display:none: manche Roboter füllen
   nur Felder aus, die im Seitenbaum stehen. */
.sgs-formular__topf {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.sgs-formular__meldung {
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 22px;
	font-size: 15px;
}
.sgs-formular__meldung--gut    { background: var(--sgs-gelb);    color: var(--sgs-anthrazit); }
.sgs-formular__meldung--fehler { background: var(--sgs-apricot); color: var(--sgs-anthrazit); }

.sgs-formular button.sgs-knopf--primaer {
	background: var(--sgs-gelb);
	color: var(--sgs-anthrazit);
	border: 1px solid transparent;
	cursor: pointer;
}
.sgs-formular button.sgs-knopf--primaer:hover { background: var(--sgs-gelb-dunkel); }

/* ==================================================================
   Blog — eigene Vorlagen statt Elementor-Pro-Theme-Builder
   ================================================================== */
.sgs-beitrag__bild { display: block; }
.sgs-beitrag__bild img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
.sgs-beitrag__leer {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--sgs-hellgrau);
}
.sgs-beitrag__datum {
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sgs-salbei-dunkel);
	margin: 0;
}
.sgs-beitrag__titel { font-size: 21px; margin: 0; line-height: 1.3; }
.sgs-beitrag__titel a { color: var(--sgs-anthrazit); text-decoration: none; }
.sgs-beitrag__titel a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sgs-blaettern { margin-top: clamp(30px, 4vw, 48px); }
.sgs-blaettern ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.sgs-blaettern :is(a, span) {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--sgs-sand);
	border-radius: 8px;
	text-decoration: none;
	color: var(--sgs-anthrazit);
	font-size: 15px;
}
.sgs-blaettern .current { background: var(--sgs-gelb); border-color: var(--sgs-gelb); }

/* Einzelner Beitrag ---------------------------------------------- */
.sgs-beitrag__kopf { padding-block: clamp(36px, 5vw, 64px); }
.sgs-beitrag__kopf h1 { margin: 0; max-width: 22ch; }
.sgs-beitrag__kopf .sgs-auge a { color: inherit; }
.sgs-beitrag__aufmacher { margin: 0; }
.sgs-beitrag__aufmacher img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	display: block;
}
/* Fließtext auf lesbare Zeilenlänge begrenzen — rund 70 Zeichen. */
.sgs-beitrag__text { max-width: 70ch; color: var(--sgs-grau); }
.sgs-beitrag__text > * + * { margin-top: 20px; }
.sgs-beitrag__text :is(h2, h3) { margin-top: 40px; }
.sgs-beitrag__text img { max-width: 100%; height: auto; border-radius: var(--sgs-radius); }

.sgs-beitrag__schlagworte {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 0;
}
.sgs-beitrag__schlagworte a {
	border: 1px solid var(--sgs-sand);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 13px;
	text-decoration: none;
	color: var(--sgs-grau);
}
.sgs-beitrag__nachbarn {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--sgs-sand);
	font-size: 15px;
}
.sgs-beitrag__nachbarn .sgs-beitrag__zurueck { margin-left: auto; text-align: right; }

/* Stimmen auf der Startseite ------------------------------------
   Drei sind sichtbar, der Rest steckt hinter einer Aufklappzeile.
   Kein waagerechtes Scrollen mehr: bei sieben langen Texten fand man
   nicht, was hinten liegt — und auf dem Telefon schon gar nicht.
   ---------------------------------------------------------------- */
.sgs-stimmen {
	--sgs-luecke: clamp(18px, 2.5vw, 26px);
	--sgs-spalten: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;   /* unvollständige letzte Reihe steht mittig */
	gap: var(--sgs-luecke);
	overflow: visible;
}
/* figure bekommt vom Eltern-Theme eine eigene Breite und füllt seine
   Rasterspalte sonst nicht aus. */
.sgs-stimmen > figure.sgs-stimme {
	flex: 0 1 calc((100% - (var(--sgs-spalten) - 1) * var(--sgs-luecke)) / var(--sgs-spalten));
	min-width: 0;
	max-width: none;
	box-sizing: border-box;
	margin: 0;
}
@media (max-width: 900px) { .sgs-stimmen { --sgs-spalten: 2; } }
@media (max-width: 620px) { .sgs-stimmen { --sgs-spalten: 1; } }
.sgs-abschnitt--creme .sgs-stimme { background: var(--sgs-weiss); }
.sgs-stimme blockquote { font-size: 17px; }
.sgs-stimme blockquote::before {
	content: "„";
	display: block;
	font-size: 40px;
	line-height: .6;
	color: var(--sgs-salbei);
	margin-bottom: 8px;
}
.sgs-stimme__hinweis {
	display: block;
	font-size: 12px;
	color: var(--sgs-salbei-dunkel);
	margin-top: 2px;
}

details.sgs-stimmen__mehr { margin-top: clamp(18px, 2.5vw, 26px); }
details.sgs-stimmen__mehr > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-inline: auto;
	width: fit-content;
	padding: 12px 26px;
	border: 1px solid var(--sgs-anthrazit);
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sgs-anthrazit);
	background: transparent;
}
details.sgs-stimmen__mehr > summary::-webkit-details-marker { display: none; }
details.sgs-stimmen__mehr > summary::after { content: "▾"; font-size: 11px; }
details.sgs-stimmen__mehr[open] > summary::after { content: "▴"; }
details.sgs-stimmen__mehr > summary:hover { background: var(--sgs-weiss); }
/* Die Zeile steht mittig — dafür muss der Rahmen von details mitziehen.
   Reihenfolge bleibt natürlich: erst der Schalter, darunter das Aufgeklappte.
   Sonst springt der Schalter beim Klicken nach unten weg. */
details.sgs-stimmen__mehr { display: flex; flex-direction: column; }
details.sgs-stimmen__mehr > .sgs-stimmen { margin-top: clamp(18px, 2.5vw, 26px); }
.sgs-stimmen__zu { display: none; }
details.sgs-stimmen__mehr[open] .sgs-stimmen__auf { display: none; }
details.sgs-stimmen__mehr[open] .sgs-stimmen__zu  { display: inline; }

.sgs-stimmen__quelle {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--sgs-grau);
	text-align: center;
}

/* Preistabellen: Überschriften und der Kassenhinweis stehen im Entwurf
   im Grünton, nicht in Anthrazit. */
.sgs-preis h3,
.sgs-preisliste h3 { color: var(--sgs-salbei-dunkel); }
.sgs-preis__hinweis { color: var(--sgs-salbei-dunkel); margin-top: 20px; }

/* Preise: die Tabellen stehen im Entwurf deutlich schmaler als der
   Textbereich — erst dadurch ist links und rechts Platz für die Grafiken.
   Am Entwurf gemessen: Block rund 980 px breit bei 1280 Bildschirmbreite,
   linke Grafik 15–141, rechte ab 1126 bis zum Rand. */
.sgs-preise-bereich .sgs-preislisten,
.sgs-preise-bereich .sgs-preis__hinweis {
	max-width: 980px;
	margin-inline: auto;
}

/* Die Schmuckgrafiken links und rechts (Zweig und Kerzen) sind auf Wunsch
   von Raphaela raus. Die Bilddateien liegen weiter unter assets/grafiken/,
   falls sie zurücksollen. */

/* --- Beschwerdebilder (Naturheilkunde) -----------------------------
   Zwei Spalten, Symbol links, Überschrift und Aufzählung rechts.
   Der letzte Kasten läuft über die volle Breite, so steht es im Entwurf. */
.sgs-beschwerden {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.sgs-beschwerde {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: start;
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 20px 22px;
}
/* Auf dem Telefon steht das Symbol über der Zeile statt daneben.
   Nebeneinander bleiben dem Text bei 360px nur 194px — „Stoffwechsel-
   erkrankungen" braucht 205px und bräche mitten im Wort. Übereinander
   sind es 268px, und das längste Wort der Seite passt. */
@media (max-width: 620px) {
	.sgs-beschwerde { grid-template-columns: 1fr; gap: 10px; }
}
.sgs-beschwerde h3 {
	font-family: var(--sgs-schrift-text);
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	margin: 0 0 6px;
}
.sgs-beschwerde p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sgs-grau);
}
.sgs-beschwerde--breit { grid-column: 1 / -1; }

/* Grenze bei 700 statt 860: Seit die Elternvorlage den Inhalt nicht mehr
   auf 600 px staucht, stehen auf einem hochkant gehaltenen Tablet knapp
   790 px zur Verfuegung — zwei Spalten zu je 386 px, wie im Entwurf. */
@media (max-width: 620px) {
	.sgs-beschwerden { grid-template-columns: 1fr; }
}

/* Merkmalsreihe ohne Beschreibungstext — nur Symbol und Zeile. */
.sgs-merkmale--knapp .sgs-merkmal { align-items: center; }
.sgs-merkmale--knapp .sgs-merkmal__titel { margin: 0; }
/* Auf dem Tablet passen rechnerisch drei Spalten — bei vier Merkmalen
   steht das vierte dann allein in der zweiten Zeile. Zwei mal zwei
   sieht aufgeraeumt aus und liest sich genauso schnell. */
@media (min-width: 621px) and (max-width: 900px) {
	.sgs-merkmale--knapp,
	.sgs-merkmale--tafel { grid-template-columns: repeat(2, 1fr); }
}

/* Vier Karten je Zeile (Therapien der Naturheilkunde). */
.sgs-karten--vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sgs-karten--vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .sgs-karten--vier { grid-template-columns: 1fr; } }

/* Abschlussfeld im Kartenraster: kein Bild, Text und Knopf mittig. */
.sgs-karte--abschluss {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	background: var(--sgs-creme);
}
.sgs-karte--abschluss p { margin: 0; }

.sgs-lehrerin__mehr { margin-top: 16px; }

/* Bildkarten der Naturheilkunde: Text mittig wie im Entwurf, ohne die
   Kartenpolsterung von --mitte, die das Bild zusammenschrumpfen würde. */
.sgs-karte--bild .sgs-karte__inhalt {
	align-items: center;
	text-align: center;
}
.sgs-karte--bild .sgs-karte__inhalt h3 { font-size: 20px; }
.sgs-karte--bild .sgs-karte__inhalt p  { font-size: 15px; }
/* Nachtrag 18.09.2026: Der Verweis blieb links stehen, während Bild,
   Überschrift und Text mittig standen. Grund ist `align-self: flex-start`
   in der Grundregel von .sgs-karte__link — die wiegt schwerer als das
   `align-items: center` des Halters. Hier also ausdrücklich zurückholen. */
.sgs-karte--bild .sgs-karte__inhalt .sgs-karte__link { align-self: center; }

/* Der Verweis unter den Qualifikationen soll eine Zeile bleiben und
   nicht über die ganze Spalte gezogen werden. */
.sgs-lehrerin__mehr .sgs-karte__link { display: inline-flex; align-self: start; }

/* --- Ablauf als Reihe (Paarberatung) ------------------------------
   Der Entwurf zeigt die fünf Schritte nebeneinander: Symbol oben,
   Zahl darunter, dann Titel und Text. Die senkrechte Fassung bleibt
   unverändert erhalten. */
.sgs-ablauf--reihe {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(14px, 2vw, 26px);
	counter-reset: none;
}
.sgs-ablauf--reihe > li {
	counter-increment: none;
	padding: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.sgs-ablauf--reihe > li::before,
.sgs-ablauf--reihe > li::after { content: none; }
.sgs-ablauf__zahl {
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--sgs-salbei-dunkel);
	color: var(--sgs-weiss);
	font-size: 13px;
	margin-top: -19px;
}
.sgs-ablauf--reihe h3 {
	font-family: var(--sgs-schrift-text);
	font-size: 16px;
	font-weight: 700;
	margin: 8px 0 0;
}
.sgs-ablauf--reihe p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sgs-grau);
}
@media (max-width: 900px) { .sgs-ablauf--reihe { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sgs-ablauf--reihe { grid-template-columns: 1fr; } }

/* Kopfzeile einer Checkliste: Symbol neben der Überschrift. */
.sgs-checkliste__kopf {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.sgs-checkliste__kopf h3 { margin: 0; }
.sgs-checkliste--flach { background: transparent; border: 0; padding: 0; margin-top: 8px; }

/* Merkmale im Kopfbereich der Paarberatung: zwei mal zwei, kompakt. */
.sgs-merkmale--paar {
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 24px;
	margin: 22px 0 26px;
}
.sgs-merkmale--paar .sgs-merkmal { align-items: center; gap: 12px; }
.sgs-merkmale--paar .sgs-symbolkreis { width: 42px; height: 42px; font-size: 22px; }
.sgs-merkmale--paar .sgs-merkmal__titel { font-size: 15px; margin: 0 0 2px; }
.sgs-merkmale--paar p { font-size: 13px; margin: 0; color: var(--sgs-grau); }
/* Auf dem Telefon bleiben je Spalte rund 140 px — darin bricht „Neue
   Perspektiven gewinnen“ auf drei Zeilen mit je einem Wort. Untereinander
   liest sich dasselbe in einer Zeile. Betrifft Paarberatung, Microkinesi
   und Schwimmunterricht, die denselben Baustein verwenden. */
@media (max-width: 620px) {
	.sgs-merkmale--paar { grid-template-columns: 1fr; gap: 14px; }
}

/* Zwei Spalten: Bild links, Text rechts (Ihre Paarberaterin). */
.sgs-lehrerin--zwei { grid-template-columns: minmax(0,.9fr) minmax(0,1.4fr); }
@media (max-width: 900px) { .sgs-lehrerin--zwei { grid-template-columns: 1fr; } }

/* --- Microkinesi ---------------------------------------------------
   Merkmal mit leichter Vorzeile über der betonten Zeile. */
.sgs-merkmal__leicht { margin: 0; font-size: 13px; color: var(--sgs-grau); }
.sgs-merkmale--paar .sgs-merkmal__leicht + .sgs-merkmal__titel { margin: 0; }

/* Aufklappzeilen zweispaltig, mit rundem Bild statt Symbol. */
.sgs-klapper--zwei {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	align-content: start;
}
@media (max-width: 900px) { .sgs-klapper--zwei { grid-template-columns: 1fr; } }

.sgs-klapp--bild > summary { font-size: 17px; align-items: center; }
.sgs-klapp__bild {
	flex: 0 0 auto;
	width: 52px; height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sgs-sand);
}
.sgs-klapp__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgs-klapp--bild .sgs-klapp__titel { flex: 1 1 auto; line-height: 1.35; }

/* Häkchenliste in zwei Spalten. */
.sgs-hakenliste--zwei {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 24px;
}
@media (max-width: 620px) { .sgs-hakenliste--zwei { grid-template-columns: 1fr; } }

/* Namensschild über dem Bild, wie im Entwurf unten rechts. */
.sgs-lehrerin__bild--schild { position: relative; }
.sgs-namensschild {
	position: absolute;
	right: 16px; bottom: 16px;
	max-width: 62%;
	background: var(--sgs-creme);
	border-radius: var(--sgs-radius);
	padding: 14px 18px;
	text-align: center;
	box-shadow: 0 6px 20px rgb(0 0 0 / .08);
}
.sgs-namensschild strong {
	display: block;
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: 18px;
	margin-bottom: 4px;
}
.sgs-namensschild span { font-size: 12px; line-height: 1.5; color: var(--sgs-grau); }
/* Bei umgekehrter Anordnung soll das Bild die Höhe des Textes mitgehen. */
.sgs-uebermich--umgekehrt { align-items: stretch; }
.sgs-uebermich--umgekehrt .sgs-uebermich__bild { min-height: 100%; }

/* Fünf Merkmale nebeneinander, mit Trennlinien (Schwimmunterricht). */
.sgs-merkmale--fuenf {
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
}
.sgs-merkmale--fuenf > * + * { border-left: 1px solid var(--sgs-sand); }
.sgs-merkmale--fuenf .sgs-merkmal { padding-inline: clamp(10px, 1.6vw, 22px); }
@media (max-width: 900px) {
	.sgs-merkmale--fuenf { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.sgs-merkmale--fuenf > * + * { border-left: 0; }
}
@media (max-width: 620px) { .sgs-merkmale--fuenf { grid-template-columns: 1fr; } }

/* --- Rechtstexte (Impressum, Datenschutz, AGB) ---------------------
   Eine Lesespalte. Die Texte selbst bleiben unverändert, sie bekommen
   nur die Schriften und Abstände der übrigen Seite. Die Überschrift des
   Inhalts wiederholt oft den Seitentitel — deshalb wird das erste h2
   ausgeblendet. */
.sgs-rechtstext {
	max-width: 46rem;
	margin-inline: auto;
	/* In Rechtstexten stehen lange Behoerdenadressen wie
	   bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html —
	   ohne Umbruchstelle schiebt so eine Zeile auf dem Telefon die ganze
	   Seite zur Seite. Der Text bleibt woertlich, nur umbrechen darf er. */
	overflow-wrap: anywhere;
}
.sgs-rechtstext > h1 { margin-bottom: 8px; }
.sgs-rechtstext > .sgs-strich { margin-bottom: 28px; }
.sgs-rechtstext > h2:first-of-type { display: none; }
.sgs-rechtstext h2 {
	font-size: 26px;
	margin: 38px 0 10px;
}
.sgs-rechtstext h3 {
	font-family: var(--sgs-schrift-text);
	font-size: 17px;
	font-weight: 700;
	margin: 26px 0 8px;
}
.sgs-rechtstext p,
.sgs-rechtstext li {
	font-size: 15px;
	line-height: 1.75;
}
.sgs-rechtstext p { margin: 0 0 12px; }
.sgs-rechtstext ul, .sgs-rechtstext ol { margin: 0 0 16px 22px; }
.sgs-rechtstext a { color: var(--sgs-salbei-dunkel); }
.sgs-rechtstext strong { font-weight: 700; }
/* Reste aus dem Seitenbaukasten unschädlich machen. */
.sgs-rechtstext [class*="elementor"] { all: unset; display: block; }

/* ------------------------------------------------------------------
   21 · Rechtsseiten: Impressum, Datenschutz, AGB
   Lange, dichte Texte. Alles hier dient einem Zweck — dass man findet,
   was man sucht, ohne alles zu lesen.
   ------------------------------------------------------------------ */

.sgs-rechtseite__kopf { margin-bottom: clamp(24px, 3vw, 38px); }
.sgs-rechtseite__kopf h1 { margin: 0 0 6px; }
/* Der volle Name des Dokuments, wo er vom Seitentitel abweicht — bei den
   AGB heißt die Seite „AGB", das Dokument aber deutlich länger. */
.sgs-rechtseite__untertitel {
	margin: 0 0 10px;
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: clamp(17px, 1.8vw, 21px);
	color: var(--sgs-salbei-dunkel);
}


.sgs-rechtstext__text {
	max-width: 68ch;
	overflow-wrap: anywhere;
}
.sgs-rechtstext__text p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--sgs-anthrazit);
	margin: 0 0 16px;
	/* Silbentrennung hier nicht mehr pauschal — siehe style.css,
	   Abschnitt „Lange Wörter". Die Regel dort gilt jetzt auch für die
	   Rechtstexte: getrennt wird nur auf Telefonbreite. */
}
.sgs-rechtstext__text a { color: var(--sgs-salbei-dunkel); }
/* Anschriften und Aufzählungszeilen: enger gesetzt, damit sie als ein
   Block gelesen werden und nicht als lauter einzelne Absätze. */
.sgs-rechtstext__text p.sgs-recht__zeile { margin-bottom: 2px; }
.sgs-rechtstext__text p.sgs-recht__zeile + p:not(.sgs-recht__zeile) { margin-top: 16px; }

/* Hauptabschnitt: aufgeklappt, aber zuklappbar. */
.sgs-recht__abschnitt {
	border-top: 1px solid var(--sgs-sand);
	padding: 6px 0 10px;
}
.sgs-recht__abschnitt:first-of-type { border-top: 0; }
.sgs-recht__abschnitt > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 0 6px;
}
.sgs-recht__abschnitt > summary::-webkit-details-marker { display: none; }
.sgs-recht__abschnitt > summary h2 {
	font-size: clamp(21px, 2.2vw, 26px);
	margin: 0;
	flex: 1 1 auto;
}
.sgs-recht__abschnitt > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px; height: 9px;
	border-right: 2px solid var(--sgs-salbei-dunkel);
	border-bottom: 2px solid var(--sgs-salbei-dunkel);
	transform: rotate(45deg) translateY(-3px);
	transition: transform .18s ease;
}
.sgs-recht__abschnitt[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.sgs-recht__abschnitt > summary:hover h2 { color: var(--sgs-salbei-dunkel); }
.sgs-recht__inhalt { padding-bottom: 8px; }

/* Unterüberschriften: zwei Stufen, deutlich unterschieden — die eine
   trägt die Sachthemen, die andere die Fragen darin. */
.sgs-recht__h3 {
	font-family: var(--sgs-schrift-text);
	font-size: 17px;
	font-weight: 700;
	color: var(--sgs-anthrazit);
	margin: 26px 0 8px;
}
.sgs-recht__h4 {
	font-family: var(--sgs-schrift-text);
	font-size: 15px;
	font-weight: 700;
	color: var(--sgs-salbei-dunkel);
	margin: 20px 0 6px;
}
.sgs-recht__liste {
	margin: 0 0 16px 20px;
	padding: 0;
}
.sgs-recht__liste li {
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.sgs-recht__abschnitt > summary::after { transition: none; }
}

/* ------------------------------------------------------------------
   22 · Über mich
   Für diese Seite gibt es keinen Entwurf. Der Aufbau benutzt nur
   vorhandene Bausteine; neu sind hier die Ausbildungsliste und der
   Platzhalter für Texte, die noch von Raphaela kommen.
   ------------------------------------------------------------------ */

/* Platzhalter: freundlich, aber unverwechselbar unfertig. Niemand soll
   das für fertigen Text halten — auch nicht beim schnellen Durchscrollen. */
.sgs-platzhalter {
	border: 2px dashed var(--sgs-sand);
	border-radius: var(--sgs-radius);
	background: var(--sgs-creme);
	padding: 22px 24px;
	margin: 8px 0 0;
}
.sgs-platzhalter p {
	margin: 0;
	color: var(--sgs-grau);
	font-size: 15px;
	line-height: 1.7;
}
.sgs-platzhalter strong { color: var(--sgs-anthrazit); }

/* Ausbildungen: je Bereich ein Block, darin eine Liste mit Haken. */
.sgs-werdegang {
	display: grid;
	gap: 34px;
	max-width: 52rem;
	margin-inline: auto;
}
.sgs-werdegang__bereich {
	font-family: var(--sgs-schrift-text);
	font-size: 17px;
	font-weight: 700;
	color: var(--sgs-salbei-dunkel);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sgs-sand);
}
.sgs-werdegang__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.sgs-werdegang__liste > li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	line-height: 1.65;
}
.sgs-werdegang__haken {
	display: inline-flex;
	color: var(--sgs-salbei-dunkel);
	margin-top: 3px;
}
.sgs-werdegang__haken .sgs-symbol { width: 18px; height: 18px; }
.sgs-werdegang__liste a { color: var(--sgs-salbei-dunkel); }

/* ==================================================================
   22 · Events-Seite — Notnagel für den alten Elementor-Aufbau
   ==================================================================
   Die Seite „Events, Workshops & Ausbildungen" ist nicht Teil des
   Angebots und wird nicht neu gebaut. Kaputt sein soll sie trotzdem
   nicht. Zwei Dinge sind es:

   1. Die Karte steht ab 768px fest auf 1180px Breite, und für Tablets
      stellt Elementor zwei davon nebeneinander (elementor-grid-tablet-2).
      Ergebnis: ein 2552px breites Dokument in einem 1024px-Fenster.
      Gemessen auch auf dem Server — das kommt nicht von uns.
   2. Die weiße Fläche der Karten war weg. Das kam von uns: beim
      Umstellen der Farben am 02.09. sind sechs Farbkennungen aus dem
      Elementor-Kit verschwunden, und Elementor lässt eine Regel ganz
      fallen, wenn ihre Farbkennung nicht auflösbar ist. Behoben an der
      Wurzel — scripts/kit-altfarben-zurueck.py stellt die Kennungen
      wieder her. Hier steht dazu nichts.

   Alles auf die Events-Seite begrenzt, damit Blog und Kontakt, die
   denselben Aufbau benutzen, unberührt bleiben.
   ================================================================== */
@media (max-width: 1180px) {
	body.page-id-2457 .elementor-2488.e-loop-item > .e-con { --width: 100%; }
	body.page-id-2457 .elementor-loop-container.elementor-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	body.page-id-2457 .elementor-loop-container.elementor-grid > * { min-width: 0; }
}
/* Die kleine Zeile mit Datum, Ort und Preis läuft über die Kit-Farbe
   „primaer". Die war früher ein kräftiges Rot (Kontrast 4,4:1), jetzt
   ist sie Salbei — auf Weiß nur noch 2,1:1 und damit zu blass für eine
   14-px-Zeile. Der Text bekommt das Grau des Fließtexts (7,4:1), die
   Symbole bleiben farbig, eine Stufe dunkler. */
/* Die von Elementor erzeugte Regel wiegt (0,4,0) — die Kette hier ist
   eine Klasse länger, damit sie ohne !important gewinnt. */
body.page-id-2457 .elementor-2488 .elementor-element .elementor-icon-list-item .elementor-icon-list-text {
	color: var(--sgs-grau);
}
body.page-id-2457 .elementor-2488 .elementor-element .elementor-icon-list-item .elementor-icon-list-icon svg {
	fill: var(--sgs-salbei-dunkel);
}


/* ==================================================================
   22b · Die roten Flächen auf Kontakt und Events
   ==================================================================
   Raphaela am 18.09.2026: „Könnte man bei den nicht bearbeiteten
   Seiten den roten Streifen wegmachen?"

   Es ist kein Streifen, sondern ein Hintergrundbild aus ihrem alten
   Design: eine große rote Schräge. Zwei Dateien, zwei Stellen, sonst
   nirgends auf der Website — nachgesehen auf allen 13 Seiten:

     Kontakt (1043)  bg-2.svg   1260 × 1413 px
     Events  (2457)  bg-1.svg   1260 × 1114 px

   Beide Seiten gehören nicht zum Angebot und werden nicht neu gebaut.
   Das Rot ist die Farbe des alten Auftritts und steht neben den neuen
   Seiten wie ein Fremdkörper.

   Warum hier und nicht in ihren Seiten: Es ist eine Regel im Theme,
   also Code — sie wandert mit, ist in einem Schritt zurückzunehmen und
   fasst ihre Inhalte nicht an. Eine Änderung in Elementor wäre eine
   Inhaltsänderung, ginge beim nächsten Datenabzug verloren und müsste
   live von Hand wiederholt werden.

   Die Dateien selbst bleiben liegen. Nichts wird gelöscht.

   Warum hier ausnahmsweise !important steht: Elementors Regel lautet
       .elementor-1043 .elementor-element.elementor-element-877a973
           :not(.elementor-motion-effects-element-type-background)
   und wiegt vier Klassen — das :not() zählt sein Argument mit. Zwei
   Versuche mit längeren Ketten haben verloren; erst eine fünfte Klasse
   hätte gereicht. Eine Kette, die man nur noch nachzählen kann, ist
   schlechter lesbar als ein !important, und sie bricht, sobald
   Elementor seinen Selektor um eine Kleinigkeit ändert.

   Vertretbar ist es, weil die Regel so eng wie möglich zielt: genau
   zwei Elemente auf genau zwei Seiten, und nur die eine Eigenschaft.
   Sie kann mit nichts anderem kollidieren.
   ================================================================== */
body.page-id-1043 .elementor-element-877a973,
body.page-id-2457 .elementor-element-fcc74e7 {
	background-image: none !important;
}

/* ------------------------------------------------------------------
   23 · Telefon: Ausrichtung und Knöpfe
   ------------------------------------------------------------------
   Festgelegt mit Denis am 10.09. Drei Regeln, mehr nicht:

     · Der kurze, plakative Einstieg steht mittig — die große
       Überschrift und die Unterzeile darunter.
     · Alles zum Lesen bleibt linksbündig: Vorspann, Fließtext,
       Adressen, Anleitungen. Mittig gesetzter Langtext zerfasert,
       weil jede Zeile an einer anderen Stelle anfängt.
     · Knöpfe gehen über die volle Breite. So sind sie mit dem Daumen
       sicher zu treffen und erden den Aufbau nach unten.

   Nur bis 620 px. Auf dem Tablet ist genug Platz — dort bleibt alles
   linksbündig und die Knöpfe behalten ihre kompakte Form.
   ------------------------------------------------------------------ */
@media (max-width: 620px) {

	/* Die Augenzeile gehört zur Überschrift, nicht zum Text — sonst
	   steht „ÜBER MICH" links und der Name darunter mittig. */
	.sgs-hero__text .sgs-auge,
	.sgs-hero__text h1,
	.sgs-hero__unterzeile {
		text-align: center;
	}

	/* Der Zierstrich gehört ebenfalls zur Überschrift. Er hat eine feste
	   Breite, also mittig setzen statt ausrichten. */
	.sgs-hero__text .sgs-strich { margin-inline: auto; }

	/* Der Vorspann darunter bleibt links. Er läuft je nach Seite über
	   sechs bis acht Zeilen — das ist Lesetext, kein Einstieg. */
	.sgs-hero__text p:not(.sgs-hero__unterzeile):not(.sgs-auge) {
		text-align: left;
	}

	.sgs-hero__knoepfe {
		/* Untereinander statt nebeneinander: zwei halbe Knöpfe sind auf
		   360 px zu schmal für ihre Beschriftung. */
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.sgs-hero__knoepfe .sgs-knopf,
	.sgs-uebermich__knopf .sgs-knopf,
	.sgs-lehrerin__knopf .sgs-knopf,
	.sgs-dreiklang__knopf .sgs-knopf,
	.sgs-band__text .sgs-knopf {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------
   23 · Elementors Farbregel zurückdrängen      (Nachtrag 18.09.2026)
   ------------------------------------------------------------------
   Live hängt am <body> die Klasse `elementor-kit-12`. Elementor legt
   damit eine eigene Regel auf jeden Verweis der Seite:

       .elementor-kit-12 a { color: var(--e-global-color-primary) }

   Das ist das alte Rot von werk8sam (#D64123). Zwei Klassen wiegen
   mehr als unsere eine, also gewinnt Elementor — und der Knopf
   „Mehr erfahren" auf den Angebotskarten war live rot statt salbei.
   Lokal fiel das nie auf: dort greift Elementor nicht, deshalb stimmte
   die Farbe in jeder Vorschau.

   Gemessen am 18.09. über alle 13 Seiten, jeden Verweis in Kopf,
   Inhalt und Fußbereich, live gegen lokal verglichen: betroffen sind
   genau die drei Klassen unten. Alle übrigen Verweise haben ohnehin
   eine Regel mit mindestens zwei Klassen und bleiben richtig.

   `body[class*="elementor-kit"]` wiegt genauso viel wie Elementors
   Regel, steht aber später in der Kaskade und gewinnt dadurch. Die
   Nummer des Kits steht bewusst nicht drin — sie ändert sich, wenn
   Elementor irgendwann ein neues Kit anlegt.

   Verschwindet von selbst, sobald Elementor abgelöst ist (M2). Diese
   Abteilung ist dann ersatzlos zu löschen.
   ------------------------------------------------------------------ */
body[class*="elementor-kit"] .sgs-karte__link,
body[class*="elementor-kit"] .sgs-plan__anmelden {
	color: var(--sgs-salbei-dunkel);
}
body[class*="elementor-kit"] .sgs-karte__link:hover,
body[class*="elementor-kit"] .sgs-plan__anmelden:hover {
	color: var(--sgs-anthrazit);
}
/* Das Logo ist ein Bild; die Farbe erbt nur der Unterstrich, den es
   nicht hat. Trotzdem gleichziehen, damit kein roter Rahmen entsteht,
   wenn jemand mit der Tastatur dorthin springt. */
body[class*="elementor-kit"] .custom-logo-link {
	color: var(--sgs-salbei-dunkel);
}

/* ------------------------------------------------------------------
   24 · Kontaktseite: Platz für das Kartenbild  (Nachtrag 18.09.2026)
   ------------------------------------------------------------------
   Auf der Kontaktseite steht das Bild des Standorts in einem Elementor-
   Rahmen, der 457 px hoch ist — das Bild selbst ist 577 px hoch und
   hängt oben wie unten je 60 px heraus. Auf der alten Seite fiel das
   nicht auf, weil darunter der Elementor-Fußbereich lag. Unser
   Fußbereich beginnt dichter, deshalb lag das Bild seit dem Livegang
   über „Schnellzugriff" und den Verweisen.

   Gemessen am 18.09. über neun Bildschirmbreiten: die Überlappung ist
   überall genau 60 px. 72 px Abstand lassen also 12 px Luft.

   Bewusst nur der Abstand unseres eigenen Fußbereichs — an der
   Kontaktseite selbst ist nichts geändert. Sie gehört nicht zum
   Angebot, und ihr Aufbau bleibt unangetastet. Rückweg: diese
   Abteilung löschen.
   ------------------------------------------------------------------ */
body.page-id-1043 .sgs-fuss {
	margin-top: 72px;
	/* Gurt und Hosenträger: Der Abstand allein hinge an 12 px Luft. Ein
	   anderer Browser, eine andere Schriftgröße oder ein größeres Bild
	   in der Mediathek — und der Fußbereich läge wieder darunter. Mit
	   eigener Ebene und eigenem Grund liegt er in jedem Fall oben. */
	position: relative;
	z-index: 3;
	background: var(--sgs-creme);
}