/*  =========================================================
    HERO (Unterseiten) – [page_hero]
    ========================================================= */
#top #main .__section_hero .content{padding: 50px 0 0;}

#top .__hero{position: relative; display: flex; gap: 50px; width: 100%; max-width: 90vw;}

/* Links */
#top .__hero_content{width: 50%; position: relative; z-index: 2; align-self: center; padding-bottom: 3em;}

/* Rechts */
#top .__hero .__hero_img{position: relative; margin: 0; overflow: hidden;}
#top .__hero .__hero_img img{display: block; width: 100%; height: 100%; object-fit: cover;}

/* Button */
#top .__hero .__hero_button{position: absolute; right: 20px; bottom: 50px; z-index: 3;}

@media only screen and (min-width: 990px){
    /* feste Bildgröße nur auf Desktop (Original 938 × 625) */
    #top .__hero .__hero_img{width: 883.6px; height: 588.7px;}
}

@media only screen and (max-width: 989px){
    #top #main .__section_hero .content{padding: 24px 0 48px;}

    #top .__hero{flex-direction: column; gap: 0;}

    #top .__hero .__hero_img{order: 1; width: 100%; aspect-ratio: 938 / 625;}
    #top .__hero_content{order: 2; width: 100%; padding: 32px 0 0;}
    #top .__hero .__hero_button{order: 3; position: static; margin-top: 8px;}
}

@media only screen and (max-width: 767px){
    #top .__hero_content h1{font-size: var(--step-5); max-width: 90vw;}
}