:root{

  --btn-top: clamp(5px, 4vw, 70px); /* 39px; */
  --btn-right: clamp(5px, 10vw, 150px); /* 40px; */
  --panel-gap: 12px;
  --panel-radius: 14px;
  --panel-bg: #ffffff;
  --panel-shadow: -8px 10px 20px rgba(0,0,0,0.32),  -6px 4px 16px rgba(0,0,0,0.15);
  --panel-filter-shadow: 
      drop-shadow(-8px 10px 20px rgba(0,0,0,0.32))
      drop-shadow(-6px 4px 16px rgba(0,0,0,0.15));
  --brand: #154662ff;
  --brand-transparent: #154662ff;
}


/* ===============================
   Menü-Button & Menü-Panel
   =============================== */



/* Button */
.menu-button {
  position: fixed;
  top: var(--btn-top);
  right: var(--btn-right);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 8px;
  background-color: var(--brand);
  background-image: url("../images/icons/MenuWhite.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  box-shadow: var(--panel-shadow);
  cursor: pointer;
  z-index: 1001;
  transition: transform .2s ease, box-shadow .2s ease;
}
.menu-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--panel-shadow);
}
.menu-button:active {
  transform: translateY(0);
  box-shadow: var( --panel-shadow);
}
.menu-button:focus {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Overlay zum Schließen */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}

/* Panel (öffnet nach unten-links vom Button) */
.menu-panel {
  position: fixed;
  top: calc(var(--btn-top) + 56px);
  right: var(--btn-right);
  width: clamp(240px, 58vw, 420px);
  max-height: min(70vh, 600px);
  overflow: auto;
  padding: 14px;
  display: grid;
  gap: var(--panel-gap);
  grid-auto-rows: min-content;

  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  background-color:  var(--brand-transparent);

  transform-origin: top right;
  transform: translateY(-8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  z-index: 1002;
  transition: transform .18s ease, opacity .18s ease;
}

/* Menü-Inhalte */
.menu-panel .menu-section h3 {
  margin: 6px 8px 6px;
  font-size: .9rem;
  letter-spacing: .02em;
  color: #ffffe6;
  text-transform: uppercase;
}

.menu-panel ul {
  list-style: none;
  margin: 0 6px 10px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.menu-panel a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #ffffe6;
  background: #008394;
  border-radius: 8px;
  transition: background .15s ease, transform .15s ease;
}

.menu-panel a:hover { 
  background: #ffffe6; 
  color: #555;
  transform: translateX(-2px); 
}

.menu-panel a:active,  .menu-panel a.active  {
  background: #ffffe6; 
  color: #555;
  transform: translateX(0); 
}




/* Geöffnet-Zustand (Checkbox steuert) */
#menuToggle:checked ~ .menu-overlay {
  pointer-events: auto;
}
#menuToggle:checked ~ .menu-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Button-Glow wenn geöffnet */
#menuToggle:checked ~ .menu-button {
  filter: brightness(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,.28);
}



/* ===============================
   Scroll Button
   =============================== */

#scrollTopBtn {
  position: fixed;
  color: white;
  bottom: 9em;
  right: var(--btn-right);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 12px;
  background-color: var(--brand);
  background-image: url("../images/icons/ScrollTopWhite.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 1001;
  transition: transform .2s ease, box-shadow .2s ease;
 
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
  opacity .3s ease,
  transform .3s ease,
  box-shadow .2s ease;
}

/* Sichtbar, wenn Klasse "show" aktiv */
#scrollTopBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hover-Effekt */
#scrollTopBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,.3);
}




/* Kleinere Screens */
@media (max-width: 640px) {
  
 /* .menu-button {
    width: 40px;
    height: 40px;
    background-size: 55%;
  } */
  .menu-panel { width: clamp(220px, 75vw, 360px); }

  #scrollTopBtn {
    visibility: hidden;
  }

}