/* Händlersuche — Karten-Chrome und Laufzeit-Stile, gehört zu haendler.js.
   Gestaltung der Karte nach mapcn.dev (shadcn-Registry @mapcn/map, Stand
   13.10.2026), portiert von Tailwind auf Mundorf-Tokens:
     Marker  = 16px-Punkt, 2px weißer Ring, shadow-lg  (mapcn: bg-blue-500 -> Gold)
     Popup   = Karte: rounded-md, 1px Rahmen, 12px Polster, shadow-md, max-w-62
     Controls= 32px-Quadrate in Gruppe mit Rahmen/Schatten, Hover muted
   Die LAYOUT-Stile (Karte-Container, Pills, Liste, Items) wandern nativ in
   die Webflow-Klassen; hier steht, was zur Laufzeit entsteht (MapLibre,
   Select, Hinweis) plus Zustaende (hover/is-aktiv). */

[data-haendler-widget] { --mh-gold: #a88d57; --mh-gold-dunkel: #96794a;
  --mh-gold-hell: #f0e9dc; --mh-text: #1d1d1f; --mh-grau: #6d6f6e;
  --mh-linie: #eae4d7; --mh-muted: #f8f6f2; }

/* ---- Karte: Masse/Hoehe kommen KOMPLETT aus den Webflow-Klassen
   (.haendler_karte + .is-big inkl. Breakpoints) — hier bewusst nichts,
   sonst uebersteuert dieses spaeter geladene CSS den Designer. ---- */

/* ---- Marker (mapcn DefaultMarkerIcon) ---- */
.haendler_marker {
  width: 16px; height: 16px; border-radius: 50%;
  background: #a88d57; border: 2px solid #fff;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  cursor: pointer; transition: transform .15s ease;
}
.haendler_marker:hover, .haendler_marker.is-aktiv { transform: scale(1.3); }

/* ---- Popup nach Figma 6446-13056: weisse Karte wie das Finder-Panel
   (Radius 8, Schatten 0 4 16), ohne Spitze und ohne Schliessen-Kreuz ---- */
.haendler_popup .maplibregl-popup-content {
  background: #fff; color: #1d1d1f;
  max-width: 260px; border-radius: 8px;
  border: 0; padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.13);
  font-family: inherit;
}
.haendler_popup .maplibregl-popup-tip { display: none; }
.haendler_popup .haendler_popup-name { font-weight: 700; font-size: 14px; line-height: 1.4; }
.haendler_popup .haendler_popup-stadt { color: #6d6f6e; font-size: 13px; margin-top: 2px; }
.haendler_popup a {
  display: inline-block; margin-top: 8px;
  color: #a88d57; font-size: 13px; text-decoration: none; outline: none;
}
.haendler_popup a:hover { text-decoration: underline; }
.haendler_popup a:focus-visible { outline: 2px solid #a88d57; outline-offset: 2px; border-radius: 2px; }

/* ---- Fokus: Maus-Klicks zeichnen keinen Rahmen (Karte + Dropdown),
   Tastatur-Fokus bleibt sichtbar in Gold ---- */
[data-haendler-widget] .maplibregl-canvas:focus:not(:focus-visible),
[data-haendler-widget] .filter_dropdown_toggle:focus:not(:focus-visible) { outline: none; }
[data-haendler-widget] .maplibregl-canvas:focus-visible,
[data-haendler-widget] .filter_dropdown_toggle:focus-visible {
  outline: 2px solid var(--mh-gold); outline-offset: 2px;
}

/* ---- Zoom-Controls (mapcn ControlGroup: size-8-Knoepfe, Gruppe mit Rahmen) ---- */
[data-haendler-widget] .maplibregl-ctrl-group {
  background: #fff; border: 1px solid #eae4d7; border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  overflow: hidden;
}
[data-haendler-widget] .maplibregl-ctrl-group button {
  width: 32px; height: 32px; transition: background .15s;
}
[data-haendler-widget] .maplibregl-ctrl-group button:hover { background: #f8f6f2; }
[data-haendler-widget] .maplibregl-ctrl-group button + button { border-top: 1px solid #eae4d7; }

/* ---- Zustaende der nativen Webflow-Elemente ----
   Pills = Design-System-Toggle wie im Produktfinder (mf-toggle):
   Outline-Pill, Hover fuellt mit der Border-Farbe (nativ in Webflow),
   aktiv Gold mit weisser Schrift. Gleiche .15s-Transitions wie der Finder. */
[data-haendler-widget] .haendler_pill { cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s, opacity .15s; }
/* Alte publizierte Hover-Regeln (opacity .9 + scale) neutralisieren,
   bis der naechste Publish sie aus dem Stylesheet nimmt */
[data-haendler-widget] .haendler_pill:hover { opacity: 1; }
[data-haendler-widget] .haendler_pill:active { transform: none; }
[data-haendler-widget] .haendler_pill.is-aktiv {
  background: var(--mh-gold); border-color: var(--mh-gold); color: #fff;
}
/* Aktive Pill hovert wie die Gold-Buttons im Figma: dunklerer Ton statt heller */
[data-haendler-widget] .haendler_pill.is-aktiv:hover {
  background: var(--mh-gold-dunkel); border-color: var(--mh-gold-dunkel);
  color: #fff; opacity: 1;
}
[data-haendler-widget] .haendler_pill[hidden] { display: none; }
/* Listeneintraege bewusst OHNE Hover/Hervorhebung (Kundenwunsch 2026-10-14);
   die Kopplung Liste->Karte zeigt sich nur am Marker (Scale via .is-aktiv).
   Filterwechsel laufen EXAKT wie die Technologien-Kacheln: dieselben
   data-filter-status-Zustaende, Kurven und Werte wie .tech_item im
   Site-Head-CSS. */
[data-haendler-widget] .haendler_item { cursor: pointer; }
[data-haendler-widget] .haendler_item[data-filter-status="active"] {
  transition: opacity .6s cubic-bezier(.625,.05,0,1), transform .6s cubic-bezier(.625,.05,0,1);
  transform: scale(1) rotate(.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}
[data-haendler-widget] .haendler_item[data-filter-status="transition-out"] {
  transition: opacity .45s cubic-bezier(.625,.05,0,1), transform .45s cubic-bezier(.625,.05,0,1);
  opacity: 0;
  visibility: visible;
  transform: scale(.9) rotate(.001deg);
}
[data-haendler-widget] .haendler_item[data-filter-status="not-active"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transform: scale(.9) rotate(.001deg);
  /* wasserdicht: zusaetzlich Null-Groesse, damit ausgefilterte Items unter
     keinen Umstaenden sichtbar uebereinander liegen koennen */
  width: 0; height: 0; padding: 0; margin: 0;
  overflow: hidden; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-haendler-widget] .haendler_item[data-filter-status] { transition: none; }
}
[data-haendler-widget] .haendler_web a { color: var(--mh-gold); text-decoration: none; word-break: break-all; }
[data-haendler-widget] .haendler_web a:hover { text-decoration: underline; }

/* ---- Laufzeit-Elemente (vom Widget erzeugt) ----
   Regions-Dropdown nach Figma 5930-13357: Optik liefern die Webflow-Klassen
   .filter_dropdown* (Site-Stylesheet, wie im Produktfinder). Hier nur die
   Einpassung ins Widget: volle Breite, Toggle als Feld mit Rahmen, Liste
   unter dem Feld statt rechtsbuendig. Fallback-Basics fuers Testgeschirr. */
/* Das FELD (filter_dropdown_toggle) stylt KOMPLETT der Designer —
   Padding, Schrift, Border und Radius kommen aus der Webflow-Klasse.
   Hier nur Funktionales: Positionierung des Wrappers. */
[data-haendler-widget] .filter_dropdown { display: block; position: relative; z-index: 300; }

/* Hotfix (site-weit): im Designer ist auf der Open-State-Combo
   .filter_dropdown_toggle.w--open versehentlich font-size .9rem gelandet,
   dadurch sprang der Text beim Oeffnen. Hier auf die Normalgroessen
   festgenagelt; sobald der Wert im Designer entfernt ist, kann das weg. */
.filter_dropdown_toggle.w--open { font-size: 0.8rem; }
.filter_dropdown_toggle.is-haendler.w--open { font-size: 0.9rem; }

/* Kein Aufbau-Sprung: solange das Widget die Startfilter noch nicht gesetzt
   hat, bleibt die Liste unsichtbar. Greift nur mit JS (Webflow setzt
   w-mod-js vor dem ersten Paint); ohne JS bleibt alles sichtbar. Die
   Notfall-Animation macht die Liste nach 2,5s selbst dann sichtbar, wenn
   das Skript nie laeuft (z.B. Cache-Mischung oder Ladefehler). */
html.w-mod-js [data-haendler-widget] .haendler_liste {
  opacity: 0;
  animation: mh-liste-notfall 0s linear 2.5s forwards;
}
@keyframes mh-liste-notfall { to { opacity: 1; } }
html.w-mod-js [data-haendler-widget] .haendler_liste.ist-bereit {
  opacity: 1; animation: none;
  transition: opacity .6s cubic-bezier(.625,.05,0,1);
}
/* Icon-Maße kommen aus dem Designer; hier nur die Drehung beim Öffnen */
[data-haendler-widget] .filter_dropdown_icon { transition: transform .2s ease; }
[data-haendler-widget] .filter_dropdown_toggle.w--open .filter_dropdown_icon { transform: rotate(180deg); }
/* Panel exakt in der Finder-Sprache (mf-panel): Radius 8, Schatten,
   8px Innenabstand, fluide Auf-Bewegung mit cubic-bezier(.16,1,.3,1) */
[data-haendler-widget] .filter_dropdown_list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  display: block; min-width: 0;
  background: #fff; border-radius: 8px; padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.13);
  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;
}
[data-haendler-widget] .filter_dropdown_list.w--open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .16s ease, transform .32s cubic-bezier(.16,1,.3,1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  [data-haendler-widget] .filter_dropdown_list { transition: none; }
}
/* Optionen wie mf-opt: 7x8-Polster, Radius 6, Hover #faf8f3 */
[data-haendler-widget] .filter_dropdown_link {
  display: flex; align-items: center; cursor: pointer;
  /* Webflow-Basisregel .w-dropdown-link zentriert per margin:auto — aufheben */
  width: 100%; margin: 0;
  padding: 7px 8px; font-size: 13px; font-weight: 500;
  color: var(--mh-text); text-decoration: none; border-radius: 6px;
  transition: background-color .12s;
}
[data-haendler-widget] .filter_dropdown_link:hover { background: #faf8f3; }
[data-haendler-widget] .filter_dropdown_link.w--current {
  background: var(--mh-gold-hell); color: var(--mh-gold);
}
[data-haendler-widget] .haendler_leer {
  grid-column: 1 / -1; padding: 16px 12px; font-size: 13px; color: var(--mh-grau);
}
[data-haendler-widget] .haendler_meta { display: none !important; }

/* Pills/Liste/Items: Grundmasse als Fallback fuers Testgeschirr — in Webflow
   liegen dieselben Werte nativ auf den Klassen und gewinnen dort */
[data-haendler-widget] .haendler_pills { display: flex; gap: 8px; margin: 16px 0 8px; }
[data-haendler-widget] .haendler_pill {
  border: 1px solid var(--mh-linie); border-radius: 80px;
  padding: 8px 16px; font-size: 13px; font-weight: 500; line-height: 1.6;
  color: var(--mh-text); text-decoration: none; background: #fff;
}
[data-haendler-widget] .haendler_pill:hover {
  background: var(--mh-linie); border-color: var(--mh-linie);
}
[data-haendler-widget] .haendler_liste-grid,
[data-haendler-widget] .haendler_liste .w-dyn-items {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-top: 12px;
  /* positionierter Container wie .product_grid--4-4-4 bei den Technologien:
     absolut gestellte not-active-Items bleiben sicher im Listenbereich */
  position: relative;
}
@media (max-width: 599px) {
  [data-haendler-widget] .haendler_liste-grid,
  [data-haendler-widget] .haendler_liste .w-dyn-items { grid-template-columns: 1fr; }
}
[data-haendler-widget] .haendler_item { padding: 10px 10px 10px 12px; border-radius: 4px; }
[data-haendler-widget] .haendler_name { font-weight: 700; font-size: 14px; color: var(--mh-text); }
[data-haendler-widget] .haendler_stadt { font-size: 13px; color: var(--mh-grau); }
[data-haendler-widget] .haendler_web a { font-size: 13px; }

/* ---- Kundennummer im Kontaktformular ----
   [data-kundennummer-group] bleibt zu, bis im "Ich bin"-Select eine
   Händler-Rolle gewaehlt ist; dann klappt sie mit der Finder-Kurve auf.
   (Die fruehere Privatkunden-Weiche samt CTA ist entfernt.) */
[data-kundennummer-group]:not(.ist-offen) { display: none; }
[data-kundennummer-group].ist-offen { animation: mh-feld-auf .3s cubic-bezier(.16,1,.3,1); }
@keyframes mh-feld-auf { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  [data-kundennummer-group].ist-offen { animation: none; }
}