/* ═════════════════════════════════════════════════════════════════════
   Such-Tokens: Farben, Typografie und Abstaende der Trefferliste stehen HIER an
   einer Stelle. Die Regeln weiter unten lesen nur noch var(--emp-search-*).
   Farben: Rueckfall auf die em-base-Variablen (Seiten-/Marken-Token), sonst Literal.
   Hell/Dunkel: das Flyout ist bewusst eine helle Flaeche (keine Vererbung aus
   sc-dark-Sektionen); die Uebernahme (.emp-blog-search--takeover) folgt den
   Menuefarben und ueberschreibt Text/Gedaempft/Linie/Hover unten in EINEM Block.
   :where() haelt die Spezifitaet bei 0: jede Regel (Uebernahme, Projekt) ueberschreibt.
   Namensraum: --emp-search-bg, --emp-search-line, --emp-search-line-base und
   --emp-search-icon-hover gehoeren dem Eingabefeld (Inspector/Icons) und bleiben.
   ═════════════════════════════════════════════════════════════════════ */

:where(.emp-blog-search) {
  --emp-search-surface: var(--surface-bg, #fff);
  --emp-search-surface-subtle: var(--surface-subtle, #fafafa);
  --emp-search-surface-hover: var(--surface-hover, #f8f9fa);
  /* Markierung der Zeile bei Hover/Pfeiltaste (UB-0f): Akzent 12 % ueber der Hover-Flaeche.
     12 % gemessen: Beschreibung (#666) bleibt >= 4,5:1 (Standardakzent 4,69, Rot 4,56);
     ab 14 % faellt sie bei dunklen Akzenten darunter. Die Abhebung traegt zusaetzlich
     der Akzentstreifen (.emp-search-hit:hover). In der Uebernahme ist die Hover-Flaeche
     halbtransparent, die Mischung bleibt ein Schleier ueber der Menueflaeche. */
  --emp-search-surface-active: color-mix(in srgb, var(--emp-search-accent) 12%, var(--emp-search-surface-hover));
  --emp-search-border: var(--border-color, #e5e5e5);
  --emp-search-divider: var(--border-subtle, #f0f0f0);
  --emp-search-text: var(--copytext-color, #111);
  --emp-search-muted: var(--copytext-muted, #666);
  /* Eingabefeld (Text/Lupe/X/Platzhalter): Vorgabe wie bisher; im Kopfmenue siehe UB-0b unten */
  --emp-search-fg: var(--copytext-color, #111);
  --emp-search-fg-muted: var(--copytext-muted, #777);
  --emp-search-accent: var(--cta-color, var(--primary-base, #8e683e));
  --emp-search-radius: var(--radius-md, 8px);
  --emp-search-radius-sm: var(--radius-sm, 6px);

  /* Typografie der Trefferzeile (STARTWERTE, auf rk5 mit scripts/seitensuche-typografie.mjs
     zu bestaetigen): Titel 600/14,5px bis 2 Zeilen, Beschreibung 400/12,5px gedaempft,
     Kicker 600/11px mit .06em, Zeilenabstand symmetrisch 12px. */
  --emp-search-title-size: 0.90625rem; /* 14,5px */
  --emp-search-title-weight: 600;
  --emp-search-title-lh: 1.35;
  --emp-search-title-lines: 2;
  --emp-search-desc-size: 0.78125rem; /* 12,5px */
  --emp-search-desc-weight: 400;
  --emp-search-desc-lh: 1.4;
  --emp-search-kicker-size: 0.6875rem; /* 11px */
  --emp-search-kicker-weight: 600;
  --emp-search-kicker-tracking: 0.06em;
  --emp-search-group-size: 0.72rem;
  --emp-search-group-weight: 700;
  --emp-search-group-tracking: 0.05em;
  /* Randnotiz (Trefferzahl "N Treffer" und Hinweiszeile): gleiche Groesse, normal
     statt fett (Betreiber-Entscheid 2026-10-29, Pin in catalogSearchRender.test.ts) */
  --emp-search-count-size: 0.78rem;
  --emp-search-count-weight: 400;
  --emp-search-count-gap: 0.9375rem; /* 15px zwischen Zaehlzeile und Liste */

  --emp-search-hit-pad-y: 0.75rem; /* 12px oben UND unten */
  --emp-search-hit-pad-x: 0.75rem;
  --emp-search-hit-gap: 0.75rem;
  --emp-search-thumb: 56px;
  --emp-search-thumb-bg: #eee;
}

/* ─── Expandierbare Inline-Suche (rechts) ───────────────────────────── */

.emp-blog-search {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.emp-blog-search[data-search-position="first"] {
  margin-left: 0;
  margin-right: auto;
}

.emp-blog-search[data-search-position="last"],
.emp-blog-search:not([data-search-position="first"]) {
  margin-left: auto;
  margin-right: 0;
}

/* Search Mode: aus (Ausgeblendet) */
.emp-blog-search--aus {
  display: none !important;
}

/* Search Mode: minimal - State 1: Inaktiv (nur Lupe) */
.emp-blog-search__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.35rem;
  /* Menuefarbe: der Menue-Slot setzt color: var(--menu-link-color, inherit), das SVG zeichnet
     mit currentColor; ein <button> erbt color nicht von selbst, daher ausdruecklich. */
  color: inherit;
  transition: color 0.15s ease;
}

/* Hover-Reihenfolge: Projekt-Variable, Hover-Farbe des Menues (wie die Links daneben),
   helle Variante dunkler Sektionen, bisheriger Rueckfall. */
.emp-blog-search__toggle:hover {
  color: var(--emp-search-icon-hover, var(--menu-hover-color, var(--emp-search-icon-hover-dunkel, var(--primary-dark, var(--cta-color, var(--primary-base, #8e683e))))));
}

.emp-blog-search--collapsed:not(.emp-blog-search--in-drawer) .emp-blog-search__toggle {
  display: flex !important;
}

.emp-blog-search--collapsed:not(.emp-blog-search--in-drawer) .emp-blog-search__form {
  display: none !important;
}

.emp-blog-search--expanded .emp-blog-search__toggle {
  display: none !important;
}

/* Search Mode: minimal - State 2: Aktiv (Lupe + Input + Unterstrich + X)
   Breite 192 px (60 % der frueheren 320 px, UB-0b); der Drawer (mobil) bleibt bei 100 %. */
.emp-blog-search--expanded .emp-blog-search__form {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  width: 192px;
  max-width: 100%;
  box-sizing: border-box;
  animation: empSearchExpand 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Search Mode: opened (Dauerhaft geöffnet) */
.emp-blog-search--opened .emp-blog-search__toggle {
  display: none !important;
}

.emp-blog-search--opened .emp-blog-search__form {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  width: 192px;
  max-width: 100%;
  box-sizing: border-box;
}

@keyframes empSearchExpand {
  from {
    width: 40px;
    opacity: 0;
  }
  to {
    width: 192px;
    opacity: 1;
  }
}

.emp-blog-search__icon {
  display: flex;
  align-items: center;
  color: var(--copytext-color, #222);
  flex-shrink: 0;
}

.emp-blog-search__input,
.emp-blog-search__input:focus,
.emp-blog-search__input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  font-size: 0.95rem;
  padding: 0.15rem 0.35rem;
  color: var(--emp-search-fg);
  flex: 1;
  min-width: 0;
  font-family: var(--copytext-font, inherit);
}

/* Suchfeld: Optik-Standard (Art Direction).
   - Linie NUR unter dem Eingabefeld (nicht unter Lupe/X), 1 px in gedaempfter
     Textfarbe; Rueckfall ohne color-mix: --copytext-muted. Eine im Inspector
     gewaehlte Linienfarbe (--emp-search-line) ueberschreibt beides.
   - Fokus: 2 px in --cta-color (bzw. gewaehlter Linienfarbe), ohne Hoehensprung
     (das Feld ist per min-height fest, der Input fuellt es).
   - Touch-Flaeche: Formular mind. 40 px (<= 480 px: 44 px).
   Spezifitaet (0,3,0) schlaegt den border:none-!important-Stapel oben. */
.emp-blog-search {
  --emp-search-line-base: var(--copytext-muted, #999);
}

@supports (color: color-mix(in srgb, red 35%, transparent)) {
  .emp-blog-search {
    --emp-search-line-base: color-mix(in srgb, var(--emp-search-fg) 35%, transparent);
  }
}

.emp-blog-search .emp-blog-search__form {
  min-height: 40px;
  gap: 0.625rem;
}

.emp-blog-search .emp-blog-search__form .emp-blog-search__input {
  align-self: stretch;
  border-bottom: 1px solid var(--emp-search-line, var(--emp-search-line-base)) !important;
  padding: 0.15rem 0.35rem;
}

.emp-blog-search .emp-blog-search__form .emp-blog-search__input:focus,
.emp-blog-search .emp-blog-search__form .emp-blog-search__input:focus-visible {
  border-bottom: 2px solid var(--emp-search-line, var(--cta-color, var(--primary-base, #8e683e))) !important;
}

@media (max-width: 480px) {
  .emp-blog-search .emp-blog-search__form {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .emp-blog-search .emp-blog-search__form .emp-blog-search__input {
    transition: border-color 0.15s ease;
  }
}

/* Seitenleiste (vertikale Menue-Slots): EINE Spalte mit dem Baum. Die Lupe
   beginnt an der Textkante der Eintraege (Link-Innenabstand 0.5rem), das Feld
   ist so breit wie der Baum (die Eintraege laufen dafuer ueber die ganze
   Spaltenbreite), Schrift = Schrift der Eintraege, Abstand darunter = eine
   Zeilenhoehe. Das Kopfmenue (menu-h) behaelt Breite (max. 320 px) und Schrift. */
:is([slot="menu"], [slot^="menu_"], [slot="menu-v"], [slot^="menu-v_"]) > .emp-blog-search {
  align-self: stretch;
  margin-inline: 0;
  margin-bottom: 1.5em;
  margin-bottom: 1lh;
}

:is([slot="menu"], [slot^="menu_"], [slot="menu-v"], [slot^="menu-v_"]):has(> .emp-blog-search) > .nav-item {
  align-self: stretch;
}

:is([slot="menu"], [slot^="menu_"], [slot="menu-v"], [slot^="menu-v_"]) > .emp-blog-search .emp-blog-search__form {
  width: 100%;
  max-width: 100%;
  padding-inline: 0.5rem;
}

:is([slot="menu"], [slot^="menu_"], [slot="menu-v"], [slot^="menu-v_"]) > .emp-blog-search .emp-blog-search__input {
  font-size: var(--menu-font-size, inherit);
}

/* Lupe: 17 px, Strich 1,75, gedaempft; bei Fokus im Formular volle Textfarbe.
   Lupe und X sitzen auf Hoehe des Textes (die 1-px-Linie liegt darunter). */
.emp-blog-search__form .emp-blog-search__icon {
  color: var(--emp-search-fg-muted);
  transition: color 0.15s ease;
  cursor: pointer;
}

/* Hover auf den Icons (Lupe, X, Toggle): primary dark. Die Lupe ist anklickbar (das
 * Skript setzt den Fokus ins Feld). Auf dunklen Flaechen waere primary dark zu dunkel:
 * dort die helle Variante; --emp-search-icon-hover laesst sich je Seite ueberschreiben. */
.emp-blog-search__form .emp-blog-search__icon:hover {
  color: var(--emp-search-icon-hover, var(--emp-search-icon-hover-dunkel, var(--primary-dark, var(--cta-color, var(--primary-base, #8e683e)))));
}

:is(.sc-dark, .sc-black) .emp-blog-search {
  --emp-search-icon-hover-dunkel: var(--primary-light, var(--primary-base, #fff));
}

.emp-blog-search__form .emp-blog-search__icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.75;
}

.emp-blog-search__form:focus-within .emp-blog-search__icon {
  color: var(--emp-search-fg);
}

.emp-blog-search__form .emp-blog-search__icon,
.emp-blog-search__form .emp-blog-search__clear {
  margin-bottom: 1px;
}

/* UB-0b / B2: Farbschema des Kopfmenues. Eingabetext, Lupe, X und Platzhalter folgen der
   Menuefarbe (currentColor des Menue-Slots, dort color: var(--menu-link-color, inherit))
   oder der im Inspector gewaehlten "Textfarbe" (--emp-search-color); gedaempft aus
   derselben Farbe. Nicht mit Hintergrundflaeche (--bg: beliebige Flaeche, Menuefarbe waere
   dort nicht lesbar) und nicht im Drawer (eigene Flaeche): dort bleibt die Vorgabe, es sei
   denn, die Textfarbe ist ausdruecklich gesetzt (--textcolor). */
:is(.emp-menu-search:not(.emp-blog-search--bg):not(.emp-blog-search--in-drawer), .emp-menu-search.emp-blog-search--textcolor) {
  --emp-search-fg: var(--emp-search-color, currentColor);
}

@supports (color: color-mix(in srgb, red 60%, transparent)) {
  :is(.emp-menu-search:not(.emp-blog-search--bg):not(.emp-blog-search--in-drawer), .emp-menu-search.emp-blog-search--textcolor) {
    --emp-search-fg-muted: color-mix(in srgb, var(--emp-search-fg) 60%, transparent);
  }
}

/* Eingeklappte Lupe bei ausdruecklicher Textfarbe (Hover bleibt Sache der Hover-Kette). */
.emp-menu-search.emp-blog-search--textcolor .emp-blog-search__toggle:not(:hover) {
  color: var(--emp-search-color);
}

/* Suchfeld-Stil aus dem Inspector (Menue-Einstellungen): --emp-search-bg /
   --emp-search-line kommen als style am Container. Gesetzte Hintergrundfarbe =
   gefuellte Variante: Flaeche (Lupe + Feld + X) mit 8 px Radius und
   Innenabstand, dann KEINE Unterstrichlinie (der Platz bleibt als transparente
   1-px-Kante, kein Hoehensprung); Fokus zeigt ein 2-px-Ring um die Flaeche.
   Ist zusaetzlich eine Linienfarbe gesetzt (Klasse --line), steht die Linie
   zusaetzlich da, Fokuslinie 2 px in dieser Farbe. */
.emp-blog-search.emp-blog-search--bg .emp-blog-search__form {
  background: var(--emp-search-bg);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
}

.emp-blog-search.emp-blog-search--bg:not(.emp-blog-search--line) .emp-blog-search__form .emp-blog-search__input,
.emp-blog-search.emp-blog-search--bg:not(.emp-blog-search--line) .emp-blog-search__form .emp-blog-search__input:focus,
.emp-blog-search.emp-blog-search--bg:not(.emp-blog-search--line) .emp-blog-search__form .emp-blog-search__input:focus-visible {
  border-bottom: 1px solid transparent !important;
}

.emp-blog-search.emp-blog-search--bg:not(.emp-blog-search--line) .emp-blog-search__form:focus-within {
  box-shadow: 0 0 0 2px var(--cta-color, var(--primary-base, #8e683e));
}

.emp-blog-search__input::-webkit-search-decoration,
.emp-blog-search__input::-webkit-search-cancel-button,
.emp-blog-search__input::-webkit-search-results-button,
.emp-blog-search__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

.emp-blog-search__input::placeholder {
  color: var(--emp-search-fg-muted);
  opacity: 1;
}

.emp-blog-search__clear {
  background: transparent;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  color: var(--emp-search-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.emp-blog-search__clear:hover {
  color: var(--emp-search-icon-hover, var(--emp-search-icon-hover-dunkel, var(--primary-dark, var(--cta-color, var(--primary-base, #8e683e)))));
}

.emp-blog-search--opened:not(.emp-blog-search--takeable) .emp-blog-search__clear {
  display: none !important;
}

/* ─── Instant-Flyout (schwebende Treffer) ──────────────────────────── */

.emp-blog-search__flyout {
  position: absolute;
  top: calc(100% + 8px);
  /* linksbuendig zum Feld; ragt das Flyout ueber den Viewportrand, schiebt das
     Skript es ueber --emp-flyout-shift (nur eine Zahl, Pixel) zurueck */
  left: 0;
  right: auto;
  transform: translateX(calc(var(--emp-flyout-shift, 0) * 1px));
  box-sizing: border-box;
  width: min(420px, calc(100vw - 2rem));
  background: var(--emp-search-surface);
  border: 1px solid var(--emp-search-border);
  border-radius: var(--emp-search-radius);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
  z-index: 100;
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
}

/* ─── Mobiler Kopf-Menue-Drawer (em-nav-drawer) ─────────────────────────
   Das Skript des Kopf-Menues (renderer/headnav.go) setzt das ORIGINAL-Widget beim
   Oeffnen des Drawers zwischen Drawer-Kopf und Link-Liste und beim Schliessen an
   seinen Platz im Slot zurueck; es traegt dort die Klasse --in-drawer. Die zwei
   Einklapp-Regeln oben schliessen diese Klasse per :not() aus, deshalb kommt der
   Block ganz ohne Wichtig-Flag aus: er gewinnt ueber Spezifitaet (0,3,0 und mehr).
   - Minimal: das Feld steht aufgeklappt (die Lupe-Taste entfaellt).
   - Breite = Drawer-Breite mit dem Seitenabstand der Link-Zeilen (0.75rem).
   - Touch: Eingabefeld >= 44 px hoch, Schrift >= 16 px (kein iOS-Zoom).
   - Treffer: stehen im Fluss unter dem Feld (nicht schwebend), das Widget
     scrollt selbst, statt vom Drawer (overflow: hidden) abgeschnitten zu werden. */
.em-nav-drawer > .emp-blog-search.emp-blog-search--in-drawer {
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-height: 0;
  max-height: 70dvh;
  margin: 0.75rem 0.75rem 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.em-nav-drawer .emp-blog-search--in-drawer .emp-blog-search__toggle {
  display: none;
}

.em-nav-drawer .emp-blog-search--in-drawer .emp-blog-search__form {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding-inline: 1rem;
  animation: none;
}

.em-nav-drawer .emp-blog-search.emp-blog-search--in-drawer .emp-blog-search__form .emp-blog-search__input {
  min-height: 44px;
  font-size: max(16px, 1rem);
}

.em-nav-drawer .emp-blog-search--in-drawer .emp-blog-search__flyout {
  position: static;
  transform: none;
  width: 100%;
  max-width: 100%;
  max-height: none;
  margin-top: 0.5rem;
  overflow: visible;
  box-shadow: none;
}

/* ─── Outlook Scope Pills & Gruppen-Header ─────────────────────────── */

.emp-search-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  background: var(--emp-search-surface-subtle);
  border-bottom: 1px solid var(--emp-search-divider);
}

/* Auto-Wechsel auf "Alle Kategorien": kleine Hinweiszeile unter den Pills (wie bei Google). */
.emp-search-autohint {
  margin: 0;
  padding: 0.35rem 0.65rem 0;
  font-size: var(--emp-search-count-size);
  line-height: 1.35;
  color: var(--emp-search-muted);
}

.emp-search-pill {
  border: 1px solid transparent;
  background: transparent;
  color: var(--emp-search-muted);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
  font-family: inherit;
}

.emp-search-pill:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--emp-search-text);
}

.emp-search-pill.is-active {
  background: var(--emp-search-surface);
  color: var(--emp-search-accent);
  border-color: var(--emp-search-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

.emp-search-pill-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--emp-search-surface-subtle);
  color: var(--emp-search-muted);
  margin-left: 0.5rem;
  font-weight: 500;
  vertical-align: middle;
}

.emp-search-group-title {
  padding: 0.45rem 0.85rem;
  font-size: var(--emp-search-group-size);
  font-weight: var(--emp-search-group-weight);
  text-transform: uppercase;
  letter-spacing: var(--emp-search-group-tracking);
  color: var(--emp-search-muted);
  background: var(--emp-search-surface-subtle);
  border-bottom: 1px solid var(--emp-search-divider);
}

.emp-search-empty {
  padding: 1.25rem;
  font-size: 0.9rem;
  color: var(--emp-search-muted);
  text-align: center;
}

.emp-search-hit {
  position: relative;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Trennlinie beginnt an der Textkante (Innenabstand + Bildspalte + Abstand), nicht am Rand */
.emp-search-hit:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: calc(var(--emp-search-hit-pad-x) + var(--emp-search-thumb) + var(--emp-search-hit-gap));
  inset-inline-end: 0;
  border-bottom: 1px solid var(--emp-search-divider);
}

/* Hover und Pfeiltaste (.is-active) sehen gleich aus: Akzent-Toenung plus Streifen am
 * Zeilenanfang (inset box-shadow: ragt nicht ueber die Zeile, das Flyout schneidet mit
 * overflow:hidden/Rundung sauber ab; kein Layoutsprung wie bei einem Rand). box-shadow kennt
 * keine logischen Richtungen, daher die Spiegelung fuer RTL darunter. Der Tastaturfokus
 * (:focus-visible am Link) behaelt seinen eigenen Ring. */
.emp-search-hit.is-active,
.emp-search-hit:hover {
  background-color: var(--emp-search-surface-active);
  box-shadow: inset 3px 0 0 var(--emp-search-accent);
}
.emp-search-hit.is-active:dir(rtl),
.emp-search-hit:hover:dir(rtl) {
  box-shadow: inset -3px 0 0 var(--emp-search-accent);
}

/* Beim Hover aendert sich NUR der Hintergrund der Zeile (2026-10-29). Der Treffer-Link
 * sitzt in einem Menue-Slot; die globalen Menue-Hover-Modi (em-base.css:
 * data-menu-hover="color"/"bg"/"underline") faerben ihn sonst um (Titel und
 * Beschreibung erben die Linkfarbe, Gruen auf hellem Grund = zu wenig Kontrast) und
 * unterstreichen/hinterlegen ihn. Diese Regeln tragen selbst !important, deshalb ist
 * hier !important die einzige Moeglichkeit; die Spezifitaet (4 Klassen + :hover = 0,5,0)
 * liegt ueber der der globalen Regeln (.mypage [slot*=menu][data-menu-hover] a:hover
 * = 0,4,1). Steht ausserhalb des Uebernahme-Blocks (der ohne !important bleibt). */
.emp-blog-search .emp-blog-search__flyout .emp-search-hit .emp-search-hit__link:hover {
  color: var(--menu-link-color, inherit) !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

.emp-search-hit__link {
  display: flex;
  gap: var(--emp-search-hit-gap);
  padding: var(--emp-search-hit-pad-y) var(--emp-search-hit-pad-x);
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.emp-blog-search__flyout .emp-search-hit__thumb,
.mypage .emp-search-hit__thumb,
.emp-search-hit__thumb {
  width: var(--emp-search-thumb) !important;
  max-width: var(--emp-search-thumb) !important;
  height: var(--emp-search-thumb) !important;
  max-height: var(--emp-search-thumb) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--emp-search-radius-sm);
  flex-shrink: 0;
  background-color: var(--emp-search-thumb-bg);
}

.emp-search-hit__thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--emp-search-muted);
}

.emp-search-hit__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.emp-search-hit__cat {
  font-size: var(--emp-search-kicker-size);
  font-weight: var(--emp-search-kicker-weight);
  text-transform: uppercase;
  letter-spacing: var(--emp-search-kicker-tracking);
  color: var(--emp-search-muted);
}

/* Seitenname ueber der Ueberschrift eines Seitentreffers mit SEO-Titel (Skript: buildPageHit).
   Gleiche Schrift wie die Kategorie, entfaellt aber nie (kein markUniformCategory: der Name
   gehoert zu genau dieser Seite). */
.emp-search-hit__kicker {
  font-size: var(--emp-search-kicker-size);
  font-weight: var(--emp-search-kicker-weight);
  text-transform: uppercase;
  letter-spacing: var(--emp-search-kicker-tracking);
  color: var(--emp-search-muted);
  overflow-wrap: anywhere;
}

/* entfaellt, wenn alle Treffer dieselbe Kategorie haben (Skript: markUniformCategory) */
.emp-search-hit__cat--same {
  display: none;
}

.emp-search-hit__title {
  font-size: var(--emp-search-title-size);
  font-weight: var(--emp-search-title-weight);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--emp-search-title-lines);
  line-clamp: var(--emp-search-title-lines);
  overflow: hidden;
  color: var(--emp-search-text);
}

.emp-search-hit__date {
  font-size: 0.75rem;
  color: var(--emp-search-muted);
}

/* Katalog-Flyout sitzt IM Seiten-Wrapper .mypage: dessen Kern-CSS setzt
   `.mypage h4` (0,1,1: Ueberschrift-Token ~23px, margin-bottom) und `.mypage p`
   (0,1,1: Fliesstext 16px, line-height 1.65, margin-bottom) und schlaegt damit
   die Einzelklassen oben (0,1,0). Gewonnen wird ueber hoehere Spezifitaet
   (0,2,0), nicht ueber !important. */
.emp-blog-search__flyout .emp-search-hit__title {
  font-size: var(--emp-search-title-size);
  line-height: var(--emp-search-title-lh);
  font-weight: var(--emp-search-title-weight);
  font-family: var(--h4-font-family, var(--headline-font, inherit));
  /* .mypage h4 setzt Farbe/Versalien/Sperrung mit: im Flyout (weisser Grund)
     nicht erben, sonst heller Text aus sc-*-Sektionen (currentColor). */
  color: var(--emp-search-text);
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

.emp-blog-search__flyout .emp-search-hit__desc {
  font-size: var(--emp-search-desc-size);
  line-height: var(--emp-search-desc-lh);
  font-weight: var(--emp-search-desc-weight);
  font-family: var(--bodytext-font-family, var(--copytext-font, inherit));
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
  /* --copytext-muted ist in EmPatterns nicht definiert: Fallback #666 (Kontrast
     auf Weiss ca. 5,7:1) ist de facto der Wert. */
  color: var(--emp-search-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.emp-blog-search__flyout .emp-search-hit__title mark {
  background: none;
  color: inherit;
  font-weight: 700;
  padding: 0;
}

/* Hervorhebung des Suchworts im Ausschnitt (kein Gelb: Farbe folgt dem Text) */
.emp-blog-search__flyout .emp-search-hit__desc mark {
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: var(--copytext-color, inherit);
  font-weight: 600;
  border-radius: 2px;
  padding: 0 1px;
}

/* Das line-clamp oben ist nur der Rueckfall OHNE Attribut: das Skript setzt
   data-search-snippet-max immer und kuerzt selbst (0 = nicht kuerzen). */
[data-search-snippet-max] .emp-blog-search__flyout .emp-search-hit__desc {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

@media (max-width: 480px) {
  :where(.emp-blog-search) {
    --emp-search-hit-gap: 0.6rem;
    --emp-search-hit-pad-x: 0.6rem;
    /* Handy: schmalere Bildspalte, aber sie bleibt reserviert (Text und Linie beginnen
       in jeder Zeile an derselben Kante) */
    --emp-search-thumb: 44px;
  }
}

.emp-search-footer {
  padding: 0.75rem;
  text-align: center;
  background: var(--emp-search-surface-subtle);
  border-top: 1px solid var(--emp-search-border);
}

.emp-search-footer__btn {
  background: none;
  border: none;
  color: var(--emp-search-accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* Fusszeile "Alle Treffer anzeigen" (Suchergebnisseite, Spec 2026-10-27 §8 S2):
   eine Option der Listbox, Auswahl/Hover wie ein Treffer, Ziel mindestens 44 px.
   Textfarbe = Trefferfarbe (Kontrast wie der Titel), Unterstrich als Link-Signal. */
.emp-blog-search__flyout .emp-search-all {
  border-top: 1px solid var(--emp-search-divider);
}
.emp-blog-search__flyout .emp-search-all__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--emp-search-hit-pad-x);
  font-size: var(--emp-search-count-size);
  font-weight: 600;
  color: var(--emp-search-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.emp-blog-search__flyout .emp-search-all.is-active,
.emp-blog-search__flyout .emp-search-all:hover {
  background-color: var(--emp-search-surface-active);
  box-shadow: inset 3px 0 0 var(--emp-search-accent);
}
.emp-blog-search__flyout .emp-search-all.is-active:dir(rtl),
.emp-blog-search__flyout .emp-search-all:hover:dir(rtl) {
  box-shadow: inset -3px 0 0 var(--emp-search-accent);
}
.emp-blog-search__flyout .emp-search-all__link:focus-visible {
  outline: 2px solid var(--emp-search-accent);
  outline-offset: -2px;
}

/* ─── Seitensuche (/api/site/search.json): Pfad, Statuszeilen, Fusszeile ───────
   Spezifitaet (0,2,0) wie die Regeln der Trefferliste (der Seiten-Wrapper .mypage setzt
   Schrift und Abstaende auf p/h4 mit (0,1,1)); alle Masse aus den Such-Tokens. */
.emp-blog-search__flyout .emp-search-hit__path {
  font-size: var(--emp-search-desc-size);
  line-height: var(--emp-search-desc-lh);
  font-family: var(--bodytext-font-family, var(--copytext-font, inherit));
  color: var(--emp-search-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-blog-search__flyout .emp-search-status,
.emp-blog-search__flyout .emp-search-footnote {
  padding: 0.55rem var(--emp-search-hit-pad-x);
  font-size: var(--emp-search-desc-size);
  line-height: var(--emp-search-desc-lh);
  font-family: var(--bodytext-font-family, var(--copytext-font, inherit));
  color: var(--emp-search-muted);
}

.emp-blog-search__flyout .emp-search-footnote {
  background: var(--emp-search-surface-subtle);
  border-top: 1px solid var(--emp-search-divider);
}

/* ─── Uebernahme der Seitenleiste (Katalogsuche in menu-v) ─────────────
   Sitzt die Suche in einem VERTIKALEN Menue-Slot, ersetzt das Ergebnis den
   Baum: die Treffer stehen INLINE (kein schwebendes Fenster), der Baum ist
   nur ausgeblendet (Klasse am Host, nie entfernt: aufgeklappte Zweige und
   Scrollposition bleiben). Klassen setzt das Skript: --takeable (Suche in
   menu-v), --takeover (Uebernahme aktiv), --has-value (Text im Feld),
   --in-panel (Feld im Leisten-Panel), am Host emp-search-takeover. Kopf-Menues
   (menu-h) bekommen nichts davon und behalten das Flyout.
   Spezifitaet: der Host ist der Slot (oder das Leisten-Panel, dessen Ebenen
   mit (0,4,0) sichtbar geschaltet werden); die doppelte Klasse hebt auf
   (0,5,0), ohne Wichtig-Markierung. */
:is(.mypage, body) .emp-search-takeover.emp-search-takeover > :not(.emp-blog-search):not(.em-vnav-m) {
  display: none;
}

/* X: nur mit Text im Feld (im Modus opened legt das Skript es an). */
.emp-blog-search--takeable .emp-blog-search__clear--auto {
  display: none;
}

.emp-blog-search--takeable.emp-blog-search--has-value .emp-blog-search__clear--auto {
  display: flex;
}

.emp-blog-search.emp-blog-search--takeover {
  flex-direction: column;
  align-items: stretch;
  /* Luft unter der letzten Trefferzeile: eine Zeilenhoehe */
  padding-block-end: 1.5em;
  padding-block-end: 1lh;
}

/* X: Touch-Flaeche ohne das Feld zu vergroessern (negativer Rand im Flex: die
   Flaeche waechst, das Layout nicht). Handy 44 px, Desktop 32 px. */
.emp-blog-search--takeable .emp-blog-search__clear {
  min-width: 32px;
  min-height: 32px;
  margin: -6px;
}

@media (max-width: 480px) {
  .emp-blog-search--takeable .emp-blog-search__clear {
    min-width: 44px;
    min-height: 44px;
    margin: -12px;
  }
}

.emp-blog-search--takeover .emp-blog-search__flyout {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: auto;
}

/* Trefferzahl als Randnotiz (2026-10-29): gleiche Schrift wie der Hinweis darunter
 * (.emp-search-autohint), normal statt fett, mit kleinem Abstand zur Linie des
 * Suchfelds. Randnotiz ueber Groesse und Gewicht, NICHT ueber Deckkraft (Kontrast
 * auf Kundenfarben, Pin in searchTakeover.test.ts). Der linke Einzug (buendig mit dem Suchtext) setzt das Skript aus den
 * echten Positionen (alignInlineNotes), weil er von Icon, Abstand und Feld-Padding
 * abhaengt. */
.emp-search-inline-head {
  box-sizing: border-box;
  padding: 0.25rem 0.5rem var(--emp-search-count-gap);
  font-size: var(--emp-search-count-size);
  font-weight: var(--emp-search-count-weight);
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--emp-search-muted);
}

.emp-search-inline-head[hidden] {
  display: none;
}

.emp-search-inline-head.is-error {
  font-weight: 500;
}

/* Uebernahme: Treffer folgen den Menuefarben (kein weisser Flyout-Grund). Hell UND
   dunkel kommen aus dem Menue (--menu-link-color); hier nur die Token-Werte. Die
   Beschreibung hat die Farbe der Menueeintraege (Kontrast wie die Links, keine
   Deckkraft), die Rangfolge traegt die kleinere Schrift. */
.emp-blog-search.emp-blog-search--takeover {
  --emp-search-text: var(--menu-link-color, var(--copytext-color, inherit));
  --emp-search-muted: var(--menu-link-color, var(--copytext-color, inherit));
  --emp-search-divider: color-mix(in srgb, currentColor 14%, transparent);
  --emp-search-surface-hover: color-mix(in srgb, currentColor 8%, transparent);
  --emp-search-surface-subtle: transparent;
  --emp-search-thumb-bg: color-mix(in srgb, currentColor 8%, transparent);
  --emp-search-hit-pad-x: 0.5rem;
}

.emp-search-inline-tools:empty {
  display: none;
}

.emp-search-empty.emp-search-empty--inline {
  padding-inline: 0.5rem;
  padding-block: 0;
  text-align: start;
}

.emp-search-reset {
  min-height: 44px;
  padding: 0.5rem 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  /* wie die Menueeintraege (lesbar auf jedem Spaltengrund), nie das Akzentblau */
  color: var(--emp-search-text);
  cursor: pointer;
}

/* Handy mit Teilzweig-Leiste: das Feld steht oben IM Panel (Skript). Das Panel
   hat seine eigene Flaeche und Textfarbe (Leisten-CSS in EmPatterns). */
.em-vnav-m-panel > .emp-blog-search.emp-blog-search {
  --copytext-color: var(--vnav-m-panel-fg, var(--text-dark));
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 1rem 1rem;
  color: var(--vnav-m-panel-fg, var(--text-dark));
}

.em-vnav-m-panel > .emp-blog-search .emp-blog-search__form {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding-block: 0.5rem;
  background: var(--emp-search-bg, var(--vnav-m-panel-bg, var(--color-bg)));
}

@media (prefers-reduced-motion: reduce) {
  .emp-search-hit {
    transition: none;
  }
}