/* header menu */
.header-layer { display: none; }

.head-menus.mobile { overflow: inherit; position: absolute; display:flex; flex-direction: column; right: 0; top: 130px; z-index: 2; width: 100%; margin:0; padding:0; --mainmenu-mob:0; }
.head-menus.mobile .button { text-align:right; position:absolute; right: 20px; top: -57px; z-index:4; }

.head-menus.mobile>:not(.button):not(.top-icons) { display:none; }
.head-menus.mobile .mobile-search { padding: 15px; background-color: #dadada; }
.head-menus.mobile .mobile-search .search-wrap { width:100%; line-height:30px; border:none; border-radius: 0; display: flex; }
.head-menus.mobile .mobile-search .search-wrap input { width:96%; padding: 8px 1% 8px 3%; border:none; line-height:30px; font: 1em var(--fontNav); outline: none; }
.head-menus.mobile .mobile-search .search-wrap button { display: block; width:40px; background: #fff; border-style: none none none solid; border-color: #dadada; border-width: 1px; border-radius: 0;}
.head-menus.mobile .mobile-search .search-wrap button::before { content: '\f002'; font: 300 1em var(--fontAwesome); color: #999; }

.head-menus.mobile .mobile-nav { display: none; background-color:#fff; position: relative; top: var(--mainmenu-mob); }

.head-menus.mobile .mobile-nav { position:relative; z-index:1; background-color: #fff; }
.head-menus.mobile .mobile-nav ul > li { border-top: 1px dotted #8b8b8b; margin:0 15px; }
.head-menus.mobile .mobile-nav ul > li:first-of-type { border:none; }
.head-menus.mobile .mobile-nav a { margin:0 15px; height:49px; display:flex; position:relative; align-items: center; font: 1em var(--fontNav); text-transform: uppercase; background-color:#fff; }
.head-menus.mobile .mobile-nav a.current { color:#b0b5b4; }
.head-menus.mobile .mobile-nav .back-link a::before { content: '\f053'; font: 300 1em var(--fontAwesome); padding-right: 0.3em; }
.head-menus.mobile .mobile-nav .has-sub > a::after { position:absolute; right:0; content: '\f054'; font: 300 1em var(--fontAwesome); color: #999; }
.head-menus.mobile .mobile-nav .level-1 { z-index: 3; top:0; }
.head-menus.mobile .mobile-nav .level-2 { z-index: 4; top:0; }
.head-menus.mobile .mobile-nav div[class^="level-"] { display:none; }

.head-menus.mobile .nav-header { order: 1; background-color:#fff; padding: 9px 30px 10px 30px; border-top: 1px dotted #8b8b8b; position:relative; z-index: 2; top:var(--mainmenu-mob); }
.head-menus.mobile .nav-header a { font: 0.875em var(--fontNav); color: #6c6c6c; padding: 9px 0 10px 0; }
.head-menus.mobile .nav-header ul { display: flex; justify-content: space-between; }


/* Nav Allgemein */
nav ul, .nav-header ul, .finder ul  { list-style: none; margin: 0; padding: 0; }

/* Nav Main Toggle */
button.navbar-toggle { padding: 0;  border: 0; background-color: transparent; outline: none; cursor: pointer; width: 36px; margin-top: .358em; }
button.navbar-toggle .icon-bar { height: 4px; display: block; background-color: var(--vbbaMagenta); }
button.navbar-toggle .icon-bar + .icon-bar { margin-top: 7px; }
header .head-menus .button.show-menu+.navbar { /* max-height: 100em; transition: max-height 600ms ease-in-out; */ }
header .head-menus .button.show-menu button .icon-bar { display: none; }
header .head-menus .button.show-menu button::after { content: '\f00d'; font: 300 40px var(--fontAwesome); color: var(--vbbaMagenta); }

/* Breadcrumb */
.breadcrumb {  overflow: hidden; font-size: clamp(.74em,1.62vw,1.1em); border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; line-height: 1.5em;  }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; max-width: 1680px; margin: 16px auto; padding: 0 15px; font-family: var(--fontNav);}
.breadcrumb ol a.home::before { content: '\f015'; }
.breadcrumb ol li:last-child { text-indent: -.6em;}
.breadcrumb ol li+li::before { content: '\f054'; font: 300 .87em var(--fontAwesome); margin: 0 .65em; }
.breadcrumb ol li a {cursor: pointer; }

/* Sec-Nav M-Spalte */
nav.sub-nav { background-color: var(--vbbaMagenta); font-family: var(--fontTextCond); width: 100%; padding: 2em; border-bottom: 30px solid #fff; box-sizing: border-box; }
nav.sub-nav ul { display: flex; flex-direction: column; gap: .5em; font-size: 1.1em;}
nav.sub-nav>ul>li>a { text-transform: uppercase;}
/*
nav.sub-nav li.has-sub>a { display: flex; gap: .25em; }
nav.sub-nav li.has-sub>a::after {content:'\f078'; display: block;transition: transform, 300ms; font-size:1.1em; position: relative; top: -1px;}
nav.sub-nav li.has-sub>a.open::after {content:'\f078'; transform: rotate(180deg); padding-left: .24em; }

 */
nav.sub-nav a { display: block; color: #fff !important; }
nav.sub-nav a:hover, nav.sub-nav a.current { color: var(--vbbaMagentaDark); transition: color, 200ms;}
nav.sub-nav a.current::before { content: '|'; display: inline-block; transform: scale(.9,.85); padding-right: 10px;  }
nav.sub-nav h5 { font: 1.16em var(--fontNav); margin-bottom: 15px; text-transform: uppercase; }
nav.sub-nav .level-2 {display: none; }
nav.sub-nav .level-2 ul { margin: .6em 0 .6em 1.5em; font-size: .96em;}
nav.sub-nav .level-2 ul a.current {margin-left: -.59em;}

/* Zurück */
a.backward {text-align: right; display: block; margin-bottom: 50px; }
a.backward::before {content:'\f053'; font: 300 1.2em var(--fontAwesome); padding-right: 6px; position: relative; top: 3px; }

/* Footer */
footer { background-color: var(--vbbaMagentaDark); padding: var(--innerGap) 0; font-family:var(--fontNav); margin-top: var(--innerGap); color: #fff; }
footer>.container { padding: 0 15px;}
footer .footer-items { font-size: .85em;}
footer a { color: #fff; display: block; }
footer a:hover { color: #f0f0f0;}
footer nav.sitemap { width:100% }
footer nav.sitemap ul li { display: flex; flex-direction: column; gap: .3em;}
footer nav.sitemap h5 { font: 1.3em var(--fontNav); text-transform: uppercase; margin: 38px 0 14px; }
footer nav.sitemap li>a {color: #e2e2e2;}
footer .meta { margin-top: 40px; flex-shrink: 0; font-size: 1.1em; }
footer .meta a { display: inline-block;}
footer .nav-footer { display: flex; justify-content: space-between; gap: 1.5%; }
footer .nav-footer a { display: block; border: 1px solid #fff; width: 150px; padding: 14px 0; text-align: center; font: clamp(.62em,2vw,.75em) var(--fontText); text-transform: uppercase; margin-top: 24px;}
footer .nav-footer a:hover {background-color: #fff; color: var(--vbbaMagentaDark); transition: background-color, color, 350ms; }

/* Zurück-Button */
.back { display: block; text-align: right; margin: 40px 0;}
a.back::before { content:'\f053'; padding-right: 6px; position: relative; top: 2px;}

@media (min-width: 768px) {
    /* header */
    header .container { display: grid; grid-template-columns: auto 1fr; }
    header .logo { grid-area: 1/1; }
    header .head-menus.desktop {grid-area: 1/1/-1/-1; justify-self: flex-end; display: flex; flex-flow: column; align-items: flex-end; justify-content: space-between; gap:95px;}
    header .head-menus.desktop .mobile-search { display:none; }

    /* Fix-Nav */
    header.fixed:not(.head-nav-open) { position:fixed; top:0; width:100%; background-color:#fff; z-index:4; box-shadow: 0 1px 4px 0 #666; padding: 0; }
    header.fixed .logo a { width: 138px; height: 47px; transform: translateY(44px); transition: all 400ms; margin:0; position:relative; top: -38px;}
    header.fixed .head-menus.desktop {gap: 48px; transition: gap, 450ms;}
    header.fixed nav.navbar>ul { justify-content: flex-end; }

    /* Button Wie werde ich Mitglied */
    .head-nav a {display: block; background-color: var(--vbbaMagenta); color: #fff; padding: .5em 1.4em .8em;}
    .head-nav a:hover { color: #fff;}

    /* Nav Main Toggle */
    .head-menus.desktop .button { display: none;}
    .head-menus.desktop .close-menu { position:absolute; right:clamp(52px,5vw,100px); top:clamp(20px,1.9vw,72px); cursor:pointer; padding:10px; }
    .head-menus.desktop .close-menu::before { font: 200 2.3em var(--fontAwesome); content: '\f00d'; color:#fff; }

    /* Main Menu Nav 1 */
    nav.navbar { width: 100%; font-size: clamp(.58em,1.1vw,.9em); margin-bottom: 10px;}
    nav.navbar>ul {display: flex; gap: clamp(1.2em,2.4vw,2em); max-width: 1680px; margin: 0 auto; font: 1.13em var(--fontNav); text-transform: uppercase;  }
    nav.navbar>ul>li { }
    nav.navbar>ul>li>a {color: #848484; cursor: pointer; }
    nav.navbar>ul>li>a.current { color: var(--vbbaMagenta); }

    /* Main Menu Nav 2 */
    nav .nav-sec { display: none; max-height: 0; min-height: 300px; padding: 4em 1em; overflow: hidden; color: #fff; position: absolute; left:0; width:100%; background-color: var(--vbbaMagenta); z-index:2;  }
    nav .nav-sec a {color: #fff;}
    nav .dropdown-menu { display: flex; max-width: 1680px; margin: 0 auto; }
    nav .dropdown-menu>div { flex-basis: 33.3333%;}
    nav .dropdown-menu ul li {text-transform: none; height: 50px;}
    nav .nav-sec .nav-intro { flex-basis: 26%; padding-right: var(--innerGap); border-right: 1px dotted; min-height: 400px; }
    nav .nav-sec .nav-intro h4 { font-size: 1.3em; text-transform:uppercase; color:#fff; }
    nav .nav-sec .nav-intro p { text-transform: none; margin: 15px 0 0; }
    nav .nav-sec .nav-intro a.nav-intro-link {display: block; border: 1px solid; padding: .7em 0; width: 70%; text-align:center; margin-top: 40px; }
    nav .nav-sec .nav-intro a.nav-intro-link:hover { background-color: #fff; color: var(--vbbaMagenta); transition: background-color 450ms;}
    nav .nav-sec .nav-intro a.nav-intro-link::before { content: '\f15b'; padding-right: .7em; }
    nav .nav-sec .level-1 { padding: 0 var(--innerGap);}
    nav .nav-sec [class^=level] a { font: 1.3em var(--fontTextCond); }
    nav .nav-sec .level-1>ul>li>a{ display: flex; justify-content: space-between; }
    nav .nav-sec .level-1>ul>li.has-sub>a>span.arrow::after { content: '\f054'; font-family:var(--fontAwesome);}
    nav .nav-sec .level-1 a.current span.title, nav .nav-sec .level-1 a span.title:hover { display: block;  border-bottom: 5px solid; padding-bottom: 5px; }

        /* Main Menu Nav 3 */
    nav .nav-sec .level-2 { display:none; border-left: 1px dotted #fff; padding-left: var(--innerGap); }
    nav .nav-sec .level-2 a.current, nav .nav-sec .level-2 a:hover { display: inline-block; border-bottom: 5px solid; padding-bottom: 5px; }

    /* Breadcrumb */
    .breadcrumb { line-height: unset; }
    .breadcrumb ol li:last-child { text-indent: unset;}

    /* Footer */
    footer .footer-items {display: flex; justify-content: space-between; font-size: clamp(.67em,1.2vw,.9em); }
    footer nav.sitemap ul { display: flex; flex-wrap: wrap; gap: 7.5%; margin-right: 1.2em;  hyphens: auto;}
    footer .nav-footer { flex-direction: column; }
    footer .footer-info { font-size: .9em}
}

@media (min-width: 992px) {
    a.backward { margin-bottom: 0;}

    /* Fix-Nav */
    header.fixed .logo a { width: 196px; height: 70px; top: -20px; }
    /* Sec-Nav M-Spalte */
    nav.sub-nav { font-size: clamp(.9em,1.4vw,1em);}

}

@media (min-width: 1200px) {
    header .container { display: flex; justify-content: space-between;}

}