/* Wird mit dem Menüfragment geladen, auch bei bereits geöffneten Seiten. */
#site-header .topbar__logo {height:46px;width:auto;}
@media(max-width:600px) {#site-header .topbar__logo {height:38px;}}

/* Website-Navigation: bestätigtes seitliches Inhaltsverzeichnis.
   Nur diese Navigation ändern; der Eintrittshinweis verwendet ebenfalls
   menuPanel/menuOverlay und behält seine eigene Anordnung. */
#menuOverlay {
  justify-content: flex-end;
  align-items: stretch;
  padding: 16px;
  background: rgba(65, 54, 42, .18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#menu {
  background: linear-gradient(145deg,#fffefb,#f2ede6)!important;
  width: min(440px, 100%);
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 30px 34px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 18px 50px #3b302222;
}
#menu .menuHeader {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;}
#menu .menuBrand {display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);opacity:1;}
#menu .menuBrand img {width:66px;height:58px;object-fit:contain;}
#menu .menuBrand span {font-family:var(--serif);font-size:19px;letter-spacing:.14em;}
#menu .menuClose {position:relative!important;inset:auto;flex-shrink:0;}
#menu .menuNav {margin-top:34px;gap:0;}
#menu .menuPrimary, #menu .menuSecondary {display:flex;flex-direction:column;gap:4px;}
#menu .menuSecondary {border-top:1px solid var(--line);margin-top:22px;padding-top:18px;}
#menu .menuNav a {
  display:flex;align-items:center;justify-content:space-between;
  box-sizing:border-box;min-height:48px;padding:10px 14px;
  margin:0 -14px;border-radius:6px;opacity:1;
  font-family:var(--serif);font-size:clamp(25px, 1.5vw + 10px, 29px);
  font-weight:400;line-height:1.3;letter-spacing:0;
  color:var(--glas-schrift);
  transition:background .18s ease,color .18s ease;
}
#menu .menuNav a::after {content:'→';font-family:var(--sans);font-size:19px;opacity:0;}
#menu .menuSecondary a {font-family:var(--sans);font-size:17px;}
#menu .menuNav a[aria-current=page] {background:var(--glas-matt);color:var(--glas-hell);}
#menu .menuNav a[aria-current=page]::after {opacity:1;}
#menu .menuSocialLinks {justify-content:flex-start;gap:22px;margin-top:auto;padding-top:34px;flex-shrink:0;}
#menu .menuSocialLinks a {align-items:center;gap:8px;padding:10px 8px;margin-left:-8px;min-height:44px;box-sizing:border-box;border-radius:6px;font-size:13px;color:var(--glas-schrift);opacity:1;}
#menu .menuSocialLinks svg {width:17px;height:17px;}
@media(hover:hover) {
  #menu .menuNav a:hover, #menu .menuSocialLinks a:hover {
    background:var(--glas-hover);color:var(--glas-hell);
    box-shadow:inset 0 2px 3px #fff8,inset 0 -2px 5px #34291e40;
  }
  #menu .menuNav a:hover::after {opacity:1;}
}
#menu a:focus-visible {outline:2px solid var(--glas-schrift);outline-offset:3px;}
@media(max-width:600px) {
  #menuOverlay {padding:0;}
  #menu {width:100%;border:0;border-radius:0;padding:calc(24px + env(safe-area-inset-top)) max(26px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(26px, env(safe-area-inset-left));}
  #menu .menuNav {margin-top:30px;}
  .topbar__logo {height:58px;}
}
@media(max-height:600px) {
  #menu .menuNav {margin-top:20px;}
  #menu .menuSocialLinks {padding-top:20px;}
}
@media(prefers-reduced-motion:reduce) {#menu .menuNav a {transition:none;}}
@media(forced-colors:active) {
  #menu .menuNav a[aria-current=page] {background:Highlight;color:HighlightText;}
}
