/* ·····························································
   Doradoo - Suche als Lupe
   Bedingung: Theme doradoo - also ALLE Seiten, Startseite mit
   eingeschlossen. Die Lupe ist damit ueberall im Kopfbereich
   erreichbar, auch nach dem Scrollen.

   Das AUSBLENDEN des grossen Suchfelds steht bewusst in einer
   eigenen Regel ("Doradoo - Suchfeld aus", alle Seiten ausser der
   Startseite). Auf der Startseite bleibt das Feld sichtbar: dort
   ist Suchen die haeufigste erste Handlung, und ein sichtbares Feld
   fordert dazu auf, waehrend eine Lupe erst erkannt werden will.

   Nur unter 1240 px. Der Desktop bleibt unberuehrt.

   Gemessen in einem echten 390-px-Fenster:
     header #headerform   y 146, x 8-382, Hoehe 45
     Eingabefeld          name product_title, "Was suchen Sie?"
     Vorschlaege          .dd-vorschlag haengt IN .search-field -
                          sie wandern also mit, wenn das ganze
                          Formular verschoben wird.
   ····························································· */

@media screen and (max-width: 1239px) {

  /* --- 2. Die Zeichen im Kopfbereich ---------------------------- */

  /* Gemeinsamer Behaelter fuer Lupe und Filterzeichen, damit sie
     sich nicht gegenseitig ueberdecken. Er sitzt im fixed Container
     des Hamburgers und folgt ihm dadurch beim Scrollen.

     Der Hamburger sitzt bei x 361-382 in einem Container, der bei
     x 8 beginnt und bei 403 endet. right: 58px setzt die rechte
     Kante auf 345 - 16 px Luft bis zum Hamburger.
     top: 15px, weil das Hamburger-Zeichen 20 px tiefer sitzt als
     sein eigener Container (Mitte y 109). */
  .dd-kopfzeichen {
    position: absolute !important;
    top: 15px !important;
    right: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 2 !important;
  }

  .dd-hs-knopf {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.7) !important;
    color: #1c1c22 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex: none !important;
  }
  .dd-hs-knopf svg { display: block !important; }

  /* Offen: dunkel gefuellt, wie ein gedrueckter Knopf. Kein Wechsel
     zu einem Kreuz - im Suchfeld steht schon eines zum Loeschen. */
  .dd-hs-knopf.dd-offen {
    background: #333333 !important;
    color: #ffffff !important;
  }

  /* --- 3. Die aufgeklappte Suche -------------------------------- */

  .dd-hs {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    display: block !important;
  }
  .dd-hs[hidden] { display: none !important; }

  /* Beginnt unter dem Streifen, damit die Lupe bedienbar bleibt und
     ein zweiter Tipp wieder schliesst. */
  .dd-hs-schleier {
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(16,16,22,.62) !important;
  }
  body.toolbar-fixed .dd-hs-schleier { top: 89px !important; }
  body.toolbar-tray-open.toolbar-horizontal .dd-hs-schleier { top: 129px !important; }

  .dd-hs-karte {
    position: absolute !important;
    top: 62px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 12px !important;
    z-index: 9100 !important;
  }
  body.toolbar-fixed .dd-hs-karte { top: 101px !important; }
  body.toolbar-tray-open.toolbar-horizontal .dd-hs-karte { top: 141px !important; }

  /* Das Suchformular des Themes, hier hineingehaengt und gross */
  .dd-hs-karte #headerform {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .dd-hs-karte #headerform input[name="product_title"] {
    width: 100% !important;
    max-width: none !important;
    height: 54px !important;
    border-radius: 13px !important;
    border: 0 !important;
    background: #ffffff !important;
    font-size: 16px !important;
    box-shadow: 0 8px 26px rgba(10,10,16,.4) !important;
  }

  /* Der Suchknopf des Themes steht sonst UNTER dem Feld - im
     Kopfbereich sass er per eigener Regel darin. .search-field ist
     bereits position: relative, also genuegt absolut setzen.
     Rechts im Feld, auf halber Hoehe der 54 px. */
  .dd-hs-karte .search-field .search-icon {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
    cursor: pointer !important;
  }
  .dd-hs-karte .search-field .search-icon img {
    width: 22px !important;
    height: 22px !important;
  }
  /* Platz fuer den Knopf, damit der Text nicht darunter laeuft. */
  .dd-hs-karte #headerform input[name="product_title"] {
    padding-right: 48px !important;
    padding-left: 16px !important;
  }

  /* Die Vorschlaege haengen in .search-field und wandern mit. Im
     Ueberlager brauchen sie eine eigene Karte statt eines
     Klappfaches. */
  .dd-hs-karte .dd-vorschlag {
    position: static !important;
    margin-top: 10px !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 26px rgba(10,10,16,.32) !important;
    max-height: 60vh !important;
    max-height: 60dvh !important;
    overflow-y: auto !important;
  }

  body.dd-hs-offen { overflow: hidden !important; }

}