/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*Colors---------------------------------------------------------*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
main, #feedback2, .white1-diagonally, .white2-diagonally {background-color:#FFF;}
section#heroShot, #cta, .black-diagonally{ background-color:#000;}
section#portfolio,#sVideo, .yellow-diagonally, #sFaq{ background-color:#f9b030;}
section#feedback1, section#feedback1 .slider-container, section#feedback1 .slider-button{ background-color:#f9b030;}
#slider,  #feedback2, #sFaq {color:rgb(17, 24, 39);}
h1, #s4, #cta, section#heroShot p{ color:#FFF;}

.lpCTAc{ color:#000; background-color:#f9b030; }
.lpCTAi{ color:#000; background-color:#FFF}
.lpCTAb{ color:#fff; background-color:#000}
/*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;}
.fName{ font-style:italic; font-size:0.85em; font-weight:600;}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*Buttons--------------------------------------------------------*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.lpCTAc, .lpCTAi, .lpCTAb  {
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;*/
border-radius:8px;
font-weight:600;
}

.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;
}

h3{
margin-bottom:10px;
}


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

p{
margin-bottom:10px;
}

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

.flexBoxCol, section#s4, #cta{
	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;
	padding-top:20px;
	}
}


/*---------------------------------------------------------------*/
/*Section heraoshot----------------------------------------------*/
/*---------------------------------------------------------------*/
.heroShot-cont{
display: flex;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
gap:30px;
}


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

/*---------------------------------------------------------------*/
/*Section portfolio----------------------------------------------*/
/*---------------------------------------------------------------*/

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


/*---------------------------------------------------------------*/
/*Section benefit------------------------------------------------*/
/*---------------------------------------------------------------*/
#s-benefit{
background-color: #000;
color: #FFF;
}



#s-benefit h2{ text-align:center; margin-bottom:50px;}

.benefit-wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
align-items: stretch;   /* <-- WICHTIG! */
gap:80px;
}

.benefit{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: center;
max-width:300px;
/* min-height:400px; */
}

.benefit{
    flex: 1 1 300px; /* Element darf schrumpfen und wachsen */
    margin: 0 auto;  
}

.benefit, .benefit p{
max-width:300px;

}

.benefit img{ width:auto; height:65px;}

.s-benefit-soa{
display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  align-content: center;
  text-align: center;
}
.s-benefit-soa img{
width: 100%;
height: auto;
}

@media only screen and (max-width: 800px) {/*Mobil*/
.benefit-wrapper{gap:40px;}
#s-benefit h3{margin-top:0; margin-bottom:10px;} 
.s-benefit-soa{text-align: left;}
}

/*---------------------------------------------------------------*/
/*Section Feedback slider 1 und 2--------------------------------*/
/*---------------------------------------------------------------*/
section#feedback2{ text-align:center;}


section#slider h2{padding-left:calc( 20% )} 

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

.slider-container {
  width: 1080px;
  height: auto; /* original 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;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
}

.slider-dots .dot {
/*.slider-dot {*/
  width: 15px;
  height: 15px;
  background: #ccc;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
}

.slider-dots .dot.active {
  background: #333;
}

/*
.slider-dot.active {
  background: #333;
  transform: scale(1.2);
}
*/
@media only screen and (max-width: 800px) {/*Mobil*/
section#feedback2{ text-align:left;}
	section#slider h2{padding-left:0px;} 
	.slider-wrapper { width:100%}
	.slider-container {height: auto; /* original300px;*/}
	.slider-button{ display:none} 
	.slide1, .slide2{padding:0px 10px;}
}

/*---------------------------------------------------------------*/
/*Section Ablauf-------------------------------------------------*/
/*---------------------------------------------------------------*/
section#s-ablauf{max-width: 100%; padding-left:30px; padding-right:30px;}

.ablauf-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-content: center;
}


.ablauf {
  position: relative;
  width: 100%;
  /*max-width: 384px;*/   /* oder entfernen, wenn es flexibel sein soll */
  aspect-ratio: 3 / 3.4; /* sorgt für 300x400 Verhältnis auch ohne feste Höhe */
  overflow: hidden;
  /*flex: 1 1 384px; Error*/ /* Element darf schrumpfen und wachsen */
  margin: 0 auto;  
}


.ablauf img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Bild füllt den Rahmen schön aus */
  display: block;
  border-radius:0px;
}

.ablauf-txt {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0px; /*20px*/
	width: 100%;
	height: 43%; /* ca. 60% Abdeckung */
	bottom: 0;
	left: 0;	
	background: rgba(0, 0, 0, 0.6); /* 10% Transparenz-Schleier */
	padding: 20px;
	box-sizing: border-box; /* <-- WICHTIG */
}

/* Optional: Text besser lesbar machen */
.ablauf-txt h3,
.ablauf-txt p {
 /* padding: 20px;*/

  color: #fff; /* ggf. auf weiß (#fff) umstellen je nach Bild */
}


@media only screen and (max-width: 800px) {/*Mobil*/
section#s-ablauf{padding-left:8px; padding-right:8px;}
.ablauf-txt { font-size:0.8em;}
.ablauf-txt {height: auto; gap: 0px; padding: 20px 8px 20px 8px;} /*10px;*/
}

@media (max-width: 900px) {
  .ablauf-wrapper {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 600px) {
  .ablauf-wrapper {grid-template-columns: 1fr;}
}

/*---------------------------------------------------------------*/
/*Section 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;
}

@media only screen and (max-width: 800px) {/*Mobil*/
	#sVideo .sVideo-txt{text-align:left}
}

/*---------------------------------------------------------------*/
/*Section CTA----------------------------------------------------*/
/*---------------------------------------------------------------*/
section#cta{ text-align:center}
section#cta p{ max-width:800px;}

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



/*---------------------------------------------------------------*/
/*Section s-zielgruppe-------------------------------------------*/
/*---------------------------------------------------------------*/
section#s-zielgruppe{
display: flex;
     flex-direction: column;
	 gap:30px;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
     align-content: center;
}

section#s-zielgruppe p {font-size:22px;}
section#s-zielgruppe .lpCTA{ color:#FFFFFF; background-color:#0033FF;}

/*---------------------------------------------------------------*/
/*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: 0px 0px;
  font-size: 18px;
  font-weight: bold;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 0px;
  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 0px;
}

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

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

/*---------------------------------------------------------------*/
/* diagonale Verläufe--------------------------------------------*/
/*---------------------------------------------------------------*/

.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, .white1-diagonally{ display:none; }
}


.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 s4 - songaufn-prof.php---------------------------------*/
/*---------------------------------------------------------------*/
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;}
}


/*---------------------------------------------------------------*/
/*Section soundcloud songaufn-prof.php---------------------------*/
/*---------------------------------------------------------------*/
#ssondcloud .sc-placeholder { margin-top:50px;  width:100%; text-align:center;}