@media (max-width: 1200px) {
    
    .teaser {        
        height: 380px;
    }
    .hero:not(.redirectHero) {        
        font-size: 40px;
        width: 480px;
    }

}

@media (max-width: 1040px) {

    header {
        height: var(--header-height-mobile);
    }
    #page {
        margin-top: var(--header-height-mobile);
    }

    .logo-container-desktop {
        display: none;
    }
    .logo-container-mobile {
        display: block;
    }
    .menu-container-desktop {
        display: none;
    }
    .menu-container-mobile {
        display: block;
    }

    .row.text {
        flex-wrap: wrap;
        gap: 0px;
    }
    .row.text > * {
        flex-basis: 100%;
    }

    .textColumns2, .textColumns3 {
        column-count: 1;
    }
    
}


@media (max-width: 800px) {

    .hideOnMobile { display: none; }
    .hideOnDesktop { display: block; }

    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 22px;
    }
    h3 {
        font-size: 20px;
        margin-bottom: 0;
    }
    h4 {
        font-size: 17px;
    }
    p {        
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .spacer { height: 50px; }
    .spacer.xs { height: 15px; }
    .spacer.s { height: 30px; }

    .row {        
        flex-wrap: wrap;
        gap: 25px;
    }
    .row.gap-s {
        gap: 10px;
    }
    .row > div {
        flex-basis: 100%;
    }

    .mobile-order-1 {
        order: 1;
    }
    .mobile-order-2 {
        order: 2;
    }

    .teaser {
        height: 200px;
        margin-top: 0;
    }
    .teaser .hero {
        display: none;
    }
    .hero {        
        width: 100%;
        right: 7px;
        padding: 20px 0 20px 25px;
        font-size: 28px;
    }
    .hero::before {
        bottom: -15px;
        left: -15px;
    }
    .hero.mobile {
        display: flex;
    }
    .playContainer {
        justify-content: center;
    }
    .play-button {
        margin-right: 0;
        width: 90px;
        height: 90px;
    }
    .play-button::after, .play-button::before {
        top: 25px;
        left: 34px;
        border-width: 20px 0 20px 30px;
    }
    .play-button::before {
        transform-origin: 10px 50%;
    }
    
    footer .menu {        
        line-height: 40px;
    }
    .socialMenu {
        justify-content: center;
    }


    
    .redirectHero {
        right: inherit;
        padding: 50px 0px;
        margin: 0 0 15px 8px;
        line-height: 120%;
    }
    .redirectHero span {
        font-size: 24px;
    }
}