/* ============================================================
   Burgenlandkreis.com – Startseiten-Suchmaske (JBusinessDirectory)
   Modul: mod_jbusiness_listings_search (Modul-ID 113, Layout "horizontal",
          search-style-3), eingebettet im SP Page Builder (Startseite).
   Zieldatei: templates/j-nexus/css/custom.css  (ersetzt den bisherigen Inhalt)

   Echte Struktur (Live-DOM, 11.11.2026):
   #companies-search.jbd-container.business-directorybkl-search.horizontal.search-style-3
     #searchform.listing-search-form
       .jbd-search-bar
         form#keywordSearch                      <- grosses S! (nicht #keywordsearch)
           .form-container
             .fields-container
               .form-field.search       > .has-text-left > label.text-label + input#searchkeyword
               .form-field.zipcode-container > .has-text-left > label.text-label + input#zipcode
             button.btn.btn-success.search-dir-button  (Icon i.la.la-search + "Suche")

   Eingrenzung: nur die horizontale Instanz im Stil 3 (Startseite), damit
   vertikale Instanzen (Seitenleiste, Suchseite) unberuehrt bleiben.

   Wichtig: Der Wrapper hat die ID #companies-search, NICHT die Klasse
   .companies-search. Alle Regeln unten haengen deshalb an
   "#companies-search.horizontal.search-style-3 #searchform ..." (2 IDs = schlaegt die Modul-CSS
   search-module.css ohne !important). !important nur dort, wo die Quelle selbst
   !important nutzt: template.css (Button-Hintergrund) und common.css (Button-
   margin/width auf Handy).
   ============================================================ */

#companies-search.horizontal.search-style-3 {
  --blk-h: 58px;              /* Hoehe aller drei Elemente */
  --blk-gap: 14px;            /* Abstand zwischen den Elementen */
  --blk-radius: 12px;
  --blk-field-bg: #f3f3f3;
  --blk-field-border: #dcdcdc;
  --blk-green: #2e7d4a;
  --blk-green-dark: #276a3f;
}

/* --- Reihe: Was | Wo | Suche ------------------------------- */
/* .jbd-search-bar ist ein Flex-Container; ohne dies schrumpft das Formular
   auf Inhaltsbreite (~660px) statt die volle Breite zu nutzen. */
#companies-search.horizontal.search-style-3 #searchform form#keywordSearch {
  flex: 1 1 auto;
  min-width: 0;
}

#companies-search.horizontal.search-style-3 #searchform .form-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--blk-gap);
  width: 100%;
}

/* Weisser Sammelrahmen des Moduls aufloesen; die Felder stehen selbst */
#companies-search.horizontal.search-style-3 #searchform .fields-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--blk-gap);
  min-width: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
}

/* --- Felder: gleiche Breite, gleiche Hoehe -------------------- */
#companies-search.horizontal.search-style-3 #searchform .form-field {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: var(--blk-h);
  margin: 0;
  line-height: 1.2;
  background: var(--blk-field-bg);
  border: 1px solid var(--blk-field-border);   /* ueberschreibt border-left des Moduls */
  border-radius: var(--blk-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
  /* KEIN overflow:hidden: die .search-dropdown-Boxen (Vorschlaege/Validierung)
     sind absolut positioniert und wuerden abgeschnitten. */
}

#companies-search.horizontal.search-style-3 #searchform .form-field:focus-within {
  border-color: var(--blk-green);
  box-shadow: 0 0 0 3px rgba(46, 125, 74, .18);
}

/* Pflichtfeld-Fehler (Modul setzt .required auf das Input) */
#companies-search.horizontal.search-style-3 #searchform .form-field:has(input.required:placeholder-shown) {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, .15);
}

#companies-search.horizontal.search-style-3 #searchform .has-text-left {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 16px;
}

/* Label "Was" / "Wo": fett, links im Feld */
#companies-search.horizontal.search-style-3 #searchform .form-field label.text-label {
  display: block;
  flex: 0 0 auto;
  min-width: 34px;              /* "Was" und "Wo": Platzhalter beginnen auf einer Linie */
  margin: 0 12px 0 0;
  line-height: 1;
  font-weight: 700;
  font-size: 16px;
  color: #222;
  white-space: nowrap;
}

/* Eingabe: feste Breiten des Moduls (260px/200px) aufheben */
#companies-search.horizontal.search-style-3 #searchform .form-field input[type="text"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: normal;
  font-size: 16px;
  color: #222;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}

#companies-search.horizontal.search-style-3 #searchform .form-field input[type="text"]:focus,
#companies-search.horizontal.search-style-3 #searchform .form-field input[type="text"].required {
  border: 0 !important;
  box-shadow: none !important;   /* Modul setzt rote/blaue Innenschatten mit !important */
}

#companies-search.horizontal.search-style-3 #searchform .form-field input::placeholder {
  color: #6b6b6b;               /* ~4,9:1 auf #f3f3f3 */
  opacity: 1;
}

/* Vorschlags-/Validierungsboxen unter das hoehere Feld setzen (Modul: top:50px) */
#companies-search.horizontal.search-style-3 #searchform .search-dropdown {
  top: calc(100% + 6px);   /* z-index 999 des Moduls bleibt erhalten */
}

/* --- Button: gruen, schmal, gleiche Hoehe -------------------- */
#companies-search.horizontal.search-style-3 #searchform .search-dir-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: var(--blk-h);
  margin: 0;
  padding: 0 28px;
  line-height: 1;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  border-radius: var(--blk-radius);
  box-shadow: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
  /* template.css: .jbd-container:not(.jbd-edit-container) .btn-success { background:#0a0c0d !important } */
  background: var(--blk-green) !important;
  border: 1px solid var(--blk-green) !important;
}

#companies-search.horizontal.search-style-3 #searchform .search-dir-button:hover {
  background: var(--blk-green-dark) !important;
  border-color: var(--blk-green-dark) !important;
  color: #fff;
}

#companies-search.horizontal.search-style-3 #searchform .search-dir-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
  box-shadow: 0 0 0 3px var(--blk-green-dark);
}

#companies-search.horizontal.search-style-3 #searchform .search-dir-button .la {
  font-size: 20px;
  line-height: 1;
  color: #fff;
}

/* --- "Wo" schmal: feste Breite, "Was" nimmt den Rest ----------- */
/* 240px = Label "Wo" (~78px inkl. Innenabstand) + Platz fuer Ortsnamen
   wie "Naumburg (Saale)" oder "Hohenmoelsen" bei 16px. Nur ab 770px,
   darunter stehen die Felder ohnehin untereinander in voller Breite. */
@media (min-width: 770px) {
  #companies-search.horizontal.search-style-3 #searchform .form-field.zipcode-container {
    flex: 0 0 240px;
  }
}

/* --- Tablet: Felder nebeneinander, Button volle Breite darunter -- */
@media (min-width: 770px) and (max-width: 991px) {
  #companies-search.horizontal.search-style-3 #searchform .form-container {
    flex-wrap: wrap;
  }

  #companies-search.horizontal.search-style-3 #searchform .fields-container,
  #companies-search.horizontal.search-style-3 #searchform .search-dir-button {
    flex: 1 1 100%;
  }
}

/* --- Smartphone: alles untereinander, volle Breite ------------- */
/* 769px = Umbruchpunkt des Moduls (search-module.css) */
@media (max-width: 769px) {
  #companies-search.horizontal.search-style-3 #searchform .form-container,
  #companies-search.horizontal.search-style-3 #searchform .fields-container {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  #companies-search.horizontal.search-style-3 #searchform .form-field {
    flex: 0 0 auto;
    width: 100%;
    height: 56px;
  }

  #companies-search.horizontal.search-style-3 #searchform .search-dir-button {
    width: 100% !important;       /* common.css/search-module.css setzen 95%/100% !important */
    height: 56px;
    margin: 0 !important;         /* common.css: margin-bottom:10px !important unter 576px */
  }
}