/*
	Theme Name: Semplice 7 Child Theme
	Description: Child Theme for Semplice
	Author: Semplicelabs
	Template: semplice7
*/

/* Custom CSS Start */

/*General Settings*/



.swiper-slide {
  background-size: cover !important;
  background-position: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  }
  
* {
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

.swiper-button-next,
.swiper-button-prev {color: #8A8A8A!important;}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 24px !important; /* Kleiner machen */
}


.mobile_logo {font-family: 'soehne-buch'!important; font-size: 18px!important; line-height: 26px!important;}

.custom_logo {font-family: 'soehne-buch'!important; font-size: 17px; line-height: 24px; color: #181818;}
.custom-list ul {margin-left: 15px!important;}



#content_x9pefepv8:hover .hamburger span,
.hamburger span:hover {color: #ECECEC!important;}

#column_x35herjeb a,
.footer-link a:hover,
nav a span:hover {text-decoration: underline; text-decoration-thickness: 1px!important; text-underline-offset: 3px;}
.text-link a {text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;}

#column_x35herjeb a:hover,
.text-link a:hover {text-decoration: none;}
header a * {transition: none!important;}
img {border-radius: 4px!important;}
.no-padding {padding: 0!important;}
.open-contact-bar {font-family: 'soehne-buch'!important; font-size: 18px!important; color: #181818!important; background: #ECECEC; border-radius: 5px; padding: 10px 25px 10px 25px!important;}

#content_x9pefepv8 {transition: none!important;}

#content_x9pefepv8:hover,
.open-contact-bar:hover {color: #ECECEC!important; background: #181818!important; cursor: pointer;}
#content_x9pefepv8 {background: #ECECEC; border-radius: 5px; padding: 7px 14px 7px 14px!important;}

.current-menu-item a span {text-decoration: underline!important; text-decoration-thickness: 1px!important; text-underline-offset: 3px!important;}

.swiper-counter {
  font-family: 'soehne-buch'!important; font-size: 15px!important; line-height: 21px; color: #181818!important;
}

/*Caption Zahnersatz*/

.smp-image {
    position: relative;
    display: inline-block;
  }

  .image-caption {
    position: absolute;
    bottom: 15px;
    left: 0vw;
    
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
  }
  

.static-caption {
    position: absolute;
    bottom: 10px;
    left: 0px;
    
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
    z-index: 10;
    max-width: 90%;
}




  
/*Ende*/

.external-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none; /* Entfernt Unterstreichung vom Container */
}

.external-link span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration 0.2s ease-in-out;
}

.external-link:hover span {
    text-decoration: none; /* Entfernt die Unterstreichung beim Hover */
}

.external-link::after {
    content: "→";
    display: inline-block;
    margin-left: 5px;
    transform: rotate(-45deg);
    text-decoration: none;
}






.sub {
  position: relative;
  display: inline-block;
}

.sub::after {
  content: "1";
  position: absolute;
  top: -0.4em;
  right: -1em;
  font-size: 0.6em;
  color: black;
  border-radius: 50%;
  padding: 0.15em 0.4em;
  line-height: 1;
  text-decoration: none!important;
  border: none!important;
}



/*Accordion*/

.front-accordion ul li {
	font-family: 'soehne-buch'!important; 
	display: inline;
	border-radius: 4px;
	background: #ECECEC;
	padding: 0px 15px 0px 15px;
	margin-right: 5px;
    margin-bottom: 6px!important;
    font-size: 18px!important;
    line-height: 26px;
    color: #181818;
    white-space: nowrap; /* Verhindert das Umbruch von Wörtern */
   -moz-hyphens: none;
   -o-hyphens: none;
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none!important;
   }
   

.front-accordion ul {
   display: flex;  
   flex-wrap: wrap;
   margin-left: 0px!important;
   padding-left: 0!important;
  }


.front-accordion {
    counter-reset: section; /* Zähler zurücksetzen */
	}

.front-accordion .accordion-item {
    position: relative; /* Relative Positionierung für absolute Kinder */
	}

.front-accordion .accordion-item .title {
    position: relative; /* Positionierung für den Inhalt */
	}

.front-accordion .accordion-item .title::before {
    counter-increment: section; /* Zähler erhöhen */
    content: "0" counter(section); /* Zähler ausgeben */
    position: absolute;
    left: 0; /* Positioniere die Zahl am Anfang */
    color: #181818; /* Zahlfarbe standardmäßig auf Grau setzen */
    transition: color 0.2s ease; /* Smooth Transition für die Farbe */
	}
	
/* Titel mit Abstand */
.front-accordion .description,
.front-accordion .accordion-item .title-span {
    margin-left: 75px; /* Abstand für den Titel */
	}

/* Hover-Effekte */
.front-accordion .accordion-item:hover .title::before {
    color: #8a8a8a; /* Zahlfarbe bei Hover auf Weiß setzen */
	}

/* Zustand, wenn das Accordion expanded ist */
.front-accordion .accordion-item.expanded .title::before {
    color: #8a8a8a; /* Zahlfarbe auf Weiß setzen, wenn expanded */
	}

/* Unterstreichung im Hover-Zustand */
.underline-link a,
.underline p,
.front-accordion .accordion-item:hover .title-span,
.front-accordion .accordion-item.expanded .title-span {
    text-decoration: underline; /* Wort unterstreichen bei Hover und expanded */
    text-decoration-thickness: 2px; 
    text-underline-offset: 3px;
	}
	
/* Unterstreichung im Normal-Zustand */
.team-accordion .accordion-item .title-span{
    text-decoration: underline; /* Wort unterstreichen bei Hover und expanded */
    text-decoration-thickness: 1px; 
    text-underline-offset: 3px;
	}	

.team-accordion .accordion-item.expanded .title-span,
.team-accordion .accordion-item .title-span:hover,
.underline-link a:hover {
	text-decoration: none;
	}
	
/*Swiper*/

/*Content-Slider*/ 

.bg-fade-container {
    width: 100%;
    /*touch-action: pan-y!important; /* Erlaubt nur vertikales Scrollen */
    /*max-width: 1800px;*/
    }

.bg-fade-column {
    position: relative;
    width: calc(25% - 10px); /* Jede Spalte nimmt ein Viertel der Slider-Breite abzüglich der Marge ein */
    height: 450px!important; /* Feste Höhe für alle Spalten */
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: flex-end; /* Text nach unten ausrichten */
    color: white;
    overflow: hidden; /* Verhindert, dass der Hover-Effekt über die Grenzen hinausgeht */
    margin-right: 15px; /* Abstand zwischen den Spalten */
    border-radius: 5px;
    min-height: 450px; /* Falls die Slides keine Höhe haben */
    }

.bg-fade-column:last-child {
    margin-right: 15px; /* Entfernt die rechte Marge der letzten Spalte */
    }

.text-content {
	position: absolute;
	bottom: 20px;
	left: 15px;
	right: 30px;
	z-index: 2;
	text-align: left;
    color: white;
 	}
       
.text-content span {
	background: white;
	padding: 5px;
	border-radius: 5px;
	font-family: 'soehne-buch'; 
	font-size: 10px;
	font-weight: 900;
	color: black;
	}
	
/*.ueber-uns .text-content h2 {font-size: 40px!important; line-height: 40px!important;}*/
.text-content a {font-family: 'soehne-buch'; color: white!important; text-decoration: underline; letter-spacing: normal!important; }
.text-content a:hover {color: white; text-decoration: none!important;}
	    

.bg-fade-column h2 {
    margin-bottom: 15px!important;
    }

.bg-fade-column h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    }

.bg-fade-column p {
    font-size: 1rem;
    line-height: 1.5rem;
    }
    
.content-slider .swiper-pagination {
  position: relative !important;
  margin-top: 30px!important; /* Abstand zum Swiper */
  text-align: center;
  }
  
/* Angepasste Dots (Pagination) */
.content-slider .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 0.5 !important;
  }

.content-slider .swiper-pagination-bullet-active {
  background-color: #000 !important;
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
  }

/* Anpassungen für Desktop Geräte */  
@media (min-width: 1024px) {
  #content_hzw0aglre,  
  #column_mje4abzjk,
  #column_5xne9p2dr,
  #column_vh81jhgyw,
  #row_xtpdb31rk {
    display: none!important;
  }
}
  
 /* Anpassungen für mobile Geräte */
@media (max-width: 600px) {
	
.mobile_logo {
   font-size: 15px!important; 
   line-height: 19px!important; 
   }
	
.front-accordion ul {
   display: flex;  
   flex-wrap: wrap;
   margin-left: 0px!important;
   border-radius: 4px;
   padding: 15px!important;
   background: #ECECEC;
   }
	
.front-accordion ul li {
   font-family: 'soehne-buch'!important; 
   display: inline;
   border-radius: 4px;
   background: none;
   padding: 0px 15px 0px 0px;
   margin-right: 5px;
   margin-bottom: 6px!important;
   font-size: 18px!important;
   line-height: 26px;
   color: #181818;
   white-space: normal; /* Verhindert das Umbruch von Wörtern */
   -moz-hyphens: none;
   -o-hyphens: none;
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none!important;
   }

  /* Titel mit Abstand */
  .front-accordion .description,
  .front-accordion .accordion-item .title-span {
    margin-left: 50px; /* Abstand für den Titel */
	}	

/*Desktop Navigation ausblenden*/	
  .custom_logo,
  #column_rdvuti4ur,
  #column_ssq27r7h5, /*Kontakt Button Desktop Navigation*/
  #content_ekao4v5de, /*Backnavigation no Desktop Link*/
  #column_cqrpqm8qi,  /*Dekstop Navigation Container*/
  #column_u7rdlrw3z,
  #column_hnrmsgv81,
  #column_v5pc07soh,
  #column_par413sc3 {display: none!important;}
  /*Ende*/ 
  
  .text-align-left p {text-align: left!important;}

}	

/*Ende*/
	

/* Custom CSS End */