/* ==========================================================================
   Hauptmenü-Overlay
   Das Auf-/Zuklappen selbst funktioniert bereits (.nav-toggle -> body.open-nav,
   siehe main.js + .open-nav .inner-nav/.nav-bg in index.css). Diese Datei
   ergänzt nur: Blur-Hintergrund, Schließen-Button, Menüpunkt-Typografie,
   CTA-Button und den gestaffelten Einblend-Effekt beim Öffnen.
   Hintergrundfarbe (bg-secondary) bewusst unverändert gelassen.
   ========================================================================== */

/* Blur auf dem abgedunkelten linken Seitenbereich */
.nav-bg {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* GEFUNDENER ROOT CAUSE für den mobilen "window.innerWidth falsch"-Bug
   (reproduziert auf echtem Android Chrome, Galaxy S25): .inner-nav wird im
   geschlossenen Zustand per "right:-150%" (+ min-width:400px) weit nach
   rechts außerhalb des Viewports geschoben, um es zu verstecken - das
   funktioniert nur visuell (nichts clippt es), es bleibt Teil der
   layoutfähigen Fläche der Seite. .nav-overlay (der Wrapper) hatte kein
   eigenes overflow:hidden, wodurch dieses eigentlich unsichtbare Element
   trotzdem die vom Browser berechnete Seiten-/Layout-Breite aufblies (auf
   diesem Gerät exakt bis zu dem Punkt, wo .inner-nav's rechte Kante lag -
   deckt sich exakt mit den beobachteten Werten). overflow:hidden hier
   clippt es sauber, ohne die Slide-in-Animation zu beeinträchtigen (wenn
   geöffnet, steht .inner-nav ohnehin voll innerhalb dieses Wrappers). */
.nav-overlay {
  overflow: hidden;
}

.inner-nav {
  display: flex;
  flex-direction: column;
  padding: var(--gap-40, 2.5rem) var(--gap-40, 2.5rem) var(--gap-40, 2.5rem) 5rem;
  box-sizing: border-box;
}

.inner-nav-top {
  display: flex;
  justify-content: flex-end;
}

.btn-closenav {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-white, #fff);
  text-decoration: none;
  font-family: var(--font-figtree, sans-serif);
  font-weight: 700;
  font-size: var(--fs-18, 1.125rem);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.btn-closenav-icon {
  flex: none;
}

/* Gleicher "Rollo"-Effekt wie bei den Menüpunkten */
.btn-closenav-label {
  display: inline-block;
  overflow: hidden;
  line-height: 1.2;
  height: 1.2em;
}

.btn-closenav-label-inner {
  display: block;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn-closenav-label-text {
  display: block;
  line-height: 1.2;
}

.btn-closenav-label-text--out {
  color: var(--color-white, #fff);
}

.btn-closenav-label-text--in {
  color: var(--color-steelblue, #1f9cdb);
}

.btn-closenav:hover .btn-closenav-label-inner,
.btn-closenav:focus-visible .btn-closenav-label-inner {
  transform: translateY(-1.2em);
}

.btn-closenav:hover .btn-closenav-icon,
.btn-closenav:focus-visible .btn-closenav-icon {
  color: var(--color-steelblue, #1f9cdb);
}

.inner-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-40, 2.5rem);
}

.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.main-nav__link {
  display: inline-block;
  font-family: var(--font-din-2014, sans-serif);
  font-weight: 700;
  /* War vorher bei 2rem gedeckelt -> wuchs auf normalen Desktop-Breiten
     schon gar nicht mehr mit. Jetzt bis 3.5rem, auf sehr großen
     Displays (siehe Media-Query unten) sogar bis 4.5rem. */
  font-size: clamp(2.5rem, 3vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-white, #fff);
  text-decoration: none;
  /* Für den "Rollo"-Hover-Effekt weiter unten: genau eine Zeile hoch,
     alles andere wird geclippt. In em statt fix, damit es mit dem
     responsiven font-size (s.o.) mitskaliert. */
  overflow: hidden;
  line-height: 1.2;
  height: 1.2em;
}

/* Weißer Text scrollt beim Hover nach oben raus, eine blaue Kopie
   desselben Texts scrollt von unten nach. Zwei identische Textzeilen
   übereinander in einem Wrapper, der beim Hover um eine Zeilenhöhe
   nach oben verschoben wird. */
.main-nav__link-inner {
  display: block;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.main-nav__link-text {
  display: block;
  line-height: 1.2;
}

.main-nav__link-text--out {
  /* Explizit statt geerbt: ein globales a:hover (Bootstrap) ändert sonst
     kurz die Farbe des <a>, während der weiße Text noch rausrollt -> die
     "komische" fremde Blau-Farbe, die kurz aufblitzte. */
  color: var(--color-white, #fff);
}

.main-nav__item.is-current .main-nav__link-text--out {
  color: var(--color-steelblue, #1f9cdb);
}

.main-nav__link-text--in {
  color: var(--color-steelblue, #1f9cdb);
}

.main-nav__link:hover .main-nav__link-inner,
.main-nav__link:focus-visible .main-nav__link-inner {
  transform: translateY(-1.2em);
}

/* Große Displays: Panel etwas breiter, Schrift noch größer.
   .inner-nav hat in index.css eine feste max-width:750px – hier gezielt
   für große Screens überschrieben, ohne index.css selbst anzufassen. */
@media (min-width: 1600px) {
  .inner-nav {
    max-width: 900px;
    padding-left: 7rem;
  }

  .main-nav__link {
    font-size: clamp(3rem, 3.2vw, 4.5rem);
  }

  .main-nav__list {
    gap: 0.75rem;
  }
}

.main-nav__item.is-current .main-nav__link {
  color: var(--color-steelblue, #1f9cdb);
}

.main-nav__sub {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
}

.main-nav__sub-link {
  font-family: var(--font-figtree, sans-serif);
  font-size: var(--fs-18, 1.125rem);
  color: var(--color-white, #fff);
  opacity: 0.8;
  text-decoration: none;
}

.main-nav__sub-link:hover {
  opacity: 1;
}

/* Optik + Rollo-Hover kommen jetzt einheitlich von .pill-btn (siehe
   layout-tweaks.css) - gilt für diesen und den Footer-CTA-Button gleich. */

/* ---- Gestaffelter Einblend-Effekt beim Öffnen (Vorbild: hochkoenig-stein.at) ---- */
.btn-closenav,
.main-nav__item,
.main-nav__cta {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.open-nav .btn-closenav,
.open-nav .main-nav__item,
.open-nav .main-nav__cta {
  opacity: 1;
  transform: translateY(0);
}

.main-nav__item:nth-child(1) { transition-delay: 120ms; }
.main-nav__item:nth-child(2) { transition-delay: 190ms; }
.main-nav__item:nth-child(3) { transition-delay: 260ms; }
.main-nav__item:nth-child(4) { transition-delay: 330ms; }
.main-nav__item:nth-child(5) { transition-delay: 400ms; }
.main-nav__item:nth-child(6) { transition-delay: 470ms; }
.main-nav__cta { transition-delay: 540ms; }