/**
 * doradoo - Suchvorschlaege im Kopfbereich (Desktop und Handy)
 * Gegenstueck zu doradoo_suchvorschlaege_js. Nur Aussehen.
 *
 * BEIM UMZUG INS THEME: unveraendert nach doradoo-custom.css. Die
 * Klassen beginnen alle mit dd-vorschlag- und kollidieren mit nichts
 * im Theme, darum kommt diese Datei ohne ein einziges !important aus.
 *
 * Aufbau: zuerst die Grundform fuer beide Breiten, unten die
 * Abweichungen fuer schmale Bildschirme.
 */

/* Die Tafel haengt an .search-field, die das Theme bereits auf
   position: relative stellt - gemessen 619 x 40 px. Deshalb reicht
   width: 100%, eine feste Breite waere bei anderen Fensterbreiten
   falsch. 8 px Abstand, damit sie nicht am Feld klebt. */
/* Rahmen und Innenabstaende sollen in die angegebene Groesse
   hineinrechnen: sonst ist die Tafel 2 px breiter als das Feld
   (621 statt 619) und sechs Zeilen passen nicht in die Hoehe. */
.dd-vorschlag,
.dd-vorschlag * { box-sizing: border-box; }

.dd-vorschlag {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #e6e6ea;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20, 20, 30, .16);
  overflow: hidden;
  z-index: 1200;
  font-family: inherit;
}

/* Waehrend eine Abfrage laeuft, bleibt die bisherige Liste stehen und
   wird nur leicht zurueckgenommen - ein Leerblinken bei jedem
   Tastendruck waere unruhiger als eine kurze Verzoegerung. */
.dd-vorschlag.dd-laedt { opacity: .55; }

.dd-vorschlag-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 16px 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a9aa2;
}
.dd-vorschlag-kopf span + span {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  color: #b3b3ba;
}

/* Sechs Zeilen zu 62 px passen genau hinein - 6 x 62 = 372.
   Die Begrenzung steht trotzdem da, falls die Anzahl spaeter
   erhoeht wird; dann rollt die Liste. */
.dd-vorschlag-liste { max-height: 372px; overflow-y: auto; }

.dd-vorschlag-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  height: 62px;
  text-decoration: none;
  color: #2f2f35;
}
.dd-vorschlag-zeile:hover,
.dd-vorschlag-zeile.dd-aktiv { background: #FDF3D8; }

.dd-vorschlag-bild {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #e9e9ee;
  overflow: hidden;
}
.dd-vorschlag-bild img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  display: block;
}

.dd-vorschlag-mitte { flex: 1 1 auto; min-width: 0; }

.dd-vorschlag-titel {
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Das getippte Wort. mark faerbt der Browser sonst knallgelb. */
.dd-vorschlag-titel mark {
  background: #FBEBB6;
  color: inherit;
  font-weight: 600;
  border-radius: 2px;
  padding: 0 1px;
}

.dd-vorschlag-unten {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 11px;
  color: #8b8b93;
  white-space: nowrap;
  overflow: hidden;
}
.dd-vorschlag-shop {
  background: #E4EFE5;
  color: #2E5B3A;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
}

.dd-vorschlag-preis {
  flex: 0 0 auto;
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}
.dd-vorschlag-preis small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #8b8b93;
}

.dd-vorschlag-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  border-top: 1px solid #e6e6ea;
  background: #fcfcfd;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #2f2f35;
}
.dd-vorschlag-fuss:hover,
.dd-vorschlag-fuss.dd-aktiv { background: #FDF3D8; }
.dd-vorschlag-pfeil { color: #a58224; }

/* Heute erscheint bei einem Fehlschlag gar nichts und man weiss nicht,
   ob die Suche ueberhaupt arbeitet. Darum eine Antwort. */
.dd-vorschlag-leer {
  padding: 24px 16px;
  text-align: center;
  color: #8b8b93;
  font-size: 13px;
}
.dd-vorschlag-leer b {
  display: block;
  color: #2f2f35;
  font-size: 13.5px;
  margin-bottom: 3px;
}

/* Schmaler Rollbalken, damit die Liste nicht ausfranst. */
.dd-vorschlag-liste::-webkit-scrollbar { width: 8px; }
.dd-vorschlag-liste::-webkit-scrollbar-thumb {
  background: #dcdce2;
  border-radius: 4px;
  border: 2px solid #fff;
}

/* Bewusst NICHT hier: ein .ui-autocomplete { display: none }.
   Die Klasse gehoert jQuery UI und wird auf der Seite auch anderswo
   benutzt (Adressfelder im Inserate-Formular, Admin-Masken). Eine
   Regel darauf wuerde die dort ebenfalls stumm schalten. Die alte
   Liste raeumt das Skript weg - mit destroy, nicht mit Verstecken. */



/* =================================================================
   Schmale Bildschirme - unter 1240 px
   Gemessen bei 390 px: Suchfeld 354 x 45. Die alte Liste war dort
   302 px breit, 655 px hoch und begann bei y 75, also OBERHALB des
   Feldes quer ueber dem Kopfbereich.
   Hier: volle Feldbreite, unter dem Feld, vier Zeilen statt sechs,
   und ohne Vorschaubild - das laesst das Skript weg, nicht das CSS,
   damit die Bilder gar nicht erst geladen werden.
   ================================================================= */
@media screen and (max-width: 1239px) {

/* Ohne position: relative haengt die Tafel am falschen Kasten.
   Auf dem Desktop setzt das Theme es schon selbst. */
.search-field { position: relative; }

.dd-vorschlag {
  top: calc(100% + 6px);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(20, 20, 30, .18);
}

/* Vier Zeilen zu 56 px. Mehr waere sinnlos: die Bildschirmtastatur
   verdeckt die untere Haelfte, sichtbar bleiben rund 300 px. */
.dd-vorschlag-liste { max-height: 224px; }

.dd-vorschlag-kopf { padding: 9px 14px 4px; }

.dd-vorschlag-zeile {
  height: 56px;
  padding: 8px 14px;
  gap: 10px;
}

/* Ohne Bild bleibt genug Platz, damit der Preis rechts stehen kann -
   von 354 px gehen 28 px Innenabstand ab, der Preis braucht rund
   70 px, Ort und SHOP rund 100 px. Fuer den Titel bleiben rund
   240 px, einzeilig mit Auslassungspunkten. */
.dd-vorschlag-titel { font-size: 13px; }
.dd-vorschlag-unten { font-size: 10.5px; gap: 6px; }
.dd-vorschlag-preis { font-size: 13px; }
.dd-vorschlag-preis small { font-size: 9.5px; }

.dd-vorschlag-fuss {
  height: 42px;
  padding: 0 14px;
  font-size: 12.5px;
}

.dd-vorschlag-leer { padding: 20px 14px; }

/* dd-kontrast ---------------------------------------------------
   Mehr Kontrast auf dem Handy. Gegen Sonnenlicht und bei kleinerer
   Schrift reichten die hellen Grautoene nicht. Nachgerechnet auf
   weissem Grund (AA verlangt 4.5 fuer kleinen Text):
     Kopfzeile      #9a9aa2  2.79  ->  #2e2e2e  5.95
     Ort, Waehrung  #8b8b93  3.38  ->  #2e2e2e  6.62
     Titel          #2f2f35 13.30  ->  #000000 16.99
   Dazu ein staerkerer Rahmen, feine Trennlinien zwischen den Zeilen
   und ein kraeftigerer Ton fuer das getippte Wort. Der Desktop
   bleibt wie er ist. ------------------------------------------- */

.dd-vorschlag {
  border-color: #d3d3db;
  box-shadow: 0 12px 30px rgba(15, 15, 25, .26);
}

/* Die Kopfzeile bekommt ein helles Band, damit sie sich vom ersten
   Treffer absetzt statt mit ihm zu verschwimmen. */
.dd-vorschlag-kopf {
  color: #2e2e2e;
  background: #f4f4f7;
  border-bottom: 1px solid #e3e3e9;
  padding: 8px 14px;
}
.dd-vorschlag-kopf span + span { color: #2e2e2e; }

/* Trennlinien: auf dem kleinen Bildschirm liegen die Zeilen dicht
   beieinander, ohne Linie verlaufen sie ineinander. */
.dd-vorschlag-zeile + .dd-vorschlag-zeile { border-top: 1px solid #ededf1; }

.dd-vorschlag-titel { color: #000000; font-weight: 500; }
.dd-vorschlag-titel mark { background: #F6D97E; }
.dd-vorschlag-unten { color: #2e2e2e; }
.dd-vorschlag-preis { color: #000000; }
.dd-vorschlag-preis small { color: #2e2e2e; }

/* Beim Antippen deutlicher, weil auf dem Handy kein Mauszeiger
   verraet, welche Zeile gemeint ist. */
.dd-vorschlag-zeile:active,
.dd-vorschlag-zeile.dd-aktiv,
.dd-vorschlag-fuss:active,
.dd-vorschlag-fuss.dd-aktiv { background: #FBEAC0; }

.dd-vorschlag-fuss {
  color: #000000;
  background: #f4f4f7;
  border-top-color: #d3d3db;
}
.dd-vorschlag-pfeil { color: #000000; }

.dd-vorschlag-leer { color: #2e2e2e; }
.dd-vorschlag-leer b { color: #000000; }

} /* Ende @media max-width 1239px */