/**
 * Keine Level-3-Buttons in der Desktop-Ansicht
 */
ul.contentNav {
    display: none;
}


@media (max-width: 1080px) {
    
    header nav {
        display: none;
    }
    
    /******************************************************
     *                  LEVEL 1
     */
    header nav > ul {
        margin: 20px 0 0 0;
    }
    
    header .level1 > li { 
        float: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0 -20px;
    }
    
    header .level1 > li > a {
        text-decoration: none;
        border-bottom: none;
    }


    header .level1 > li.touched > a, header .level1 > li.touched > a:hover {
        text-decoration: none;
        font-weight: bold;
        background-color: #87c2ca !important;
        color: #333 !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
    }
    
    header .level1 > li > a:hover {
        color: #fff !important; 
    }
    
    header .level1 > li:first-child { 
        border-top: none;
    }

    header .level1 > li > a {
        padding: 20px 30px 20px 40px;
    }

    header {
        background-color: #fff;
    }

    header .level1 > li > a:hover {
        background-color: #013161;
    }

    header .level2 a {
        color: #013161 !important;
    }


    /******************************************************
     *                  LEVEL 2
     */
    header .level2 {
        display: none;
        max-height: none;
        overflow: visible;
        top: 0;
        right: 0;
        font-size: 1.15em;
        position: relative;
        background-color: #87c2ca;
        opacity: 1;
    }

    header .level2 {
        padding: 0 40px;
    }

    header .level2 > li {
        padding-bottom: 16px;
    }

    header .level1.touched .level2 > li:first-of-type {
        padding-top: 0;
    }

    a {
        -webkit-transition: initial;
        -moz-transition: initial;
        -o-transition: initial;
        transition: initial;
    }
    
    /******************************************************
     *                  LEVEL 3
     */
    header .level3 {
        display: none;
    }
    
    header.fixed nav { width: 100%; margin: 10px 0 0 0 !important; }
    header > div { padding: 15px; }
    header.fixed > div > div:nth-of-type(1) { float: none; width: 50%; padding: 5px 10px; }
    header.fixed .level1 > li { margin-left: -20px; }
    header .level1 > li > a { padding-left: 20px; }
    
    /**
     * Navigations-Buttons fuer Level 3 ueber dem content
     */
    ul.contentNav {
        display: block;
        padding: 30px 0 0 0;
    }
    
    ul.contentNav > li {
        list-style-type: none;
        display: block;
        float: left;
        border: 1px solid #4F4C4C;
        margin: 0 6px 6px 0;
    }
    
    ul.contentNav > li > a {
        display: block;
        background: #fff url(btn-arrow-blau.png) 10px center no-repeat;
        color: #000;
        padding: 10px 12px 10px 36px;
    }
    
    ul.contentNav > li > a.subNavListActive {
        background: #013161 url(btn-arrow-weiss.png) 10px center no-repeat;
        color: #fff;
    }
    
    /**
     * einzelne level-3-links sind mobil nicht mehr erforderlich...
     */
    section#content div.karte-buttons {
        display: none;
    }
}