.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 80vh;
  _max-height:800px;
  container: heroContent / inline-size;
  /* neu */
  background-image: url(/files/gui/semmel_startscreen.png);
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index:0;
}
.hero-section:after {
  content:'';
  background-color:#00000050;
  position:absolute;
  left:0;
  top:0;
  width:100vw;
  height:100%;
  animation: logo_reveal 2.0s forwards;
  animation-iteration-count: unset;
  animation-direction: alternate;
}
@keyframes logo_reveal {
  0% {
    background-color:#000000;
  } 
  20% {
    background-color:#000000;
  }  
  100% {
    background-color:#00000010;
    
  }
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
  opacity:0;
  transition: all .5s ease-in-out;
}
.hero-section:has(.slide.active) .slider{
  opacity:1;
}

.slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1;
  height:100%;
  width:100vw;
  align-items: top;
  position: absolute;
  top: 0;
  left: -100vw;
  _left:0px;
  opacity: 1;
  transition: all .5s ease-in-out,
              opacity 0.2s ease-in-out, 
              left .7s ease-in-out, 
              z-index 0.2s, 
              width 1s ease-in-out; 
  transition-delay: .35s;
              
}

.slide.active {
    width:100vw!important;
    left:0px;
    z-index:999;
    transition: all .5s ease-in-out,
                opacity 0.2s ease-in-out, 
                left .5s ease-in-out, 
                z-index 0.2s ease-in-out, 
                width 1s ease-in-out;
    _transform: scaleX(100%); 
    _transition-delay: .6s; 
}

.slide .full_width_link {
  width: 100%;
  _height:100%;
  left:0;
  _position: absolute;
  display: flex;
  justify-items: center;
  justify-content: center
}
/*   cubic-bezier(0.090, 0.110, 1.000, 0.080)  */
.hero-section .active {
  _left: 0;
  _opacity: 1;
  _z-index:999;
}
/*

> slide slide0 active
  > content
    > caption
      >sliderspan
    > button-layer
      > a - button red slider
      > button-hover-text
      
*/
    
      
.slider a .content{
  max-width: 1920px;
  padding:30px;
  z-index:99999;
  container: sliderContent / inline-size;
  /* neu */
  width:100%;
}

.slide .content{
  top: auto;
  bottom: 5vh;
  _left: 0;
  position: absolute;
  transition: all 1.4s ease-in-out 0s;
  width:auto;
  max-width: 1920px;
  position: relative; 
  padding: 0px 30px;
}

.slide .content .caption {
  left: -100%;
  transition:all .5s cubic-bezier(.3,1.32,.93,1.03);
  transition-delay: .3s;
  position: relative;
}
.slide.active .content .caption {
  left: 0;
}
.slide .content .button-layer {
  left: -100%;
  width:100%;
  _transition: all .6s ease-in-out 2s;
  _position: relative;
}
.slide.active .content .button-layer {
  left: 0px;
}

/*
.slide.active .content{
  left: 0%;
  transition: all 1.4s ease-in-out 1s;
}
*/




.slider-image {
    width:100%; height:100%;
}
.slider-image {
  z-index:1;
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 1;
  width: 100%;
  height: 100%;
  background-position: cover;
  background-size: cover;
  background-color: aliceblue;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.slider-image > img {
  width:auto;
  height:100%;
}


/*  ------------------------------- SLIDER NAV --------------------------------  */

.bullets {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  z-index:2000;
}
.bullets li {
  width: 30px;
  height: 4px;
  background-color: #ccc;
  border-radius: 0%;
  margin: 0 5px;
  cursor: pointer;
}
.bullets li.active {
  background-color: #333;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border-radius:100rem;
  z-index: 2;
}
.arrow.prev {
  left: 10px;
}
.arrow.next {
  right: 10px;
}


.arrow {
    position: absolute;
    top: 50%;
    width: 5vw;
    height: 5vw;
    min-width:40px;
    min-height:40px;
    max-width: 60px;
    max-height: 60px;
    cursor: pointer;
    background-color: var(--hero-transparent-bg);
    z-index: 9999;
    _transition:all .6s ease-in-out;
}
.arrow:after {
  transition:all .7s ease-in-out;
}
.arrow:hover {
  background-color: var(--semmel-red);
  transition:all .3s ease-in-out;
}

.arrow:hover:after {
    _width:40%;
    _height:40%;
    _margin:30%;
    transform: scale(.5);
}
.prev {
  left: 0px;
}
.prev:after{
    content:url("/files/gui/semmel-gui-pfeil-links.svg");
    opacity: 1;
    display: block;
    width:60%;
    height:60%;
    margin:20%;
}
.next {
  right: 0px;
}
.next:after{
    content:url("/files/gui/semmel-gui-pfeil-next.svg");
    display: block;
    opacity: 1;
    width:60%;
    height:60%;
    margin:20%;
}



@container heroContent (min-width: 300px){
    .slider {height:684px;
    }
    .arrow.prev {left:0px;}
    .arrow.next {right:0px;}
    .slide .content{
      bottom:4vh;
    }
    
    .bullets {
      display: none;
    }
    
}
@container heroContent (min-width: 550px){
    .slider {_height:684px; }
    .slide .content{
      bottom:6vh;
    }
}
@container heroContent (min-width: 800px){
    .slider {_height:684px;}
    .arrow.prev {left:10px;}
    .arrow.next {right:10px;}
    
    .slide .content{
      bottom:15vh;
    }
    .bullets {
      display: flex;
    }
}
@container heroContent (min-width: 1600px){ 
    .slider {_height:900px;}
    .slide {    
    }
    .slide .content{
      bottom:7vh;
    }
}




@media only screen and (max-width: 799px) {
    .slide .slider-image.desktop {display:none;}
    .slide .slider-image.mobil {display:flex;}
    .slider, .hero-section {
        height:auto;
        aspect-ratio: 1/1;
    }
}
@media only screen and (min-width: 800px) {
    .slide .slider-image.desktop {display:flex;}
    .slide .slider-image.mobil {display:none; }
    .slider, .hero-section {
        height:650px;
        _aspect-ratio:unset;
        transition: all .5s ease-in-out;
    }
}
@media only screen and (min-width: 2200px) {
    .slider, .hero-section {
      height:900px;
      transition: all .5s ease-in-out;
    }
}
@media only screen and (min-width: 2900px) {
    .slider, .hero-section {
      height:1200px;
      transition: all .5s ease-in-out;
    }
}

a.slider_link_area {
  position: absolute;
  width: 100vw;
  height: 100%;
  background: #00000050;
  top:0;
  left:0;
}


/* ---------------   MORE BUTTON  -------------------*/



.slide .content .button {
    width: auto; 
    height:var(--button-size); 
    min-width:var(--button-size)!important; 
    border-radius:30px;  
    position:absolute;
    top:0;
    left:0;
    background-color: var(--semmel-red);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    _animation: buttonAnimation 8s linear infinite;  
    background-color: var(--semmel-red); 
}

.slide .content .button-layer{
    _overflow:hidden;
    padding: 0;
    transition:all .5s cubic-bezier(.3,1.32,.93,1.03);
    transition-delay: .7s;
    position: relative;
    display: flex;
    align-content: left;
    flex-direction: row;
    align-items:center;
    margin-top:1.5vh;
    max-width:80vw;
    padding-right:0px;  
    min-width: var(--button-size);  
    _display: inline;
}
.slide.active .content .button-layer{
  width:100%;
  _padding-right:0px;
  _background-color: rgba(0,0,0,.5);
}

@keyframes button_layer_anim {
  0% {
    width: var(--button-size); 
    _padding-right:30px;
  }  
  100% {
    width:100vw;
    
  }
}
.button.red.slider {
  z-index:999;
}
.slide .content .button-layer .button-hover-text {
    overflow:hidden;
    _position: absolute;
    display: flex;
    border-radius:100rem;
    top:0;
    left:0;
    background-color: rgba(0, 0, 0, .5);
    width:var(--button-size);
    height:var(--button-size);
    padding-left:calc(var(--button-size) + 1vw);
    padding:0px;
    padding-right:0px;
    color:#fff;
    font-weight:500;
    text-transform:uppercase;
    flex-wrap: nowrap;
    _word-break: keep-all;
    white-space: nowrap;
    font-size: 1em;
    letter-spacing: 0.05em;
    line-height:1em;
    transition: all .3s cubic-bezier( 0.3, 0.02, 0.2, 0.3 );
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
}
.slide:hover .content .button-layer .button-hover-text{
    width:auto;
    padding-left: calc(var(--button-size) + 1vh);
    padding-right: calc(var(--button-size) * .5);
    border-radius:100rem;
}


.slide .content .button:after{
    display: flex;
    content:'';
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg id="plus-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon style="enable-background:accumulate; fill:white;" points="92.1,50.1 68.6,50.1 68.6,26.1 50.6,26.1 50.6,50.1 26.1,50.1 26.1,68.1,50.6,68.1 50.6,92.1 68.6,92.1 68.6,68.1 92.1,68.1"/></svg>'); 
    background-repeat: no-repeat;
    background-position: center center;
    transition: all .3s ease;
    width:100%;
    height:auto;
}
.slide:hover .content .button:after{
    content:'';
    transform: rotate(360deg);
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg id="pfeil-icon" class="pfeil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon display="inline" style="enable-background:accumulate; fill:white;" points="70.6,47.6 47.6,24.6 36.1,36.1 59.1,59.1 36.1,82.1 47.6,93.6 70.6,70.6 82.1,59.1"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    width:100%;
    height:auto;
}


@keyframes buttonAnimation {
  to {
    background-position: 200% center;
  }
}



/*  ------------------------------- SLIDER CONTENT --------------------------------  */

.content {
    
}
.content .caption .sliderspan {
    color:#fff;
    margin:0;
    text-transform: uppercase;
    height: fit-content;
    width:calc (100% - 30px);
    position: relative;
    font-weight:700!important;
    background-color:rgba(0,0,0,.3);
    padding:.1vh 1vw;
    justify-content: center;
    justify-items: center;
    font-size: clamp(1rem, 5vw, 7rem) !important;
    line-height:1.3em;
}

/*  ------------------------------- SLIDER CONTENT CONTAINER QUERIES --------------------------------  */


@container sliderContent (min-width: 250px){
    .content { 
      padding:0px 30px;
      left:0px;
    }
    .slide .content{
      bottom:1vh;
    }
    .content .caption h2 .sliderspan {
        font-size: 1.5em;
        background-color: var(--hero-transparent-bg);
        padding:10px 30px;
        position: relative;
        font-weight: 700;
    }
    .slide .content .button-layer .button-hover-text {
      font-size:.68em;
    }
    .slide:hover .content .button-layer .button-hover-text {
      white-space: normal;
    }
    .slide .content .button-layer .button-hover-text{
        width:auto;
        padding-left: calc(var(--button-size) + 1vh);
        padding-right: calc(var(--button-size) * .5);
        white-space: normal;
    }
}

@container sliderContent (min-width: 600px){
    .content .caption .titel span{
        font-size: 2.6em;
        transition: all .3s ease-in-out;
        position: relative;
    }
    .slide .content .button-layer .button-hover-text {
      font-size:.85em;
    }
    .slide .content .button-layer .button-hover-text{
      width:var(--button-size);
      padding:0;
      white-space: nowrap;
    }
}


@container sliderContent (min-width: 1000px){
    .content {}
    .content .button-layer:hover { }
    .content .caption .titel span{
        font-size: 3rem;
    }
    
    .slide .content{
      bottom:10vh;
    }
    .slide .content .button-layer .button-hover-text {
      font-size:1em;
    }
}

@container sliderContent (min-width: 1600px){
    .content .button-layer:hover {
        
    }
    .content .caption .titel span{
        font-size: 4rem;
    }
    .slide .content{
      bottom:7vh;
    }
}