@media only screen and (min-width: 768px) { .mainListWrapper { max-width: 48em; } }
@media only screen and (min-width: 1024px) { .mainListWrapper { max-width: 64em; } }

@media only screen and (min-width: 768px) {
    .navMenueLayer {
        box-sizing: border-box;
        padding: 0 2%;
        left: 50%;
        margin: 0 auto;
        transform: translateX(-50%);
        margin-top: -1px;
        max-width: 100%;
    }

    /*****************************************************************/
    /***********    Haupt / GlobalNavigation    **********************/
    /*****************************************************************/
    #mainnav {
        background: #EFEEEC;
    }
    .mainListWrapper {
        display: block;
        height: auto;
        position: relative;
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    #mainnav {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #mainnav #menue {
        display: none; /* nur kleine Breakpoints sichtbar */
    }

    #mainList {
        position: relative;
        margin: 0 -1rem;
        padding: 0;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
    }

    #mainList > li {
        box-sizing: border-box;
        display: inline-block;
        float: left;
        list-style-type: none;
        margin: 0;
        text-align: left;
    }
    #mainList > li.showMenue {
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    #mainList > li > a {
        background: #EFEEEC;
        color: #676767;
        display: block;
        box-sizing: border-box;
        font-family: 'OpenSansSemibold', sans-serif;
        font-weight: normal;
        height: 1.875em;
        line-height: 1.875em;
        margin: 0;
        padding: 2px 1rem;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        position: relative;
        font-size: 1em;
    }

    #mainList .showMenue > a {
        background: white;
        color: #676767;
        z-index: 1002;
        position: relative;
    }

    /* kleine Platzhalter links und rechts an der Navigation */
    #mainList > .nav4 > a {
    }

    #mainList > .nav1 > a {
        width: 100%;
    }

    #mainList > li > a > span {
        background-position: right 9px;
        background-repeat: no-repeat;
        padding-right: 22px;
    }

    #mainList > li > a::after {
        display: inline-block;
        content: ' ';
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAABGdBTUEAALGPC/xhBQAAANpJREFUGBljdg9NFlJU1JS8d/vyewYcIDS0kFNWWV397q2Lr5n+fP+x4R8Dw00X35gwbOo9QxNF335/der3v99X3H3jtZkY/jNsBCpk+f//3zJnn+hwZE1ugbFiP7//3M/w/78OAyPjFUlhxrvM929fPq6srs/4//9/R0ZGhkAlNb2b929dvgpS/Of3331AA7VBitk52ZzWLFvwiRlk4r1blw6gaFLXe/Pv778pyIq3r57/GqQWrAFdE1ChN1BMDGYyTDGKBhRNDP8dsCkGqcEKXLxjMkGhg00SAA03anPfg+T3AAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        background-position: center;
        width: 0.9em;
        height: 0.7em;
        transition: transform 0.75s ease;
    }
    #mainList > li.aktiv > a::after,
    #mainList > li.showMenue > a::after {
        transform: rotateX(180deg);
    }

    /*****************************************************************/
    /***********    Ausklapp Menues         **************************/
    /*****************************************************************/
    html.js .navMenueLayer {
        height: 0;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: auto;
        visibility: hidden; /* schliessen */
        z-index: -10;
    }

    /* JS hover */
    li.showMenue .navMenueLayer {
        /* hier wird eine Höhe gesetzt, allerdings wird diese per JS wieder überschreiben */
        opacity: 1;
        overflow: visible !important;
        padding-bottom: 1.25em;
        visibility: visible; /* oeffnen */
        z-index: 1001;
    }

    .navMenueLayer {
        background-color: white;
        color: #333;
        overflow: hidden;
        position: relative;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        width: 400%;
    }

    .navMenueLayer h1,
    .navMenueLayer h2 {
        font-family: 'OpenSansSemibold', sans-serif;
        font-size: 0.875em;
        font-weight: 400;
        line-height: 1.1;
        margin: 0 0 0.5em 1em;
        padding: 0;
        /*text-overflow:ellipsis;*/
    }

    /* NEU 2018-07
	.navMenueLayer h2 {
        font-family: 'Verdana', sans-serif;
        font-size: 0.75em;
        font-weight: bold;
    }*/

    .navMenueLayer h1 {
        margin: 0 0 1em 0;
    }

    .navMenueLayer ul {
        font-family: "Verdana", sans-serif;
        font-size: 0.75em;
        font-weight: normal;
        list-style-type: none;
        margin: 0 0 2em 0.2em;
        padding: 0;
    }

    .navMenueLayer .navCol ul {
        /* Changes for new hover nav */
        position: absolute;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        display: none;
        z-index: 1;
        padding: 0.8rem 1.4rem;
        left: -1.4rem;
        margin: 0;
    }
    .navMenueLayer .navCol ul.open {
        display: block;
    }

    .navMenueLayer .navCol ul:before {
        position: absolute;
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        border-top-color: transparent;
        border-top-width: medium;
        border-right-color: transparent;
        border-right-width: medium;
        border-bottom-color: transparent;
        border-bottom-width: medium;
        border-left-color: transparent;
        border-left-width: medium;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-bottom-color: #FFF;
        border-width: 1rem;
        margin-left: -1rem;
    }

    .navMenueLayer li {
        line-height: 1.3em;
    }

    .navMenueLayer a {
        color: #000000;
        outline: none;
        text-decoration: none;
    }

    .navMenueLayer a:hover,
    .navMenueLayer a:active,
    .navMenueLayer a:focus {
        color: #E1141C;
    }

	/*NEU 2018-07 */
    .navMenueLayer .besuchenSie h3 {
        font-size: 0.75em;
        color: #676767;
        text-transform: uppercase;
        margin-bottom: 1em;
        display: block;
        font-weight: normal;
    }

    .navMenueLayer .navCol a.navMenue {
        display: flex;
        align-items: center;
        justify-content: center;
        border-style: solid;
        border-width: 2px;
        border-color: #E1141C;
        background: #FFF url("/img/new-assets/red_chevron_nav.svg") no-repeat scroll 95% center;
        color: #E1141C;
        padding: .7rem 1.5rem;
        border-radius: 0;
        height: 2em;
        margin-bottom: 0.5rem;
        text-align: center;
        font-size: 95%;
    }

    .navMenueLayer .navCol a.navMenue:hover {
        background: #E1141C url("/img/new-assets/red_chevron_nav_w.svg") no-repeat scroll 95% center;
        color: #FFF;
        font-size: 95%;
    }

    a.noChevron {
      background: #FFF url(none) !important;
    }

    a.noChevron:hover {
      background: #E1141C url(none) !important;
      color: #FFF;
    }

    .navMenueLayer li a {
        display: block;
        padding: .6em 0 .6em 2em;
        border-top: 1px solid #676767;
        background: rgba(0,0,0,0) url(/img/new-assets/red_chevron.svg) no-repeat scroll center left;
    }

    
    .navMenueLayer .navCol li:first-child a {
        border-top: none;
    }

    .navMenueLayer li a:hover,
    .navMenueLayer li a:active,
    .navMenueLayer li a:focus {
        color: #E1141C;
    }

    .navMenueLayer .banner h2 {
        background-color: #D85F49;
        height: 2em;
        line-height: 2em;
    }

    /* "gehe zu ..." nur anzeigen, wenn man die Menues per KLICK öffnet */
    .no-touch .onHover .navMenueLayer .geheZu,
    .no-js .geheZu {
        height: 0.5em;
        padding: 0;
        visibility: hidden;
    }

    .navMenueLayer .geheZu {
        display: block;
        margin: 0 0 20px 0;
        padding: 20px 0 0 0;
        width: 98%;
        text-align: left;
    }

    .navMenueLayer .geheZu a {
        display: inline-block;
        margin: 0 auto 0 auto;
        padding: 0 0 0 14px;
        font-family: OpenSansSemibold;
        background: rgba(0,0,0,0) url("/img/new-assets/red_chevron.svg") no-repeat scroll center left;
        font-size: 0.9em;
        color: #E1141C;
    }

    .navMenueLayer .geheZu a h1 span {
        display: inline-block;
    }

    .navMenueLayer .geheZu a:hover h1 span,
    .navMenueLayer .geheZu a:focus h1 span,
    .navMenueLayer .geheZu a:active h1 span {
        text-decoration: underline;
    }

    .navMenueLayer .geheZu a h1 span.klein {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAYAAAAx8TU7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI2OUZDOTAzNTU2QzExRTZBQjdBOUYyNjI5MUZENjYyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI2OUZDOTA0NTU2QzExRTZBQjdBOUYyNjI5MUZENjYyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjY5RkM5MDE1NTZDMTFFNkFCN0E5RjI2MjkxRkQ2NjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjY5RkM5MDI1NTZDMTFFNkFCN0E5RjI2MjkxRkQ2NjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7lHtmUAAAAcElEQVR42mLYwMDwFIhL/v//zwDDLAwMDElAvH4jI6MEkC71B4oygmSAAuZAga1AvBmIU8CCIACU0AZSO4H4LBMDAvwE4h9AzMMEVWUCpI6BVAGxJxNQwBPIOAjES4E4AmjRLwagc14BcRGykwACDADu2zLio3rfmgAAAABJRU5ErkJggg==');
        background-position: 0 4px;
        background-repeat: no-repeat;
        padding: 0 0 0 10px;
        text-transform: none;
        /*background-image: url('img/arrow-right.png');*/
    }

    .navMenueLayer .geheZu a h1 span.klein path {
        fill: #ff0000;
    }

    .navMenueLayer .besuchenSie {
        clear: both;
        padding-top: 1px;
    }

    .navMenueLayer .besuchenSie h3 {
        margin-bottom: 2em;
    }
    .navMenueLayer .besuchenSie h3:before {
        border-top: 1px solid #E1141C;
        padding-bottom: 1em;
        content: ' ';
        display: block;
    }

    .besuchenSie li a:hover,
    .besuchenSie li a:focus,
    .besuchenSie li a:active {
        background-color: transparent;
    }

    .besuchenSie .linkintern {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAYAAAAx8TU7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI2OUZDOTAzNTU2QzExRTZBQjdBOUYyNjI5MUZENjYyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI2OUZDOTA0NTU2QzExRTZBQjdBOUYyNjI5MUZENjYyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjY5RkM5MDE1NTZDMTFFNkFCN0E5RjI2MjkxRkQ2NjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjY5RkM5MDI1NTZDMTFFNkFCN0E5RjI2MjkxRkQ2NjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7lHtmUAAAAcElEQVR42mLYwMDwFIhL/v//zwDDLAwMDElAvH4jI6MEkC71B4oygmSAAuZAga1AvBmIU8CCIACU0AZSO4H4LBMDAvwE4h9AzMMEVWUCpI6BVAGxJxNQwBPIOAjES4E4AmjRLwagc14BcRGykwACDADu2zLio3rfmgAAAABJRU5ErkJggg==');
    }

    .besuchenSie .linkextern {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4REE3REMzNTU2RDExRTZBNTU4RkE4RUQ4MTNCODREIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQ4REE3REM0NTU2RDExRTZBNTU4RkE4RUQ4MTNCODREIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDhEQTdEQzE1NTZEMTFFNkE1NThGQThFRDgxM0I4NEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDhEQTdEQzI1NTZEMTFFNkE1NThGQThFRDgxM0I4NEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5tt9fQAAAAkElEQVR42mL8//8/AzLYyMi4AEjFw/iMGxgYHiDJNwHxCiDWAuKtQMwLUvAZyLCFKngKxExAfByI+4G4GcT56////wUQBrK/A/E2IF4N5E8G0o+YGFBBOxBfB+IKEAeoSI8BaMUHkENBGMiWAGI2KBsszoKsHajjBZqJYAWMQK8JMGACRpgCPiB+z4ADAAQYAHziNFRudMvUAAAAAElFTkSuQmCC');
    }

    .besuchenSie .linkintern,
    .besuchenSie .linkextern {
        background-position: left center;
        background-repeat: no-repeat;
    }

    .besuchenSie .linkintern {
    }

    .besuchenSie .linkextern {

    }

    .menueSchliessen {
        display: none;
    }

    /******************************************
     "Besuchen Sie" Grid in %
    *******************************************/
    .besuchenSie ul {
        position: static;
        margin-left: 0;
    }

    .besuchenSie li {
        display: block;
        float: left;
        width: 23%;
        padding-right:2%;
    }

    /******************************************
     Col Grid
     verschiede Weiten der einzelenen Spalten
    *******************************************/
    .navMenueLayer .navCol > div {
        position: relative;
        float: left;
        width: 32.3%;
        margin-right: 1%;
    }

}

/*ENDE @media only screen and (min-width:768px)*/

/******************************************
*******************************************
        Weitere Breakpoints
*******************************************
****************************************/

/******************************************
 Col Grid
 verschiede Weiten der einzelenen Spalten
*******************************************/
@media only screen and (min-width: 1024px) {
    .navMenueLayer .navCol > div {
        width: 24%;
        margin-right: 1%;
    }

    #mainList > li > a {
        font-size: 1.25em;
    }
}

/******************************************
 "Besuchen Sie" Grid in %
*******************************************/
@media only screen and (min-width: 1024px) {
    .besuchenSie li {
        padding-right:2%;
        width: 18%;
    }
}

/****************************************************
   Navigationspunke
   nav-politik-verwaltung und nav-leben-in-koeln
**************************************************/
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* ColWrapper wrappt die ersten 3 navCol Spalten
    in der Navigation, damit die beiden hinteren Spalten
    in der Ansicht 480px<>768px gut umbrechen
    */
    .ColWrapper {
        /* overflow: hidden; Auskommentiert, weil die zweite Navigations-Ebene abgeschnitten wird. */
    }
}

/******************************************
 Metanavigation
*******************************************/
#metanav {
    overflow: hidden;
    position: absolute;
    text-indent: -9999em;
}
.redhover {
    background: #E1141C url("/img/new-assets/red_chevron_nav_w.svg") no-repeat scroll 95% center!important;
    color: #FFF!important;
    font-size: 95%!important;
}