body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
}

/* Opt-in: beide Selektoren nötig, sonst bleibt der Picker nativ */
select,
::picker(select) {
  appearance: base-select;
}

select {
  border: 2px solid #30a6e6;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  background: #fff;
  transition: background 0.2s ease;
}

select:hover,
select:focus {
  background: #eef7fd;
}

select::picker-icon {
  color: #999;
}

@media (prefers-reduced-motion: no-preference) {
  select::picker-icon {
    transition: rotate 0.2s ease;
  }
  select:open::picker-icon {
    rotate: 180deg;
  }
}

::picker(select) {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0;
}

option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
}

option:nth-of-type(odd) {
  background: #fafafa;
}

option:hover,
option:focus {
  background: plum;
}

option:checked {
  font-weight: bold;
}

/* Icon nur in der Picker-Liste zeigen, nicht doppelt im geschlossenen Button */
selectedcontent .icon {
  display: none;
}

/* Fallback: Browser ohne base-select (Firefox/Safari, Stand 2026-07-28 ~68%
   global Support, nur Chromium-Familie) behalten den nativen Select-Look —
   kein JS-Ersatz, appearance:none wäre hier nur kosmetisch und würde das
   eigentliche Problem (Picker-Styling) gar nicht lösen. */
@supports not (appearance: base-select) {
  select {
    appearance: none;
  }
}