/*
 * bk-wahl.css – Klappmenü im Muster der Startseiten-Leiste (assets/js/bk-wahl.js, 14.10.26).
 * Vorbild landingpage-neu.html .bk-nav__item::before / .bk-nav__sub: Knopf als Pille, beim Öffnen
 * wächst eine weiße Karte (zarter Verlauf, Ring, schwebender Schatten) aus dem Knopf nach unten,
 * Ecken 999 → 22 px; Punkte sind Pillen, hellblau beim Überfahren, Auswahl fett mit Haken.
 * Braucht die App-Tokens (styles.css + app-landing-bruecke.css).
 */
.bk-wahl { position: relative; display: inline-flex; flex-direction: column; z-index: 1; vertical-align: middle; }
.bk-wahl--voll { display: flex; width: 100%; }
.bk-wahl.ist-offen { z-index: 30; }
.bk-wahl::before { content: ""; position: absolute; left: -4px; right: -4px; top: -4px; bottom: -4px; z-index: 0;
  border-radius: 999px; background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%); opacity: 0;
  box-shadow: 0 0 0 1px rgba(18, 41, 77, .09), 0 16px 32px -14px rgba(18, 41, 77, .34);
  transition: bottom .2s cubic-bezier(.2, .8, .2, 1), border-radius .2s cubic-bezier(.2, .8, .2, 1), opacity .18s ease; }
.bk-wahl.ist-offen::before { bottom: calc(-1 * var(--bk-wahl-aus, 0px)); border-radius: 22px; opacity: 1; }
.bk-wahl > * { position: relative; z-index: 1; }
.bk-wahl-knopf { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; width: 100%; padding: 0 14px 0 16px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface, #fff); color: var(--text); white-space: nowrap; text-align: start;
  transition: border-color .18s ease, background .18s ease, color .18s ease; }
.bk-wahl-knopf:hover { border-color: var(--border-strong); color: var(--primary); }
.bk-wahl-knopf:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bk-wahl-text { overflow: hidden; text-overflow: ellipsis; }
.bk-wahl.ist-offen .bk-wahl-knopf { border-color: transparent; background: transparent; color: var(--primary); }
.bk-wahl-knopf svg, .bk-wahl-punkt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bk-wahl-knopf svg { transition: transform .2s ease; }
.bk-wahl.ist-offen .bk-wahl-knopf svg { transform: rotate(180deg); }
.bk-wahl-menue { position: absolute; top: 100%; left: 0; right: 0; padding-top: 4px; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.bk-wahl.ist-offen .bk-wahl-menue { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bk-wahl-punkt { font: inherit; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-mild);
  cursor: pointer; text-align: start; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.bk-wahl-punkt:hover, .bk-wahl-punkt:focus-visible { background: var(--primary-muted); color: var(--primary); outline: none; }
.bk-wahl-punkt.ist-aktiv { background: var(--primary-muted); color: var(--primary); font-weight: 600; }
/* Das ursprüngliche <select> bleibt als Datenquelle im DOM, ist aber unsichtbar. */
.bk-wahl-quelle { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) { .bk-wahl::before, .bk-wahl-menue, .bk-wahl-knopf svg { transition: none; } }