/*
 Theme Name:     Divi Child Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Child Theme for Divi Theme by Elegant Themes
 Author:         Hansjörg Fichtner  
 Author URI:     https://www.bigmammut.de/
 Template:       Divi
 Version:        1.0.0
*/
 
/* CSS Anpassungen für IT-Firma Säckler
------------------------------------------------------- */
/* ===================================================
   Farb-Variablen für den Header-Titel
   Hier kannst du die Farben einfach anpassen:
   =================================================== */
:root {
	--saeckler-prefix-color: #555555;   /* Farbe für "IT-Firma" */
	--saeckler-name-color:   #0073aa;   /* Farbe für "Säckler"  */
}
/* ===================================================
   Divi's Header-Container auf Flexbox umstellen,
   damit Logo und Titel nebeneinander und vertikal
   zentriert sitzen.
   =================================================== */
   
#main-header {
	border-top: 5px solid #216AB4;
}
#main-header .et_menu_container {
	display: flex !important;
	flex-direction: row;
	align-items: center;
}
/* Logo-Container: kein float mehr, damit Flexbox greift */
#main-header .logo_container {
	float: none !important;
	flex-shrink: 0;
}
/* Navigation darf nicht wachsen/schrumpfen und kommt ganz rechts */
#main-header #et-top-navigation {
	float: none !important;
	flex-shrink: 0;
	margin-left: auto;
}

.page-container {
	background: rgb(245, 245, 245) !important;
}
/* ===================================================
   Header-Titel Container – sitzt zwischen Logo und Nav
   =================================================== */
.saeckler-header-title {
	display: flex;
	align-items: center;
	align-self: center;
	flex-shrink: 0;
	margin-left: 85px;
	margin-top: 12px;
	transition: all 0.4s ease;
	position: relative;
	z-index: 10;
}
/* ===================================================
   H1 – Grundstil: groß und fett (Normal-Zustand)
   =================================================== */
#saeckler-site-title {
	margin: 0;
	padding: 0;
	font-size: 2.0em;
	line-height: 1.1;
	font-weight: 900;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: font-size 0.4s ease, margin 0.4s ease;
}
/* Farbe für "IT-Firma" */
#saeckler-site-title .saeckler-title-prefix {
	color: #000;
	font-weight: 700;
}
/* Farbe für "Säckler" */
#saeckler-site-title .saeckler-title-name {
	color: #216AB4;
	font-weight: 900;
}
/* ===================================================
   Scrolled-State: Divi setzt die Klasse "et-fixed-header"
   direkt auf #main-header – exakt gleichzeitig mit dem
   Logo-Shrinking. Kein eigenes JavaScript nötig.
   =================================================== */
#main-header.et-fixed-header .saeckler-header-title {
	margin-left: 50px;
	margin-top: 10px;
}
#main-header.et-fixed-header #saeckler-site-title {
	font-size: 1.2em;
}
#main-header.et-fixed-header {
	box-shadow: 0 0 7px rgba(0,0,0,0.4) !important;
}
/* ===================================================
   Header-Hintergrund: sanfter Verlauf von weiß (oben)
   nach leichtem Grau (unten)
   =================================================== */
#main-header {
	background: linear-gradient(to bottom, #ffffff 30%, #f5f5f5 100%) !important;
}
/* ===================================================
   Globale Schriftart: Arial
   =================================================== */
body,
body * {
	font-family: Arial, Helvetica, sans-serif;
}
/* ===================================================
   Navigation: nicht fett, schwarz, kein Farbwechsel,
   blauer Unterstrich bei Hover und aktiver Seite
   =================================================== */
#top-menu-nav #top-menu > li > a,
#top-menu-nav #top-menu > li > a:visited,
#top-menu-nav #top-menu > li > a:hover {
	color: #000000 !important;
	font-weight: normal !important;
	font-size: 17px !important;
	opacity: 1 !important;
	text-decoration: none !important;
	text-decoration-color: #216AB4 !important;
}

/* Hover: Unterstrich, keine Farbänderung, kein Opacity-Effekt */
#top-menu-nav #top-menu > li > a:hover {
	text-decoration: underline !important;
	text-decoration-color: #216AB4 !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 6px !important;
}

/* Aktive Seite */
#top-menu-nav #top-menu > li.current-menu-item > a,
#top-menu-nav #top-menu > li.current_page_item > a,
#top-menu-nav #top-menu > li.current-menu-ancestor > a {
	text-decoration: underline !important;
	text-decoration-color: #216AB4 !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 6px !important;
	opacity: 1 !important;
}

/* ===================================================
   Contant Anpassungen
   =================================================== */
.bm_space-card {
	padding: 10px;
}
.et_pb_gutters3 .footer-widget {
	margin-bottom: 40px;
}

.et_pb_text details > summary {
	list-style: revert;
	display: list-item;
	margin-left: 30px;
	cursor: pointer;
	font-weight: bold;
	color: #216AB4;
}

/* ===== Hover-Effekt für Service-Cards (E-Rechnung, E-Mail, Ausfall) ===== */

.et_pb_row.gleiche-hoehe .et_pb_text.et_pb_module,
.et_grid_module>.et_pb_post {
  border-radius: 6px;
  transition:
	transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
	box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
	border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.et_pb_row.gleiche-hoehe .et_pb_text.et_pb_module:hover,
.et_grid_module>.et_pb_post:hover {
  transform: translateY(-3px);
  box-shadow:
	0 2px 8px rgba(33, 106, 180, 0.12),
	0 10px 20px rgba(33, 106, 180, 0.22);
}

.et_grid_module>.et_pb_post {
	border-radius: 6px;
	box-shadow: 0px 2px 9px 0px rgba(0,0,0,0.2);
}

.et_grid_module>.et_pb_post .et_pb_image_container img {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

/* Karte als relativen Anker-Container */
.et_pb_post {
  position: relative;
}

/* Der Bild-Link wird zur unsichtbaren Klickfläche für die gesamte Karte */
.et_pb_post .entry-featured-image-url {
  position: static;
}

.et_pb_post .entry-featured-image-url::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

/* Damit Hover-Effekte weiterhin sichtbar bleiben */
.et_pb_post:hover .entry-featured-image-url::after {
  background: rgba(0, 0, 0, 0.02);
}

#block-36,
#block-37,
#block-42 {
	float: unset;
	margin-bottom: 10px;
}

.footer-widget h4, #main-footer .widget_block h1, #main-footer .widget_block h2, #main-footer .widget_block h3, #main-footer .widget_block h4, #main-footer .widget_block h5, #main-footer .widget_block h6 {
	color: #FFFFFF !important;
}
.footer-widget li:before {
	border-color: #FFFFFF !important;
}
#footer-widgets {
	padding-top: 40px;
}

/* Hover-Effekt */
.bm_partner-portal img {
  transform: translateY(0);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.bm_partner-portal img:hover {
  transform: scale(1.10);
}


/* ===================================================
   Button Stil
   =================================================== */
.bm-button {
	display: block;
	width: 100%;
	background-color: transparent;
	color: #216AB4 !important;
	padding: 10px 20px;
	margin-bottom: 10px;
	border-radius: 10px;
	border: 2px solid #216AB4;
	text-decoration: none !important;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.bm-button:hover {
	background-color: #216AB4;
	color: #ffffff !important;
}
.bm-button-dark {
	display: block;
	width: 40%;
	background-color: #216AB4 !important;;
	color: #FFFFFF !important;
	padding: 10px 20px;
	margin-bottom: 10px;
	border-radius: 10px;
	border: 2px solid #216AB4;
	text-decoration: none !important;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	transition: background-color 0.3s ease, color 0.3s ease;
	margin: 0px auto !important;
}
.bm-button-dark:hover {
	background-color: #FFFFFF !important;
	color: #216AB4 !important;
}

.bm_partner-button-dark {
	display: block;
	width: 40%;
	background-color: #216AB4 !important;;
	color: #FFFFFF !important;
	padding: 8px 16px;
	margin-bottom: 10px;
	border-radius: 10px;
	border: 2px solid #216AB4;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	transition: background-color 0.3s ease, color 0.3s ease;
	margin: 0px auto !important;
}
.bm_partner-button-dark:hover {
	background-color: #FFFFFF !important;
	color: #216AB4 !important;
}

/* Partner-Karten Hover-Effekt: blauer Strich von links */
.gleiche-hoehe-partner .et_pb_text_0, .gleiche-hoehe-partner .et_pb_text_1, .gleiche-hoehe-partner .et_pb_text_2,
.gleiche-hoehe-partner .et_pb_text_3, .gleiche-hoehe-partner .et_pb_text_4, .gleiche-hoehe-partner .et_pb_text_5, .gleiche-hoehe-partner .et_pb_text_6 {
	position: relative;
}

.gleiche-hoehe-partner .et_pb_text_0::before, .gleiche-hoehe-partner .et_pb_text_1::before, .gleiche-hoehe-partner .et_pb_text_2::before,
.gleiche-hoehe-partner .et_pb_text_3::before, .gleiche-hoehe-partner .et_pb_text_4::before, .gleiche-hoehe-partner .et_pb_text_5::before,
.gleiche-hoehe-partner .et_pb_text_6::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 4px;
	width: 0%;
	background-color: #216AB4;
	transition: width 0.4s ease;
	z-index: 10;
}

.gleiche-hoehe-partner .et_pb_text_0:hover::before, .gleiche-hoehe-partner .et_pb_text_1:hover::before, .gleiche-hoehe-partner .et_pb_text_2:hover::before,
.gleiche-hoehe-partner .et_pb_text_3:hover::before, .gleiche-hoehe-partner .et_pb_text_4:hover::before, .gleiche-hoehe-partner .et_pb_text_5:hover::before,
.gleiche-hoehe-partner .et_pb_text_6:hover::before {
	width: 100%;
}

/* ===================================================
   Gleiche Spaltenhöhe für Zeilen mit Klasse
   "gleiche-hoehe" – CSS-Klasse in Divi Zeile setzen:
   Zeile → Erweitert → CSS-Klasse → gleiche-hoehe
   =================================================== */
.gleiche-hoehe {
	align-items: stretch !important;
}
.gleiche-hoehe .et_pb_column {
	display: flex !important;
	flex-direction: column !important;
}
.gleiche-hoehe .et_pb_column > .et_pb_module {
	flex: 1 !important;
}

.gleiche-hoehe-partner {
	align-items: stretch !important;
}
.gleiche-hoehe-partner .et_pb_column {
	display: flex !important;
	flex-direction: column !important;
}
.gleiche-hoehe-partner .et_pb_column > .et_pb_module {
	flex: 1 !important;
}

.gleiche-hoehe-partner p {
	line-height: 1.3em;
}


/* ===================================================
   TABLET (≤980px)
   =================================================== */
@media only screen and (max-width: 980px) {

	/* Header fixiert */
	#main-header {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 99999 !important;
	}

	/* Gesamter Inhalt 90% Breite */
	.container,
	#main-header .container,
	#main-footer .container,
	#et-main-area .container,
	.et_pb_section > .et_pb_row {
		max-width: 90% !important;
		width: 90% !important;
	}

	/* Logo etwas größer */
	#logo {
		max-height: 70px !important;
		width: auto !important;
	}

	/* Kein Verkleinern beim Scrollen */
	#saeckler-site-title,
	#main-header.et-fixed-header #saeckler-site-title {
		font-size: 2.0em !important;
		transition: none !important;
	}
	.saeckler-header-title,
	#main-header.et-fixed-header .saeckler-header-title {
		margin-left: 70px !important;
		margin-top: 12px !important;
		transition: none !important;
	}

	/* Menüpunkte: Padding entfernen, Optik wie Desktop */
	#main-header .et_mobile_menu {
		padding: 0 !important;
	}
	#main-header .et_mobile_menu li a {
		padding: 8px 10px !important;
		color: #000000 !important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 17px !important;
		font-weight: normal !important;
		text-decoration: none !important;
		text-decoration-color: #216AB4 !important;
		border: none !important;
	}
	#main-header .et_mobile_menu li a:hover {
		text-decoration: underline !important;
		text-decoration-color: #216AB4 !important;
		text-decoration-thickness: 3px !important;
		text-underline-offset: 6px !important;
		color: #000000 !important;
	}
	#main-header .et_mobile_menu li.current-menu-item > a,
	#main-header .et_mobile_menu li.current_page_item > a {
		text-decoration: underline !important;
		text-decoration-color: #216AB4 !important;
		text-decoration-thickness: 3px !important;
		text-underline-offset: 6px !important;
	}
}

/* ===================================================
   SMARTPHONE (≤767px)
   =================================================== */
@media only screen and (max-width: 767px) {

	/* Header kleiner */
	#main-header {
		max-height: 65px !important;
	}

	/* Logo kleiner und höher */
	#logo {
		max-height: 45px !important;
		width: auto !important;
	}
	#main-header .logo_container {
		margin-top: -13px !important;
	}

	/* Burger-Menü 5px hoch */
	#main-header .mobile_menu_bar {
		margin-top: -9px !important;
	}
	#saeckler-site-title,
	#main-header.et-fixed-header #saeckler-site-title {
		font-size: 1.6em !important;
	}
	.saeckler-header-title,
	#main-header.et-fixed-header .saeckler-header-title {
		margin-top: -9px !important;
		margin-left: 50px !important;
	}

	/* Ausgeklapptes Menü */
	#main-header .et_mobile_menu {
		margin-top: -11px !important;
		padding: 0 !important;
	}

	/* Menüpunkte: Padding entfernen, Optik wie Desktop */
	#main-header .et_mobile_menu li a {
		padding: 8px 10px !important;
		color: #000000 !important;
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: 17px !important;
		font-weight: normal !important;
		text-decoration: none !important;
		text-decoration-color: #216AB4 !important;
		border: none !important;
	}
	#main-header .et_mobile_menu li a:hover {
		text-decoration: underline !important;
		text-decoration-color: #216AB4 !important;
		text-decoration-thickness: 3px !important;
		text-underline-offset: 6px !important;
		color: #000000 !important;
	}
	#main-header .et_mobile_menu li.current-menu-item > a,
	#main-header .et_mobile_menu li.current_page_item > a {
		text-decoration: underline !important;
		text-decoration-color: #216AB4 !important;
		text-decoration-thickness: 3px !important;
		text-underline-offset: 6px !important;
	}
}