/**
 * FACTORY Crefeld – eigene Anpassungen (Child-Theme)
 *
 * Farben kommen aus der Avada-Palette (--awb-colorN). Fallback-Werte stehen
 * dahinter, falls die Variablen mal nicht geladen sind.
 *
 * Aufbau: Mobile First. Breakpoints entsprechen Avada:
 *   Basis        = Smartphone
 *   min-width 641px  = Tablet
 *   min-width 1025px = Desktop
 *
 * Inhalt:
 *   1. Design-Tokens
 *   2. Probetraining-Popup (Hero)
 *   3. Social-Media-Icons (Footer)
 *
 * Hinweis zu !important: Avada schreibt Größe/Farbe der Social-Icons als
 * Inline-Style direkt ins <a>-Tag. Inline schlägt jede externe Regel, deshalb
 * ist !important dort die einzige Möglichkeit. Nur dafür wird es benutzt.
 */

/* ==========================================================================
   1. Design-Tokens
   ========================================================================== */

:root {
	--fc-accent: var( --awb-color4, #ed9600 );
	--fc-accent-dark: #c97d00;
	--fc-surface: var( --awb-color7, #2d2d2d );
	--fc-on-dark: var( --awb-color1, #ffffff );
	--fc-muted: var( --awb-color8, #e8e8e8 );
	--fc-radius: 6px;
	--fc-shadow: 0 8px 28px rgba( 0, 0, 0, 0.38 );
}

/* ==========================================================================
   2. Probetraining-Popup (liegt über dem Hero-Slider)
   ========================================================================== */

.fc-promo-host {
	position: relative;
}

.fc-promo {
	position: absolute;
	z-index: 20;
	left: 1rem;
	right: 1rem;
	top: 1rem;

	display: flex;
	align-items: flex-start;
	gap: 0.75rem;

	padding: 1.4rem 1.4rem 1.5rem 1.55rem;
	box-sizing: border-box;

	background: rgba( 26, 26, 26, 0.9 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-left: 4px solid var( --fc-accent );
	border-radius: 10px;
	box-shadow: 0 12px 36px rgba( 0, 0, 0, 0.45 );

	/* Startzustand: unsichtbar, wird per .is-visible eingeblendet. */
	opacity: 0;
	transform: translateY( -10px );
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.fc-promo.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.fc-promo.is-closing {
	opacity: 0;
	transform: translateY( -10px );
	pointer-events: none;
}

.fc-promo__body {
	flex: 1 1 auto;
	min-width: 0;
}

.fc-promo__title {
	margin: 0 0 0.35rem;
	color: var( --fc-on-dark );
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

.fc-promo__text {
	margin: 0 0 1rem;
	color: var( --fc-muted );
	font-size: 1.05rem;
	line-height: 1.5;
}

.fc-promo__cta {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background: var( --fc-accent );
	color: #1a1a1a;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba( 237, 150, 0, 0.35 );
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fc-promo__cta:hover,
.fc-promo__cta:focus {
	background: var( --fc-accent-dark );
	color: #1a1a1a;
	text-decoration: none;
	transform: translateY( -2px );
	box-shadow: 0 6px 18px rgba( 237, 150, 0, 0.45 );
}

/* Schließen-Button: 44x44px Trefferfläche (Touch-Mindestmaß). */
.fc-promo__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;

	/* Aus dem Textfluss nach oben rechts, ohne die Trefferfläche zu opfern. */
	order: 2;
	margin: -0.5rem -0.5rem 0 0;
	width: 44px;
	height: 44px;
	padding: 0;

	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var( --fc-muted );
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fc-promo__close svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	fill: none;
}

.fc-promo__close:hover,
.fc-promo__close:focus-visible {
	background: rgba( 255, 255, 255, 0.12 );
	color: var( --fc-on-dark );
	outline: none;
}

.fc-promo__close:focus-visible {
	box-shadow: 0 0 0 2px var( --fc-accent );
}

/* --- Tablet ------------------------------------------------------------- */

@media ( min-width: 641px ) {
	.fc-promo {
		left: 2rem;
		right: auto;
		top: 2rem;
		max-width: 29rem;
		padding: 1.55rem 1.55rem 1.7rem 1.75rem;
	}

	.fc-promo__title {
		font-size: 1.5rem;
	}
}

/* --- Desktop ------------------------------------------------------------ */

@media ( min-width: 1025px ) {
	.fc-promo {
		left: 3rem;
		top: 3rem;
		max-width: 31rem;
	}

	.fc-promo__title {
		font-size: 1.6rem;
	}

	.fc-promo__text {
		font-size: 1.15rem;
	}
}

/* --- Bewegungsreduktion respektieren ------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	.fc-promo,
	.fc-promo__cta {
		transition: none;
	}

	.fc-promo {
		transform: none;
	}

	.fc-promo.is-visible {
		transform: none;
	}
}

/* ==========================================================================
   3. Social-Media-Icons (Footer)

   Es gibt genau einen Social-Block auf der Seite (.fusion-social-links-1),
   deshalb ist die Klasse als Anker eindeutig.

   Hover-Farben laufen bewusst NICHT über !important, sondern über Avadas
   eigene CSS-Variablen: Avada setzt
     .fusion-social-network-icon:hover { background-color: var(--awb-box-colors-hover) !important }
   Die Variablen stehen inline auf dem Eltern-Container und werden vererbt.
   Definieren wir sie direkt auf dem <a>, gewinnt unsere Definition gegen die
   Vererbung – Avadas !important-Regel setzt dann unsere Farbe durch.
   ========================================================================== */

/* Eigener kleiner Abschnitt statt loser Icons: Luft und eine feine Trennlinie. */
.fusion-social-links-1 {
	padding-top: 1.75rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
}

.fusion-social-links-1 .fusion-social-networks-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

/* Avadas Standardabstände zurücksetzen – der gap oben regelt das jetzt. */
.fusion-social-links-1 .fusion-social-networks.boxed-icons {
	margin: 0;
}

.fusion-social-links-1 .fusion-social-networks.boxed-icons .fusion-social-network-icon {
	margin: 0;
}

/* Größe: 48px Box auf Mobil (über dem 44px-Touch-Mindestmaß).
   width/font-size/border-radius stehen inline -> !important nötig. */
.fusion-social-links-1 .fusion-social-network-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;

	width: 48px !important;
	height: 48px;
	padding: 0 !important;

	font-size: 21px !important;
	line-height: 1;
	border-radius: 6px !important;

	transition: background-color 0.2s ease, border-color 0.2s ease,
		transform 0.2s ease, box-shadow 0.2s ease;
}

.fusion-social-links-1 .fusion-social-network-icon:hover,
.fusion-social-links-1 .fusion-social-network-icon:focus-visible {
	transform: translateY( -3px );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.35 );
}

.fusion-social-links-1 .fusion-social-network-icon:focus-visible {
	outline: 2px solid var( --fc-on-dark );
	outline-offset: 3px;
}

/* Dauerhaft in der jeweiligen Markenfarbe (nicht nur beim Hover).
   Avada setzt Hintergrund/Rahmen inline (var(--awb-color4)) -> !important
   noetig. Das Icon ist bereits weiss (--awb-color1). Zusaetzlich werden die
   Hover-Variablen auf denselben Farbton gesetzt, damit Avadas eigene
   Hover-Regel die Farbe nicht wieder auf Orange zieht. */
.fusion-social-links-1 .awb-icon-whatsapp {
	background-color: #25d366 !important;
	border-color: #25d366 !important;
	--awb-box-colors-hover: #1fb857;
	--awb-box-border-color-hover: #1fb857;
	--awb-icon-colors-hover: #ffffff;
}

.fusion-social-links-1 .awb-icon-instagram {
	background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ) !important;
	border-color: #cc2366 !important;
	--awb-box-colors-hover: #bc1888;
	--awb-box-border-color-hover: #bc1888;
	--awb-icon-colors-hover: #ffffff;
}

.fusion-social-links-1 .awb-icon-facebook {
	background-color: #1877f2 !important;
	border-color: #1877f2 !important;
	--awb-box-colors-hover: #0f6ad8;
	--awb-box-border-color-hover: #0f6ad8;
	--awb-icon-colors-hover: #ffffff;
}

.fusion-social-links-1 .awb-icon-linkedin {
	background-color: #0a66c2 !important;
	border-color: #0a66c2 !important;
	--awb-box-colors-hover: #084f96;
	--awb-box-border-color-hover: #084f96;
	--awb-icon-colors-hover: #ffffff;
}

/* --- Tablet ------------------------------------------------------------- */

@media ( min-width: 641px ) {
	.fusion-social-links-1 .fusion-social-networks-wrapper {
		gap: 0.9rem;
	}

	.fusion-social-links-1 .fusion-social-network-icon {
		width: 52px !important;
		height: 52px;
		font-size: 23px !important;
	}
}

/* --- Desktop ------------------------------------------------------------ */

@media ( min-width: 1025px ) {
	.fusion-social-links-1 .fusion-social-network-icon {
		width: 56px !important;
		height: 56px;
		font-size: 25px !important;
	}
}

/* --- Bewegungsreduktion respektieren ------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	.fusion-social-links-1 .fusion-social-network-icon {
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}

	.fusion-social-links-1 .fusion-social-network-icon:hover,
	.fusion-social-links-1 .fusion-social-network-icon:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   4. Kursplan – Wochenraster auf Desktop

   Problem: Der Plan sind 7 Tabs (Montag–Sonntag). Auf grossen Bildschirmen
   sieht man immer nur EINEN Tag, kann Tage nicht vergleichen, und die
   Bildschirmbreite bleibt ungenutzt.

   Loesung ohne JS: Avada rendert fuer den Akkordeon-Modus ohnehin je Tag eine
   eigene Ueberschrift (.fusion-mobile-tab-nav) direkt vor dem passenden Pane.
   Die Kinder von .tab-content stehen also als
       HEADING, PANE, HEADING, PANE, ...
   Mit grid-auto-flow: column und zwei Zeilen landen die 7 Ueberschriften in
   Zeile 1 und die 7 Tage in Zeile 2 – ein echtes Wochenraster, und die
   Wochentage kommen aus Avadas eigenem Markup statt aus dem CSS.

   Ab 1025px, also genau dort, wo Avada bisher von Akkordeon auf Tabs
   umschaltet. Mobil und Tablet bleiben damit unveraendert.

   Selektor :has(.session) trifft gezielt den Kursplan – andere Tabs auf der
   Seite bleiben unberuehrt. Browser ohne :has() zeigen die bisherigen Tabs.
   ========================================================================== */

/* Farben nach Raum/Kategorie. factory-kursplan.js berechnet je Einheit aus
   Kursname + Wochentag die Klasse fc-room-* und setzt sie zusaetzlich zur
   urspruenglichen .session-Klasse. Die fc-room-Regeln stehen darunter und
   gewinnen dadurch gegen die Alt-Klassen (gleiche Spezifitaet, spaeter im
   Stylesheet). Ohne JS greift die neutrale Grundfarbe.

     Tuerkis = Crossraum (alle Cross-Kurse + MyZone Cardio)
     Orange  = FACT CIRCUIT Early Bird (Mi/Fr) und Samstag
     Lila    = Hyroxraum (alle Hyrox-Kurse inkl. Hyrox Open Gym)
     Rosa    = Kursraum (uebrige FACT CIRCUIT, Yoga, Pra-/Postnatal,
               Kettlebell, Core)
     Grau    = Open Gym
*/
.fusion-tabs .session {
	--fc-session: #8a8a8a;
}

.fusion-tabs .session.fc-room-cross  { --fc-session: #17b8ab; }
.fusion-tabs .session.fc-room-circuit-early { --fc-session: #ed9600; }
.fusion-tabs .session.fc-room-hyrox  { --fc-session: #9d5cd0; }
.fusion-tabs .session.fc-room-kurs   { --fc-session: #e0559a; }
.fusion-tabs .session.fc-room-open   { --fc-session: #8a8a8a; }

/* Einheiten als Karten – gilt auf allen Bildschirmgroessen, auch im
   Akkordeon. Vorher waren die .session-Klassen komplett ungenutzt. */
.fusion-tabs:has( .session ) .session {
	margin: 0 0 7px;
	padding: 9px 11px;
	background: rgba( 255, 255, 255, 0.06 );
	border-left: 3px solid var( --fc-session );
	border-radius: 0 5px 5px 0;
	font-size: 0.85rem;
	line-height: 1.4;
	transition: background-color 0.15s ease;

	/* In den schmalen Tagesspalten laufen lange Namen ohne Leerzeichen sonst
	   aus der Karte, z. B. "Gymnastics/Weightlifting" – Browser brechen an
	   einem "/" nicht von selbst um. */
	overflow-wrap: break-word;
}

.fusion-tabs:has( .session ) .session:hover {
	background: rgba( 255, 255, 255, 0.11 );
}

.fusion-tabs:has( .session ) .session:last-child {
	margin-bottom: 0;
}

/* factory-kursplan.js teilt jede Einheit in Zeit- und Namens-Zeile.
   Faellt das JS aus, bleibt der einzeilige Text – nichts geht verloren. */
.fc-s-time {
	display: block;
	color: var( --fc-on-dark );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.fc-s-name {
	display: block;
	margin-top: 1px;
	font-weight: 600;
}

/* Kursname in der Raumfarbe (passend zum Rahmen). Ueberschreibt die alte
   Textfarbe aus .session.cross usw. im Avada-CSS-Cache. Die Zeit (.fc-s-time)
   bleibt weiss fuer gute Lesbarkeit. */
.fusion-tabs .session .fc-s-name {
	color: var( --fc-session, inherit );
}

/* Legende (von factory-kursplan.js aus den vorhandenen Kursarten erzeugt). */
.fc-legende {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.fc-legende li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var( --fc-muted );
	font-size: 0.75rem;
}

.fc-legende .fc-legende__punkt {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: #8a8a8a;
}

/* Legenden-Punkt in der jeweiligen Raumfarbe. */
.fc-legende__punkt.fc-room-cross { background: #17b8ab; }
.fc-legende__punkt.fc-room-circuit-early { background: #ed9600; }
.fc-legende__punkt.fc-room-hyrox { background: #9d5cd0; }
.fc-legende__punkt.fc-room-kurs { background: #e0559a; }
.fc-legende__punkt.fc-room-open { background: #8a8a8a; }

/* Anklickbare Einheit -> Eversports-Buchung. */
.fusion-tabs .session.fc-buchbar {
	cursor: pointer;
}

.fusion-tabs .session.fc-buchbar:focus-visible {
	outline: 2px solid var( --fc-accent );
	outline-offset: 2px;
}

/* --- Desktop: Tabs -> Wochenraster -------------------------------------- */

@media ( min-width: 1025px ) {

	/* Tab-Leiste und Sticky-Helfer werden im Raster nicht mehr gebraucht. */
	.fusion-tabs:has( .session ) > .nav,
	.fusion-tabs:has( .session ) + .fusion-tabs-sticky-helper,
	.fusion-tabs-sticky-helper:has( + .fusion-tabs .session ) {
		display: none;
	}

	.fusion-tabs:has( .session ) .tab-content {
		display: grid;
		grid-template-rows: auto 1fr;
		grid-auto-flow: column;
		grid-auto-columns: minmax( 0, 1fr );
		column-gap: 10px;
		border: 0;
		background: transparent;
	}

	/* Spaltenueberschrift = Avadas Akkordeon-Ueberschrift, wieder sichtbar.
	   Avada versteckt sie ab 1024px mit .fusion-tabs .fusion-mobile-tab-nav
	   {display:none} (Spezifitaet 0,2,0) – unser Selektor liegt darueber,
	   deshalb kein !important noetig. */
	.fusion-tabs:has( .session ) .tab-content > .fusion-mobile-tab-nav {
		display: block;
		margin: 0;
		border: 0;
	}

	.fusion-tabs:has( .session ) .tab-content > .fusion-mobile-tab-nav .nav-tabs {
		display: block;
		margin: 0;
		border: 0;
	}

	.fusion-tabs:has( .session ) .tab-content > .fusion-mobile-tab-nav li {
		display: block;
		margin: 0;
		border: 0;
		float: none;
		width: auto;
	}

	.fusion-tabs:has( .session ) .tab-content > .fusion-mobile-tab-nav .tab-link {
		display: block;
		padding: 10px 6px;
		background: var( --fc-accent );
		border: 0;
		border-radius: 6px 6px 0 0;
		text-align: center;

		/* Im Raster ist das eine Ueberschrift, kein Bedienelement mehr. */
		pointer-events: none;
		cursor: default;
	}

	.fusion-tabs:has( .session ) .tab-content > .fusion-mobile-tab-nav .fusion-tab-heading {
		margin: 0;
		color: #1a1a1a;
		font-size: 0.78rem;
		font-weight: 800;
		letter-spacing: 0.08em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	/* Heutiger Wochentag (Klasse setzt factory-kursplan.js): weisse
	   Markierungslinie unter dem Tageskopf. */
	.fusion-tabs:has( .session ) .fusion-mobile-tab-nav.fc-heute .tab-link {
		box-shadow: inset 0 -3px 0 #ffffff;
	}

	/* Alle sieben Tage gleichzeitig zeigen.
	   .tab-pane hat zusaetzlich .fade (opacity:0) – nur .fade.in ist sichtbar,
	   deshalb hier auch die Opazitaet zuruecksetzen.
	   Jede Tagesspalte bekommt einen dezenten Hintergrund, damit Kopf und
	   Einheiten optisch eine Saeule bilden. */
	.fusion-tabs:has( .session ) .tab-content > .tab-pane {
		display: block;
		opacity: 1;
		padding: 8px 6px 6px;
		border: 0;
		background: rgba( 255, 255, 255, 0.035 );
		border-radius: 0 0 6px 6px;
	}

	.fusion-tabs:has( .session ) .fusion-mobile-tab-nav.fc-heute + .tab-pane {
		background: rgba( 255, 255, 255, 0.06 );
	}

	.fusion-tabs:has( .session ) .session {
		padding: 7px 8px 8px;
		font-size: 0.76rem;
		line-height: 1.35;
	}

	.fc-s-time {
		font-size: 0.68rem;
	}
}

/* ==========================================================================
   5. Avada-Bugfix: Tabs sind bei exakt 1024px Breite nicht bedienbar

   Avada blendet bei max-width:1024px die Tab-Leiste aus und bei
   min-width:1024px die Akkordeon-Ueberschriften. Bei exakt 1024px greifen
   beide Regeln: Man sieht nur den ersten Tab und kann nicht umschalten.
   1024px ist u. a. die Breite eines iPad Pro im Hochformat.

   Hier wird Avadas urspruengliche Absicht wiederhergestellt (<= 1024px =
   Akkordeon). Gilt fuer alle Tabs der Seite, nicht nur den Kursplan – der
   Fehler steckt in Avada selbst.
   ========================================================================== */

@media ( width: 1024px ) {
	.fusion-tabs .tab-content > .fusion-mobile-tab-nav {
		display: block;
	}
}

/* ==========================================================================
   6. Leistungen – Deko-Progressbars unter den Aufklapp-Titeln

   Unter jedem Leistungs-Titel liegt eine 37px hohe Fusion-Progressbar, die
   sich beim Scrollen orange fuellt und "100%" anzeigt – reine Dekoration,
   wirkt aber wie ein kaputter Ladebalken. Hier wird sie zur schlanken
   orangen Akzentlinie unter dem Titel.

   Der Selektor .fusion-accordian + .fusion-progressbar trifft nur Balken
   direkt nach einem Aufklapp-Element – echte Progressbars an anderer Stelle
   blieben unveraendert.
   ========================================================================== */

.fusion-accordian + .fusion-progressbar .progress-bar,
.fusion-accordian + .fusion-progressbar .fusion-progressbar-bar {
	height: 4px !important;
	background: rgba( 255, 255, 255, 0.08 ) !important;
	border-radius: 2px;
	overflow: hidden;
}

.fusion-accordian + .fusion-progressbar .progress-bar-content {
	height: 4px !important;
	border-radius: 2px;
}

/* "100%"-Anzeige und (leeren) Balkentitel ausblenden. */
.fusion-accordian + .fusion-progressbar .progress-title {
	display: none;
}

.fusion-accordian + .fusion-progressbar {
	margin-top: 2px;
}

/* ==========================================================================
   7. Bilder in den Leistungs-Aufklappern

   Eingesetzt von factory-leistungen.js, unterhalb des Beschreibungstextes.
   Die Bilddateien liegen im Child-Theme (assets/img/leistungen/) und sind
   damit per FTP uebertragbar – anders als Bilder aus der Mediathek.

   aspect-ratio + object-fit sorgen dafuer, dass alle Bilder gleich hoch
   erscheinen, auch wenn die Originaldateien unterschiedliche Formate haben.
   Ohne das springt das Layout beim Aufklappen unruhig.
   ========================================================================== */

.fc-leistung-bild {
	margin: 1.35rem 0 0;
	padding: 0;
}

.fc-leistung-bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

/* Einzelner Bereich (über das Leistungen-Dropdown): leere Spalte weg,
   aktive Spalte auf volle Breite, Inhalt mittig statt links/rechts. */
.page-id-3636 .fusion-layout-column.fc-col-leer {
	display: none !important;
}

.page-id-3636 .fusion-layout-column.fc-col-aktiv {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.page-id-3636 .fc-col-aktiv .fusion-accordian,
.page-id-3636 .fc-col-aktiv .fusion-progressbar {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   8. Kursplan – Tages-/Wochenansicht (Desktop)

   factory-kursplan.js baut eine Leiste mit 7 Tages-Buttons + "Wochenansicht"
   und setzt fc-mode-day / fc-mode-week auf .fusion-tabs. Standard ist die
   Tagesansicht mit dem heutigen Tag – die Wochenansicht war dem Kunden zu
   voll. Unter 1025px bleibt Avadas Akkordeon: Die Leiste ist dort versteckt
   und die fc-mode-Regeln stehen komplett im Desktop-Media-Query.

   Ohne JS gibt es keine fc-mode-Klasse -> es gilt weiter die Wochenansicht
   aus Abschnitt 4. Nichts geht verloren.
   ========================================================================== */

.fc-plan-nav {
	display: none;
}

@media ( min-width: 1025px ) {

	.fc-plan-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 0 0 18px;
	}

	.fc-plan-nav__btn {
		padding: 8px 16px;
		background: transparent;
		border: 1px solid rgba( 255, 255, 255, 0.25 );
		border-radius: 999px;
		color: var( --fc-muted );
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		line-height: 1;
		cursor: pointer;
		transition: background-color 0.15s ease, border-color 0.15s ease,
			color 0.15s ease;
	}

	.fc-plan-nav__btn:hover {
		border-color: var( --fc-accent );
		color: var( --fc-on-dark );
	}

	.fc-plan-nav__btn:focus-visible {
		outline: 2px solid var( --fc-accent );
		outline-offset: 2px;
	}

	.fc-plan-nav__btn.fc-aktiv {
		background: var( --fc-accent );
		border-color: var( --fc-accent );
		color: #1a1a1a;
		font-weight: 700;
	}

	/* Kleiner Punkt markiert den heutigen Tag in der Leiste. */
	.fc-plan-nav__btn.ist-heute::after {
		content: '';
		display: inline-block;
		width: 5px;
		height: 5px;
		margin-left: 7px;
		border-radius: 50%;
		background: currentColor;
		vertical-align: 2px;
		opacity: 0.75;
	}

	.fc-plan-nav__sep {
		width: 1px;
		height: 22px;
		margin: 0 6px;
		background: rgba( 255, 255, 255, 0.2 );
	}

	/* --- Tagesansicht -----------------------------------------------------
	   Die Zusatzklasse fc-mode-day macht diese Selektoren spezifischer als
	   die Wochenraster-Regeln aus Abschnitt 4 – sie gewinnen ohne !important. */

	.fusion-tabs.fc-mode-day:has( .session ) .tab-content {
		display: block;
	}

	.fusion-tabs.fc-mode-day:has( .session ) .tab-content > .fusion-mobile-tab-nav {
		display: none;
	}

	.fusion-tabs.fc-mode-day:has( .session ) .tab-content > .tab-pane {
		display: none;
	}

	/* Der gewaehlte Tag: Einheiten als luftiges Karten-Raster ueber die
	   volle Breite statt einer schmalen Spalte. */
	.fusion-tabs.fc-mode-day:has( .session ) .tab-content > .tab-pane.fc-aktiv {
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 230px, 1fr ) );
		gap: 10px;
		padding: 16px;
		background: rgba( 255, 255, 255, 0.035 );
		border-radius: 8px;
	}

	/* Das Pane traegt .fusion-clearfix: dessen ::before/::after werden im
	   Grid zu eigenen (leeren) Zellen - die erste Kachel rutschte dadurch
	   in Spalte 2. Im Karten-Raster gibt es nichts zu clearen. */
	.fusion-tabs.fc-mode-day:has( .session ) .tab-content > .tab-pane.fc-aktiv::before,
	.fusion-tabs.fc-mode-day:has( .session ) .tab-content > .tab-pane.fc-aktiv::after {
		content: none;
	}

	.fusion-tabs.fc-mode-day:has( .session ) .session {
		margin: 0;
		padding: 12px 14px 13px;
		font-size: 0.85rem;
	}

	.fc-mode-day .fc-s-time {
		font-size: 0.72rem;
	}

	.fc-mode-day .fc-s-name {
		margin-top: 2px;
	}
}

/* ==========================================================================
   9. Kursvideos – Groessensprung beim Abspielen beheben

   Die vier Kursvideos sind hochkant (1080x1320), ihre Vorschaubilder aber
   quer (300x200). Vor dem Play richtet sich das Element nach dem
   Quer-Vorschaubild, beim Abspielen springt es aufs Hochformat um.
   aspect-ratio reserviert von Anfang an das echte Videoformat, object-fit
   fuellt das Vorschaubild passend hinein. Gescoped auf die Kursplan-Seite
   (page-id-84), damit andersformatige Videos anderswo unberuehrt bleiben.
   ========================================================================== */

.page-id-84 .fusion-video .video-wrapper,
.page-id-84 .fusion-video video {
	aspect-ratio: 1080 / 1320;
	height: auto;
}

.page-id-84 .fusion-video video {
	width: 100%;
	object-fit: cover;
	background: #1a1a1a;
}

/* ==========================================================================
   10. Instagram-Section (Startseite)

   Lokal liefert Smash Balloon 0 Bilder (Token laesst sich auf dem Klon
   nicht entschluesseln, Plugin-Fehler 999) – die Section wirkt dann leer.
   factory-instagram.js ergaenzt Untertitel + Follow-Button, die unabhaengig
   vom Feed funktionieren; das Feed-Grid-Styling greift, sobald der Feed
   (live) wieder Bilder liefert.
   ========================================================================== */

.fc-insta-intro {
	margin: 0.25rem 0 1.75rem;
	text-align: center;
}

.fc-insta-intro__text {
	margin: 0 0 1.1rem;
	color: var( --fc-muted );
	font-size: 0.95rem;
	line-height: 1.55;
}

.fc-insta-intro__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.5rem;
	background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% );
	color: #ffffff;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba( 220, 39, 67, 0.35 );
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.fc-insta-intro__btn:hover,
.fc-insta-intro__btn:focus {
	color: #ffffff;
	text-decoration: none;
	transform: translateY( -2px );
	box-shadow: 0 6px 18px rgba( 220, 39, 67, 0.45 );
	filter: brightness( 1.08 );
}

.fc-insta-intro__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Feed-Kacheln (Smash Balloon), sobald Bilder da sind: runde Ecken und
   ein dezenter Zoom beim Ueberfahren. */
#sb_instagram .sbi_photo_wrap,
#sb_instagram .sbi_photo {
	border-radius: 8px;
	overflow: hidden;
}

#sb_instagram .sbi_photo img {
	transition: transform 0.3s ease;
}

#sb_instagram .sbi_item:hover .sbi_photo img {
	transform: scale( 1.04 );
}

@media ( prefers-reduced-motion: reduce ) {
	.fc-insta-intro__btn,
	#sb_instagram .sbi_photo img {
		transition: none;
	}

	#sb_instagram .sbi_item:hover .sbi_photo img {
		transform: none;
	}
}

/* ==========================================================================
   11. Preisseite – Karten-Layout

   Struktur wie eine klassische Pricing-Tabelle (farbiger Kopf, Preis gross,
   aufgeschluesselte Zeilen, Button unten), aber in den Seitenfarben statt
   bunt. Gescoped auf die Preise-Seite (page-id-86). Avadas injizierte
   Farbregeln (.pricing-table-N { ... }) haben Spezifitaet 0,2,0 – die
   Selektoren hier liegen mit .page-id-86 darueber, deshalb kein !important.

   Die eigentlichen Preise/Buttons bleiben Inhalt der Seite; factory-preise.js
   ergaenzt nur Beschreibung, Badge und formatiert die Staffel-Zeilen.
   ========================================================================== */

.page-id-86 .fusion-pricing-table .fusion-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #383838;
	border: 1px solid rgba( 255, 255, 255, 0.09 );
	/* !important wie beim Preis: Avadas spaeter eingefuegter Farb-<style>
	   setzt sonst seine Rahmenfarbe durch. */
	border-color: rgba( 255, 255, 255, 0.09 ) !important;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.page-id-86 .fusion-pricing-table .fusion-panel:hover {
	transform: translateY( -4px );
	box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.4 );
	border-color: rgba( 255, 255, 255, 0.18 );
}

/* Spalten gleich hoch ziehen, damit die Buttons auf einer Linie enden.
   Die 100%-Kette muss durch Avadas Spalten-Wrapper laufen, sonst endet
   sie beim fusion-column-wrapper und die Karten bleiben unterschiedlich. */
.page-id-86 .fusion-pricing-table {
	height: 100%;
}

.page-id-86 .fusion-pricing-table .panel-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Avada schiebt zwischen Wrapper und Karte noch einen .panel-container -
   der muss Teil der Flex-Kette sein, sonst bleibt die Karte klein. */
.page-id-86 .fusion-pricing-table .panel-wrapper .panel-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.page-id-86 .fusion-pricing-table .panel-wrapper .fusion-panel {
	flex: 1 1 auto;
}

/* Die Karten-Zeile steht im Builder auf align-items:flex-start - erst
   stretch macht die Spalten (und damit die Karten) gleich hoch. */
.page-id-86 .fusion-row:has( .fusion-pricing-table ) {
	align-items: stretch;
}

.page-id-86 .fusion-layout-column:has( .fusion-pricing-table ) {
	align-self: stretch;
}

.page-id-86 .fusion-layout-column:has( .fusion-pricing-table ) .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.page-id-86 .fusion-column-wrapper > .fusion-pricing-table {
	flex: 1 1 auto;
}

.page-id-86 .fusion-pricing-table .panel-heading {
	background: #2b2b2b;
	border: 0;
	border-bottom: 2px solid var( --fc-accent );
	padding: 1.35rem 1.1rem 1.1rem;
	text-align: center;
}

.page-id-86 .fusion-pricing-table .title-row {
	margin: 0;
	color: var( --fc-on-dark );
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.3;
}

.fc-preis-badge {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.3rem 0.8rem;
	background: var( --fc-accent );
	color: #1a1a1a;
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1;
}

.fc-preis-desc {
	margin: 0.5rem 0 0;
	color: var( --fc-muted );
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
}

/* Hervorgehobenes Paket (Badge in functions.php konfigurierbar). */
.page-id-86 .fusion-pricing-table.fc-beliebt .fusion-panel {
	/* outline statt border: um border-color konkurrieren Avadas spaeter
	   eingefuegte Styles - outline setzt sonst niemand. */
	outline: 2px solid var( --fc-accent );
	outline-offset: -2px;
}

/* Preisblock */
.page-id-86 .fusion-pricing-table .panel-body.pricing-row {
	background: transparent;
	padding: 1.35rem 1rem 0.5rem;
	text-align: center;
}

.page-id-86 .fusion-pricing-table .price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.35rem;
}

.page-id-86 .fusion-pricing-table .price .currency {
	color: var( --fc-muted );
	font-size: 0.9rem;
	font-weight: 600;
}

.page-id-86 .fusion-pricing-table .price .integer-part {
	/* !important: Avadas Farb-<style> wird im Body nach unserem CSS
	   eingefuegt und gewinnt sonst die Kaskade. */
	color: var( --fc-accent ) !important;
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
}

.page-id-86 .fusion-pricing-table .price .time {
	color: var( --fc-muted );
	font-size: 0.85rem;
	font-weight: 500;
}

/* Leistungszeilen */
.page-id-86 .fusion-pricing-table .list-group {
	flex: 1 1 auto;
	margin: 0.6rem 0 0;
	padding: 0;
}

.page-id-86 .fusion-pricing-table .list-group .list-group-item {
	background: transparent;
	border: 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.07 );
	padding: 0.7rem 1.1rem;
	color: #dedede;
	font-size: 0.85rem;
	line-height: 1.45;
	text-align: center;
}

.fc-preis-row-preis {
	color: var( --fc-on-dark );
	font-weight: 700;
}

.fc-preis-row-laufzeit {
	color: var( --fc-muted );
}

/* Button unten, volle Breite */
.page-id-86 .fusion-pricing-table .panel-footer {
	background: transparent;
	border: 0;
	padding: 1rem 1.1rem 1.35rem;
	margin-top: auto;
}

.page-id-86 .fusion-pricing-table .panel-footer .fusion-button {
	display: block;
	width: 100%;
	text-align: center;
}

@media ( prefers-reduced-motion: reduce ) {
	.page-id-86 .fusion-pricing-table .fusion-panel {
		transition: none;
	}

	.page-id-86 .fusion-pricing-table .fusion-panel:hover {
		transform: none;
	}
}

/* --- Instagram-Ersatzraster (nur sichtbar, wenn das Plugin leer bleibt) --- */

.fc-insta-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 6px;
	max-width: 1100px;
	margin: 0 auto;
}

.fc-insta-grid__tile {
	display: block;
	border-radius: 8px;
	overflow: hidden;
}

.fc-insta-grid__tile img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.fc-insta-grid__tile:hover img,
.fc-insta-grid__tile:focus-visible img {
	transform: scale( 1.04 );
}

.fc-insta-grid__tile:focus-visible {
	outline: 2px solid var( --fc-accent );
	outline-offset: 2px;
}

@media ( min-width: 641px ) {
	.fc-insta-grid {
		grid-template-columns: repeat( 5, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fc-insta-grid__tile img {
		transition: none;
	}

	.fc-insta-grid__tile:hover img {
		transform: none;
	}
}

/* --- Social-Leiste unter dem Instagram-Feed ------------------------------ */

.fc-social-cta {
	margin: 2rem auto 0;
	text-align: center;
}

.fc-social-cta__text {
	margin: 0 0 1rem;
	color: var( --fc-muted );
	font-size: 0.92rem;
	line-height: 1.5;
}

.fc-social-cta__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.7rem;
}

.fc-social-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.62rem 1.25rem;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 999px;
	color: var( --fc-on-dark );
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease,
		color 0.2s ease, transform 0.2s ease;
}

.fc-social-cta__btn i {
	font-size: 1.05rem;
	line-height: 1;
}

.fc-social-cta__btn:hover,
.fc-social-cta__btn:focus {
	color: var( --fc-on-dark );
	text-decoration: none;
	transform: translateY( -2px );
}

/* Facebook und LinkedIn gefuellt in ihrer Firmenfarbe (wie WhatsApp).
   :has() waehlt den Button ueber sein Icon - Browser ohne :has() zeigen
   den neutralen Umriss-Stil, nichts geht kaputt. */
.fc-social-cta__btn:has( .awb-icon-facebook ) {
	background: #1877f2;
	border-color: #1877f2;
	color: #ffffff;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba( 24, 119, 242, 0.3 );
}

.fc-social-cta__btn:has( .awb-icon-facebook ):hover,
.fc-social-cta__btn:has( .awb-icon-facebook ):focus {
	background: #0f6ad8;
	border-color: #0f6ad8;
	color: #ffffff;
	box-shadow: 0 6px 18px rgba( 24, 119, 242, 0.4 );
}

.fc-social-cta__btn:has( .awb-icon-linkedin ) {
	background: #0a66c2;
	border-color: #0a66c2;
	color: #ffffff;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba( 10, 102, 194, 0.3 );
}

.fc-social-cta__btn:has( .awb-icon-linkedin ):hover,
.fc-social-cta__btn:has( .awb-icon-linkedin ):focus {
	background: #084f96;
	border-color: #084f96;
	color: #ffffff;
	box-shadow: 0 6px 18px rgba( 10, 102, 194, 0.4 );
}

.fc-social-cta__btn:hover {
	border-color: rgba( 255, 255, 255, 0.6 );
}

/* WhatsApp als gefuellter Haupt-Button. */
.fc-social-cta__btn--cta {
	background: #25d366;
	border-color: #25d366;
	color: #0b3d20;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba( 37, 211, 102, 0.3 );
}

.fc-social-cta__btn--cta:hover,
.fc-social-cta__btn--cta:focus {
	background: #1fb857;
	border-color: #1fb857;
	color: #0b3d20;
	box-shadow: 0 6px 18px rgba( 37, 211, 102, 0.4 );
}

.fc-social-cta__btn:focus-visible {
	outline: 2px solid var( --fc-accent );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.fc-social-cta__btn {
		transition: none;
	}

	.fc-social-cta__btn:hover {
		transform: none;
	}
}

/* ==========================================================================
   12. Über-uns – Intro als Hero (Bild als Vollflächen-Hintergrund)

   factory-ueberuns.js legt das Bild der Bildspalte als --fc-hero-img ab. Das
   Bild liegt als Hintergrund ueber den ganzen Abschnitt, der Text steht mit
   dunklem Verlauf davor. Gescoped auf die Über-uns-Seite (page-id-3652).

   --fc-hero-bg = dunkler Grundton hinter/unter dem Bild.
   ========================================================================== */

.page-id-3652 .fc-ueber-hero {
	--fc-hero-bg: #1e1e1e;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	padding: 3.5rem 0 !important;
	background-color: var( --fc-hero-bg ) !important;
	background-image: var( --fc-hero-img );
	/* auto 100%: die volle Bildhoehe ist IMMER sichtbar – oben/unten wird nie
	   beschnitten. Das Querformat-Foto sitzt rechts in voller Hoehe; links
	   liegt der dunkle Grundton mit dem Text. Auf schmalen Screens wird das
	   Bild nur links/rechts beschnitten, nie oben/unten. */
	background-size: auto 100%;
	background-position: right top;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Dunkler Verlauf: links kraeftig fuer lesbaren Text, rechts heller, damit die
   Personen sichtbar bleiben. Zusaetzlich ein weicher Auslauf nach unten. */
.page-id-3652 .fc-ueber-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			90deg,
			rgba( 18, 18, 18, 0.97 ) 0%,
			rgba( 18, 18, 18, 0.9 ) 30%,
			rgba( 18, 18, 18, 0.5 ) 46%,
			rgba( 18, 18, 18, 0 ) 60%
		),
		linear-gradient(
			to top,
			var( --fc-hero-bg ) 0%,
			rgba( 30, 30, 30, 0 ) 20%
		);
}

/* Bildspalte wird nicht mehr gebraucht (Bild = Abschnitts-Hintergrund). */
.page-id-3652 .fc-ueber-hero .fc-ueber-hero__bildspalte {
	display: none !important;
}

/* Inhalts-Reihe vor den Verlauf holen. */
.page-id-3652 .fc-ueber-hero .fusion-row {
	position: relative;
	z-index: 2;
}

/* Textspalte: links, vor dem dunklen Verlauf – schmal genug, damit sie nicht
   über das rechts sitzende Foto laeuft. */
.page-id-3652 .fc-ueber-hero .fc-ueber-hero__text {
	position: relative;
	z-index: 2;
	width: 100% !important;
	max-width: 480px;
	margin: 0 !important;
}

.page-id-3652 .fc-ueber-hero__text .fusion-title-heading,
.page-id-3652 .fc-ueber-hero__text .fusion-title h1,
.page-id-3652 .fc-ueber-hero__text .fusion-title h2,
.page-id-3652 .fc-ueber-hero__text .fusion-title h3 {
	color: #ffffff !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.4 );
}

.page-id-3652 .fc-ueber-hero__text .fusion-title {
	position: relative;
	padding-bottom: 1.1rem;
	margin-bottom: 1.3rem !important;
}

.page-id-3652 .fc-ueber-hero__text .fusion-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: var( --fc-accent );
}

.page-id-3652 .fc-ueber-hero__text .fusion-text,
.page-id-3652 .fc-ueber-hero__text .fusion-text p {
	color: rgba( 255, 255, 255, 0.9 ) !important;
	font-size: 1.02rem;
	line-height: 1.7;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.35 );
}

/* --- Tablet und Handy: Bild ganzflaechig abgedunkelt, Text darueber ------ */

/* Handy/Tablet: KEIN Hintergrundbild. Text normal, Foto als normales Bild
   darunter. */
@media ( max-width: 1024px ) {
	.page-id-3652 .fc-ueber-hero {
		display: block;
		min-height: 0;
		padding: 2.5rem 0 0 !important;
		background-image: none !important;
	}

	.page-id-3652 .fc-ueber-hero::before {
		display: none;
	}

	.page-id-3652 .fc-ueber-hero .fusion-row {
		display: flex;
		flex-direction: column;
	}

	.page-id-3652 .fc-ueber-hero .fc-ueber-hero__text {
		order: 1;
		max-width: 100% !important;
		padding: 0 1.5rem !important;
	}

	/* Bildspalte wieder einblenden – als normales Bild unter dem Text. */
	.page-id-3652 .fc-ueber-hero .fc-ueber-hero__bildspalte {
		order: 2;
		display: block !important;
		margin: 1.75rem 0 0 !important;
		padding: 0 !important;
		background: none !important;
	}

	.page-id-3652 .fc-ueber-hero .fc-ueber-hero__bildspalte::before {
		display: none;
	}

	.page-id-3652 .fc-ueber-hero .fc-ueber-hero__bildspalte img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}
}

/* --- Über-uns: Coaches strukturiert (Inhaber + Team) --------------------- */

.page-id-3652 .fc-team-block {
	width: 100%;
	margin: 1rem 0 0;
}

.page-id-3652 .fc-team-block.fc-team-coaches {
	margin-top: 2.75rem;
}

.page-id-3652 .fc-team-heading {
	position: relative;
	margin: 0 0 1.6rem;
	padding-bottom: 0.7rem;
	text-align: center;
	color: var( --fc-on-dark );
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.page-id-3652 .fc-team-heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 56px;
	height: 4px;
	margin-left: -28px;
	border-radius: 2px;
	background: var( --fc-accent );
}

.page-id-3652 .fc-team-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.6rem 1.5rem;
	max-width: 1120px;
	margin: 0 auto;
}

/* Karten einheitlich gross, unabhaengig von Avadas 1_4-Breite. */
.page-id-3652 .fc-team-grid > .fusion-layout-column {
	width: 240px !important;
	max-width: 100%;
	margin: 0 !important;
	float: none !important;
}

/* Namen orange, Rollen weiss – einheitlich fuer Inhaber und Team. */
.page-id-3652 .fusion-person .person-name {
	color: var( --fc-accent ) !important;
}

.page-id-3652 .fusion-person .person-title {
	color: #ffffff !important;
	font-weight: 600;
}

/* --- responsiv ---------------------------------------------------------- */

@media ( max-width: 640px ) {
	.page-id-3652 .fc-team-grid > .fusion-layout-column {
		width: 46% !important;
	}

	.page-id-3652 .fc-team-heading {
		font-size: 1.3rem;
	}
}

/* Rollen-Zeilen (aus factory-ueberuns.js): jede Rolle eine eigene Zeile. */
.page-id-3652 .person-title .fc-rolle-zeile {
	display: block;
	line-height: 1.35;
}

/* ==========================================================================
   13. Mobiles Menü – Untermenüs (v. a. Leistungen-Bereiche) kompakter

   Die eingefuegten Bereiche nutzen Avadas native Submenu-Klassen. Auf dem
   Handy sind 16px + 40px Rechts-Padding zu viel -> lange Labels brechen
   haesslich um. Kleiner + weniger Padding = ruhiger, mehr passt auf eine Zeile.
   ========================================================================== */

@media ( max-width: 1024px ) {
	.awb-menu__sub-ul .awb-menu__sub-a {
		font-size: 14px !important;
		line-height: 1.35 !important;
		padding-top: 11px !important;
		padding-bottom: 11px !important;
		padding-right: 24px !important;
	}

	.awb-menu__sub-ul .awb-menu__sub-a span {
		white-space: normal;
	}
}