/*
Theme Name: Divi IHHT Esslingen
Theme URI: https://ihht-esslingen.de
Template: Divi
Author: Praxis Dr. med. Jasmin Greilich
Description: Divi-Child-Theme für die IHHT-Praxisseite Esslingen. Nachbau der Seite von 2025.
Version: 1.0.0
*/

/* ============================================================
   Grundlayout: olivfarbener Seitenhintergrund, Inhalt auf
   1290px zentriert (wie Original ihht-esslingen.de 2025)
   ============================================================ */

#page-container,
#main-content,
#et-main-area {
	background: transparent;
}

#page-container .et_pb_section {
	max-width: 1290px;
	margin-left: auto !important;
	margin-right: auto !important;
	background-color: #ffffff;
}

/* Überschriften der Inhaltssektionen (Original: .et_pb_text_3/4/5 h2) */
.ihht-section-heading h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 2.5rem;
	color: #212d3b !important;
	line-height: 1.5em;
}

@media (max-width: 980px) {
	.ihht-section-heading h2 {
		font-size: 1.875rem;
	}
}

.ihht-section-heading hr {
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

/* FAQ-Überschrift (Original: .et_pb_text_10 h2) */
.ihht-faq-heading h2 {
	font-weight: 700;
	color: #666666 !important;
}

/* Textmodul-Links */
.et_pb_text_inner a:hover {
	text-decoration: underline !important;
}

.et_mobile_menu {
	border-top: none;
}

/* Zeilenbreite wie Original (Divi Theme Options Custom CSS) */
#page-container .et_pb_row {
	width: 90% !important;
}

/* ============================================================
   Header-Menü: Logo erst im Sticky-Zustand einblenden (Original).
   Nicht gescrollt: Menüpunkte mittig unter dem Logo.
   Sticky: Logo links, Menüpunkte rechts, kompakte Leiste.
   ============================================================ */

/* Menü-Logo nur im Sticky-Zustand zeigen – auf allen Breakpoints.
   Ganz oben steht bereits das große Logo aus der Logo-Sektion. */
.ihht-scroll-menu .et_pb_menu__logo-wrap {
	display: none !important;
}

.et_pb_sticky .ihht-scroll-menu .et_pb_menu__logo-wrap {
	display: flex !important;
}

/* Mobil/Tablet: Burger ganz rechts – oben wie im Sticky-Zustand */
@media (max-width: 980px) {
	.ihht-scroll-menu .et_pb_menu_inner_container {
		justify-content: flex-end !important;
	}
	.et_pb_sticky .ihht-scroll-menu .et_pb_menu_inner_container {
		justify-content: space-between !important;
	}
}

@media (min-width: 981px) {
	/* D5 verschachtelt: inner_container (volle Breite) > wrap (Inhaltbreite).
	   Zentrierung muss am inner_container ansetzen. */
	.ihht-scroll-menu .et_pb_menu_inner_container {
		justify-content: center !important;
	}
	.ihht-scroll-menu .et_pb_menu__wrap {
		justify-content: center !important;
	}
	.et_pb_sticky .ihht-scroll-menu .et_pb_menu_inner_container {
		justify-content: space-between !important;
	}
	.et_pb_sticky .ihht-scroll-menu .et_pb_menu__wrap {
		justify-content: flex-end !important;
	}
	/* Sticky-Leiste: Logo größer darstellen (füllt die kompakte Leiste) */
	.et_pb_sticky .ihht-scroll-menu .et_pb_menu__logo-wrap img,
	.et_pb_sticky .ihht-scroll-menu .et_pb_menu__logo img {
		max-height: 64px !important;
	}
}

/* Header kompakt: Divi-Standard-Padding der Header-Zeilen entfernen
   (27px oben+unten pro Zeile machten Logo→Menü→Inhalt unnötig hoch) */
.et-l--header .et_pb_row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Menülinks kompakter (Divi-Standard: 31px oben+unten) */
.ihht-scroll-menu.et_pb_menu ul.nav li a {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}

.ihht-scroll-menu.et_pb_menu ul li a:hover,
.ihht-scroll-menu.et_pb_menu ul li.current-menu-item a {
	color: #8f4e25 !important;
	opacity: 1;
}

/* Menüpunkte größer (1.125rem = 18px bei Browser-Standardschrift;
   rem respektiert die Schriftgrößen-Einstellung des Nutzers) */
.ihht-scroll-menu.et_pb_menu ul.nav li a {
	font-size: 1.125rem;
}

/* Burger-Icon: Markenfarbe und deutlich größer
   (!important nötig: Divis generierte Modul-Styles laden nach dem Child-CSS) */
.ihht-scroll-menu.et_pb_menu .mobile_nav .mobile_menu_bar:before {
	color: #8f4e25 !important;
	font-size: 2.75rem !important;
}

/* Mobiles Ausklapp-Menü: größere, rostbraune Menüpunkte */
.ihht-scroll-menu.et_pb_menu .et_mobile_menu li a {
	font-size: 1.125rem !important;
	color: #8f4e25 !important;
}

/* ============================================================
   Hero-Bereich (Original-Code-Module 1:1)
   ============================================================ */

@media (min-width: 981px) {
	.ihht-hero-desktop-row {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: min(90%, 920px) !important;
		max-width: 920px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.ihht-hero-desktop-row > .et_pb_column {
		margin-right: 0 !important;
	}
	.ihht-hero-desktop-row > .et_pb_column:first-child {
		width: auto !important;
		flex: 0 0 auto !important;
		z-index: 1;
	}
	.ihht-hero-desktop-row > .et_pb_column:last-child {
		width: 420px !important;
		flex: 0 0 420px !important;
		margin-left: -30px !important;
		z-index: 2;
	}
	.ihht-hero-portrait {
		margin: 0 !important;
		text-align: right !important;
	}
	.ihht-hero-portrait img {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 500px !important;
		object-fit: contain !important;
	}
	.ihht-hero-card {
		position: relative !important;
		z-index: 3 !important;
		margin: 0 !important;
	}
}

@media (max-width: 980px) {
	.ihht-hero-mobile-image {
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}
	.ihht-hero-mobile-image img {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 500px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		object-fit: contain !important;
	}
}

/* ============================================================
   Startseite: kompaktere vertikale Abstände (nur Desktop).
   Divi-Standard: Sektionen 4% (~54px), Zeilen 27px oben+unten.
   ============================================================ */

@media (min-width: 981px) {
	body.home #main-content .et_pb_section {
		padding-top: 24px;
		padding-bottom: 24px;
	}
	body.home #main-content .et_pb_row {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* Mobil/Tablet: Divi-Standard ist Sektion 50px, Zeile 30px,
   Spalten-Abstand 30px – deutlich kompakter */
@media (max-width: 980px) {
	body.home #main-content .et_pb_section {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	body.home #main-content .et_pb_row {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	body.home #main-content .et_pb_column {
		margin-bottom: 14px;
	}
	body.home #main-content .et_pb_column:last-child {
		margin-bottom: 0;
	}
	/* Fließtexte der Sektion "Was ist IHHT?" im Blocksatz */
	#was-ist-ihht .et_pb_text_inner,
	#was-ist-ihht .et_pb_text_inner p {
		text-align: justify;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

/* ============================================================
   Sektion "Was ist IHHT?": Inhalte auf 66% Breite begrenzen und
   als Block zentrieren (nur Desktop – mobil volle Breite)
   ============================================================ */

@media (min-width: 981px) {
	#was-ist-ihht .et_pb_text,
	#was-ist-ihht .et_pb_image {
		width: 66%;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ============================================================
   Footer (Farben wie Original)
   ============================================================ */

.ihht-footer-text,
.ihht-footer-text p {
	color: #8f4e25 !important;
}

.ihht-footer-text h2 {
	font-size: 1.75rem;
	color: #8f4e25 !important;
}

.ihht-footer-bottom,
.ihht-footer-bottom p,
.ihht-footer-bottom a {
	color: #d6d0c1 !important;
}

/* ============================================================
   Sticky-Kontakt-Buttons am rechten Rand (Original 1:1)
   ============================================================ */

.sticky-sidebar-buttons {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

.sticky-btn {
	background: #eee6d8;
	color: #8f4e25;
	border-radius: 30px 0 0 30px;
	box-shadow: 0 2px 8px rgba(50, 50, 93, 0.08);
	cursor: pointer;
	width: 68px;
	min-width: 68px;
	height: 48px;
	padding: 0 10px 0 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	transition: width 250ms ease, box-shadow 250ms ease, background 250ms ease;
	overflow: hidden;
	font-size: 1rem;
	position: relative;
	flex-direction: row;
	margin-left: auto;
}

.sticky-btn .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	transition: filter 250ms ease;
	margin-right: 10px;
	color: #8f4e25;
}

.sticky-btn .hidden-content {
	opacity: 0;
	max-width: 0;
	white-space: nowrap;
	overflow: hidden;
	margin-right: 0;
	transition: max-width 250ms ease, opacity 250ms ease, margin-right 250ms ease;
	font-weight: 500;
	color: #8f4e25;
	pointer-events: none;
}

/* Links in den Kontakt-Buttons: Markenfarbe, Unterstreichung nur bei Hover */
.sticky-btn .hidden-content a {
	color: #8f4e25 !important;
	text-decoration: none;
}

.sticky-btn .hidden-content a:hover {
	text-decoration: underline;
}

.sticky-btn:hover,
.sticky-btn:focus-within,
.sticky-btn.active {
	width: 300px;
	background: #f5f5f5;
	box-shadow: 0 4px 16px rgba(50, 50, 93, 0.15);
}

.sticky-btn:hover .icon,
.sticky-btn:focus-within .icon,
.sticky-btn.active .icon {
	filter: drop-shadow(0 2px 4px rgba(87, 67, 235, 0.09));
}

.sticky-btn:hover .hidden-content,
.sticky-btn:focus-within .hidden-content,
.sticky-btn.active .hidden-content {
	opacity: 1;
	max-width: 250px;
	margin-right: 12px;
	pointer-events: auto;
}

@media (max-width: 767px) {
	.sticky-sidebar-buttons {
		display: none;
	}
}