/**
 * Suche (AP-44): Ergebnisseite. Feld und Icon-Link der Kopfzeile stehen in organisms/header.css.
 * Treffer in <mark>: gedämpfte Akzentfläche, Textfarbe bleibt (Kontrast wie Text auf Karte).
 */
@layer components {
  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .search-form__input {
    flex: 1 1 16rem;
    min-block-size: 3rem;
    font-size: var(--font-size-card-title);
  }

  .search-form .btn {
    min-block-size: 3rem;
  }

  .search-group {
    display: grid;
    gap: var(--space-3);
  }

  .search-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .search-hit {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width-thin) solid var(--theme-card-border);
    border-radius: var(--theme-card-radius);
    background-color: var(--theme-card-bg);
    overflow-wrap: anywhere;
  }

  .search-hit__title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
  }

  .search-hit__excerpt {
    margin: 0;
    color: var(--theme-meta-color);
  }

  .search-hit__meta {
    margin: 0;
  }

  .search-hit__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }

  .search-hit mark {
    padding-inline: 0.125em;
    border-radius: var(--radius-xs);
    background-color: var(--surface-accent);
    color: var(--theme-heading-color);
  }
}