/* ==========================================================================
   custom.css
   Überschreibt die Templatefarben von assets/css/style-color-4.css (#89b222)
   mit der Wilken-Farbpalette aus der Websiteinfos.docx.
   ========================================================================== */

:root {
	--primary: #8DB582;
	--primary-alt: #8DB582;
}

/* Textfarbe / Akzentfarbe (theme-color) */
.theme-color,
.text-primary,
.text-primary-alt {
	color: #8DB582 !important;
}

/* Trennlinien-Deko unter Überschriften */
.h-decor,
.bg-primary,
.bg-primary-alt {
	background-color: #8DB582 !important;
}

.border-primary,
.border-primary-alt {
	border-color: #8DB582 !important;
}

/* Allgemeine Link-Hoverfarbe */
a:hover {
	color: #7e9964;
}

/* Buttons */
.btn,
body:not(.touch) .btn:focus {
	color: #8DB582;
	border-color: #8DB582;
}

.btn-primary,
.btn-primary-alt,
.layout-weightloss .btn-hover-fill,
.layout-weightloss:not(.touch) .btn-hover-fill:focus,
.layout-weightloss .btn-fill,
.layout-weightloss:not(.touch) .btn-fill:focus {
	background-color: #8DB582 !important;
	border-color: #8DB582 !important;
}

.layout-weightloss:not(.touch) .btn-fill:hover,
.layout-weightloss:not(.touch) .btn-fill:focus:hover,
.layout-weightloss:not(.touch) .btn-hover-fill:hover,
.layout-weightloss:not(.touch) .btn-hover-fill:focus:hover,
body:not(.touch) .btn-hover-fill:hover {
	background-color: #7e9964 !important;
	border-color: #7e9964 !important;
	color: #fff;
}

.btn-outline-primary,
.btn-outline-primary-alt {
	color: #8DB582;
	border-color: #8DB582;
}
.btn-outline-primary:hover,
.btn-outline-primary-alt:hover {
	background-color: #8DB582;
	border-color: #8DB582;
	color: #fff;
}

/* Kopfleiste & Footer-Balken */
.header-topline {
	background: #8DB582;
}
.header-topline a:hover {
	color: #fff;
}

.footer-bottom {
	background: #8DB582;
}
.footer-bottom a:hover {
	color: #fff;
}

/* Navigation */
.header-nav .nav-item > .nav-link:hover,
.header-nav .nav-item.active > .nav-link {
	color: #8DB582;
}

/* FAQ-Accordion */
.faq-item [data-toggle='collapse'] span:first-child,
.faq-item [data-toggle='collapse']:after {
	color: #8DB582;
}

/* Werdegang-Collapse (Über mich) */
.collapse-wrap [class*='icon-'],
.collapse-wrap:hover .collapse-title {
	color: #8DB582;
}

.doctor-info-phone [class*='icon-'],
.doctor-info-phone a:hover,
.price-table th,
.doctor-page-table th {
	color: #8DB582;
}

/* Rufnummer im Call-Banner */
.banner-call-phone [class*='icon'] {
	color: #8DB582;
}
.banner-call-phone:hover {
	color: #7e9964;
}

/* Icon-Listen (Kontakt, Footer, FAQ-Kontaktbox) */
ul.icn-list li > [class*='icon'],
ul.icn-list li b,
ul.icn-list-lg li > [class*='icon'],
ul.icn-list-sm li > [class*='icon'],
.footer ul.icn-list li > [class*='icon'],
.footer ul.icn-list .phone {
	color: #8DB582;
}

/* Download-Icons: grüner Kreis, Icon bleibt weiß (sonst unsichtbar) */
.download-block-icon [class*='icon'] {
	background-color: #8DB582;
	color: #fff;
}

/* Nummerierte Listen: weiße Zahl auf grünem Kreis */
ul.numbered-list-lg li:before,
ul.numbered-list li:before {
	color: #fff;
	background-color: #8DB582;
}

/* Listenmarker */
ul.marker-list li:before,
ul.marker-list li span,
ul.marker-list li b {
	color: #8DB582;
}

/* Aufzählungspunkte: kleiner & dezenter statt des großen Templatepunkts */
ul.marker-list-md li:before {
	font-size: 8px;
	left: 6px;
	top: 0px;
	color: #8DB582;
}

/* Sprechzeiten-Liste: Wochentag und Uhrzeit jeweils linksbündig */
.hours-list {
	display: inline-block;
	text-align: left;
}
.hours-row {
	display: flex;
}
.hours-day {
	min-width: 100px;
	flex-shrink: 0;
	text-align: left;
}
.hours-time {
	text-align: left;
}

/* Kontaktseite: Kartenbereich mit Platzhalterfarbe, bis die Karte geladen ist */
.contact-map {
	background-color: #e5e5e5;
}

/* Kontakt-/Info-Boxen (Leistungen-Sidebar, Termin-Seite, Kontaktseite) */
.contact-box {
	background-color: #8DB582;
}
.contact-box-2 {
	background-color: #7e9964;
}
.contact-box-3 {
	background-color: #a9c9a0;
}

/* Formular-Rückmeldungen */
.successform,
.successform p {
	color: #7e9964;
}
.errorform,
.errorform p,
form label.error,
.input-group label.error {
	color: #9c0f06;
}

/* Sticky Sidebar-Navigation (Leistungen) */
@media (min-width: 768px) {
	.sidebar-sticky {
		position: sticky;
		top: 110px;
	}
}

/* QuickLinks-Panel (Startseite): Kacheln nah an der Logofarbe, leichte Helligkeitsabstufungen */
.quickLinks .col:nth-child(1) > .link {
	background-color: #7fa874;
}
.quickLinks .col:nth-child(2) > .link {
	background-color: #8DB582;
}
.quickLinks .col:nth-child(3) > .link {
	background-color: #9ac292;
}
.quickLinks .col:nth-child(4) > .link {
	background-color: #a7cea1;
}
body:not(.touch) .quickLinks .col > .link:hover,
.quickLinks .col > .link.active {
	color: #8DB582;
}
.quickLinks .col-close,
.quickLinks .link-drop-title > [class*='icon-'] {
	color: #8DB582;
}

/* Zurück-nach-oben-Button */
.backToTop {
	background: #8DB582;
}
.backToTop:hover {
	box-shadow: 0 0 0 10px rgba(141, 181, 130, 0.2);
}

/* Weiße Buttons auf farbigen Flächen (Kontakt-/Info-Boxen, Bild-Banner) */
.layout-weightloss .btn-white,
.layout-weightloss .btn-white:focus,
.layout-weightloss:not(.touch) .btn-white:focus,
.btn-white,
.btn-white:focus {
	color: #8DB582;
}
.layout-weightloss:not(.touch) .btn-white:hover,
.layout-weightloss .btn-white:hover,
.btn-white:hover,
.btn-white:focus:hover,
.btn-white:active {
	background-color: #8DB582;
	color: #fff;
}
.layout-weightloss:not(.touch) .btn-white--all:hover,
.layout-weightloss .btn-white--all:hover {
	color: #8DB582;
}

/* Logo größer darstellen (300px Breite, proportionale Höhe) */
.header-logo,
.header-logo img,
.header-content.stuck .header-logo,
.header-content.stuck .header-logo img {
	max-width: 300px !important;
	max-height: 50px !important;
}
.footer-logo,
.footer-logo img {
	max-width: 300px !important;
}

/* Mobile Navigation: horizontaler Overflow durch vw-Berechnung des Templates beheben */
@media (max-width: 1023px) {
	.navbar-collapse .navbar-nav {
		width: 100% !important;
	}
}

/* Termin-Button: rechts neben dem Menü (Desktop), volle Breite unten im Menü (Mobil) */
.header-btn-wrap {
	margin-left: auto;
}
@media (max-width: 1023px) {
	.header-btn-wrap {
		width: 100%;
		margin-left: 0;
		padding: 15px 0 5px;
	}
	.header-btn-wrap .btn {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Logo auf Mobilgeräten nicht wieder verkleinern */
@media (max-width: 767px) {
	.header-logo {
		width: auto !important;
	}
}

/* Footer-Bottom: Impressum/Datenschutz auf Mobilgeräten in eigener Zeile */
.footer-legal-links {
	margin-left: 15px;
}
@media (max-width: 767px) {
	.footer-legal-links {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0;
		margin-top: 6px;
	}
	.footer-phone-line {
		flex: 0 0 100%;
		max-width: 100%;
		margin-top: 20px;
	}
}

/* Mobiles Hamburger-Icon: schwarz statt blau */
.navbar-toggler,
.navbar-toggler .icon-menu {
	color: #222 !important;
}

/* Leistungen-Seite: CTA-Buttons am Ende auf Mobilgeräten linksbündig mit mehr Abstand */
@media (max-width: 767px) {
	.flex-column.flex-sm-row .btn {
		margin: 0 auto 0 0 !important;
	}
	.flex-column.flex-sm-row .btn + .btn {
		margin: 20px auto 0 0 !important;
	}
}

/* Mobile Navigation: größeres Hamburger-Icon mit mehr Abstand zum Rand */
@media (max-width: 767px) {
	.navbar-toggler,
	.navbar-toggler:not(.collapsed) {
		font-size: 28px;
		right: 15px;
	}
	.header-content {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.header-btn-wrap .btn {
		font-size: 14px;
	}
}

/* Gestapelte Spalten auf Mobilgeräten durch Trennlinie besser lesbar machen */
@media (max-width: 767px) {
	.row-divided-mobile > [class*="col-"] {
		padding-top: 20px;
		padding-bottom: 20px;
		border-top: 1px solid #e5e5e5;
	}
	.row-divided-mobile > [class*="col-"]:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

/* Zweizeiliger Download-Button (Downloadbereich) */
.btn-multiline {
	display: inline-flex;
	align-items: center;
	white-space: normal;
	text-align: left;
	max-width: 100%;
	overflow: visible;
}
.btn-multiline-text {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}
.btn-multiline-title {
	font-weight: 600;
}
.btn-multiline-sub {
	font-size: 11px;
	font-weight: 400;
	opacity: 0.85;
}

/* Platzhalter-Hinweise (noch fehlende Dateien/Angaben/Texte) */
em {
	color: #e08800;
	font-style: normal;
	font-weight: 600;
}

/* Bild im Banner "Fragen zu Ihrer Untersuchung?": läuft nach links transparent/weiß aus */
.img-fade-left {
	-webkit-mask-image: linear-gradient(to left, #000 65%, transparent 100%);
	mask-image: linear-gradient(to left, #000 65%, transparent 100%);
}

/* Startseiten-Slider: dunkler Verlauf über den Hintergrundbildern, damit der weiße Text auf hellen Bildbereichen lesbar bleibt */
#mainSlider .img--holder {
	position: relative;
}
#mainSlider .img--holder::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

/* Banner mit Hintergrundbild (z. B. "Lernen Sie uns persönlich kennen"): gleicher dunkler Verlauf für lesbaren weißen Text */
.banner-center {
	position: relative;
}
.banner-center::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.35);
	pointer-events: none;
	z-index: 1;
}
.banner-center-caption {
	position: relative;
	z-index: 2;
}

/* Werdegang auf "Über mich": Jahr + Text als Liste */
.cv-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cv-list li {
	display: flex;
	flex-wrap: wrap;
	padding: 10px 0;
	border-bottom: 1px solid #e5e5e5;
}
.cv-list li:first-child {
	padding-top: 0;
}
.cv-list li:last-child {
	border-bottom: 0;
}
.cv-year {
	flex: 0 0 130px;
	font-weight: 600;
	color: var(--primary);
}
.cv-text {
	flex: 1 1 300px;
}

/* Urlaubshinweis-Modal (öffnet sich automatisch nach WEB_VACATION_MODAL_DELAY Sekunden) */
.vacation-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.6);
	z-index: 100000;
}
.vacation-modal-overlay.is-open {
	display: flex;
}
.vacation-modal {
	width: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.vacation-modal-header {
	position: relative;
	padding: 25px 60px 25px 30px;
	background: var(--primary);
	color: #fff;
}
.vacation-modal-title {
	font-family: "Poppins", serif;
	font-size: 22px;
	font-weight: 600;
}
.vacation-modal-subtitle {
	margin-top: 5px;
	font-size: 14px;
	opacity: 0.9;
}
.vacation-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.vacation-modal-close:hover {
	background: rgba(255, 255, 255, 0.4);
}
.vacation-modal-body {
	padding: 25px 30px 30px;
}
.vacation-item {
	background: #f2f7ea;
	border-left: 4px solid var(--primary);
	border-radius: 6px;
	padding: 14px 18px;
	margin-bottom: 12px;
	font-weight: 500;
	color: #333;
}
.vacation-modal-note {
	margin-top: 18px;
	background: #fdf3d9;
	border-radius: 6px;
	padding: 14px 18px;
	color: #8a6d1d;
	font-size: 14px;
}

/* Honeypot-Feld im Kontaktformular: für Menschen unsichtbar, für Spam-Bots auffindbar */
.form-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}