/* ==========================================================================
   Header & Navigation
   Dropdown nach WildSpace-Vorbild: Der ganze Header fährt mit einer
   Fläche (Beige oder Blau) nach unten, die Unterpunkte stehen darunter.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--ivory);
  transition: color var(--dur-base) var(--ease-out);
  animation: header-in var(--dur-slow) var(--ease-soft) 300ms both;
}

/* Hintergrundfläche: wächst um die Höhe des offenen Dropdowns (--dd-h, per JS) */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--dd-h, 0px)) 0;
  background: var(--nav-bg);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              bottom 520ms var(--ease-soft),
              background-color var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled,
.site-header.is-expanded,
.site-header.is-menu-open { color: var(--nav-fg); }

.site-header.is-scrolled::before,
.site-header.is-expanded::before { opacity: 1; }

.site-header.is-scrolled:not(.is-expanded)::before {
  box-shadow: 0 1px 0 var(--nav-line);
}

.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--gutter);
  transition: height var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-h-compact); }

/* Wortmarke */
.brand { justify-self: start; }
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-fvs);
  font-size: 1.375rem;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Hauptnavigation */
.main-nav,
.main-nav__list { height: 100%; }

.main-nav__list {
  display: flex;
  gap: clamp(1.75rem, 3.2vw, 3.25rem);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item__trigger {
  padding: 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  transition: opacity var(--dur-base) var(--ease-out);
}

a.nav-item__trigger:hover { opacity: 0.6; }

/* Bei offenem Menü tritt der aktive Punkt hervor, die anderen leicht zurück */
.site-header.is-expanded .nav-item:not(.is-open) .nav-item__trigger { opacity: 0.55; }
.site-header.is-expanded .nav-item:not(.is-open) .nav-item__trigger:hover { opacity: 1; }

/* Unterpunkte – bündig unter dem jeweiligen Menüpunkt */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  padding: 0.5rem 0 2.25rem;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--dur-base);
}

.dropdown__list {
  display: grid;
  gap: 0.35rem;
  opacity: 0;
  transform: translateY(-0.4rem);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.nav-item.is-open .dropdown {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.nav-item.is-open .dropdown__list {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-out) 140ms, transform 600ms var(--ease-soft) 140ms;
}

.dropdown__list a {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.dropdown__list a:hover { opacity: 0.6; }

.dropdown__placeholder {
  padding: 0.45rem 0;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  font-style: italic;
  color: var(--nav-muted);
}

/* CTA */
.site-header__cta {
  justify-self: end;
  min-height: 2.5rem;
  border-color: var(--line-light);
}
.site-header__cta:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--blue-deep);
}
.site-header.is-scrolled .site-header__cta,
.site-header.is-expanded .site-header__cta { border-color: currentColor; }
.site-header.is-scrolled .site-header__cta:hover,
.site-header.is-expanded .site-header__cta:hover {
  background: var(--nav-fg);
  border-color: var(--nav-fg);
  color: var(--nav-bg);
}

/* Menü-Button (mobil) */
.menu-toggle {
  display: none;
  justify-self: end;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.menu-toggle__icon {
  position: relative;
  width: 1.4rem;
  height: 0.6rem;
}
.menu-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-soft), top var(--dur-base) var(--ease-soft);
}
.menu-toggle__icon span:first-child { top: 0; }
.menu-toggle__icon span:last-child { top: 100%; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { top: 50%; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { top: 50%; transform: rotate(-45deg); }

/* Mobiles Menü – fährt ebenfalls von oben herunter */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  background: var(--nav-bg);
  color: var(--nav-fg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 700ms var(--ease-soft), visibility 0s linear 700ms;
}
.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition-delay: 0s;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: calc(var(--header-h) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.mobile-menu__list { border-top: 1px solid var(--nav-line); }

.m-item {
  border-bottom: 1px solid var(--nav-line);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-soft);
}
.mobile-menu.is-open .m-item { opacity: 1; transform: none; }
.mobile-menu.is-open .m-item:nth-child(1) { transition-delay: 180ms; }
.mobile-menu.is-open .m-item:nth-child(2) { transition-delay: 240ms; }
.mobile-menu.is-open .m-item:nth-child(3) { transition-delay: 300ms; }
.mobile-menu.is-open .m-item:nth-child(4) { transition-delay: 360ms; }

.m-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-fvs);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  line-height: 1.15;
  text-align: left;
}

.m-item__plus {
  position: relative;
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}
.m-item__plus::before,
.m-item__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-soft);
}
.m-item__plus::after { transform: rotate(90deg); }
.m-item__trigger[aria-expanded="true"] .m-item__plus::after { transform: rotate(0deg); }

.m-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-soft);
}
.m-item__trigger[aria-expanded="true"] + .m-item__panel { grid-template-rows: 1fr; }
.m-item__panel-inner { overflow: hidden; }
.m-item__panel-inner > * { padding-bottom: 1.25rem; }

.mobile-menu__footer {
  display: grid;
  gap: 1.25rem;
  margin-top: auto;
  padding-top: 2.5rem;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__footer { opacity: 1; transition-delay: 420ms; }

.mobile-menu__footer .btn {
  min-height: 3.25rem;
  background: var(--nav-fg);
  border-color: var(--nav-fg);
  color: var(--nav-bg);
}

.mobile-menu__brand {
  text-align: center;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--nav-muted);
}

/* Umschalten Desktop / Mobil */
@media (max-width: 960px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .main-nav,
  .site-header__cta { display: none; }
  .menu-toggle { display: inline-flex; }
}

@media (min-width: 961px) {
  .mobile-menu { display: none; }
}

@keyframes header-in {
  from { opacity: 0; transform: translateY(-0.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { animation: none; }
  .site-header::before,
  .dropdown__list,
  .mobile-menu,
  .m-item,
  .m-item__panel { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* Unterpunkte im mobilen Menü */
.m-item__links {
  display: grid;
  gap: 0.25rem;
}
.m-item__links a {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

/* Lange Unterpunkte im Dropdown nicht umbrechen */
.dropdown__list a { white-space: nowrap; }