@media all and (min-width: 48rem) {

    body:after {
        content: 'viewport-l';
        display: none;
    }

    head {
        font-family: 'viewport-l';
    }

    /* layout */

    #page-header {
        width: 48rem;
    }
    #claim {
        clear: right;
        float: right;
        font-size: 1.375rem;
        line-height: 1.1rem;
        text-align: right;
    }
    #fon {
        top: 6.5rem;
        right: 5rem;
        font-size: 1rem;
    }


    #slider {
        margin: 3rem 0 0;
    }
    #slider .slider-image {
        height: 20rem;
    }
    #contentainer {
        width: 48rem;
        margin: 3rem auto;
    }
    #footer-top {
        width: 48rem;
    }
    #servicenavigation {
        padding-top: 4.5rem;
    }
    #meta-navigation {
        width: 48rem;
    }
    #footer-bottom {
        width: 48rem;
    }



    #content-left {
        display: block;
        float: left;
        width: 27.5%;
    }
    #content-left #subnavigation,
    #content-left button#anfrage {
        display: block;
    }
    #content-right {
        float: left;
        width: 72.5%;
        padding-left: 3rem;
    }

    /* subnavigation */

    #subnavigation {
        background: #fff;
    }
    #subnavigation h6 {
        font-size: 1rem;
        margin: 0;
    }
    #subnavigation h6 a {
        display: block;
        color: #fff;
        text-decoration: none;
        background-color: #c6ab8e;
        border: none;
        padding-left: 1rem;
        line-height: 2rem;
        font-weight: 600;
    }
    #subnavigation ul {
        margin: 0;
        padding: 0;
        list-style-type: none;

    }
    #subnavigation > ul {
        border-bottom: 1px solid  #c6ab8e;
    }
    #subnavigation ul li {

    }
    #subnavigation ul li a {
        display: block;
        color: #666;
        text-decoration: none;
        border-top: 1px solid  #c6ab8e;
        padding-left: 1rem;
        line-height: 2rem;
    }
    #subnavigation ul li.parent > a {
        font-weight: 600;
    }
    #subnavigation ul li.parent > a:hover,
    #subnavigation ul li > a.active {
       color: #000;
        background: url('../Icons/subnavi-aktiv-mocca.png') 0.35rem center no-repeat #fff; 
    }
    #subnavigation ul ul {
        border-top: 1px solid  #c6ab8e;
    }
    #subnavigation ul ul li a {
        background-color: #fff;
        border: none;
    }
    #subnavigation ul ul li a:hover {
        color: #fff;
        background:  #c6ab8e;
    }
    #subnavigation ul ul li a.active,
    #subnavigation ul ul li a.active:hover {
        color: #000;
        background:  #f3eee8;
    }

    /* products list */

    /* products details */

    /* displayfinder */

    .displayfinder-button {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -11rem;
        margin: auto 0;
        width: 14rem;
        height: 12.5rem;
        transition-property: right;
        transition-duration: 200ms;
        text-align: left;
        background-size: 1.75rem;
        background-position: left 0.75rem center;
    }
    .displayfinder-button.lang-1 {
        background-size: 1.75rem;
        background-position: left 0.75rem center;
    }
    .displayfinder-button.lang-2 {
        background-size: 1.75rem;
        background-position: left 0.75rem center;
    }
    .displayfinder-button.lang-3 {
        background-size: 1.75rem;
        background-position: left 0.75rem center;
    }

    .displayfinder-button-text {
        width: 15rem;
        font-size: 0.875rem;
        line-height: 1.5rem;
    }

    /* grids */

    /* .grid-ce { margin-left: -1rem; margin-right: -1rem; } */

    .grid-ce > .grid-row {
        gap: 2.5rem;
    }

    .grid-25 { float: left; width: 25%; padding-left: 1rem; padding-right: 1rem; }
    .grid-33 { float: left; width: 33%; padding-left: 1rem; padding-right: 1rem; }
    .grid-40 { float: left; width: 40%; padding-left: 1rem; padding-right: 1rem; }
    .grid-50 { float: left; width: 50%; padding-left: 1rem; padding-right: 1rem; }
    .grid-60 { float: left; width: 60%; padding-left: 1rem; padding-right: 1rem; }
    .grid-66 { float: left; width: 66%; padding-left: 1rem; padding-right: 1rem; }
    .grid-75 { float: left; width: 75%; padding-left: 1rem; padding-right: 1rem; }

}