.hero {
    background-image: url('../images/desktop/taxi/einen-anruf-entfernt.webp'), url('../images/desktop/taxi/einen-anruf-entfernt.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-clip-path)), 48% 100%, 0 calc(100% - var(--hero-clip-path)));
    position: relative;
}

.hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 0;
}

.hero * {
    color: white;
    text-shadow: .05em .05em black;
}

.hero .logo {
    z-index: 50;
    position: absolute;
    top: 2rem;
    right: 2rem;
}

.hero .button {
    font-size: 1em;
    margin: 1em 0 0 auto;
    padding: .75em 1.5em;
    background: transparent;
    border: .2em solid currentcolor;
}

.section-with-bg {
    background-image: url('../images/desktop/taxi/zuruecklehnen-und-entspannen.webp'), url('../images/desktop/taxi/zuruecklehnen-und-entspannen.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section-with-bg .content {
    background: var(--background-color);
    padding: 1rem;
    box-shadow: 0 .15rem 1.5rem -.2rem black;
}

.contact-section {
    background: var(--primary-color);
}

.contact-section .button {
    color:currentcolor;
    border:.2em solid currentcolor;
}

/* Mobile styles */
@media (max-width: 980px) {
    .hero .logo {
        z-index: 50;
        position: relative;
        top:0;
        right:0;
    }
}