/* Search field in the header bar (GS 11/13/2026, port of GewinnHai 11/10/2026).
   Markup: gh_kopfsuche_html() in site/helpers.php, behaviour:
   assets/kopfsuche.js, data: /api/kopfsuche.php. Colours and sizes only from
   the unslop tokens (assets/quelle/unslop.css), so the field looks like the
   other buttons of the bar: 36 px high, hairline, button radius.
   Desktop (> 960 px): field at the right end of the menu.
   Phone  (<= 960 px): magnifier next to "Menu"; when open, the field sits IN
   the bar to the right of the logo, the result list full width below.
   GH's section for the paid-entry badge is deliberately not ported: GS has
   no paid entries. */

header.site-header .site-nav { display: flex !important; align-items: center; gap: var(--u-2, 8px); }

.kopfsuche-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

header.site-header .kopfsuche { position: relative; flex: 0 1 auto; min-width: 0; }

header.site-header .kopfsuche-form {
  position: relative;
  display: flex; align-items: center;
  margin: 0; padding: 0;
}
header.site-header .kopfsuche-lupe {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--u-text-3, #93a6c6); pointer-events: none;
}
header.site-header .kopfsuche-lupe svg,
header.site-header .kopfsuche-auf svg { width: 16px; height: 16px; }

html body header.site-header .kopfsuche-feld {
  box-sizing: border-box;
  width: clamp(164px, 16vw, 230px);
  height: 36px; min-height: 36px;
  margin: 0;
  padding: 0 10px 0 32px !important;
  border: 1px solid var(--u-linie, rgba(143,180,255,.16)) !important;
  border-radius: var(--u-r-knopf, 8px) !important;
  background: var(--u-flaeche, #0f2a50) !important;
  color: var(--u-text, #eef3fb) !important;
  font: inherit; font-size: var(--u-t-14, 14px) !important;
  line-height: 1.2;
  box-shadow: none !important;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, width .2s ease;
}
html body header.site-header .kopfsuche-feld::placeholder { color: var(--u-text-3, #93a6c6); opacity: 1; }
html body header.site-header .kopfsuche-feld::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
html body header.site-header .kopfsuche-feld:hover { border-color: var(--u-linie-2, rgba(143,180,255,.28)) !important; }
html body header.site-header .kopfsuche-feld:focus {
  outline: 2px solid var(--u-fokus, #8fb4ff); outline-offset: 2px;
  border-color: var(--u-linie-2, rgba(143,180,255,.28)) !important;
}
@media (min-width: 961px) {
  html body header.site-header .kopfsuche-feld:focus { width: clamp(200px, 20vw, 300px); }
}

/* Buttons: magnifier (phone only, closed) and close (phone only, open) */
header.site-header .kopfsuche-auf,
header.site-header .kopfsuche-zu {
  position: relative;
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-height: 36px; padding: 0; margin: 0;
  border: 1px solid var(--u-linie, rgba(143,180,255,.16));
  border-radius: var(--u-r-knopf, 8px);
  background: var(--u-flaeche, #0f2a50);
  color: var(--u-text, #eef3fb);
  cursor: pointer;
}
/* 48 px tap target like the "Menu" button */
header.site-header .kopfsuche-auf::after,
header.site-header .kopfsuche-zu::after { content: ""; position: absolute; inset: -6px -4px; }
header.site-header .kopfsuche-auf:hover,
header.site-header .kopfsuche-zu:hover { background: var(--u-erhoben, #15335c); }
header.site-header .kopfsuche-auf:focus-visible,
header.site-header .kopfsuche-zu:focus-visible { outline: 2px solid var(--u-fokus, #8fb4ff); outline-offset: 2px; }

/* Result list */
.kopfsuche-liste {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px;
  background: var(--u-flaeche, #0f2a50);
  border: 1px solid var(--u-linie-2, rgba(143,180,255,.28));
  border-radius: var(--u-r-karte, 12px);
  box-shadow: var(--u-schatten-menue, 0 8px 24px rgba(0,0,0,.4));
  z-index: 70;
  text-align: left;
}
.kopfsuche-liste[hidden] { display: none !important; }
html body .kopfsuche-liste a.kopfsuche-treffer {
  display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center;
  padding: 8px; border-radius: var(--u-r-stempel, 6px);
  color: var(--u-text, #eef3fb) !important; text-decoration: none !important;
  background: transparent;
}
html body .kopfsuche-liste a.kopfsuche-treffer:hover,
html body .kopfsuche-liste a.kopfsuche-treffer.ist-aktiv { background: var(--u-erhoben, #15335c); }
html body .kopfsuche-liste a.kopfsuche-treffer.ist-aktiv { outline: 1px solid var(--u-linie-2, rgba(143,180,255,.28)); }
.kopfsuche-treffer img {
  grid-row: 1 / span 2; width: 44px; height: 44px; object-fit: contain;
  border-radius: var(--u-r-stempel, 6px); background: var(--u-erhoben, #15335c);
}
.kopfsuche-titel {
  font-size: var(--u-t-14, 14px); font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kopfsuche-meta { font-size: var(--u-t-12, 12px); color: var(--u-text-2, #c3d0e6); line-height: 1.3; }
.kopfsuche-meta .u-mono { font-family: var(--u-font-mono, ui-monospace, monospace); }
.kopfsuche-liste .kopfsuche-titel, .kopfsuche-liste .kopfsuche-meta { grid-column: 2; }
.kopfsuche-hinweis { margin: 0; padding: 10px 8px; font-size: var(--u-t-14, 14px); color: var(--u-text-2, #c3d0e6); }

/* Further search fields taken over by the script (filter bar /giveaways,
   404 page, data-livesuche): list right below the field, full field width. */
form[data-livesuche-aktiv] { position: relative; }
form[data-livesuche-aktiv] > .kopfsuche-liste { left: 0; right: auto; width: 100%; min-width: min(320px, calc(100vw - 32px)); }

/* --- Phone and narrow windows -------------------------------------------- */
@media (max-width: 960px) {
  header.site-header .site-nav { gap: var(--u-2, 8px); }
  header.site-header .kopfsuche { position: static; order: -1; }
  header.site-header .kopfsuche-auf { display: inline-flex; }
  header.site-header .kopfsuche-form { display: none; }
  /* Open: the field lies in the bar, right of the logo image (36 px + 8 px). */
  header.site-header .kopfsuche.ist-offen .kopfsuche-form {
    display: flex; gap: var(--u-2, 8px);
    position: absolute; z-index: 65;
    top: 0; bottom: 1px;
    left: calc(var(--u-rand, 16px) + 44px); right: var(--u-rand, 16px);
    background: var(--u-bg-tief, #071a33);
  }
  header.site-header .kopfsuche.ist-offen .kopfsuche-auf { visibility: hidden; }
  header.site-header .kopfsuche.ist-offen .kopfsuche-zu { display: inline-flex; flex: 0 0 auto; }
  header.site-header .kopfsuche.ist-offen .kopfsuche-lupe { left: 10px; }
  html body header.site-header .kopfsuche-feld,
  html body header.site-header .kopfsuche-feld:focus {
    flex: 1 1 auto; width: auto; min-width: 0;
    font-size: 16px !important; /* iOS zooms below 16 px on focus */
  }
  header.site-header .kopfsuche-liste {
    position: fixed; top: calc(var(--u-kopf-hoehe, 55px) + 1px); left: 0; right: 0;
    width: auto; max-height: calc(100dvh - var(--u-kopf-hoehe, 55px) - 1px);
    border-radius: 0; border-left: 0; border-right: 0;
    padding: 6px var(--u-rand, 16px);
    background: var(--u-bg-tief, #071a33);
  }
  form[data-livesuche-aktiv] > .kopfsuche-liste { position: absolute; top: calc(100% + 6px); width: 100%; border-radius: var(--u-r-karte, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  html body header.site-header .kopfsuche-feld { transition: none; }
}