:root {
    --safarishit: 80px;
    --doc-height: 100vh;
    --safarishit: calc(100vh - var(--doc-height));
}


@media (prefers-color-scheme: dark) {

  #geschichten div.swiper-slide a:hover div.txt {
    filter: brightness(120%) contrast(120%) !important;
  } 

}


html,
.container {
  background-color: #000;
}

section.headline {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  border-radius: 40px;
}

section.headline > div.header {
  flex-basis: 30%; 
}

section.headline > div.hero {
  flex-basis: 70%; 
}

section.headline h1 {
  width: auto;
  margin: 0;
  padding: 3rem 0 1rem 0;
  border: 0;
  text-align: center;
  color: rgb(var(--yellow));
}

section.headline h2 {
  font-family: var(font-text);
  margin: 0;
  padding: 0 0rem 5rem 0rem;
  font-size: 3em;
  line-height: 1em;
  font-weight: normal;
  text-align: center;
  color: var(--whites);
}

section.headline div img {
  display: block;
  margin: 0rem auto;
  padding-top: 3rem;
}


section.headline div.hero {
  border-radius: 0 0 40px 40px;
  background-position: center top;
  background-size: cover;
}



section.text.intro {
  background: rgb(var(--yellow));
  padding: 8rem 4rem;
  margin-bottom: 0;
  border-radius: 40px;
}

section.text.intro p {
  color: var(--blacks);
  text-align: left;
  padding: 2rem 0 0 0;
  text-indent: 0;
  font-size: 1.5rem;
  hyphens: none;
  -webkit-hyphens: none;
}

section.text.intro p.ini {
  font-size: 16rem;
  line-height: 1em;
  color: var(--blue);
  padding: 0rem 6rem 1rem 2rem;
}









#geschichten div.swiper-slide {
  background: rgba(0,0,0,0);
}

#geschichten div.swiper-slide a {
  background: none;
  position: relative;
  padding: 0;
  display: flex;
  aspect-ratio: 2.5 / 1;
  border-radius: 40px;
}

#geschichten div.swiper-slide:nth-child(even) a {
  flex-direction: row-reverse;
}

#geschichten div.swiper-slide a > div {
  flex-basis: 50%;
}

#geschichten div.swiper-slide a:hover {
    cursor: none;
}

#geschichten div.swiper-slide div.pic {
  border-radius: 40px 0 0 40px;
  padding: 2rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#geschichten div.swiper-slide:nth-child(even) div.pic {
  border-radius: 0 40px 40px 0;
  text-align: right;
}

#geschichten div.swiper-slide div.txt {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0 40px 40px 0;
  position: relative;
  transition: all 0.2s;
}

#geschichten div.swiper-slide:nth-child(even) div.txt {
  border-radius: 40px 0 0 40px;
}

#geschichten div.swiper-slide div.txt p {
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1.3em;
}

#geschichten div.swiper-slide div.txt h2 {
  padding: 0 0 0rem 0;
  margin-bottom: 0rem;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--white);
  font-size: 3rem;
  line-height: 1em;
}

#geschichten div.swiper-slide div.txt h3 {
  padding: 0rem 0 0 0;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--white);
  opacity: 0.6;
  letter-spacing: 0.01em;
  line-height: 1em;
}

#geschichten div.swiper-slide div.pic h4 {
  font-family: var(--font-text);
  padding: 0;
  margin: 0;
  font-size: 2em;
  line-height: 60px;
  background: var(--white);
  display: inline-block;
  width: 60px;
  height: 60px;
  color: var(--black);
  border-radius: 100px;
  text-align: center;
  font-weight: 900;
}


footer {
  padding: 4rem 1rem 3rem 1rem;
}

footer a.button {
  font-size: 1.8rem;
  border: 10px solid var(--white);
}


div#cursordiv {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 502;
  pointer-events: none;
  color: var(--blue);
  background: rgb(var(--yellow));
  font-family: var(--font-text);
  font-weight: 900;
  text-transform: uppercase; 
  font-size: 2rem;
  padding: 0.6rem 2rem 0.8rem 2rem;
  display: none;
  transform:translate(-50%,-50%);
  cursor: none;
  backface-visibility: hidden;
  border-radius: 100px;
}


#swipeleft {
  display: none;
}





@media only screen and (min-width: 770px) {

 
  #geschichten.swiper {
    position: static;
  }

  div.swiper-wrapper {
    display: inline;  
  }
  
  #geschichten:hover div#cursordiv {
    display: block;
    cursor: none;
  } 

  #geschichten div.swiper-slide a::after {
    box-sizing: border-box;
    content: '';
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    border: 0px solid rgb(var(--yellow));
    transition: all 0.2s;
    border-radius: 40px;
  } 

  #geschichten div.swiper-slide a:hover::after {
    border: 8px solid rgb(var(--yellow));
  }  

  #geschichten div.swiper-slide a:hover div.txt {
    filter: brightness(80%) contrast(250%);
  }   
}









@media only screen and (max-width: 770px) {

  html {
    overflow: hidden;
    height: 100vh;
  }
  
  body {
    margin: 0;
    overflow: scroll;
    height: 100vh;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
  }

  section,
  footer {
    scroll-snap-align: start;
  }
  
  section.headline div img {
    width: 80px;
    padding-top: 2rem;
  }

  section.headline h1 {
    font-size: 2.3em !important;
    padding-top: 2rem;
  }

  section.headline h2 {
    font-size: 1.5em;
    padding: 0 0 4rem;;
  }


  section.hero {
    height: 30vh;
  }
  
  section.text.intro {
    padding: 1rem;
  }
  
  section.text.intro p {
    font-size: 1.1rem;
    line-height: 1.4em;
    padding: 0 0 2rem 0;
  }
  
  section.text.intro p.ini {
    padding-top: 0;
    font-size: 8rem;
    padding: 0;
    margin: 0 auto;
  }




  
  #geschichten { 
    margin: 0 auto;
    width: 100%;
    height: calc(100vh - var(--safarishit));
    
    /*max-height:  100vh - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0);*/
    height: var(--doc-height);
    
  }

  #geschichten div.swiper-slide {
    padding-top: 20px;
  }
  
  #geschichten div.swiper-slide a {
    flex-direction: column;
    aspect-ratio: auto;
    height: 100%;
  }

  #geschichten div.swiper-slide:nth-child(even) a {
    flex-direction: column;
  }  

  #geschichten div.swiper-slide a > div {
    flex-basis: 50%;
    flex-grow: 1;
  }

  #geschichten div.swiper-slide div.pic {
    border-radius: 40px 40px 0 0;
    padding: 1rem;
  }

  #geschichten div.swiper-slide:nth-child(even) div.pic {
    border-radius: 40px 40px 0 0;
    text-align: left;
  }

  #geschichten div.swiper-slide div.txt,
  #geschichten div.swiper-slide:nth-child(even) div.txt {
    padding: 1rem;
    border-radius: 0 0 40px 40px;
  }

  #geschichten div.swiper-slide div.txt p {
      font-size: 1.1rem;
      line-height: 1.4em;
  }

  #geschichten div.swiper-slide div.txt h2 {
    padding: 0 0 0rem 0;
    margin-bottom: 3rem;
    font-size: 2rem;
  }

  #geschichten div.swiper-slide div.pic h4 {
    font-size: 1.3em;
    line-height: 50px;
    width: 50px;
    height: 50px;
  }


  .swiper-horizontal>.swiper-pagination-progressbar, 
  .swiper-pagination-progressbar.swiper-pagination-horizontal, 
  .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, 
  .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 96%;
    height: 10px;
    margin-left: 2%;
    left: 0;
    top: 5px;
    border-radius: 40px;
    background: rgb(var(--yellow));
    overflow: hidden;
  }


  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--blue);
    border-radius: 40px !important;
  }


  .swiper-horizontal>.swiper-pagination-bullets, 
  .swiper-pagination-bullets.swiper-pagination-horizontal, 
  .swiper-pagination-custom, 
  .swiper-pagination-fraction {
    top: 0;
    height: 20px;
  }

  .swiper-pagination-bullet {
    width: 9%;
    height: 10px;
    display: inline-block;
    border-radius: 0px;
    background: var(--whites);
    opacity: 1;
    overflow: hidden;
    z-index: 1;
  }  

  .swiper-pagination-bullet:first-child {
      border-radius: 20px 0 0 20px;
  }  
 
  .swiper-pagination-bullet:last-child {
      border-radius: 0 20px 20px 0;
  }  
  
  .swiper-pagination-bullet-active {
    background: rgb(255,255,255);
    position: relative;
  } 
  
  .swiper-pagination-bullet-active:first-child {
    background: rgb(200,0,0);
  }  

  .swiper-pagination-bullet-active:nth-child(2) {
    background: rgb(0, 172, 110);
  }

  .swiper-pagination-bullet-active:nth-child(3) {
    background: rgb(69, 55, 41);
  }

  .swiper-pagination-bullet-active:nth-child(4) {
    background: rgb(85 90 45);
  }

  .swiper-pagination-bullet-active:nth-child(5) {
    background: rgb(250 155 45);
  }

  .swiper-pagination-bullet-active:nth-child(6) {
    background: rgb(0 151 140);
  }

  .swiper-pagination-bullet-active:nth-child(7) {
    background: rgb(190 70 15);
  }

  .swiper-pagination-bullet-active:nth-child(8) {
    background: rgb(255 190 21);
  }

  .swiper-pagination-bullet-active:nth-child(9) {
    background: rgb(171 31 25);
  }

  .swiper-pagination-bullet-active:nth-child(10) {
    background: rgb(195 20 100);
  }


  .swiper-pagination-bullet-active.anim::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background: #fff;
    position: absolute;
    right: 0;
    animation: buller 5s 1 linear;
}
  
  @keyframes buller{
      from {
          transform: translateX(-100%);
      }
      to{
          transform: translateX(0%);
      }
      
    }

  
  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 1px 0 0;
  }

  .container {
    padding-bottom: var(--safarishit);
  }
  
  footer a.button {
    margin-bottom: 1rem;
  }


  #swipeleft {
    display: block;
    position: absolute;
    top: 40%;
    left: 80%;
    z-index: 200;
    opacity: 0;
    transition: all 0.5s;
  }

  #swipeleft span {
    display: block;
    position: relative;
    left: -50%;
    color: var(--blue);
    background: rgb(var(--yellow));
    font-weight: 900;
    text-transform: uppercase; 
    font-size: 1.5rem;
    padding: 0.6rem 2rem 0.6rem 2rem;
    border-radius: 100px;    
    margin: 0 auto;
    overflow: hidden;
    z-index: 1000;
  }  

 #swipeleft.in {
    left: 50%;
    opacity: 1;
  }    

 #swipeleft.out {
    left: 00%;
    opacity: 0;
  }  

  #swipeleft span::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    left: 0;
    background: linear-gradient(100deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0) 80%);
  
    animation: shimmer 2s infinite linear;
}
  
@keyframes shimmer{
    from {
        transform: translateX(200%);
    }
    to{
        transform: translateX(-200%);
    }
    
  }
  
}


@supports(padding:max(0px)) {
    footer {
        /*
      padding-bottom: min(1rem, env(safe-area-inset-bottom));
      
        padding-bottom: env(safe-area-inset-bottom);
      
      padding-top: min(0vmin, env(safe-area-inset-top));      
      padding-left: min(0vmin, env(safe-area-inset-left));
      padding-right: min(0vmin, env(safe-area-inset-right));
      */
    }
}