/* Responsive overrides for the existing HIFI.NET layout */
@media screen and (max-width: 1020px) {
    html {
        min-width: 0;
    }

    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    #headercontent,
    #content,
    #footercontent,
    #footer .customhtml,
    #scrollbardivinner,
    #testscrollbardivinner {
        box-sizing: border-box;
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    #footertrademark #trade {
        min-width: 0;
    }

    #colmain {
        box-sizing: border-box;
        width: 65.5%;
    }

    #colright {
        box-sizing: border-box;
        width: 34.5%;
    }

    #colright h3 {
        box-sizing: border-box;
        width: auto;
    }

    #slideshow {
        float: none;
        width: 100%;
        max-width: 1000px;
        height: auto;
        aspect-ratio: 5 / 2;
    }

    #fading {
        width: 100%;
        max-width: 1000px;
        height: auto;
        aspect-ratio: 20 / 7;
    }

    #fading img {
        display: block;
        width: 100%;
        height: auto;
    }

    .slide {
        width: 100%;
    }

    .mailform form,
    .financingform form {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 760px) {
    body {
        overflow-x: hidden;
        font-size: 15px;
        line-height: 1.5;
    }

    .header_full {
        height: auto;
        min-height: 0;
    }

    #headercontent {
        background-size: cover;
    }

    #companyname {
        float: none;
        width: auto;
        height: auto;
        margin: 18px 0 10px;
        text-align: center;
    }

    .companyname,
    .companyname a {
        font-size: 30px;
        line-height: 1.2;
    }

    #submenu:empty {
        display: none;
    }

    #header #mainmenu {
        float: none;
        width: auto;
        height: auto;
        margin: 8px 0 12px;
        text-align: center;
    }

    #header #mainmenu ul.menu {
        display: flex;
        float: none;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    #header #mainmenu ul.menu li {
        float: none;
        flex: 1 1 135px;
        width: auto;
        max-width: 230px;
        height: auto;
    }

    #header #mainmenu ul.menu li a {
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        min-height: 50px;
        padding: 6px;
    }

    #header #mainmenu ul.menu li a img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .mod-languages {
        clear: both;
        width: 100%;
        text-align: center;
    }

    .lang-inline {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .lang-inline li {
        float: none;
        margin: 3px;
    }

    #content {
        display: block;
    }

    #colmain,
    #colright {
        float: none;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    #colmain {
        padding-bottom: 16px;
        text-align: left;
    }

    #colright {
        margin-top: 16px;
    }

    #colright h3 {
        box-sizing: border-box;
        width: auto;
        height: auto;
        min-height: 25px;
    }

    #colright ul,
    #colright .menu {
        padding-left: 15px;
        padding-right: 15px;
    }

    #colmain h1,
    #colmain h2 {
        width: auto !important;
        padding-right: 8px;
        padding-left: 12px;
        background-size: auto 100%;
    }

    #breadcrumbdiv {
        height: auto;
        min-height: 25px;
        padding: 7px 0;
    }

    #breadcrumbdiv span,
    .breadcrumb,
    .breadcrumblast,
    .breadcrumbclass {
        float: none;
        display: inline;
    }

    .fb-like {
        float: none;
        display: block;
        margin: 8px 0;
    }

    .mailform form,
    .financingform form {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 10px 0;
        padding: 14px;
    }

    .mailform label,
    .financingform label,
    .financingformspan {
        float: none;
        display: block;
        width: auto;
        max-width: 100%;
        line-height: 1.4;
    }

    .mailform input[type="text"],
    .mailform input[type="password"],
    .mailform textarea,
    .mailform select,
    .financingform input[type="text"],
    .financingform input[type="password"],
    .financingform textarea,
    .financingform select {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-height: 44px;
    }

    .mailform textarea,
    .financingform textarea {
        height: 130px;
    }

    .mailform input[type="submit"],
    .financingform input[type="submit"] {
        min-height: 44px;
    }

    button {
        max-width: 100%;
        min-height: 44px;
    }

    .leftinform,
    .rightinform {
        float: none;
        display: block;
        margin: 8px 0;
    }

    #colmain table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .bildlinkstextdaneben,
    .bildrechtstextdaneben {
        float: none;
        display: block;
        max-width: 100%;
        margin: 8px auto;
    }

    .bildlinks,
    .bildmitte,
    .bildrechts {
        max-width: 100%;
        height: auto;
    }

    #footer .customhtml {
        min-height: 0;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #footertrademark {
        text-align: center;
    }

    #footertrademark #trade {
        min-width: 0;
        text-align: center;
    }

    .footerlinks li {
        display: inline-block;
        margin: 5px;
    }

    #scrollbardivinner,
    #testscrollbardivinner {
        box-sizing: border-box;
        width: 100%;
        line-height: 1.4;
    }

    #scrollbarspan2 {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
    }

    #scrollbarspan3,
    #testshoppingcartspan {
        float: none;
        width: auto;
        max-width: 100%;
        height: auto;
    }

    #shoppingcart {
        margin: 8px;
    }

    .shoppingcartsub {
        margin-left: 0;
    }

    #noticebox {
        left: 50%;
        box-sizing: border-box;
        max-width: calc(100vw - 20px);
        margin-left: 0;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 760px) {
    #slideshow,
    #fading,
    #slideshowul,
    #slideshowul .slide {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
    }

    #slideshow img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

 
@media screen and (max-width: 1020px) {
    #slideshow,
    #fading,
    #slideshowul,
    #slideshowul .slide {
        box-sizing: border-box;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    #slideshow img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

 
/* Slideshow width clamp based directly on the viewport */
#slideshow {
    float: none !important;
    box-sizing: border-box;
    width: calc(100vw - 24px) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#fading,
#slideshowul,
#slideshowul .slide {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
}

#slideshow img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

@media screen and (max-width: 760px) {
    #slideshow {
        height: auto !important;
        aspect-ratio: 5 / 2 !important;
        overflow: hidden !important;
    }

    #fading,
    #slideshowul,
    #slideshowul .slide {
        height: 100% !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    #slideshow img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}