/* Hauptnavigation mit Menues und erweiterter Footer (SEO-Ausbau 11/2026).
   Baut auf landing-new.css auf (Variablen --black, --gold, --serif, --sans). */

.nav-links { align-items: center; }
.nav-item { position: relative; }
.nav-item > a { display: inline-block; padding: 26px 0; }

.nav-panel {
  position: absolute; top: 100%; left: -20px;
  min-width: 220px;
  background: rgba(10,10,10,0.97);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid var(--gold);
  padding: 14px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 120;
}
/* Unsichtbare Bruecke, damit das Menue beim Ueberfahren der Luecke offen bleibt */
.nav-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-item:hover > .nav-panel,
.nav-item:focus-within > .nav-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel li a {
  display: block; padding: 9px 22px;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0.01em; text-transform: none;
  color: rgba(255,255,255,0.78); text-decoration: none;
}
.nav-panel li a:hover,
.nav-panel li a:focus { color: var(--gold-light); background: rgba(255,255,255,0.03); }

/* Grosses Behandlungsmenue */
.nav-item--mega { position: static; }
.nav-panel--mega {
  left: 0; right: 0; top: 72px;
  padding: 32px 48px 26px;
  border-left: 0; border-right: 0;
}
.nav-mega {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px; max-width: 1180px;
}
.nav-mega-title {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  color: #fff; margin: 0 0 10px 22px;
}
.nav-mega-all {
  display: inline-block; margin: 18px 0 0 22px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.01em; text-transform: none;
  color: var(--gold-light); text-decoration: none;
}
.nav-mega-all:hover { color: #fff; }

/* Fuenf Menuepunkte plus mittiges Logo: Abstaende enger, damit nichts an
   die Wortmarke stoesst. */
.nav-links { gap: 26px; }
@media (max-width: 1500px) and (min-width: 901px) {
  .nav-links { gap: 20px; }
  .nav-links > li > a { letter-spacing: 0.13em; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .nav-links { gap: 14px; }
  .nav-links > li > a { letter-spacing: 0.08em; font-size: 9px; }
  nav.nav-bar { padding: 0 20px; }
  .nav-logo { font-size: 17px; letter-spacing: 0.14em; }
}

/* Mobil: Gruppen zum Aufklappen, Menue scrollt bei langen Listen */
@media (max-width: 900px) {
  body.mobile-menu-open .nav-mobile-menu {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .nav-mobile-group { border-top: 1px solid rgba(255,255,255,0.06); }
  .nav-mobile-group summary {
    list-style: none; cursor: pointer;
    padding: 14px 18px;
    text-transform: uppercase; letter-spacing: 0.16em;
    font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,0.88);
    display: flex; justify-content: space-between; align-items: center;
  }
  .nav-mobile-group summary::-webkit-details-marker { display: none; }
  .nav-mobile-group summary::after { content: '+'; font-size: 16px; color: var(--gold); letter-spacing: 0; }
  .nav-mobile-group[open] summary::after { content: '−'; }
  .nav-mobile-sub {
    margin: 10px 18px 4px; font-family: var(--serif); font-size: 17px;
    color: var(--gold-light);
  }
  .nav-mobile-menu a.nav-mobile-child {
    text-transform: none; letter-spacing: 0.01em; font-size: 14px; font-weight: 400;
    padding: 10px 18px 10px 30px; border-top: 0;
    color: rgba(255,255,255,0.75);
  }
}

/* Footer mit fuenf Spalten */
.footer-top--seo { grid-template-columns: 1.5fr 1.1fr 1.1fr 1fr 0.8fr; gap: 40px; }
.footer-nap {
  font-style: normal; margin-top: 22px;
  display: flex; flex-direction: column; gap: 12px;
  font-family: var(--sans); font-size: 12px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,0.4);
}
.footer-nap a { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-nap a:hover { color: var(--gold-light); }
@media (max-width: 1100px) {
  .footer-top--seo { grid-template-columns: 1fr 1fr 1fr; }
  .footer-top--seo > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
  .footer-top--seo { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}