/* =========================================================================
   Physiotherapie Daniela Püls & Team – Template-CSS (Joomla 6)
   Übernahme der bestehenden Joomla-3-Gestaltung (Quix-/Stähly-/DJ-MegaMenu).
   ========================================================================= */

/* ---------- 1. Reset / Grundlagen ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6;
	color: #222;
	background: #f6fff2; /* mintgrün, wie Original (off-canvas-content) */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;

	/* Worttrennung ausgeschaltet (kein Bindestrich-Umbruch im Wort).
	   Wörter brechen nur an Leerzeichen normal um. */
	hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

/* Sicherstellen, dass alle textführenden Elemente KEINE automatische
   Silbentrennung verwenden und keine harten Mid-Word-Breaks. */
h1, h2, h3, h4, h5, h6,
p, span, a, li, dt, dd, label, td, th,
figcaption, blockquote, button, input, textarea, select {
	hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

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

a {
	color: #da1d74;
	text-decoration: none;
	transition: color .3s ease;
}
a:hover { color: #92bd2f; }

p, ul, ol, dl, pre, address, fieldset, figure {
	margin: 0 0 0 0;
}
p { padding-top: 10px; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

h1 {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 50px;
	color: #92BD2F;
	line-height: 1.2;
}

h2 {
	font-family: 'Jura', 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 73px;
	line-height: 1.2;
}

h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
}

/* ---------- 2. Layout-Grund: Container, Reihen, Spalten (Quix-Nachbau) ---------- */

.qx,
.qx * {
	box-sizing: border-box;
}

.qx-section {
	position: relative;
	padding: 0;
}
.qx-section--stretch { width: 100%; }

.qx-background-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.qx-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
	z-index: 1;
}
.qx-container-fluid {
	width: 100%;
	padding: 0;
	position: relative;
	z-index: 1;
}

.qx-rows { width: 100%; }

.qx-row-wrap { width: 100%; position: relative; }

.qx-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	width: 100%;
}

.qx-column {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 100%;
	max-width: 100%;
	padding: 15px 0;
}
.qx-col-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 15px;
	position: relative;
	z-index: 1;
}

.qx-elements-wrap { width: 100%; position: relative; }

.qx-element-wrap + .qx-element-wrap { margin-top: 20px; }

/* ---------- 3. Kopfbereich (Original: layout-3 für Startseite, layout-16 für andere) ----------
   Wichtig:
   Auf der STARTSEITE schwebt der Header transparent über dem Hero
   (Original verwendet color: rgba(255,255,255,0) für die Headline, sodass nur
   die Navigation sichtbar ist). Position absolute hält den Hero direkt
   unter dem Viewport-Top, ohne dass der Header Platz einnimmt.

   Auf den RESTLICHEN Seiten ist der Header ein grüner Balken mit weißer
   Headline "Therapie für den Körper".

   Im Original gab es KEIN Logo-Bild - daher hier nur Text-Headlines. */

header.kopf {
	position: relative;
	z-index: 50;
	background: transparent;
}

.kopf-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1440px;
	margin: 0 auto;
	padding: 25px;
	width: 100%;
	position: relative;
}

/* Joomla wraps das Custom-HTML-Modul in <div class="mod-custom">.
   Das Modul muss links stehen (Logo-Bereich, 39%). */
.kopf-inner > .mod-custom,
.kopf-inner > .moduletable {
	flex: 0 0 39%;
	max-width: 39%;
	order: 1;
}
.kopf-inner > .mod-custom > .kopf-row,
.kopf-inner > .moduletable > .kopf-row,
.kopf-inner > .kopf-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Headline - eine einzige H1 mit Text "Physiotherapie Daniela Püls",
   weiß auf allen Geräten sichtbar (auch auf Startseite, dort über
   dem Hero-Bild mit Text-Shadow für Lesbarkeit). */
.kopf-row .kopf-headline {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.2;
	color: #ffffff;
	flex: 1 1 auto;
	hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}
.kopf-row .kopf-headline a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
}
.kopf-row .kopf-headline a:hover,
.kopf-row .kopf-headline a:focus {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}
.kopf-row .kopf-headline .akzent { color: #ABD34E; }

/* === Startseite: Header schwebt über Hero, Headline weiß sichtbar mit
       Schatten für Kontrast über dem Hero-Bild =========================== */
body.startseite header.kopf {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent;
}
body.startseite header.kopf .kopf-inner { background: transparent; }
body.startseite .kopf-headline {
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0,0,0,.45);
}

/* === Restliche Seiten: grüner Header mit weißer Headline ================ */
body:not(.startseite) header.kopf {
	background-color: #92BD2F;
}
body:not(.startseite) .kopf-headline {
	color: #ffffff;
}

/* ---------- 4. Hauptnavigation (DJ MegaMenu-Stil, Joomla baut UL > LI) ---------- */

/* Joomla-Menü-Modul wird im flex-Container der .kopf-inner zur rechten
   Spalte (61%). order:2 erzwingt rechts, unabhängig von der DOM-Reihenfolge.
   Auf Mobile wird es per .mobile-burger durch das Burger-Overlay ersetzt. */
header.kopf nav.mod-menu,
header.kopf .mod-menu,
header.kopf .nav,
header.kopf ul.menu {
	display: flex;
	flex: 0 0 61%;
	max-width: 61%;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	order: 2;
}

header.kopf nav.mod-menu ul,
header.kopf .mod-menu ul,
header.kopf ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 100%;
}

header.kopf nav.mod-menu li,
header.kopf .mod-menu li,
header.kopf ul.menu > li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: none;
	border-bottom: 5px solid transparent;
	transition: border-color .25s ease;
}

header.kopf nav.mod-menu li > a,
header.kopf .mod-menu li > a,
header.kopf ul.menu > li > a,
header.kopf ul.menu > li > span {
	display: block;
	padding: 12px 14px;
	height: auto;
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	line-height: 1.4;
}

/* Auf Startseite stehen die Menüpunkte über dem Hero - dunkler Schatten, weiße Schrift */
body.startseite header.kopf nav.mod-menu li > a,
body.startseite header.kopf .mod-menu li > a,
body.startseite header.kopf ul.menu > li > a {
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Auf restlichen Seiten ist der Header grün, also weiße Schrift ohne Schatten */
body:not(.startseite) header.kopf nav.mod-menu li > a,
body:not(.startseite) header.kopf .mod-menu li > a,
body:not(.startseite) header.kopf ul.menu > li > a {
	color: #ffffff;
}

header.kopf li:hover,
header.kopf li.active,
header.kopf li.current {
	border-bottom-color: #ABD34E;
}

/* Impressum/Datenschutz aus der Hauptnavigation ausblenden (wie im Original) */
header.kopf .menu li.itemid114,
header.kopf .menu li.itemid115,
header.kopf .menu li.hide-from-nav {
	display: none !important;
}

/* ---------- 5. Mobiler Burger ---------- */

.mobile-burger {
	display: none;
	background: transparent;
	border: 0;
	width: 50px;
	height: 50px;
	padding: 0;
	margin-left: auto;
	cursor: pointer;
	position: relative;
}
.mobile-burger span {
	display: block;
	width: 28px;
	height: 3px;
	background: #ffffff;
	margin: 5px auto;
	border-radius: 2px;
	transition: all .25s ease;
}
.mobile-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile-Menü-Overlay */
.mobile-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: #92BD2F;
	z-index: 9999;
	overflow-y: auto;
	padding: 80px 30px 40px;
}
.mobile-menu-overlay.is-open {
	display: flex;
	flex-direction: column;
}
.mobile-menu-overlay ul {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}
.mobile-menu-overlay ul li {
	border-bottom: 1px solid rgba(255,255,255,.25);
}
.mobile-menu-overlay ul li:last-child { border-bottom: 0; }
.mobile-menu-overlay ul li a {
	display: block;
	padding: 18px 0;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
}
.mobile-menu-overlay ul li.active a,
.mobile-menu-overlay ul li.current a { color: #ffffff; font-weight: 600; }

.mobile-menu-overlay .mobile-menu-legal {
	display: flex;
	justify-content: center;
	gap: 30px;
	padding-top: 30px;
	margin-top: auto;
}
.mobile-menu-overlay .mobile-menu-legal a {
	color: #ffffff;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: underline;
	padding: 6px 0;
}

.mobile-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: transparent;
	border: 0;
	color: #ffffff;
	font-size: 36px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	line-height: 1;
}

/* ---------- 6. Hero / Startseiten-Slider ---------- */

.hero-wrap { position: relative; }

.hero-slider {
	position: relative;
	width: 100%;
	min-height: 715px;
	overflow: hidden;
}

.hero-slider .slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease;
}
.hero-slider .slide.is-active { opacity: 1; z-index: 2; }

.hero-slider .slide-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

.hero-slider .slide-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 2;
}

.hero-slider .slide-content {
	position: absolute;
	z-index: 3;
	max-width: 800px;
	width: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	color: #ffffff;
	text-align: center;
}
.hero-slider .slide-content h2 {
	font-family: 'Quicksand', 'Poppins', sans-serif;
	font-size: 28px;
	font-weight: 400;
	color: #92BD2F;
	margin: 0 0 20px 0;
	line-height: 1.3;
}
.hero-slider .slide-content p {
	font-size: 51px;
	font-weight: 600;
	color: #ffffff;
	text-transform: uppercase;
	margin: 0 0 25px 0;
	line-height: 1.15;
	padding: 0;
}
.hero-slider .slide-content .qx-btn {
	display: inline-block;
	color: #ffffff;
	background: #DA1D74;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 1px;
	border-top-right-radius: 1px;
	border-bottom-left-radius: 1px;
	font-size: 18px;
	text-decoration: none;
	transition: background-color .3s ease;
}
.hero-slider .slide-content .qx-btn:hover { background: #92BD2F; color: #ffffff; }

.hero-slider .slide-dots {
	position: absolute;
	left: 0; right: 0;
	bottom: 25px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hero-slider .slide-dots li {
	display: inline-block;
}
.hero-slider .slide-dots button {
	width: 15px;
	height: 15px;
	background: #eeeeee;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 0;
	overflow: hidden;
	text-indent: -9999px;
}
.hero-slider .slide-dots button.is-active { background: rgba(102,102,102,.6); }

/* Bei Startseite überlappt der Inhaltsbereich nach oben - so bleibt der Hero
   großzügig und der erste Inhaltsblock startet darunter. */
body.startseite .hero-wrap { margin-top: -180px; padding-top: 180px; }
body.startseite .inhaltsbereich { position: relative; z-index: 5; }

/* ---------- 7. Inhaltsbereich allgemein ---------- */

.inhaltsbereich {
	position: relative;
	background: #ffffff;
}

/* Sektionen */
.qx-section {
	padding: 0;
}

#mehr {
	padding: 80px 0;
}

/* "Willkommen"-Section auf Startseite (zwei Spalten) */
.start-willkommen .qx-row { align-items: flex-start; }

/* Linke Spalte breiter, damit "Willkommen" auf Desktop sicher in eine
   Zeile passt. Worttrennung ist global deaktiviert (hyphens: none). */
.start-willkommen .col-headline { flex: 0 0 38%; max-width: 38%; }
.start-willkommen .col-text     { flex: 0 0 62%; max-width: 62%; }

.start-willkommen .qx-element-divider-separator-v2 {
	padding: 15px 0;
}
.start-willkommen .qx-divider-separator {
	display: inline-block;
	width: 28%;
	border-top: 3px solid #e83e8c;
}

.start-willkommen .lead-pink {
	font-size: 25px;
	color: #DA1D74;
	margin-bottom: 20px;
}

.start-headline-deko h2 {
	font-family: 'Italianno', cursive;
	font-size: 87px;
	color: rgba(214,214,214,0.39);
	text-align: center;
	margin: 0;
	line-height: 1.2;
}

/* Therapeutisches Angebot - Section mit grünem Hintergrund + Praxis-Bild */
.start-angebot {
	position: relative;
	background-color: #92BD2F;
	background-image: url("../../../images/angebot-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 80px 0;
}
.start-angebot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(146, 189, 47, .83);
	z-index: 0;
}
.start-angebot .qx-container { position: relative; z-index: 1; }

.start-angebot h2 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 34px;
	color: #ffffff;
	text-align: center;
	margin: 0;
}
.start-angebot .qx-divider-separator {
	display: inline-block;
	width: 8%;
	border-top: 3px solid #DA1D74;
	margin: 0 auto;
}
.start-angebot .center-divider { text-align: center; padding: 15px 0; }

.start-angebot .blurb-row { display: flex; flex-wrap: wrap; }
.start-angebot .blurb {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 15px;
	text-align: center;
	color: #ffffff;
}
.start-angebot .blurb img,
.start-angebot .blurb svg {
	width: 6%;
	min-width: 50px;
	margin: 0 auto 30px auto;
	display: block;
}
.start-angebot .blurb h3 {
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 25px;
	margin: 0 0 20px 0;
	font-weight: 400;
}
.start-angebot .blurb p,
.start-angebot .blurb .blurb-body { color: #ffffff; padding: 0; }

.start-angebot .button-row { padding-top: 50px; text-align: center; }

/* Zitat-Section ("Kümmere dich um deinen Körper...") */
.start-zitat {
	background: #ffffff;
	padding: 80px 0;
	text-align: center;
}
.start-zitat .qx-col-wrap { padding: 0 15%; }
.start-zitat h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 28px;
	color: #DA1D74;
	margin-bottom: 20px;
	line-height: 1.2;
}
.start-zitat .quelle { text-align: center; padding: 0; }

/* ---------- 8. Buttons ---------- */

.qx-btn {
	display: inline-block;
	padding: 10px 20px;
	color: #ffffff;
	background-color: #5b2282;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease;
}
.qx-btn-primary {
	background-color: #DA1D74;
	color: #ffffff;
}
.qx-btn-primary:hover {
	background-color: #92BD2F;
	color: #ffffff;
}

/* CTA-Variante (Therapieangebote ansehen, "Zum Kontakt") */
.qx-btn-cta {
	background-color: #92BD2F;
	color: #ffffff;
	font-size: 15px;
	text-transform: uppercase;
	padding: 14px 35px;
	border-bottom-right-radius: 25px;
	border-top-left-radius: 1px;
	border-top-right-radius: 1px;
	border-bottom-left-radius: 1px;
}
.qx-btn-cta:hover { background-color: #DA1D74; color: #ffffff; }

.qx-btn-pink {
	background-color: #DA1D74;
	color: #ffffff;
}
.qx-btn-pink:hover { background-color: #92BD2F; }

a.qx-btn,
a.qx-btn:hover { text-decoration: none; }

/* ---------- 9. Über uns ---------- */

.ueber-mich {
	padding: 80px 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.ueber-mich .qx-row { display: flex; flex-wrap: wrap; }
.ueber-mich .col-text { flex: 0 0 57%; max-width: 57%; padding: 15px; }
.ueber-mich .col-werdegang {
	flex: 0 0 43%; max-width: 43%; padding: 30px;
	background: #92BD2F; /* volldeckend, sonst scheint mintgrüner Body durch */
	color: #ffffff;
}
.ueber-mich .col-werdegang p,
.ueber-mich .col-werdegang ul,
.ueber-mich .col-werdegang li,
.ueber-mich .col-werdegang b { color: #ffffff; }
.ueber-mich .col-werdegang .werdegang-titel {
	font-size: 26px;
	color: #ffffff;
	font-weight: 600;
}
.ueber-mich .col-werdegang ul {
	list-style: disc;
	padding-left: 20px;
	margin: 10px 0;
}
.ueber-mich .col-werdegang ul li { padding: 4px 0; }
.ueber-mich .col-werdegang figure {
	text-align: center;
	margin: 20px 0 0;
}
.ueber-mich .col-werdegang figure img {
	width: 53%;
	display: inline-block;
}

/* Bilder-Karussell auf Über uns */
.ueber-galerie {
	padding: 40px 0;
	background: #ffffff;
}
/* Über-uns Galerie - Quix-Style Slider:
   Desktop: 3 Bilder gleichzeitig, Tablet: 2, Mobile: 1.
   Breite + Translate werden per JS in PX exakt berechnet
   (siehe initUeberGalerie in main.js). */
.ueber-galerie {
	position: relative;
}
.ueber-galerie .galerie-viewport {
	overflow: hidden;
	padding: 0;
}
.ueber-galerie .galerie-strip {
	display: flex;
	transition: transform .6s ease;
	will-change: transform;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ueber-galerie .galerie-strip figure {
	flex: 0 0 auto; /* Breite wird per JS gesetzt */
	margin: 0;
	padding: 0 7px; /* halber Gap als Padding pro Item -> 14px Gap optisch */
	box-sizing: border-box;
}
.ueber-galerie .galerie-strip figure img {
	width: 100%;
	height: 350px;
	object-fit: cover;
	display: block;
	pointer-events: none; /* verhindert Bild-Drag im Browser */
}
.ueber-galerie .galerie-prev,
.ueber-galerie .galerie-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,.85);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	font-size: 18px;
	color: #444;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	transition: background-color .2s ease;
}
.ueber-galerie .galerie-prev { left: 20px; }
.ueber-galerie .galerie-next { right: 20px; }
.ueber-galerie .galerie-prev:hover,
.ueber-galerie .galerie-next:hover { background: #ffffff; }

.ueber-galerie .galerie-dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 25px 0 0;
	padding: 0;
}
.ueber-galerie .galerie-dots li button {
	width: 12px;
	height: 12px;
	background: #cccccc;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 50%;
}
.ueber-galerie .galerie-dots li button.is-active { background: #92BD2F; }

/* Schulungen-/Fortbildungs-Banner - mittig zentrierte pinke Schrift,
   wie Original (Poppins 300, 22px, color #DA1D74, text-align center).
   Wichtig: Spalte (qx-column) muss volle Breite einnehmen, damit der
   max-width-Wrap mittig zentriert sitzt. */
.ueber-banner {
	padding: 80px 0;
	background: transparent;
	text-align: center;
}
.ueber-banner .qx-row { justify-content: center; }
.ueber-banner .qx-column {
	flex: 1 1 100%;
	max-width: 100%;
	padding: 0;
	/* Robust: keine horizontale Verschiebung durch evtl. greifende
	   Reveal-Animationen (sonst wirkt der Text nicht mittig). */
	transform: none !important;
}
.ueber-banner .qx-col-wrap {
	background: transparent;
	text-align: center;
	padding: 0 15px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
/* WICHTIG: Selektor NUR auf <p> beschränken. Die alte Regel
   ".ueber-banner div" greift sonst auf JEDES nested div (auch
   .qx-container!) und überschreibt deren margin:0 auto - damit war
   der Container nicht mittig zentriert. */
.ueber-banner p {
	color: #DA1D74;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 22px;
	padding: 0;
	margin: 0 0 18px 0;
	line-height: 1.5;
	text-align: center;
}
.ueber-banner p:last-child { margin-bottom: 0; }

/* ---------- 10. Leistungen / Accordion ---------- */

/* Hero-Sektion mit Bild-Hintergrund + dunkles Overlay (wie Original) */
.leistungen-intro {
	position: relative;
	padding: 120px 0 80px;
	background-image: url("../../../images/leistungen-hero.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
	overflow: hidden;
}
.leistungen-intro .leistungen-intro-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 0;
}
.leistungen-intro .qx-container { position: relative; z-index: 1; }
.leistungen-intro .qx-shape {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}
.leistungen-intro .qx-shape svg {
	display: block;
	width: 100%;
	height: 80px;
}
.leistungen-intro .qx-shape-fill { fill: #92BD2F; }

/* Hero einspaltig wie Original: H1 oben + Lead-Text drunter */
.leistungen-intro .qx-row { align-items: flex-start; flex-direction: column; }
.leistungen-intro .col-headline,
.leistungen-intro .col-text { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }
.leistungen-intro h1 {
	color: #ffffff;
	font-size: 50px;
	margin: 0 0 10px 0;
	line-height: 1.2;
}
.leistungen-intro h1 span { color: inherit; }
.leistungen-intro p { color: #ffffff; padding: 0; margin: 0; font-size: 20px; }

/* Akkordeon-Liste auf grünem Hintergrund (wie Original-Section nach Hero) */
.leistungen-list {
	padding: 60px 0 80px;
	background: #92BD2F;
}
.leistungen-list-original-padding-fix { padding: 0 0 80px; }
.leistungen-list .leistungen-headline {
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	color: #ffffff;
	font-size: 24px;
	padding: 0 15px;
	margin: 0;
	line-height: 1.3;
}
.leistungen-list .leistungen-headline span { color: inherit; }
.leistungen-list .leistungen-divider {
	display: block;
	width: 80%;
	max-width: 900px;
	margin: 18px auto;
	border-top: 5px solid #e83e8c;
	font-size: 0;
	line-height: 0;
}

.leistungen-list .accordion-wrap {
	display: flex;
	flex-wrap: wrap;
	max-width: 1140px;
	margin: 30px auto 0;
	padding: 0 15px;
}
.leistungen-list .accordion-col { flex: 0 0 50%; max-width: 50%; padding: 0 10px; }

.qx-accordion {
	list-style: none;
	margin: 0;
	padding: 0;
}
.qx-accordion .qx-element-accordion-item {
	border: 1px solid #e8eff1;
	border-radius: 4px;
	margin-bottom: 10px;
	background: #ffffff;
}
.qx-accordion .qx-accordion-title {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 14px 18px;
	font-size: 15px;
	color: #444;
	cursor: pointer;
	text-decoration: none;
	font-weight: 400;
}
.qx-accordion .qx-accordion-title:hover { color: #DA1D74; }

/* Pinker Punkt vor jedem Akkordeon-Eintrag - robuste CSS-only Lösung
   per ::before, da Joomla/TinyMCE leere <i>-Elemente entfernt. */
.qx-accordion .qx-accordion-title::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	min-width: 12px;
	border-radius: 50%;
	background: #DA1D74;
	margin-right: 15px;
	flex-shrink: 0;
}

/* Wenn der alte Icon-Span doch noch im Code steckt, ausblenden,
   damit kein doppelter Punkt entsteht. */
.qx-accordion_icon { display: none; }
.qx-accordion .qx-accordion-content {
	max-height: 0;
	overflow: hidden;
	padding: 0 18px;
	color: #333;
	font-size: 16px;
	line-height: 1.55;
	transition: max-height .4s ease, padding .3s ease;
}
.qx-accordion .qx-element-accordion-item.is-open .qx-accordion-content {
	max-height: 500px;
	padding: 4px 18px 14px;
}
.qx-accordion .qx-accordion-content ul { padding-left: 18px; margin: 0; }
.qx-accordion .qx-accordion-content li { padding: 4px 0; }

/* Leistungen CTA Banner - Praxisbild mit grünem Overlay wie Original
   (qx-section-42558). Original-Werte:
     bg-color: rgb(106, 176, 76) - kräftiges Waldgrün
     bg-overlay: DSC02242.jpg + grau-rosé Tönung, opacity 0.55
   Diese Schichtung erzeugt einen grünen Bildfilter, auf dem die weiße
   Schrift gut lesbar bleibt. */
.leistungen-cta {
	position: relative;
	padding: 100px 0;
	background-color: rgb(106, 176, 76);
	color: #ffffff;
	text-align: center;
	overflow: hidden;
}
.leistungen-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(162, 155, 155);
	background-image: url("../../../images/leistungen-cta-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.55;
	z-index: 0;
}
.leistungen-cta .qx-container { position: relative; z-index: 1; }
.leistungen-cta h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 36px;
	color: #ffffff;
	margin: 0 0 15px 0;
	line-height: 1.2;
	text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.leistungen-cta p {
	padding: 0;
	margin: 0 0 30px 0;
	color: #ffffff;
	font-size: 20px;
	text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.leistungen-cta .btn-row {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

/* ---------- 11. Kontakt ---------- */

/* Kontakt-Hero - Außenansicht der neuen Praxis mit Linear-Gradient-Overlay */
.kontakt-hero {
	position: relative;
	padding: 250px 0 150px;
	background-image: url("../../../images/kontakt-hero.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.kontakt-hero .kontakt-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,15,15,1) 0%, rgba(162,155,155,1) 100%);
	opacity: 0.55;
	z-index: 0;
}
.kontakt-hero .qx-container { position: relative; z-index: 1; }

/* Kontakt-Section (qx-section-38116) - dunkles Grün mit cremefarbenem Overlay */
.kontakt-section {
	position: relative;
	padding: 105px 0 80px;
	background-color: rgba(128, 167, 40, 1);
	overflow: hidden;
}
.kontakt-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255,252,246,1) 0%, rgba(255,255,255,1) 100%);
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
}
.kontakt-section .qx-container { position: relative; z-index: 1; }
.kontakt-section .qx-row { align-items: flex-start; gap: 0; }
.kontakt-section .col-info { flex: 0 0 50%; max-width: 50%; padding: 15px; }
.kontakt-section .col-form {
	flex: 0 0 50%; max-width: 50%; padding: 0;
	position: relative;
}

.kontakt-blurb {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 35px;
}
.kontakt-blurb .icon {
	flex: 0 0 45px;
	width: 45px;
	min-height: 45px;
	background: transparent;
	color: #DA1D74;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-style: normal;
}
.kontakt-blurb .icon i { color: #DA1D74; font-size: 36px; line-height: 1; }
.kontakt-blurb h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #DA1D74;
	margin-bottom: 6px;
}
.kontakt-blurb p,
.kontakt-blurb div { padding: 0; margin: 0; }

.kontakt-blurb-headline { margin-bottom: 25px; }
.kontakt-blurb-headline h1 {
	font-family: 'Poppins', sans-serif;
	font-size: 40px;
	color: #92BD2F;
	font-weight: 400;
	margin-bottom: 10px;
}
.kontakt-blurb-headline p { padding: 0; }

/* Formular - Original: bg rgba(128,167,40,0.55) halbtransparent grün
   direkt in der grünen Spalte, OHNE zusätzlichen inneren Kasten/Schatten. */
.kontakt-form {
	background: rgba(128, 167, 40, 0.55);
	margin-left: 50px;
	padding: 50px 50px 40px;
	color: #ffffff;
}
.kontakt-form .qx-form-group { margin-bottom: 18px; }
.kontakt-form label {
	display: block;
	margin-bottom: 10px;
	font-weight: 400;
	font-size: 20px;
	color: #ffffff;
}
.kontakt-form label strong { color: #DA1D74; }

.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font: inherit;
	font-size: 16px;
	background: #ffffff;
}
.kontakt-form input:focus,
.kontakt-form textarea:focus {
	outline: 2px solid #92BD2F;
	border-color: #92BD2F;
}
.kontakt-form textarea { min-height: 140px; resize: vertical; }

.kontakt-form .form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kontakt-form .form-checkbox {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
}
.kontakt-form .form-checkbox input { width: auto; margin-top: 4px; }

.kontakt-form .form-submit {
	margin-top: 10px;
}
.kontakt-form button.qx-btn {
	background: #DA1D74;
	color: #ffffff;
	padding: 14px 28px;
	border: 0;
	border-bottom-right-radius: 20px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color .3s ease;
}
.kontakt-form button.qx-btn:hover { background: #92BD2F; }

.kontakt-form .form-message {
	padding: 12px 14px;
	border-radius: 4px;
	margin-top: 12px;
	font-size: 15px;
}
.kontakt-form .form-message.is-success {
	background: #e7f5dd;
	border: 1px solid #92BD2F;
	color: #3a5b14;
}
.kontakt-form .form-message.is-error {
	background: #fde7ee;
	border: 1px solid #DA1D74;
	color: #7a1742;
}

/* Karte */
.kontakt-karte {
	margin: 0;
	padding: 0;
}
.kontakt-karte .map-wrap {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	background: #e8e8e8;
}
.kontakt-karte iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.kontakt-karte .karte-hinweis {
	font-size: 13px;
	color: #666;
	margin-top: 8px;
	padding: 0;
}

/* ---------- 12. Impressum / Datenschutz - Standard-Textseiten ---------- */

.text-section {
	padding: 60px 0;
}
.text-section h1 {
	color: #92BD2F;
	margin-bottom: 30px;
}
.text-section h4 {
	color: #DA1D74;
	font-size: 20px;
	font-weight: 600;
	margin: 25px 0 10px;
}
.text-section p { padding: 0 0 12px 0; }
.text-section ul,
.text-section ol {
	padding-left: 22px;
	margin: 0 0 12px;
}

/* ---------- 13. Footer ---------- */

footer.footer {
	background-color: #92BD2F;
	color: #ffffff;
	padding: 50px 0 0;
}
footer.footer .footer-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}
footer.footer .footer-row {
	display: flex;
	flex-wrap: wrap;
}
footer.footer .footer-col {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	padding: 15px;
}
footer.footer h3 {
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 10px;
}
footer.footer p,
footer.footer a {
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
}
footer.footer a:hover { color: #ABD34E; }

footer.footer .footer-bottom {
	border-top: 1px solid rgba(255,255,255,.25);
	margin-top: 30px;
	padding: 18px 15px;
	font-size: 12px;
	color: #ffffff;
	text-align: right; /* im Original-Layout 2-spaltig, rechte Spalte hat den Text */
}
footer.footer .footer-bottom a {
	color: #ffffff;
	text-decoration: underline;
	font-size: inherit; /* erbt 12px - sonst greift footer.footer a {16px} */
	font-weight: 400;
}

/* Social Icons */
.footer-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
}
.footer-social li a {
	display: inline-flex;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,.15);
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 18px;
	text-decoration: none;
}
.footer-social li a:hover { background: rgba(255,255,255,.3); }

/* ---------- 14. Zurück nach oben ---------- */

.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.05);
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: #DA1D74 url("../images/cd-top-arrow.svg") no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s 0s, visibility 0s .3s;
	z-index: 800;
}
.cd-top.cd-is-visible { visibility: visible; opacity: .8; }
.cd-top.cd-fade-out { opacity: .8; }
.cd-top:hover { background-color: #92BD2F; opacity: 1; }

@media only screen and (min-width: 768px) {
	.cd-top { right: 20px; bottom: 20px; }
}
@media only screen and (min-width: 1024px) {
	.cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; }
}

/* ---------- 15. Responsive Breakpoints ---------- */

@media (max-width: 1024px) {
	/* Header auf Mobile: normaler Flow (auch auf Startseite),
	   die Headline (grüner Block) liegt ÜBER dem Hero. */
	body.startseite header.kopf {
		position: static;
		background: transparent;
	}
	header.kopf .kopf-inner {
		padding: 0;
		flex-direction: column;
	}
	/* Custom-HTML-Modul (mod-custom-Wrapper) auf Mobile 100% breit,
	   grüner Block oben mit Headline + Burger */
	.kopf-inner > .mod-custom,
	.kopf-inner > .moduletable {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
	.kopf-inner > .mod-custom > .kopf-row,
	.kopf-inner > .moduletable > .kopf-row,
	.kopf-inner > .kopf-row {
		padding: 15px 25px;
		background: #92BD2F;
	}
	/* Headline auf Mobile etwas kleiner */
	.kopf-row .kopf-headline {
		font-size: 24px;
		color: #ffffff;
	}
	/* Auch auf Startseite: Mobile zeigt die Headline weiß auf grün */
	body.startseite .kopf-headline { color: #ffffff; }
	/* Hauptnavigation versteckt - durch Burger ersetzt */
	header.kopf nav.mod-menu,
	header.kopf .mod-menu,
	header.kopf ul.menu { display: none; }
	.mobile-burger { display: block; }
	body.startseite .hero-wrap { margin-top: 0; padding-top: 0; }
}

@media (max-width: 1024px) {
	.start-willkommen .col-headline,
	.start-willkommen .col-text { flex: 0 0 50%; max-width: 50%; }

	.start-angebot .blurb { flex: 0 0 50%; max-width: 50%; }

	.start-zitat .qx-col-wrap { padding: 0 5%; }

	/* Leistungen-Hero bleibt auch auf Tablet einspaltig (volle Breite),
	   wie auf Desktop. Vorher waren das zwei 50%-Spalten - korrigiert. */
	.leistungen-intro .col-headline,
	.leistungen-intro .col-text { flex: 0 0 100%; max-width: 100%; }

	.ueber-mich .col-text,
	.ueber-mich .col-werdegang { flex: 0 0 50%; max-width: 50%; }

	.kontakt-section .col-info,
	.kontakt-section .col-form { flex: 0 0 100%; max-width: 100%; }

	.hero-slider { min-height: 600px; }
	.hero-slider .slide-content { width: 80%; max-width: 600px; }
	.hero-slider .slide-content p { font-size: 32px; }
	.hero-slider .slide-content h2 { font-size: 26px; }
}

@media (max-width: 767px) {
	body { font-size: 17px; }
	h1 { font-size: 35px; line-height: 1.25; padding-bottom: 10px; }
	h2 { font-size: 30px; line-height: 1.3; padding-bottom: 15px; }
	h3 { font-size: 22px; }

	/* Wrapper auf max. Viewport-Breite begrenzen, damit kein horizontales
	   Überlaufen passiert. Automatische Worttrennung ist global aus. */
	.qx-container,
	.qx-container-fluid,
	.kontakt-blurb,
	.kontakt-blurb-text,
	.footer-col,
	.kopf-headline { max-width: 100%; }

	/* Lange URLs / E-Mail-Adressen müssen ausnahmsweise auch ohne
	   Silbentrennung brechen können (sonst Overflow). */
	a[href^="mailto:"],
	a[href^="tel:"],
	a[href^="http"] { overflow-wrap: anywhere; word-break: break-all; hyphens: none; }

	#mehr,
	.start-angebot,
	.start-zitat,
	.kontakt-section,
	.text-section,
	.ueber-mich,
	.ueber-banner,
	.leistungen-cta { padding: 30px 0; }

	.start-willkommen .col-headline,
	.start-willkommen .col-text { flex: 0 0 100%; max-width: 100%; }
	.start-willkommen .qx-divider-separator { width: 24%; }

	.start-headline-deko h2 { font-size: 50px; line-height: 1.2; }

	.start-angebot { background-attachment: scroll; padding: 30px 0; }
	.start-angebot .blurb { flex: 0 0 100%; max-width: 100%; }
	.start-angebot h2 { font-size: 26px; }
	.start-angebot .qx-divider-separator { width: 30%; }

	.leistungen-intro .col-headline,
	.leistungen-intro .col-text { flex: 0 0 100%; max-width: 100%; }
	.leistungen-list .accordion-col { flex: 0 0 100%; max-width: 100%; padding: 0; }

	.ueber-mich .col-text,
	.ueber-mich .col-werdegang { flex: 0 0 100%; max-width: 100%; }
	.ueber-mich .col-werdegang { margin-top: 15px; }

	.ueber-galerie .galerie-strip figure { flex: 0 0 calc(100% - 10px); }
	.ueber-galerie .galerie-strip figure img { height: 220px; }

	footer.footer .footer-col { flex: 0 0 100%; max-width: 100%; }

	.hero-slider { min-height: 400px; }
	.hero-slider .slide-content { width: 90%; padding: 20px 10px; }
	.hero-slider .slide-content h2 { font-size: 22px; }
	.hero-slider .slide-content p { font-size: 24px; line-height: 1.2; margin-bottom: 18px; }
	.hero-slider .slide-content .qx-btn { padding: 10px 20px; font-size: 16px; }

	.kontakt-form { padding: 18px; margin-left: 0; }
	.kontakt-blurb .icon { flex: 0 0 40px; width: 40px; height: 40px; font-size: 18px; }

	.kontakt-karte .map-wrap { padding-top: 75%; }
}

@media (max-width: 425px) {
	.kopf-row .kopf-headline-mobile { font-size: 26px; line-height: 1.25; }
	.kopf-inner > .kopf-row { padding: 12px 16px; }
	.start-headline-deko h2 { font-size: 42px; }
	.hero-slider .slide-content p { font-size: 22px; }
}

/* ---------- 16. Hilfsklassen / Sichtbarkeit ---------- */

.qx-d-none { display: none; }

@media (min-width: 1024px) {
	.qx-d-lg-block,
	.qx-d-lg-flex { display: block; }
	.qx-d-lg-none { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.qx-d-md-block,
	.qx-d-md-flex { display: block; }
	.qx-d-md-none { display: none; }
}
@media (max-width: 767px) {
	.qx-d-sm-block { display: block; }
	.qx-d-sm-none { display: none; }
}

/* sichtbar nur auf großen Geräten */
.show-lg-only { display: none; }
@media (min-width: 1025px) {
	.show-lg-only { display: block; }
}

/* sichtbar nur unter 1024 */
.show-md-down { display: block; }
@media (min-width: 1025px) {
	.show-md-down { display: none; }
}

/* Reveal-Animationen (subtil) */
/* ===========================================================================
   Reveal-Animationen
   ===========================================================================
   Stil: sanftes Einblenden mit leichtem Slide. Inhalt ist standardmäßig
   sichtbar - wenn JS greift, wird zuerst .qx-pre-reveal gesetzt (initial
   unsichtbar/verschoben), und beim Sichtbarwerden im Viewport durch
   IntersectionObserver entfernt - das ergibt das Reveal.

   Klassen:
     .fade-in        -> opacity 0 -> 1
     .slide-up       -> 20px nach oben + fade
     .slide-left     -> kommt von links (translateX -40)
     .slide-right    -> kommt von rechts (translateX +40)
     .scale-in       -> leichtes Reinzoomen
   Plus die bestehenden Quix-Klassen (qx-animation-*) - werden vom JS
   automatisch passend gemappt. */

.fade-in, .slide-up, .slide-left, .slide-right, .scale-in,
.qx-animation-fade, .qx-animation-slide-right, .qx-animation-slide-left,
.qx-animation-slide-right-medium, .qx-animation-slide-left-medium,
.qx-animation-scale-up {
	opacity: 1;
	transform: none;
	transition: opacity .7s ease-out, transform .7s ease-out;
}

/* Initial-State (nur wenn JS .qx-pre-reveal setzt) */
.qx-pre-reveal.fade-in,
.qx-pre-reveal.slide-up,
.qx-pre-reveal.slide-left,
.qx-pre-reveal.slide-right,
.qx-pre-reveal.scale-in,
.qx-pre-reveal.qx-animation-fade,
.qx-pre-reveal.qx-animation-slide-right,
.qx-pre-reveal.qx-animation-slide-left,
.qx-pre-reveal.qx-animation-slide-right-medium,
.qx-pre-reveal.qx-animation-slide-left-medium,
.qx-pre-reveal.qx-animation-scale-up {
	opacity: 0;
}
.qx-pre-reveal.slide-up,
.qx-pre-reveal.qx-animation-fade               { transform: translateY(24px); }
.qx-pre-reveal.slide-left,
.qx-pre-reveal.qx-animation-slide-left         { transform: translateX(-40px); }
.qx-pre-reveal.qx-animation-slide-left-medium  { transform: translateX(-80px); }
.qx-pre-reveal.slide-right,
.qx-pre-reveal.qx-animation-slide-right        { transform: translateX(40px); }
.qx-pre-reveal.qx-animation-slide-right-medium { transform: translateX(80px); }
.qx-pre-reveal.scale-in,
.qx-pre-reveal.qx-animation-scale-up           { transform: scale(.94); }

/* Reduzierte Bewegung respektieren: keine Animation, sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
	.qx-pre-reveal,
	.qx-pre-reveal.fade-in, .qx-pre-reveal.slide-up,
	.qx-pre-reveal.slide-left, .qx-pre-reveal.slide-right, .qx-pre-reveal.scale-in,
	.qx-pre-reveal[class*="qx-animation"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	.qx-animation-fade,
	.qx-animation-slide-right,
	.qx-animation-slide-left,
	.qx-animation-slide-right-medium,
	.qx-animation-slide-left-medium,
	.qx-animation-scale-up { opacity: 1; transform: none; }
}


/* =========================================================================
   17. Joomla-Editor-Hilfsklassen
   -----------------------------------------------------------------------
   Joomla / TinyMCE entfernt leere Tags beim Speichern. Die Beiträge und
   Module enthalten daher in optisch leeren Tags ein &nbsp; oder einen
   Platzhalter-<li>. Hier liegt das Style-Reset für diese Platzhalter.
   ========================================================================= */

/* Burger-Striche (drei Spans im Mobile-Menü-Knopf) */
.mobile-burger .burger-line {
	display: block;
	width: 28px;
	height: 3px;
	background: #ffffff;
	margin: 5px auto;
	border-radius: 2px;
	font-size: 0;
	line-height: 0;
	transition: all .25s ease;
}

/* Platzhalter-LI in Slider/Galerie-Dots werden per main.js entfernt.
   Falls kein JS lädt, sehen sie wenigstens nicht nach Listen-Bullet aus. */
.slide-dots-placeholder,
.galerie-dots-placeholder {
	display: none;
}

/* Hero-Slides UL */
.hero-slider .slides,
.hero-slider .hero-slides-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Quelle des Zitates (war früher inline-style auf der Startseite) */
.start-zitat .quelle p { padding: 0; margin: 0; text-align: center; }
.start-zitat .zitat-cta {
	text-align: center;
	margin-top: 30px;
}

/* Werdegang-Bild im Über-uns-Block */
.ueber-mich .werdegang-figure {
	text-align: center;
	margin: 20px 0 0;
}
.ueber-mich .werdegang-figure img {
	width: 53%;
	display: inline-block;
}

/* Kontakt-Blurb-Text-Container (Inhalt rechts neben dem Icon) */
.kontakt-blurb .kontakt-blurb-text { flex: 1; min-width: 0; }
.kontakt-blurb .kontakt-blurb-text h3 { margin-top: 0; }

/* Status-Box: solange leer (nur &nbsp;), unsichtbar lassen,
   Inhalt setzt main.js bei Bedarf. */
.kontakt-form .form-message:empty,
.kontakt-form .form-message:not(.is-success):not(.is-error) {
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: transparent;
	min-height: 0;
}
.kontakt-form .form-message.is-success,
.kontakt-form .form-message.is-error {
	padding: 12px 14px;
	margin-top: 12px;
}

/* Mobile-Menü mit Klassen statt nur über Verschachtelung */
.mobile-menu-overlay .mobile-menu-nav { flex: 1; }
.mobile-menu-overlay .mobile-menu-list { list-style: none; margin: 0; padding: 0; }


/* =========================================================================
   18. Joomla-Beitrags-Header ausblenden
   -----------------------------------------------------------------------
   Joomla rendert automatisch den Beitragstitel als <div class="page-header">
   oberhalb des Beitragsinhalts. Da meine Beiträge die jeweilige Headline
   bereits intern enthalten (z. B. "Willkommen", "Über mich", "Impressum"),
   würde sonst jeder Titel doppelt erscheinen.
   Alternativ kann der Titel pro Beitrag deaktiviert werden:
     Beitrag → Optionen → "Titel anzeigen" → Nein.
   ========================================================================= */

.com-content-article .page-header,
.item-page > .page-header,
.item-page > h2.page-title,
.item-page > h1.page-title,
.contentheading,
.com-content-category-blog__item .page-header {
	display: none;
}