/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
/*-----------Hauptfarbe anpassen-----------*/ :root {
	--bs-primary: #007c3c;
    --bs-secondary: #007c3c;
	--bs-hover: #d9d1c2;
	--bs-buttontext: #fff; /*Farbe Buttontext. Auf nötigen Kontrast zur Hintergrundfarbe achten.*/
	--swiper-theme-color: var(--bs-primary) !important;
	--bs-background: #ffffff;
	--bs-fontcolor: #555555;
    --bg-beige: #d9d1c2;;
}

/*-----------Burger-Menü – STROKE ÄNDERN! %23 steht für #-----------*/
#header .navbar-light .navbar-toggler-icon, #header.scrolled .navbar-dark .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24' stroke='%23007c3c' /%3E%3C/svg%3E")
}
#header-wrap, #top-bar, body, html {
	background-color: var(--bs-background);
}
body, html, h1, h2, h3, h4, h5, h6, #top-bar .top-links a, #mainnav ul.nav.navbar-nav li.nav-item a.nav-link, #footer ul.listfooter > li > a {
	color: var(--bs-fontcolor);
}
#header.position-fixed {
	top: 40px !important;
}

section .section-title h1::after, section .section-title h2::after, section .section-title h3::after, section .section-title h4::after {
    width: 200px;
    height: 3px;
    background: var(--bs-primary)
}

.btn-slide { 
    font-size: 0.7rem;
}

.btn-slide:hover {
    background-color: var(--bs-hover);
    border-color: var(--bs-hover);
}

#start h1 {
    color: #fff;
    font-weight: 700;
    line-height: 1.1;
}




#header #nav.navbar.navbar-dark #mainnav ul.nav.navbar-nav li.nav-item a.nav-link {
    color: #000
}


/*----- Top-Bar mit Kontaktinfos ausblenden -----*/
#top-bar {height: 0px; min-height: unset; overflow: hidden;	visibility: hidden;}
#header.position-fixed {top: 0 !important; border-bottom: none;}


/*----- Mobil Nav -----*/
@media (max-width: 991.98px) {
    #nav.navbar #mainnav > ul.nav.navbar-nav {
        background-color: #FFFFFF;
    }
    #header #nav.navbar.navbar-dark #mainnav ul.nav.navbar-nav li.nav-item a.nav-link {
    color: var(--bs-fontcolor);
         display: block;
        height: auto;
        height: 46px;
        line-height: 46px;
        width: 100%;
        padding-left: 15px;
        padding-right: 10px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
        text-align: left !important;
        transition: none;
        border-bottom: 1px solid #E5E5E5;
}
}

@media (min-width: 992px) {
    #mainnav.stroke ul.navbar-nav li a.nav-link:after, #mainnav.fill ul.navbar-nav li a.nav-link:after {
        height: 2px;
    }    }

/*----- Logo & logo Mobil -----*/

@media (max-width: 991px) {
    #logo img, #footer img.footer-logo {
        width: auto;
        height: 80px ;
    }
    
}

#logo img {
    height: 170px;
}

	#header.transparent-header.scrolled #logo img {
     height: 80px;   
}
    




/*----- Start / Header Beireich -----*/

.header-cut {
      background:  var(--bs-primary);
 
}

.header-cut p {
      color:#fff;
 
}

@media (max-width: 768px) {
    .header-content {
        margin-right: 0;
        padding: 30px 20px;
    }
}
@media (max-width: 768px) {
    .header-content {
        order: 1;
    }
}
.header-content {
    order: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px;
    position: relative;
    z-index: 2;
}
.header-pic{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 768px;
}
.header-text {
    color: var(--bs-fontcolor);
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 450px;
    margin-bottom: 2rem;
}

.header-img {
    order: 1;
    flex: 1;
    min-width: 150px;
}

.header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
    background: black;
    display: block;

}
/* Mobile Optimierung */
@media (max-width: 768px) {
  .header-pic{

    grid-template-columns: 1fr;
    height: 768px;
}
.header-content {
    order: 1;
    
}
    .header-img {
        order: 0;
        flex: 1;
        min-width: 150px;
        height: 400px;
    }
        .header-img img {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%); /* Kante nun unten */
       

    }
}



.pit-accordion-content strong {
    color: var(--bs-primary);
    font-weight: 400;
}









.usp-bio img{ width: 100px;

}


.parallax-2 {
	text-align: center!important;
}

.parallax, section.parallax {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;

}

.pit-accordion:not(.pit-accordion-active) button:after {
    content: "+";
    line-height: .75;
    color: #007c3c;
}






/*----- aktuelles Slider -----*/
.slide-angebote {  
  width: 100%;
  font-family: sans-serif;
  background-color: var(--bg-beige);
}

.banner-figure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 450px;
    margin: 0; /* Reset browser default */
    overflow: hidden;
}

.swiper-slide figure {
    margin-bottom: 0px;
    height: 500px;
}
.swiper-wrapper .swiper-slide {
    height: 100%;
     display: block;
   
}

/* 1. The Angled Separator Logic */
.banner-content {
    order:0;
  flex: 1;
  /*! background-color: var(--bg-beige); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 50px;
  position: relative;
  z-index: 2;
  /* This creates the slanted edge on the right */
  /*! clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); */
 
}

.angebote-img {
    order: 1;
    flex: 1;
    min-width: 150px;
}




.angebote-img img {
  width: 100%; /* Ensuring balance in the flex container */
  height: 100%;
  object-fit: cover;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 1;
  background: black;
  display: block;
}

/* 2. Typography & UI Elements */
.angebote-title {
    color: var(--bs-fontcolor);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  max-width: 500px;
}


.angebote-text {
    color: var(--bs-fontcolor);
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 450px;
  margin-bottom: 2rem;
}

.angebote-text-2 {color: var(--bs-fontcolor);
  font-size: 0.5rem;
  line-height: 1.6;
  max-width: 450px;
  margin-bottom: 2rem;

}


/* 3. Mobile Responsiveness (Text Last) */
@media (max-width: 1274px) {
    .banner-figure {
    grid-template-columns: 1fr;
}
    .banner-content {
    order:1;
  
}

.angebote-img {
    order:0;
    flex: 1;
  min-width: 150px;
}
   .swiper-slide figure {
    margin-bottom: 0px;
    height: 610px;
} 
    
  .slide-angebote {
    flex-direction: column; /* Places text block below the image */
  }
 .banner-content {
    margin-right: 0;
    padding: 30px 20px;
  }

  .angebote-img {
    height: 300px;
  }
  .angebote-img img {
    
    clip-path: none; /* Remove slant on mobile */
  }

  .angebote-title {
    font-size: 1.8rem;
  }
}



  

.pit-accordion-active button {
    background: #193f1b;
    color: #fff;
}
/*-----.sortiment-klapp {
    background-color:var(--bg-beige) ;
    color: #fff; 

}-----*/



.hoverbox .hoverbox-details .hoverbox-title {
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 0em;
    text-transform: none;
}


/*----Job-Angebote ---*/


.job-img {
    width: 150px;
    height: auto;
    padding-top: 5.6rem;
    
}
#jobs #cardsliderfullscreen {
        position: relative;
    }

.testimonal{
   font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.5;
    padding: 20px;
}

@media (min-width: 768px) {
    #jobs #cardsliderfullscreen {
        position: relative;
    }
}

#jobs .swiper-slide figure {
    height: fit-content; }

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    right: auto;
    width: 100vw;
    transform: translate(-25vw, 0);
}

@media (max-width: 1800px) {
    #jobs .banner-content {
    order: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    position: relative;
    z-index: 2;
}
.testimonal{
    padding: 0px;
}

}

@media (max-width: 767px) {
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    transform: translate(0, 0);
}
#jobs .swiper-buttons {
    display: none;
}

#cardsliderfullscreen .swiper-pagination {    bottom: auto;}
.testimonal{
   font-size: 1.3rem;
    line-height: 1.5;
}

}






.hoverbox-text {
    line-height: 1.5 rem;
}

#copyrights {
    background-color:  var(--bs-primary);
    color: #fff;
}
#copyrights ul.metanavigation > li > a {
    color: #fff;
    border-right: 2px solid #fff;
}
#copyrights p.agentur a.logo {
    content: url(../images/planit-logo.svg);
}

#copyrights ul.metanavigation > li.active > a, #copyrights ul.metanavigation > li > a:hover {
    text-decoration: none;
    color: #000;
}

/*----- Mobilmenü: Kompletter Navigationspunt (komplette Breite) klappt Subnavigation aus -----*/
/*@media (max-width: 991px) {
#mainnav .mobile-toggle, #mainnav .mobile-toggle.openmenu {
	width: 100% !important;
	z-index: 2;
    pointer-events: auto;}
	
#mainnav .nav .dropdown-toggle {width: 0px;
    position: absolute;
    z-index: 1;
    pointer-events: none;}
	
}*/

/*----- Header-Image: Wenn mobil mehr Text verwendet wird, einblenden und height ändern; Bildausschnitt- mit object-position ändern -----*/

/*@media (max-width:575px){ 
    .header-image .img-fluid {
        height: 600px;
        object-position: -700px;
    }
}*/

section {max-width: 100vw;}
#cardsliderfullscreen {overflow: hidden;}


@media (min-width: 992px) {
	
	nav:not(.scrolled) #mainnav {opacity: 0; visibility: hidden; pointer-events: none;}
	
	
	
}

@media (max-width: 991px) {
	#header:not(.scrolled) #header-wrap > .container{
		filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));}
	
}

.swiper-buttons.container {pointer-events: none;}
.swiper-buttons.container * {pointer-events: auto;}

.btn {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .25));
}

@media (max-width: 575px) {
	#kontakt fieldset > .row {margin-bottom: 0;}
	form .form-label, #frmContact .form-label {display: none;}
}

    #cardsliderfullscreen.aktionen {
		overflow: hidden !important}
			
@media (min-width: 768px) {
    #cardsliderfullscreen.aktionen {
        min-height: 725px;
        box-sizing: content-box;
    }
}


.row.usps {
    justify-content: center;
}