/* Einheitlicher Header und Logo auf sämtlichen Seiten */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
.nav,.nav.scrolled{height:82px!important}
.nav .logo-brand{display:flex;align-items:center;flex:0 0 auto;line-height:0;font:inherit}
.nav .logo-brand img,.nav.scrolled .logo-brand img{display:block;width:230px;max-height:68px;height:auto;object-fit:contain;transform:none;transform-origin:left center}

/* Friedenseiche-Untermenü */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-parent{display:flex;align-items:center;gap:7px}
.nav-parent .nav-chevron{font-size:.78em;transition:transform .25s}
.nav-submenu{position:absolute;top:calc(100% + 17px);left:50%;width:210px;padding:10px;background:rgba(251,250,246,.98);color:#172e28;border:1px solid rgba(23,46,40,.12);border-radius:13px;box-shadow:0 16px 42px rgba(13,41,34,.16);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .22s,transform .22s,visibility .22s}
.nav-submenu:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px}
.nav-submenu a{display:block;padding:10px 12px;border-radius:8px;white-space:nowrap;font-size:.78rem}
.nav-submenu a:after{display:none}
.nav-submenu a:hover,.nav-submenu a.active{background:#f1efe8}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-dropdown:hover .nav-chevron,.nav-dropdown:focus-within .nav-chevron{transform:rotate(180deg)}

@media(max-width:900px){
  .nav,.nav.scrolled{height:72px!important}
  .nav .logo-brand img,.nav.scrolled .logo-brand img{width:185px;max-height:55px;filter:none;transform:none}
  .nav.open .nav-dropdown{display:block;width:100%}
  .nav.open .nav-parent{display:flex;width:max-content}
  .nav.open .nav-submenu{position:static;width:auto;margin:12px 0 0;padding:0 0 0 18px;background:transparent;color:rgba(255,255,255,.72);border:0;border-left:1px solid rgba(255,255,255,.25);border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .nav.open .nav-submenu:before{display:none}
  .nav.open .nav-submenu a{padding:7px 14px;font:500 1rem/1.35 "Instrument Sans",sans-serif}
  .nav.open .nav-submenu a:hover,.nav.open .nav-submenu a.active{background:transparent;color:#fff}
  .nav.open .nav-chevron{transform:none}
}
@media(max-width:430px){.nav .logo-brand img,.nav.scrolled .logo-brand img{width:150px}}

/* Ruhiges, ausbruchsicheres Vollbildmenü auf kleinen Displays */
@media(max-width:900px){
  .nav.open .nav-links{
    inset:104px max(24px,6vw) auto!important;
    width:auto!important;
    max-height:calc(100dvh - 120px);
    padding:14px 0 34px;
    gap:clamp(16px,2.8vh,24px)!important;
    overflow-x:hidden;
    overflow-y:auto;
    font-size:clamp(2rem,8vw,2.65rem)!important;
    line-height:1.08!important;
    animation:mobileMenuIn .42s cubic-bezier(.2,.8,.2,1) both;
  }
  .nav.open .nav-links>a,.nav.open .nav-parent{max-width:100%;white-space:normal!important}
  .nav.open .nav-dropdown{max-width:100%}
  .nav.open .nav-parent{width:100%;justify-content:space-between;gap:14px}
  .nav.open .nav-chevron{flex:0 0 auto;margin-right:2px}
  .nav.open .nav-submenu{margin-top:10px;padding-left:18px}
  .nav.open .nav-links>a,.nav.open .nav-links>.nav-dropdown{opacity:0;transform:translateY(20px);animation:mobileMenuItemIn .46s cubic-bezier(.2,.8,.2,1) forwards}
  .nav.open .nav-links>:nth-child(1){animation-delay:.08s}
  .nav.open .nav-links>:nth-child(2){animation-delay:.14s}
  .nav.open .nav-links>:nth-child(3){animation-delay:.20s}
  .nav.open .nav-links>:nth-child(4){animation-delay:.26s}
  .nav.open .nav-submenu a{opacity:0;transform:translateX(-10px);animation:mobileSubmenuItemIn .38s cubic-bezier(.2,.8,.2,1) forwards}
  .nav.open .nav-submenu a:nth-child(1){animation-delay:.32s}
  .nav.open .nav-submenu a:nth-child(2){animation-delay:.38s}
  .nav.open .nav-submenu a:nth-child(3){animation-delay:.44s}
  .nav.open .menu span{position:absolute;left:10px;top:21px;width:24px;height:1px;margin:0!important;transform-origin:center}
  .nav.open .menu span:first-child{transform:rotate(45deg)!important}
  .nav.open .menu span:last-child{transform:rotate(-45deg)!important}
}
@keyframes mobileMenuIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mobileMenuItemIn{to{opacity:1;transform:none}}
@keyframes mobileSubmenuItemIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nav.open .nav-links,.nav.open .nav-links>a,.nav.open .nav-links>.nav-dropdown,.nav.open .nav-submenu a{animation:none;opacity:1;transform:none}}