*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: black;
}


/* Navigation */


.sub {
  height: 8vh;
  width: 100vw;
  
  position: fixed;
  top: 0;
  z-index: 1000;
  /* background-color: black; */
}

.logoS {
  height: 8vh;

  position: absolute;
  top: 0vh;
  left: 6vw;
}


.sandwich{
  width: 3.8%;
  height: 1.4vh;
  position: absolute;
  top: 3.5vh;
  right: 2.8vw;

  display: flex;
  justify-content: space-between;
}

.lineS {
  border-radius: .4rem;
  background-color: rgb(250, 237, 7);
  height: 100%;
  flex:0 0 28%;

  transition: flex .6s ease-in-out;
}

.dotS {
  border-radius: .4rem;
  background-color: rgb(250, 237, 7);
  height: 100%;
  flex: 0 0 62%;

  transition: flex .6s ease-in-out;
}

.sandwich:hover .lineS{
  flex: 0 0 62%;
}

.sandwich:hover .dotS{
  flex: 0 0 28%;
}




/* Spalten Layout */

.faq-container {
  height: 92vh;
  margin-top: 8vh;
  font-size: 3rem;
  display: flex;
  flex-direction: column;
}


.faq-item {
  overflow-y: scroll;
  position: relative;
  transition: flex 1.5s ease;
  border-radius: 2.8rem;



  position: relative;
}


.faq-item:nth-child(1) {
  background-color: rgb(234, 108, 169);
  flex: 1.5;
}

.faq-item:nth-child(2) {
  background-color: rgb(101, 99, 233);
  flex: 2.5;
}

.faq-item:nth-child(3) {
  background-color: rgb(255, 148, 57);
  flex: 4;
}

.large {
  flex: 1 !important;
}

.small {
  flex: 0 !important;
}



/* Einzelne Spalte */


.question {
  z-index: 100;
  color: black;
  Text-wrap: Balance;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 6vw;
  line-height: .9em;
  letter-spacing: -.3rem;
  Text-wrap: Balance;

  padding-top: 8vh;
  padding-bottom: 4.5vh;
  margin: 0;
  opacity: 0;

  transition: opacity .4s ease-in-out;
} 




.faq-item-wrapper{
  padding: 0vh 5.6vw 0 6vw;
}



.read-more{
  padding: 0vh 0rem 6vh 0rem;
  opacity: 0;
  transition: opacity .4s ease-in-out;
  position: relative;
  z-index:10;
}

.faq-item:hover .read-more, .open .read-more {
  opacity: 1;
}

.open .read-more {
  padding: 3vh 0rem 6vh 0rem;
} 

.content {
  position: relative;
  z-index: 1;
  text-wrap: balance;
  color: black;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 2.5vw;
  letter-spacing: -0.02em;
  line-height: 1.2em;
  margin: 0;
  max-width: 90%;
}


.text{
  color: black;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 2.5vw;
  letter-spacing: -0.04em;
  margin: 0;
  text-decoration: none;
}


.eins .read-more, .eins .question{
  background-color: rgb(234, 108, 169);
}

.zwei .read-more, .zwei .question{
  background-color: rgb(101, 99, 233);
}

.drei .read-more, .drei .question{
  background-color: rgb(255, 148, 57);
}



.faq-item .question,
.faq-item .read-more {
  position: sticky;
  /* background-color: red; */
  margin: 0;
}

.faq-item .question {
  top: 0;
}


.faq-item .content p {
  margin: 0;
}

.content {
  display: none;
}


.read-more {
  bottom: 0;
  margin: 0;
  display: block;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.read-more .arrow {
  opacity: 0;
  width: 3.5% ;
  rotate: 180deg;
  animation: arrowJump 1s ease-in-out infinite;
}


@keyframes arrowJump {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.read-more .text {
  opacity: 1;
  transition: opacity .5s ease;
}

.open .read-more .arrow {
  opacity: 1;
}


/* Style Text */


.kursiv{
  font-style: italic;
}

.text-underlined {
  text-decoration: underline black;
}


.small-quotation{
  font-style: italic;
}


.box-underline{
  position: relative;
  background-color: rgb(101, 99, 233);
  border-radius: 1.2rem;
  padding: .1vh .8vw;
}

.box-underline-2{
  position: relative;
  background-color: rgb(255, 148, 57);
  border-radius: 1.2rem;
  padding: .1vh .8vw;
}


.box-underline-3{
  position: relative;
  background-color: rgb(234, 108, 169);
  border-radius: 1.2rem;
  padding: .1vh .8vw;
}


/* Flex Animationen: */

.drei:hover {
  flex: 4;
}
.drei:hover ~.eins {
  flex: 1.5;
}.drei:hover ~.zwei {
  flex: 2.5;
}



.zwei:hover {
  flex: 4;
}

.faq-container:has(.zwei:hover) .drei {
  flex: 2.5;
}
.faq-container:has(.zwei:hover) .eins {
  flex:1.5;
}



.eins:hover {
  flex: 4;
}

.faq-container:has(.eins:hover) .zwei {
  flex: 2.5;
}
.faq-container:has(.eins:hover) .drei {
  flex:1.5 ;
}


/* Hover Animation  */



.eins .text:hover{
  text-decoration: underline black;
  text-underline-offset: 5px;
}

.zwei .text:hover{
  text-decoration: underline  black;
  text-underline-offset: 5px;
}


.drei .text:hover{
  text-decoration: underline  black;
  text-underline-offset: 5px;
}


/* Code Add on */

.faq-item:hover .q1,
.open .q1 {
  opacity: 1;
}

.faq-item:hover .q2,
.open .q2 {
  opacity: 1;
}

.faq-item:hover .q3,
.open .q3 {
  opacity: 1;
}