/* Burgermenü fürs Handy (≤ 760 px) – gemeinsam für alle Seiten, Logik in menu.js */
.menu-toggle { display: none; }

@media (max-width: 760px) {
  .logo img { height: 62px !important; }          /* 34 px + 2 × 35 % */
  .header .logo, .menu-toggle { position: relative; z-index: 2; }

  .menu-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px 0 0;
    font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle span, .menu-toggle span::before {
    display: block; width: 24px; height: 1.5px; background: currentColor; border-radius: 1px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .menu-toggle span { position: relative; transform: translateY(-4px); }
  .menu-toggle span::before { content: ""; position: absolute; left: 0; top: 0; transform: translateY(8px); }
  .menu-open .menu-toggle span { transform: rotate(45deg); }
  .menu-open .menu-toggle span::before { transform: rotate(-90deg); }

  /* Navigation wird zur Vollbild-Ebene */
  .header .nav {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
    /* Links am unteren Bildschirmrand – in Daumenreichweite, über der Home-Leiste */
    padding: calc(var(--gutter) + 110px) var(--gutter) calc(var(--gutter) + 24px + env(safe-area-inset-bottom));
    background: var(--bg); color: var(--fg);
    font-size: 40px; line-height: 1.15; letter-spacing: -.01em;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .header .nav a { padding: 2px 0; }
  .header .nav a[aria-current="page"] { text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .header.menu-open { z-index: 300; }            /* über Fußleiste und Bildinfos (Works) */
  .menu-open .nav { opacity: 1; visibility: visible; transition: opacity .25s ease; }
  html.menu-locked, html.menu-locked body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle span, .menu-toggle span::before, .header .nav { transition: none !important; }
}