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

.head-menus.mobile { overflow: inherit; position: absolute; display:flex; flex-direction: column; right: 0; top: 101px; z-index: 2; width: 100%; margin:0; padding:0; --mainmenu-mob:0; }
.head-menus.mobile .button { text-align:right; position:absolute; right: 20px; top: -48px; 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;  }
button.navbar-toggle .icon-bar { height: 4px; display: block; background-color: var(--bdzGreenNews); }
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(--bdzGreenNews); }

/* 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; }

/* Sec-Nav M-Spalte */
nav.sub-nav { background-color: var(--bdzGreen); 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: .3em; 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; }
nav.sub-nav a:hover, nav.sub-nav a.current { color: var(--bdzGreenDark); 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.3em var(--fontNav); margin-bottom: 3px; }
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(--bdzGreenNews); padding: 60px 0 100px; font-family:var(--fontNav); margin-top: 60px; color: #fff; }
footer>.container { padding: 0 15px;}
footer a { color: #fff; display: block; }
footer a:hover { color: #f0f0f0;}
/* footer .nav-header ul { display: flex; text-transform: uppercase; gap: 1em;}
 */
footer nav.sitemap { width:100% }
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(--bdzGreenDark); 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 menu */
    .nav-header { position:relative; z-index:6; }
    .nav-header.open { position:fixed; top:6px; }
    .nav-header .close-layer { position:absolute; right: 23px; top:73px; cursor:pointer; padding:10px; display:none; }
    .nav-header.open .close-layer::before { font-family: var(--fontAwesome); font-weight: 200; content: '\f00d'; font-size:40px; color:#fff; }
    .nav-header.open .close-layer { display:block; }
    .nav-header.open a { color:#fff; }
    .nav-header>ul { display: flex; gap: 8px; flex-direction: row-reverse; margin-top: 6px; font-size: clamp(.74em,1.5vw,1em)}
    .nav-header>ul>li>a { font-size: .86em; background-color: var(--bdzGreen); color: #fff; padding: .9em 1.8em; text-transform: uppercase; }
    .nav-header a.fast-finder::before { content: '\f2f2'; padding-right: 10px; }
    .nav-header a.bdz-local::before { content: '\f041'; padding-right: 10px; }
    /* Schnell finden + BDZ vor Ort */
    .header-layer { background-color: var(--bdzGreen); color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 5; padding: 0 1.2em; font-size: clamp(.8em,1.4vw,1em); overflow:auto; }
    .header-layer a { color: #fff;}
    .header-layer .logo a {margin:20px 0 0; background: url("../images/logo_bdz_weiss.svg")no-repeat; }
    .header-layer .finder {}
    .header-layer .finder h2 { font-size: 1.8em; margin-top: 1.2em;}
    .header-layer .finder p { margin: 10px 0 50px;}
    /* Schnell finden */
    .header-layer.no-2 .finder ul { display: flex; flex-wrap: wrap; row-gap: 2.6em; margin-bottom:4em; }
    .header-layer.no-2 .finder ul li { flex-basis: 33.3333%; font-size: 1.32em; }
    .header-layer.no-2 .finder a::before { padding-right: 20px; font-size: 2em; position: relative; top: 7px;}
    .header-layer.no-2 .finder a.local::before { content: '\f3c5'; }
    .header-layer.no-2 .finder a.app::before { content: '\f10b'; }
    .header-layer.no-2 .finder a.member::before { content: '\f234'; }
    .header-layer.no-2 .finder a.member-login::before { content: '\f30d'; }
    .header-layer.no-2 .finder a.change::before { content: '\f0ec'; top: 12px; }
    .header-layer.no-2 .finder a.mediathek::before { content: '\f302'; }
    .header-layer.no-2 .finder a.youth::before { content: '\f500'; }
    .header-layer.no-2 .finder a.seminar::before { content: '\f51c'; }
    .header-layer.no-2 .finder a.archive::before { content: '\f1ea'; }

    /* Schnell finden + BDZ vor Ort */
    .header-layer.no-1 .finder.local .items { display: grid; grid-template-columns: repeat(5,1fr); column-gap: 2.6em; row-gap: 1em; margin-bottom:2.6em;}
    .header-layer.no-1 .finder.local li { font-size: .83em; margin-bottom: .4em;}
    .header-layer.no-1 .finder.local h4 { font-size: 1.12em;margin-bottom: .6em; }
    .header-layer.no-1 .finder.local .items>hr { grid-column: 1/-1; border-style: dotted; justify-self: center; margin-right: 3%; width: 96%; }

    /* 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; }

    /* 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:85px;}
    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; }

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

    /* Main Menu Nav 2 */
    nav .nav-sec { display: none; max-height: 0; padding: 4em 1em; overflow: hidden; color: #fff; position: absolute; left:0; width:100%; background-color: var(--bdzGreen); z-index:2; }
    nav .nav-sec a {color: #fff;}
    nav .dropdown-menu { display: flex; }
    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(--gapContent); border-right: 1px dotted; min-height: 400px; }
    nav .nav-sec .nav-intro h4 { font-size: 1.3em; text-transform:uppercase; }
    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(--bdzGreen); 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(--gapContent);}
    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(--gapContent); }
    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;}

    /* Sec-Nav M-Spalte */


    /* Footer */
    footer .footer-items {display: flex; justify-content: space-between; }
    footer nav.sitemap ul { display: flex; flex-wrap: wrap; gap: 7.5%; margin-right: 1.5em;  hyphens: auto;}
    footer .nav-footer { flex-direction: column; }
}

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

    /* Fix-Nav */
    header.fixed .logo a { width: 196px; height: 70px; top: -20px; }

    nav.sub-nav { font-size: clamp(.9em,1.4vw,1em);}

}

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

}

@media (min-width: 1680px) {

    /* Breadcrumb */
    .breadcrumb ol { }

    /* Main Menu Nav 2 */
    nav .dropdown-menu { width: 1680px; margin: 0 auto; }

    /* Schnell finden + BDZ vor Ort */
    .header-layer .finder { width: 1680px; margin: 0 auto;}

    /* Footer */
    footer>.container {}

}