@charset "utf-8";
/* CSS Document */

/* Die beiden selbst gebauten Blöcke erbten Arial – gleiche Schrift wie der Rest. */
.header-section,
.contact-form,
.contact-form input,
.contact-form textarea,
.contact-form button {
    font-family: montserrat, "Montserrat", sans-serif;
}
.contact-form {
    width: 100%;
    max-width: 493px;
	margin-top: -95px;
}
.form-row {
    display: flex;
    gap: 24px;
}
.form-group {
    width: 100%;
    margin-bottom: 25px;
}
.form-row .form-group {
    width: 50%;
}
.contact-form label {
    display: block;
    font-size: 14px;
}
.contact-form input, .contact-form textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid #000;
    border-radius: 0;
    outline: none;
    background: transparent;
    font-size: 15px;
    padding: 0 0 8px;
}
.contact-form input {
    height: 45px;
}
.contact-form textarea {
    height: 100px;
    resize: vertical;
}
.message-group {
    margin-bottom: 25px;
}
.contact-form button {
    width: 148px;
    height: 42px;
    border: none;
    border-radius: 25px;
    background: #000;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.contact-form button:hover {
    opacity: 0.85;
}
#formMessage {
    margin-top: 15px;
    font-size: 14px;
}
.contact-form .form-group.has-error input,
.contact-form .form-group.has-error textarea {
    border-bottom-color: #ff1f25;
}
.contact-form .error-message {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    color: #ff1f25;
    font-size: 14px;
    line-height: 20px;
}
.contact-form .error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid #ff1f25;
    border-radius: 50%;
    font-size: 9px;
    font-weight: bold;
    flex-shrink: 0;
}
.contact-form #formMessage {
    margin-top: 15px;
    font-size: 15px;
}

.contact-form #formMessage.success {
    color: #198754;
}

.contact-form #formMessage.error {
    color: #d00000;
}
:root{
	/* Die Theme-Fonts für Fließtext stehen im Export auf Avenir Heavy
	   bzw. Light. Auf den meisten Seiten überschreibt ein Inline-Style
	   das mit Montserrat – auf Impressum und Datenschutz nicht, dort
	   stand der ganze Text in einer schweren Schrift. Nur die Familie
	   getauscht, Größe und Zeilenhöhe bleiben.
	   (!important, weil diese Datei vor den Wix-Styles geladen wird.) */
	--font_7: normal normal normal 16px/1.4em montserrat, "Montserrat", sans-serif !important;
	--font_8: normal normal normal 14px/1.5em montserrat, "Montserrat", sans-serif !important;
	--font_9: normal normal normal 14px/1.5em montserrat, "Montserrat", sans-serif !important;

	--ls-header-height: 200px;
	/* Typo-Skala: h1 Seitentitel, h2 Abschnitt, h3 Unterpunkt */
	--h1-size: clamp(32px, 4vw, 52px);
	--h2-size: clamp(27px, 3vw, 40px);
	--h3-size: clamp(19px, 1.5vw, 22px);
	--claim-size: clamp(20px, 2.2vw, 30px);
}
html{
	scroll-behavior: smooth;
	scroll-padding-top: var(--ls-header-height);
}
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
}
#masterPage.mesh-layout main#PAGES_CONTAINER{
	padding-top: var(--ls-header-height);
}
.main-header{
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
.header-section{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 14px 40px 26px;
	background-color: #FFF;
}
.header-left, .header-right{
	flex: 0 0 auto;
	max-width: 100%;
}
.header-right{
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-left img{
	width: auto;
	height: 105px;
}
.header-right > ul{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 105px;
}
.header-right ul li{
	font-size: 17px;
	line-height: 26px;
	padding: 0;
	position: relative;
}
.header-right > ul > li > a{
	color: #1A1A1A;
	letter-spacing: 0.12em;
}
.header-right ul li ul{
	visibility: hidden;
	opacity: 0;
	position: absolute;
	display: block;
	left: 50%;
	transform: translateX(-50%);
    width: 240px;
    background-color: #FFF;
	padding: 10px 20px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	transition-duration: 0.4s;
}
.header-right ul li ul li{
	padding: 0;
}
.header-right ul li ul li a{
	font-size: 16px;
	line-height: 24px;
	color: #000;
	padding: 10px 0;
	border-bottom: 1px solid #d9d9d9;
	display: block;
}
.header-right ul li ul li:last-child a{
	border-bottom: none;
}
.header-right ul li:hover ul{
	visibility: visible;
	opacity: 1;
}

/* ---------------------------------------------------------------
   Typografie: eine Skala für alle Seiten.
   Die Wix-Export-Überschriften tragen Größe, Gewicht und Kursiv als
   Inline-Style auf dem Tag UND auf verschachtelten Spans, deshalb
   !important plus inherit auf die Spans.
   --------------------------------------------------------------- */
.wixui-rich-text h1,
.wixui-rich-text h2,
.wixui-rich-text h3,
#comp-mc21jalh h1{
	font-family: montserrat, "Montserrat", sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	letter-spacing: 0 !important;
	line-height: 1.25 !important;
}
.wixui-rich-text h1 span,
.wixui-rich-text h2 span,
.wixui-rich-text h3 span,
#comp-mc21jalh h1 span{
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	letter-spacing: inherit !important;
}
.wixui-rich-text h1{ font-size: var(--h1-size) !important; }
.wixui-rich-text h2,
#comp-mc21jalh h1{ font-size: var(--h2-size) !important; }
.wixui-rich-text h3{
	font-size: var(--h3-size) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

/* Ausnahmen – h1/h3 stehen im Export teils für andere Rollen. */
/* Claim im Hero: bleibt der kleinere, kursive Einstiegssatz. */
#comp-m7xg9lpa1 h1{
	font-size: var(--claim-size) !important;
	font-style: italic !important;
	line-height: 1.4 !important;
}
/* Banner über dem Gruppenkurs-Foto ist ein Abschnitt, kein Seitentitel. */
#comp-m7xhiyj53 h1{ font-size: var(--h2-size) !important; }
/* Diese beiden h3 leiten Abschnitte ein, nicht einzelne Punkte. */
#comp-m7xgn0o31 h3,
#comp-mn8uw0os1 h3{
	font-size: var(--h2-size) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
}
/* Zitat bleibt kursiv. */
#comp-m7xgn0o31 h3{ font-style: italic !important; }
/* Impressum: im Textblock sind die h1 in Wahrheit Abschnitte. */
#comp-kzmdqp9a h1{ font-size: var(--h2-size) !important; }

/* Reste in anderen Schriften: Buttons liefen auf Avenir Light, die
   Ziffern der Preiskarten auf Avenir Heavy, der Blockangebots-Text auf
   Helvetica – jeweils als Inline-Style bzw. Komponenten-CSS. */
#PAGES_CONTAINER .wixui-button__label,
#PAGES_CONTAINER span[style*="helvetica"],
#PAGES_CONTAINER span[style*="avenir"]{
	font-family: montserrat, "Montserrat", sans-serif !important;
}

/* Hervorhebungen im Fließtext auf 600 statt 700 – Überschriften bleiben außen vor. */
.wixui-rich-text p span[style*="font-weight:bold"],
.wixui-rich-text li span[style*="font-weight:bold"]{ font-weight: 600 !important; }
/* Ganzer Absatz fett über dem Gruppenkurs-Foto – zurück auf Fließtext. */
#comp-m7xhiyj6 span{ font-weight: 400 !important; }

/* ---------------------------------------------------------------
   Responsive.
   Der Wix-Export ist ein starres 980px-Raster: #site-root und jede
   Section haben min-width:980px, die Grid-Spalten sind in px gesetzt,
   die Boxen darin ebenfalls. Auf dem Handy zoomt der Browser die
   ganze Seite auf 375px herunter – lesbar ist das nicht.
   Unterhalb von 1000px lösen wir die festen Breiten auf: eine
   Spalte, Boxen auf volle Breite, Ränder über Padding.
   --------------------------------------------------------------- */
@media (max-width: 1000px){
	/* Das 980er-Minimum sitzt auf Wrappern, Sections und Hintergrund-
	   ebenen quer durch den Export – einmal global aufheben. */
	#SITE_CONTAINER *{ min-width: 0 !important; }
	#site-root,
	#masterPage,
	#PAGES_CONTAINER,
	#SITE_PAGES,
	#SITE_PAGES > div,
	#SITE_PAGES > div > div,
	#masterPage section,
	#masterPage [id^="pageBackground"],
	#masterPage [data-mesh-id]{
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Wix legt mehrere Boxen in dieselbe Rasterzelle und schiebt sie mit
	   left:Npx nebeneinander. Als Block stapeln sie in DOM-Reihenfolge –
	   sonst würden sie beim Zurücksetzen von left übereinanderliegen. */
	#masterPage [data-mesh-id$="-gridContainer"]{
		display: block !important;
	}
	/* Die Boxen sitzen per position:relative + left:Npx im Raster.
	   Wir nehmen den Versatz raus und deckeln die Breite, statt sie zu
	   überschreiben: breite Textblöcke schrumpfen auf den Viewport,
	   schmale Elemente (Logos, Buttons) behalten ihre Größe. */
	#masterPage [data-mesh-id$="-gridContainer"] > *{
		left: 0 !important;
		right: auto !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		/* Senkrechte Abstände sind im Export Rasterversatz (bis 180px)
		   und reißen gestapelt Löcher – ein gleichmäßiger Abstand statt
		   der Desktop-Werte. */
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	#masterPage [data-mesh-id$="-gridContainer"] > * + *{
		margin-top: 24px !important;
	}
	#masterPage [data-testid="page-bg"]{
		left: 0 !important;
		margin-left: 0 !important;
		width: 100% !important;
	}
	/* Mehrspaltige Strips untereinander statt nebeneinander. */
	#masterPage [data-testid="columns"]{
		display: block !important;
	}
	/* Repeater (Kursplan, Preisliste, Stimmen) untereinander. */
	#PAGES_CONTAINER [role="list"]{
		display: block !important;
	}
	#masterPage .wixui-column-strip__column,
	#PAGES_CONTAINER [role="list"] > *,
	#PAGES_CONTAINER [role="listitem"],
	#PAGES_CONTAINER [role="listitem"] > div{
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
	}
	/* Feste Höhen aus dem Desktop-Raster: gestapelter Inhalt braucht mehr
	   Platz, sonst schneidet der Container ihn ab. Bilder bleiben außen
	   vor, die tragen ihre Höhe selbst. */
	#PAGES_CONTAINER section,
	#PAGES_CONTAINER [data-mesh-id$="inlineContent"],
	#PAGES_CONTAINER [data-mesh-id$="-gridContainer"],
	#PAGES_CONTAINER [id$="_wrapper"],
	#PAGES_CONTAINER fluid-columns-repeater,
	#PAGES_CONTAINER [role="list"],
	#PAGES_CONTAINER [role="listitem"],
	#PAGES_CONTAINER .wixui-repeater__item{
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	/* Spalten, deren Bild als Hintergrundebene liegt, bekamen ihre Höhe
	   im Desktop-Layout von der Textspalte daneben. Gestapelt fallen sie
	   auf 0 zusammen – daher ein festes Seitenverhältnis. Das Bild ist
	   object-fit:cover, es wird also beschnitten, nicht verzerrt.
	   (:has() – in älteren Browsern bleibt es beim bisherigen Verhalten.) */
	#PAGES_CONTAINER .wixui-column-strip__column:has([id^="bgMedia"] img){
		aspect-ratio: 3 / 2;
	}

	/* Karte im Kontaktbereich: Breite ist calc(100% - 160px), auf dem
	   Handy blieben davon 215px übrig. */
	#comp-m9h889zl,
	#comp-m9h889zt{
		width: 100% !important;
	}
	/* Die Ziffern-Badges der Preisliste holten ihre Höhe aus der
	   Rasterzeile – ohne die bleiben sie flache Ovale. */
	#PAGES_CONTAINER .q9dEZ5{
		aspect-ratio: 1;
	}

	/* Innenabstand statt der weggefallenen Rasterränder. */
	#PAGES_CONTAINER .wixui-rich-text{
		box-sizing: border-box !important;
		padding-left: 20px;
		padding-right: 20px;
	}
	/* Lange Komposita wie „Datenschutzerklärung“ sonst mitten im Wort
	   umgebrochen. Die Seiten sind auf lang="de" gesetzt. */
	#PAGES_CONTAINER h1,
	#PAGES_CONTAINER h2,
	#PAGES_CONTAINER h3{
		overflow-wrap: break-word;
		hyphens: auto;
	}
	/* Der Claim ist zentriert, kursiv und in Versalien – dort trennt die
	   Automatik in fast jeder Zeile. Umbruch nur zwischen den Wörtern. */
	#comp-m7xg9lpa1 h1{
		hyphens: manual;
	}
}

/* Mobile */
@media (max-width: 900px) {
	:root{
		--ls-header-height: 155px;
	}
	.header-section{
		gap: 20px;
		padding: 12px 20px 20px;
	}
	.header-left img{
		height: 78px;
	}
	.header-right > ul{
		gap: 40px;
	}
	.header-right ul li{
		font-size: 15px;
	}
	/* Untermenüs öffnen per Hover – auf dem Handy nicht erreichbar, und
	   zentriert unter dem ersten Punkt ragen sie links aus dem Bild.
	   Die drei Hauptpunkte führen ohnehin auf dieselben Seiten. */
	.header-right ul li ul{
		display: none !important;
	}
}
@media (max-width: 1540px) {
	#comp-m7xh2jov2_wrapper fluid-columns-repeater{
		display: flex !important;
		flex-wrap: wrap;
	}
	#comp-m7xh2jov2_wrapper fluid-columns-repeater .wixui-repeater__item{
		flex: 0 0 30%;
		position: static !important;
	}
}
@media (max-width: 600px) {
    .form-row {
        display: block;
    }
    .form-row .form-group {
        width: 100%;
    }
    .contact-form label {
        margin-bottom: 25px;
    }
    .contact-form .form-row .form-group {
        margin-bottom: 25px;
    }
}

/* Repeater (Einzeltraining / Yoga Einzelstunde / Restorative): der
   1540er-Block oben setzt flex 0 0 30%, deshalb steht die einspaltige
   Variante hier hinten – sonst gewinnt die breitere Regel. */
@media (max-width: 1000px) {
	#comp-m7xh2jov2_wrapper fluid-columns-repeater{
		display: block !important;
	}
	#comp-m7xh2jov2_wrapper fluid-columns-repeater .wixui-repeater__item{
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
	}
	#comp-m7xh2jov2_wrapper fluid-columns-repeater .wixui-repeater__item *{
		max-width: 100% !important;
	}
	#comp-m7xh2jov2_wrapper fluid-columns-repeater .wixui-repeater__item [data-mesh-id]{
		width: 100% !important;
	}
}