/* ============================================================================
   Aufklapp-Menü.

   Verhalten steht in static/widgets.js (`widgets.menue`), hier steht nur, wie
   es aussieht. Die Klassennamen sind der Vertrag zwischen beiden Dateien:
   `mnu-box`, `mnu-titel`, `mnu-gruppe`, `mnu-eintrag`, `mnu-label`,
   `mnu-hinweis`, `mnu-aktiv`, `mnu-gefahr`, `mnu-gesperrt`.

   JEDES var() TRÄGT EINEN RÜCKFALL. Die Seiten mit den großen Knopfleisten
   sind Altbestand (ankauf.html, gallery.html …) und laden weder app.css noch
   tokens.css. Ohne Rückfall ist `gap: var(--sp-2)` dort schlicht ungültig –
   bei den Tabellen fürs Telefon wurde daraus „StufeBaujahr", und den Fehler
   sucht man am falschen Ende.
   ============================================================================ */

.mnu-box {
  position: absolute;
  /* Die Stufe kommt aus der Ordnung (services/schichten.py). Die 1400
     stand hier als eigene Zahl und traf `panel` nur zufaellig richtig -
     eine Ordnung, die an jeder Stelle neu erraten wird, ist keine
     (VALDURA-1235). */
  z-index: var(--z-schicht-panel, 1400);
  min-width: 268px;
  max-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #d8dee9);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .20);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mnu-titel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #6b7686);
  padding: 5px 9px 6px;
}

/* Die Gruppenüberschrift trennt nach AUFGABE. Sie trägt deshalb eine Linie
   nach oben – außer die erste, die nichts von etwas trennt. */
.mnu-gruppe {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #6b7686);
  padding: 9px 9px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border, #d8dee9);
}
.mnu-gruppe:first-child,
.mnu-gruppe-erste { margin-top: 0; border-top: none; padding-top: 4px; }

.mnu-eintrag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: var(--r-sm, 7px);
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text, #2b3240);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mnu-eintrag:hover,
.mnu-eintrag:focus-visible {
  background: var(--surface, #f2f5fa);
  outline: none;
}
/* Sichtbarer Fokus, weil dieses Menü mit ↑/↓ bedient wird – ohne ihn wandert
   man blind. */
.mnu-eintrag:focus-visible { box-shadow: inset 0 0 0 2px var(--accent2, #2f52e0); }

.mnu-label { font-weight: 600; line-height: 1.3; }

/* Der Satz, den man liest, BEVOR man klickt. */
.mnu-hinweis {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted, #6b7686);
  white-space: normal;
}

.mnu-aktiv .mnu-label { color: var(--accent2, #2f52e0); }

/* Zerstörendes ist rot UND steht am Ende (das macht widgets.js). Farbe allein
   trägt nichts – dieselbe Regel wie bei den Statusfarben. */
.mnu-gefahr .mnu-label { color: var(--danger, #c0392b); }
.mnu-gefahr:hover,
.mnu-gefahr:focus-visible { background: var(--danger-soft, #fdecea); }

/* Gesperrt bleibt lesbar: Der Grund steht darunter, und der ist der ganze
   Sinn. Ausgegraut bis zur Unleserlichkeit wäre dasselbe wie weglassen. */
.mnu-gesperrt { cursor: not-allowed; }
.mnu-gesperrt .mnu-label { color: var(--muted, #6b7686); }
.mnu-gesperrt:hover { background: none; }

/* Auf dem Telefon ist ein schwebendes Menü neben einem Knopf zu klein zum
   Treffen – dort legt es sich als Blatt an den unteren Rand. */
@media (max-width: 640px) {
  .mnu-box {
    position: fixed;
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: 8px;
    max-width: none;
    min-width: 0;
    max-height: 76vh;
  }
  .mnu-eintrag { padding: 11px 10px; }
}