/*
Theme Name: Inspiration 4 Business
Author: KlausRiebel
Description: Child Theme basierend auf dem Parent Theme DIVI
Version: 1.0
Template: Divi

This is the child theme for Divi theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* Unsere Pages: home / services / contact / imprint / privacypolicy / aboutus */
/* Page Titel: Home / Leistungen / Kontakt / Impressum / Datenschutz / Über uns */

/* CSS-Klassen: Namensgebung */
/* CSSK = CSS-Klasse // - (Bindestich //) M=Modul, S=Section, L = Zeile, H=Header, F=Footer // - (Bindestrich) // Seite // - (Bindestrich) // Modulname plus lfd. Nummer */


/* ANFANG */
/* Verhalten von der Optionsauswahl auf dem Kontaktformular anpassen... dort kann ich keine CSS-Klasse hinterlegen*/

.et_pb_contact_field_options_list {
	display: flex;
	padding-left: 2%;  /*justify-content: center;*/
	flex-wrap: wrap; /* Optional: für responsives Verhalten */
	gap: 4%;       /* Abstand zwischen den Optionen */
}

.et_pb_contact_field_radio {
	display: flex;
	align-items: center;
}

.et_pb_contact_field_options_title {
  color: #f2f2f2;
  font-size: 20px !important; /* Standardgröße für größere Bildschirme */
}

@media (max-width: 768px) {
  .et_pb_contact_field_options_title {
    font-size: 15px !important; /* Kleinere Schriftgröße für Tablets/Smartphones */
  }
}

/* ENDE*/

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

/* ANFANG */
/* Verhalten von .et_pb_contact_field_4 anpassen...*/
.CCSK-M-contact-KontaktForm01 textarea {
    resize: vertical;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
/* ENDE*/

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

/* ANFANG */
/* Fehlermedeldung im Kontaktformular anpassen.*/
/* Erfolgsmeldung */
.CCSK-M-contact-KontaktForm01 .et-pb-contact-message p {
	font-size: 20px;
	line-height: 1.5em;
	color: #06a022;
	background-color: #f2f2f2;
	border-radius: 5px;
}
/* Fehlermeldung Überschrift*/
.CCSK-M-contact-KontaktForm01 .et-pb-contact-message:has(ul) p {
  	font-size: 16px;
	line-height: 1.5em;
  	color: yellow;
  	background-color: #000099;
	border-radius: 5px;
}
/* Fehlermeldung Liste*/
.CCSK-M-contact-KontaktForm01 .et-pb-contact-message ul {
	font-size: 16px;
	line-height: 1.5em;
 	color: #000099;
	background-color: lightyellow;
	border-radius: 5px;
}




/* ENDE*/

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


/* ANFANG */
/* Unser Promo Style - mehrere kombinieren mit , dazwischen 
HOME /  CONTACT  /  ABOUT  */
	.CCSK-home-CTA01.et_pb_promo, .CSSK-L-Contact-Line01.et_pb_row {
	box-shadow: 0px 50px 150px 50px rgba(77,77,77,0.6);
	border-radius: 15px;
	border-width: 3px;
	border-style: groove; 
	background-color: #000099;
	border-color:#f2f2f2;
	
}
/* ENDE*/

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

/* ANFANG */
/* Box-Shadow Parameter: Position Horizontal / Vertikal / Unschärfe Schatten / Schattengröße / Farbe
 * SERVICES  Akkordion*/
   .CSSK-L-services-ACC01.et_pb_row {
	box-shadow: 20px 20px 50px 20px rgba(77,77,77,0.6);
	border-radius: 25px;
	border-width: 3px;
	border-style: groove; 
	background-color: #000099;
	border-color:#f2f2f2;
}
/* ENDE*/

/* ANFANG */
/* Box-Shadow Parameter: Position Horizontal / Vertikal / Unschärfe Schatten / Schattengröße / Farbe
 * SERVICES  Akkordion*/
    .CSSK-L-AboutUs-ACC01.et_pb_row {
	box-shadow: 20px 20px 50px 20px rgba(77,77,77,0.6);
	border-radius: 25px;
	border-width: 3px;
	border-style: groove; 
	background-color: red;
	border-color:#f2f2f2;
}
/* ENDE*/

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

/* ANFANG */
/* setzen aller Blurps in der Zeile auf gleiche Höhe */
/* HOME blurbs in Zeile 01 und 02*/
	.CSSK-L-home-Line01 .et_pb_column, .CSSK-L-home-Line02 .et_pb_column  {
 	display: flex;
 	flex-direction: column;
}
	.CSSK-L-home-Line01 .et_pb_column .et_pb_module, .CSSK-L-home-Line02 .et_pb_column .et_pb_module {
 	flex-grow: 1;
}

.CSSK-L-home-Line01 .et_pb_blurb_content .et_pb_blurb_description, .CSSK-L-home-Line02 .et_pb_blurb_content .et_pb_blurb_description {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
}

/* ENDE*/

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

/* ANFANG */
/* blurp-icon drehen und schatten bei hover */
/* HOME blurbs mit */
/* Standard: Dauerhafte Y-Rotation */
.CSSK-M-home-BlurpIcon .et_pb_main_blurb_image {
    animation: spinY 10s infinite linear;
    transition: box-shadow 0.4s ease;
    border-radius: 50%;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Hover: Stoppe Y-Animation, aktiviere X-Animation */
.CSSK-M-home-BlurpIcon .et_pb_main_blurb_image:hover {
    animation: spinX 3s infinite linear;
    box-shadow: 0 0 20px rgba(0, 0, 153, 0.9), 0 0 40px rgba(0, 0, 153, 0.7);
}

/* Keyframes für Y-Rotation */
@keyframes spinY {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

/* Keyframes für X-Rotation */
@keyframes spinX {
    from { transform: rotateX(0deg); }
    to   { transform: rotateX(360deg); }
}

/* ENDE*/

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

/* ANFANG */
/* Blurb-Modul zentriert mit Icon links */
/* Mobil-Footer */
.CSSK-F-ALL-BlurbFullCenter .et_pb_blurb_content {
  display: flex;
  justify-content: center; /* Zentriert Inhalt horizontal */
  align-items: center;     /* Zentriert vertikal */
  text-align: left;
}

.CSSK-F-ALL-BlurbFullCenter .et_pb_main_blurb_image {
  float: none !important;   /* entfernt das links-floaten */
  margin: 0 2px 0 0;       /* Abstand rechts vom Icon */
}
/* ENDE*/

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

/* ANFANG */
/* Schräger farbiger Balken über Bild Home Page erste Section */
/* HOME - Desktop */
/*
.CSSK-M-home-FullWidthPicDesktop {
  position: relative;
  overflow: hidden;
}
.CSSK-M-home-FullWidthPicDesktop::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20vw; etwas nach links rausziehen für besseren diagonalen Effekt 
  width: 15vw;
  height: 100vw;
  background: rgba(0, 0, 153, 1); hier kannst du die gewünschte Farbe einstellen 
  transform: skewX(25deg); Winkel der Diagonale 
  transform-origin: top left;
  z-index: 1;
  pointer-events: none;
}
HOME - Desktop & Mobile
.CSSK-M-home-FullWidthPicMobile {
  position: relative;
  overflow: hidden;
}
.CSSK-M-home-FullWidthPicMobile::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20vw;  etwas nach links rausziehen für besseren diagonalen Effekt 
  width: 25vw;
  height: 100vw;
  background: rgba(0, 0, 153, 1);  hier kannst du die gewünschte Farbe einstellen 
  transform: skewX(25deg); Winkel der Diagonale 
  transform-origin: top left;
  z-index: 1;
  pointer-events: none;
} 
*/

/* ENDE*/

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

/* ANFANG */
/* rgba(242,242,242,0.45) BildKM  BildKR et_pb_image  02A6F0 Schatten vertikal 2 / Unschärfe 18 / Schattengröße 19 */
/* Box-Shadow Parameter: Position Horizontal / Vertikal / Unschärfe Schatten / Schattengröße / Farbe*/
	.BildKM.et_pb_image, .BildKR.et_pb_image {
		background-color: rgba(242,242,242,0.45);
		box-shadow: 0px 2px 18px 19px rgba(77,77,77,0.6);
		border-radius: 25px;
		border-width: 0px;
		border-style: solid; 
		border-color: #02A6F0;

}		
/* ENDE*/

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

/* ANFANG */
/* Sanfter Hintergrundfarben-Übergang für Akkordeon auf Services*/
.CSSK-M-services-Accordeon01 .et_pb_toggle, .CSSK-M-AboutUs-Accordeon01 .et_pb_toggle {
  transition: background-color 2.5s ease; /* Dauer und Verlauf der Animation */
}
/* ENDE*/

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


/* Hide image titles on hover 
img {
pointer-events:none;
}

Display image titles on hover exception
.CSSClass_ShowTitleOnHover img {
pointer-events:auto; 
} 
*/