/* Auswahlmenü (auswahl.js, Schalter cockpit-ui2). Die Klassen entstehen nur mit Schalter; Werte nur aus Tokens. */

/* Das native Feld bleibt im DOM (Wert, Prüfung, Fokus), aber unsichtbar und ohne Platz. «fixed» statt «absolute»:
   ein absolut gesetztes Feld in einer waagrecht scrollenden Liste (Projekt-Tafel) ragte aus ihr heraus und machte
   auf dem Telefon die ganze Seite breiter */
select.aw-nativ {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

/* Knopf: trägt die Klassen des Feldes (.select, .rg-select, .pb-stage …) und sieht aus wie ein Eingabefeld */
.aw-knopf {
  --color-border: var(--color-input-border);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: var(--tap);
  padding: 0 10px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-card);
  background-image: none;
  color: var(--color-card-fg);
  font: inherit;
  font-size: var(--feld-schrift);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.aw-knopf.select { width: 100%; }
.aw-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-knopf > svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-faint-fg); transition: transform 150ms ease; }
.aw-knopf[aria-expanded="true"] > svg { transform: rotate(180deg); }
.aw-knopf:hover { border-color: var(--color-fg); }
.aw-knopf:focus-visible, .aw-knopf[aria-expanded="true"] {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-ring-soft);
}
.aw-knopf[aria-invalid="true"] { border-color: var(--color-destructive); }
.aw-knopf:disabled { cursor: not-allowed; opacity: 0.55; border-color: var(--color-border); }

/* Regeln der Bereiche, die das Feld über den Tag ansprechen, gelten auch für den Knopf */
.filter-zeile > .aw-knopf { margin-bottom: 6px; width: auto; max-width: 240px; min-height: calc(var(--tap) - 4px); font-size: 13px; }
@media (max-width: 599.98px) {
  .filter-zeile > .aw-knopf { flex: 1 1 100%; max-width: none; margin: 0 0 8px; order: -1; }
}
@media (max-width: 767.98px) {
  .top-row .aw-knopf { order: 2; flex: 1 1 100%; max-width: none; min-width: 0; }
}

/* Schicht über allem (auch über Schubladen); fängt den Klick daneben */
.aw-schicht { position: fixed; inset: 0; z-index: calc(var(--z-ebene) + 5); }
.aw-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-card);
  color: var(--color-card-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.aw-suche { flex: 0 0 auto; width: auto; margin: 8px 8px 4px; }
.aw-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; outline: none; }
.aw-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 6px 10px;
  border-radius: var(--radius-s);
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aw-option-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.aw-option > svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-primary); }
.aw-option:hover, .aw-option.aw-aktiv { background: var(--color-hover); }
.aw-option[aria-selected="true"] { font-weight: 500; }
.aw-option[aria-disabled="true"] { color: var(--color-faint-fg); cursor: not-allowed; background: none; }
.aw-leer { padding: 12px 10px; font-size: 14px; color: var(--color-muted-fg); }

/* Touch: Blatt von unten, über die ganze Breite, Zeilen 44px */
.aw-schicht-blatt { background: var(--color-overlay); display: flex; align-items: flex-end; }
.aw-blatt {
  position: relative;
  width: 100%;
  max-height: 75vh;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.aw-kopf { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0 16px; }
.aw-titel { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; }
.aw-zu {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  border: 0; border-radius: var(--radius-s); background: none; color: var(--color-muted-fg); cursor: pointer;
}
.aw-blatt .aw-suche { margin: 8px 16px 4px; }
.aw-blatt .aw-liste { padding: 4px 8px 12px; }
.aw-blatt .aw-option { min-height: 44px; font-size: 16px; padding: 8px 12px; }
@media (prefers-reduced-motion: no-preference) {
  .aw-blatt { animation: aw-hoch 200ms var(--ease-out, ease); }
}
@keyframes aw-hoch { from { transform: translateY(100%); } to { transform: none; } }
/* Touch: jedes Auswahlfeld mindestens 44px hoch, auch wo der Bereich das Feld kleiner setzt */
@media (pointer: coarse) { .aw-knopf, .filter-zeile > .aw-knopf { min-height: 44px; } }