/* Allgemein */

@font-face {
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrap-icons.woff2") format("woff2"),
       url("../fonts/bootstrap-icons.woff") format("woff");
}
@font-face {
  font-family: "Figtree";
	font-weight:300;
  src: url("../fonts/Figtree-Light.ttf") format('truetype');
       
}
@font-face {
   font-family: "Figtree";
	font-weight:400;
  src: url("../fonts/Figtree-Regular.ttf") format('truetype');
}
@font-face {
  font-family: "Figtree";
	font-weight:500;
  src: url("../fonts/Figtree-Medium.ttf") format('truetype');
}
@font-face {
  font-family: "Figtree";
	font-weight:600;
  src: url("../fonts/Figtree-SemiBold.ttf") format('truetype');
}
@font-face {
  font-family: "Figtree";
	font-weight:700;
  src: url("../fonts/Figtree-Bold.ttf") format('truetype');
}

@font-face {
  font-family: "Manrope";
	font-weight:400;
  src: url("../fonts/Manrope-Regular.ttf") format('truetype');
}
@font-face {
  font-family: "Manrope";
	font-weight:600;
  src: url("../fonts/Manrope-SemiBold.ttf") format('truetype');
}
@font-face {
  font-family: "Manrope";
	font-weight:700;
  src: url("../fonts/Manrope-Bold.ttf") format('truetype');
}
:root {
	--color-light: #F0EDE1;
	--color-highlight:#FE934F;
	--color-grey:#4B4C56;
	--color-turquoise:#1E656D;
	--color-orange:#FE934F;
	--color-white:#ffffff;
}
body{
  color:var(--color-grey) !important;
  font-family: "Figtree";
  /*font-size:clamp(20px, 2vw + 1rem, 30px);*/
	font-size: clamp(16px, 1vw + 0.8rem, 30px);
}


.text-grey{
  color:var(--color-grey) !important;
}


h1{
  font-family: "Figtree";
   font-weight:700;
	  text-transform: uppercase;
}
h2{
 font-weight:700;
  text-transform: uppercase;
	color:var(--color-white);
}
h3{
 font-weight:700;
  text-transform: uppercase;
	color:var(--color-white);
}
.fw-500{
 font-weight:500;
}
.fw-600{
 font-weight:600;
}
.borderStyling{
 border-radius: 2rem;
}
.hero-container{
  width: 1320px;       /* set your container width */
  height: 700px;      /* set your container height */
  overflow: hidden;   /* hide overflow if image is bigger */
  position: relative; /* optional if you need positioning */
}
.herobild{
	width: 100%;
  height: 100%;
  object-fit: cover;  /* fills container, cropping if necessary */
  object-position: center; /* center the image (default) */
}


.custom-h1 {
  font-size: clamp(40px, 8vw, 80px);
	font-weight:700;
	color:var(--color-grey);
}

.custom-h2 {
  font-size: clamp(34px, 6vw, 60px);
	font-weight:700;
	color:var(--color-grey);
}

.text-gross{
  font-size: 34px;
  font-weight: 500;
}
.main-heading{
 font-size: clamp(3rem, 4vw + 1rem, 5.5rem);
 line-height:1.2;
 font-weight: 700;
  text-transform:uppercase;
}

.bg-light{
 background-color:var(--color-light) !important;
}
.text-highlight{
 color:var(--color-highlight) !important;
}
.bg-turquoise{
 background-color:var(--color-turquoise) !important;
}
button{
  background-color:var(--color-turquoise) !important;
	color:#fff !important;
	padding: 10px 30px !important;
}

.btn{
 padding: .375rem 2rem;
 text-transform:uppercase;
 border-radius: 12px;
 padding: 1rem 3rem;
}

.nav-item a{
 color:var(--color-grey) !important;
 font-weight:600;
 font-size: clamp(18px, 3vw, 25px);
}
a.link {
 color:var(--color-orange) !important;
 text-decoration:none;
}
.rounded-start {
  border-bottom-left-radius: 1rem !important;
  border-top-left-radius: 1rem !important;
}
/*h0, h1,h2,h3,h4,h5,h6{
 color:var(--color-grey) !important;
}*/
.btn{
 font-weight:700;
 font-size: clamp(18px, 3vw, 25px);
}
.btn-primary{
  background-color: var(--color-orange);
  border-color:var(--color-orange);
}
.btn-primary:active,.btn-primary:focus,.btn-primary:hover{
  background-color: var(--color-orange);
  border-color:var(--color-orange);
}
.hover-opacity-100:hover {
  opacity: 1 !important;
}
.transition {
  transition: opacity 0.3s ease;
}


/* accordian */
.accordion-button{
 background-color:#fff !important;
 color:var(--color-turquoise) !important;
 font-weight:500 !important;
 font-size:3rem;
}
.accordion-button:focus{
 box-shadow: none;
 }

/* card */

.card{
  border-radius:1.6rem;

}

.card-body {
  border-radius: 0 0 1.6rem 1.6rem;
}

/*###### Header Text ######*/



/*###### Hamburger-Icon ######*/
.hamburger {
	box-shadow: none;
	display: flex;
	transition: opacity .15s linear, filter .15s linear;
}
.no-js .hamburger {
	display: none;
}
.hamburger .hamburger-box {
	height: 1.5rem;
	width: 2.5rem;
}
.hamburger .hamburger-inner, .hamburger .hamburger-inner::before, .hamburger .hamburger-inner::after {
	background-color: var(--bs-primary);
	border-radius: .25rem;
	height: .25rem;
	position: absolute;
	transition: transform .15s ease;
	width: 2.5rem;
}
.hamburger .hamburger-inner::before, .hamburger .hamburger-inner::after {
	content: "";
	display: block;
}
.hamburger .hamburger-inner {
	margin-top: -.125rem;
	top: 50%;
	transition-duration: .22s;
	transition-timing-function: cubic-bezier(.55, .055, .675, .19);
}
.hamburger.active .hamburger-inner {
	transform: rotate(225deg);
	transition-delay: .12s;
	transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}
.hamburger .hamburger-inner::before {
	top: -.625rem;
	transition: top .1s .25s ease-in, opacity .1s ease-in;
}
.hamburger.active .hamburger-inner::before {
	opacity: 0;
	top: 0;
	transition: top .1s ease-out, opacity .1s .12s ease-out;
}
.hamburger .hamburger-inner::after {
	bottom: -.625rem;
	transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19);
}
.hamburger.active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1);
}
a {
  color: var(--color-grey);
}
a:hover{
  color: var(--color-orange);
}


#call-to-action{
 font-family:Manrope;
 
}
#call-to-action .title{
 font-weight:600;
 font-size: clamp(18px, 2vw, 25px);
}
#call-to-action h3{
  font-weight:700;
}

.footer-item{
 font-weight:400 !important;

}
.secondfooter{
  font-size:16px;
}
.jahratrate{
   font-weight:700;
 }
#footernav{
  font-weight:500;
	
}
#footernav a{
 color:#4B4C56;
}
#footernav a:hover,#footernav a.active{
 color:var(--color-highlight) !important;
}


.mySwiper {
  width: 100%;
	position: relative; /* make sure the container is positioned */
}
.swiper-wrapper {
  position: relative;
}  

/* Keep swiper slides clipped */

.swiper-wrapper {
  height: auto !important;
}


.swiper-slide {
	margin-top: 0 !important; /* cancels out the wrong spacing */
  display: flex;
  align-items: flex-start; /* or center or stretch depending on your design */
  justify-content: center;
  height: auto; /* Avoid Swiper forcing a height */
}

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* optional */
	border-radius: 2rem;
}
.swiper-button-next, .swiper-button-prev{
 color:var(--color-orange);

}
.card-img-top {
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.image-hover {
  position: relative;
  overflow: hidden;
  display: inline-block;
	border-radius: 2rem;
}

.image-hover img {
  transition: transform 0.4s ease;
}

.image-hover:hover img {
  transform: scale(1.05);
}

.img-overlay {
  position: absolute;
  inset: 0; /* shorthand for top, right, bottom, left = 0 */
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;

}

.image-hover:hover .img-overlay {
  opacity: 1;
}

.overlay-text {
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
}
.navbar-nav .nav-link.active{
	position: relative;
  text-decoration: none;
  color: #000;
 /* padding: 10px 0; */
}
.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 10px;
  width: 40px;
  height: 3px;
  background-color: var(--color-orange);
}

footer .navbar-nav .nav-link.active::after{
 display:none;
}
.big-icon {
  font-size: 1.5rem;
}


/* leistungen flipcards 
.flip-container .flip-back {
  display: none;
}

.flip-container:hover .flip-front {
  display: none;
}

.flip-container:hover .flip-back {
  display: block;
}*/

.flip-card {
  perspective: 1000px;
  width: 100%;
}
.flip-card .card-footer{
  margin-top: auto;       /* push footer to bottom */
  min-height: 120px;       /* set a base height */
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
	padding-left:2rem;
 font-weight:600 !important;
}
.flip-card .card-footer h3, .flip-card-back .card-body h3{
  font-weight:600 !important;
}



.flip-card-inner {
  position: relative;
  display: grid;          /* _ makes children stack */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}


.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  grid-area: 1 / 1;       /* _ overlap front & back */
  backface-visibility: hidden;
  border-radius: 2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
	font-size: 25px !important;
  font-weight: 500;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card-back ul {
  padding-left: 1.5rem;
}
/* Custom teal color (adjust if you want Bootstrap's standard) */
.bg-teal {
  background-color: #0b6b75;
}

.swiper-controls {
  display: flex;
  justify-content: center;
  gap: 180px;
  margin-top: 31px;
}

.swiper-controls .swiper-button-prev,
.swiper-controls .swiper-button-next {
  position: relative;
  top: auto;
  bottom: auto;
	z-index: 10;
}

.swiper-pagination-bullet-active{
 background: var(--color-orange);
}
.swiper-pagination{
 z-index: 5;
}




@media (min-width: 992px) {
  .hero-display-image {
    position: relative;
    z-index: 99;
    right: -25%;
  }
	.p-6{
		 padding: 6rem !important;
	}
	.py-6{
	  padding-top:6rem !important;
		padding-bottom:6rem !important;
	}
  h0{
	  font-size:5.5rem ;
	}
  .aboutus{
	 min-height: 600px;
	}
	
}
@media (min-width: 1200px) {
 h3 {
    font-size: 1.6rem !important;
  }
 .ms-lg-6{
	 margin-left:4rem;
	}
 .mb-6{
	  margin-bottom:6rem !important;
	}
	.mb-7{
	 margin-bottom:10rem !important;
	}

}
@media (min-width: 1400px) {
	.negative-top-margin{
		margin-top: -11rem;
	}
}