@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Red+Hat+Mono:wght@500;600;700&display=swap');
/* Mundorf Ergebnisseite – Card-Layout nach Figma (node 5470:20944).
   Gold #A88D57 · Gold Pale #F8F6F2 · Gray Dark #1D1D1F · Line #F5F5F5.
   Werte = inherit (Webflow); Mono-Labels = Red Hat Mono. */
#mundorf-results{
  --gold:#a88d57; --gold-pale:#f8f6f2; --dark:#1d1d1f; --line:#f5f5f5; --border:#eae4d7; --muted:#a3a3a3; --text:#525252;
  --mono:'Red Hat Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Inter', ui-sans-serif, system-ui, sans-serif;
  font-family:inherit; color:var(--dark); box-sizing:border-box; display:block; width:100%;
}
#mundorf-results *{box-sizing:border-box}

/* ---- Kopf: Count-Badge + Sortierung ---- */
#mundorf-results .mr-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px}
#mundorf-results .mr-count{display:flex; align-items:center; gap:8px}
#mundorf-results .mr-count-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 6px;
  border-radius:4px; background:var(--dark); color:#fff; font-size:12px; font-weight:600; letter-spacing:.9px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
#mundorf-results .mr-count-label{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.9px; text-transform:uppercase; color:var(--dark)}
/* ---- Sortier-Dropdown ----
   Das Styling kommt aus dem Webflow-Site-Stylesheet (.filter_dropdown*,
   .w-dropdown*), das auf den Finder-Seiten geladen ist. Hier nur das Minimum,
   damit es auch ohne dieses Stylesheet nicht kaputt aussieht — etwa auf den
   lokalen Testseiten in finder/. */
/* z-index: die Webflow-Klasse .filter_dropdown setzt z-index:0 auf den Wrapper.
   Der wird damit zum Stacking-Context auf Ebene 0 — die 400 der geoeffneten Liste
   gelten nur INNERHALB davon. Zeilen der Ergebnisliste (positioniert, z.B. beim
   Hover) legen sich dadurch ueber das offene Dropdown. 900 = Webflows eigener
   Default fuer .w-dropdown. */
#mundorf-results .mr-sortwrap{position:relative; z-index:900}
/* Ein OFFENER Filter haengt sonst unter der Sortier-Zeile (900), weil sein
   Wrapper auf z-index:0 festsitzt — "Sortieren nach" schien durch das Panel. */
#mundorf-results .filter_dropdown:has(.w--open){position:relative; z-index:950}
#mundorf-results .w-dropdown-list:not(.w--open){display:none}
/* .filter_dropdown_list.w--open ist ein Flex-Container (column), und die
   Webflow-Basisregel .w-dropdown-link setzt margin-left/right:auto. In einem
   Flex-Container zentriert das die Eintraege, statt sie die Panelbreite fuellen
   zu lassen — die Zeilen sitzen dann eingerueckt in der Mitte und der Hover
   deckt nur den Text ab. Marginauto abschalten, Rest kommt aus Webflow. */
#mundorf-results .mr-sortwrap .filter_dropdown_link{
  margin-left:0; margin-right:0; width:100%; text-align:left;
}
/* Aufwaerts-Pfeil hinter jedem Eintrag und hinter der Auswahl im Toggle —
   dieselbe Sprache wie im Dropdown der CMS-Produktlisten (cdn/sortkey.js).
   Sortiert wird ausschliesslich aufsteigend, der Pfeil sagt das an.
   Als Pseudo-Element und nicht als Icon-Element: so kann es beim Uebernehmen
   der Auswahl in die Toggle-Beschriftung nicht mitkopiert werden und dort
   umbrechen. currentColor via mask, damit der Hover-/Aktiv-Zustand mitgeht. */
#mundorf-results .mr-sortwrap .filter_dropdown_toggle{flex-wrap:nowrap}
#mundorf-results .mr-sortwrap .filter_dropdown_link{flex-wrap:nowrap}
#mundorf-results .mr-sortwrap .filter_dropdown_link>div{white-space:nowrap}
#mundorf-results .mr-sortwrap .filter_dropdown_label{
  display:inline-flex; align-items:center; gap:.4em; white-space:nowrap;
}
#mundorf-results .mr-sortwrap .filter_dropdown_link::after,
#mundorf-results .mr-sortwrap .filter_dropdown_label:not(:empty)::after{
  content:""; flex:0 0 auto; display:inline-block; vertical-align:-.08em;
  width:.9em; height:.9em; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Webflows Dropdown-Icon dreht sich beim Aufklappen — dieselbe Geste wie beim
   .fb-caret der Filter-Pillen, damit Sortierung und Filter gleich reagieren.
   Der Zustand haengt an .w--open, das results.js und Webflow beide setzen. */
#mundorf-results .mr-sortwrap .filter_dropdown_icon{transition:transform .2s ease}
#mundorf-results .mr-sortwrap .filter_dropdown_toggle.w--open .filter_dropdown_icon{transform:rotate(180deg)}

/* ---- Aktive-Filter-Chips ---- */
#mundorf-results .mr-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px}
#mundorf-results .mr-chip{display:inline-flex; align-items:stretch; gap:1px; border-radius:24px; overflow:hidden; font-size:13px}
#mundorf-results .mr-chip-txt{display:inline-flex; align-items:center; background:var(--gold); color:#fff; padding:6px 8px 6px 14px; white-space:nowrap; font-weight:500}
#mundorf-results .mr-chip-x{display:inline-flex; align-items:center; justify-content:center; background:var(--gold); color:#fff; border:none; cursor:pointer; padding:6px 12px 6px 7px; font-size:12px; line-height:1; font-family:inherit}
#mundorf-results .mr-chip-x:hover{background:#967d4c}
#mundorf-results .mr-clear{border:none; background:none; color:var(--gold); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; padding:6px 4px}
#mundorf-results .mr-clear:hover{text-decoration:underline}

/* ---- Ergebnis-Cards (1:1 aus Webflow .table_row / .table_cell) ---- */
#mundorf-results .mr-list{display:flex; flex-direction:column; gap:16px}
#mundorf-results .mr-card{
  display:flex; align-items:center; background:#fff; border:1px solid whitesmoke; border-radius:.5rem;
  padding:1em; text-decoration:none; color:inherit; transition:all 450ms ease;
}
#mundorf-results a.mr-card:hover{border-color:#6d6f6e}
#mundorf-results .mr-cols{display:flex; flex:1; min-width:0; gap:7em; align-items:center}
#mundorf-results .mr-col{display:flex; flex-direction:column; gap:4px; flex:1 1 0%; min-width:0}
#mundorf-results .mr-col-label{font-family:var(--mono); font-size:0.75em; font-weight:600; letter-spacing:.72px; text-transform:uppercase; color:var(--gold)}
#mundorf-results .mr-col-val{font-family:var(--sans); font-size:0.813em; line-height:1.6; font-weight:700; color:var(--dark); overflow:hidden; text-overflow:ellipsis}
#mundorf-results .mr-strong{color:#000}

#mundorf-results .mr-empty{padding:40px 20px; text-align:center; color:var(--muted); font-size:15px}

/* ---- Refine-Dropdowns (Kategorie-Filter auf der Ergebnisseite) ---- */
#mundorf-results .mr-refine{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
#mundorf-results .fb-dd{position:relative}
#mundorf-results .fb-toggle{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); color:#525252;
  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-results .fb-toggle:hover,#mundorf-results .fb-toggle.is-active{background:var(--border); border-color:var(--border)}
#mundorf-results .fb-caret{display:inline-flex; color:#525252; transition:transform .2s ease}
#mundorf-results .fb-caret svg{display:block}
#mundorf-results .fb-dd.is-open .fb-caret{transform:rotate(180deg)}
#mundorf-results .fb-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}
#mundorf-results .fb-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60; 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-results .fb-dd.is-open .fb-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-results .fb-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-results .fb-opt:hover{background:#faf8f3}
#mundorf-results .fb-opt-lbl{flex:1; min-width:0}
#mundorf-results .fb-opt-cnt{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
#mundorf-results .fb-opt.is-empty{opacity:.4; pointer-events:none}
#mundorf-results .fb-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-results .fb-cb:checked{background:var(--gold); border-color:var(--gold)}
#mundorf-results .fb-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)}
#mundorf-results .fb-range{min-width:300px}
#mundorf-results .fb-range-row{display:flex; align-items:center; gap:8px; padding:6px 8px}
#mundorf-results .fb-range-cap{font-size:13px; color:var(--text)}
#mundorf-results .fb-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-results .fb-range-sel:hover{border-color:var(--gold)}
#mundorf-results .fb-range-sel:focus,
#mundorf-results .fb-range-sel:focus-visible{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(168,141,87,.18);
}
#mundorf-results .fb-range-sel::-ms-expand{display:none}

/* ---- Breakpoints wie Webflow ---- */
@media (max-width:991px){ #mundorf-results .mr-cols{gap:2em} }
@media (max-width:767px){
  #mundorf-results .mr-cols{gap:1em; flex-wrap:wrap; align-items:flex-start}
  #mundorf-results .mr-col{flex:0 0 45%; width:45%}
}