/* ==========================================================================
   Anapnoe – Design-Tokens (aus Figma extrahiert)
   ========================================================================== */
:root {
	--anapnoe-color-primary: #e4d46d;   /* Gelb (Header/Hero-Hintergrund) */
	--anapnoe-color-dark: #28253d;      /* Dunkles Navy (Text/Buttons) */
	--anapnoe-color-light-bg: #e8e5e9;  /* Helles Grau (Sektions-Hintergrund) */
	--anapnoe-color-accent: #ff7655;    /* Orange (Akzent-Links im Footer / Logo) */
	--anapnoe-color-mauve: #8b5f61;     /* Mauve (Menü-Hover "Ich" / Logo) */
	--anapnoe-color-olive: #827f4c;     /* Oliv (Menü-Hover "Du" / Logo) */
	--anapnoe-color-white: #ffffff;

	--anapnoe-font-heading: 'Suisse Works', Georgia, serif;
	--anapnoe-font-body: 'Suisse Intl', Arial, sans-serif;

	--anapnoe-radius-pill: 100px;
	--anapnoe-max-width: 1440px;

	/* Abstände als Variablen, damit sie sich pro Breakpoint zentral
	   überschreiben lassen, statt jede Section einzeln anzufassen. */
	--anapnoe-section-padding-x: 20px;
	--anapnoe-section-padding-y: 40px;
}

/* ==========================================================================
   TYPOGRAFIE – zentrale Übersicht (1:1 nach Figma-Vorgabe)
   ==========================================================================
   Alle Grössen als px (nicht rem), damit sie exakt der Figma-Vorlage
   entsprechen. Jede Regel unten ist EINE Quelle der Wahrheit für ihren
   Anwendungsfall – keine verstreuten Wiederholungen mehr in Breakpoints.

   1.  Logo (oben links)                     Suisse Works Regular 30 / auto / 0%
   2.  H2 – Zwischentitel                     Suisse Works Regular 48 / auto / 1%
   3.  H1 – Seitentitel                       Suisse Works Regular 150 / auto / 1%
   4.  H4 – Frage/Titel (Ich, Kontakt)        Suisse Intl Book 24 / 34 / 2%
   5.  Lauftext (Ich/Kontakt)                 Suisse Intl Book 20 / 31 / 2%
   6.  Lauftext Du/Wir – 1. Absatz            Suisse Works Regular 30 / 41 / 1%
   7.  Lauftext Du/Wir – 2. Absatz            Suisse Intl Book 20 / 31 / 2%
   8.  Lauftext Du/Wir – 3. Absatz            Suisse Works 24 / 34 / 1%
   9.  Button                                 Suisse Intl Book 24 / auto / 2%
   10. Text in Grid-Boxen                     Suisse Intl Book 24 / 34 / 2%
   11. Testimonials                           Suisse Works 24 / 34 / 1%

   ZU !important: GeneratePress liefert eine eigene main.min.css, die
   dieselben Eigenschaften direkt auf h1/h2/h3/body/p setzt – bei gleicher
   Spezifität gewinnt sonst GP durch Ladereihenfolge. Überschriften,
   Fliesstext und Body werden deshalb mit "body …" / "html body" angesprochen
   (höhere Spezifität, kein !important nötig). !important bleibt nur bei
   Links, Buttons, Menü-Overlay und Logo-Text, wo GP mit :link/:hover und
   eigenen Button-Regeln dagegenhält.
   ========================================================================== */

/* --- 1. Logo --- */
.anapnoe-logo-text {
	font-family: var(--anapnoe-font-heading) !important;
	font-size: 22px !important;
	line-height: normal;
	letter-spacing: 0;
}

/* --- 2. H2 + 3. H1 (Basis, GP-Override) --- */
body h1,
body h2,
body h3 {
	font-family: var(--anapnoe-font-heading);
	font-weight: 400;
	color: var(--anapnoe-color-dark);
	margin: 0 0 0.5em;
}

body h1 {
	font-size: 75px;
	line-height: normal;
	letter-spacing: 0.01em;
	text-align: center;
}

body h2 {
	font-size: 30px;
	line-height: normal;
	letter-spacing: 0.01em;
}

body h3 { font-size: 1.1rem; }

/* Basis-Body: Farbe/Schrift/Abstände. font-family mit !important, da GP
   dieselbe Eigenschaft über sein eigenes Stylesheet setzt (gleiche
   Spezifität, gewinnt sonst durch Ladereihenfolge). */
html body {
	font-family: var(--anapnoe-font-body);
	color: var(--anapnoe-color-dark);
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

/* --- Fliesstext-Elemente: Grundschrift Suisse Intl (GP zwingt sie sonst
   auf die Überschriften-Schrift) --- */
body p,
body li,
body blockquote,
body span {
	font-family: var(--anapnoe-font-body);
}

/* --- Links: Farbe/Unterstrich zurücksetzen (GP's a:link/a:visited hat
   höhere Spezifität und drückt sonst blaue Standardfarbe durch) --- */
a,
a:link,
a:visited {
	color: inherit !important;
	text-decoration: none !important;
}

img { max-width: 100%; height: auto; display: block; }

.anapnoe-main {
	overflow-x: hidden;
}

/* ==========================================================================
   Scroll-Reveal: sanftes Einblenden beim Laden/Scrollen.
   Klasse wird per JS (main.js) automatisch auf passende Elemente gesetzt,
   keine manuelle Template-Anpassung nötig. "is-visible" wird per
   IntersectionObserver ergänzt, sobald das Element in den sichtbaren
   Bereich scrollt (bzw. sofort bei Above-the-Fold-Inhalten wie dem Hero).
   ========================================================================== */
.anapnoe-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.anapnoe-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Einblenden beim Laden (Above-the-Fold-Inhalte) – rein CSS, kein JS-Timing.
   Läuft automatisch bei jedem Seitenaufruf, unabhängig von Ladezeit oder
   Browser-Eigenheiten (siehe frühere JS-Lösung, die browserabhängig war).
   Gilt bewusst nur für Inhalte, die immer im ersten Bildschirmbereich
   liegen (Hero/Logo/Seitentitel/Bild+Text-Intro) – alles weiter unten
   (Grid-Boxen, Testimonials etc.) bleibt beim Scroll-Reveal-System oben.
   ========================================================================== */
@keyframes anapnoe-fade-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.anapnoe-hero__headline,
.anapnoe-hero__image,
.anapnoe-page-intro h1,
.anapnoe-split__image,
.anapnoe-split__content {
	animation: anapnoe-fade-in 1.1s 0.5s ease both;
}

/* Header-Logo + Burger blenden erst ein, NACHDEM der restliche Inhalt
   fertig eingeblendet ist (0.5s Verzögerung + 1.1s Dauer = 1.6s), auf
   allen Seiten. */
.anapnoe-header__brand,
.anapnoe-burger {
	animation: anapnoe-fade-in 0.6s 1.6s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.anapnoe-hero__headline,
	.anapnoe-hero__image,
	.anapnoe-page-intro h1,
	.anapnoe-split__image,
	.anapnoe-split__content,
	.anapnoe-header__brand,
	.anapnoe-burger {
		animation: none;
	}
}

/* Nutzer, die reduzierte Bewegung bevorzugen (Betriebssystem-Einstellung,
   z. B. wichtig bei einer Gesundheits-/Therapie-Seite): Inhalte erscheinen
   sofort, ohne Bewegung/Verzögerung. */
@media (prefers-reduced-motion: reduce) {
	.anapnoe-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Buttons (Mobile = volle Breite, gut antippbar)
   --- 9. Button-Typografie: Suisse Intl Book 24 / auto / 2% ---
   ========================================================================== */
.anapnoe-btn {
	display: block;
	width: 100%;
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding: 16px 24px;
	margin-top: 60px;
	border-radius: var(--anapnoe-radius-pill);
	border: 1px solid var(--anapnoe-color-dark);
	font-family: var(--anapnoe-font-body) !important;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
}

.anapnoe-btn--dark {
	color: var(--anapnoe-color-dark);
	background: transparent;
}

.anapnoe-btn--dark:hover {
	background: var(--anapnoe-color-dark);
	color: var(--anapnoe-color-white) !important;
}

/* ==========================================================================
   Header
   ========================================================================== */
.anapnoe-header {
	background: var(--anapnoe-color-primary);
	position: fixed; /* robuster als sticky: funktioniert unabhängig davon, ob
	                     ein Eltern-Element (z. B. von GeneratePress) overflow:hidden
	                     gesetzt hat, was sticky sonst stillschweigend deaktiviert */
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 300; /* höher als das Overlay (200), damit Header inkl. Burger beim Öffnen sichtbar/klickbar bleibt */
	transition: background-color 0.2s ease;
}

/* Wird per JS gesetzt, sobald das Menü offen ist – Header verschmilzt optisch
   mit dem dunklen Overlay darunter (wie im Figma: ein durchgehender dunkler
   Bereich inkl. Kopfzeile). */
.anapnoe-header--menu-open {
	background: var(--anapnoe-color-dark) !important;
}

.anapnoe-header--menu-open .anapnoe-logo-text {
	color: var(--anapnoe-color-white);
}

.anapnoe-header--menu-open .anapnoe-burger span {
	background: var(--anapnoe-color-white);
}

.anapnoe-header__inner {
	max-width: var(--anapnoe-max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
}

.anapnoe-header__brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.anapnoe-header__logo {
	text-decoration: none;
}

.anapnoe-logo-text {
	font-family: var(--anapnoe-font-heading);
	font-size: 1.4rem;
	color: var(--anapnoe-color-dark);
	transition: color 0.3s ease-in-out;
}

/* Logo + Burger bei Hover auf Hell (Weiss) umschalten */
.anapnoe-header__logo:hover .anapnoe-logo-text {
	color: var(--anapnoe-color-white);
}

.anapnoe-burger:hover span {
	background: var(--anapnoe-color-white);
}

/* "DE | EN" – wie im Figma nur sichtbar, wenn das Menü offen ist */
.anapnoe-header__lang-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	gap: 6px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.anapnoe-header--menu-open .anapnoe-header__lang-list {
	display: flex;
}

.anapnoe-header__lang-list li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.anapnoe-header__lang-list li + li::before {
	content: "|";
	color: var(--anapnoe-color-white);
	opacity: 0.6;
}

.anapnoe-header__lang-list a {
	color: var(--anapnoe-color-white) !important;
}

.anapnoe-burger {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer;
	width: 34px;
	height: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}

.anapnoe-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--anapnoe-color-dark);
	transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
	transform-origin: center;
}

/* Hamburger → Kreuz: oberer Strich dreht sich nach unten in die Mitte,
   mittlerer Strich verschwindet, unterer Strich dreht sich nach oben. */
.anapnoe-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

.anapnoe-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.anapnoe-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

/* ==========================================================================
   Menü-Overlay
   Hintergrund: dunkles Navy (nicht das Header-Gelb!). Jeder Menüpunkt hat
   eine eigene, im Figma hinterlegte Hover-Farbe (siehe Kommentare unten).
   Reihenfolge im Menü MUSS Du / Ich / Wir / Kontakt bleiben, da die Farben
   über :nth-child zugeordnet werden.
   ========================================================================== */
.anapnoe-menu-overlay {
	position: fixed;
	inset: 0;
	background: var(--anapnoe-color-dark);
	z-index: 200;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.anapnoe-menu-overlay.is-open {
	opacity: 1;
}

.anapnoe-menu-overlay[hidden] {
	display: none;
}

.anapnoe-menu-overlay nav {
	flex: 1;
	display: flex;
	align-items: center;
}

.anapnoe-menu-overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 8px;
}

.anapnoe-menu-overlay__list li {
	margin: 0;
	text-align: center;
}

.anapnoe-menu-overlay__list a {
	display: inline-block;
	font-family: var(--anapnoe-font-heading);
	font-size: clamp(3rem, 16vw, 9.375rem);
	line-height: 1;
	text-decoration: none;
	color: var(--anapnoe-color-white) !important;
	transition: color 0.2s ease;
}

/* Individuelle Hover-Farben pro Menüpunkt, wie im Figma hinterlegt */
.anapnoe-menu-overlay__list li:nth-child(1) a:hover,
.anapnoe-menu-overlay__list li:nth-child(1) a:focus-visible { color: #827f4c !important; } /* Du */

.anapnoe-menu-overlay__list li:nth-child(2) a:hover,
.anapnoe-menu-overlay__list li:nth-child(2) a:focus-visible { color: #8b5f61 !important; } /* Ich */

.anapnoe-menu-overlay__list li:nth-child(3) a:hover,
.anapnoe-menu-overlay__list li:nth-child(3) a:focus-visible { color: var(--anapnoe-color-accent) !important; } /* Wir – #ff7655 */

.anapnoe-menu-overlay__list li:nth-child(4) a:hover,
.anapnoe-menu-overlay__list li:nth-child(4) a:focus-visible { color: var(--anapnoe-color-primary) !important; } /* Kontakt – #e4d46d */

/* ==========================================================================
   Grosses Logo-Wortbild auf der Startseite: reines SVG mit <clipPath>
   (zweifarbig pro Buchstabengruppe, wellenförmige Trennung). Keine Animation.

   Technik: Der Schriftzug liegt zweimal übereinander im selben SVG – einmal
   als Basis-Ebene (volle Farbe), einmal als zweite Ebene mit denselben
   Buchstaben in der zweiten Farbe, die per <clipPath> nur im unteren,
   wellig begrenzten Bereich sichtbar ist.
   ========================================================================== */
.anapnoe-logo-mark {
	display: flex;
	justify-content: center;
	margin: 8px 0 16px;
}

.anapnoe-wave-logo {
	width: 100%;
	max-width: 640px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.anapnoe-wave-logo__text {
	font-family: var(--anapnoe-font-heading);
	font-size: 140px;
	letter-spacing: 1px;
}

/* Gruppe 1 "An": Basis Mauve, Welle Navy */
.anapnoe-wave-logo__base.is-group-1 { fill: var(--anapnoe-color-mauve); }
.anapnoe-wave-logo__wave.is-group-1 { fill: var(--anapnoe-color-dark); }

/* Gruppe 2 "apn": Basis Navy, Welle Orange */
.anapnoe-wave-logo__base.is-group-2 { fill: var(--anapnoe-color-dark); }
.anapnoe-wave-logo__wave.is-group-2 { fill: var(--anapnoe-color-accent); }

/* Gruppe 3 "oe": Basis Oliv, Welle Navy */
.anapnoe-wave-logo__base.is-group-3 { fill: var(--anapnoe-color-olive); }
.anapnoe-wave-logo__wave.is-group-3 { fill: var(--anapnoe-color-dark); }

/* ==========================================================================
   Hero (Startseite)
   ========================================================================== */
.anapnoe-hero {
	background: var(--anapnoe-color-primary);
	padding: var(--anapnoe-section-padding-y) var(--anapnoe-section-padding-x);
	padding-top: 100px; /* fester Wert statt JS-Messung: verhindert Browser-spezifische Abweichungen (z. B. Firefox) */
}

.anapnoe-hero__inner {
	max-width: var(--anapnoe-max-width);
	margin: 0 auto;
	text-align: center;
}

.anapnoe-hero__image {
	margin: 32px auto 0;
	border-radius: 0;
	overflow: hidden;
	/* Volle Breite auf Mobile: negativer Rand gleicht das Section-Padding
	   aus, damit das Bild bis an den Bildschirmrand reicht. */
	margin-left: calc(-1 * var(--anapnoe-section-padding-x));
	margin-right: calc(-1 * var(--anapnoe-section-padding-x));
	width: calc(100% + 2 * var(--anapnoe-section-padding-x));
}

.anapnoe-hero__image img {
	width: 100%;
	display: block;
}

/* Mobile-Hochformat-Variante nur bis 599px sichtbar, ab Tablet die
   normale (Querformat-)Variante. Ohne eigenes Mobile-Bild erscheint das
   normale Hero-Bild auf allen Grössen (keine --desktop-Klasse gesetzt). */
.anapnoe-hero__image--desktop {
	display: none;
}

/* ==========================================================================
   Claim-Section
   ========================================================================== */
.anapnoe-claim {
	background: var(--anapnoe-color-light-bg);
	padding: var(--anapnoe-section-padding-y) var(--anapnoe-section-padding-x);
}

.anapnoe-claim__inner {
	max-width: var(--anapnoe-max-width);
	margin: 0 auto;
	text-align: center;
}

.anapnoe-claim__video {
	position: relative;
	max-width: 800px;
	margin: 32px auto;
	overflow: hidden;
	cursor: pointer;
}

.anapnoe-claim__video video {
	width: 100%;
	display: block;
}

.anapnoe-claim__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--anapnoe-color-white);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--anapnoe-color-dark);
	cursor: pointer;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease;
}

.anapnoe-claim__play:hover {
	background: var(--anapnoe-color-dark);
	color: var(--anapnoe-color-white);
}

/* Play-Button ausblenden, sobald das Video läuft (Klasse wird per JS gesetzt) */
.anapnoe-claim__video.is-playing .anapnoe-claim__play {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Seiten-Intro (Du / Ich / Wir / Kontakt)
   ========================================================================== */
.anapnoe-page-intro {
	padding: var(--anapnoe-section-padding-y) var(--anapnoe-section-padding-x);
	padding-top: 100px; /* fester Wert statt JS-Messung: verhindert Browser-spezifische Abweichungen (z. B. Firefox) */
}

.anapnoe-page-intro__inner {
	max-width: var(--anapnoe-max-width);
	margin: 0 auto;
	text-align: center;
}

.anapnoe-page-intro__image {
	margin: 28px auto;
	border-radius: 0;
	overflow: hidden;
}

.anapnoe-page-intro__text {
	margin: 0 auto 28px;
	text-align: left;
	line-height: 1.6;
}

.anapnoe-list-block {
	margin: 2em 0 28px;
	text-align: left;
}

/* Weiterbildungen-Trigger: sieht aus wie der bisherige unterstrichene
   Link/Titel, ist aber ein <button>, der das Modal öffnet. */
.anapnoe-list-block__trigger {
	display: block;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	color: var(--anapnoe-color-accent);
	font-family: var(--anapnoe-font-body);
	font-size: 24px;
	line-height: 34px;
	letter-spacing: 0.02em;
	font-weight: 500;
	text-decoration: underline;
}

/* ==========================================================================
   Modal/Popup (z. B. Weiterbildungen) – bewusst NICHT bildschirmfüllend,
   Hintergrund/Text-Farben wie die "Ich"-Seite (Mauve/Weiss).
   ========================================================================== */
.anapnoe-modal[hidden] {
	display: none;
}

.anapnoe-modal {
	position: fixed;
	inset: 0;
	z-index: 400; /* über Header (300) und Menü-Overlay (200) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.anapnoe-modal.is-open {
	opacity: 1;
}

.anapnoe-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(40, 37, 61, 0.6); /* Navy halbtransparent */
}

.anapnoe-modal__dialog {
	position: relative;
	background: var(--anapnoe-color-mauve);
	color: var(--anapnoe-color-white);
	max-width: 600px;
	width: 100%;
	max-height: 80vh;
	padding: 40px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* Nur dieser innere Bereich scrollt bei langem Inhalt – der Schliessen-
   Button (Geschwister-Element, nicht Kind davon) bleibt dadurch immer an
   seiner Position sichtbar, statt mit dem Inhalt wegzuscrollen. */
.anapnoe-modal__body {
	overflow-y: auto;
	min-height: 0; /* nötig, damit Flex-Kinder wirklich schrumpfen/scrollen können */
	/* Scrollbar unsichtbar machen, Scroll-Funktion bleibt erhalten. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* alte Edge/IE-Versionen */
}

.anapnoe-modal__body::-webkit-scrollbar {
	display: none; /* Chrome, Safari, neueres Edge */
}

/* Weiterbildungen-Popup: eigene Farben (Gelb/Dunkel statt Mauve/Weiss) */
#weiterbildungen-modal .anapnoe-modal__dialog {
	background: var(--anapnoe-color-primary);
	color: var(--anapnoe-color-dark);
}

#weiterbildungen-modal .anapnoe-modal__dialog h3 {
	color: var(--anapnoe-color-dark);
}

#weiterbildungen-modal .anapnoe-modal__close {
	color: var(--anapnoe-color-dark);
}

/* Cookie-Popup: bewusst seitenunabhängige Farbe (erscheint im Footer auf
   jeder Seite gleich, unabhängig von den Seiten-spezifischen Modal-Farben) */
#cookie-info-modal .anapnoe-modal__dialog {
	background: var(--anapnoe-color-dark);
	color: var(--anapnoe-color-white);
	max-width: 480px;
}

#cookie-info-modal .anapnoe-modal__dialog h3 {
	color: var(--anapnoe-color-white);
}

#cookie-info-modal .anapnoe-modal__dialog p {
	color: var(--anapnoe-color-white);
}

#cookie-info-modal .anapnoe-modal__close {
	color: var(--anapnoe-color-white);
}

.anapnoe-modal__dialog h3 {
	color: var(--anapnoe-color-white);
	font-family: var(--anapnoe-font-heading);
	font-size: 30px;
	line-height: 41px;
	letter-spacing: 0.01em;
	margin: 0 0 0.5em;
}

.anapnoe-modal__dialog p {
	font-family: var(--anapnoe-font-body);
	font-size: 20px;
	line-height: 31px;
	letter-spacing: 0.02em;
	margin: 0;
}

.anapnoe-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--anapnoe-color-white);
	font-size: 1.8rem;
	line-height: 1;
	padding: 4px 8px;
}

.anapnoe-modal__list {
	list-style: disc;
	margin: 0;
	padding-left: 1.2em;
}

.anapnoe-modal__list li {
	font-family: var(--anapnoe-font-body);
	font-size: 20px;
	line-height: 31px;
	letter-spacing: 0.02em;
	margin-bottom: 0.3em;
}

/* ==========================================================================
   Grid-Sections (Wirkungsfelder / Therapeutische Zugänge)
   Mobile = 1 Spalte
   ========================================================================== */
.anapnoe-grid-section {
	padding: var(--anapnoe-section-padding-y) var(--anapnoe-section-padding-x);
	background: var(--anapnoe-color-light-bg);
}

.anapnoe-grid-section__inner {
	max-width: var(--anapnoe-max-width);
	margin: 0 auto;
	text-align: center;
}

.anapnoe-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	grid-auto-rows: 1fr; /* alle Boxen so hoch wie die mit dem meisten Text */
	margin-top: 48px;
	text-align: center;
}

.anapnoe-grid__item {
	background: var(--anapnoe-color-white);
	border: none;
	border-radius: 0;
	padding: 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	font: inherit;
	text-align: center;
}

/* Wird nur als <button> gerendert, wenn im Backend ein Text hinterlegt ist
   (siehe template-du.php / template-wir.php) – nur dann klickbar/Zeiger. */
button.anapnoe-grid__item {
	cursor: pointer;
	transition: filter 0.3s ease-in-out, opacity 0.6s ease, transform 0.6s ease;
}

button.anapnoe-grid__item:hover,
button.anapnoe-grid__item:focus-visible {
	filter: brightness(1.12);
}

/* Hover/Fokus auf klickbaren Boxen: Text wächst minimal (Box bleibt
   unverändert, kein Layout-Sprung) und wird unterstrichen. Die Unterstreichung
   blendet nur ein (Farbe von transparent zu Textfarbe) – echter Text-
   Unterstrich, daher sauber positioniert und ohne Überschneidung bei
   mehrzeiligen Titeln. */
button.anapnoe-grid__item .anapnoe-grid-item-title {
	transform-origin: center;
	transition: transform 0.4s ease;
}

button.anapnoe-grid__item:hover .anapnoe-grid-item-title,
button.anapnoe-grid__item:focus-visible .anapnoe-grid-item-title {
	transform: scale(1.05);
}

.anapnoe-grid-item-title__text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.4s ease;
}

button.anapnoe-grid__item:hover .anapnoe-grid-item-title__text,
button.anapnoe-grid__item:focus-visible .anapnoe-grid-item-title__text {
	text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	button.anapnoe-grid__item .anapnoe-grid-item-title,
	.anapnoe-grid-item-title__text {
		transition: none;
	}
}

/* --- 10. Text in Grid-Boxen: Suisse Intl Book 24 / 34 / 2% ---
   Bewusst als <h4> mit eigener Klasse statt <h3>: h1/h2/h3 kollidieren mit
   GeneratePress' main.min.css (siehe Hinweis oben bei den H4-Frage/Titel-
   Regeln) und brauchen deshalb !important. h4 ist davon nicht betroffen,
   daher genügt hier eine einfache Klasse ohne !important-Kämpfe. */
.anapnoe-grid-item-title {
	font-family: var(--anapnoe-font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 0.02em;
	margin: 0;
	/* Zeilen gleichmässig lang (zentrierte Titel wirken ruhiger). */
	text-wrap: balance;
}

/* ==========================================================================
   Testimonials (Seite "Ich") – Mobile = 1 Spalte
   ========================================================================== */
.anapnoe-testimonials-section {
	padding: var(--anapnoe-section-padding-y) var(--anapnoe-section-padding-x);
}

.anapnoe-testimonials-section__inner {
	max-width: var(--anapnoe-max-width);
	margin: 0 auto;
	text-align: center;
}

.anapnoe-testimonials-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 28px;
	text-align: left;
}

.anapnoe-testimonials-grid > * {
	min-width: 0;
}

/* --- 11. Testimonials: Suisse Works 24 / 34 / 1% (überschreibt die globale
   "p bekommt immer Body-Schrift"-Regel gezielt für Zitat + Autor) --- */
.anapnoe-testimonial {
	background: var(--anapnoe-color-light-bg);
	border-radius: 0;
	padding: 20px;
	margin: 0 0 12px;
	font-style: italic;
}

.anapnoe-testimonial p {
	font-family: var(--anapnoe-font-heading);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.01em;
	margin: 0;
}

.anapnoe-testimonial cite {
	display: block;
	margin-top: 12px;
	font-family: var(--anapnoe-font-heading);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.01em;
	font-style: italic;
	font-weight: 400;
}

/* ==========================================================================
   Kontakt-Seite Spezifisches
   ========================================================================== */
.anapnoe-practice-info {
	margin: 0 auto 28px;
	text-align: left;
	line-height: 1.7;
}

.anapnoe-certificates {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
	margin-bottom: 28px;
}

.anapnoe-certificates__logo {
	max-height: 56px;
	width: auto;
}

.anapnoe-yoga-shala {
	padding: var(--anapnoe-section-padding-y) var(--anapnoe-section-padding-x);
	background: var(--anapnoe-color-light-bg);
	text-align: center;
}

.anapnoe-yoga-shala__inner {
	max-width: 900px;
	margin: 0 auto;
}

.anapnoe-yoga-shala img {
	border-radius: 0;
	margin-top: 24px;
}

.anapnoe-yoga-shala__lead {
	margin: 0 0 8px;
}

/* Bildunterschrift "YOGA SHALA": gleicher Stil wie Absatz 3 bei "Wir"
   (Suisse Works 24 / 34 / 1%), enger ans Bild gerückt (ist der Bildbeschrieb). */
.anapnoe-yoga-shala__caption {
	margin: 4px 0 0;
	font-family: var(--anapnoe-font-heading);
	font-size: 24px;
	line-height: 34px;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--anapnoe-color-dark);
	opacity: 0.7;
}

/* ==========================================================================
   404-Seite: gelber Hintergrund wie die Startseite, zentriert, mit der
   Hauptnavigation als Textlinks. Titel ist die H1 der Seite, optisch in
   H2-Grösse (30/48).
   ========================================================================== */
.anapnoe-error-page {
	background: var(--anapnoe-color-primary);
	padding: var(--anapnoe-section-padding-y) var(--anapnoe-section-padding-x);
	padding-top: 100px; /* wie die anderen Seiten (Header-Abstand) */
	min-height: 60vh;
}

.anapnoe-error-page__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.anapnoe-error-page__title {
	font-size: 30px;
	line-height: normal;
	letter-spacing: 0.01em;
	margin: 0 0 0.5em;
}

.anapnoe-error-page__text {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0.02em;
	margin: 0 0 1.5em;
}

.anapnoe-error-page__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	font-size: 20px;
	line-height: 24px;
}

/* !important wie im Footer: globale Link-Regel setzt text-decoration: none !important */
.anapnoe-error-page__nav a {
	text-decoration: underline !important;
}

.anapnoe-error-page__nav a:hover,
.anapnoe-error-page__nav a:focus-visible {
	opacity: 0.7;
}

/* ==========================================================================
   Rechtliche Seiten (Datenschutz, Rechtliches, Impressum etc.)
   Schlicht, gut lesbar, begrenzte Textbreite.
   ========================================================================== */
.anapnoe-legal-page {
	padding: var(--anapnoe-section-padding-y) var(--anapnoe-section-padding-x);
	padding-top: 100px; /* fester Wert statt JS-Messung: verhindert Browser-spezifische Abweichungen (z. B. Firefox) */
}

.anapnoe-legal-page__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: left;
}

.anapnoe-legal-page__inner h1 {
	text-align: left;
}

.anapnoe-legal-page__content {
	line-height: 1.7;
}

.anapnoe-legal-page__content h2,
.anapnoe-legal-page__content h3 {
	margin-top: 1.4em;
}

.anapnoe-legal-page__content p,
.anapnoe-legal-page__content li {
	font-size: 20px;
	line-height: 31px;
}

.anapnoe-legal-page__content ul,
.anapnoe-legal-page__content ol {
	padding-left: 1.2em;
}

/* Rechtliche Seiten (Datenschutz, Impressum …): Header invertiert –
   dunkles Navy als Hintergrund, Logo und Hamburger hell. Im geöffneten
   Zustand ist der Header ohnehin Navy mit hellen Elementen. */
body.page-template-template-legal-php .anapnoe-header {
	background: var(--anapnoe-color-dark);
}

body.page-template-template-legal-php .anapnoe-logo-text {
	color: var(--anapnoe-color-white);
}

body.page-template-template-legal-php .anapnoe-burger span {
	background: var(--anapnoe-color-white);
}

/* ==========================================================================
   Split-Layout: Bild + Text nebeneinander (Du/Ich/Wir/Kontakt-Intro)
   Mobile: gestapelt. Ab Desktop (siehe Breakpoint weiter unten): 2 Spalten.
   ========================================================================== */
.anapnoe-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	text-align: left;
	position: relative;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.anapnoe-split__image {
	text-align: center;
}

.anapnoe-split__image img {
	border-radius: 0;
	margin: 0 auto;
}

.anapnoe-split__content {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.anapnoe-split__text {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.anapnoe-split__content h1 {
	text-align: left;
}

/* --- 5. Lauftext (Ich/Kontakt): Suisse Intl Book 20 / 31 / 2% ---
   Gilt als Standard für alle Absätze im Split-Content. Auf Du/Wir werden
   Absatz 1 und 3 davon gezielt abweichend gestaltet (siehe unten). */
.anapnoe-split__content p a,
.anapnoe-practice-info p a {
	text-decoration: underline !important;
}

.anapnoe-split__content p,
.anapnoe-practice-info p {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0.02em;
	margin: 0 0 1em;
}

/* --- 6.–8. Lauftext Du/Wir: 3 bewusst unterschiedliche Absätze (Figma-Vorgabe).
   Bewusst auf Du/Wir beschränkt (nicht Ich/Kontakt, die Rich-Text mit
   mehreren Absätzen aus dem WYSIWYG-Editor nutzen, siehe Punkt 5 oben). */
body.page-template-template-du-php .anapnoe-split__content p:nth-of-type(1),
body.page-template-template-wir-php .anapnoe-split__content p:nth-of-type(1) {
	font-family: var(--anapnoe-font-heading);
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0.01em;
}

body.page-template-template-du-php .anapnoe-split__content p:nth-of-type(3),
body.page-template-template-wir-php .anapnoe-split__content p:nth-of-type(3) {
	font-family: var(--anapnoe-font-heading);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.01em;
}

/* Grösserer Abstand zwischen den drei Textabschnitten (Du/Wir) */
body.page-template-template-du-php .anapnoe-split__content p,
body.page-template-template-wir-php .anapnoe-split__content p {
	margin-bottom: 2em;
}

/* --- 4. H4 – Frage/Titel (Ich-Bio-Zwischentitel, Kontakt-Praxis-Info):
   Suisse Intl Book 24 / 34 / 2%, immer in Akzent-Orange.
   Bewusst als <h4> mit eigener Klasse statt <h3>: h1/h2/h3 werden von
   GeneratePress' main.min.css überschrieben (siehe Hinweis oben) und
   brauchen deshalb !important + Kämpfe um Reihenfolge/Spezifität. h4 ist
   davon nicht betroffen, daher genügt hier eine einfache, robuste Klasse
   ohne !important – auch die "Kosten"-Ausnahme lässt sich so einfach
   überschreiben. */
.anapnoe-qa-title {
	color: var(--anapnoe-color-accent);
	font-family: var(--anapnoe-font-body);
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.02em;
	font-weight: 500;
	margin: 0;
}

/* Ausnahme: "Kosten"-Titel dezent in Mauve statt Orange. */
.anapnoe-qa-title--kosten {
	color: var(--anapnoe-color-mauve);
}

/* ==========================================================================
   Individuelle Seiten-Hintergründe (Du / Ich / Wir / Kontakt)
   Nutzt WordPress' automatische Body-Klasse pro Seitenvorlage, kein
   zusätzliches Marker-Markup in den Templates nötig.
   ========================================================================== */

/* Header passt sich farblich der jeweiligen Seite an (ausser wenn das Menü
   offen ist – dort gewinnt immer die dunkle Farbe, siehe !important oben).
   Kontakt/Startseite brauchen keine eigene Regel, die nutzen bereits das
   Standard-Gelb der .anapnoe-header-Basis-Regel. */
body.page-template-template-du-php .anapnoe-header {
	background: var(--anapnoe-color-olive);
}

body.page-template-template-wir-php .anapnoe-header {
	background: var(--anapnoe-color-accent);
}

body.page-template-template-ich-php .anapnoe-header {
	background: var(--anapnoe-color-mauve);
}

/* Logo-Text und Burger-Striche auf den dunkleren Seiten-Headern weiss,
   damit sie lesbar/sichtbar bleiben (auf Gelb bleiben sie dunkel). */
body.page-template-template-du-php .anapnoe-logo-text,
body.page-template-template-wir-php .anapnoe-logo-text,
body.page-template-template-ich-php .anapnoe-logo-text {
	color: var(--anapnoe-color-white);
}

body.page-template-template-du-php .anapnoe-burger span,
body.page-template-template-wir-php .anapnoe-burger span,
body.page-template-template-ich-php .anapnoe-burger span {
	background: var(--anapnoe-color-white);
}

/* --- Seite "Du": Oliv-Hintergrund, weisser Text, orange Grid-Karten --- */
body.page-template-template-du-php .anapnoe-page-intro,
body.page-template-template-du-php .anapnoe-grid-section {
	background: var(--anapnoe-color-olive);
	color: var(--anapnoe-color-white);
}

body.page-template-template-du-php .anapnoe-page-intro h1,
body.page-template-template-du-php .anapnoe-grid-section h2 {
	color: var(--anapnoe-color-white);
}

body.page-template-template-du-php .anapnoe-btn--dark {
	border-color: var(--anapnoe-color-white);
	color: var(--anapnoe-color-white);
}

body.page-template-template-du-php .anapnoe-btn--dark:hover {
	background: var(--anapnoe-color-white);
	color: var(--anapnoe-color-olive) !important;
}

body.page-template-template-du-php .anapnoe-grid__item {
	background: var(--anapnoe-color-accent);
	color: var(--anapnoe-color-white);
}

body.page-template-template-du-php .anapnoe-grid-section__subtitle {
	color: var(--anapnoe-color-white);
	font-family: var(--anapnoe-font-heading);
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0.01em;
	font-style: normal;
	opacity: 0.9;
}

/* Popup-Farben analog dem oberen Seitenbereich (Oliv, weisser Text) */
body.page-template-template-du-php .anapnoe-modal__dialog {
	background: var(--anapnoe-color-olive);
}

/* --- Seite "Wir": Orange-Hintergrund, weisser Text, olive Grid-Karten --- */
body.page-template-template-wir-php .anapnoe-page-intro,
body.page-template-template-wir-php .anapnoe-grid-section {
	background: var(--anapnoe-color-accent);
	color: var(--anapnoe-color-white);
}

body.page-template-template-wir-php .anapnoe-page-intro h1,
body.page-template-template-wir-php .anapnoe-grid-section h2 {
	color: var(--anapnoe-color-white);
}

body.page-template-template-wir-php .anapnoe-grid-section__subtitle {
	color: var(--anapnoe-color-white);
	font-family: var(--anapnoe-font-heading);
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0.01em;
	font-style: normal;
	opacity: 0.9;
}

/* Popup-Farben analog dem oberen Seitenbereich (Orange, weisser Text) */
body.page-template-template-wir-php .anapnoe-modal__dialog {
	background: var(--anapnoe-color-olive);
}

body.page-template-template-wir-php .anapnoe-btn--dark {
	border-color: var(--anapnoe-color-white);
	color: var(--anapnoe-color-white);
}

body.page-template-template-wir-php .anapnoe-btn--dark:hover {
	background: var(--anapnoe-color-white);
	color: var(--anapnoe-color-accent) !important;
}

body.page-template-template-wir-php .anapnoe-grid__item {
	background: var(--anapnoe-color-olive);
	color: var(--anapnoe-color-white);
}

/* --- Seite "Ich": Mauve-Hintergrund (Intro), olive Testimonials-Sektion --- */
body.page-template-template-ich-php .anapnoe-page-intro {
	background: var(--anapnoe-color-mauve);
	color: var(--anapnoe-color-white);
}

/* Auf "Ich" abweichende Akzentfarbe (Gelb statt Orange) für Zwischentitel
   und den Weiterbildungen-Link – bewusst anders als auf "Kontakt". */
body.page-template-template-ich-php .anapnoe-qa-title,
body.page-template-template-ich-php .anapnoe-list-block__trigger {
	color: var(--anapnoe-color-primary);
}

body.page-template-template-ich-php .anapnoe-page-intro h1 {
	color: var(--anapnoe-color-white);
}

body.page-template-template-ich-php .anapnoe-btn--dark {
	border-color: var(--anapnoe-color-white);
	color: var(--anapnoe-color-white);
}

body.page-template-template-ich-php .anapnoe-btn--dark:hover {
	background: var(--anapnoe-color-white);
	color: var(--anapnoe-color-mauve) !important;
}

body.page-template-template-ich-php .anapnoe-list-block {
	color: var(--anapnoe-color-white);
}

body.page-template-template-ich-php .anapnoe-testimonials-section {
	background: var(--anapnoe-color-olive);
	color: var(--anapnoe-color-white);
}

body.page-template-template-ich-php .anapnoe-testimonials-section h2 {
	color: var(--anapnoe-color-white);
}

body.page-template-template-ich-php .anapnoe-testimonial {
	background: transparent;
	color: var(--anapnoe-color-white);
	padding: 0;
	border: none;
	box-shadow: none;
	text-align: center;
}

body.page-template-template-ich-php .anapnoe-testimonial cite {
	color: var(--anapnoe-color-white);
}

/* --- Seite "Kontakt": Gelber Intro-Bereich (wie die Startseite) --- */
body.page-template-template-kontakt-php .anapnoe-page-intro {
	background: var(--anapnoe-color-primary);
}

body.page-template-template-kontakt-php .anapnoe-certificates {
	margin-top: 8px;
}

/* ==========================================================================
   Footer – nach dem vom Kunden geschickten Screenshot aufgebaut.
   Mobile: Spalten stapeln sich in logischer Lesereihenfolge.
   Ab Desktop (siehe Breakpoints weiter unten): 6-spaltiges Grid.
   ========================================================================== */
.anapnoe-footer {
	background: rgba(232, 229, 233, 0.6);
	padding: 40px 20px 0;
	position: relative;
	font-size: 16px;
}

.anapnoe-footer__grid {
	max-width: var(--anapnoe-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	row-gap: 40px;
	column-gap: 64px;
}

/* Mobile: der Wrapper selbst "verschwindet" (display:contents), damit
   Ich/Du/Wir/Kontakt und Logo/Claim wieder als eigenständige, einzeln
   stapelbare Blöcke behandelt werden – exakt wie vor der Umstrukturierung.
   Die Reihenfolge wird über "order" auf die ursprüngliche Mobile-Reihenfolge
   zurückgesetzt (Logo/Claim ganz zuletzt), da es im HTML jetzt direkt nach
   der Kopfzeile steht (wichtig für Tablet/Desktop, siehe unten). */
.anapnoe-footer__top-row {
	display: contents;
}

.anapnoe-footer__top-row .anapnoe-footer__col-group {
	order: 1;
}

.anapnoe-footer__top-row .anapnoe-footer__col--badge {
	order: 4;
}

.anapnoe-footer__col--lang {
	order: 2;
}

.anapnoe-footer__links-group {
	order: 3;
}

.anapnoe-footer__col {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.anapnoe-footer__col--lang {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 16px;
}

/* Gruppe "Ich/Du/Wir + Kontakt": eigener Block, engerer Innenabstand als
   der Abstand zu den übrigen Footer-Blöcken. */
.anapnoe-footer__col-group {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Block: Ich / Du / Wir / Kontakt nebeneinander, unterstrichen */
.anapnoe-footer__col--nav {
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
}

.anapnoe-footer__col--kontakt {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.anapnoe-footer__col--nav a {
	text-decoration: underline !important;
}

.anapnoe-footer__col-title {
	font-weight: 500;
	text-decoration: underline !important;
}

.anapnoe-footer__contact a {
	text-decoration: none;
}

.anapnoe-footer__address {
	font-style: normal;
	line-height: 1.5;
}

/* Block: Sprachumschalter */
.anapnoe-footer__lang-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
}

.anapnoe-footer__lang-list a {
	text-decoration: underline !important;
}

/* Block: Partnerschaften + Haltung & Zugang – gemeinsamer Block, die zwei
   Spalten darin liegen nebeneinander (eigener Zeilenumbruch nur, falls der
   Platz für beide nicht reicht). */
.anapnoe-footer__links-group {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
}

/* Titel ohne Unterstrich, Links darunter in Akzentfarbe ohne Unterstrich */
.anapnoe-footer__col--links .anapnoe-footer__col-title {
	text-decoration: none !important;
	margin-bottom: 4px;
}

.anapnoe-footer__col--links .anapnoe-footer__link--accent {
	color: var(--anapnoe-color-accent) !important;
	transition: opacity 0.15s ease;
}

.anapnoe-footer__col--links .anapnoe-footer__link--accent:hover,
.anapnoe-footer__col--links .anapnoe-footer__link--accent:focus-visible {
	text-decoration: underline !important;
	opacity: 0.75;
}

/* Block: rundes Logo-Badge + Claim. margin-left/right:auto ist der Trick,
   der beides zugleich löst: Steht der Block allein auf einer Zeile, wird
   er dadurch automatisch zentriert (Flexbox-Auto-Margins teilen den
   übrigen Platz gleichmässig auf). Rutscht er stattdessen zur obersten
   Zeile dazu (genug Platz neben Ich/Du/Wir/Kontakt), schiebt ihn dasselbe
   margin-left: auto ganz an den rechten Rand – kein Breakpoint nötig. */
.anapnoe-footer__col--badge {
	align-items: center;
	text-align: center;
	gap: 16px;
	margin-left: auto;
	margin-right: auto;
}

.anapnoe-footer__badge-logo {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	animation: anapnoe-rotate 20s linear infinite;
}

@keyframes anapnoe-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.anapnoe-footer__badge-logo {
		animation: none;
	}
}

.anapnoe-footer__badge-placeholder {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: var(--anapnoe-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--anapnoe-color-dark);
	font-family: var(--anapnoe-font-heading);
	font-size: 0.9rem;
}

.anapnoe-footer__claim {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	max-width: 220px;
}

/* Bottom-Zeile: Cookie-Button links, Copyright mittig, Nach-oben rechts */
.anapnoe-footer__bottom {
	max-width: var(--anapnoe-max-width);
	margin: 32px auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	position: relative;
	min-height: 48px;
}

/* Mobile: abweichende Anordnung – Copyright oben, darunter eine breite
   Cookie-Pille über die volle Breite, der Nach-oben-Kreis überlappt deren
   obere rechte Ecke (siehe Referenzbild). Ab Tablet (600px+) wieder die
   normale, freistehende Anordnung. */
.anapnoe-footer__copyright {
	order: 1;
}

.anapnoe-footer__totop {
	position: absolute;
	right: 8px;
	bottom: 26px;
}

/* !important: GeneratePress stylet <button>-Elemente mit eigenen
   Standardfarben (u. a. weisser Text), wodurch z. B. der Pfeil im
   "Nach oben"-Button unsichtbar wurde. */
.anapnoe-footer__cookie-btn {
	background: var(--anapnoe-color-white) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 10px 20px;
	cursor: pointer;
	font-family: var(--anapnoe-font-body) !important;
	font-size: 0.85rem;
	color: var(--anapnoe-color-dark) !important;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Mobile: Cookie-Button als breite Pille über die volle Breite, Copyright
   steht darüber (order: 1 oben), der Nach-oben-Kreis überlappt die obere
   rechte Ecke der Pille (siehe Referenzbild). Ab Tablet (600px+) wieder
   die normale, freistehende Anordnung (siehe dortiger Breakpoint). */
.anapnoe-footer__cookie-btn {
	order: 2;
	box-sizing: border-box;
	border-radius: 0 !important;
	text-align: center;
}

.anapnoe-footer__cookie-btn:hover {
	background: var(--anapnoe-color-dark) !important;
	color: var(--anapnoe-color-white) !important;
}

.anapnoe-footer__copyright {
	text-align: center;
	font-size: 0.8rem;
	margin: 0;
}

.anapnoe-footer__copyright a {
	text-decoration: underline !important;
}

/* !important + explizites Padding/Box-Sizing: GeneratePress addiert eigenes
   Button-Padding zur festen Breite/Höhe hinzu, wodurch aus dem Kreis sonst
   eine Ellipse wird. box-sizing: border-box + padding: 0 verhindert das. */
.anapnoe-footer__totop {
	box-sizing: border-box !important;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	padding: 0 !important;
	margin: 0;
	border-radius: 50% !important;
	border: none !important;
	background: var(--anapnoe-color-white) !important;
	color: var(--anapnoe-color-dark) !important;
	cursor: pointer;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.anapnoe-footer__totop:hover {
	background: var(--anapnoe-color-dark) !important;
	color: var(--anapnoe-color-white) !important;
}

.anapnoe-footer__totop svg {
	flex-shrink: 0;
}

/* ==========================================================================
   FOOTER – ab 600px durchgehend: Ich/Du/Wir/Kontakt, Sprache, Link-Listen
   und Logo/Claim sind vier gleichwertige, eigenständige Blöcke. Logo bleibt
   dank margin-left: auto (siehe Basis-Regel) immer am echten rechten Rand
   der jeweiligen Zeile – auf welcher Zeile es landet, ergibt sich rein
   dynamisch aus dem verfügbaren Platz, ohne harten Sprung an einem
   bestimmten Breakpoint. Sprache bekommt Wrap-Priorität vor den Link-Listen
   (wrappt bevorzugt zuerst, sobald der Platz eng wird).
   ========================================================================== */
@media (min-width: 600px) {
	.anapnoe-footer__top-row {
		display: contents;
	}

	.anapnoe-footer__col-group {
		order: 1;
	}

	.anapnoe-footer__col--lang {
		order: 2;
	}

	.anapnoe-footer__links-group {
		order: 3;
	}

	.anapnoe-footer__col--badge {
		order: 4;
	}
}

/* ==========================================================================
   TABLET UND AUFWÄRTS (min-width: 600px)
   Ab hier wird das Basis-Layout gezielt erweitert – Mobile-First-Prinzip:
   nichts wird "zurückgebaut", nur ergänzt/vergrössert.
   ========================================================================== */
@media (min-width: 600px) {
	:root {
		--anapnoe-section-padding-x: 28px;
		--anapnoe-section-padding-y: 56px;
	}

	body { font-size: 16px; }

	/* Bottom-Zeile: ab hier wieder freistehende Anordnung statt der Mobile-
	   Pille – Cookie-Button links, Copyright mittig, Nach-oben rechts. */
	.anapnoe-footer__bottom {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.anapnoe-footer__copyright {
		order: 0;
	}

	.anapnoe-footer__cookie-btn {
		position: absolute;
		left: 0;
		bottom: 0;
		order: 0;
		width: auto;
		border-radius: 0 !important;
	}

	.anapnoe-footer__totop {
		right: 0;
		bottom: 0;
	}

	.anapnoe-hero,
	.anapnoe-page-intro,
	.anapnoe-legal-page {
		margin-top: 0;
	}

	.anapnoe-header__inner {
		padding: 22px 28px;
	}

	.anapnoe-hero__image,
	.anapnoe-claim__image,
	.anapnoe-page-intro__image {
		max-width: 640px;
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.anapnoe-hero__image--mobile {
		display: none;
	}

	.anapnoe-hero__image--desktop {
		display: block;
	}

	.anapnoe-page-intro__text,
	.anapnoe-list-block,
	.anapnoe-practice-info {
		max-width: 640px;
	}

	.anapnoe-testimonials-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

/* ==========================================================================
   FOOTER – eigene Breakpoints, unabhängig vom Rest der Seite (Tablet ab
   800px statt 600px, Desktop ab 1100px statt 900px – siehe unten).
   ========================================================================== */
/* Grid-Boxen (Wirkungsfelder/Zugänge): unter 600px 1 Spalte, ab 600px
   2 Spalten, ab 1200px 3 Spalten (siehe unten). */
@media (min-width: 600px) {
	.anapnoe-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	/* Innenabstand hängt an der Spaltenzahl, nicht am Desktop-Breakpoint:
	   1 Spalte 24px, ab 2 Spalten (und bei 3) konstant 40px – kein Sprung mehr. */
	.anapnoe-grid__item {
		padding: 40px;
	}
}

/* ==========================================================================
   DESKTOP UND AUFWÄRTS (min-width: 900px)
   Entspricht dem Figma-Design (MacBook-Pro-Canvas).
   ========================================================================== */
@media (min-width: 900px) {
	:root {
		--anapnoe-section-padding-x: 40px;
		--anapnoe-section-padding-y: 80px;
	}

	body h1 { font-size: 150px; }
	body h2 { font-size: 48px; }

	.anapnoe-error-page__title {
		font-size: 48px;
	}

	.anapnoe-error-page__text {
		font-size: 20px;
		line-height: 31px;
	}

	.anapnoe-error-page__nav {
		font-size: 24px;
		line-height: 34px;
		gap: 12px 40px;
	}

	.anapnoe-btn {
		margin-left: 0;
		margin-right: 0;
	}

	/* Ausnahme: Auf der Startseite bleibt der Button zentriert (Du/Ich/Wir/
	   Kontakt sollen dagegen wie ursprünglich linksbündig bleiben). */
	body.home .anapnoe-btn,
	body.page-template-template-home-php .anapnoe-btn {
		margin-left: auto;
		margin-right: auto;
	}

	body.page-template-template-du-php .anapnoe-grid-section__subtitle,
	body.page-template-template-wir-php .anapnoe-grid-section__subtitle {
		font-size: 24px;
	}

	/* 4. H4 – Frage/Titel (Ich/Kontakt) */
	.anapnoe-qa-title {
		font-size: 24px;
		line-height: 34px;
	}

	/* 5. + 7. Lauftext (Ich/Kontakt + Du/Wir Absatz 2) */
	.anapnoe-split__content p,
	.anapnoe-practice-info p {
		font-size: 20px;
		line-height: 31px;
	}

	/* 6. Lauftext Du/Wir – 1. Abschnitt */
	body.page-template-template-du-php .anapnoe-split__content p:nth-of-type(1),
	body.page-template-template-wir-php .anapnoe-split__content p:nth-of-type(1) {
		font-size: 30px;
		line-height: 41px;
	}

	/* 8. Lauftext Du/Wir – 3. Abschnitt */
	body.page-template-template-du-php .anapnoe-split__content p:nth-of-type(3),
	body.page-template-template-wir-php .anapnoe-split__content p:nth-of-type(3) {
		font-size: 24px;
		line-height: 34px;
	}

	/* 9. Button */
	.anapnoe-btn {
		font-size: 24px;
	}

	/* 11. Testimonials */
	.anapnoe-testimonial p,
	.anapnoe-testimonial cite {
		font-size: 24px;
		line-height: 34px;
	}

	/* 12. Footer */
	.anapnoe-footer {
		font-size: 18px;
	}


	.anapnoe-hero,
	.anapnoe-page-intro,
	.anapnoe-legal-page {
		margin-top: 0;
	}


	.anapnoe-header__inner {
		padding: 28px 40px;
	}

	.anapnoe-logo-text { font-size: 30px; }

	.anapnoe-modal__dialog {
		max-width: 760px;
		padding: 56px;
	}

	body.page-template-template-kontakt-php .anapnoe-certificates {
		justify-content: flex-start;
	}

	.anapnoe-split {
		grid-template-columns: 1fr 1fr;
		gap: 64px; /* grösserer Gesamtabstand: mehr Luft zwischen Bild und Linie */
		align-items: start;
	}

	/* Feine vertikale Trennlinie zwischen Bild und Text – nur ab Desktop,
	   wenn wirklich 2-spaltig dargestellt wird. Als border-left am Text
	   umgesetzt (robuster als ein frei positioniertes Element), mit
	   eigenem Innenabstand, damit die Linie nicht direkt am Text klebt.
   Die Linie hängt am Text-Wrapper (.anapnoe-split__text) und endet damit
   mit dem Text – neben dem Button gibt es keine Linie mehr.
	   currentColor sorgt dafür, dass die Linie automatisch weiss (auf
	   farbigem Hintergrund) oder navy (auf Gelb, z. B. Kontakt) erscheint. */
	.anapnoe-split__text {
		border-left: 1px solid currentColor;
		padding-left: 32px;
	}

	/* Button steht unter dem Text auf gleicher Einrückung, aber ohne Linie. */
	.anapnoe-split__content > .anapnoe-btn {
		margin-left: 33px; /* 1px Linie + 32px Abstand = Textkante */
		width: calc(100% - 33px);
	}

	.anapnoe-split .anapnoe-split__image {
		order: 1;
	}

	.anapnoe-split .anapnoe-split__content {
		order: 2;
	}


	.anapnoe-hero__image,
	.anapnoe-claim__image,
	.anapnoe-page-intro__image {
		max-width: 800px;
	}

	.anapnoe-page-intro__text,
	.anapnoe-list-block,
	.anapnoe-practice-info {
		max-width: 700px;
	}

	.anapnoe-testimonials-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		margin-top: 64px;
	}

	.anapnoe-grid {
		margin-top: 64px;
	}

	.anapnoe-certificates__logo {
		max-height: 80px;
	}
}

/* ==========================================================================
   FOOTER – ab 1365px etwas grosszügigerer Abstand zwischen den Blöcken
   (die grundsätzliche Anordnung übernimmt flex-wrap dynamisch, siehe
   .anapnoe-footer__grid weiter oben – kein separates Grid-Layout mehr
   nötig).
   ========================================================================== */
/* Grid-Boxen (Wirkungsfelder/Zugänge) bewusst erst ab 1200px 3-spaltig –
   bleiben bis dahin 2-spaltig (siehe 600px-Regel weiter oben), auch wenn
   der Rest der Seite schon bei 900px ins Desktop-Layout wechselt. */
@media (min-width: 1200px) {
	.anapnoe-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.anapnoe-grid-item-title {
		font-size: 24px;
		line-height: 34px;
	}
}

@media (min-width: 1365px) {
	.anapnoe-footer__grid {
		column-gap: 100px;
	}

	.anapnoe-footer__copyright {
		font-size: 0.85rem;
	}

	.anapnoe-footer__bottom {
		margin-top: 64px;
	}
}