/**
 * Burger-Menü-Knopf oben links: öffnet/schließt das Einstellungs-Panel
 * (assets/css/settings-panel.css, Logik in assets/js/burger-menu.js).
 * Ein Klick lässt das Icon von drei Balken zu einem X wechseln (Klasse
 * "is-open").
 *
 * Der Knopf muss IMMER sichtbar bleiben — auch im "unauffälliger"-Modus
 * (Einstellung "subtleBurger") wird er nur transparenter, nie komplett
 * ausgeblendet (kein display:none/opacity:0). z-index bewusst ÜBER dem
 * Drawer (16) und dessen Backdrop (15, siehe assets/css/drawers.css):
 * der Knopf bleibt dadurch auch bei geöffnetem Panel sichtbar/klickbar
 * und dient (als X) zugleich als dessen Schließen-Button — ein
 * zusätzlicher Schließen-Button im Panel selbst ist deshalb bewusst
 * NICHT vorgesehen (siehe drawers.css, .emds-drawer--left).
 *
 * Siehe MANUAL.md, Abschnitt "Einstellungen (Burger-Menü)" und
 * "Ausfahrbare Menüs (Drawer)".
 */

.burger-menu{
  position: fixed;
  top: clamp(1rem, 3vh, 1.6rem);
  left: clamp(1rem, 3vw, 1.6rem);
  z-index: 20;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(243,237,226,0.28);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.burger-menu:hover{
  border-color: rgba(216,178,106,0.6);
  background: rgba(216,178,106,0.08);
}

.burger-menu:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Mittlerer Balken; die beiden anderen sind ::before/::after darauf */
.burger-menu__bar{
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
}

.burger-menu__bar,
.burger-menu__bar::before,
.burger-menu__bar::after{
  transition: transform 0.3s ease, top 0.3s ease, background 0.3s ease;
}

.burger-menu__bar::before,
.burger-menu__bar::after{
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.burger-menu__bar::before{ top: -6px; }
.burger-menu__bar::after{ top: 6px; }

/* Optischer "geöffnet"-Zustand: Balken werden zum X. Keine Funktionslogik. */
.burger-menu.is-open .burger-menu__bar{
  background: transparent;
}
.burger-menu.is-open .burger-menu__bar::before{
  top: 0;
  transform: rotate(45deg);
}
.burger-menu.is-open .burger-menu__bar::after{
  top: 0;
  transform: rotate(-45deg);
}

/* Einstellung "Menü-Knopf unauffälliger": deutlich transparenter, damit
   er mit dem Hintergrund verschmilzt — bleibt aber sicht- und klickbar. */
body.emds-burger-subtle .burger-menu{
  opacity: 0.35;
  border-color: transparent;
  background: transparent;
}
body.emds-burger-subtle .burger-menu:hover,
body.emds-burger-subtle .burger-menu:focus-visible{
  opacity: 0.9;
}