/* Menü hinter der Marke (Taste J), nach Fizzys nav: natives <dialog>, nicht modal, Klick daneben
   und Escape schließen. Einträge sind Zeilen mit Symbol, Text, Zähler. */
@layer bausteine {
  .menue { position: relative; }
  dialog.menue-blatt {
    position: absolute; inset: calc(100% + .4rem) auto auto 50%; translate: -50%; margin: 0;
    width: min(20rem, calc(100vw - 1rem)); max-height: calc(100dvh - 5rem); overflow-y: auto;
    padding: .4rem; color: CanvasText; z-index: var(--z-menue);
    background: var(--glas); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--ton-4); border-radius: var(--rundung-gross); box-shadow: var(--schatten);
    opacity: 0; transform: translateY(-.3rem) scale(.97); transform-origin: top center;
    transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), display var(--dauer) allow-discrete, overlay var(--dauer) allow-discrete;
  }
  dialog.menue-blatt[open] { display: flex; flex-direction: column; gap: .15rem; opacity: 1; transform: none; }
  @starting-style { dialog.menue-blatt[open] { opacity: 0; transform: translateY(-.3rem) scale(.97); } }
  .menue-punkt { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .8rem; border-radius: var(--rundung); color: inherit; text-decoration: none; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
  .menue-punkt:hover, .menue-punkt.aktiv { background: var(--ton-2); }
  .menue-punkt .symbol { opacity: .7; flex-shrink: 0; }
  .menue-punkt .hinweis-zahl, .menue-punkt kbd { margin-left: auto; }
  .menue-punkt.gefaehrlich { color: var(--gefahr); }
  .menue-punkt.gefaehrlich .symbol { opacity: 1; }
  .menue-trenner { border: 0; border-top: 1px solid var(--rand); margin: .3rem .5rem; }
  .menue-kopf { padding: .5rem .8rem .2rem; font-size: var(--winzig); text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
  .menue-fuss { padding: .5rem .8rem .3rem; font-size: var(--winzig); opacity: .5; text-align: center; }
}