/* Mundorf Produktfinder – nur die Filter-Box, 1:1 nach Figma (node 1024:8323).
   Schrift wird NICHT gesetzt → erbt Webflows hinterlegte Schrift (font-family:inherit).
   Farben: Gold #A88D57 · Border/Gold24% #EAE4D7 · Text #525252 · Muted #A3A3A3 · Footer #FCFAF8 */
#mundorf-finder{
  --gold:#a88d57; --border:#eae4d7; --text:#525252; --muted:#a3a3a3; --foot:#fcfaf8;
  font-family:inherit; color:var(--text); box-sizing:border-box; display:block; width:100%;
}
#mundorf-finder *{box-sizing:border-box}

/* ---- Card ---- */
#mundorf-finder .mf-card{
  width:100%; background:#fff; border-radius:16px;
  overflow:visible;
  animation:mf-rise .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes mf-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- Oberer Bereich (Label + Pills), Padding 24 ---- */
#mundorf-finder .mf-label{
  font-family:inherit; font-weight:600; color:#000;
  font-size:9px; letter-spacing:.72px; line-height:1.5; text-transform:uppercase;
  padding:24px 24px 0;
}
#mundorf-finder .mf-bar{display:flex; flex-wrap:wrap; gap:8px; padding:12px 24px 24px}

/* ---- Pill (Dropdown-Toggle) ---- */
#mundorf-finder .mf-toggle{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  border-radius:80px; padding:8px 16px; font-size:13px; font-weight:500; line-height:1.6;
  cursor:pointer; font-family:inherit; transition:border-color .15s,background .15s;
}
#mundorf-finder .mf-toggle:hover{background:var(--border); border-color:var(--border)}
#mundorf-finder .mf-toggle.is-active{background:var(--border); border-color:var(--border)}
#mundorf-finder .mf-caret{display:inline-flex; color:var(--text); transition:transform .2s ease}
#mundorf-finder .mf-caret svg{display:block}
#mundorf-finder .mf-dd.is-open .mf-caret{transform:rotate(180deg)}
#mundorf-finder .mf-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px; border-radius:4px;
  background:var(--gold); color:#fff; font-size:13px; font-weight:500; line-height:1.6;
}

/* ---- Panel (Dropdown-Inhalt), fluide Motion ---- */
#mundorf-finder .mf-dd{position:relative}
#mundorf-finder .mf-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:40;
  min-width:300px; max-width:calc(100vw - 32px); max-height:340px; overflow:auto;
  background:#fff; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.13); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top left;
  transition:opacity .16s ease, transform .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .26s;
  pointer-events:none;
}
#mundorf-finder .mf-dd.is-open .mf-panel{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .16s ease, transform .32s cubic-bezier(.16,1,.3,1), visibility 0s;
}
#mundorf-finder .mf-opt{
  display:flex; align-items:center; gap:10px; padding:7px 8px;
  border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; color:var(--text);
  transition:background .12s;
}
#mundorf-finder .mf-opt:hover{background:#faf8f3}
#mundorf-finder .mf-opt-lbl{flex:1; min-width:0}
#mundorf-finder .mf-opt-cnt{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
#mundorf-finder .mf-opt.is-empty{opacity:.4; pointer-events:none}

/* ---- Custom Checkbox (18px, weißer Haken auf Gold) ---- */
#mundorf-finder .mf-cb{
  appearance:none; -webkit-appearance:none; flex:none; margin:0;
  width:18px; height:18px; border:1px solid var(--text); border-radius:2px; background:#fff;
  position:relative; cursor:pointer; transition:background .12s,border-color .12s;
}
#mundorf-finder .mf-cb:checked{background:var(--gold); border-color:var(--gold)}
#mundorf-finder .mf-cb:checked::after{
  content:""; position:absolute; left:5.5px; top:2px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ---- Range (Von/Bis) ---- */
#mundorf-finder .mf-panel-range{min-width:300px}
#mundorf-finder .mf-range-row{display:flex; align-items:center; gap:8px; padding:6px 8px}
#mundorf-finder .mf-range-cap{font-size:13px; color:var(--text)}
#mundorf-finder .mf-range-sel{
  flex:1; min-width:0; border:1px solid var(--border); border-radius:8px;
  padding:7px 32px 7px 10px; font-size:13px; font-family:inherit; color:var(--text);
  appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
  background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; background-size:16px;
  transition:border-color .15s, box-shadow .15s;
}
#mundorf-finder .mf-range-sel:hover{border-color:var(--gold)}
#mundorf-finder .mf-range-sel:focus,
#mundorf-finder .mf-range-sel:focus-visible{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(168,141,87,.18);
}
#mundorf-finder .mf-range-sel::-ms-expand{display:none}

/* ---- Fußzeile (Cream-Band) ---- */
#mundorf-finder .mf-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; background:var(--foot); border-radius:0 0 16px 16px;
}
#mundorf-finder .mf-reset{
  background:none; border:none; color:var(--gold); font-size:13px; font-weight:700; line-height:1.6;
  cursor:pointer; font-family:inherit; padding:0;
}
#mundorf-finder .mf-reset:hover{text-decoration:underline}
#mundorf-finder .mf-submit{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--gold); color:#fff; border:none; border-radius:80px;
  padding:8px 16px; font-size:13px; font-weight:700; line-height:1.6; cursor:pointer; font-family:inherit;
  transition:opacity .15s,transform .15s;
}
#mundorf-finder .mf-submit:hover{opacity:.92; transform:translateY(-1px)}
#mundorf-finder .mf-submit.is-empty{opacity:.45; cursor:not-allowed; transform:none; pointer-events:none}
#mundorf-finder .mf-submit-cnt{font-weight:700; opacity:.9}

@media (max-width:640px){
  #mundorf-finder .mf-bar{padding:12px 16px 20px}
  #mundorf-finder .mf-label{padding:20px 16px 0}
  #mundorf-finder .mf-foot{flex-direction:column-reverse; align-items:stretch}
  #mundorf-finder .mf-submit{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  #mundorf-finder .mf-card{animation:none}
  #mundorf-finder .mf-panel{transition:opacity .12s}
}