body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}


/* Hamburger Button */
.hamburger {
  position: absolute;
  top: 24px;
  right: 0px;
  width: 60px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1001; /* über dem Menü */
}

/* Die 3 Linien */
.hamburger span:not(.menu-label) {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 4px;
  background: #1280A3;
  border-radius: 2px;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s linear;
}

.hamburger span:nth-child(1) { top: 4px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 38px; }

/* Zustand: offen => X */
.hamburger.is-open span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}
.menu-label {
  position: absolute;
  bottom: -19px;
  font-size: 15px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: #1280A3;
  pointer-events: none;
  left: 0;
}
.hamburger.is-open span:not(.menu-label) {
	background-color: #FE05DF;
}
.hamburger.is-open .menu-label {
  
  color: #FE05DF;
}
/* Flyout */
#menuToggle {
  
}

#flyout {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  background: white;
  color: red;

  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1000;

  overflow: hidden;      /* <<< NICHT scrollen lassen */
  isolation: isolate;    /* sauberer Layer-Stack */
}

#flyout.open {
  transform: translateX(0);
}

/* Hintergrundbild immer vollflächig */
#flyout::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image: url("img/temp/beneteau_ladys_wide.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.1;

  pointer-events: none;  /* <<< wichtig: nichts blockieren */
  z-index: 0;
}

/* Scrollbereich */
#flyout .flyout-content {
  position: relative;
  z-index: 1;

  height: 100%;
  overflow-y: auto;                 /* <<< scrollt NUR hier */
  -webkit-overflow-scrolling: touch;

  /* Platz oben, damit Button/Hamburger nicht überlappt */
  padding: 0 100px 0 0;
}

/* Liste */
#flyout ul {
  list-style: none;
  margin: 0;
  padding: 0; /* padding kommt vom .flyout-content */
}
#flyout ul li {
	float: none;
}
#flyout a {
  color: #1280A3;
  text-decoration: none;
  font-size: 18px;
  font-weight: 300;
  display: block;
  padding: 3px 0;
}
#flyout .current_page_item a,
#flyout a:hover {
  color: #FE05DF;
}

/* Falls du closeMenu noch nutzt */
#closeMenu {
  position: fixed;  /* <<< damit er nicht mitscrollt */
  top: 20px;
  right: 20px;
  font-size: 24px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 1001;
}

.menu_slide {
	margin-top: 100px;
	margin-bottom: 100px;
}
.menu_slide h2 {
	font-family: 'Ubuntu';
	color: #1280A3;
	text-transform: uppercase;
	font-size: 2.2em;
	padding-bottom: 0px;
}
.menu_slide h2 span {
	color: #FE05DF;
	font-size: 1.3em;
}
.menu_slide h3 {
	font-family: 'Ubuntu';
	color: #1280A3;
	font-size: 2em;
	white-space: nowrap;
}
.grid_segelyachten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ueber_uns {
	padding-top: 100px;
}
.grid_ueber_uns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}