/*
 Theme Name:   ART.athletes
 Theme URI:    https://generatepress.com
 Description:  GeneratePress child theme
 Author:       Juliane de Vries, Webentwicklung ju:like
 Author URI:   https://ju-like.de
 Template:     generatepress
 Version:      0.1
*/
:root {
	--art-schwarz: #1A1A1A;
	--art-aubergine: #4B1F3A;
	--art-brass: #A3937D;
	--art-gruen: #0F3B2E;
	--art-ring: #EBE5DA;
	--art-bone: #EAE3D7;
	--art-cloud-schrift: #F2F0EB;
}
::selection {
	color: var(--art-aubergine);
	background-color: var(--art-brass);
}
/* Sichtbare Focus state weg*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-button__link:focus-visible {
    outline: none !important;
    outline-offset: 2px;
}

/* nur bei Mausklick unterdrücken, bei Tastatur bleibt er sichtbar */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none !important;
}
/* 	Fixed/Overlay-Header: transparent bis zum Scrollen, dann Aubergine-
	Hintergrund (Klasse .is-scrolled wird per js/custom.js beim Scrollen
	gesetzt). */
.art-header {
	position: relative;
	transition: background-color 0.3s ease;
}
.art-header.is-scrolled {
	background-color: var(--art-aubergine);
}
/* Mobile-Menü-Dropdown: immer Aubergine-Hintergrund, unabhängig davon,
   ob der (transparente/überlagernde) Header gerade gescrollt ist oder
   nicht. BB klont das Menü bei mobileBelowRow auf ".fl-menu-mobile-clone",
   das eigentliche Klapp-Menü sitzt dort in .menu. */
.art-header .fl-menu-mobile-clone,
.art-header .fl-menu-mobile-clone .menu {
	background-color: var(--art-aubergine) !important;
}
.art-header .fl-menu-mobile-clone .menu-item a {
	color: var(--art-cloud-schrift) !important;
}
/* Mobiler Menü-Toggle (Hamburger-Icon des BB-Menü-Moduls): dünnere Striche.
   BB rendert das Icon nicht als Font-Icon, sondern als Inline-SVG mit drei
   gefüllten <rect>-Balken (.fl-hamburger-menu-top/-middle/-bottom) in einer
   viewBox="0 0 512 512". Default height="102". Die "Strichdicke" ist damit
   die Rect-Höhe, nicht ein stroke - height per CSS reduziert (SVG-Geometrie-
   properties wie height/y sind per CSS überschreibbar, Priorität höher als
   die HTML-Attribute). y wird um die halbe Differenz zur alten Höhe (102 -> 56,
   Differenz 46, halbe 23) verschoben, damit die Mittellinie jedes Balkens
   gleich bleibt und das Icon weiterhin symmetrisch/zentriert wirkt. */
.art-header .fl-hamburger-menu-top,
.art-header .fl-hamburger-menu-middle,
.art-header .fl-hamburger-menu-bottom {
	height: 56px;
}
.art-header .fl-hamburger-menu-top {
	y: 23px;
}
.art-header .fl-hamburger-menu-middle {
	y: 228px;
}
.art-header .fl-hamburger-menu-bottom {
	y: 433px;
}
/* Logo-Wechsel im Header: zwei SVGs (Figures .logo_fixed/.logo_scrolled).
   .logo_fixed ist sichtbar, solange nicht gescrollt wurde; .logo_scrolled
   erst danach (Klasse .is-scrolled setzt js/custom.js beim Scrollen). */
.art-header .logo_scrolled {
	display: none;
}
.art-header.is-scrolled .logo_fixed {
	display: none;
}
.art-header.is-scrolled .logo_scrolled {
	display: block;
}
a {
    text-decoration: none;
}
* {
	font-family: var(--gp-font--arboria);
}
h1, h2 {
	font-family: 'Italiana';
}
/* Beaver Builder "Volle Höhe" (Row-Einstellung) macht die Hero-Row per
   min-height:100vh hoch - inkl. korrekt mitwachsendem Hintergrund, da BB
   das intern selbst über Flex/Height verdrahtet. Gewünscht ist stattdessen
   100dvh auf allen Gerätegrößen (berücksichtigt z.B. die Adressleiste bei
   mobilen Browsern korrekt). !important nötig, da BBs eigene Regel auf
   den Node-ID-Klassen sitzt und dadurch spezifischer ist. */
.hero > .fl-row-content-wrap {
	min-height: 100dvh !important;
}
/* Die Hero-Row liegt unter dem transparenten/überlagernden Header
   (.art-header) - deshalb ab Tablet abwärts zusätzlich Luft nach oben.
   Tablet braucht mehr Abstand als das Handy (größerer Header). BB richtet
   den gesamten Inhalt per Row-Einstellung "Vertikale Ausrichtung: Unten"
   aus (.fl-row-align-bottom -> align-items/justify-content: flex-end) -
   auf Tablet/Handy stattdessen Überschrift+Button vertikal zentrieren.
   Das kleine Bild/der Pfeil (letzte .fl-col-group in der Hero-Row, auf
   allen Hero-Seiten die 3. Gruppe: Text, Button(s), Icon) bleibt dabei
   unten "kleben" - dafür wird es aus dem Flex-Fluss genommen und relativ
   zur Row absolut am unteren Rand positioniert (.fl-row-content-wrap hat
   bereits position:relative aus dem BB-Core-CSS). */
@media (max-width: 992px) {
	.hero .fl-row-content > .fl-col-group:last-child {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		margin: 0;
	}
}
@media (min-width: 769px) and (max-width: 992px) {
	.hero > .fl-row-content-wrap {
		padding-top: 160px !important;
		/* Mehr Bottom- als Top-Padding verschiebt den vertikal
		   zentrierten Inhalt etwas nach oben (Zentrum liegt zwischen
		   den Padding-Kanten). */
		padding-bottom: 220px !important;
		align-items: center !important;
		justify-content: center !important;
	}
}
@media (max-width: 768px) {
	.hero > .fl-row-content-wrap {
		padding-top: 100px !important;
		padding-bottom: 220px !important;
		align-items: center !important;
		justify-content: center !important;
	}
}
.hero h1 {
	font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.6rem);
	color: var(--art-cloud-schrift) !important;
}
.stellenanzeige h1 {
	font-size: clamp(2.2rem, 1.2rem + 3.0vw, 4.0rem);
	
}
h2 {
	font-family: 'Italiana';
	color: var(--art-aubergine);
	font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.1rem);
	margin: 0;
}
/* Impressum (page-id-32) und Datenschutz (page-id-36): reiner Fließtext mit
   H1 > H2 > H3 > H4 als Inhaltsgliederung statt Marketing-Section. Die
   globale H2 (bis 4.1rem) ist dort groesser als die dortige H1 (GeneratePress-
   Default 42px) und wirkt der Hierarchie entgegen - deutlich kleiner setzen,
   sodass H2 sichtbar unter H1 und ueber H3 (max. 1.6rem) liegt. */
.page-id-32 h2, .page-id-36 h2 {
	font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.25rem);
}
.stellenanzeige h2 {
	font-family: var(--gp-font--arboria);
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 2px;
}
h3 {
    font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.6rem);
    text-transform: uppercase;
	font-weight: 600;
    letter-spacing: 2px;  
}
.stellenanzeige h3 {
	font-family: var(--gp-font--arboria);
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: none;
}
h4 {
	font-size: clamp(1rem, 0.925rem + 0.3vw, 1.4rem);
	text-transform: uppercase;
	font-weight: 600;
    letter-spacing: 1.6px;
   
}
.leistungen-raster h4, .behandlungsfelder-raster h4 {
	text-transform: none;
	font-size: 1em;
	font-weight: 500;
	margin-bottom: 15px;
}
/* Multi-Background (Foto + Farbverlauf) der behandlungsfelder-raster-Row:
   das gekachelte Foto hat ab Tablet abwaerts (sehr hohe Row) immer wieder
   sichtbare Nahtstellen verursacht (repeat-y-Kante, danach SVG/JPG-Mirror-
   Kachel-Versuche mit eigenen Problemen - Safari/WebKit rendert das Foto
   in nicht-inline SVGs teils gar nicht). Einfachere, robuste Loesung:
   Foto ab Tablet abwaerts komplett weglassen, Flaeche stattdessen voll
   aubergine. */
@media (max-width: 992px) {
	.behandlungsfelder-raster > .fl-row-content-wrap {
		background-image: none !important;
		background-color: var(--art-aubergine) !important;
	}
}
/* Leistungen-Raster (Krankengymnastik/Manuelle Therapie etc.): BB setzt
   Kind-Boxen per Responsive-Layout-Einstellung ab 992px auf aspect-ratio
   4/5 (fuer die 2-spaltige Tablet-Ansicht). Diese Regel gilt aber weiter
   fuer JEDE Breite <=992px, auch nachdem BB die Boxen ab 768px wieder auf
   1-spaltig umstellt - dort erzwingt sie pro Box eine feste, breitenab-
   haengige Hoehe statt sich am Inhalt zu orientieren. Je breiter das Handy,
   desto hoeher (und leerer) wird dadurch jede Box, weil der Text auf
   weniger Zeilen umbricht, die erzwungene Boxhoehe aber mitwaechst -
   dadurch wirken die Abstaende zwischen den Boxen auf groesseren Handys
   (z.B. iPhone, ~440px) deutlich groesser als auf kleineren (z.B. Galaxy,
   ~360px). Ab 768px die erzwungene Ratio wieder aufheben, Boxhoehe richtet
   sich dann nur noch nach ihrem Inhalt. */
@media (max-width: 768px) {
	.leistungen-raster > * {
		aspect-ratio: auto !important;
	}
}
.section-headline h3 {
    text-transform: uppercase;
    font-size: 1rem !important;
    letter-spacing: 1px;
    margin-bottom: 5px;
	font-weight: 300;
}
@media (max-width: 768px) {
	.section-headline {
		margin-bottom: 15px !important;
	}
}
#menu-main-menu-top a {
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
}
#menu-main-menu-top a:hover,
#menu-main-menu-top a:active,
#menu-main-menu-top a:focus {
	font-weight: 500;
}
/* Aktueller Menüpunkt fett. WordPress setzt .current-menu-item automatisch
   auf Unterseiten; Kontakt ist dagegen ein Sprunganker auf der Startseite
   und bekommt die Klasse .menu-item-current-scroll stattdessen per
   IntersectionObserver in js/custom.js, sobald die Section im Viewport ist.
   Der :not([href$="#Kontakt"])-Ausschluss ist nötig, weil WordPress den
   Kontakt-Link (Ziel-URL endet auf "/#Kontakt") beim Rendern serverseitig
   fälschlich als current-menu-item markiert, sobald man auf der Startseite
   ist (der Fragment-Teil wird beim URL-Abgleich ignoriert) - ohne den
   Ausschluss wäre Kontakt permanent fett, unabhängig vom Scroll-Observer.
   Gilt auch fürs geklonte Mobile-Menü (.fl-menu-mobile-clone), da BB die
   Links 1:1 dorthin kopiert. */
#menu-main-menu-top .current-menu-item > a:not([href$="#Kontakt"]),
#menu-main-menu-top a.menu-item-current-scroll,
.art-header .fl-menu-mobile-clone .menu .current-menu-item > a:not([href$="#Kontakt"]),
.art-header .fl-menu-mobile-clone .menu a.menu-item-current-scroll {
	font-weight: 700;
}
/* Smooth Scroll zu Sprungankern (z.B. #Kontakt), mit Offset für den
   fixen/überlagernden Header. --art-header-height wird von js/custom.js
   anhand der tatsächlichen Header-Höhe gesetzt. */
html {
	scroll-behavior: smooth;
}
[id] {
	scroll-margin-top: var(--art-header-height, 100px);
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/* =========================================================
   Ein-/Ausflug-Animation für Inhaltselemente (Klassenvergabe
   per IntersectionObserver in js/custom.js). Startzustand
   .art-fly-hidden: leicht nach unten versetzt + unsichtbar,
   .art-fly-visible fliegt an die eigentliche Position.
   Bei Content-Elementen sitzt das transform auf dem inneren
   .art-fly-el-inner-Span, bei Boxen mit eigenem Hintergrund/
   Rand (.art-fly-self) direkt auf dem Element selbst - siehe
   Kommentar in js/custom.js für die Begründung.
   .art-fly-notransition schaltet die Transition beim (unsicht-
   baren) Zurücksetzen aus dem Viewport aus. */
.art-fly-el-inner,
.art-fly-el.art-fly-self {
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-out;
}
/* .art-fly-el-inner wird per js/custom.js frisch um den Inhalt von
   Content-Elementen (h1-h6, p, li, ...) gewickelt und dabei auch von
   der globalen "* { font-family: arboria }"-Regel getroffen - das
   würde vererbte Schriftarten wie "Italiana" auf h1/h2 überschreiben. */
.art-fly-el-inner {
	font-family: inherit;
}
.art-fly-el.art-fly-hidden .art-fly-el-inner,
.art-fly-el.art-fly-hidden.art-fly-self {
	opacity: 0;
	transform: translateY(40px);
}
.art-fly-el.art-fly-visible .art-fly-el-inner,
.art-fly-el.art-fly-visible.art-fly-self {
	opacity: 1;
	transform: translateY(0);
}
.art-fly-el.art-fly-notransition .art-fly-el-inner,
.art-fly-el.art-fly-notransition.art-fly-self {
	transition: none !important;
}
/* Listenmarker (::marker) unterstützen laut Spec kein transform/opacity,
   nur eine feste Property-Liste inkl. color - deshalb wird der Marker
   passend zum Text-Fade per Farb-Transition ein-/ausgeblendet statt
   verschoben. */
.art-fly-el::marker {
	transition: color 0.6s ease-out;
}
.art-fly-el.art-fly-hidden::marker {
	color: transparent;
}
.art-fly-el.art-fly-notransition::marker {
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.art-fly-el-inner,
	.art-fly-el.art-fly-self {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.art-fly-el::marker {
		transition: none !important;
	}
}
.arrow-pulse a {
	display: inline-block;
	width: 60px;
	height: 60px;
	/* Das BB-Foto-Modul dieses Pfeils hat eine eigene, feste Breite von 15px
	   (siehe .fl-photo-content/.fl-photo-img der Node-ID im BB-Cache-CSS).
	   Der 60px-Link ist dadurch breiter als sein Container, wird also nicht
	   symmetrisch zentriert, sondern rutscht rechtsbündig heraus. Korrektur
	   um exakt die halbe Differenz gleicht das wieder zur Mitte aus. */
	position: relative;
	left: calc((15px - 60px) / 2);
}
.arrow-pulse .fl-photo-content {
	position: relative;
}
.arrow-pulse {
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
/* =========================================================
   "Unsere Haltung" — Kapsel-Section, Foto als Row-Hintergrund
   mit Kapselförmigem "Guckloch"-Overlay (Box-Shadow-Maske)

   BB-Struktur:
   Row                          -> Klasse: art-haltung-wrap
                                    Hintergrund: Foto nativ im Row-Style-Tab setzen
                                    (Background -> Photo, Cover, zentriert)
     Column A (Foto/Kapsel)     -> Klasse: art-capsule
       Photo-Modul (Hand-SVG)   -> Klasse: art-svg-hand
       Photo-Modul (Fuß-SVG)    -> Klasse: art-svg-foot
     Column B (Text)            -> Klasse: art-capsule-text-col
       Text-Modul (Eyebrow/H2/Text)

   Wichtig: Column A und B sind zwei GLEICHRANGIGE Columns in
   derselben Row (nicht ineinander verschachtelt). Am Desktop
   wird Column B per CSS über Column A gelegt; am Handy hebt
   die Media Query das wieder auf, dann stapelt BB die beiden
   Columns ganz normal untereinander.

   Breakpoints an BB angleichen: Tools -> Einstellungen -> Responsive Editing
   ========================================================= */

.art-haltung-wrap {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 4rem 0;
	background-color: var(--art-cloud-schrift);
}

/* Ringe: gleiche Höhe wie die Kapsel (oben/unten bündig), nur seitlich
   in 30px-Schritten breiter. Sitzen auf .art-capsule (Ring 1) und auf
   .art-capsule-text-col (Ring 2+3), weil beide exakt dieselbe Größe/
   Position wie die Kapsel haben (gleiche width/max-width/aspect-ratio).

   Animation: Ringe starten deckungsgleich mit der Kapselkante (width:100%,
   opacity:0) und wachsen erst auf ihre Zielbreite, sobald js/custom.js per
   IntersectionObserver die Klasse .rings-in auf .art-haltung-wrap setzt -
   dadurch wirkt es, als würden sie sich aus der Kapsel heraus ausbreiten.
   Gestaffelte transition-delay sorgt für den nacheinander laufenden Effekt. */
.art-capsule::after,
.art-capsule-text-col::before,
.art-capsule-text-col::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 50% !important;
	width: 100% !important;
	height: 100% !important;
	transform: translateX(-50%);
	border: 1px solid var(--art-bone);
	border-radius: 999px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-out;
}
.art-capsule::after {
	transition-delay: 0s;
}
.art-capsule-text-col::before {
	transition-delay: 0.15s;
}
.art-capsule-text-col::after {
	transition-delay: 0.3s;
}
.art-haltung-wrap.rings-in .art-capsule::after {
	width: calc(100% + 90px) !important;
	opacity: 1;
}
.art-haltung-wrap.rings-in .art-capsule-text-col::before {
	width: calc(100% + 180px) !important;
	opacity: 1;
}
.art-haltung-wrap.rings-in .art-capsule-text-col::after {
	width: calc(100% + 280px) !important;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.art-capsule::after,
	.art-capsule-text-col::before,
	.art-capsule-text-col::after {
		transition: none;
	}
}

/* ---- Column A: Kapselform + SVGs ----
   BB teilt zwei Columns in einer Column-Group standardmäßig 50/50 auf
   (per Node-Klasse mit width bzw. flex-basis). Das überschreiben wir hier
   hart, damit beide Columns die volle Row-Breite bekommen. */
.art-capsule {
	position: relative;
	background: none !important;
	float: none !important;
	align-self: flex-start !important;
	width: 100% !important;
	flex: 0 0 100% !important;
	max-width: 1200px;
	margin: 0 auto !important;
	aspect-ratio: 2.4 / 1;
}
/* fl-col-content hat selbst keinen in-flow Inhalt mehr (SVGs sind absolut) -
   würde also auf 0px Höhe kollabieren. Als absolute Box entkoppeln wir sie
   komplett von der Höhenberechnung, damit nur die aspect-ratio zählt. */
.art-capsule > .fl-col-content {
	position: absolute;
	inset: 0;
	background: none !important;
}

/* Das "Guckloch": eigene Box bleibt transparent (Row-Foto scheint durch),
   der Rest der Row wird per riesigem Box-Shadow in Seitenfarbe übermalt */
.art-capsule::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 999px;
	box-shadow: 0 0 0 9999px var(--art-cloud-schrift);
	z-index: 1;
}

.art-svg-hand,
.art-svg-foot {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 60px;
	z-index: 3;
	pointer-events: none;
	/* Beaver Builders generische Fallback-Regel vergibt allen Modulen ohne
	   direktes .fl-module-content-Kind (trifft auf Foto-Module zu) eine
	   Standardmarge von 20px. Die verschiebt die per left/transform
	   zentrierte Grafik sichtbar nach rechts/unten - hier neutralisieren. */
	margin: 0;
}
.art-svg-hand img,
.art-svg-foot img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}
.art-svg-foot {
	top: -20px;
}
.art-svg-hand {
	bottom: -20px;
	transform: translateX(-50%) rotate(180deg);
}

/* ---- Column B: Text, am Desktop über Column A gelegt ---- */
.art-capsule-text-col {
	position: absolute;
	background: none !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100% !important;
	flex: 0 0 100% !important;
	max-width: 1200px;
	aspect-ratio: 2.4 / 1;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 3rem 4rem;
}
.art-capsule-text-col > .fl-col-content {
	background: none !important;
}
.art-capsule-text-col .eyebrow {
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--art-aubergine);
	margin-bottom: 0.5rem;
}


/* Tablet: Ringe skalieren automatisch mit der Kapsel mit (calc-basiert),
   hier nur noch der Text-Column-Innenabstand */
@media (max-width: 992px) {
	.art-capsule-text-col {
		padding: 2rem 2.5rem;
	}
}

/* Phone: Kapsel wird Hochformat, Text bleibt wie am Desktop
   als Overlay über der Kapsel liegen (nur Maße angepasst) */
@media (max-width: 768px) {
	.art-haltung-wrap {
		padding: 0;
	}
.art-haltung-wrap .fl-row-content-wrap {
    padding: 0 !important;
}
	.art-haltung-wrap .fl-row-content {
		padding: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	.art-haltung-wrap .fl-col-group,
	.art-haltung-wrap .fl-col-group > .fl-col {
		padding: 0 !important;
		margin: 0 !important;
	}
	.art-capsule::after,
	.art-capsule-text-col::before,
	.art-capsule-text-col::after {
		display: none !important;
	}

	.art-capsule {
		aspect-ratio: auto;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		overflow: hidden;
	}
	.art-capsule::before {
		position: static !important;
		display: block !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 4;
		border-radius: 999px;
        box-shadow: none !important;
	}
	.art-svg-hand,
	.art-svg-foot {
		width: 18px;
		height: 38px;
	}

	.art-capsule-text-col {
		max-width: 100%;
		aspect-ratio: 3 / 4;
		padding: 2rem 1.5rem;
	}
}
/* Section mit 2 Kapseln nebeneinander*/
@media screen and (min-width: 1200px){
    .capsule-50-percent p {
        height: 140px;
        overflow: scroll;
    }
}
.capsule-50-percent {
    padding-bottom: 20px;

}
.capsule-50-percent:not(:first-child) {
    padding-left: 42px;
}
.capsule-50-percent:not(:last-child) {
    padding-right: 42px;
}
/* Handy: BB setzt border-radius fix auf 200px (kein Responsive-Wert im
   Builder), was die Kapsel auf schmalen Spalten zu extrem rundet -
   auf Mobile daher geringerer Radius. */
@media (max-width: 768px) {
    .capsule-50-percent > .fl-col-content {
        border-radius: 50px !important;
    }
}

/* Section "Kontakt": 3 Kapseln 25% / 50% / 25%, gleiche Höhe, 20px Abstand
   (10px links + 10px rechts an den beiden Innenkanten ergibt 20px Gap) */
.capsule-25-percent,
.capsule-kontakt {
    display: flex !important;
    flex-direction: column;
}
.capsule-25-percent {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
}
.capsule-kontakt {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
.capsule-25-percent > .fl-col-content,
.capsule-kontakt > .fl-col-content {
    flex: 1 1 auto;
    width: 100%;
}
.capsule-25-percent:not(:first-child),
.capsule-kontakt:not(:first-child) {
    padding-left: 10px;
}
.capsule-25-percent:not(:last-child),
.capsule-kontakt:not(:last-child) {
    padding-right: 10px;
}

/* Tablet & Handy: alle 3 Kapseln stapeln sich, zentriert, 20px Abstand
   untereinander, .capsule-kontakt steht oben (Tablet: 70% Breite) */
@media (max-width: 992px) {
    .fl-col-group:has(.capsule-kontakt),
    .fl-row-content-wrap:has(.capsule-kontakt) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .capsule-25-percent,
    .capsule-kontakt {
        width: 70% !important;
        flex: 0 0 70% !important;
        max-width: 70% !important;
        margin: 0 auto 20px auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .capsule-kontakt {
        order: -1;
    }
    .capsule-25-percent:last-child,
    .capsule-kontakt:last-child {
        margin-bottom: 0 !important;
    }
}

/* Handy: gleiche Reihenfolge wie Tablet, aber volle Breite */
@media (max-width: 768px) {
    .capsule-25-percent,
    .capsule-kontakt {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Handy: BB setzt border-radius fix auf 160px (kein Responsive-Wert im
   Builder), was die Kapsel auf schmalen Spalten zu extrem rundet -
   auf Mobile daher geringerer Radius, einheitlich mit den anderen
   Kapseln (.capsule-50-percent, .capsule-popup). */
@media (max-width: 768px) {
    .capsule-25-percent > .fl-col-content,
    .capsule-kontakt > .fl-col-content {
        border-radius: 50px !important;
    }
}

/* Handy: gleiches Problem auf den Stellenanzeigen-Seiten (Pilatestrainer,
   Physiotherapeut) - BB setzt hier ebenfalls fix 160px border-radius. */
@media (max-width: 768px) {
    .capsule-bewerbung > .fl-col-content {
        border-radius: 50px !important;
    }
}

/* Handy: Telefon-Button in der Kontakt-Kapsel (fl-node-mc0g6ru2s71l) wird
   von BB zwar auf justify-content/text-align:center umgestellt, behält
   dabei aber einen negativen linken Außenabstand (-15px) aus der
   Desktop-Anordnung (Telefon/E-Mail nebeneinander) - dadurch sitzt er
   trotz Zentrierung sichtbar links versetzt. Auf Mobile aufheben. */
@media (max-width: 768px) {
    .capsule-kontakt .fl-node-mc0g6ru2s71l.fl-module-button.fl-module {
        margin-left: 0 !important;
    }
}

/* =========================================================
   Team-Grid (Shortcode [art_team_grid], CPT "team")
   Karte hat zwei Faces: Front (Bild + Badge + Name) und
   Back (Expertise-Text + "Jetzt buchen"), Back liegt absolut
   über Front und wird per Opacity bei Hover/Focus eingeblendet.
   ========================================================= */
.art-team-grid {
	display: grid;
	grid-template-columns: repeat(var(--art-team-columns, 4), 1fr);
	gap: 30px;
}
@media (max-width: 992px) {
	.art-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.art-team-grid {
		grid-template-columns: 1fr;
	}
}
.art-team-card {
	position: relative;
	aspect-ratio: 3 / 4;
}
.art-team-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	transition: opacity 0.3s ease;
}
.art-team-face--front {
	z-index: 1;
}
.art-team-face--back {
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.art-team-card:hover .art-team-face--back,
.art-team-card:focus-within .art-team-face--back,
.art-team-card:focus .art-team-face--back {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.art-team-image {
	position: relative;
	flex: 1 1 auto;
	background-color: var(--art-cloud-schrift);
	background-size: cover;
	background-position: center;
}
.art-team-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.art-team-badge {
	display: inline-block;
	padding: 3px 15px;
	border-radius: 999px;
	background: rgba(240, 240, 251, 0.8);
	border: 1px solid var(--art-brass);
	color: var(--art-aubergine) !important;
	font-size: 0.9rem;
	letter-spacing: 0.6px;
}
.art-team-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 20px;
	background: var(--art-gruen);
	opacity: 1 !important;
	color: var(--art-weiss);
	font-size: 1rem;
}
.art-team-bar--cta {
	text-decoration: none;
	cursor: pointer;
}
.art-team-arrow {
	transition: transform 0.2s ease;
}
.art-team-card:hover .art-team-arrow {
	transform: translateX(4px);
}
.art-team-expertise {
	flex: 1 1 auto;
	overflow: auto;
	padding: 20px 20px 0;
	background: color-mix(in srgb, var(--art-gruen) 80%, transparent);
	color: var(--art-weiss);
	font-size: 0.9rem;
	line-height: 1.5;
}
.art-team-expertise p:first-child {
	margin-top: 0;
}
.art-team-expertise ul {
	margin: 0.5em 0 0;
	padding-left: 1.2em;
}

/* =========================================================
   .snazzy-karte: Section im Seitenfluss, die den Viewport
   füllt. Das iframe darin bleibt immer exakt quadratisch
   (Seitenlänge = die kleinere von Viewport-Breite/-Höhe,
   damit es nie über den Bildschirmrand hinausragt), liegt
   mittig und wird über border-radius rund ausgestanzt.
   ========================================================= */
.snazzy-karte {
	position: relative;
	width: 100%;
	max-width: 450px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.snazzy-karte iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border:2px solid #A99B87; 
	border-radius:50px;
}
/* Footer*/
.footer-logo p {
	font-family: var(--gp-font--arboria-thin);
	font-weight: 100;
}

/* =========================================================
   Modal "Coming Soon": responsive Breite, horizontal zentriert
   Desktop 70% / Laptop 80% / Tablet 90% / Handy 100%
   ========================================================= */
.pp-modal-container {
	width: 70% !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}
@media (max-width: 1200px) {
	.pp-modal-container {
		width: 80% !important;
	}
}
@media (max-width: 992px) {
	.pp-modal-container {
		width: 90% !important;
	}
}
@media (max-width: 768px) {
	.pp-modal-container {
		width: 100% !important;
	}
}
.pp-modal-container:focus,
.pp-modal-container:focus-visible,
.pp-modal:focus,
.pp-modal:focus-visible,
.pp-modal-body:focus,
.pp-modal-body:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Kapselform der "Etwas Neues entsteht"-Box (.capsule-popup) im Modal:
   BB setzt am Handy-Breakpoint negative Außenabstände (-10px), wodurch
   die Kapsel breiter als der Viewport wird und links/rechts hart
   abgeschnitten wirkt statt rund. Gleicher border-radius wie bei den
   anderen Kapseln (.art-capsule, .capsule-50-percent) - hier nur mit
   Luft zum Bildschirmrand, statt darüber hinauszuragen. BB setzt den
   border-radius (200px) ebenfalls fix ohne Responsive-Wert, daher auf
   Mobile geringerer Radius wie bei den anderen Kapseln. */
@media (max-width: 768px) {
	.capsule-popup > .fl-col-content {
		margin-left: 10px !important;
		margin-right: 10px !important;
		border-radius: 50px !important;
	}
}

/* =========================================================
   Fixierte CTA-Buttons ("Pilates buchen" / "Physiotherapie
   buchen"), unten rechts, HTML-Modul mit Klasse .art-fixed-cta.
   Farbe passt sich automatisch an den Hintergrund an, auf dem
   die Buttons gerade liegen - js/custom.js ermittelt das per
   elementFromPoint und setzt dafür die Modifier-Klasse
   .art-fixed-cta--on-light auf den Wrapper.
   Dunkler Hintergrund (Default): Fläche+Rand cloud, Text
   aubergine, Hover invertiert komplett.
   Heller Hintergrund: Fläche+Rand aubergine, Text cloud,
   Hover invertiert komplett (Fläche cloud, Rand+Text aubergine).
   ========================================================= */
.art-fixed-cta {
	--art-fixed-cta-offset: 20px;
	position: fixed;
	right: var(--art-fixed-cta-offset);
	/* js/custom.js erhoeht --art-fixed-cta-bottom (Viewport-Abstand von
	   unten), sobald der Footer sonst unter den Buttons hervorscrollen
	   wuerde - dadurch bleiben die Buttons "position: fixed" (kein Effekt
	   auf die Dokumenthoehe/Scrollbarkeit, kein Abhaengen von einem
	   zufaellig positionierten Vorfahren fuer "position: absolute") und
	   werden nur viewport-relativ knapp oberhalb des Footers gebremst.
	   Ohne JS-Override greift der Default-Wert (= normaler Fixed-Abstand). */
	bottom: var(--art-fixed-cta-bottom, var(--art-fixed-cta-offset));
	z-index: 500;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 20px;
}
.art-fixed-btn {
	display: inline-block;
	padding: 5px 20px 6px 20px;
	border-radius: 50px;
	border: solid 1px var(--art-cloud-schrift);
	font-size: 1rem;
	letter-spacing: 0.4px;
	white-space: nowrap;
	background-color: var(--art-cloud-schrift);
	color: var(--art-aubergine) !important;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.art-fixed-btn:hover,
.art-fixed-btn:focus-visible {
	background-color: var(--art-aubergine);
	border-color: var(--art-cloud-schrift);
	color: var(--art-cloud-schrift) !important;
}
.art-fixed-cta--on-light .art-fixed-btn {
	background-color: var(--art-aubergine);
	border-color: var(--art-aubergine);
	color: var(--art-cloud-schrift) !important;
}
.art-fixed-cta--on-light .art-fixed-btn:hover,
.art-fixed-cta--on-light .art-fixed-btn:focus-visible {
	background-color: var(--art-cloud-schrift);
	border-color: var(--art-aubergine);
	color: var(--art-aubergine) !important;
}
@media (max-width: 480px) {
	.art-fixed-cta {
		--art-fixed-cta-offset: 12px;
		right: var(--art-fixed-cta-offset);
		bottom: var(--art-fixed-cta-bottom, var(--art-fixed-cta-offset));
		gap: 8px;
	}
	.art-fixed-btn {
		padding: 8px 16px;
		font-size: 0.8rem;
	}
}