body {
  --height: 18vh;
  margin: 0;
  background: rgb(0, 0, 0);
  transition: padding 1s ease-in-out;
}



/* Nav-Zeile */



.logo {
  width: 43rem;
  position: fixed;
  top: -.1vh;
  left: 5.7vw;
  z-index: 1000;
}

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

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

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

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

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

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

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

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


/* Pop-Up Struture */


main {
  height: calc(100vh - var(--height));
  /* background: yellow; */
  transition: height 1s ease-in-out;
}


.footer {
  height: 20vh;
  position: relative;
}

.expand {
  padding-top: var(--height);
}


/* Datenschutz */



.popTextWrapper {
  height: 100%;
  width: 100%;
  display: flex;
}

.rechte {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;

}


.rechte a {
  font-family: 'Poppins';
  font-weight: 300;
  font-size: 1.2vw;
  line-height: 1.2em;
  color: #C3C3C3;
  text-decoration: none;
}

.rechte a:hover {
  color: white;
}

.matomo {
  width: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matomo span {
  max-width: 55ch;
  font-family: 'Poppins';
  font-weight: 300;
  font-size: 1.2vw;
  line-height: 1.2em;
  color: #C3C3C3;
  margin: 0;
  padding-right: 20vw;
}

#matomo-opt-out {
  display: flex;
  align-items: start;
  gap: 0.5em;
}



/* Timer */

.timer {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
}

.bar {
  background: rgb(250, 237, 7);
  width: 0px;
  height: 3px;
  border-radius: .5rem;

  animation: timer 5s linear forwards;
}

@keyframes timer {
  to {
    width: 100%
  }
}



/* Main-Spalten */


.spalten {
  height: 100%;
  width: 100%;

  display: flex;
}


.spalte {
  border-radius: 2.8rem;
  position: relative;
  display: block;
  overflow: hidden;

  transition: flex 2s ease-in-out;
}


.links {
  flex: 1;
}


.mitte {
  flex: 3;
}

.rechts {
  flex: 7;
}



.mitte:hover {
  flex: 7;
}

.mitte:hover~.links {
  flex: 1;
}

.mitte:hover~.rechts {
  flex: 2;
}


.links:hover {
  flex: 7;
}

.spalten:has(.links:hover) .mitte {
  flex: 3;
}

.spalten:has(.links:hover) .rechts {
  flex: 1;
}


.rechts:hover {
  flex: 7;
}

.spalten:has(.rechts:hover) .links {
  flex: 1;
}

.spalten:has(.rechts:hover) .mitte {
  flex: 3;
}


/* Img Hover */

.links .oben:hover .hover-img{
  opacity: 70%;
}

.links .unten:hover .hover-img{
  opacity: 70%;
}

.mitte .oben:hover .hover-img{
  opacity: 70%;
}

.mitte .unten:hover .hover-img{
  opacity: 70%;
}

.rechts .oben:hover .hover-img{
  opacity: 40%;
}

.rechts .unten:hover .hover-img{
  opacity: 70%;
}




/* Main-Zeilen */


.oben {
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  height: 85%;
  border-radius: 2.8rem;
  transition: height 1.5s ease-in-out;
  overflow: hidden;
}

.heute{
  height:25%;
}


.hover-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0%;
  transition: opacity .8s ease-in-out;
}

.unten {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  height: 100%;
  overflow: hidden;
}



.spalte:has(.unten:hover) .oben {
  height: 25%;
}


.heute:hover{
  height: 85%;
} 



.links .oben {
  background-color: rgb(234, 108, 169);
} 

.links .unten {
  background-color: rgb(214, 90, 149);
}


.mitte .oben {
  background-color: rgb(101, 99, 233);
}

.mitte .unten {
  background-color: rgb(74, 72, 198);
}


.rechts .oben {
  background-color: rgb(255, 148, 57);
}

.rechts .unten {
  background-color: rgb(245, 140, 50);
}



/* Tag tags */


.links .div {
  /* pointer-events: none; */
  /* display: flex; */
  justify-content: center;
}


.mitte .div {
  /* pointer-events: none; */
  /* display: flex; */
  justify-content: center;
}

.rechts .div {
  /* pointer-events: none; */
  /* display: flex; */
  justify-content: center;
}

.tag {
  font-size: 1.5vw;
  font-family: 'Poppins';
  font-weight: 600;
  position: absolute;
  margin: 0;
  bottom: 1rem;
  right: 1.8rem;
}






/* Handy Layout */


.handy {
  display: none;
}

@media (max-width:500px) {

  main,
  footer {
    display: none;
  }

  .expand {
    padding-top: 0;
  }

  .handy {
    width: 100%;
    height: 100%;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;

    display: flex;
    flex-direction: column;
  }

  .navH {
    height: 7%;
    width: 100%;
  }

  .logoH {
    height: 100%;
    padding-left: 8vw;
  }


  .zeilenH {
    height: 93%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .rosaH {
    background-color: rgb(214, 90, 149);
    width: 100%;
    height: 56%;
    border-radius: 2.5rem;

    display: flex;

    align-items: center;
  }

  .HaH {
    text-wrap: balance;
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 16vw;
    line-height: 1em;
    letter-spacing: -0.05em;

    margin: 0;
    padding-left: 8vw;
  }

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


  .blauH {
    background-color: rgb(101, 99, 233);
    width: 100%;
    height: 28%;
    border-radius: 2.5rem;

    display: flex;

    align-items: center;

  }

  .pH {
    text-wrap: balance;
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 8.5vw;
    line-height: 1em;
    letter-spacing: -0.05em;

    margin: 0;
    padding-left: 8vw;
  }



  .orangeH {
    background-color: rgb(255, 148, 57);
    width: 100%;
    height: 16%;
    border-radius: 2.5rem;

    display: flex;
    align-items: center;
  }


  .StartH {
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 8.5vw;
    letter-spacing: -0.05em;

    position: absolute;
    padding-left: 8vw;
    margin: 0;
  }

  .DatumH {
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 8.5vw;
    letter-spacing: -0.05em;

    position: absolute;
    right: 8vw;
    margin: 0;
  }

}