/* ⋮-Zeilenmenü — die HR-Fassung.
   Zweitfassung zur ausgereiften Recruiting-Fassung (recruiting/public/jobs.html): ein
   `require` über die Repo-Grenze würde beide Auslieferungen verkoppeln. Der Kopplungstest
   tests/zeilen-menu-eine-quelle.test.js hält die Klassennamen gleich.
   Nur Tokens, keine Rohwerte — die Datei wird in beiden Modi geladen. */
.zeilen-menu-wrap { position: relative; flex: 0 0 auto; }

.zeilen-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r-xs);
  color: var(--ink-3); cursor: pointer;
}
.zeilen-menu-btn:hover { background: var(--bg-hover); border-color: var(--border); color: var(--ink); }
.zeilen-menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.zeilen-menu-btn[aria-expanded="true"] { background: var(--bg-inset); border-color: var(--border); color: var(--ink); }

/* Rechtsbündig unter dem Knopf — ausser er steht so weit links, dass das Menü aus dem Bild
   liefe. Das entscheidet ZeilenMenu.umschalten() per MESSUNG, nicht per Breakpoint. */
.zeilen-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--sh-lg); padding: 6px; z-index: 60;
}
.zeilen-menu--links { left: 0; right: auto; }

.zeilen-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; font: inherit; font-size: 13px; color: var(--ink-2);
  padding: 9px 10px; border-radius: var(--r-xs); cursor: pointer;
}
.zeilen-menu button:hover,
.zeilen-menu button:focus-visible { background: var(--bg-hover); color: var(--ink); outline: none; }
.zeilen-menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
/* Symbole in --ink-3 (A-05, 19.9.2026): --ink-4 lag bei 2,50 : 1 auf der Kartenfläche, Symbole
   brauchen 3 : 1 — --ink-3 erreicht 4,56. */
.zeilen-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ink-3); }
/* Gefahr färbt Text UND Symbol — DESIGN.md-Danger-Muster. Als 13-px-Schrift erreichte --coral
   nur 4,13; --coral-text (Token der Admin-Seite, dunkel = --coral) liegt hell bei 5,74.
   Der Rückfall auf --coral gilt für Seiten ohne das Text-Token. */
.zeilen-menu button.menu-gefahr,
.zeilen-menu button.menu-gefahr svg { color: var(--coral-text, var(--coral)); }
.zeilen-menu-trenner { height: 1px; background: var(--border-light); margin: 6px 4px; }