/*===================================================================================================================*/ 
/* Template: Divi                                                                                                    */
/* Theme Name: Divi-Child                                                                                            */
/* Version: 1.0.0                                                                                                    */
/* Author: Klaus Wildenburg                                                                                          */
/* Description: Divi Child-Theme                                                                                     */
/*===================================================================================================================*/ 

/*----------------------------------------------------------------------*/
/* Standardgemäß nutzt das Divi Theme 80% der angegebenen Seitenbreite. */
/* Das sieht auf Smartphones etwas gedrungen aus. Um dem entgegen zu    */
/* wirken, wird hier ein anderer Wert festgelegt.			            */
/*----------------------------------------------------------------------*/

@media (max-width: 767px) {
	.et_pb_row, .container {
		width: 95% !important;
		max-width: 95% !important;
		}
	}
}

/*---------------------------------*/
/* Bildtitel beim Hover ausblenden */
/*---------------------------------*/

img {
pointer-events:none;
}

/*===================================================================================================================*/ 
/* Menü                                                                                                              */
/*===================================================================================================================*/ 

/*--------------------------*/
/* Abstand der Menüeinträge */
/*--------------------------*/

.et_pb_menu .et-menu.nav > li { 
  padding-left: 20px !important; 
  padding-right: 20px !important;
}

/*------------------------------------------------------------------------*/
/* Smartphone: Symbol des Hamburgermenüs in ein 'X' umwandeln, und zurück */
/*------------------------------------------------------------------------*/

.mobile_menu_bar::before {
	display: block;
	transition: all .4s ease;
}
.mobile_nav.opened .mobile_menu_bar::before {
	content: "M";
	transform: rotate(90deg);
}

/*-----------------------------------------*/
/* Einträge des Drop-Down-Menüs zentrieren */
/*-----------------------------------------*/

.et_mobile_menu li a {
text-align: center;
}

/*===================================================================================================================*/ 
/* Back-To-Top-Button                                                                                                */
/*===================================================================================================================*/ 
/*------------------------*/
/* Back-To-The-Top-Button */
/*------------------------*/

.et_pb_scroll_top.et-pb-icon {
	right: 15px;
	bottom: 15px;
	border-radius: 25px;
    background-color: #B4D097;
    color: #000000;
	-webkit-box-shadow: 4px 4px 15px 3px rgba(0,0,0,0.26);
    -moz-box-shadow: 4px 4px 15px 3px rgba(0,0,0,0.26);
    box-shadow: 4px 4px 15px 3px rgba(0,0,0,0.26);
}

.et_pb_scroll_top.et-pb-icon:hover {
	border: 1px solid #303030;
    background-color: #AAD29A;
    color: #303030;
}

/*--------------------------------------------------*/
/* Back-To-The-Top-Button auf Smartphone ausblenden */
/*--------------------------------------------------*/

@media only screen and (max-width: 767px) {
  .et_pb_scroll_top.et-pb-icon {
    display: none !important;
  }
}

/*===================================================================================================================*/ 
/* Bewertungsformular (Site Reviews) - Erfassungsformular                                                            */
/*===================================================================================================================*/ 

/*------------------*/
/* Bewertungssterne */
/*------------------*/

.glsr-summary .glsr-star {
    background-size: 24px !important; /* Hintergrundgroesse */
    height: 24px !important; /* Hoehe */
    width: 24px !important; /* Breite */
}

/*---------------*/
/* Eingabefelder */
/*---------------*/

.glsr-form .glsr-input,
.glsr-form .glsr-textarea {
	background-color: #EEEEEE !important; /* Hintergrundfarbe */
	border-radius: 10px !important; /* Radius der Feldecken */
	font-family: 'Poppins'!important; /* Schriftart */
	font-size:14px !important; /* Schriftgrösse */
	color: #000000 !important; /* Schriftfarbe */
}

/* Bewertungs-Titel */
.glsr-review-title h4 {
	text-transform: uppercase !important; /* Versalienschrift */
	font-weight: 600 !important; /* Fettschrift */
}

/* Platzhaltertexte */
.glsr-form ::placeholder {
  color: #000000 !important; /* Textfarbe */
}

/* Hover-Effekt */
.glsr-form .glsr-input:hover,
.glsr-form .glsr-textarea:hover {
  background-color: #F1CB2F !important; /* Feldfarbe */
  color: #000000 !important; /* Textfarbe */
}

/*-------------------*/
/* Datenschutztoggle */
/*-------------------*/

.glsr-field-toggle {
    --glsr-toggle-bg-1: #F1CB2F; /* Hintergrundfarbe des aktivierten Toggles */
	color: black; /* Textfarbe */
} 

/*-----------------------*/
/* Meldungen formatieren */
/*-----------------------*/

.glsr-form-error,
.glsr-form-failed,
.glsr-form-message {
	font-family: 'Poppins'; /* Schriftart */
	font-size:16px !important; /* Schriftgrösse */
	color: #FF0000 !important; /* Schriftfarbe */
}

/*-------------------------------*/
/* Anzeige 'Veryfied' ausblenden */
/*-------------------------------*/	

.glsr-review-verified {
display: none !important;
}

/*===================================================================================================================*/ 
/* Bewertungsformular (Site Reviews) - Ergebnisdarstellung und Karussell                                             */
/*===================================================================================================================*/ 

/*-------------------------------------*/
/* Container Bewertungszusammenfassung */
/*-------------------------------------*/

.my-review-badge-container {
    background-color: #F1CB2F !important; /* Hintergrund */
    color: #1F1F1F !important;            /* Schrift */
    border-radius: 10px !important;       /* Ecken */
    display: flex !important;             /* Flex-Container */
    flex-direction: column !important;    /* Flex-Richtung der Kindelemente */
    align-items: center !important;       /* Horizontal zentrieren */
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 280px !important;           /* Begrenzt die Breite, damit es kompakt bleibt */
    margin: 0 auto !important;             /* Zentriert die Box im Divi-Modul */
    box-sizing: border-box !important;
}

/* Durchschnitt Bewertung */
.my-review-badge-number {
	font-family: inherit !important;       /* Schrift */
    font-size: 2.5rem !important;          /* Schriftgröße */
    font-weight: 800 !important;           /* Schriftstärke */
    line-height: 1 !important;             /* Zeilenhöhe */
    margin-bottom: 10px !important;        /* Außenabstand */
}

/* Durchschnitt Sterne */
.my-review-badge-stars {
    margin-bottom: 15px !important;
}

/* Horizontale Positionierung der Sterne */
.my-review-badge-stars .glsr-star-rating {
    justify-content: center !important;    
}

/* Anzahl Bewertungen */
.my-review-badge-count {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    letter-style: normal !important;
}

/* Balkenfarbe */
.glsr-summary {
   --glsr-bar-bg: #1F1F1F !important; 
}

/*-------------------------------------------------------------------*/
/* Bewertungskarussell - Bewertungen (Desktop/Tablet: nebeneinander) */
/*-------------------------------------------------------------------*/

/* Karussell-Container */
.my-reviews-main-wrapper {
    background: #f1cb2f !important;
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Bewertungs-Box */
.my-reviews-carousel-viewport {
    overflow: hidden !important;
    width: 100% !important;
	border-radius: 10px !important;
}

.my-reviews-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

.my-review-item {
    background: #FEF3CA !important;
    padding: 20px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 calc((100% - (2 * 20px)) / 3) !important;
    box-sizing: border-box !important;
}

/* Sterne und Datum */
.my-review-rating-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
}

/* Sterne links ausrichten */
.my-review-rating {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Site Reviews Sterne links ausrichten */
.my-review-rating .glsr-star-rating {
    justify-content: flex-start !important;
}

@media (max-width: 980px) {
    .my-review-item {
        flex: 0 0 calc((100% - (1 * 20px)) / 2) !important;
    }
}

/*---------------------------------------------------------------*/
/* Bewertungskarussell - Bewertungen (Smartphone: untereinander) */
/*---------------------------------------------------------------*/

@media (max-width: 600px) {
    .my-reviews-carousel-viewport {
        height: var(--viewport-height, auto) !important; 
    }
    .my-reviews-row {
        flex-direction: column !important; 
    }
    .my-review-item {
        flex: 0 0 auto !important; 
        width: 100% !important;
    }
}

/*----------------------------------*/
/* Bewertungskarussell - Navigation */
/*----------------------------------*/

/* Navigationscontainer */
.my-reviews-button-wrapper.positional-bottom {
    display: flex !important;
    justify-content: center !important;  
    align-items: center !important;
    gap: 20px !important;                 
    width: 100% !important;
    margin: 0 !important;                  
    padding: 30px 20px 10px 20px !important; 
    box-sizing: border-box !important;
    clear: both !important;
}

/* Seitennummer - Positionierung */
.my-reviews-pagination-numbers {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Seitennummer - Formatierung */
.my-reviews-page-num {
    background: #FEF3CA !important;
    color: #1F1F1F !important;
    border: none !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

/* Seitennummer - Aktiv */
.my-reviews-page-num.active {
    background: #B4D097 !important;
    color: #1F1F1F !important;
}

/* Seitennummer - Hover */
.my-reviews-page-num:hover {
    background: #FEF3CA !important;
    opacity: 0.8 !important;
}

/* Navigation - Button */
.my-reviews-btn {
    background: #FEF3CA !important;        
    color: #1F1F1F !important;
    border: none !important;
    padding: 10px 18px !important;
    font-size: clamp(1.1rem, 0.2vw + 0.95rem, 1.25rem) !important; 
    font-weight: 500 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease !important;
}

/* Navigation - Inaktiv */
.my-reviews-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Navigations - Hover */
.my-reviews-btn:not(:disabled):hover {
    background: #B4D097 !important;
    color: #1F1F1F !important;
}

/* Navigation - Punkte (...) */
.my-reviews-pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    font-size: 24px;
    font-weight: 400;
    color: #1F1F1F;
}

/*===================================================================================================================*/ 
/* Kontaktformular                                                                                                   */
/*===================================================================================================================*/ 

/*------------------------------------------------*/
/* Abstand zwischen Placeholder und Radio-Buttons */
/*------------------------------------------------*/

.et_pb_contact_field_desc {
	margin-bottom: 15px;
} 

/*-----------------------------------------------*/
/* Radio Button des Kontaktformulars formatieren */
/*-----------------------------------------------*/

/* Default State: Style the outer circle */
.et_pb_contact_field_radio label i {
  border: 2px solid #cccccc; /* Grey border for the circle border */
  background-color: #cccccc; /* White background for the circle */
}

/* Hover State: Change colors when you mouse over an option */
.et_pb_contact_field_radio:hover label i {
  border-color: #F1CB2F; /* Yellow for the border on hover */
  background-color: #F1CB2F; /* Yellow for the background on hover */
}

/* Selected (Checked) State: Change colors when an option is chosen */
.et_pb_contact_field_radio input[type="radio"]:checked + label i {
  background-color: #F1CB2F; /* Your custom yellow color for the selected background */
  border-color: #F1CB2F; /* Matching border color */
}

/* (Optional) Style the checkmark inside the selected circle */
.et_pb_contact_field_radio input[type="radio"]:checked + label i:before {
  color: #000000 /* Black checkmark */
}

/*===================================================================================================================*/ 
/* Footer                                                                                                            */
/*===================================================================================================================*/ 

/*------------------------------------------------------------*/
/* Footer-Objekte auf dem Smartphone nebeneinander darstellen */
/*------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
  .nebeneinander .et_pb_module {
    display: inline-block;
    width: 33.33%;
    vertical-align: top;
  }

  .nebeneinander .et_pb_module:last-child {
    margin-right: 0;
  }
}