/* Homepage only: a quiet film above a legible, navy lower third. */
.hero--video .hero-bild,
.hero--video .hero-film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 82%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.hero--video .hero-film { opacity: 0; }
.hero--video.film-bereit .hero-film { opacity: 1; }
.hero--video .hero-schleier {
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4,16,26,.52), rgba(4,16,26,.03) 22%, rgba(4,16,26,.08) 43%, rgba(4,16,26,.85) 67%, #04101a 82%);
}
.hero--video .hero-text {
    width: 100%;
    gap: 12px;
    padding: 310px clamp(24px, 5vw, 72px) 34px;
    padding-top: max(310px, 42svh);
}
.hero--video .hero-text h1 { font-size: clamp(46px, 6vw, 84px); }
.hero--video .hero-cta { display: inline-flex; margin-top: 8px; }
.hero--video .hero-hinweis { margin-top: 8px; font-size: 0; }
.hero--video .hero-zeile { font-size: 14px; }
.hero--video .hero-preis { font-size: 14px; }
.hero-film-schalter {
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 28px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #f7f2e7;
    background: rgba(4,16,26,.8);
    border: 1px solid rgba(247,242,231,.5);
    border-radius: 50%;
    cursor: pointer;
}
.hero-film-schalter[hidden],
.hero-film-schalter[data-state="playing"] .hero-film-play,
.hero-film-schalter[data-state="paused"] .hero-film-pause { display: none; }
.hero-film-schalter:focus-visible { outline: 2px solid #cfae68; outline-offset: 4px; }
@media (max-width: 900px) {
    /* A square, separately cropped edit keeps the complete boat visible.
       Do not cover a tall phone viewport with a cropped landscape movie. */
    .hero--video .hero-bild,
    .hero--video .hero-film { top: 60px; height: auto; aspect-ratio: 1; object-fit: cover; }
    .hero--video .hero-schleier {
        top: 60px;
        bottom: auto;
        height: auto;
        aspect-ratio: 1;
        background: linear-gradient(180deg, rgba(4,16,26,.2), transparent 18%, transparent 62%, #04101a 100%);
    }
    .hero--video .hero-text { padding: calc(100% + 12px) 24px 36px; gap: 14px; }
    .hero--video .hero-text h1 { font-size: clamp(38px, 8vw, 60px); }
    .hero--video .hero-zeile { letter-spacing: .15em; margin-right: -.15em; }
    .hero--video .hero-ort { font-size: 14px; letter-spacing: .1em; margin-right: -.1em; }
    .hero--video .hero-cta { margin-top: 6px; }
    .hero-film-schalter { left: 16px; bottom: 18px; }
}