/*
Theme Name: Schön gesund sein
Theme URI: https://schoen-gesundsein.de
Description: Child-Theme für die Praxis Raphaela Schön. Setzt das Designsystem
             aus Mockups/Designsystem.png um und ersetzt Kopf- und Fußbereich,
             die bisher an Elementor Pro hingen.
Author: Denis Antonio Iaquinta
Template: hello-elementor
Version: 0.1.0
Text Domain: sgs-child
*/

/* ------------------------------------------------------------------
   Schrift, selbst gehostet.
   Keine Anfrage an Google, keine IP-Übertragung, keine Einwilligung nötig.
   Alice steht unter der SIL Open Font License, siehe assets/schriften/LIZENZ.txt
   ------------------------------------------------------------------ */
@font-face {
	font-family: 'Alice';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/schriften/alice-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Alice';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/schriften/alice-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------
   Designsystem — Farben, Schriften, Maße
   Quelle: Mockups/Designsystem.png. Werte nicht raten, dort nachsehen.
   ------------------------------------------------------------------ */
:root {
	/* Primärfarben — Werte wörtlich aus Mockups/Designsystem.png.
	   Nicht aus den Seitenentwürfen nachmessen: das sind KI-Renderings,
	   deren Farben abweichen. Ihre Original-Logodatei trägt exakt das
	   Gelb von hier, das ist die Gegenprobe. */
	--sgs-gelb:      #F8F2C8;   /* Knöpfe, Logo, Akzente */
	--sgs-salbei:    #A6B59A;   /* Buttons, Icons, Links */
	--sgs-creme:     #FAF7F1;   /* Hintergründe */
	--sgs-weiss:     #FFFFFF;   /* Flächen, Karten */
	--sgs-sand:      #DBC7AF;   /* Trennlinien, dezente Flächen */

	/* Abgeleitete Flächen. Das Designsystem kennt nur ein Gelb und ein
	   Creme; diese Namen zeigen darauf, damit im Stylesheet nichts
	   umbenannt werden muss. */
	--sgs-gelb-band:   var(--sgs-gelb);
	--sgs-creme-hell:  var(--sgs-creme);
	--sgs-creme-gruen: var(--sgs-creme);

	/* Sekundärfarben */
	--sgs-anthrazit: #343434;   /* Text, Überschriften */
	--sgs-grau:      #555555;   /* Fließtext */
	--sgs-hellgrau:  #F2F2F2;
	--sgs-blaugrau:  #BFD0D9;
	--sgs-apricot:   #E6B499;

	/* abgeleitet */
	--sgs-salbei-dunkel: #8A9B7D;  /* Hover auf Salbei */
	--sgs-gelb-dunkel:   #F4EBAC;  /* Hover auf Gelb, aus --sgs-gelb abgeleitet */

	/* Schrift */
	--sgs-schrift-ueberschrift: 'Alice', Georgia, 'Times New Roman', serif;
	--sgs-schrift-text: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Maße */
	--sgs-breite: 1200px;
	--sgs-rand: 24px;
	--sgs-radius: 10px;
	--sgs-kopf-hoehe: 96px;

	/* Vollbreiten-Raster ------------------------------------------------
	   Bausteine, die von Fensterkante zu Fensterkante laufen — Kopfbereiche
	   mit angeschnittenem Bild, geteilte Blöcke —, brauchen trotzdem die
	   Inhaltskante der Seite. Sonst richtet sich jeder an seiner eigenen
	   Spalte aus und wandert mit der Fensterbreite davon.

	   Vier Spuren: außen zwei Ränder, die den Überschuss schlucken,
	   dazwischen die Inhaltsbreite im Verhältnis des Entwurfs geteilt.
	   Wer bei [inhalt-start] beginnt, steht auf derselben Linie wie das
	   Logo, die Kopfleiste und jede Überschrift der Seite.

	   Gerechnet wird mit --sgs-lesebreite, nicht mit --sgs-breite: .sgs-innen
	   ist 1200px breit und polstert davon innen 24px weg. Die Linie, auf der
	   Text steht, liegt also bei 1200 − 2 × 24 = 1152. Wer hier --sgs-breite
	   einsetzt, landet um genau einen --sgs-rand daneben.

	   Keine vw-Einheit: 100vw enthält die Bildlaufleiste, die Rasterbreite
	   nicht. Das wäre ein Versatz von genau ihrer Breite. Prozente in einer
	   Spurenliste beziehen sich auf das Raster selbst — das ist richtig. */
	--sgs-lesebreite: calc(var(--sgs-breite) - 2 * var(--sgs-rand));
	--sgs-vollraster:
		[voll-start] minmax(var(--sgs-rand), 1fr)
		[inhalt-start] minmax(0, calc(var(--sgs-lesebreite) * .54))
		[mitte] minmax(0, calc(var(--sgs-lesebreite) * .46))
		[inhalt-ende] minmax(var(--sgs-rand), 1fr)
		[voll-ende];
}

/* ==================================================================
   Umbruchpunkte — es gibt genau drei Zustände, mehr nicht
   ==================================================================

       Telefon    bis  620px      @media (max-width: 620px)
       Tablet     bis  900px      @media (max-width: 900px)
       Rechner     ab  901px      @media (min-width: 901px)

   Bis zum 09.09. waren es zehn verschiedene Werte (520 · 560 · 620 · 700 ·
   760 · 860 · 900 · 980 · 1000 · 1100), gewachsen statt geplant: jeder
   Baustein hatte den Wert bekommen, bei dem er gerade gebraucht wurde.
   Schaden hat das keinen angerichtet — aber zwischen zwei Punkten
   entstehen Zwischenzustände, an die beim nächsten Eingriff niemand denkt.
   Etwa lief zwischen 861 und 979 px der Inhalt schon einspaltig, während
   die Kopfleiste noch die volle Menüzeile zeigte.

   CSS kann in @media keine Variablen lesen — die drei Werte stehen also
   als Zahl in jeder Regel. Dieser Block ist ihre Quelle: Neue Regeln
   benutzen 620 oder 900, keinen dritten Wert. Wer einen vierten braucht,
   hat meistens ein Rasterproblem und keinen Umbruchpunkt — siehe
   .sgs-karten--fuenf in bausteine.css, das ohne einen einzigen auskommt.

   Ein Wert steht auch in kopf.js (min-width: 901px). Wird hier etwas
   verschoben, muss er mit.
   ================================================================== */

/* ------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------ */
body {
	font-family: var(--sgs-schrift-text);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sgs-grau);
	background: var(--sgs-creme);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sgs-schrift-ueberschrift);
	font-weight: 400;
	color: var(--sgs-anthrazit);
	text-wrap: balance;
}

/* Lange Wörter --------------------------------------------------------
   Deutsche Zusammensetzungen sind der Belastungstest für jede Spalte:
   „Schwimmunterricht" ist auf einem 360-px-Telefon breiter als seine
   Spalte und schob dort den ganzen Kopfbereich über den Rand, ebenso
   „Verdauungstraktes" in den Beschwerdekarten.

   Zwei Regeln, in dieser Reihenfolge:
   hyphens trennt sauber nach den Regeln der Sprache (dafür steht das
   lang-Attribut am <html>). overflow-wrap ist die Notbremse, wenn auch
   das nicht reicht — es bricht das Wort dann ohne Trennstrich.
   Beide zusammen verkleinern auch das rechnerische Mindestmaß einer
   Rasterspalte; ohne sie sprengt ein einziges Wort die Spur. */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, blockquote, figcaption, summary, th, td, .sgs-merkmal__titel {
	overflow-wrap: break-word;
}

/* Nachtrag 18.09.2026 — Silbentrennung nur noch auf dem Telefon.
   Vorher stand `hyphens: auto` auf allen Breiten. Das trennte auch dort,
   wo reichlich Platz ist: „Augs-burg" im Fußbereich, „Behandlungs-plan"
   auf der Naturheilkunde-Seite, „Wohlbefin-den" auf der Startseite —
   auf einem 1440 px breiten Bildschirm sieht das nach Fehler aus, und
   es ist auch einer.

   Gebraucht wird die Trennung nur dort, wo eine Spalte wirklich schmäler
   ist als ein deutsches Bandwurmwort, also auf dem Telefon. Darüber
   reicht `overflow-wrap` als Notbremse: es greift erst, wenn ein Wort
   tatsächlich breiter als seine Spalte ist, und bricht dann ohne
   Trennstrich. Nach der Umstellung über 13 Seiten × 9 Breiten
   nachgemessen: kein Überlauf. */
@media (max-width: 620px) {
	h1, h2, h3, h4, h5, h6,
	p, li, dt, dd, blockquote, figcaption, summary, th, td, .sgs-merkmal__titel,
	.sgs-rechtstext__text p {
		hyphens: auto;
	}
}
/* Wo Silbentrennung im Fließtext stört, sie aber trotzdem nicht
   ausbrechen darf: Adresszeilen und Verweise. */
a[href^="http"], a[href^="mailto"], .sgs-recht__zeile {
	hyphens: manual;
	overflow-wrap: anywhere;
}

/* Kein Kind sprengt seine Spur --------------------------------------
   Ein Raster- oder Flex-Kind ist von sich aus mindestens so breit wie
   sein längstes unteilbares Stück — bei uns also wie das längste Wort
   oder die längste Zeile. Reicht die Spur nicht, wächst nicht die
   Schrift in die nächste Zeile, sondern das Kind über den Rand hinaus.
   Genau daran lief der Kopfbereich von Schwimmunterricht auf einem
   360-px-Telefon 9 px hinaus und das Inhaltsverzeichnis der Rechtsseiten
   sogar 186 px.

   min-width: 0 nimmt dieses Mindestmaß weg; umbrechen darf der Text
   dank der Regel darüber. :where() hat keine Gewichtung — bestehende
   Regeln gewinnen weiterhin, diese hier greift nur, wo nichts anderes
   etwas sagt. */
:where(
	.sgs-hero__gitter,
	.sgs-uebermich,
	.sgs-uebermich--breit,
	.sgs-karten,
	.sgs-merkmale,
	.sgs-dreiklang,
	.sgs-band__innen,
	.sgs-beschwerden,
	.sgs-beschwerde,
	.sgs-karte,
	.sgs-merkmal,
	.sgs-lehrerin,
	.sgs-stimmen,
	.sgs-plan__karten,
	.sgs-klapper--zwei,
	.sgs-ablauf--reihe,
	.sgs-hakenliste--zwei,
	.sgs-fuss__spalten
) > * { min-width: 0; }

/* Größen laut Designsystem, nach unten hin fließend für kleine Bildschirme */
/* Obergrenze 60 statt 64 px: bei 64 px ist „Schwimmunterricht" 581 px
   breit, die Textspalte des Kopfbereichs auf einem 1280-px-Schirm aber
   nur 571 px. Zehn Pixel, und die Überschrift bricht mitten im Wort
   („Schwimmunterrich / t in Friedberg"). Raphaela hat genau das am
   14.09.2026 gemeldet. Silbentrennung würde es auffangen, ist aber
   nicht verlässlich — dieselbe Begründung wie unten beim Telefon.
   Bei 60 px misst das Wort 545 px und hat 26 px Luft. */
h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.1; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.2; }
h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }

/* Auf dem Telefon eine Stufe kleiner ---------------------------------
   „Schwimmunterricht" ist bei 38px breiter als eine 360-px-Spalte. Die
   Regeln oben verhindern zwar, dass es über den Rand läuft — aber ohne
   Silbentrennung bricht es dann mitten im Wort um („Schwimmunterric-ht"),
   und auf Silbentrennung ist kein Verlass: sie braucht ein Wörterbuch im
   Browser, und das fehlt je nach Gerät. Nachgemessen: bei 32px passt das
   längste Wort auf allen Seiten in seine Spalte. */
@media (max-width: 620px) {
	h1 { font-size: clamp(28px, 8.6vw, 38px); }
	h2 { font-size: clamp(26px, 7.4vw, 36px); }
}

a { color: var(--sgs-salbei-dunkel); }

.sgs-klein {
	font-size: 13px;
	line-height: 1.6;
	font-weight: 300;
}

.sgs-innen {
	max-width: var(--sgs-breite);
	margin-inline: auto;
	padding-inline: var(--sgs-rand);
}

/* Sichtbarer Tastaturfokus — sonst ist die Seite für Tastaturnutzer blind. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--sgs-anthrazit);
	outline-offset: 3px;
}

/* Nur für Screenreader */
.sgs-nur-vorlesen {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Schaltflächen
   ------------------------------------------------------------------ */
.sgs-knopf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: var(--sgs-radius);
	font-family: var(--sgs-schrift-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .18s ease, border-color .18s ease;
}

/* a.-Präfix nötig: Elementors globale Linkfarbe ist sonst spezifischer
   und macht die Beschriftung auf dem hellen Gelb unlesbar. */
a.sgs-knopf--primaer,
a.sgs-knopf--primaer:visited {
	background: var(--sgs-gelb);
	color: var(--sgs-anthrazit);
}
a.sgs-knopf--primaer:hover,
a.sgs-knopf--primaer:focus {
	background: var(--sgs-gelb-dunkel);
	color: var(--sgs-anthrazit);
}

a.sgs-knopf--rand,
a.sgs-knopf--rand:visited {
	background: transparent;
	color: var(--sgs-anthrazit);
	border-color: var(--sgs-anthrazit);
}
a.sgs-knopf--rand:hover,
a.sgs-knopf--rand:focus {
	background: var(--sgs-hellgrau);
	color: var(--sgs-anthrazit);
}

/* Gefüllt salbeigrün — im Entwurf der Startseite der stärkste Aufruf. */
a.sgs-knopf--gruen,
a.sgs-knopf--gruen:visited {
	background: var(--sgs-salbei);
	color: var(--sgs-weiss);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
a.sgs-knopf--gruen:hover,
a.sgs-knopf--gruen:focus {
	background: var(--sgs-salbei-dunkel);
	color: var(--sgs-weiss);
}
a.sgs-knopf--gruen .sgs-symbol { font-size: 16px; }

/* Unter dem Fußbereich blitzte ein sandfarbener Streifen durch — das ist
   der Seitenhintergrund aus Elementors Kit. body. davor, weil dessen
   Regel sonst gewinnt. */
html,
body,
body.sgs-vorlage,
body.elementor-kit-12 {
	background-color: var(--sgs-weiss);
}

/* ------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------ */

/* Sprungziele: Abstand für die klebrige Kopfleiste -------------------
   Die Kopfleiste steht fest oben (position: sticky). Ohne diese Regel
   scrollt der Browser ein Sprungziel — #stundenplan, #kurse, #angebote —
   exakt an den oberen Fensterrand und die Leiste deckt es zu. Gemessen
   am 10.09.: die Überschrift lag danach 28 bis 68 Pixel HINTER der
   Leiste, auf allen sieben Seiten und in allen drei Breiten.

   Die Regel steht am Wurzelelement und gilt damit für jedes Sprungziel
   der Seite: Verweise mit #, das Setzen der Adresse von Hand,
   scrollIntoView und den Sprung der Tastatur zum nächsten Feld.

   Gerechnet wird mit --sgs-kopf-ist, der vom Skript GEMESSENEN Höhe der
   Leiste — nicht mit dem Gestaltungswert. Wächst die Leiste später,
   etwa durch ein größeres Logo, wandert der Abstand von selbst mit.
   Der Rückfallwert --sgs-kopf-hoehe greift, solange das Skript noch
   nicht gelaufen ist: genau der Fall, wenn jemand eine Adresse mit #
   direkt aufruft. Beide Werte sind heute 96px, der Sprung ist also
   auch dann richtig.

   Die 16px obendrauf sind der Luftspalt, damit die Überschrift nicht
   an der Leiste klebt. Dieselbe Rechnung galt vorher schon einzeln für
   die Klappkarten; jetzt steht sie an einer Stelle statt an sechs. */
:root {
	scroll-padding-top: calc(var(--sgs-kopf-ist, var(--sgs-kopf-hoehe)) + 16px);
}

.sgs-kopf {
	background: var(--sgs-creme);
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Siehe body_class in functions.php: die Kopfleiste nimmt die Farbe des
   Bereichs unter ihr an. Auf der Yoga-Seite ist das Weiß. */
body.sgs-kopf-weiss .sgs-kopf { background: var(--sgs-weiss); }

.sgs-kopf__innen {
	max-width: var(--sgs-breite);
	margin-inline: auto;
	padding: 0 var(--sgs-rand);
	min-height: var(--sgs-kopf-hoehe);
	display: flex;
	align-items: center;
	gap: 24px;
}

.sgs-kopf__marke { flex: 0 0 auto; }
.sgs-kopf__marke img { display: block; max-height: 64px; width: auto; }
.sgs-kopf__marke .sgs-kopf__name {
	font-family: var(--sgs-schrift-ueberschrift);
	font-size: 24px;
	color: var(--sgs-anthrazit);
	text-decoration: none;
	line-height: 1.15;
}

.sgs-kopf__navigation { margin-left: auto; }

.sgs-kopf__navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 28px;
}
/* Die Punkte richten sich an der Schriftlinie aus, nicht an der Mitte
   ihres Kastens. Nötig, seit „Leistungen" eine Schaltfläche ist: deren
   Kasten zählt in der Zeile anders als der eines Verweises, mittig
   gesetzt saß sie 0,7px zu hoch. An der Schriftlinie stehen alle Punkte
   und ihre Unterstriche auf derselben Höhe — gemessen identisch.
   Auf dem Telefon steht das Menü in einer Spalte; dort setzt die Regel
   weiter unten wieder auf mittig. */
.sgs-kopf__navigation > ul { align-items: baseline; }

/* Der Elternpunkt ist eine Schaltflaeche, kein Verweis (siehe
   sgs_menue_eltern_ohne_ziel in functions.php). Damit er sich einreiht,
   bekommt er dieselben Regeln — die Grundgestaltung eines Knopfes vom
   Browser muss dafür weg. */
.sgs-kopf__navigation button.sgs-kopf__eltern {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	/* Nicht line-height: inherit. Ein Knopf ist ein Kasten, ein Verweis
	   eine Zeile — mit geerbter Zeilenhöhe wäre der Kasten 43,6px hoch,
	   die Verweise daneben 35px. Mit „normal" sind beide 35px.
	   Gemessen, nicht geschätzt. */
	line-height: normal;
}
.sgs-kopf__navigation a,
.sgs-kopf__navigation button.sgs-kopf__eltern,
.sgs-kopf__navigation a:visited {
	font-size: 15px;
	font-weight: 700;
	color: var(--sgs-anthrazit);
	/* !important, weil Elementors globaler Linkstil sonst unterstreicht. */
	text-decoration: none !important;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
}
.sgs-kopf__navigation a:hover,
.sgs-kopf__navigation button.sgs-kopf__eltern:hover,
.sgs-kopf__navigation .current-menu-item > a {
	border-bottom-color: var(--sgs-salbei);
}

/* Kleiner Pfeil an Punkten mit Untermenü — so steht es im Entwurf.
   Aus Rahmenlinien gezeichnet, damit keine Zeichensatzdatei nötig ist. */
.sgs-kopf__navigation .menu-item-has-children > a::after,
.sgs-kopf__navigation .menu-item-has-children > button::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* Untermenüs */
.sgs-kopf__navigation li { position: relative; }
.sgs-kopf__navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	flex-direction: column;
	gap: 0;
	background: var(--sgs-weiss);
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 8px 0;
	box-shadow: 0 8px 24px rgba(52, 52, 52, .08);
}
.sgs-kopf__navigation li:hover > .sub-menu,
.sgs-kopf__navigation li:focus-within > .sub-menu,
.sgs-kopf__navigation li.ist-auf > .sub-menu { display: flex; }
/* Zeigt der Pfeil nach oben, ist das Untermenü offen. */
.sgs-kopf__navigation li:hover > button::after,
.sgs-kopf__navigation li.ist-auf > button::after {
	transform: translateY(2px) rotate(-135deg);
}
.sgs-kopf__navigation .sub-menu a {
	display: block;
	padding: 8px 18px;
	border-bottom: 0;
	font-weight: 700;
}
.sgs-kopf__navigation .sub-menu a:hover { background: var(--sgs-creme); }

.sgs-kopf__aktion { flex: 0 0 auto; }

/* Schalter für kleine Bildschirme */
/* button.-Präfix nötig: Elementors globaler Knopfstil färbt sonst den
   Menüschalter salbeigrün ein. */
.sgs-kopf button.sgs-kopf__schalter {
	display: none;
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--sgs-sand);
	border-radius: var(--sgs-radius);
	padding: 10px 12px;
	cursor: pointer;
}
.sgs-kopf button.sgs-kopf__schalter span {
	display: block;
	width: 22px; height: 2px;
	background: var(--sgs-anthrazit);
	margin: 4px 0;
}

/* Auf großen Bildschirmen ist die Hülle nicht vorhanden: ihre Kinder
   verhalten sich, als stünden sie direkt in der Kopfleiste. */
.sgs-kopf__flaeche { display: contents; }

@media (max-width: 900px) {
	.sgs-kopf button.sgs-kopf__schalter { display: block; margin-left: auto; }

	/* --- Menü als eigene Fläche ---------------------------------------
	   Vorher klappte die Kopfleiste selbst auf. Dabei rutschte das Logo
	   nach oben, und das Menü füllte nur den oberen Teil des Bildschirms.
	   Jetzt liegt es als eigene Fläche über der Seite, und die Kopfleiste
	   bleibt unangetastet darüber stehen — das Logo bewegt sich nicht
	   um einen Pixel.
	   ------------------------------------------------------------------ */
	.sgs-kopf__flaeche {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 60;
		background: var(--sgs-creme);
		/* Platz für die Kopfleiste, die darüber stehen bleibt. */
		/* --sgs-kopf-ist ist die GEMESSENE Höhe, die das Skript setzt.
		   Nicht --sgs-kopf-hoehe verwenden: das ist der Gestaltungswert für
		   die Mindesthöhe der Leiste. Ihn aus dem Skript zu überschreiben
		   würde die Leiste bei jeder Messung ein Stück wachsen lassen. */
		padding: calc(var(--sgs-kopf-ist, var(--sgs-kopf-hoehe)) + 24px) var(--sgs-rand) 40px;
		overflow-y: auto;
		overscroll-behavior: contain;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;
		text-align: center;
	}
	.sgs-kopf.ist-offen .sgs-kopf__flaeche { display: flex; }

	/* Logo und Schalter liegen über der Fläche, damit beide sichtbar und
	   bedienbar bleiben. An .sgs-kopf selbst wird nichts geändert — die
	   Leiste ist klebrig (position: sticky) und soll es bleiben. Die Fläche
	   ist ihr Kind, deshalb genügt es, die Geschwister anzuheben. */
	.sgs-kopf.ist-offen .sgs-kopf__marke,
	.sgs-kopf.ist-offen button.sgs-kopf__schalter {
		position: relative;
		z-index: 70;
	}

	.sgs-kopf__flaeche .sgs-kopf__navigation { margin: 0; width: 100%; }
	.sgs-kopf__flaeche .sgs-kopf__navigation > ul {
		flex-direction: column;
		align-items: center;
		gap: 18px;
	}
	.sgs-kopf__flaeche .sgs-kopf__navigation > ul > li { width: 100%; }
	.sgs-kopf__flaeche .sgs-kopf__navigation a,
	.sgs-kopf__flaeche .sgs-kopf__navigation button.sgs-kopf__eltern {
		font-size: 19px;
		padding: 6px 0;
		border-bottom: 0;
	}
	/* Hier ist der Elternpunkt reine Überschrift: das Untermenü steht
	   ohnehin offen darunter, es gibt nichts umzuschalten. */
	.sgs-kopf__flaeche .sgs-kopf__navigation button.sgs-kopf__eltern {
		cursor: default;
		width: 100%;
	}
	/* Untermenü offen darunter, eingerückt durch Schriftgröße statt
	   Einzug — mittig gesetzt wirkt ein linker Einzug schief. */
	.sgs-kopf__flaeche .sgs-kopf__navigation .sub-menu {
		display: flex;
		position: static;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 10px 0 4px;
		min-width: 0;
		gap: 12px;
		align-items: center;
	}
	.sgs-kopf__flaeche .sgs-kopf__navigation .sub-menu a {
		font-size: 16px;
		font-weight: 400;
		color: var(--sgs-grau);
		padding: 2px 0;
	}
	/* Der Pfeil am Elternpunkt zeigt nach unten und ist hier nur Zierde —
	   das Untermenü steht ohnehin offen. */
	.sgs-kopf__flaeche .menu-item-has-children > a::after,
	.sgs-kopf__flaeche .menu-item-has-children > button::after { display: none; }

	.sgs-kopf__flaeche .sgs-kopf__aktion { width: auto; }

	/* Der Schalter wird zum Kreuz, solange die Fläche offen ist. */
	.sgs-kopf.ist-offen button.sgs-kopf__schalter span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.sgs-kopf.ist-offen button.sgs-kopf__schalter span:nth-child(2) { opacity: 0; }
	.sgs-kopf.ist-offen button.sgs-kopf__schalter span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}
	.sgs-kopf button.sgs-kopf__schalter span { transition: transform .18s ease, opacity .18s ease; }
}

/* Solange das Menü offen ist, soll die Seite darunter nicht mitscrollen. */
body.sgs-menue-offen { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.sgs-kopf button.sgs-kopf__schalter span { transition: none; }
}

/* ------------------------------------------------------------------
   Fußbereich
   ------------------------------------------------------------------ */
/* Oben und unten gleich viel Luft um den Spaltenblock, damit er im
   Fußbereich mittig sitzt und nicht an den unteren Bildrand rutscht.
   Die Gegenluft steht unten an .sgs-fuss__unten. */
.sgs-fuss {
	background: var(--sgs-weiss);
	color: var(--sgs-grau);
	padding: 44px 0 0;
	/* Trennlinie zum Inhalt darüber — dieselbe wie zwischen Spalten und
	   Zeile ganz unten. Sie steht nur da, wo sie gebraucht wird: siehe
	   die Ausnahmen gleich darunter. */
	border-top: 1px solid var(--sgs-sand);
}

/* Wann die Linie wegbleibt ------------------------------------------
   Grenzt die Fußzeile an eine eigene Fläche oder an ein Bild, trennt
   schon die Kante dieser Fläche — eine Linie obendrauf wäre eine
   zweite Trennung an derselben Stelle. Nur wenn oberhalb schlichtes
   Weiß steht, fehlt die Trennung und die Linie übernimmt sie.

   :has fragt den letzten sichtbaren Abschnitt des Inhalts ab. Kann ein
   Browser das nicht, bleibt die Linie überall stehen — eine sandfarbene
   Haarlinie unter einem gelben Band fällt kaum auf, eine fehlende
   Trennung auf weißem Grund dagegen schon. Deshalb in diese Richtung. */
main:has(> :last-child.sgs-band) + .sgs-fuss,
main:has(> :last-child.sgs-band-merkmale) + .sgs-fuss,
main:has(> :last-child.sgs-abschnitt--creme) + .sgs-fuss,
main:has(> :last-child.sgs-abschnitt--breit) + .sgs-fuss,
main:has(> :last-child.sgs-uebermich--breit) + .sgs-fuss,
main:has(> :last-child.sgs-hero--flaeche) + .sgs-fuss {
	border-top: 0;
}
/* Die alten Elementor-Seiten (Events, Kontakt) bringen ihre eigenen
   farbigen Flächen mit; dort trennt schon die Fläche. */
body.elementor-page .sgs-fuss { border-top: 0; }

.sgs-fuss__spalten {
	max-width: var(--sgs-breite);
	margin-inline: auto;
	padding-inline: var(--sgs-rand);
	display: grid;
	/* Wie im Entwurf: Marke breiter, dann drei gleich breite Spalten. */
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 40px;
}

/* Aufklapper im Fuß — nur unter 900 px.
   Am Rechner stehen alle vier Spalten offen nebeneinander, so wie im
   Entwurf. Auf Tablet und Telefon wird aus den beiden Linklisten je ein
   Aufklapper; die Marke oben und die Spalte „Kontakt" bleiben offen.
   Kontakt bewusst: die Telefonnummer ist das Wichtigste auf der Seite,
   die darf nicht hinter einem Tippen liegen.

   Im HTML steht „open". Ohne Skript ist also alles sichtbar — zugeklappt
   wird erst von assets/fuss.js, und nur solange das Fenster schmal ist. */
.sgs-fuss__klapp > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* Das Dreieck des Browsers weg — wir zeichnen ein Pluszeichen.
	   list-style für Firefox, ::-webkit-details-marker für Safari. */
	list-style: none;
	cursor: default;
}
.sgs-fuss__klapp > summary::-webkit-details-marker { display: none; }
.sgs-fuss__klapp > summary h2 { margin: 0; }
.sgs-fuss__klapp-inhalt { margin-top: 16px; }

/* Das Pluszeichen: zwei Striche übereinander. Beim Aufklappen dreht sich
   der senkrechte in die Waagerechte, aus dem Plus wird ein Minus. */
.sgs-fuss__plus {
	display: none;
	position: relative;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}
.sgs-fuss__plus::before,
.sgs-fuss__plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	margin-top: -1px;
	background: var(--sgs-anthrazit);
	transition: transform .2s ease;
}
.sgs-fuss__plus::after { transform: rotate(90deg); }
.sgs-fuss__klapp[open] .sgs-fuss__plus::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
	.sgs-fuss__plus::before,
	.sgs-fuss__plus::after { transition: none; }
}

@media (max-width: 900px) {
	/* Untereinander statt nebeneinander, mit Trennlinien dazwischen —
	   sonst sieht man nicht, wo eine Zeile aufhört und die nächste anfängt. */
	.sgs-fuss__spalten {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.sgs-fuss__spalte + .sgs-fuss__spalte {
		border-top: 1px solid var(--sgs-sand);
	}
	.sgs-fuss__marke { padding-bottom: 26px; }

	.sgs-fuss__plus { display: block; }
	.sgs-fuss__klapp > summary {
		cursor: pointer;
		/* 16px oben und unten ergeben mit der 16px-Zeile rund 52px Höhe —
		   genug für einen Daumen. */
		padding: 16px 0;
		-webkit-tap-highlight-color: transparent;
	}
	.sgs-fuss__klapp-inhalt {
		margin-top: 0;
		padding-bottom: 20px;
	}

	/* Kontakt klappt nicht auf, soll aber genauso hoch beginnen wie die
	   Aufklapper darüber. */
	.sgs-fuss__kontakt-spalte { padding: 16px 0 20px; }
	.sgs-fuss__kontakt-spalte > h2 { margin-bottom: 16px; }
}

/* Überschriften fett und schwarz — im Entwurf heben sie sich klar ab. */
.sgs-fuss h2 {
	font-family: var(--sgs-schrift-text);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--sgs-anthrazit);
}

/* Marke: Logo links, Text rechts daneben. */
.sgs-fuss__marke {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px;
	align-items: start;
}
.sgs-fuss__logo { display: block; width: 104px; }
.sgs-fuss__logo img { width: 100%; height: auto; display: block; }
.sgs-fuss__marke-text p { margin: 0 0 12px; }
.sgs-fuss__marke-text p:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
	.sgs-fuss__marke { grid-template-columns: 1fr; gap: 16px; }
}

/* Instagram als rundes Symbol. Bei mehreren Konten steht unter jedem
   ein kurzes Wort, damit klar ist, wohin der Klick führt. */
.sgs-fuss ul.sgs-fuss__social {
	display: flex;
	gap: 18px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	align-items: flex-start;
}
.sgs-fuss ul.sgs-fuss__social li {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.sgs-fuss .sgs-fuss__social > li > .sgs-fuss__social-text {
	display: block;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	font-size: 12px;
	line-height: 1.2;
	color: var(--sgs-grau);
	text-align: center;
}
.sgs-fuss .sgs-fuss__social > li > :is(a, span) {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--sgs-sand);
	color: var(--sgs-anthrazit);
	font-size: 20px;
	text-decoration: none;
}
.sgs-fuss .sgs-fuss__social a:hover {
	border-color: var(--sgs-salbei);
	color: var(--sgs-anthrazit);
}
/* Noch ohne Adresse: sieht aus wie später, ist aber nicht anklickbar. */
.sgs-fuss .sgs-fuss__social--leer { cursor: default; }

.sgs-fuss ul { list-style: none; margin: 0; padding: 0; }
.sgs-fuss li { margin-bottom: 8px; }
.sgs-fuss li:last-child { margin-bottom: 0; }
.sgs-fuss__spalte > *:last-child { margin-bottom: 0; }
.sgs-fuss a { color: var(--sgs-grau); text-decoration: none; }
.sgs-fuss a:hover { color: var(--sgs-anthrazit); text-decoration: underline; }

.sgs-fuss__unten {
	margin-top: 44px;
	border-top: 1px solid var(--sgs-sand);
	background: var(--sgs-weiss);
}
.sgs-fuss__unten-innen {
	max-width: var(--sgs-breite);
	margin-inline: auto;
	padding: 22px var(--sgs-rand);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
}

/* Rechtliches im Fußbereich: nebeneinander, nicht gestapelt. */
ul.sgs-fuss__recht {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.sgs-fuss__recht li { margin: 0; }


/* ==================================================================
   Drucken
   ------------------------------------------------------------------
   Rechtstexte werden ausgedruckt oder als PDF gesichert — Impressum
   und AGB gehören in die Unterlagen. Ohne eigene Regeln kämen Menü,
   Fußzeile und Flächenfarben mit aufs Papier.

   Dass zugeklappte Abschnitte vor dem Drucken aufgehen und danach
   wieder zugehen, macht assets/fuss.js. Ohne das druckt eine
   zugeklappte Datenschutzerklärung ein leeres Blatt.
   ================================================================== */
@media print {
	/* Bedienelemente haben auf Papier nichts verloren. */
	.sgs-kopf,
	.sgs-fuss,
	.sgs-knopf {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	/* Die Seite darf die volle Breite des Papiers nutzen; die
	   Zeilenlänge regelt der Drucker über den Seitenrand. */
	.sgs-abschnitt { padding: 0 !important; }
	.sgs-innen {
		max-width: none;
		padding-inline: 0;
	}
	h1, h2, h3, h4 {
		color: #000;
		/* Keine Überschrift allein am Seitenfuß. */
		break-after: avoid;
	}
	p, li {
		orphans: 3;
		widows: 3;
	}

	a { color: #000; }

	/* Die Pfeile der Aufklapper sind auf Papier sinnlos. */
	.sgs-recht__abschnitt > summary::after,
	.sgs-fuss__plus,
	.sgs-klapp__pfeil {
		display: none !important;
	}

	/* Auf Papier ist ein Verweis ohne Adresse wertlos. Nur im
	   Rechtstext, sonst wird jede Seite unlesbar. */
	.sgs-rechtstext__text a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 88%;
		word-break: break-all;
	}
}