/* ============================================================
   PÖPPEL — Navigation
   ============================================================ */

/* Font for all menu levels */
.p, .p:hover, .p:focus, .pa, .pa:hover,
.pp, .pp:hover, .pp:focus, .ppa, .ppa:hover,
.ppp, .ppp:hover, .ppp:focus, .pppa, .pppa:hover {
    font-family: 'Open sans', tahoma, arial;
    text-decoration: none;
}

/* Mobile: hamburger button */
.button-toggle { border: 0; background-color: transparent; margin: 0; padding: 0; width: 100%; }
.button-toggle:focus { outline: 0; }

/* Fixed header with shadow on desktop */
.position       { position: relative; z-index: 100; }

/* Navbar wrapper */
.navbar {
    position: relative;
    text-align: left;
    background-color: transparent;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    min-height: 0;
    margin-right: -15px;
    margin-left: -15px;
}
.navbar-nav     { margin: 0 25px; padding-top: 25px; padding-bottom: 25px; }

/* Mobile dropdown */
.colormen       { background-color: #d51030; }
.dropdown-menu {
    display: none;
    min-width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    list-style: none;
}
.men-left  { float: none; }
.men-right { float: none; }

/* Dropdown items — mobile */
.navbar-nav .open .dropdown-menu > li > a { padding: 12px 25px 12px 0; }
li.dropdown-submenu > ul.dropdown-menu > li > a.ppp { padding: 10px; }

/* Separators */
.hoch           { margin-top: 0; }
.trenner        { width: 100%; height: 1px; overflow: hidden; background-color: #e49faa; }
.borderbottom   { border-bottom: 1px solid #e49faa; }

/* Mobile: show responno2, hide responno */
li.responno     { display: none; }
li.responno2    { display: block; }

.navbar-nav > li > a {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
}

/* Mobile menu colors */
.navbar li .p        { color: #e49faa; background-color: transparent; font-size: 18px; text-transform: uppercase; font-weight: 700; }
.navbar li .p:hover  { color: #ffffff; background-color: transparent; }
.navbar li .p:focus  { color: #ffffff; background-color: transparent; }
.navbar li .pa       { color: #ffffff; background-color: transparent; font-size: 18px; text-transform: uppercase; font-weight: 700; }
.navbar li .pa:hover { color: #ffffff; }

.navbar li .pp       { color: #e49faa; background-color: transparent; font-size: 16px; text-transform: none; font-weight: 700; }
.navbar li .pp:hover { color: #ffffff; background-color: transparent; }
.navbar li .pp:focus { color: #ffffff; background-color: transparent; }
.navbar li .ppa      { color: #ffffff; background-color: transparent; font-size: 16px; text-transform: none; font-weight: 700; }

.navbar li .ppp       { color: #666666; background-color: #ffffff; font-size: 16px; text-transform: none; font-weight: 700; }
.navbar li .ppp:hover { color: #ffffff; background-color: #e49faa; }
.navbar li .ppp:focus { color: #ffffff; background-color: #e49faa; }
.navbar li .pppa      { color: #ffffff; background-color: #e49faa; font-size: 16px; text-transform: none; font-weight: 700; }

/* ============================================================
   TABLET (768px+)
   ============================================================ */
@media (min-width: 768px) {
    .colormen   { background-color: transparent; }
    .position   {
        position: fixed;
        z-index: 100;
        box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.20);
    }

    .navbar {
        position: relative;
        background-color: transparent;
        margin: 0;
    }
    .navbar-collapse.collapse {
        text-align: center;
        overflow: visible !important;
        margin-bottom: -5px;
    }
    .navbar-nav {
        display: inline-block;
        float: none;
        margin: 0;
        padding: 0;
    }
    .navbar-collapse { padding: 0; }

    .dropdown-menu {
        display: none;
        min-width: 0;
        padding: 0;
        margin: 0;
        text-align: left;
        list-style: none;
        border: 0;
        border-radius: 0;
    }
    .dropdown-menu > li > a { padding: 6px 20px; white-space: nowrap; }

    /* Show dropdown on hover */
    .navbar ul.nav li:hover > ul.dropdown-menu { display: block; }

    /* Submenu arrow */
    .dropdown-submenu { position: relative; }
    .dropdown-submenu > a::after {
        display: block;
        content: " ";
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        float: right;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-right: -12px;
        margin-top: 7px;
    }
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: 0;
        border-top-left-radius: 0;
    }

    .men-left  { float: left !important; }
    .men-right { float: right !important; }

    li.responno  { display: none; }
    li.responno2 { display: none; }

    .hoch        { margin-top: 73px; }
    .trenner     { width: 12px; height: 1px; background-color: transparent; margin-top: 0; }
    .borderbottom { border-bottom: 0; }

    .navbar-nav > li > a { padding-top: 0; padding-bottom: 7px; padding-left: 0; padding-right: 0; }

    /* Tablet menu colors */
    .navbar li .p        { color: #666666; font-size: 12px; text-transform: uppercase; border-radius: 0; background-color: transparent; font-weight: 700; border-bottom: 3px solid transparent; transition: border-bottom 0.2s ease-in-out; }
    .navbar li .p:hover  { color: #d51030; border-bottom: 3px solid #d51030; }
    .navbar li .p:focus  { color: #d51030; border-bottom: 3px solid #d51030; }
    .navbar li .pa       { color: #d51030; font-size: 12px; text-transform: uppercase; font-weight: 700; border-bottom: 3px solid #d51030; }
    .navbar li .pa:hover { color: #d51030; border-bottom: 3px solid #d51030; }

    .navbar li .pp       { color: #666666; background-color: #ffffff; font-size: 12px; text-transform: uppercase; font-weight: 700; }
    .navbar li .pp:hover { color: #ffffff; background-color: #d51030; }
    .navbar li .pp:focus { color: #ffffff; background-color: #d51030; }
    .navbar li .ppa      { color: #ffffff; background-color: #d51030; font-size: 12px; text-transform: uppercase; font-weight: 700; }

    .navbar li .ppp       { color: #666666; background-color: #ffffff; font-size: 12px; text-transform: uppercase; font-weight: 700; }
    .navbar li .ppp:hover { color: #333333; background-color: #e5e5e5; }
    .navbar li .ppp:focus { color: #333333; background-color: #e5e5e5; }
    .navbar li .pppa      { color: #333333; background-color: #e5e5e5; font-size: 12px; text-transform: uppercase; font-weight: 700; }

    /* Shop button */
    .navbar-nav > li.shopli { background-color: #d51030; padding: 10px 10px 4px; margin-top: -10px; }
    .navbar-nav > li.shopli:hover { background-color: #dd4059; }
    .navbar li.shopli .p  { color: #ffffff; font-size: 12px; border-bottom: 0 !important; }
    .navbar li.shopli .p:hover { color: #ffffff; border-bottom: 0 !important; }

    li.dropdown-submenu > ul.dropdown-menu > li > a.ppp { padding: 6px 20px; }
}

/* ============================================================
   DESKTOP (992px+)
   ============================================================ */
@media (min-width: 992px) {
    .hoch        { margin-top: 85px; }
    .trenner     { width: 18px; }
    li.responno  { display: block; }

    .navbar-nav > li > a { padding-top: 0; padding-bottom: 6px; }

    .navbar li .p        { font-size: 14px; border-bottom: 4px solid transparent; }
    .navbar li .p:hover  { font-size: 14px; border-bottom: 4px solid #d51030; }
    .navbar li .p:focus  { font-size: 14px; border-bottom: 4px solid #d51030; }
    .navbar li .pa       { font-size: 14px; border-bottom: 4px solid #d51030; }
    .navbar li .pp       { font-size: 13px; }
    .navbar li .pp:hover { font-size: 13px; }
    .navbar li .ppp      { font-size: 13px; }
    .navbar li .ppp:hover { font-size: 13px; }

    .navbar-nav > li.shopli { padding: 10px 10px 4px; }
    .navbar li.shopli .p  { font-size: 14px; }
}

/* ============================================================
   LARGE DESKTOP (1200px+)
   ============================================================ */
@media (min-width: 1200px) {
    .hoch        { margin-top: 86px; }
    .trenner     { width: 30px; }

    .navbar-nav > li > a { padding-bottom: 7px; }

    .navbar li .p        { font-size: 16px; border-bottom: 5px solid transparent; }
    .navbar li .p:hover  { font-size: 16px; border-bottom: 5px solid #d51030; }
    .navbar li .p:focus  { font-size: 16px; border-bottom: 5px solid #d51030; }
    .navbar li .pa       { font-size: 16px; border-bottom: 5px solid #d51030; }
    .navbar li .pp       { font-size: 15px; }
    .navbar li .pp:hover { font-size: 15px; }
    .navbar li .ppp      { font-size: 15px; }
    .navbar li .ppp:hover { font-size: 15px; }

    .navbar-nav > li.shopli { padding: 10px 10px 5px; }
    .navbar li.shopli .p  { font-size: 16px; }
}