/* ==================================================
   STARTSEITE
   ================================================== */


/* ==================================================
   HERO
   ================================================== */

.hero {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);

    min-height: 100vh;

    overflow: visible;
}


/* ==================================================
   FOTO-EBENE
   Beide Bilder werden gemeinsam bewegt.
   Die vertikale Ausblendung liegt auf dieser Ebene.
   ================================================== */

.hero-fotos {
    position: absolute;

    top: -200px;
    left: -20px;

    width: calc(100% + 1px);
    height: calc(100% + 170px);

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

    will-change: transform;


    /* ==================================================
       WEICHES AUSBLENDEN NACH UNTEN
       ================================================== */

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 72%,
        rgba(0, 0, 0, .95) 78%,
        rgba(0, 0, 0, .75) 84%,
        rgba(0, 0, 0, .45) 90%,
        rgba(0, 0, 0, .18) 96%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 72%,
        rgba(0, 0, 0, .95) 78%,
        rgba(0, 0, 0, .75) 84%,
        rgba(0, 0, 0, .45) 90%,
        rgba(0, 0, 0, .18) 96%,
        transparent 100%
    );
}


/* ==================================================
   GRUNDEINSTELLUNG FOTOS
   ================================================== */

.hero-bild {
    position: absolute;

    top: 0;

    width: 72vw;

    max-width: none;

    pointer-events: none;

    opacity: 0;

    animation:
        heroBildFadeIn
        2.2s
        ease-out
        .35s
        forwards;

    will-change: opacity;
}


/* ==================================================
   SANFTES EINBLENDEN
   ================================================== */

@keyframes heroBildFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ==================================================
   LINKES FOTO
   Nur horizontale Ausblendung
   ================================================== */

.hero-bild-links {
    left: -8vw;

    -webkit-mask-image: linear-gradient(
        to right,
        black 0%,
        black 42%,
        rgba(0, 0, 0, .75) 52%,
        rgba(0, 0, 0, .35) 66%,
        rgba(0, 0, 0, .08) 82%,
        transparent 96%
    );

    mask-image: linear-gradient(
        to right,
        black 0%,
        black 42%,
        rgba(0, 0, 0, .75) 52%,
        rgba(0, 0, 0, .35) 66%,
        rgba(0, 0, 0, .08) 82%,
        transparent 96%
    );
}


/* ==================================================
   RECHTES FOTO
   Nur horizontale Ausblendung
   ================================================== */

.hero-bild-rechts {
    right: -8vw;

    -webkit-mask-image: linear-gradient(
        to left,
        black 0%,
        black 42%,
        rgba(0, 0, 0, .75) 52%,
        rgba(0, 0, 0, .35) 66%,
        rgba(0, 0, 0, .08) 82%,
        transparent 96%
    );

    mask-image: linear-gradient(
        to left,
        black 0%,
        black 42%,
        rgba(0, 0, 0, .75) 52%,
        rgba(0, 0, 0, .35) 66%,
        rgba(0, 0, 0, .08) 82%,
        transparent 96%
    );
}


/* ==================================================
   BILDER
   ================================================== */

.hero-bild img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 0;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, .14);
}


/* ==================================================
   KREISE
   Mittlere Ebene
   ================================================== */

.hero-bg-circles {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;
}


/* ==================================================
   HERO-INHALT
   Vorderste Ebene
   ================================================== */

.hero-content {
    position: relative;

    z-index: 3;

    max-width: 900px;

    margin: 0 auto;

    padding:
        0
        var(--space-md)
        var(--space-xl);

    text-align: left;
}


/* ==================================================
   TEXTBEREICH
   ================================================== */

.hero-content p,
.hero-content h1 {
    max-width: 720px;
}


/* ==================================================
   MOBILE
   ================================================== */


/* ==================================================
   SMARTPHONE HOCHFORMAT
   Fotos reduzierte Deckkraft
   ================================================== */

@media (max-width: 700px) and (orientation: portrait) {

    .hero-fotos {

        display:
            block;

        position:
            absolute;

        top:
            -130px;

        left:
            -35px;

        width:
            calc(100% + 70px);

        height:
            calc(100% + 180px);

        opacity:
            .28;

    }


    .hero-bild {

        width:
            125vw;

    }


    .hero-bild-links {

        left:
            -48vw;

    }


    .hero-bild-rechts {

        right:
            -48vw;

    }

}
/* ==================================================
   HERO – WILLKOMMEN RESPONSIVE
   ================================================== */

@media (max-width: 1023px) {

    .hero-welcome {

        transform:
            translateX(-1.5rem);

    }

}




/* --------------------------------------------------
   SMARTPHONE QUERFORMAT
   Fotos Originaldarstellung
   -------------------------------------------------- */

@media (max-width: 900px) and (orientation: landscape) {

    .hero-fotos {

        display:
            block;

        top:
            -100px;

        left:
            -20px;

        width:
            calc(100% + 1px);

        height:
            calc(100% + 180px);

    }


    .hero-bild {

        width:
            100vw;

    }


    .hero-bild-links {

        left:
            -30vw;

    }


    .hero-bild-rechts {

        right:
            -30vw;

    }

}


/* ==================================================
   REDUZIERTE BEWEGUNG
   ================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-bild {
        animation: none;

        opacity: 1;
    }
}