@media (max-width: 749px) {

.top {min-height: 200px;}
	
#slideshow { display: block !important; }
	
.outer {
	position: relative !important;
	padding-top: 20px;
}
    
#banner-fade{    
	margin-bottom: 13vh !important;
	margin-top: 0 !important;
	height: 80vh !important;
}
    
#banner-fade img { height: 100% !important; }

.bjqs h2 { font-size: 31px !important; }
    
.caption-inner {
	width: 140px !important;
	margin-left: -48px !important;
	padding: 20px 20px 20px 60px !important;	    
    }
    
.caption-over {
     width: 80% !important;
     right: 15% !important;
     }

.logo-responsive {
	left: unset !important;
	margin-left: 0 !important;
	display: block;
    }   
    
.top .logo-responsive img {
	display: block !important;
    }  
    
.large {
	width: 200px !important;
    top: 30px !important;
    right: 30px;
    height: auto !important;
    }
    
.small {
	width: 100px !important;
	top: 0px !important;
	right: 0 !important;
	background-color: #ffffff;
	padding: 5px !important;
    }
 
    
.footer-inner {
	width: 100%; 
	padding: 0 !important;
	text-align: center;
	min-height: 0 !important;
	margin: 0 !important;
    }
  
.footer-inner a img {
	width: 100%; 
    }
	
.footer-inner p img {
	width: 60%; 
	margin-bottom: 10px;
    }
  
.footer-outer {
	width: auto !important;
	padding: 10px 5% !important; 
	display: block !important;
	position: unset !important;
	margin: 0 !important;
    }
  
.bottom {
	height: auto !important; 
	background-color: #fcc94d;
	background-position: center;
	background-image*: none; background-position: left bottom;
	padding-top: 10px;
	min-height: 430px;
	}

.flyout .nav {
    margin-top: -0 !important;
    z-index: 5000 !important;  
  }

.nav-toggle { background: #e73e2a url("/statimages/hamburger.gif") no-repeat scroll center center; }
  
.flyout .nav ul li a { color: #fff !important; background-color: none !important; width: 80% !important;}
.flyout .nav ul ul li a { color: #000000 !important; }
  
.flyout .nav > ul > li > a:hover, .flyout .nav > ul > li.act > a, .flyout .nav > ul li ul > li > a:hover, .flyout .nav > ul li ul > li.act > a {
	background-color: #e73e2a !important;
    }
  
.flyout .nav > ul {
    padding-left: 15px !important;
    padding-top: 15px !important;
    }  
	
	.nav ul {
		background-color: #e73e2a !important;
	}
	.nav.opened li a {
    background-color: unset !important;
		line-height: 30px !important;
	}
	
	/*
	.fixed-navi ul {
  padding: unset !important;
width: unset !important;
height: unset !important;
}
	*/

h1 {font-size: 30px;} 
h2 {font-size: 30px;}
h3 {font-size: 20px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 18px;}

.sprachwahl { right: 10px; margin-right: auto; }

	.kids {
width: 160px !important;
		top: 200px;
	}
	
	.anfragebutton{
		left: 2vw;
top: 72vh;
		z-index:3000;
	}
	
	div.eobp div {
  width: unset;
  max-width: unset;
}
    
    

/*** Menu **/

.flyout .nav .nested1 {
	width: 100%;
	float: left;
	height: 100%;
}
.flyout .nav .nested1{
	position: relative;
	height: 100%;
}
/*
.flyout .nav .nested1{
	font-size: 15px;
	font-weight: 300;
   padding: 50px 20px 0px 95px; 
}*/
.flyout .nav ul ul ul {
	display: none;
}
.flyout .nav ul ul {
	padding: 0;
}
.flyout .nav ul {
  list-style: none;
}

.nav > ul li {
	width: 100%;
	padding: 5px;
  /* grid-column: span 4; */
}
.nav > ul li > a {
	text-transform: uppercase;
	font-size: 20px;
	line-height: 100%;
	hyphens: auto;
}

.nav > ul ul li {
	width: 100%;
	padding: 2px;
 /* grid-column: unset; */
}
.nav > ul ul li > a {
	text-transform: lowercase;
	font-size: 16px !important;
padding-left: 25px !important;
}


.nav  .nested1 .showsub {
  height: 40px;
  width: 40px;
  background-image: url('/upmedia/downarrow.svg');
  cursor: pointer;
  background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position:  relative;
top: -35px;
	display: block;
  margin-bottom: -40px;
  float: right;
}

.flyout .nav > ul {
  padding-left: 5% !important;
  padding-top: 70px !important;	
	left: 0px;
  padding-right: 5% !important;
    padding-bottom: 70px !important;
  width: 90% !important;
}
.flyout .nav ul {transform: unset;top: unset !important;}

.nav ul {
  display: block;
  position: absolute !important;
/*	background-color: #4b7454 !important; */
}
.flyout .nav li {
  position:  relative !important;
}
.flyout .nav ul ul {
	position: relative !important;
	display: none;
}

.nav ul li, .nested1 {
			border-bottom: 1px solid #fff;

		}
.nav ul ul li {
			border-bottom: 0px solid #fff;
    float: left;
		}

  .flyout .nav ul ul {
 /* columns: 90vw; */
  }

   .flyout .nav ul ul .last {
   margin-bottom: 10px !important;
  }


.showsub {transform: rotate(0deg);transition: 1s ease;}
.turnaround {transform: rotate(180deg) !important;transition: 1s ease;}


.exces {background: url("/upmedia/exit.gif") no-repeat scroll center center !important;}


    

}
    
    
    
/* -------------------- Allgemeine CSS ------------------------------------------------------------- */

@media (max-width: 1500px)  and (min-width: 749px) { 
	
	.kids {
top: 42vw !important;
width: 20% !important;
	}
	
.CONTENTSLIDE img {
    min-width: 100vw;
    max-width: 100vw;
}
	
	
	.fixed-navi ul {
		width: 60% !important;
	}
	.flyout .nav a {
		font-size: 12px;
	}
	
	.flyout .nav ul ul {
		height: auto;}
	
	.txt41 h3 a {
		font-size: 16px;
	}
	
	.anfragebutton {top: 65px;}
}


@media (max-width: 500px) { 
	
	.kids {
width: 44% !important;
top: 35vw !important;
	}
	
}


@media (max-width: 950px) { 
	
	.inner {
		width: 100% !important; min-width: unset !important;
	}
	.footer-outer {
    width: 90% !important;
}
	
	.small {
    width: 95px;
    margin-left: -50%;
	}
	.large {
	margin-left: -40vw;
	}
	
}
@media (max-width: 950px) and (min-width: 749px) {

.flyout .nav ul {
    width: 80%;
    padding: 40px 10% 5px 10%;
}
	.fixed-navi ul {
   padding: 21px 4% 5px 18% !important;
width: 80% !important;
height: 40px;
}

}



@media (min-width: 749px) { 
	
	
	
}


/** ----------------------------------- NEUE CSS 2026 ----------------------------------- **/


/** -------------------- Horizontaler Scrollabschnitt -------------------- **/
   		 /* Tool funktioniert NUR DANN wenn KEIN voranstehendes/übergeordnetes Element overflow hidden hat. */
		.wrapper {overflow: unset !important;}
        
        #horizontal-breakout {
            /* Deine Breakout-Logik */
            width: 100vw;
            left: calc(50% - 50vw);
            position: relative;
            max-width: unset !important;
            background-color: #fcc94d; 
			margin: 4% 0;
        }
     #horizontal-breakout h1, #horizontal-breakout h2, #horizontal-breakout h3,
      #horizontal-breakout h4, #horizontal-breakout h5, #horizontal-breakout h6 
      {color:#272727; padding-top: 5%;}
      
        #horizontal-breakout .scroll-target {
            position: relative;
            /* * Diese Höhe bestimmt, wie lange der Abschnitt angepinnt bleibt.
             * 400vh bedeutet: Man muss 4x die Bildschirmhöhe scrollen, um ans Ende zu gelangen. 
             */
            height: 400vh; 
        }

        #horizontal-breakout .sticky-container {
            /* Der native Sticky-Effekt ersetzt die Locomotive-Wrapper */
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden; 
        }

        #horizontal-breakout .track {
            display: flex;
            gap: 2rem;
            padding: 0 5vw; 
            width: max-content;
            align-items: top;
            will-change: transform; /* Hardware-Beschleunigung für das softe Easing */
           max-width: unset;
        }
		#horizontal-breakout .boxborder {
			width:400px;
			height:auto;
		}
      #horizontal-breakout .container {
        text-align: center;
        margin: 2% 0px;
		}
        #horizontal-breakout .container .text {
       text-transform: uppercase;
  		font-size: 28px;
		}
        #horizontal-breakout .bildbox {
     margin-bottom: 2%;
         height: 50vh;
      }
        #horizontal-breakout .bildbox img {
      width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
      }
      
@media (max-width: 749px) {
      #horizontal-breakout .boxborder {
  width: 80vw;
      }
      
      #horizontal-breakout .bildbox {
      height: 55vh;
      }
    }
    
@media (min-width: 749px) and (max-width: 950px) { 
      #horizontal-breakout {
	left: -5%; !important;
	min-width: 110%;
	}
    }  

/** -------------------- Ende Horizontaler Scrollabschnitt -------------------- **/



/* -------------------- Accordeon styling Layout 29 --------------- */
.layout29 {
        position: relative;
}

/* Accordeon styling */
 .accordeon {}

.accordeon label.accordeonheadline, .accordeon label {
    display: block;
  padding: 14px;
  font-weight: 700;
  font-size: 1.2em;
 /* background: #e6e6e6; */
  color: #515151;
  cursor: pointer;
  border-bottom: 2px solid #626262;
	margin-bottom: 0px;
	background: #fff;
}
.accordeon label.accordeonheadline h1 {
	color: #515151;
	margin-bottom: 0px;
	font-size: 18px;
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
}
 .accordeon label.accordeonheadline:hover h1, .accordeon label.accordeonheadline:active h1{
	  color: #fff;
}
 .accordeon label.accordeonheadline:hover, .accordeon label.accordeonheadline:active {
	background: #515151;
  color: #fff;
}

.accordeon label.accordeonheadline:before, .accordeon label:before {
	content: '^';
  display: inline-block;
  padding: 0 0px 0 10px;
  transform: scale(0.9) rotate(180deg);
}

.accordeon .panel {
    height: 0;
    visibility: hidden;
    opacity: 0;
 background: #fff;
margin-bottom: 5px;
}

/* Hide checkboxes and radio-buttons */
.accordeon input[type="radio"], .accordeon input[type="checkbox"] {
    display: none;
}
/* Show .panel for corresponding to checked radio or checkbox */
 .accordeon input[type="radio"]:checked + .panel, .accordeon input[type="checkbox"]:checked + .panel {
    height: auto;
    visibility: visible;
    opacity: 1;
    padding: 1.5em 0px;
	 margin-bottom: 4%;
}

.accordeon .layout29images {
    display: flex;
    gap: 2%;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;    
}

.accordeon .layout29images .layout29image {
    flex: 1 1 100%;
}

/* Text unter den Bildern soll immer die volle Breite einnehmen */
.accordeon .panel p {
   width: 96%;
  margin-top: 10px;
  padding: 0 2%;
}

/* -------------------- Ende Accordeon styling Layout 29 --------------- */


/* -------------------- Scheinbar endloser logoslider --------------- */


@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-160px * 7));
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-160px * 7));
  }
}
.logos .slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 140px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
    margin-top: 4%;
}
.logos .slider::before, logos .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 140px;
  position: absolute;
  width: 100px;
  z-index: 2;
}
.logos .slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.logos .slider::before {
  left: 0;
  top: 0;
}
.logos .slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(100px * 14);
}
.logos .slider .slide {
 height: 100%;
  width: fit-content;
  margin: 1%;
}
  
  .logos .slide img {
 height: 100px;
  width: auto;
  object-position: center;
  display: flex;
  }