/* ============================================================
   WPSL — Store Locator im pn-paper-Stil (2026-09-09)
   Konsistenz: Barlow Condensed Labels/Buttons, Instrument Serif
   für Namen, --pnx-lime für Primär-Buttons, --line-Trennlinien.
   Lädt nur auf Seiten mit [wpsl] (siehe pn_enqueue in functions.php).
   ============================================================ */

#wpsl-wrap {
  font-size: var(--text);
  color: var(--ink);
  max-width: var(--wrap);
  margin-inline: auto;
}

/* ---------- Suchbereich ---------- */
/* 1.5.71.213: Korrekte Selektoren — WPSL rendert #wpsl-search-wrap > form
   (es gibt KEIN #wpsl-search im Markup). */
#wpsl-search-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
#wpsl-search-wrap form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
}
@media (min-width: 720px) {
  #wpsl-search-wrap form {
    grid-template-columns: 1.4fr 1fr auto;
    align-items: end;
    gap: var(--space-4);
  }
}
#wpsl-search-wrap label {
  display: block;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--space-2);
}
#wpsl-search-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  padding: 12px 14px;
}
#wpsl-search-input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}
#wpsl-search-wrap .wpsl-select-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 719px) {
  #wpsl-search-wrap .wpsl-select-wrap { grid-template-columns: 1fr; }
}
#wpsl-search-wrap .wpsl-search-btn-wrap { margin: 0; }
#wpsl-search-btn {
  border: 0;
  border-radius: 2px;
  background: var(--pnx-lime, #e2ff00);
  color: var(--ink);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: var(--small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 26px;
  cursor: pointer;
  white-space: nowrap;
}
#wpsl-search-btn:hover { filter: brightness(0.94); }
@media (max-width: 719px) {
  #wpsl-search-btn { width: 100%; }
}

/* WPSL Custom-Dropdowns (Suchradius / Ergebnisse) — ohne wpsl-styles selbst gestylt. */
#wpsl-search-wrap .wpsl-dropdown {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;
}
#wpsl-search-wrap .wpsl-selected-item {
  display: block;
  position: relative;
  padding: 12px 2.5rem 12px 14px;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
#wpsl-search-wrap .wpsl-selected-item::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -3px;
  border: 5px solid transparent;
  border-top: 7px solid var(--ink);
}
#wpsl-search-wrap .wpsl-dropdown.wpsl-active .wpsl-selected-item::after {
  margin-top: -10px;
  border-top: 0;
  border-bottom: 7px solid var(--ink);
}
/* Optionsliste: per Standard geschlossen (height:0), WPSL-JS setzt die Höhe beim Öffnen inline. */
#wpsl-search-wrap .wpsl-dropdown > div {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 2px 2px;
  z-index: 10;
}
#wpsl-search-wrap .wpsl-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#wpsl-search-wrap .wpsl-dropdown li {
  padding: 10px 14px;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
#wpsl-search-wrap .wpsl-dropdown li:hover,
#wpsl-search-wrap .wpsl-dropdown li.wpsl-selected-dropdown {
  background: var(--fill);
}

/* ---------- Karte ---------- */
#wpsl-gmap {
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-bottom: var(--space-5);
}

/* ---------- Ergebnisliste / Adressblöcke ---------- */
/* 1.5.71.213: Selektoren ans echte Template angepasst — das Theme ersetzt WPSLs
   Listing-Template (inc/live-compat.php): <li> > <div> > <p> > <strong>Name</strong>
   + Beschreibung, danach <span>Distanz</span> und <a class="wpsl-directions"> als
   direkte Kinder des <li>. Es gibt KEIN .wpsl-store-location / .wpsl-direction-wrap. */
#wpsl-result-list { margin: 0; }
/* Kein 350px-Scrollkasten — natürliche Liste. */
#wpsl-stores {
  height: auto;
  overflow: visible;
}
/* Sicherheitsnetz — WPSL schreibt per get_custom_css() ein Inline-<style> mit
   #wpsl-stores{height:350px !important}. Höhere Spezifität gewinnt. */
#wpsl-wrap #wpsl-stores { height: auto !important; }
#wpsl-stores > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
#wpsl-stores > ul > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  #wpsl-stores > ul > li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "content meta"
      "content action";
    column-gap: var(--space-5);
    row-gap: var(--space-2);
    align-items: start;
  }
  #wpsl-stores > ul > li > div { grid-area: content; min-width: 0; }
  #wpsl-stores > ul > li > span { grid-area: meta; justify-self: end; }
  #wpsl-stores > ul > li > a.pn-directions { grid-area: action; justify-self: end; }
}

/* Adressblock */
#wpsl-stores > ul > li > div > p {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.6;
}
/* Thumbnail (WPSL setzt die Klasse direkt aufs <img>; Größe kommt aus WPSL-Inline-CSS) */
#wpsl-stores img.wpsl-store-thumb {
  float: left;
  object-fit: cover;
  border-radius: 2px;
  margin: 3px var(--space-4) var(--space-2) 0;
}
/* Fotografen-Name im Claim-Stil (kursiv, Serif) — wie Model-Namen im Theme */
#wpsl-stores > ul > li > div > p > strong {
  display: block;
  font-family: var(--font-claim);
  font-style: italic;
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
#wpsl-stores > ul > li > div > p > strong a {
  color: inherit;
  text-decoration: none;
}
#wpsl-stores > ul > li > div > p > strong a:hover {
  text-decoration: underline;
  text-decoration-color: var(--pnx-lime, #e2ff00);
  text-decoration-thickness: 2px;
}

/* Distanz (direktes <span>-Kind des <li>) */
#wpsl-stores > ul > li > span {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  justify-self: start;
}

/* Wegbeschreibung (direktes <a>-Kind des <li>) */
#wpsl-stores > ul > li > a.pn-directions {
  justify-self: start;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--pnx-lime, #e2ff00);
  padding-bottom: 2px;
  white-space: nowrap;
}
#wpsl-stores > ul > li > a.pn-directions:hover { background: var(--pnx-lime, #e2ff00); }

/* Wegbeschreibung im Karten-Popup */
.wpsl-info-window a.pn-directions {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--pnx-lime, #e2ff00);
  padding-bottom: 2px;
}
.wpsl-info-window a.pn-directions:hover { background: var(--pnx-lime, #e2ff00); }

/* Ladezustand / keine Treffer in der Liste */
#wpsl-stores > ul > li.wpsl-preloader,
#wpsl-stores > ul > li.wpsl-no-results-msg {
  display: block;
  padding: var(--space-5) 0;
  color: var(--mute);
  border-bottom: 1px solid var(--line);
}
#wpsl-stores > ul > li.wpsl-preloader img { vertical-align: middle; margin-right: var(--space-2); }

/* Routenansicht (nach Klick auf „Route") — Standard: versteckt, WPSL-JS blendet per .show() ein. */
#wpsl-direction-details { display: none; margin: var(--space-4) 0 0; }
#wpsl-direction-details > ul {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
#wpsl-direction-details > ul > li {
  overflow: hidden;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
#wpsl-direction-details .wpsl-direction-index {
  float: left;
  width: 2rem;
  font-family: var(--font-cond);
  font-weight: 700;
  color: var(--mute);
}
#wpsl-direction-details .wpsl-direction-txt { overflow: hidden; }
#wpsl-direction-details .wpsl-direction-distance {
  color: var(--mute);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ---------- Info-Fenster auf der Karte ---------- */
.wpsl-info-window {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
}
.wpsl-info-window strong {
  font-family: var(--font-claim);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  display: block;
  margin-bottom: 2px;
}
.wpsl-info-window a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--pnx-lime, #e2ff00);
}
.wpsl-info-window .wpsl-info-actions { margin-top: var(--space-2); }

/* ---------- Sonstiges ---------- */
#wpsl-search-no-results {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--fill);
  padding: var(--space-4);
  color: var(--mute);
}
#wpsl-wrap .wpsl-back { /* „Zurück"-Link in Routenansicht */
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--pnx-lime, #e2ff00);
  padding-bottom: 2px;
}

/* PN_INFOBOX_FIX 2026-09-16: InfoWindow war transparent -> Text unlesbar. */
.wpsl-gmap-canvas .wpsl-infobox {
  background: #ffffff !important;
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.20);
  padding: 12px 14px;
}
.wpsl-gmap-canvas .wpsl-infobox .wpsl-info-window {
  background: #ffffff !important;
}


/* PN_PF19 2026-09-16: Karten-Infofenster lesbar — breiter, groessere Schrift, kein Abschneiden am Kartenrand. */
html body #wpsl-gmap{height:440px!important}
html body #wpsl-gmap .wpsl-info-window{max-width:300px!important}
.wpsl-info-window{font-size:1rem;overflow-wrap:anywhere}
.wpsl-gmap-canvas .wpsl-infobox>img[src*="close.gif"]{width:22px!important;height:22px!important}


/* ============================================================
   1.5.71.372: Beat WPSL 3 common/responsive — undefined --wpsl-header-*
   made input transparent (white-on-white); plugin gradient beat lime btn;
   float/clear under 675/570px shoved the button out of the wrap.
   ============================================================ */
html body #wpsl-wrap {
  --wpsl-header-bg: #ffffff;
  --wpsl-header-color: var(--ink, #111111);
  --wpsl-header-border: var(--line, #d9d4cc);
  --wpsl-submit-bg: var(--pnx-lime, #e2ff00);
  --wpsl-submit-color: var(--ink, #111111);
  --wpsl-submit-border: transparent;
}
html body #wpsl-wrap #wpsl-search-wrap {
  background: var(--paper, #f7f4ef) !important;
  border: 1px solid var(--line, #d9d4cc) !important;
}
html body #wpsl-wrap #wpsl-search-wrap form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-3, 0.75rem) !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
@media (min-width: 720px) {
  html body #wpsl-wrap #wpsl-search-wrap form {
    grid-template-columns: 1.4fr 1fr auto !important;
    align-items: end !important;
    gap: var(--space-4, 1rem) !important;
  }
}
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-search-btn-wrap {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
html body #wpsl-wrap .wpsl-search input[type="text"],
html body #wpsl-wrap #wpsl-search-input,
html body #wpsl-wrap #wpsl-search-wrap select,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-dropdown {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--ink, #111111) !important;
  border: 1px solid var(--line, #d9d4cc) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
html body #wpsl-wrap #wpsl-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  font-size: 1rem !important;
}
html body #wpsl-wrap #wpsl-search-btn,
html body #wpsl-wrap input#wpsl-search-btn[type="submit"],
html body #wpsl-wrap #wpsl-search-wrap .wpsl-search-btn-wrap input[type="submit"] {
  float: none !important;
  clear: none !important;
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: var(--pnx-lime, #e2ff00) !important;
  background-image: none !important;
  background-color: var(--pnx-lime, #e2ff00) !important;
  color: var(--ink, #111111) !important;
  font-family: var(--font-cond, inherit) !important;
  font-weight: 700 !important;
  font-size: var(--small, 0.8rem) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 14px 26px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body #wpsl-wrap #wpsl-search-btn:hover,
html body #wpsl-wrap input#wpsl-search-btn[type="submit"]:hover {
  filter: brightness(0.94);
  background: var(--pnx-lime, #e2ff00) !important;
  background-image: none !important;
}
@media (max-width: 719px) {
  html body #wpsl-wrap #wpsl-search-btn,
  html body #wpsl-wrap input#wpsl-search-btn[type="submit"] {
    width: 100% !important;
  }
}
/* Kill WPSL responsive float layout entirely inside our wrap */
@media (max-width: 675px), (max-width: 570px) {
  html body #wpsl-wrap #wpsl-search-wrap,
  html body #wpsl-wrap #wpsl-search-wrap form,
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-input,
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap,
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-search-btn-wrap,
  html body #wpsl-wrap #wpsl-search-btn {
    float: none !important;
    clear: none !important;
  }
}


/* 1.5.71.373: Kill WPSL inline label widths (590px) that blow the grid; harden input/btn again. */
html body #wpsl-wrap #wpsl-search-wrap label,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input label,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-search-btn-wrap {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body #wpsl-wrap #wpsl-search-wrap .wpsl-dropdown,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-dropdown > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > * {
  min-width: 0 !important;
}
/* Input: beat any leftover plugin/common rule (transparent / border:0) */
html body #wpsl-wrap #wpsl-search-wrap input[type="text"],
html body #wpsl-wrap #wpsl-search-wrap input#wpsl-search-input,
html body #wpsl-wrap .wpsl-search input[type="text"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  caret-color: #111111 !important;
  border: 1px solid #d9d4cc !important;
  opacity: 1 !important;
}
html body #wpsl-wrap #wpsl-search-wrap input#wpsl-search-input::placeholder {
  color: #888888 !important;
  opacity: 1 !important;
}
/* Button: no plugin gradient */
html body #wpsl-wrap #wpsl-search-btn,
html body #wpsl-wrap input#wpsl-search-btn,
html body #wpsl-wrap #wpsl-search-wrap input[type="submit"] {
  background: #e2ff00 !important;
  background-color: #e2ff00 !important;
  background-image: none !important;
  color: #111111 !important;
  border: 0 !important;
}


/* 1.5.71.375: Desktop button must stay in 3-col grid; minmax(0,…) prevents 590px tracks. */
html body #wpsl-wrap #wpsl-search-wrap {
  overflow: visible !important;
}
html body #wpsl-wrap #wpsl-search-wrap form {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: end !important;
  column-gap: 1rem !important;
  row-gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input,
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap,
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
  justify-self: end !important;
  align-self: end !important;
  grid-column: 3 !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input { grid-column: 1 !important; }
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap { grid-column: 2 !important; }
@media (max-width: 719px) {
  html body #wpsl-wrap #wpsl-search-wrap form {
    grid-template-columns: 1fr !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
    grid-column: 1 !important;
    justify-self: stretch !important;
  }
  html body #wpsl-wrap #wpsl-search-btn {
    width: 100% !important;
  }
}


/* 1.5.71.376: Body overflow-x:clip was hiding the lime CTA when WPSL
   alignSearchColumns inflated tracks. Fixed 3 tracks + beat inline widths. */
html body.page #wpsl-wrap,
html body #wpsl-wrap {
  overflow-x: visible !important;
  max-width: 100% !important;
}
html body #wpsl-wrap #wpsl-search-wrap {
  overflow: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body #wpsl-wrap #wpsl-search-wrap form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) 8rem !important;
  grid-template-rows: auto !important;
  align-items: end !important;
  column-gap: 1rem !important;
  row-gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
  grid-column: 3 !important;
  width: 8rem !important;
  max-width: 8rem !important;
  min-width: 8rem !important;
  justify-self: stretch !important;
  display: block !important;
}
html body #wpsl-wrap #wpsl-search-wrap label,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-dropdown,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-dropdown > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body #wpsl-wrap #wpsl-search-btn,
html body #wpsl-wrap input#wpsl-search-btn[type="submit"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
}
@media (max-width: 719px) {
  html body #wpsl-wrap #wpsl-search-wrap form {
    grid-template-columns: 1fr !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
    min-width: 0 !important;
  }
  html body #wpsl-wrap #wpsl-search-btn,
  html body #wpsl-wrap input#wpsl-search-btn[type="submit"] {
    width: 100% !important;
  }
}


/* 1.5.71.377: Design SoT — PLZ ~5 Ziffern (max-content), Autocomplete overlay.
   Button/Pins already PASS; do not widen PLZ track again. */
html body #wpsl-wrap #wpsl-search-wrap {
  position: relative !important;
  overflow: visible !important;
}
html body #wpsl-wrap #wpsl-search-wrap form {
  display: grid !important;
  grid-template-columns: max-content max-content auto !important;
  grid-template-rows: auto !important;
  align-items: end !important;
  justify-content: start !important;
  column-gap: 1rem !important;
  row-gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input {
  grid-column: 1 !important;
  position: relative !important;
  width: max-content !important;
  max-width: max-content !important;
  min-width: 0 !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap {
  grid-column: 2 !important;
  width: max-content !important;
  max-width: 12rem !important;
  min-width: 0 !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
  grid-column: 3 !important;
  width: auto !important;
  min-width: 7.5rem !important;
  max-width: none !important;
  justify-self: start !important;
}
/* PLZ input: ~5 digits */
html body #wpsl-wrap #wpsl-search-wrap #wpsl-search-input,
html body #wpsl-wrap #wpsl-search-wrap input[name="wpsl-search-input"],
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input input[type="text"] {
  width: 10ch !important;
  max-width: 10ch !important;
  min-width: 7rem !important;
  box-sizing: content-box !important;
}
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input label,
html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input > div {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: block !important;
}
/* Google Places + WPSL autocomplete: overlay, do not reflow grid */
html body .pac-container,
html body #wpsl-wrap .pac-container,
html body #wpsl-search-wrap .pac-container,
html body #wpsl-wrap .wpsl-autocomplete,
html body #wpsl-search-wrap .wpsl-autocomplete,
html body #wpsl-wrap .wpsl-search-results,
html body #wpsl-search-wrap [class*="autocomplete"],
html body #wpsl-search-wrap .wpsl-dropdown-results {
  position: absolute !important;
  z-index: 60 !important;
}
/* If suggestions render inside .wpsl-input, pin under the field */
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input .pac-container,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input .wpsl-autocomplete,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input ul[role="listbox"],
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input > ul {
  left: 0 !important;
  top: 100% !important;
  right: auto !important;
  width: max(16rem, 100%) !important;
  margin: 0 !important;
}
@media (max-width: 719px) {
  html body #wpsl-wrap #wpsl-search-wrap form {
    grid-template-columns: 1fr !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap #wpsl-search-input,
  html body #wpsl-wrap #wpsl-search-wrap input[name="wpsl-search-input"],
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-input input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body #wpsl-wrap #wpsl-search-btn {
    width: 100% !important;
  }
}


/* 1.5.71.378: Mobile Suche full-width — 376 max-width:8rem on btn-wrap leaked into ≤719. */
@media (max-width: 719px) {
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    justify-self: stretch !important;
  }
  html body #wpsl-wrap #wpsl-search-btn,
  html body #wpsl-wrap input#wpsl-search-btn[type="submit"],
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-search-btn-wrap input[type="submit"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* 1.5.71.380: WPSL Places autocomplete — results were in-flow (label/field shift)
   + transparent over map. SoT: absolute under input, solid paper, above #wpsl-map. */
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input,
html body #wpsl-wrap #wpsl-search-wrap .wpsl-autocomplete-search-container {
  position: relative !important;
  overflow: visible !important;
}
html body #wpsl-wrap #wpsl-search-wrap .wpsl-autocomplete-search-container {
  display: block !important;
  width: max-content !important;
  max-width: max-content !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body #wpsl-wrap #wpsl-search-wrap .wpsl-autocomplete-search-results,
html body #wpsl-wrap .wpsl-autocomplete-search-results {
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 80 !important;
  width: max(18rem, 100%) !important;
  min-width: 18rem !important;
  max-width: min(28rem, 90vw) !important;
  margin: 0.15rem 0 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  border: 1px solid var(--line, #d9d4cc) !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12) !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  max-height: 16rem !important;
  color: var(--ink, #111111) !important;
}
html body #wpsl-wrap .wpsl-autocomplete-search-results ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0.25rem 0 !important;
  background: #ffffff !important;
}
html body #wpsl-wrap .wpsl-autocomplete-search-results li {
  margin: 0 !important;
  padding: 0.55rem 0.85rem !important;
  background: #ffffff !important;
  opacity: 1 !important;
  color: var(--ink, #111111) !important;
  cursor: pointer !important;
  white-space: normal !important;
}
html body #wpsl-wrap .wpsl-autocomplete-search-results li:hover,
html body #wpsl-wrap .wpsl-autocomplete-search-results li.wpsl-active-item,
html body #wpsl-wrap .wpsl-autocomplete-search-results li[aria-selected="true"] {
  background: var(--paper, #f7f4ef) !important;
}
/* Keep map below suggestions */
html body #wpsl-wrap #wpsl-map {
  position: relative !important;
  z-index: 1 !important;
}
html body #wpsl-wrap #wpsl-search-wrap {
  position: relative !important;
  z-index: 5 !important;
}
@media (max-width: 719px) {
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-autocomplete-search-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-autocomplete-search-results {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* 1.5.71.381: Pre-wrap + force results out of flow even if WPSL toggles display/width. */
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.35rem !important;
}
html body #wpsl-wrap #wpsl-search-wrap .wpsl-input > div:first-child {
  /* label row — fixed, never moves with suggestions */
  order: 0 !important;
  position: static !important;
}
html body #wpsl-wrap #wpsl-search-wrap .wpsl-autocomplete-search-container {
  order: 1 !important;
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
}
html body #wpsl-wrap #wpsl-search-wrap .wpsl-autocomplete-search-results[style],
html body #wpsl-wrap #wpsl-search-wrap .wpsl-autocomplete-search-results {
  position: absolute !important;
  height: auto !important;
  /* take out of flex/grid contribution */
  float: none !important;
  clear: none !important;
}


/* 1.5.71.382: Autocomplete highlight — digits must not overlap (Moritz).
   Reset letter-spacing/padding/position on .wpsl-autocomplete-highlight. */
html body #wpsl-wrap .wpsl-autocomplete-search-results,
html body #wpsl-wrap .wpsl-autocomplete-search-results li,
html body #wpsl-wrap .wpsl-autocomplete-search-results li a,
html body #wpsl-wrap .wpsl-autocomplete-search-results li a:link,
html body #wpsl-wrap .wpsl-autocomplete-search-results li a:visited {
  letter-spacing: normal !important;
  text-transform: none !important;
  font-kerning: normal !important;
  font-variant-ligatures: none !important;
}
html body #wpsl-wrap .wpsl-autocomplete-highlight,
html body #wpsl-search-wrap .wpsl-autocomplete-highlight,
html body #wpsl-wrap .wpsl-autocomplete-search-results .wpsl-autocomplete-highlight {
  display: inline !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: content-box !important;
  vertical-align: baseline !important;
  font-weight: 700 !important;
  color: inherit !important;
}


/* 1.5.71.383: Desktop — SUCHE flush beside Umkreis (no wide empty track).
   Form shrink-wraps; gap tight. Mobile stack unchanged. */
@media (min-width: 720px) {
  html body #wpsl-wrap #wpsl-search-wrap form {
    display: grid !important;
    grid-template-columns: max-content max-content max-content !important;
    justify-content: start !important;
    justify-items: start !important;
    column-gap: 0.65rem !important;
    row-gap: 0.75rem !important;
    width: max-content !important;
    max-width: 100% !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
    width: max-content !important;
    max-width: max-content !important;
    min-width: 0 !important;
    justify-self: start !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
    min-width: 0 !important;
  }
  html body #wpsl-wrap #wpsl-search-btn,
  html body #wpsl-wrap input#wpsl-search-btn[type="submit"] {
    width: auto !important;
    min-width: 7rem !important;
    max-width: none !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}


/* 1.5.71.384: .wpsl-select-wrap was still 1fr 1fr with only #wpsl-radius —
   empty 2nd track ~inflated middle column (~125px gap to SUCHE). */
@media (min-width: 720px) {
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: max-content !important;
    max-width: max-content !important;
    min-width: 0 !important;
    float: none !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap > #wpsl-radius,
  html body #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap > div {
    display: block !important;
    width: max-content !important;
    max-width: max-content !important;
    float: none !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    width: max-content !important;
    max-width: 100% !important;
    column-gap: 0.65rem !important;
  }
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-input,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-select-wrap,
  html body #wpsl-wrap #wpsl-search-wrap form > .wpsl-search-btn-wrap {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: max-content !important;
    margin: 0 !important;
  }
}
