/*
 Theme Name:     Divi Child
 Theme URI:      https://deine.domain
 Description:    Child Theme
 Author:         Dein Thorsten Schlaberg
 Author URI:     https://deine.domain
 Template:       Divi
 Version:        1.0.1
 Datum: .........20260114
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

/* body */
#main-content, footer {
	color: #14134f !important; /* Haupttextfarbe body text*/
	}
body { font-family: Montserrat !important; }

:root {
  /* ========================================
     SPACING TOKENS (Fluid Scaling)
     ======================================== */
  --space-0: 0px;
  --space-xs: clamp(0.5rem, 1.2vw, 0.75rem);
  --space-s:  clamp(0.75rem, 2vw, 1.25rem);
  --space-m:  clamp(1.25rem, 3vw, 2rem);
  --space-l:  clamp(2rem, 4vw, 3rem);
  --space-xl: clamp(2.5rem, 5vw, 3.5rem);

  /* Gaps (Fluid + clamped) */
  --gap-xs: clamp(0.5rem, 1.2vw, 0.75rem);  /* ~8px → 12px */
  --gap-s:  clamp(0.75rem, 2vw, 1.25rem);   /* ~12px → 20px */
  --gap-m:  clamp(1.25rem, 3vw, 2rem);      /* ~20px → 32px */
  --gap-l:  clamp(2rem, 4vw, 3rem);         /* ~32px → 48px */
  
  
  font:

/* links **/
a {
  cursor: pointer !important;
  display: inline-block; /* oder block */
  }

/*a[href] {
    cursor: pointer;
}*/

#main-content a:link:not(.et_pb_button):not(.et_pb_promo_button)
 , #main-content a:visited:not(.et_pb_button):not(.et_pb_promo_button)
 , #main-content a:hover:not(.et_pb_button):not(.et_pb_promo_button)
 , #main-content a:focus:not(.et_pb_button):not(.et_pb_promo_button)
 , #main-content a:active:not(.et_pb_button):not(.et_pb_promo_button)
 {
    text-decoration: underline !important;
  }
#main-content a[href*="//"]:not([href*="//kunden2.thokli.de"]):not([href^="#"]):not([href^="/"])::after {
    content: ' ↗';
    font-size: 1.2rem;
    margin-left: 0px;
  }
  
  
/****************************/

/* module toggle ***/
div .et_pb_toggle_content {
  padding-top: 0px;
  
  }
  
/*====================================*/
/*.entry-content img */
.textblock-img-ausgleich {
margin-top: 5px;
}
  
/**** image crop wenn class gesetzt in group img ****/
.image-crop-height-m .et_pb_image_wrap {
height: 300px !important;
width: 100% !important;	
overflow: hidden;
position: relative;
display: block;
}
.image-crop-height .et_pb_image_wrap {
height: 200px !important;
width: 100% !important;	
overflow: hidden;
position: relative;
display: block;
}
  
.image-crop-height .et_pb_image_wrap img,
.image-crop-height-m .et_pb_image_wrap img {
height: 100%;
width: 100%;
display: block;
object-fit: cover;
/*object-position: env();*/
}


/* img cover position x/y */
.mitte-oben img {
  object-position: center top;
  }
.mitte-mitte img {
  object-position: center center;
  }
.mitte-unten img {
  object-position: center bottom;
  }
.links-oben img {
  object-position: left top;
  }
.rechts-unten img {
  object-position: right bottom;
  }
.rechts-mitte img {
  object-position: right center;
  }
  


/*Achtung dadurch wird auch die Headerfarbe im Builder geändert !!!*/
h1 {
/*color: #14134f !important;*/ /* Haupttextfarbe */
	/*color: red !important;*/  /* test */
	/*text-transform: none !important;*/
	}
h2 {
/*color: #14134f !important;*/ /* Haupttextfarbe */
	/*color: #ccc !important;*/  /* test */
	}
h3 {
/*color: #14134f !important;*/ /* Haupttextfarbe */
	/*color: #ccc !important;*/  /* test */
	}


/*================================*/

/* Text Standard Blocksatz mit automatischer Umbruch **/
p { 
  text-align: justify;
  hyphens: auto; 
  }
  
.noblockandbreak p { 
  text-align: left;
  hyphens: none; 
  }
  
.et_pb_scroll_top {
    bottom: 10px !important; /* Abstand vom unteren Rand */
    /*right: 30px;*/  /* Abstand vom rechten Rand */
}

#h1_text_va1  {
	padding-top: 20px;
	display: inline-block;
	}

/*h1, h2 {
	color: red !important;
	}*/


#ts {color: yellow !important;} /* test id*/

/*   icon list position of icon oben */
.et_pb_icon_list .et_pb_icon_list_item.et_flex_module {
  display: flex;
  align-items: flex-start;
}

.et_pb_icon_list .et_pb_icon_list_item.et_flex_module .et-pb-icon 
{
  flex-shrink: 0;
  margin-top: 0em;
  color: #14134f  !important;
}
#footer p {
  hyphens: none;
  }

.et_pb_contact .et_pb_contact_field input[type="radio"]:checked + label i::before {
  background: blue;
  }


/*=================================*/
/*edit the Divi dropdown submenu*/
.et_pb_menu li ul {
  background-color: #F0F7FC; /* hellblau*/
 }
 
.et_pb_menu .et-menu-nav ul.sub-menu {

}


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

/* Divi Dropdown Menü Innenabstand entfernen */
.et_pb_menu .et-menu-nav>ul ul, .nav li li{
    padding: 5px 0;
}
.et-menu li li a {
  font-weight: 500;
}

/*edit the Divi submenu list items on hover*/
.et_pb_menu li li:hover {
  background: #F6A924; /*  orange #F6A924**/ 
}


/* Obermenupunkte unterstrich auch problem*/
/*.et_pb_menu li:hover {
  text-decoration: underline !important;
}*/

/* Obermenupunkte einfärben - problem ansicht !*/
/*.et_pb_menu li:hover {
  background: #F6A924; 
}*/


.et_pb_menu li li a:hover {
  color: #fff !important; /* text weiß */
}

}
/* hover standard bg deaktivieren / Textfarbe weiß */
.et_mobile_menu li a:hover,
.nav ul li a:hover {
  background-color: transparent !important;
  opacity: 1 !important;
  color: #ffffff !important; /* text weiß */
}

/* Kundenmeinung ohne children */
#menu-item-221582.menu-item-has-children > a:first-child:after {
  display: none !important;
  }
#menu-item-221582.menu-item-has-children > a:first-child {
padding-right: 0px;
  }


/*==============================*/
/* mobil menu */
.et_mobile_menu li li a {
  font-weight: 500 !important;
  }

/* ----------------*/

/* Divi Burger Symbol vergrößern */
.mobile_menu_bar:before {
  font-size: 40px !important; /* Passen Sie den Wert hier an (z.B. 30px, 35px) */
}

/* X-Symbol im ausgeklappten mobilen Menü */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}

/* Obere Linie im mobilen Menü entfernen*/
.et_mobile_menu {
border-top:0;
}

 /* mobile menu scroll */
/*
.et_mobile_menu {
  overflow: scroll !important;
  max-height: 83vh;
  margin-top:32px;
}*/

/* Untermenü-ohne Einrückung */
.et_mobile_menu .sub-menu li a {
  padding: 5px 0px !important;
  }

/*vEinrückung zu gross */
/*
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0 !important;
}
*/

/* ----------------*/

/* Make mobile menu fullwidth */



/* Mobiles Menü auf volle Breite setzen */
/*
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}
*/
.et_mobile_menu {
 width: 100vw !important;
 margin-left: -13vw;
 z-index: 100 !important;
}

.et_mobile_menu {
  /*position: relative !important; */ /* Instead of fixed / ?absolute */
  top: 70px !important; /* 70 px Adjust it to set the top value */
  left: -220px;
  }



 /* mobile menu scroll */

.et_mobile_menu {   
  overflow-y: scroll !important;
  max-height: 80vh !important;
  -overflow-scrolling: touch !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-x: hidden !important;
  overflow: hidden;
  
  }


/* =================*/

/* Formular Fehleranzeige lesbar machen */
/*
.et-pb-contact-message {
..color: red !important;
  background: #fff;*/
  /*padding: 10px;*/  
/*  font-size: 1.1em;
  display: block;
  margin-bottom: 5px;*/
  /*position: absolute;*/
/*  z-index: 999;
  bottom: -341px;
  left: 0;

}*/

/* für divi header sticky ?**/
/*
header.et-l.et-l--header {
    z-index: 99999;
    position: relative;
}
*/

/* Stellt sicher, dass der Button auf einer neuen Zeile steht */
.pf-button {
  display: block;
  margin-top: 10px;
}

/* Ändert die Breite des Formulars, um das Umbrechen zu ermöglichen */
.et_pb_contact_form .input {
  width: 100%;
  box-sizing: border-box;
}

/* Beheben von Problemen mit der Ausrichtung des Captcha */
.et_pb_contact_field.et_pb_contact_recaptcha {
  clear: both;
}


/*==================*/

/* Foto-Text Ausgleich ... tiefer */
.et_pb_image_wrap img{
  margin-top: 6px;
  }

/*bild an text anpassen - Eric-Oliver Mächler */
/* bild höhe */
.cb-full-height-image-column {
	height: 100%;
}
/* container höhe vom bildmodul */
.cb-full-height-image-column .et_pb_image_wrap {
	height: 100%;
}
/* höhe bildmodul mit bildhöhe abgleichen*/
.cb-full-height-image-column img {
	object-fit: cover;
	height: 100%;
}



/* Fotos rchteckig zu quadratisch anpassen*/
.rechteckig-zu-quadrat {
    width: 100%; /* oder eine feste Größe */
    height: 100%;
    /* Beispiel für Padding-Hack (für quadratische Container): */
    padding-bottom: 100%; /* 100% der Breite = Quadrat */
    position: relative;
}
.rechteckig-zu-quadrat img {
    position: absolute;
    top: 0;	
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Skaliert das Bild ohne Verzerrung */
    border-radius: 50%; /* Für runde Bilder */
}


/* ----------------*/
@media print {
  .hide-on-print { /* Use #hide-on-print if you used an ID */
    display: none !important;
  }
}

/* Formular Label Auswahlbox bei Umbruch der Zeile und Abstand**/
.et_pb_contact_field_checkbox input + label {
  display: flex !important;
  /*align-items: flex-start;*/ /* führt zu unschönen Höhen */
  padding: 5px 5px;
  line-height: 1.4em;
  cursor: pointer;
  user-select: none;
  }

/* verhindert das kleine */
.et_pb_contact_field_checkbox i {
  min-width: 18px;
  }


.et_pb_toggle_2.et_pb_toggle_open .et_pb_toggle_title::before, 
.et_pb_toggle_2.et_pb_toggle_close .et_pb_toggle_title::before, {
  top:11px;
}





/*contact form helper*/
/* bug in der version 207*/
#formfirstcontact .et_pb_contact_field_5 .et_pb_contact_field_options_title,
#formfirstcontact .et_pb_contact_field_7 .et_pb_contact_field_options_title,
#formerstgespraech .et_pb_contact_field_12 .et_pb_contact_field_options_title,
#formskp .et_pb_contact_field_17 .et_pb_contact_field_options_title {
margin-bottom: 2px !important;
}

/*
.et_pb_contact_form_label { 
  height: 0px !important; 
  }*/ /* lässt sich über design direkt einstellen*/

/* ... date/time picker bug with label */
/*
#terminerstgespraech .et_pb_contact_field_8 .et_pb_contact_form_label { 
  height: 30px !important; 
}
#terminsachkundepruefung .et_pb_contact_field_8 .et_pb_contact_form_label,
#terminsachkundepruefung .et_pb_contact_field_9 .et_pb_contact_form_label,
#terminsachkundepruefung .et_pb_contact_field_11 .et_pb_contact_form_label { 
  height: 30px !important; 
}*/

@media only screen and (max-width: 767px) {
  .et_pb_contact_field_0 {
    flex-direction: column !important;
  }
}

/* anklickbare Tags (Divi 5 kompatibel) */
.cb-post-tags { font-size: 16px; color: #666; }
.cb-tag-link { color: #007cba; text-decoration: none; }
.cb-tag-link:hover { text-decoration: underline; }
/* ende tag*/

/* pin vor title in toggle modul */
.toggle_icon_h3 .et_pb_toggle .et_pb_toggle_title::after {
  content: "\e01d" !important;
  font-family: "ETmodules" !important;
  order: 1; /* Pin zuerst */
  color: red;
    position: absolute !important;
left: 0;
top: 0px
}

.toggle_icon_h3 h3.et_pb_toggle_title {
padding-left: 18px !important;
}
/* Ende pin */

.