/* ===== Filter Select (stabil & kompatibel) ===== */

/* Wrapper */
.filter-wrapper-desktop{
  padding:20px;
  background:white;            /* falls 'whitesmoke' gewünscht -> anpassen */
  border-radius:50px;
  position:relative;
  overflow:visible;
}

/* Einzelne Select-Box */
.filter-wrapper-desktop .select{
  display:flex;
  flex-direction:column;
  position:relative;
  width:250px;
  height:40px;                 /* geschlossen: nur Headerhöhe */
  overflow:visible;
  z-index:0;
}

/* Geöffnet: Höhe freigeben + über Nachbarn stapeln */
.filter-wrapper-desktop .select:focus-within{
  z-index:1000;
}

/* --- Inputs robust verstecken (zugänglich) --- */
.filter-wrapper-desktop input.selectopt[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  appearance:none !important;
}

/* --- Options (= Labels) Stil --- */
.filter-wrapper-desktop .select > label.option{
  padding:0 30px 0 10px;
  min-height:40px;
  display:flex;
  align-items:center;
  background:#f5f5f5;
  border-right:1px solid #cbcbcb;
  position:absolute;           /* geschlossen: Deckblatt */
  top:0;
  left:0;
  width:100%;
  pointer-events:none;
  order:2;
  z-index:1;
  transition:background .2s ease-in-out, color .2s ease-in-out;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
}

/* Hover */
.filter-wrapper-desktop .select > label.option:hover{
  background:#666;
  color:#fff;
}

/* Geöffnet: alle Optionen im normalen Flow + anklickbar */
.filter-wrapper-desktop .select:focus-within > label.option{
  position:relative;
  pointer-events:all;
  z-index:2;
}

/* Gewählte Option bleibt oben als Header-Zeile */
.filter-wrapper-desktop input.selectopt[type="radio"]:checked + label.option{
  order:1;
  z-index:3;
  background:#f5f5f5;
  color:inherit;
  position:relative;
}

/* Pfeil rechts im Header */
.filter-wrapper-desktop input.selectopt[type="radio"]:checked + label.option::after{
  content:'';
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #212529;
  position:absolute;
  right:10px;
  top:calc(50% - 2.5px);
  pointer-events:none;
  z-index:3;
}

/* Rechter Header-Hintergrund (Iconfläche) */
.filter-wrapper-desktop input.selectopt[type="radio"]:checked + label.option::before{
  content:'';
  position:absolute;
  right:0;
  top:0;
  height:40px;
  width:40px;
  background:#f5f5f5;
}
/* 1) Nur der Header (die checked-Option) soll im geschlossenen Zustand klickbar sein */
.filter-wrapper-desktop input.selectopt[type="radio"]:checked + label.option {
  pointer-events: all;     /* <-- wichtig */
  cursor: pointer;
}

/* 2) Beim Öffnen: alle Optionen anklickbar machen */
.filter-wrapper-desktop .select:focus-within > label.option {
  pointer-events: all;     /* war zuvor none im Closed-State */
}
/* Mobile: Boxen untereinander + volle Breite */
@media (max-width:640px){
  .filter-wrapper-desktop.d-flex{
    flex-direction:column;
    align-items:center;
  }
  .filter-wrapper-desktop .select{
    width:100%;
    margin-bottom:20px;
  }
}
/* ===== End Filter Select ===== */