/* Mundorf Suche – Overlay-Widget (search.js), 1:1 nach Figma (nodes 2491:10263 ff.)
   Farben: Gold #A88D57 · Gold24 #EAE4D7 · Gold4 #FCFAF8 · Text #525252 · Dark #1D1D1F · Light #E0E0E0
   Typo:  Mono-Labels = Red Hat Mono 600 9px ls .72 · Body S = Inter 500 13px · Input = 16px
   Schrift erbt die Webflow-Schrift (font-family:inherit auf dem Root). */

#mundorf-search{
  --gold:#a88d57; --gold24:#eae4d7; --gold4:#fcfaf8;
  --text:#525252; --dark:#1d1d1f; --light:#e0e0e0; --muted:#a3a3a3;
  --ease:cubic-bezier(.16,1,.3,1);
  position:fixed; inset:0; z-index:2147483000;
  font-family:inherit; box-sizing:border-box;
}
#mundorf-search[hidden]{display:none}
#mundorf-search *{box-sizing:border-box; -webkit-font-smoothing:antialiased}

/* ---- Backdrop (Glas-Effekt: dunkel + ganz leichter Blur) ---- */
#mundorf-search .msx-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .45s ease;
}
#mundorf-search.is-open .msx-backdrop{opacity:1}

/* ---- Suchleiste (morpht von der Nav-Pille zur 640px-Bar) ---- */
#mundorf-search .msx-bar{
  position:fixed; display:flex; align-items:center; gap:8px;
  padding:0 16px; background:#1d1d1f; border-radius:80px; overflow:hidden;
  /* Startposition/-größe setzt JS inline (Trigger-Rect); Endwerte via .is-open */
  transition:top .45s var(--ease), left .45s var(--ease),
             width .45s var(--ease), height .45s var(--ease),
             border-radius .45s var(--ease), background-color .45s ease,
             box-shadow .45s ease;
}
#mundorf-search.is-open .msx-bar{
  background:#fff; border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
}
#mundorf-search .msx-lupe{flex:none; display:flex; color:var(--dark)}
#mundorf-search .msx-input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:16px; line-height:1.6; color:var(--dark);
  caret-color:var(--gold); padding:0;
  opacity:0; transition:opacity .45s ease .15s;
}
#mundorf-search.is-open .msx-input{opacity:1}
#mundorf-search .msx-input::placeholder{color:var(--light)}
#mundorf-search .msx-clear{
  flex:none; display:none; border:none; background:none; padding:2px; margin:0;
  color:var(--text); cursor:pointer; line-height:0;
}
#mundorf-search .msx-clear:hover{color:var(--dark)}
#mundorf-search.has-q .msx-clear{display:block}

/* ---- Panel unter der Bar (wächst nach unten, kein Scroll) ---- */
#mundorf-search .msx-panel{
  position:fixed; background:#fff; border-radius:8px; overflow:visible;
  display:flex; flex-direction:column;
  box-shadow:0 16px 48px rgba(0,0,0,.22);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .45s ease, transform .45s var(--ease);
}
#mundorf-search.is-open.panel-in .msx-panel{
  opacity:1; transform:none; pointer-events:auto;
}
/* Höhen-Animation beim Umbau (JS setzt height explizit von alt → neu) */
#mundorf-search .msx-panel.msx-hanim{
  overflow:hidden;
  transition:opacity .45s ease, transform .45s var(--ease), height .45s var(--ease);
}
/* Neu erscheinende Sektionen (Anwendung, Filter, …) sanft einblenden */
@keyframes msx-in{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
#mundorf-search .msx-enter{animation:msx-in .45s var(--ease) both}
#mundorf-search .msx-panel-main{
  display:flex; flex-direction:column; gap:24px;
  padding:16px 16px 24px;
}
#mundorf-search .msx-panel.has-foot .msx-panel-main{border-bottom:1px solid var(--gold24)}
#mundorf-search .msx-section{display:flex; flex-direction:column; gap:8px; width:100%}

/* Mono-Label ("PRODUKTFINDER", "BELIEBTE LINKS", …) */
#mundorf-search .msx-label{
  display:flex; align-items:baseline; justify-content:space-between; width:100%;
  font-family:'Red Hat Mono',ui-monospace,monospace; font-weight:600;
  font-size:9px; letter-spacing:.72px; line-height:1.5; text-transform:uppercase;
  color:var(--text);
}
#mundorf-search .msx-label.is-dark{color:var(--dark)}
#mundorf-search .msx-label-all{
  color:var(--gold); cursor:pointer; background:none; border:none; padding:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
}
#mundorf-search .msx-label-all:hover{text-decoration:underline}

/* ---- Pills (Kategorien / Anwendung) ---- */
#mundorf-search .msx-pills{display:flex; flex-wrap:wrap; gap:8px; width:100%}
#mundorf-search .msx-pill{
  display:inline-flex; align-items:center;
  border:1px solid var(--gold24); background:#fff; color:var(--text);
  border-radius:80px; padding:4px 12px; font-family:inherit;
  font-size:13px; font-weight:500; line-height:1.6; cursor:pointer;
  transition:background .45s ease, border-color .45s ease, color .45s ease;
}
#mundorf-search .msx-pill:hover{background:var(--gold24)}
/* ausgewählte Pill: Gold, geteilt in Label | × */
#mundorf-search .msx-pill-sel{
  display:inline-flex; align-items:stretch; gap:1px; height:29px;
  border-radius:24px; overflow:hidden; cursor:pointer;
}
#mundorf-search .msx-pill-sel > span{
  display:inline-flex; align-items:center; background:var(--gold); color:#fff;
  font-size:13px; font-weight:500; line-height:1.6; padding:3px 8px 3px 12px;
  transition:background .45s ease;
}
#mundorf-search .msx-pill-sel > button{
  display:inline-flex; align-items:center; background:var(--gold); color:#fff;
  border:none; padding:3px 8px 3px 5px; cursor:pointer; line-height:0;
  transition:background .45s ease;
}
#mundorf-search .msx-pill-sel:hover > span,
#mundorf-search .msx-pill-sel:hover > button{background:#96794a}

/* ---- Beliebte Links ---- */
#mundorf-search .msx-links{display:flex; gap:8px; width:100%}
#mundorf-search .msx-links-col{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0}
#mundorf-search .msx-link{
  color:var(--gold); font-size:13px; font-weight:500; line-height:1.6;
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#mundorf-search .msx-link:hover{text-decoration:underline}

/* ---- Filter-Dropdowns (Ebene 2/3) ---- */
#mundorf-search .msx-dd{position:relative; display:inline-block}
/* Der offene Filter muss ueber die Fussleiste (Reset/CTA). Sektion und
   Fussleiste bilden durch die msx-enter-Animation je eine eigene Ebene; die
   Fussleiste steht spaeter im DOM, lag damit oben und verdeckte mit ihrem
   weissen Grund die Mitte der Liste — z-index:60 am Panel wirkte nur innerhalb
   der Sektion. Muster wie in results.css (filter_dropdown:has(.w--open)). */
#mundorf-search .msx-section:has(.msx-dd.is-open){position:relative; z-index:2}
#mundorf-search .msx-toggle{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--gold24); background:#fff; color:var(--text);
  border-radius:80px; padding:4px 10px 4px 12px; font-family:inherit;
  font-size:13px; font-weight:500; line-height:1.6; cursor:pointer;
  transition:background .45s ease, border-color .45s ease, color .45s ease;
}
#mundorf-search .msx-toggle:hover{background:var(--gold24)}
#mundorf-search .msx-toggle.is-active{
  background:var(--gold); border-color:var(--gold); color:#fff;
}
#mundorf-search .msx-caret{display:inline-flex; transition:transform .45s ease; line-height:0}
#mundorf-search .msx-dd.is-open .msx-caret{transform:rotate(180deg)}
#mundorf-search .msx-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; padding:0 4px; border-radius:4px;
  background:#fff; color:var(--gold); font-size:11px; font-weight:700; line-height:1.5;
}
#mundorf-search .msx-dd-x{
  display:none; border:none; background:none; color:#fff; padding:0; margin:0 0 0 2px;
  cursor:pointer; line-height:0;
}
#mundorf-search .msx-toggle.is-active .msx-dd-x{display:inline-flex}

#mundorf-search .msx-dd-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  min-width:280px; max-width:min(360px,calc(100vw - 48px));
  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 .45s ease, transform .45s var(--ease), visibility 0s linear .45s;
  pointer-events:none;
}
#mundorf-search .msx-dd.is-open .msx-dd-panel{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .45s ease, transform .45s var(--ease), visibility 0s;
}
#mundorf-search .msx-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 .45s ease;
}
#mundorf-search .msx-opt:hover{background:#faf8f3}
#mundorf-search .msx-opt-lbl{flex:1; min-width:0}
#mundorf-search .msx-opt-cnt{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
#mundorf-search .msx-opt.is-empty{opacity:.4; pointer-events:none}
#mundorf-search .msx-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 .45s ease, border-color .45s ease;
}
#mundorf-search .msx-cb:checked{background:var(--gold); border-color:var(--gold)}
#mundorf-search .msx-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-search .msx-range-row{display:flex; align-items:center; gap:8px; padding:6px 8px}
#mundorf-search .msx-range-cap{font-size:13px; color:var(--text)}
#mundorf-search .msx-range-sel{
  flex:1; min-width:0; border:1px solid var(--gold24); border-radius:8px;
  padding:7px 32px 7px 10px; font-size:13px; font-family:inherit; color:var(--text);
  appearance:none; -webkit-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;
}
#mundorf-search .msx-range-sel:focus{outline:none; border-color:var(--gold)}

/* ---- Footer (Reset + CTA) ---- */
#mundorf-search .msx-foot{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px; background:#fff; border-radius:0 0 8px 8px;
}
#mundorf-search .msx-reset{
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  color:var(--gold); font-size:13px; font-weight:500; line-height:1.6;
}
#mundorf-search .msx-reset:hover{text-decoration:underline}
#mundorf-search .msx-cta{
  border:none; cursor:pointer; font-family:inherit;
  background:var(--gold); color:#fff; border-radius:80px; padding:8px 16px;
  font-size:13px; font-weight:700; line-height:1.6;
  transition:background .45s ease, opacity .45s ease;
}
#mundorf-search .msx-cta:hover{background:#96794a}
#mundorf-search .msx-cta.is-empty{opacity:.45; cursor:not-allowed; pointer-events:none}

/* ---- Suchergebnisse ---- */
#mundorf-search .msx-rows{display:flex; flex-direction:column; width:100%}
/* expandierte Liste ("Alle anzeigen"): nach 10 Zeilen intern scrollen.
   --fade-t/--fade-b setzt JS je nach Scrollposition (kein harter Cut). */
#mundorf-search .msx-rows.is-scroll{
  --fade-t:0px; --fade-b:24px;
  max-height:min(562px, 62vh); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--gold24) transparent;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0, #000 var(--fade-t),
    #000 calc(100% - var(--fade-b)), transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0, #000 var(--fade-t),
    #000 calc(100% - var(--fade-b)), transparent 100%);
}
#mundorf-search .msx-rows.is-scroll::-webkit-scrollbar{width:6px}
#mundorf-search .msx-rows.is-scroll::-webkit-scrollbar-thumb{background:var(--gold24); border-radius:3px}
#mundorf-search .msx-rows.is-scroll::-webkit-scrollbar-track{background:transparent}
#mundorf-search .msx-row{
  display:flex; align-items:center; gap:16px; padding-right:16px; width:100%;
  border-radius:4px; cursor:pointer; text-decoration:none;
  transition:background .45s ease;
}
#mundorf-search .msx-row:hover,
#mundorf-search .msx-row.is-hl{background:var(--gold4)}
#mundorf-search .msx-thumb{
  flex:none; width:56px; height:56px; border-radius:4px; overflow:hidden;
  background:var(--gold4); position:relative; margin-right:0;
}
#mundorf-search .msx-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  mix-blend-mode:multiply;
}
#mundorf-search .msx-row-body{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;
  align-items:flex-start; padding:8px 0;
}
#mundorf-search .msx-tag{
  display:inline-flex; align-items:center; background:var(--gold); color:#fff;
  border-radius:2px; padding:3px 4px;
  font-family:'Red Hat Mono',ui-monospace,monospace; font-weight:600;
  font-size:9px; letter-spacing:.72px; line-height:1; text-transform:uppercase;
}
#mundorf-search .msx-row-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; width:100%;
}
#mundorf-search .msx-row-name{
  flex:1; min-width:0; color:var(--dark); font-size:13px; font-weight:500; line-height:1.6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#mundorf-search .msx-row-art{
  flex:none; font-family:'Red Hat Mono',ui-monospace,monospace; font-weight:600;
  font-size:9px; letter-spacing:.72px; line-height:1.5; text-transform:uppercase;
  color:var(--text);
}
#mundorf-search u{
  text-decoration:underline; text-decoration-thickness:from-font; text-underline-position:from-font;
}

/* Technologien-Treffer */
#mundorf-search .msx-tech{display:flex; flex-direction:column; gap:8px; width:100%}
#mundorf-search .msx-tech-link{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--gold); font-size:13px; font-weight:500; line-height:1.6;
}
#mundorf-search .msx-tech-link:hover{text-decoration:underline}
#mundorf-search .msx-tech-link svg{flex:none; color:var(--gold)}

#mundorf-search .msx-empty{
  color:var(--muted); font-size:13px; font-weight:500; line-height:1.6; padding:4px 0;
}

/* ---- Responsive ---- */
@media (max-width:720px){
  #mundorf-search .msx-links{flex-direction:column}
  #mundorf-search .msx-foot{flex-direction:column-reverse; align-items:stretch}
  #mundorf-search .msx-cta{text-align:center}
  /* Tag und Artikelnummer teilen sich die erste Zeile, der Name bekommt die
     zweite ueber die volle Breite.

     Vorher standen Name und Nummer nebeneinander und teilten sich 223px, mit
     `white-space:normal` als Notausgang. Deutsch fiel das nie auf ("AMT U.Serie"
     ist kurz), englisch schon: "Rectangular Aluminium Front Panel" brach um, die
     Zeile wuchs von 56 auf 77px, und weil das nur manche Namen betraf, wurde die
     Liste ungleichmaessig. Die Nummer blieb dabei an der ersten Textzeile haengen,
     waehrend der Name darunter weiterlief.

     Ueber die volle Breite passt auch der laengste Variantenname einzeilig, ohne
     Kuerzung. Der Aufbau bleibt zweizeilig wie am Desktop, alle Zeilen sind
     wieder gleich hoch. `display:contents` hebt die Zwischenebene auf, damit Tag,
     Nummer und Name im selben Raster liegen — ohne das DOM zu aendern, das der
     Desktop-Aufbau braucht. */
  #mundorf-search .msx-row-body{
    display:grid; grid-template-columns:1fr auto; column-gap:12px;
    align-items:baseline; row-gap:4px;
  }
  #mundorf-search .msx-row-line{display:contents}
  #mundorf-search .msx-tag{grid-column:1; grid-row:1; justify-self:start}
  #mundorf-search .msx-row-art{grid-column:2; grid-row:1}
  #mundorf-search .msx-row-name{grid-column:1 / -1; grid-row:2; white-space:nowrap}
  #mundorf-search .msx-row{min-height:56px}
}
@media (prefers-reduced-motion:reduce){
  #mundorf-search .msx-bar,#mundorf-search .msx-panel,
  #mundorf-search .msx-backdrop,#mundorf-search .msx-dd-panel{transition:none}
}

/* Breadcrumbs: ab Tablet einzeilig + horizontal wischbar (Spiegel-Muster).
   Webflow-Klasse .breadcrumb_wrap traegt overflow-x/scrollbar-width selbst;
   hier nur das Scrollbar-Verstecken fuer Chrome/Safari/Edge. */
@media (max-width: 991px) {
  .breadcrumb_wrap { -ms-overflow-style: none; }
  .breadcrumb_wrap::-webkit-scrollbar { display: none; width: 0; height: 0; }
}


/* Sprachschalter [data-lang-switch] (nur Footer; Desktop-Nav bewusst ohne) */
[data-lang-switch] { display: inline-flex; align-items: center; }
[data-lang-switch] a.mdf-lang__link, .card04.is-legal [data-lang-switch] a.mdf-lang__link {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: Inter, sans-serif; color: #fff; text-decoration: none;
  font-size: .8889rem; line-height: 1; }
[data-lang-switch] a.mdf-lang__link:hover,
.card04.is-legal [data-lang-switch] a.mdf-lang__link:hover { color: #a88d57; }
[data-lang-switch] .mdf-lang__flagge { display: inline-flex; line-height: 0; }
[data-lang-switch] .mdf-lang__flagge svg { display: block; border-radius: 1px; }
.dsg-nav_wrapper [data-lang-switch] { display: none !important; }
.card04.is-legal [data-lang-switch] { margin-left: auto; align-self: center; }