/* Ghost image to dictate base responsive height */
.hero_ghost {
    width: 100%;
    height: auto;
    display: block;
    visibility: hidden; /* Fully invisible, only used for calculating aspect ratio height */
}

/* Base container with an extra 230px height added as requested */
.hero {
    position: relative;
    width: 100%;
    padding-bottom: 230px; /* Macht den Container um exakt 230px tiefer/höher! */
    overflow: hidden;
}

/* Image AND Video fit perfectly into the enlarged container */
.hero_img,
.hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom; /* Schneidet bei Bedarf oben ab, behält den unteren Rand im Bild */
}

.hero_img {
    z-index: 0;
}

.hero video {
    z-index: 1;
    transition: opacity 2s ease-in-out;
}