/* hero homepage */
.home-hero{
    width: 100%;
    max-width: 100%;
    min-height: 480px;
    max-height: 90svh;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;

}

.home-hero h1 {
    font-family: var(--font-subheadline);
    font-weight: normal;
    color: var(--light);
    font-size: 2em;
    text-align: left;
}

.hero-img{
    min-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.home-hero-inner{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: var(--site-padding);
    z-index: 2;
}


.home-hero-inner h2{
    font-size: calc(1.7rem + 1.5vw);
    max-width: max-content;
    white-space: wrap;
}
.home-hero__headline .hero-line{
    display: block;
}
.home-hero__headline .hero-glow{
    color: #ffffff;
    text-shadow: none;
}
.home-hero-inner h1{
    font-family: var(--font-body), sans-serif;
    font-size: calc(1rem + 1vw);
    font-weight: 500;
}
.home-hero__title .char{
    display: inline-block;
}
.home-hero__title .space{
    display: inline-block;
}
.home-hero__title .typed{
    display: inline-block;
    white-space: pre;
}
.home-hero__title .blue{
    color: var(--ac-clr);
}
.home-hero__title .cursor{
    display: inline-block;
    font-weight: 100 !important;
    width: 1px;
    margin-left: -8px;
    opacity: 0;
    padding: 0;
    transform: none;
}


.hero-fächer{
    position: absolute;
    width: 40%;
    min-width: 500px;
    height: auto;
    bottom: 0;
    right: -8%;
    will-change: transform;
}


@media(max-width: 900px){
    .home-hero h1,
    .home-hero h2,
    .home-hero-inner button{
        text-shadow: 0 0 10px var(--dark);
    }

    .home-hero-inner button{
        backdrop-filter: brightness(.7);
    }

    .hero-fächer{
        width: 50%;
        right: -13%;
        min-width: 280px !important;
        filter: brightness(.8);
    }
}



/* slider */
.slider-holder{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    padding: 50px 0;
}
.slider-bar{
    display: flex;
    width: max-content;
    position: relative;
}
.slider-bar::after{
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--txt);
    position: absolute;
    bottom: 0;
    left: 0;
}
.slider-bar .indikator{
    padding: 5px 20px;
    color: var(--txt);
    z-index: 10;
    cursor: pointer;
    transition: color .4s ease;
}
.slider-bar .indikator.active{
    color: var(--lighter);
    border-bottom: 2px solid var(--lighter);
}

.slider-wrapper{
    position: relative;
    width: 100%;
    height: max-content;
    align-self: flex-start;
    overflow-x: hidden;
    touch-action: pan-y;
    clip-path: inset(0 0 -2px 0);
    padding: 2px 0;
}
.slider-wrapper::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    aspect-ratio: 10/1;
    min-height: 80px;
    max-height: 140px;
    background: linear-gradient(
            to bottom,
            rgba(25, 25, 25, 1) 0%,
            rgba(25, 25, 25, 1) 30%,
            rgba(25, 25, 25, 0) 100%
    );
    transform: translateX(-50%);
    z-index: 4;
}
.slider-wrapper::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    aspect-ratio: 10/1;
    min-height: 80px;
    max-height: 140px;
    background: linear-gradient(
            to top,
            rgba(25, 25, 25, 1) 0%,
            rgba(25, 25, 25, 1) 30%,
            rgba(25, 25, 25, 0) 100%
    );
    transform: translateX(-50%);
    z-index: 4;
}



.slider{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300%;
    transition: all .5s ease-in-out;
}
.slide{
    width: 100%;
    background-color: var(--card-clr);
    display: flex;
    height: max-content;
    max-height: 600px;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.slide .left,
.slide .right{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 295px;
}
.slide .left{
    width: 60%;
}
.slide .right{
    width: 40%;
}
.slide .left img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    min-height: 100%;
}
.slide .left .img-transition-right{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1/10;
    min-width: 400px;
    max-width: 400px;
    background: linear-gradient(
            to left,
            rgba(32, 32, 32, 1) 0,
            rgba(32, 32, 32, 0) 100%
    );
    
}
.slide .left .img-transition-bottom{
    display: none;
    background: linear-gradient(
            to top,
            rgba(32, 32, 32, 1) 0%,
            rgba(32, 32, 32, 1) 30%,
            rgba(32, 32, 32, 0) 100%
    );
}



.slide .right .txt-holder{
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em;
    transform: translateX(-100px);
    z-index: 5;
}
.slider-heading{
    font-family: var(--font-headline);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.4;
}
.slide .right p.light{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slide .right button{
    margin-top: 20px;
}

/* slider right text animation (per-slide retrigger) */
.slide .right .txt-holder > .slider-heading,
.slide .right .txt-holder > p.light{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    will-change: transform, opacity;
}
.slide .right .txt-holder > .slider-heading{
    transition-delay: .1s;
}
.slide .right .txt-holder > p.light{
    transition-delay: .25s;
}
.slide.is-animated .right .txt-holder > .slider-heading,
.slide.is-animated .right .txt-holder > p.light{
    opacity: 1;
    transform: translateY(0);
}

.slider-buttons{
    display: none;
}

@media(max-width: 800px){
    .slider-holder{
        flex-direction: column-reverse;
    }

    .slider-bar{
        display: none;
    }

    .slider-buttons{
        display: flex;
        gap: 1em;
        width: max-content;
        height: max-content;
        align-self: flex-end;
        padding: var(--site-padding);
        z-index: 6;
    }
    .slider-btn{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid 2px var(--ac-clr);
        cursor: pointer;
        color: var(--lighter);
        box-shadow: inset 0 0 5px var(--ac-clr);
    }
    .slider-btn svg{
        width: 50%;
        height: auto;
    }
    .slider-btn:first-of-type svg{
        transform: scaleX(-1);
    }



    .slide{
        flex-direction: column;
        min-height: max-content;
    }

    .slide .left .img-transition-bottom{
        display: inherit;
    }
    .slide .left .img-transition-right{
        display: none;
    }
    .slide .left img{
        max-height: 400px;
    }
    .slide .left,
    .slide .right{
        width: 100%;
    }
    .slide .right{
        justify-content: center;
        margin-top: -10%;
    }
    .slide .right .txt-holder{
        transform: translateX(0);
        max-width: 500px;
    }
}


/* Weg zu deiner Website */

.website-weg-holder{
    width: 100%;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.website-weg-holder h3{
    padding: 0 16px;
}
.website-weg-wrapper{
    width: 100%;
    min-height: 100svh;
    position: relative;
}
.website-weg-wrapper .img-transition-top,
.website-weg-wrapper .img-transition-bottom{
    z-index: 4;
}

.website-weg{
    width: 100%;
    position: relative;
    isolation: isolate;
}
.website-weg__media{
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    z-index: 4;
}
.website-weg__media img{
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(.7);
}
.website-weg__overlay{
    position: relative;
    width: 100%;
    z-index: 2;
}
.website-weg__connector{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.website-weg__connector path{
    fill: none;
    stroke: var(--ac-clr, var(--ac-clr));
    stroke-width: 2;
    stroke-linecap: round;
}
.website-weg__fx-layer{
    position: sticky;
    top: 0;
    height: 100svh;
    pointer-events: none;
}
.website-weg__fx-layer .img-transition-top,
.website-weg__fx-layer .img-transition-bottom{
    position: absolute;
    left: 0;
    width: 100%;
}
.website-weg__fx-layer .img-transition-top{
    top: 0;
    bottom: auto;
}
.website-weg__fx-layer .img-transition-bottom{
    bottom: 0;
    top: auto;
}
.website-weg .txt-holder{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
    min-width: 500px;
    min-height: 100svh;
    position: relative;
    padding: 30px 10%;
    opacity: 1;
    transform: none;
    transition: none;
    z-index: 3;
}
.website-weg .txt-holder .mini-heading{
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 4;
}
.website-weg .txt-holder .mini-heading .mini-heading__anchor{
    position: absolute;
    left: 20px;
    top: 50%;
    width: 1px;
    height: 1px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    display: block;
}
.website-weg .txt-holder .mini-heading::before{
    content: "";
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    z-index: 5;
    background-color: var(--card-clr);
    border: solid 2px var(--ac-clr);
    box-shadow: inset 0 0 5px var(--ac-clr);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    color: var(--ac-clr);
    font-weight: 900;
}
.website-weg .txt-holder:nth-of-type(1) .mini-heading::before{
    content: "1";
}
.website-weg .txt-holder:nth-of-type(2) .mini-heading::before{
    content: "2";
}
.website-weg .txt-holder:nth-of-type(3) .mini-heading::before{
    content: "3";
}
.website-weg .txt-holder:nth-of-type(4) .mini-heading::before{
    content: "4";
}
.website-weg .txt-holder:nth-of-type(5) .mini-heading::before{
    content: "5";
}


.website-weg .txt-holder:nth-of-type(2),
.website-weg .txt-holder:nth-of-type(4){
    justify-self: flex-end;
}

@media(max-width: 600px){
    .website-weg .txt-holder{
        max-width: 500px;
        width: 100%;
        min-width: 0;
        padding: 30px 1em;
    }
}