/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme from seoBOXX Webdesign | Andreas Soraru
 Author:         seoBOXX Webdesign | Andreas Soraru
 Author URI:     https://seoboxx-webdesign.de/
 Template:       Divi
 Version:        1.0.0
*/


/* textumbruch für blocksatz */
p, h1, h2, h3, h4, h5, h6, .quadmenu-description, .et_pb_text_inner, .et_pb_promo_description, .et_pb_module_header, .et_pb_blurb_description {
    hyphens: auto!important;
    hyphenate-limit-chars: auto 3!important;
    hyphenate-limit-lines: 4!important;
    -webkit-hyphens: auto!important;
    -webkit-hyphenate-limit-chars: auto 3!important;
    -webkit-hyphenate-limit-lines: 4!important;
    -moz-hyphens: auto!important;
    -moz-hyphenate-limit-chars: auto 3!important;
    -moz-hyphenate-limit-lines: 4!important;
    -o-hyphens: auto!important;
    -o-hyphenate-limit-chars: auto 3!important;
    -o-hyphenate-limit-lines: 4!important;
    -ms-hyphens: auto!important;
    -ms-hyphenate-limit-chars: auto 3!important;
    -ms-hyphenate-limit-lines: 4!important;
}

/* Divi menu dropdown auto width */
@media only screen and (min-width: 981px) {
	.nav li ul {
		width: fit-content;
		display: flex;
		flex-direction: column;
	}
	.nav li li {
		white-space: nowrap;
	}
	.nav li li a {
		width: auto !important;
	}
}

/* links */
a, a:hover, a:visited, a:active, a:link {
    text-decoration: none!important;
	color: #75b325;
}

h1, h2, h3, h4, h5, h6 {text-align: left!important; font-weight: normal!important; line-height: 130%!important;}
#top-header .container {font-weight: normal!important; padding-top: 10px; padding-bottom: 0px;}
#main-header {box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.07);}
#et-top-navigation {margin-bottom: 10px;}

/* Hauptnavigation – Standard */
#top-menu li { padding-right: inherit!important;}

#top-menu > li > a {
	border: 3px solid #ffffff !important;
	background-color: #ffffff !important;
	color: #75b325 !important;
    margin: 10px 2px 10px 2px !important;
    padding: 12px 12px 12px 12px !important;
}

/* Hauptnavigation – Hover */
#top-menu > li > a:hover,
#top-menu > li:hover > a,
#top-menu > li:focus-within > a {
	border: 3px solid #e3f0d3 !important;
	background-color: #ffffff !important;
	color: #75b325 !important;
}

/* Hauptnavigation – Aktiv */
#top-menu > li.current-menu-item > a,
#top-menu > li.current_page_item > a,
#top-menu > li.current-menu-ancestor > a,
#top-menu > li.current-page-ancestor > a,
.et-fixed-header #top-menu li.current-menu-item>a, 
.et-fixed-header #top-menu li.current_page_item>a {
	border: 3px solid #75b325 !important;
	background-color: #75b325 !important;
	color: #ffffff !important;
}

#top-menu .menu-item-has-children>a:first-child, #et-secondary-nav .menu-item-has-children>a:first-child {
	padding-right: 22px !important;	
}

#top-menu .menu-item-has-children>a:first-child:after, #et-secondary-nav .menu-item-has-children>a:first-child:after {
    right: 4px;
    top: 11px;	
}

/* Submenü – Standard */
#top-menu > li > ul.sub-menu > li > a {
	text-transform: inherit !important;
	color: #57575C !important;
	/* color: #85868c !important; */
}

/* Submenü – Hover */
#top-menu > li > ul.sub-menu > li > a:hover,
#top-menu > li > ul.sub-menu > li:hover > a,
#top-menu > li > ul.sub-menu > li:focus-within > a {
	color: #57575C !important;
	/* color: #85868c !important; */
}

/* Submenü – Aktiv */
#top-menu > li > ul.sub-menu > li.current-menu-item > a,
#top-menu > li > ul.sub-menu > li.current_page_item > a,
#top-menu > li > ul.sub-menu > li.current-menu-ancestor > a,
#top-menu > li > ul.sub-menu > li.current-page-ancestor > a {
	color: #75b325 !important;
}

#menu-footermenue > li,
#menu-footermenue > li > a {
	font-weight: inherit !important;
}

/* Aktive Links im mobilen Menü grün */
.et_mobile_menu li.current-menu-item > a,
.et_mobile_menu li.current_page_item > a,
.et_mobile_menu li.current-menu-ancestor > a,
.et_mobile_menu li.current-page-ancestor > a,
.et_mobile_menu li.current_page_parent > a,
.et_mobile_menu li.current-menu-parent > a,
.et_mobile_menu .sub-menu li.current-menu-item > a,
.et_mobile_menu .sub-menu li.current_page_item > a,
.et_mobile_menu .sub-menu li.current-menu-ancestor > a,
.et_mobile_menu .sub-menu li.current-page-ancestor > a {
   color: #75b325 !important;
   background: transparent !important;
   opacity: 1 !important;
   -webkit-text-fill-color: #75b325 !important;
}

#footer-info a {
	font-weight: inherit !important;
}

#footer-info {
    font-size: 15px !important;
    line-height: 125% !important;
    padding-bottom: 0px !important;
}

#footer-bottom {
    padding: 5px 0 0px 0 !important;
}

.et_pb_contact .et_pb_contact_field input, .et_pb_contact .et_pb_contact_field textarea {
    font-size: 18px!important;
}

/* DSGVO privacy pocily link icon color */
.et_pb_contact_field_checkbox a { 
	color: #75b325; 
	font-weight: normal;
}
span.et_pb_contact_field_checkbox { text-align: justify; }
/* right margin after captcha on contact forms */
input.input.et_pb_contact_captcha { margin-right: 10px; margin-left: 10px; }

/* listen footer */
ul.topul { list-style-type: none!important; }

/* Hamburger Menu - Text */
header .et_mobile_nav_menu:before {
    content: 'Hauptmenü';
	color: #000000; 
}
footer .et_mobile_nav_menu:before {
    content: 'Rechtliches & Informationen';
	color: #ffffff; 
}

/* text absatz */
.pjust { text-align:justify; }
.plvl0 { margin-left:0px; margin-right:0px; }
.plvl1 { margin-left:10px; margin-right:0px; }
.plvl2 { margin-left:20px; margin-right:0px; }
.plvl3 { margin-left:30px; margin-right:0px; }
.plvl4 { margin-left:40px; margin-right:0px; }
.plvl5 { margin-left:50px; margin-right:0px; }
.plvl6 { margin-left:60px; margin-right:0px; }

/* services list with checked checkbox as icon */
ul.svclst { list-style: none!important; }
ul.svclst li { line-height: 2.5em!important; border-bottom: 1px solid rgba(51, 51, 51, 0.12); }
ul.svclst li:before {
	content: '\49'!important;	
	font-family: ETmodules!important;
	margin-right: 15px;
	color: #75b325!important;
}

/* icons kontaktseite - später nur auf der seite in code-modul? */
.icon-tel:before {
    content: "\e090";
  	margin-right: 7px;
  	font-family: 'etModules';
}
.icon-mobile:before {
    content: "\e00b";
  	margin-right: 7px;
  	font-family: 'etModules';
}
.icon-fax:before {
    content: "\e0fa";
  	margin-right: 7px;
  	font-family: 'etModules';
}
.icon-mail:before {
    content: "\e076";
  	margin-right: 7px;
  	font-family: 'etModules';
}

:root {
  --pt-duration: 1ms;
  --pt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pt-bg: linear-gradient(360deg, #38892a 25%, #7dad35 75%, #b6cd37 100%);
  --pt-ring: rgba(255, 255, 255, 0.92);
  --pt-ring-soft: rgba(212, 235, 84, 0.35);
  --pt-z: 999999;
}

/* Optional: globaler Seitenhintergrund */
html,
body {
  background: var(--pt-bg);
  background-attachment: fixed;
}

/* Overlay für Seitenwechsel */
html::before,
html::after {
  content: "";
  position: fixed;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Verlauf */
html::before {
  inset: 0;
  z-index: var(--pt-z);
  background: var(--pt-bg);
  transform: scale(1.02);
  transition:
    opacity var(--pt-duration) var(--pt-ease),
    transform var(--pt-duration) var(--pt-ease),
    visibility 0s linear var(--pt-duration);
}

/* Spinner */
html::after {
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-top: -27px;
  z-index: calc(var(--pt-z) + 1);
  border-radius: 50%;
  border: 2px solid var(--pt-ring-soft);
  border-top-color: var(--pt-ring);
  transform: translateY(8px) scale(0.88);
  transition:
    opacity var(--pt-duration) var(--pt-ease),
    transform var(--pt-duration) var(--pt-ease),
    visibility 0s linear var(--pt-duration);
}

/* Sichtbar beim Verlassen / Eintreffen */
html.pt-leaving::before,
html.pt-entering::before,
html.pt-leaving::after,
html.pt-entering::after {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--pt-duration) var(--pt-ease),
    transform var(--pt-duration) var(--pt-ease),
    visibility 0s linear 0s;
}

html.pt-leaving::before,
html.pt-entering::before {
  transform: scale(1);
}

html.pt-leaving::after,
html.pt-entering::after {
  transform: translateY(0) scale(1);
  animation: pt-spin 0.85s linear infinite;
}

@keyframes pt-spin {
  from { transform: translateY(0) scale(1) rotate(0deg); }
  to   { transform: translateY(0) scale(1) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after {
    display: none !important;
    animation: none !important;
    transition: none !important;
  }
}