/* ============================================================
   HMG SOLUTION — search.css
   Styles NUR fuer die Live-Suche (assets/js/search.js).
   Tokens kommen aus base.css — hier wird nichts davon ueberschrieben.
   Kein backdrop-filter auf bewegten Teilen (Repaint-Last, siehe CLAUDE.md).
   ============================================================ */

/* ---------- Ausloeser: Kopfleiste ---------- */
.search-open{
  display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto;
  color:var(--fg-soft); border:1px solid transparent; border-radius:var(--radius);
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.search-open svg{ width:20px; height:20px; }
.search-open:hover, .search-open:focus-visible{
  color:#fff; border-color:var(--line-strong); background:var(--accent-tint);
}

/* Seiten ohne Kopfleiste UND ohne Schnellkontakt (404): frei stehender Knopf */
.search-open--float{
  position:fixed; top:calc(1rem + env(safe-area-inset-top)); right:1rem;
  z-index:var(--z-header); background:var(--ink-2);
  border-color:var(--line-strong); color:var(--fg-soft);
}

/* ---------- Ausloeser: Schnellkontakt (Opener, ohne Kopfleiste) ---------- */
.quickcontact .qc-search{ cursor:pointer; }

/* ---------- Ausloeser: mobiler Drawer ---------- */
.nav-search{ display:none; }
@media (max-width:920px){
  .nav .nav-search{
    display:flex; align-items:center; gap:.6em; width:100%; min-height:48px;
    margin:0 0 .4rem; padding:.7rem .9rem; text-align:left;
    border:1px solid var(--line); border-radius:var(--radius);
    background:rgba(255,255,255,.04); color:var(--fg-soft);
    font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em;
    transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  }
  .nav .nav-search svg{ width:18px; height:18px; flex:0 0 auto; color:var(--accent-2); }
  .nav .nav-search:hover, .nav .nav-search:focus-visible{
    color:#fff; border-color:var(--accent); background:var(--accent-tint);
  }
  /* Fly-in wie die uebrigen Drawer-Kinder (base.css setzt --d per nth-child) */
  .nav .nav-search{ opacity:0; transform:translateY(14px); }
  body.nav-open .nav .nav-search{
    opacity:1; transform:none;
    transition:opacity .28s var(--ease) var(--d,0s), transform .28s var(--ease) var(--d,0s),
               border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  }
}

/* ---------- Overlay ---------- */
html.ssearch-lock, html.ssearch-lock body{ overflow:hidden; }

.ssearch{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(56px, 10vh, 120px) var(--gutter) 2rem;
}
.ssearch__scrim{
  position:absolute; inset:0; background:rgba(6,6,9,.78);
  opacity:0; transition:opacity var(--t) var(--ease);
}
.ssearch.is-open .ssearch__scrim{ opacity:1; }

.ssearch__panel{
  position:relative; width:100%; max-width:720px;
  display:flex; flex-direction:column; max-height:min(72vh, 640px);
  background:var(--ink-2); border:1px solid var(--line-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  opacity:0; transform:translateY(-10px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
  overflow:hidden;
}
.ssearch.is-open .ssearch__panel{ opacity:1; transform:none; }

/* ---------- Eingabezeile ---------- */
.ssearch__field{
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem .7rem .55rem 1rem; border-bottom:1px solid var(--line);
  background:var(--ink-3);
}
.ssearch__ic{ display:grid; place-items:center; color:var(--accent-2); flex:0 0 auto; }
.ssearch__ic svg{ width:20px; height:20px; }
.ssearch__input{
  flex:1 1 auto; min-width:0; height:48px;
  background:none; border:0; outline:none; color:var(--fg);
  font-family:var(--font-body); font-size:1.02rem; line-height:1.4;
}
.ssearch__input::placeholder{ color:var(--fg-mute); }
.ssearch__close{
  display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto;
  color:var(--fg-mute); border-radius:var(--radius);
  transition:color var(--t-fast), background var(--t-fast);
}
.ssearch__close svg{ width:18px; height:18px; }
.ssearch__close:hover, .ssearch__close:focus-visible{ color:#fff; background:rgba(255,255,255,.07); }

/* ---------- Trefferliste ---------- */
.ssearch__list{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.ssearch__hit{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem .8rem;
  align-items:start; min-height:56px; padding:.75rem 1rem;
  border-bottom:1px solid var(--line); cursor:pointer;
  transition:background var(--t-fast);
}
.ssearch__hit:last-child{ border-bottom:0; }
.ssearch__hit.is-active,
.ssearch__hit:hover{ background:var(--accent-tint); }
.ssearch__hit.is-active{ box-shadow:inset 2px 0 0 var(--accent); }

.ssearch__badge{
  grid-row:1 / span 2; align-self:start; margin-top:.15rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  padding:.28em .5em; border:1px solid currentColor; border-radius:2px;
  white-space:nowrap;
}
.ssearch__badge[data-site="industry"]{ color:#3ba7e8; }   /* --industry #1581c9, aufgehellt fuer Kontrast */
.ssearch__badge[data-site="construct"]{ color:#ef6f69; }  /* --construct #e8413a, aufgehellt fuer Kontrast */
.ssearch__badge[data-site="solution"]{ color:#f4f5f7; }

.ssearch__txt{ min-width:0; display:block; }
.ssearch__name{
  display:block; font-family:var(--font-display); font-size:.98rem; font-weight:500;
  color:#fff; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ssearch__snip{
  display:block; margin-top:.15rem; font-size:.8rem; line-height:1.5; color:var(--fg-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ssearch__snip mark{
  background:none; color:var(--accent-2); font-weight:600;
}
.ssearch__hit .ssearch__path{
  grid-column:2; display:block; margin-top:.25rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.03em; color:var(--fg-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- Leerzustand + Hinweis ---------- */
.ssearch__empty{
  padding:1.6rem 1rem; text-align:center; color:var(--fg-mute); font-size:.88rem;
}
.ssearch__hint{
  padding:.6rem 1rem; border-top:1px solid var(--line); background:var(--ink);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em;
  color:var(--fg-mute); text-align:center;
}

/* ---------- Mobil: vollflaechig unter dem Kopf ---------- */
@media (max-width:640px){
  .ssearch{ padding:0; align-items:stretch; }
  .ssearch__panel{
    max-width:none; max-height:none; height:100%;
    border:0; border-radius:0; transform:none;
  }
  .ssearch.is-open .ssearch__panel{ transform:none; }
  .ssearch__field{ padding-top:calc(.55rem + env(safe-area-inset-top)); }
  .ssearch__list{ flex:1 1 auto; }
  .ssearch__hint{ padding-bottom:calc(.6rem + env(safe-area-inset-bottom)); }
  .ssearch__name{ white-space:normal; }
  .ssearch__snip{ white-space:normal; }
}

@media (prefers-reduced-motion:reduce){
  .ssearch__scrim, .ssearch__panel{ transition:none; }
  .ssearch__panel{ transform:none; }
  .search-open, .nav-search, .ssearch__hit, .ssearch__close{ transition:none; }
  .nav .nav-search, body.nav-open .nav .nav-search{ opacity:1; transform:none; transition:none; }
}

/* WCAG 1.4.3 (11.09.2026): die Pfadzeile im markierten Treffer lag mit --fg-mute bei 4,36:1
   (#808692 auf #152331, gemessen mit axe). --fg-soft hebt sie ueber 4,5:1. */
.ssearch__hit .ssearch__path{ color:var(--fg-soft); }