/* Eigene Dropdowns (content/ui-select.js). Der geschlossene Button uebernimmt die Klassen bzw.
   .f-group-Regeln des nativen <select> – hier nur, was ein <button> zusaetzlich braucht. */
.uis-btn { display: block; text-align: left; }
/* Das native <select> setzt seinen Text ohne Zeilenabstand (Schrifthoehe ~1,13 em bei Archivo
   Narrow) – so bleiben die bisherigen Feldhoehen erhalten */
.uis-val { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.13; }

/* Popover: weisse Karte, grosser Radius, weicher Schatten */
.uis-pop {
    position: absolute;
    z-index: 1000;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    max-height: 320px;
    padding: 6px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 0 1px #e3e8e5, 0 2px 6px rgba(34,42,38,.06), 0 14px 36px rgba(34,42,38,.14);
    font-family: var(--font-head, 'Archivo', sans-serif);
    font-size: 15px;
    line-height: 1.2;
    color: #222a26;
    transform-origin: 50% 0;
}
.uis-pop[hidden] { display: none; }
.uis-pop.uis-up { transform-origin: 50% 100%; }

.uis-opt {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.uis-opt.uis-empty { color: #777f7b; }
.uis-opt[aria-selected="true"] { color: var(--sage-dark, #7a9085); font-weight: 600; }
.uis-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
.uis-check { flex: none; width: 16px; height: 16px; opacity: 0; }
.uis-check path { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.uis-opt[aria-selected="true"] .uis-check { opacity: 1; }

/* Hervorhebungs-Pille: Feder w=24, z=.78 (wie die Motion-Vorschau), Fallback ohne linear() */
.uis-pill {
    position: absolute;
    top: 0;
    left: 6px;
    right: 6px;
    height: 40px;
    border-radius: 12px;
    background: #eef2ef;
    opacity: 0;
    transition: transform .42s, height .42s;
    transition-timing-function: cubic-bezier(.2, .9, .3, 1);
    transition-timing-function: linear(0, .089, .277, .48, .659, .798, .896, .959, .995, 1.013, 1.019, 1.019, 1.016, 1.012, 1.008, 1.005, 1.003, 1.001, 1, 1, 1, 1);
}
.uis-pill.uis-still { transition: none; }

/* Oeffnen: kurze Skalier-/Einblend-Feder (Ueberschwingen < 2 %) */
.uis-pop.uis-in {
    animation: uis-in .42s cubic-bezier(.2, .9, .3, 1) both;
    animation-timing-function: linear(0, .076, .241, .426, .596, .735, .84, .914, .962, .991, 1.007, 1.014, 1.015, 1.014, 1.011, 1.008, 1.006, 1.004, 1.002, 1.001, 1.001, 1);
}
.uis-pop.uis-in.uis-up { animation-name: uis-in-up; }
@keyframes uis-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes uis-in-up { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .uis-pill { transition: none; }
    .uis-pop.uis-in { animation: none; }
}
@media (forced-colors: active) {
    .uis-opt.uis-active { outline: 2px solid Highlight; }
}