/* Hero — Browser-Mockups (Desktop quer, Mobile hoch) */

.hero-visual {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 28px);
    width: 100%;
    max-width: var(--content-max);
    margin: 56px auto 0;
    padding: 0 0 40px;
}

.hero-mockup {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(15, 15, 35, 0.06),
        0 24px 64px rgba(91, 79, 217, 0.1);
}

.hero-mockup__img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Desktop — Querformat, nimmt den restlichen Platz */
.hero-mockup--desktop {
    flex: 1 1 0;
    min-width: 0;
}

/* Mobile — Höhe per hero-visual-sync.js = Desktop-Bildhöhe, Breite automatisch */
@media (min-width: 901px) {
    .hero-mockup--mobile {
        flex: 0 0 auto;
        width: auto;
    }

    .hero-mockup--mobile .hero-mockup__img {
        width: auto;
        max-width: none;
    }
}

@media (max-width: 900px) {
    .hero-visual {
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
    }

    .hero-mockup--desktop {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .hero-mockup--mobile {
        flex: none;
        width: min(100%, 260px);
    }
}

@media (max-width: 520px) {
    .hero-mockup {
        border-radius: 18px;
    }
}