/* =========================================
   HWT Split Scroll Animation – Vollständige CSS
   ========================================= */



.hwt-ssa{
  --gap:1.750rem;
  --corner:1.750rem;
  --stage-h:32rem;
  color:#EDE7FF;
}


.hwt-ssa__heading{
  font-size:clamp(1.625rem,3vw,2.625rem);
  font-weight:800;
  margin:0 0 1em;
}


.hwt-ssa__grid{
  display:grid;
  grid-template-columns:3fr 2fr; 
  gap:var(--gap);
  align-items:stretch;
}


.hwt-ssa__stage{ position:relative; }
.hwt-ssa__stage-inner{
  position:relative;
  width:100%;
  height:var(--stage-h);          
  border-radius:var(--corner);
  overflow:hidden;
  background:rgba(31, 16, 46, 0.7);   
  box-shadow:0 1.125rem 2.375rem rgba(0,0,0,.35);
  min-height:15.000rem;
}


.hwt-ssa__start{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0; transform:translateY(0.625rem);
  transition:opacity .45s ease, transform .45s ease;
}
.hwt-ssa__start.is-active{ opacity:1; transform:none; }

.hwt-ssa__start-img{
  opacity:0; transform:scale(.96);
  max-width:min(60%,35.000rem);
  height:auto; object-fit:contain;
  transition:opacity .5s ease, transform .5s ease;
  z-index: 1;
}
.hwt-ssa__start-img.show{ opacity:1; transform:none; }

.hwt-ssa__start-text {
    position: absolute;
    bottom: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 1.250rem;
   color: #FFF;
    padding: .5em .8em;
    border-radius: 0.625rem;
    opacity: 0;
    text-transform: uppercase;
    transition: opacity .38s 
ease, transform .38s 
ease;
    z-index: 2;
    transform: translate(-50%, 0);
    width: 10.000rem;
    text-align: center;
}
.hwt-ssa__start-text.show{ opacity:1; transform:translate(-50%,0); }



.hwt-ssa__slots{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:grid;
  grid-template-columns:50% 50%;
  grid-template-rows:50% 50%;
}


.hwt-ssa__slot{
  opacity:0;
  transform:translateY(0.375rem);
  transition:opacity .40s ease, transform .40s ease;
  display:block;
  position:relative;           
  padding:2.2% 3.2%;           
  max-width:100%;
}
.hwt-ssa__slot.is-active{ opacity:1; transform:none; }


.hwt-ssa__slot.is-left{
  grid-column:1 / 2;  
  grid-row:1 / 2;     
  text-align:left;
}
.hwt-ssa__slot.is-right{
  grid-column:2 / 3;  
  grid-row:1 / 2;     
  text-align:left;
}
.hwt-ssa__slot.is-bottom{
  grid-column:1 / 3;  
  grid-row:2 / 3;     
  text-align:left;
  padding-top:1.5%;
  padding-bottom:2.5%;
}
.hwt-ssa__slot.is-left .hwt-ssa__slot-title,
.hwt-ssa__slot.is-right .hwt-ssa__slot-title {
  position: absolute;
  top: 3.125rem;
}
.hwt-ssa__slot.is-left .hwt-ssa__slot-title {
  left: 3.125rem;
}
.hwt-ssa__slot.is-right .hwt-ssa__slot-title {
  right: 3.125rem;
}

.hwt-ssa__slot.is-bottom .hwt-ssa__slot-title {
    left: 8.750rem;
    bottom: 4.688rem;
    position: absolute;
}

.hwt-ssa__slot.is-left .hwt-ssa__ul,
.hwt-ssa__slot.is-right .hwt-ssa__ul {
  position: absolute;
  top: 6.250rem;
}

.hwt-ssa__slot.is-left .hwt-ssa__ul {
  left: 3.125rem;
}
.hwt-ssa__slot.is-right .hwt-ssa__ul {
  right: 3.125rem;
}

.hwt-ssa__slot.is-bottom .hwt-ssa__ul {
position: absolute;
    bottom: 2.125rem;
    left: 23.125rem;
}





.hwt-ssa__slot.is-left::before,
.hwt-ssa__slot.is-right::before{
  content:"";
  position:absolute;
  left:3.125rem;
  
  top:4.875rem;                     
  height:0.062rem;
  background:#9F83F2;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s ease;
  width: 19.375rem;
}
.hwt-ssa__slot.is-right::before{
  left: auto;
  right:3.125rem;
}
.hwt-ssa__slot.line-on.is-left::before  { transform:scaleX(1); }
.hwt-ssa__slot.line-on.is-right::before {
  transform-origin:right center; transform:scaleX(1);
}


.hwt-ssa__slot.is-left::after,
.hwt-ssa__slot.is-right::after{
  content:"";
  position:absolute;
 top:6.312rem;      height:0.062rem; width:2.500rem;
  background:#9F83F2;
  opacity:0; transition:opacity .3s ease .2s;
}
.hwt-ssa__slot.is-left::after{
  left:22.062rem;
  transform-origin:right center;
  transform:rotate(35deg);
}
.hwt-ssa__slot.is-right::after{
  right:22.062rem;
  transform-origin:left center;
  transform:rotate(-35deg);
}
.hwt-ssa__slot.line-on.is-left::after,
.hwt-ssa__slot.line-on.is-right::after{ opacity:1; }


.hwt-ssa__slot.is-bottom::before {
    content: "";
    position: absolute;
    left: 8.562rem;
    bottom: 7.125rem;
    height: 0.062rem;
    width: 13.750rem;
    background: #9F83F2;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s 
ease;
}
.hwt-ssa__slot.line-on.is-bottom::before{ transform:scaleX(1); }

.hwt-ssa__slot.is-bottom::after {
    content: "";
    position: absolute;
    left: 22.062rem;
    bottom: 7.812rem;
    width: 2.500rem;
    height: 0.062rem;
    background: #9F83F2;
    transform: rotate(-35deg);
    opacity: 0;
    transition: opacity .3s 
ease .2s;
}
.hwt-ssa__slot.line-on.is-bottom::after{ opacity:1; }


.hwt-ssa__slot-img{
  display:block;
  max-width:100%;
  height:auto;
  object-fit:contain;
  margin:0.750rem 0 0.625rem;
  opacity:0; transform:translateY(0.375rem) scale(.98);
  transition:opacity .35s ease, transform .35s ease;
}
.hwt-ssa__slot-img.show{ opacity:1; transform:none; }

.hwt-ssa__slot-title{
  font-weight:bold;
  font-size: 1.250rem;
  color: #FFF;
  margin:0 0 .5em;
  
}

.hwt-ssa__ul{
  margin:0; padding:0; list-style:none;
  line-height:1.6;
  opacity:0; transform:translateY(0.375rem);
  transition:opacity .28s ease, transform .28s ease;
  width: 34%;
  font-size: 0.688rem;
  color: #FFF;
}
.hwt-ssa__ul.show{ opacity:1; transform:none; }
.hwt-ssa__ul li{
  position:relative; padding-left:1.4em;
  margin-bottom: 1rem;
}
.hwt-ssa__ul li::before{
  color: #9F83F2;
  content:"//"; position:absolute; left:0; top:0; opacity:.6;
}


.hwt-ssa[data-armed="1"] .hwt-ssa__start-img,
.hwt-ssa[data-armed="1"] .hwt-ssa__start-text,
.hwt-ssa[data-armed="1"] .hwt-ssa__slot,
.hwt-ssa[data-armed="1"] .hwt-ssa__slot-img,
.hwt-ssa[data-armed="1"] .hwt-ssa__ul{
  opacity:0 !important;
}


.hwt-ssa__aside{ height:var(--stage-h); }

.hwt-ssa__scroller{
  height:100%;
  overflow:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;                  
  border: none !important;
  border-radius:var(--corner);
}
.hwt-ssa__scroller::-webkit-scrollbar{ display:none; } 

.hwt-ssa__card{
  background:rgba(31, 16, 46, 0.7);
  border-radius:1.750rem;
  padding: 2rem 3.500rem;
  margin-bottom:var(--gap);
  min-height:calc(50% - var(--gap)*.5);  
  scroll-snap-align:start;
  box-shadow: 0 0.250rem 1.062rem rgba(0, 0, 0, .1);
}
.hwt-ssa__card--first {
  background: #362052;
 
}
.hwt-ssa__card:last-child {
  margin-bottom: 0;
}
.hwt-ssa__icon{ width:2.188rem; height:2.188rem; margin-bottom:1.875rem; }
.hwt-ssa__card-title{
  margin:0 0 0.375rem; font-weight:800; font-size:clamp(0.938rem,1.5vw,1.250rem);
}
.hwt-ssa__card-text{ margin:0; color: #C7BDD1;}


@media (max-width:61.250rem){
  .hwt-ssa__grid{ grid-template-columns:1fr; }
  .hwt-ssa__aside{ height:auto; }
  .hwt-ssa__scroller{ max-height:60vh; }
}

.hwt-ssa__slot-img {
  width: 12.500rem ;
}
.hwt-ssa__slot.is-bottom .hwt-ssa__slot-img {
  height: 12.500rem ;
  width: auto;
}
.hwt-ssa__slot.is-left .hwt-ssa__slot-img {
  position: absolute;
  right: .5%;
  bottom: -30%;
  transform-origin: bottom right;
}

.hwt-ssa__slot.is-right .hwt-ssa__slot-img {
  position: absolute;
  left: .5%;
  bottom: -30%;
  transform-origin: bottom left;
}

.hwt-ssa__slot.is-bottom .hwt-ssa__slot-img {
  position: absolute;
  top: -3%;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
}


.hwt-ssa__scroller {
  overscroll-behavior: contain;
  scroll-snap-type: none; 
  scroll-behavior: smooth; 
}


.hwt-ssa__card-title {
  font-weight: bold !important;
  font-size: 1.250rem !important;
  padding-bottom: 1.562rem;
}

.hwt-ssa__slot.is-bottom .hwt-ssa__ul {
  display: flex;
  gap: 1.5rem; 
  width: 50%;
}
.hwt-ssa__card--first {
  position: absolute;
  z-index: 2;
}

.hwt-ssa__card.no-shadow {
  box-shadow: none;
}

.hwt-ssa__scroller { scroll-behavior: smooth; }


@keyframes hwtScrollerBounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3.125rem); 
  }
  100% {
    transform: translateY(0);
  }
}

@media (min-width: 767px) {
  .hwt-is-visible .hwt-ssa__card:nth-child(3){
    animation-name: hwtScrollerBounce;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
  }
}
.hwt-ssa__start img {
 max-width: 12.500rem;
 margin-bottom: 1.875rem;
}

.hwt-ssa__scroller {
  transition: none;
}

.hwt-ssa__scroller{
  overflow-y: auto;            
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-snap-type: none;
  scroll-snap-stop: normal;     
  scrollbar-gutter: stable;     
}


.hwt-ssa__card{
  scroll-snap-align: start;
}


@media (hover: hover){
  .hwt-ssa__aside:hover .hwt-ssa__scroller{
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always; 
  }
}


.hwt-ssa__aside:focus-within .hwt-ssa__scroller{
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
}


.hwt-ssa__scroller{
  scroll-padding-block-start: var(--ssa-snap-padding-top, 0.000rem);
  scroll-padding-block-end:   var(--ssa-snap-padding-bottom, 0.000rem);
}