/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*Colors---------------------------------------------------------*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
main, #s6, .white1-diagonally, .white2-diagonally{background-color:#FFF;}
section#heroShot, #s2, #s7, .black-diagonally{ background-color:#000;}
section#s1,#sVideo, .yellow-diagonally, #sFaq{ background-color:#f9b030;}
#slider,  #s6, #sFaq {color:rgb(17, 24, 39);}
h1, #s2, #s4, #s7 { color:#FFF;}



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*Fonts----------------------------------------------------------*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
section, section a{font-weight:400;}
section, section a{font-size:18px;}
h1, h2{font-weight:600;} /*#lpHl entfernt 29.03.2025 */
h1 {font-size:34px;}
h2 {font-size:28px;}
#s4{ font-size:22px;}
.tName{ font-style:italic;}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*Buttons--------------------------------------------------------*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.lpCTA {
display:inline-block;
width:auto;
height:auto;
margin-top:0px;
margin-bottom:0px;
margin-left: auto;
margin-right: auto;
padding:15px;
text-decoration: none;
white-space: nowrap;
background-color:#fff; 
color:#333;

border-radius:8px;
}

.lpCTA:hover {
border:2px solid #0044cc; 
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*Position allgemein---------------------------------------------*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
body, input, p, span, ul {
margin:0px;
padding:0px;
border-width:0px;
}


li{list-style-type: none;}

section{
max-width:1400px;
height:auto;
padding-left:120px;
padding-right:120px;
padding-top:60px;
padding-bottom:60px;
}

h2{
margin-bottom:20px;
}

a{
cursor:pointer; 
text-decoration:none;
}

p{
margin-bottom:10px;
}

.flexBox, #heroShot, #s1{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap:60px;
	align-items: start;
	align-content: center;
}

.flexBoxCol, section#s2, section#s4, #s7{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap:30px;
	align-items: center;
	align-content: center;		
}

img{border-radius:10px;}

@media only screen and (max-width: 800px) {/*Mobil*/
	.lpCTA {
	width:100%;
	max-width:400px;
	white-space: wrap;	
	box-sizing: border-box;
	overflow: hidden;
	text-align:center;
	}

	section{
	padding-left:8px;
	padding-right:8px;
	}
}


/*---------------------------------------------------------------*/
/*Section heraoshot----------------------------------------------*/
/*---------------------------------------------------------------*/

@media only screen and (max-width: 800px) {/*Mobil*/
	section#heroShot{ flex-direction: column;}	
	section#heroShot img{width:100%;height:auto;}
}

/*---------------------------------------------------------------*/
/*Section s1-----------------------------------------------------*/
/*---------------------------------------------------------------*/


@media only screen and (max-width: 800px) {/*Mobil*/
	section#s1{ flex-direction: column;}	
	section#s1 img{width:100%;height:auto;}
}

/*---------------------------------------------------------------*/
/*Section s2-----------------------------------------------------*/
/*---------------------------------------------------------------*/
section#s2 p{ width:1080px; text-align:center;}

@media only screen and (max-width: 800px) {/*Mobil*/
	section#s2 p{ width:100%; text-align:left;}
	section#s2 img{width:100%;height:auto;}	
}

/*---------------------------------------------------------------*/
/*Section slider-------------------------------------------------*/
/*---------------------------------------------------------------*/
section#slider h2{padding-left:calc( 20% )} 
@media only screen and (max-width: 800px) {/*Mobil*/
	section#slider h2{padding-left:0px;} 
}
/*---------------------------------------------------------------*/
/*Section s4-----------------------------------------------------*/
/*---------------------------------------------------------------*/
section#s4 h2, section#s4 p { max-width:800px; text-align:center;}
section#s4{
background: linear-gradient(360deg, rgba(0, 0, 0, 0.76) 100%, #fff 100%), url(../assets_ps/soaV1/people-singfactory.webp) no-repeat;
}

@media only screen and (max-width: 800px) {/*Mobil*/
section#s4 h2, section#s4 p { width:100%; text-align:left;}
}

/* Verlauf-------------------------------------------------------*/
.yellow-diagonally {height: 100px; clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);}
.white1-diagonally {height: 100px; margin-top: -100px; z-index: -1;}

@media only screen and (max-width: 800px) {/*Mobil*/
.yellow-diagonally {height: 40px; clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);}
}

/*---------------------------------------------------------------*/
/*Video----------------------------------------------------------*/
/*---------------------------------------------------------------*/
section#sVideo{ text-align:center; font-size:18px; }
.video-container {
    position: relative;
	margin-top:20px;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
	border-radius:8px;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;	
}

.video-container img{
width:100%;
height:auto;
cursor:pointer;
}

.video-wrapper{
margin-left:auto;
margin-right:auto;
max-width:800px;
}

/*---------------------------------------------------------------*/
.white2-diagonally {height: 100px;clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);}
.black-diagonally { height: 100px; margin-top: -100px; z-index: -1;}
@media only screen and (max-width: 800px) {/*Mobil*/
.white2-diagonally {height: 40px;clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);}
}


/*---------------------------------------------------------------*/
/*Section s6-----------------------------------------------------*/
/*---------------------------------------------------------------*/
#s6 .sc-placeholder { margin-top:50px;  width:100%;text-align:center;  }

.slide2 .slide-content{ text-align:center;}
/*---------------------------------------------------------------*/
/*Section s7-----------------------------------------------------*/
/*---------------------------------------------------------------*/
section#s7{ text-align:center}
section#s7 p{ max-width:800px;}

@media only screen and (max-width: 800px) {/*Mobil*/
section#s7{ text-align:left}
section#s7 p{width:100%;}
}
/*---------------------------------------------------------------*/
/*Section sFaq---------------------------------------------------*/
/*---------------------------------------------------------------*/
.faq-item {
  /*background: #fff;*/
  border-radius: 8px;
  margin-bottom: 10px;
 /* border: 1px solid #ddd;*/
  border-bottom: 1px solid #777;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: bold;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-size: 16px;
  color: #333;
  transition: max-height 0.2s ease, padding 0.2s ease;
}

.faq-item.open .faq-answer {
  max-height: 200px; /* groß genug für 2–3 Zeilen */
  padding: 16px 20px;
}

.arrow {
  transition: transform 0.3s ease;
  font-size: 18px;
}

.faq-item.open .arrow {
  transform: rotate(180deg); /* Pfeil nach oben */
}

/*---------------------------------------------------------------*/
/*Slider-------------------------------------------------*/
/*---------------------------------------------------------------*/
.slider-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slider-container {
  width: 1080px;
  height: 200px;
  overflow: hidden;
  background: white;
 /* border: 1px solid #ccc;*/
  border-radius: 10px;
  position: relative;
}

.slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide1, .slide2  {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  padding: 20px;
  box-sizing: border-box;
}

.slider-button {
  background: rgba(255, 255, 255, 0.4);
  color: black;
  border: none;
  font-size: 30px;
  padding: 12px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}

.slide-content {
  max-width: 800px;
}
@media only screen and (max-width: 800px) {/*Mobil*/
	.slider-wrapper { width:100%}
	.slider-container {height: 300px;}
}