/* ============================================
   ECX 30 - Vorschlagsliste der Header-Suche
   Ajax Search Pro, Instanz 7 ("Suche Header 2025").
   Seit 09.10.2026, DECISIONS Punkt 61.

   Nur Theme-CSS, keine ASP-Einstellung angefasst.
   Dazu js/suche-dropdown.js: Link "Alle Ergebnisse"
   und die Feldbreite fuer die rechtsbuendige Lage.

   WO DIE LISTE LIEGT: ASP haengt #ajaxsearchprores7_1
   ans Ende von <body>, nicht in die Topbar. Deshalb
   kein .ecx-topbar__search davor; begrenzt wird ueber
   die IDs wie beim Suchfeld (topbar.css, Punkt 53).

   WARUM DIE IDs: ASP schreibt seine Regeln als
   #ajaxsearchprores7_1 .results .item ... (1,3,x).
   :is() mit beiden IDs plus .asp_r.vertical liegt eine
   Klasse darueber - ohne !important.

   INLINE-STILE VON ASP (width, top, left am Container,
   height an .results) schlaegt nur !important. Statt-
   dessen: min-width/max-width gegen width, max-height
   gegen height, translate gegen left.
   ============================================ */

:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical {
  /*
   * Breite: ASP setzt die Feldbreite inline (240px am Desktop).
   * min-width gewinnt gegen width, max-width gegen beide - ergibt
   * 420px, hoechstens Viewport minus 2 x 16px. Ist das Feld selbst
   * breiter (aufgeklappte Suchzeile unter 900px), bleibt dessen Breite.
   */
  min-width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);

  /*
   * Rechtsbuendig: ASP setzt left auf die linke Feldkante. translate
   * schiebt um (Feldbreite - eigene Breite) nach links, rechte Kante
   * also auf der Feldkante. --ecx-asp-feld setzt suche-dropdown.js aus
   * ASPs eigener Inline-Breite. Fehlt sie, bleibt die Liste linksbuendig
   * (100% - 100% = 0). translate addiert sich zu ASPs Einblend-
   * Animation (die laeuft ueber transform).
   */
  translate: calc(var(--ecx-asp-feld, 100%) - 100%) 0;

  margin-top: 8px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  font-family: var(--font);
}

/*
 * Scrollbereich. Hoehe gesamt ca. 70vh: abzueglich der Fusszeile
 * "Alle Ergebnisse" (48px + Rand). dvh fuer Handys mit eingeblendeter
 * Leiste. ASP rechnet die Hoehe inline auf rund vier Treffer; die
 * entfernt suche-dropdown.js. Darunter steht ASPs Grundregel
 * height: 0 (style.basic) - daher hier auto.
 */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results {
  height: auto;
  max-height: calc(70vh - 50px);
  max-height: calc(70dvh - 50px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- Treffer ---- */

:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item {
  position: relative;
  padding: 12px 16px;
  background: var(--surface);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

/*
 * Hover, Pfeiltasten (ASP setzt .hovered) und Tastaturfokus sehen
 * gleich aus. ASP malt .hovered mit einem Verlauf - der muss weg.
 * --bg statt --line-2: auf --line-2 faellt --ec-red-600 unter 4.5:1.
 */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item:hover,
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item.hovered,
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item:focus-within {
  background: var(--bg);
  background-image: none;
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item:has(.asp_res_url:focus-visible) {
  outline: 2px solid var(--ec-red);
  outline-offset: -2px;
}

/* Trennlinie: ASPs eigene Linie (::after) in ECX-Farbe. */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item::after {
  left: 0;
  height: 1px;
  background: var(--line);
}

:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item .asp_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  margin: 0;
  font-family: var(--font);
  min-width: 0;
}

/* Leeres Meta-Feld (Instanz 7 zeigt weder Autor noch Datum) und Float-Clear. */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item div.etc,
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item .clear {
  display: none;
}

/*
 * Titel. Die ganze Zeile ist klickbar: ASP legt span.overlap absolut
 * ueber den Treffer; hier auf volle Groesse gezogen.
 */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item .asp_content h3 {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  line-height: 1.35;
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item .asp_content h3 a,
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item .asp_content h3 a:hover {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ec-blue);
  text-decoration: none;
  overflow-wrap: anywhere;
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item .asp_content h3 a:focus-visible {
  outline: none;
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item .overlap {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}

/* Text: --ink-2, weil --ink-3 auf Weiss nur 4.38:1 erreicht. */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item div.asp_res_text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* Treffer-Begriff: rot, halbfett, ohne ASPs grauen Grund. */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical span.highlighted {
  color: var(--ec-red-600);
  font-weight: 600;
  background: none;
}

/* ---- Typ-Chip ----
 * Benennung wie auf der Suchergebnisseite (ecx_suche_typ() in
 * inc/suche.php) - bei Aenderungen beide Stellen pflegen.
 * Sprache ueber :lang(), das erbt vom lang-Attribut des <html>.
 * Unbekannte Typen bekommen keinen Chip.
 */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item .asp_content::before {
  display: none;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--ec-blue-100);
  color: var(--ec-blue);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results :is(.asp_r_podcast, .asp_r_veranstaltungen, .asp_r_live-events, .asp_r_lehrvideo, .asp_r_ec-news, .asp_r_klassifikationen, .asp_r_literatur, .asp_r_bildergalerie, .asp_r_ec-image-challenge, .asp_r_firma, .asp_r_page, .asp_r_post) .asp_content::before {
  display: inline-block;
}

:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_podcast            .asp_content::before { content: "Podcast"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_veranstaltungen    .asp_content::before { content: "Termin"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_live-events        .asp_content::before { content: "Live-Demo"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_lehrvideo          .asp_content::before { content: "Lehrvideo"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_ec-news            .asp_content::before { content: "ASGE Journal Scan"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_klassifikationen   .asp_content::before { content: "Klassifikation"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_literatur          .asp_content::before { content: "Literatur"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_bildergalerie      .asp_content::before { content: "Bildergalerie"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_ec-image-challenge .asp_content::before { content: "Image Challenge"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_firma              .asp_content::before { content: "Firma"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_page               .asp_content::before { content: "Seite"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2) .asp_r_post               .asp_content::before { content: "Beitrag"; }

:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_veranstaltungen  .asp_content::before { content: "Event"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_live-events      .asp_content::before { content: "Live demo"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_lehrvideo        .asp_content::before { content: "Teaching video"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_klassifikationen .asp_content::before { content: "Classification"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_literatur        .asp_content::before { content: "Literature"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_bildergalerie    .asp_content::before { content: "Image gallery"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_firma            .asp_content::before { content: "Company"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_page             .asp_content::before { content: "Page"; }
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2):lang(en) .asp_r_post             .asp_content::before { content: "Article"; }

/* ---- Keine Treffer ---- */

:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .asp_nores {
  padding: 16px;
  box-shadow: none;
  background: var(--surface);
  font-family: var(--font);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
/* "Meinten Sie:" - ASPs rgb(234,67,53) erreicht auf Weiss nur 3.9:1. */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .asp_nores .asp_nores_kw_suggestions {
  color: var(--ec-red-600);
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .asp_nores .asp_keyword {
  color: var(--ec-blue);
  font-weight: 600;
}

/* ---- Ladeanimation ----
 * Instanz 7 steht auf loaderLocation "none" - ASP blendet diesen
 * Lader derzeit nie ein. Gestaltet fuer den Fall, dass sich das aendert.
 */
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r .asp_res_loader {
  height: 64px;
  padding: 16px;
  background: var(--surface);
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r .asp_res_loader .asp_loader {
  width: 32px;
  height: 32px;
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r .asp_res_loader div.asp_simple-circle {
  border: 3px solid var(--ec-blue-100);
  border-top-color: var(--ec-red);
}

/* ---- Fusszeile "Alle Ergebnisse" (aus suche-dropdown.js) ---- */

:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r a.ecx-asp-alle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ec-blue);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r a.ecx-asp-alle::after {
  content: "\2192";
  font-weight: 400;
  transition: transform var(--dur) var(--ease);
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r a.ecx-asp-alle:hover,
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r a.ecx-asp-alle:focus-visible {
  background: var(--bg);
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r a.ecx-asp-alle:hover::after {
  transform: translateX(3px);
}
:is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r a.ecx-asp-alle:focus-visible {
  outline: 2px solid var(--ec-red);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  :is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r.vertical .results .item,
  :is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r a.ecx-asp-alle,
  :is(#ajaxsearchprores7_1, #ajaxsearchprores7_2).asp_r a.ecx-asp-alle::after { transition: none; }
}