/* ============ Gestyltes Dropdown (dropdown.js) ============
   Ersetzt das native <select> durch ein Panel im centron-Design.
   Vorbild: Bildschirmaufnahme DS 24.08.2026 - helle Auswahlflaeche,
   hervorgehobene Zeile, weiche Kanten. Farben kommen aus den
   Design-Tokens, damit Light und Dark ohne Duplikate funktionieren.
   Ohne JS bleibt .dd-nativ sichtbar (Progressive Enhancement). */
.dd{position:relative;width:100%}
.dd .dd-nativ{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dd-knopf{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;font:inherit;font-size:.92rem;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:.62rem .75rem;cursor:pointer;
  text-align:left;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.dd-knopf:hover{border-color:var(--chip-line)}
.dd-knopf:focus-visible{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(63,178,220,.18)}
.dd-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-text.dd-platzhalter{color:var(--muted)}
.dd-pfeil{flex-shrink:0;color:var(--muted);transition:transform .18s ease}
.dd.auf .dd-knopf{border-color:var(--g2);box-shadow:0 0 0 3px rgba(63,178,220,.18)}
.dd.auf .dd-pfeil{transform:rotate(180deg)}

.dd-liste{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  max-height:290px;overflow-y:auto;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-md);
  animation:dd-auf .16s cubic-bezier(.32,.72,.4,1) both}
@keyframes dd-auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dd-liste{animation:none}.dd-pfeil{transition:none}}

.dd-eintrag{padding:.5rem .7rem;border-radius:7px;font-size:.92rem;color:var(--text);
  cursor:pointer;transition:background .12s ease,color .12s ease;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-eintrag:hover{background:var(--hover-bg)}
.dd-eintrag.gewaehlt{background:var(--dd-aktiv);color:var(--dd-aktiv-fg);font-weight:600}
.dd-eintrag[aria-disabled="true"]{color:var(--muted-2);cursor:default;background:none}

/* Auswahlfarben. Standard ist Dark (wie <html data-theme="dark">),
   der Light-Block setzt die Toene aus der Vorlage. Eigenstaendig
   definiert, weil diese Datei auch auf Seiten ohne home.css laeuft. */
:root{--dd-aktiv:rgba(63,178,220,.16);--dd-aktiv-fg:#A9E6F8}
html[data-theme="light"]{--dd-aktiv:#D4E7F1;--dd-aktiv-fg:#0B5C80}

/* Touch-Mindestgroesse: Auf schmalen Viewports muss der Ausloeser die
   44px-Trefferflaeche erreichen - auf echten Touch-Geraeten bleibt zwar
   das native <select> aktiv (siehe dropdown.js), auf schmalen Fenstern
   mit Maus wird aber dieses Panel gerendert (24.08.2026). */
@media(max-width:640px){
  .dd-knopf{min-height:44px}
  .dd-eintrag{min-height:44px;display:flex;align-items:center}
}