/* Suchfeld in der Kopfleiste (10.11.2026) — Markup: gh_kopfsuche_html() in
   neu/helpers.php, Verhalten: assets/kopfsuche.js. Farben und Masse nur aus
   den unslop-Tokens (assets/quelle/unslop.css), damit das Feld aussieht wie
   die uebrigen Knoepfe der Leiste: 36 px hoch, Haarlinie, Knopfradius.
   Desktop (> 960 px): Feld rechts neben „Gratisproben".
   Handy  (<= 960 px): Lupe neben „Menü"; offen liegt das Feld IN der Leiste
   rechts vom Logo, die Trefferliste volle Breite darunter. */

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); }
}

/* Knoepfe: Lupe (nur Handy, zu) und Schliessen (nur Handy, offen) */
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;
}
/* Tippflaeche 48 px wie beim Knopf „Menü" */
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; }

/* Trefferliste */
.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); }
/* Schild „Anzeige" in den Treffern: eigene Zeile unter dem Titel, rechte
   Spalte des Rasters. Die Optik kommt aus dem Abschnitt „SCHILD ANZEIGE" unten. */
.kopfsuche-liste .anzeige-marke { grid-column: 2; justify-self: start; margin: 3px 0 2px; }
.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); }

/* Weitere Suchfelder, die das Skript uebernimmt (Filterleiste /gewinnspiele,
   404-Seite): Liste direkt unter dem Feld, volle Feldbreite. */
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)); }

/* --- Handy und schmale Fenster ------------------------------------------- */
@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; }
  /* Offen: das Feld liegt in der Leiste, rechts vom Logo-Bild (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 zoomt unter 16 px beim Fokus */
  }
  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; }
}


/* === SCHILD ANZEIGE — EINE Optik fuer ALLE Kennzeichnungen (Welle 3, 10.11.2026) ===
   Gilt fuer .anzeige-marke (bezahlte Gewinnspiele, gh_anzeige_marke in
   helpers.php, Treffer der Kopfsuche) und .werbe-marke (Shops, Gutscheine,
   Deals, Aktionen, gh_werbe_marke in sparen_helpers.php).
   Nutzer: „darf nicht untergehen das ding, anzeige muss auffallend sein".

   WARUM HIER: diese Datei reist mit dem Menue (gh_kopfsuche_html) auf JEDE
   Seite, auch auf die vorgerenderten — die einzige Stelle, die alle Seiten
   sicher laden.
   WARUM !important (nur an der Optik, nie an Lage/Abstand): aeltere
   seiteneigene Regeln (ticket.css `.tk__aktionen .werbe-marke`,
   gewinnspiel.php `.gh-shop-codes .werbe-marke`, deals.css) stehen spaeter
   im Dokument oder spezifischer und wuerden das Schild sonst wieder blass
   faerben. Eine Kennzeichnungspflicht darf keine Seitenregel ueberstimmen.

   FARBE: Amber auf dem Seitenblau — hebt sich vom blauen Flare/den blauen
   Flaechen UND vom roten Teilnahme-Knopf ab. Schrift im Seiten-Dunkelblau.
   Kontrast #0B1B33 auf #FFC53D = 10,9:1 (WCAG AA verlangt 4,5:1).
   Die Seite hat nur ein dunkles Schema; das Schild ist in sich kontrastfest
   und braucht keine zweite Fassung. */
:root { --gh-anzeige-grund: #FFC53D; --gh-anzeige-schrift: #0B1B33; }
html body .anzeige-marke, html body .werbe-marke {
  display: inline-flex !important; align-items: center; width: max-content; max-width: 100%;
  white-space: nowrap !important; vertical-align: middle;
  padding: 3px 8px !important; border: 0 !important; border-radius: 4px !important;
  background: var(--gh-anzeige-grund) !important; color: var(--gh-anzeige-schrift) !important;
  font-family: inherit; font-size: 13px !important; font-weight: 800 !important; line-height: 1.2 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important; text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
html body .anzeige-marke::before, html body .werbe-marke::before { content: none !important; display: none !important; }
/* Detailseite: unter dem H1 groesser. */
html body .gs-anzeige-zeile .anzeige-marke {
  font-size: 15px !important; padding: 5px 12px !important; border-radius: 5px !important;
}
/* Shop-/Gutschein-/Deal-Seite: das Schild neben dem Einloese-Knopf
   (.tk__aktionen) auf Knopfhoehe mittig statt am Boden. */
html body .tk__aktionen > .werbe-marke { align-self: center; }