/* ============================================================================
   KIDZ.ME — Hamburger-Menü

   Abweichung von der Regel „ein Stylesheet je Seite": das hier ist ein
   gemeinsames Bauteil und liegt deshalb, wie tokens.css, quer zu den Seiten.
   Sonst müsste dasselbe CSS in jede Seitendatei kopiert werden.

   Einbinden:  <link rel="stylesheet" href="menu.css">  nach dem Seiten-CSS,
               <script src="menu.js"></script>          am Ende des <body>,
               plus den Block aus index.html.

   Farbe ist durchgängig --pink-deep (5,33:1 auf Sand, 5,96:1 auf --paper-card).
   ============================================================================ */

.menu {
  position: fixed;
  top: var(--brand-inset, 40px);
  right: var(--brand-inset, 40px);
  z-index: 50;             /* über Karten (10) und Bühne (2) */
}

/* ---------- Knopf ---------- */
.menu-knopf {
  display: grid; align-content: center; gap: 6px;
  width: 62px; height: 56px;
  padding: 0 13px;
  background: none;
  border: 1.5px solid var(--pink-deep);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.menu-strich {
  display: block; height: 2.5px; border-radius: 2px;
  background: var(--pink-deep);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
}
.menu-knopf:hover { background: var(--pink-soft); }
.menu.is-auf .menu-knopf { background: var(--pink-soft); }
.menu-knopf:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Offen: aus den drei Strichen wird ein Kreuz */
.menu.is-auf .menu-strich:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.menu.is-auf .menu-strich:nth-child(2) { opacity: 0; }
.menu.is-auf .menu-strich:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ---------- Klappe ----------
   Kein [hidden]: ein Klassenselektor mit display schlägt das UA-Regelwerk und
   die Klappe bliebe sichtbar. visibility nimmt sie zusätzlich sauber aus dem
   Zugänglichkeitsbaum, solange sie zu ist. */
.menu-klappe {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 15rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .55rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.7,.3,1),
              visibility 0s linear .2s;
}
.menu.is-auf .menu-klappe {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.menu-klappe ul { list-style: none; margin: 0; padding: 0; }
.menu-klappe a {
  display: block;
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--pink-deep);
  text-decoration: none;
  white-space: nowrap;
}
.menu-klappe a:hover { background: var(--pink-soft); }
.menu-klappe a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.menu-klappe a[aria-current="page"] { color: var(--ink-soft); cursor: default; }
.menu-klappe a[aria-current="page"]:hover { background: none; }

/* Interne Seiten: abgesetzt, damit sie nicht wie Kundenseiten aussehen */
.menu-trenner {
  margin: .45rem .8rem .3rem;
  padding-top: .45rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.menu-intern a { font-size: 1.02rem; color: var(--ink-soft); }
.menu-intern a:hover { background: var(--sand-deep); }

@media (prefers-reduced-motion: reduce) {
  .menu-strich, .menu-klappe { transition: none; }
}

/* ---------- Im Kopfbalken der Inhaltsseiten (.top) ----------
   Dort steht das Menü nicht fixiert in der Ecke, sondern IM Balken, rechts
   neben dem Logo, und ist kleiner (der Balken ist rund 58 px hoch, der große
   Knopf 56). Der Balken ist selbst sticky, das Menü bleibt also trotzdem
   beim Scrollen erreichbar. */
.top .menu { position: relative; top: auto; right: auto; margin-left: 1rem; }
.top .logo { margin-left: 0; }
.top .logo + .menu { margin-left: auto; }   /* ohne Knopf im Kopf */
.top .menu-knopf { width: 44px; height: 40px; gap: 5px; padding: 0 10px; }
.top .menu-strich { height: 2px; }
.top .menu.is-auf .menu-strich:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.top .menu.is-auf .menu-strich:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }