.vintroom-logo {
    display: inline-block;
    white-space: nowrap;
}

@supports (mask-image: url("")) {
    .vintroom-logo {
        position: relative;
        width: 152px;
        aspect-ratio: 2024 / 399;
        flex: none;
        vertical-align: middle;
    }

    .vintroom-logo::before {
        content: "";
        position: absolute;
        inset: 0;
        /* Der Farbübergang liegt in der Lücke zwischen Zeichen und Schrift. */
        background: linear-gradient(90deg, var(--vm-accent) 23%, var(--vm-ink) 23%);
        mask-image: url("produkt/vintroom-logo-mask-v2.png");
        mask-repeat: no-repeat;
        /* Transparente Ränder der Vorlage aus dem sichtbaren Bereich schieben. */
        mask-size: 107.312% 181.454%;
        mask-position: 51.351% 52.615%;
    }

    .vintroom-logo-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    @media (max-width: 560px) {
        .vintroom-logo { width: 127px; }
    }

    @media (forced-colors: active) {
        .vintroom-logo { width: auto; aspect-ratio: auto; }
        .vintroom-logo::before { display: none; }
        .vintroom-logo-name {
            position: static;
            width: auto;
            height: auto;
            overflow: visible;
            clip-path: none;
        }
    }
}
