.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(8px);
  transition:
    opacity 320ms ease,
    visibility 0ms linear 320ms;
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 320ms ease,
    visibility 0ms linear 0ms;
}

.left-overlay,
.right-overlay {
  height: 100%;
  min-width: 0;
}

a,
a:hover,
a:focus,
a:active,
a:visited {
  position: relative;
  text-decoration: none;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 1px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms ease-in;
  pointer-events: none;
}

a:hover::after,
a:focus-visible::after {
  transform: scaleX(1);
}

.footer-nav a::after,
.footer-baseline a::after,
.footer-content a::after,
.navigation-list a::after {
  content: none;
}

/* Farbe wenn Hero komplett raus ist */
body.hero-out .top-menu a,
body.hero-out body.hero-out {
  color: #936e4f;
}

/* Hamburger: die 3 Linien */
body.hero-out .hamburger span {
  background: #936e4f;
}

/* optional: falls du noch andere hamburger styles hast */
body.hero-out .hamburger {
  color: #936e4f;
}

/* optional: smooth transition */
.top-menu a,
.footer-nav a,
.footer-baseline a,
.hamburger span {
  transition:
    color 250ms ease,
    background-color 250ms ease;
}
html.menu-open,
html.menu-open body {
  overscroll-behavior: none;
  touch-action: none;
}
/* =========================================================
   FINAL DROP-IN (IDs only):
   #privacyOverlay (scrollbar) + #imprintOverlay (nicht scrollbar)
   iPhone/Locomotive safe, <=1024px stacked
   ========================================================= */

/* Gemeinsame Basis */
#privacyOverlay,
#imprintOverlay {
  position: fixed;
  inset: 0;
  z-index: 10002;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;

  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 320ms ease,
    visibility 0ms linear 320ms;

  /* iOS viewport stabil */
  height: 100dvh;
  min-height: -webkit-fill-available;

  /* default: nicht scrollbar */
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Open state */
#privacyOverlay.is-open,
#imprintOverlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 320ms ease,
    visibility 0ms linear 0ms;
}

/* NUR privacy darf scrollen */
#privacyOverlay {
  overflow-y: auto;
}

/* Panels */
#privacyOverlay .left-overlay,
#privacyOverlay .right-overlay,
#imprintOverlay .left-overlay,
#imprintOverlay .right-overlay {
  min-width: 0;

  /* WICHTIG: NICHT height:100% erzwingen -> sonst decken Panels ggf. den Background komplett ab */
  height: auto;

  padding: clamp(16px, 3vw, 40px);
  position: relative;
  z-index: 1;
}

/* killt dein margin-top nur für diese IDs */
#privacyOverlay .right-overlay,
#imprintOverlay .right-overlay {
  margin-top: 20rem !important;
  justify-self: center;
}

/* Typo nur für diese IDs */
#privacyOverlay p,
#imprintOverlay p,
#privacyOverlay h3,
#imprintOverlay h3 {
  font-size: clamp(10px, 1.2vw, 14px);
}

#privacyOverlay h3,
#imprintOverlay h3 {
  margin: 25px 0 10px;
}

/* <=1024px: stack */
@media (max-width: 1024px) {
  #privacyOverlay,
  #imprintOverlay {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    gap: clamp(16px, 3vw, 28px);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  #imprintOverlay .right-overlay,
  #privacyOverlay .right-overlay {
    margin-top: 0 !important;
  }
}

/* =========================================================
   Hintergrund sperren: wenn Privacy ODER Imprint offen ist
   ========================================================= */
html:has(#privacyOverlay.is-open),
html:has(#imprintOverlay.is-open),
html:has(#privacyOverlay.is-open) body,
html:has(#imprintOverlay.is-open) body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* =========================================================
   Locomotive / transform fix: wenn Privacy ODER Imprint offen ist
   (damit fixed sofort sichtbar ist, auch wenn du unten auf der Seite bist)
   ========================================================= */
html:has(#privacyOverlay.is-open) [data-scroll-container],
html:has(#imprintOverlay.is-open) [data-scroll-container] {
  transform: none !important;
}

/* =========================================================
   Privacy: RIGHT panel scrollbar (Desktop + Mobile)
   ========================================================= */

/* Container selbst NICHT scrollen */
#privacyOverlay {
  overflow: hidden; /* überschreibt das auto von vorher */
}

/* NUR right-overlay scrollt */
#privacyOverlay .right-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* volle Höhe innerhalb des Overlays */
  max-height: 100%;
}

/* Mobile (stack): auch hier nur right-overlay scrollt */
@media (max-width: 1024px) {
  #privacyOverlay .right-overlay {
    max-height: none; /* Content darf wachsen */
  }
}


/* 1) #menuOverlay selbst NIE scrollbar */
#menuOverlay {
  height: 100dvh;
  min-height: -webkit-fill-available;
  overflow: hidden;             /* <— kein Scroll im Overlay */
  overscroll-behavior: none;
}

/* Optional: Panels nicht scrollen (falls du wirklich GAR KEIN scroll willst) */
#menuOverlay .left-overlay,
#menuOverlay .right-overlay {
  overflow: hidden;
}

/* 2) Hintergrund sperren, wenn Menü offen */
html:has(#menuOverlay.is-open),
html:has(#menuOverlay.is-open) body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* 3) Locomotive/transform FIX: wenn Menü offen, darf der scroll-container NICHT transformiert sein */
html:has(#menuOverlay.is-open) [data-scroll-container] {
  transform: none !important;
}

/* 4) Safety: rechts niemals "weg-optimiert" werden */
#menuOverlay .right-overlay {
  display: block !important;
  min-width: 0;
}

/* 5) Mobile Layout: stacken, damit rechts definitiv sichtbar ist */
@media (max-width: 768px) {
  #menuOverlay {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-content: start;
  }

  /* Wenn der rechte Bereich auf Mobile höher ist als der Screen,
     MUSS er intern scrollen, sonst siehst du ihn nie. */
  #menuOverlay .right-overlay {
    overflow: auto; /* <— nur der rechte Bereich scrollt */
    -webkit-overflow-scrolling: touch;
  }
}