/**
 * @file css/redesign/suche.css - Redesign Welle W5-7 (Suchmodal)
 *
 * Ersetzt das an der Lupe haengende Ausklapp-Panel aus W4-10 durch ein
 * zentriertes Modal. Kundenanmerkung d51d0f8b: "Klick auf die Lupe oeffnet
 * ein Modal in der Mitte der Seite mit einer modernen Suche."
 *
 * Regeln des Designsystems, die hier gelten:
 *   - Radius 0 (--feb-radius), ausnahmslos.
 *   - KEINE Verlaeufe. Der Backdrop ist eine flache schwarze Deckung,
 *     kein linear-gradient.
 *   - Der Akzent #006ABC bleibt der Primaeraktion vorbehalten. Genau eine
 *     Flaeche im Modal traegt ihn: der Knopf "Suchen". Alles andere -
 *     Chips, Trefferzeilen, Links, Fokusring - bleibt monochrom.
 *   - Fokusring monochrom aus --feb-focus, 2 px, 2 px Offset.
 *   - Der einzige zulaessige Schatten ist --feb-shadow-overlay; ein Modal
 *     ist laut Spezifikation 11 genau einer der drei Faelle dafuer.
 *
 * Die Flaeche ist WEISS, nicht ink. Das alte Panel hing optisch an der
 * schwarzen Kopfzone und war deshalb dunkel; dieses Modal steht frei ueber
 * der Seite und traegt Fliesstext (Titel, Auszug, Rubrik). Auf Weiss
 * stehen dafuer 19,48:1 (ink), 7,92:1 (grey-600) und 5,31:1 (grey-500) zur
 * Verfuegung - auf --feb-ink waeren es fuer den Auszug nur 6,04:1 mit
 * grey-400 und die Rubrik muesste auf grey-300 ausweichen. Weiss gibt der
 * Trefferliste die groessere Reserve.
 *
 * Ladereihenfolge: nach header-footer.css, siehe libraries.yml.
 */

/* ============================================================
   1. Wurzel und Backdrop
   ============================================================ */

/* Solange das Modal geschlossen ist, traegt das Element [hidden]. Das
   reicht als Ausblendung; es gibt bewusst KEINE Variante, in der das
   Modal per Sichtbarkeit im Baum bleibt und trotzdem fokussierbar ist. */
.feb-search[hidden] {
  display: none;
}

.feb-search {
  position: fixed;
  inset: 0;
  z-index: var(--feb-z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--feb-space-5) var(--feb-gutter);
}

/* Flache Deckung statt Verlauf. 0,72 liegt ueber dem Mindestwert
   --feb-scrim-min (0,60) und haelt die Seite darunter erkennbar, aber
   eindeutig zurueckgesetzt. */
.feb-search__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.72);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* ============================================================
   2. Dialogflaeche
   ============================================================ */

.feb-search__dialog {
  position: relative;
  width: 100%;
  max-width: 44rem;          /* 704 px - ruhige Zeilenlaenge fuer Treffer */
  max-height: calc(100vh - 2 * var(--feb-space-5));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--feb-white);
  color: var(--feb-ink);
  border: var(--feb-hairline-width) solid var(--feb-border-strong);
  border-radius: var(--feb-radius);
  box-shadow: var(--feb-shadow-overlay);
  padding: var(--feb-space-5);
}

/* Ab 768 px steht das Modal wirklich in der Mitte. Darunter sitzt es oben:
   auf dem Telefon schiebt die Bildschirmtastatur den sichtbaren Bereich
   zusammen, ein vertikal zentriertes Feld wandert dabei unter die
   Tastatur. */
@media (min-width: 768px) {
  .feb-search {
    align-items: center;
    padding: var(--feb-space-6) var(--feb-gutter);
  }

  .feb-search__dialog {
    max-height: calc(100vh - 2 * var(--feb-space-6));
    padding: var(--feb-space-6);
  }
}

/* ============================================================
   3. Kopf des Modals
   ============================================================ */

.feb-search__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--feb-space-4);
  margin-bottom: var(--feb-space-4);
}

.feb-search__title {
  margin: 0;
  font-size: var(--feb-fs-h4);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-h4);
  line-height: var(--feb-lh-heading);
  color: var(--feb-ink);
}

.feb-search__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: calc(-1 * var(--feb-space-2)) calc(-1 * var(--feb-space-2)) 0 0;
  padding: 0;
  background-color: transparent;
  border: var(--feb-hairline-width) solid transparent;
  border-radius: var(--feb-radius);
  color: var(--feb-grey-600);
  cursor: pointer;
}

.feb-search__close:hover {
  color: var(--feb-ink);
  border-color: var(--feb-border-strong);
}

/* ============================================================
   4. Eingabezeile
   ============================================================ */

.feb-search__form {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Die Lupe sitzt IM Feld, links. Sie ist rein dekorativ (aria-hidden),
   die zugaengliche Beschriftung traegt das <label>. */
.feb-search__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.feb-search__field-icon {
  position: absolute;
  left: var(--feb-space-3);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--feb-grey-500);
  pointer-events: none;
}

/* Spezifitaet mit Ansage.
   structure.css (W4-9, Abschnitt 2.x) formatiert alle Textfelder ueber
       body :is(input[type="text"], …, input[type="search"], …)
             :not(.brm-header__search-input)
   Das :is() zaehlt mit seinem staerksten Argument (.form-control), also
   (0,1,0), dazu body (0,0,1) und das :not(.brm-header__search-input)
   (0,1,0) - macht (0,2,1). Eine einfache Klasse (0,1,0) verliert dagegen,
   obwohl suche.css spaeter laedt: die Ladereihenfolge entscheidet erst
   bei GLEICHER Spezifitaet. Gemessen hatte das Feld deshalb
   padding-left: 16px statt 44px und die Lupe stand im Platzhaltertext.
   Zwei zusaetzliche Klassen im Selektor heben die Regeln auf (0,3,0) und
   damit ueber die Bestandsregel - ohne !important. Aus demselben Grund
   traegt auch der Suchknopf drei Klassen. */
.feb-search .feb-search__field .feb-search__input {
  width: 100%;
  height: var(--feb-control-h);
  padding: 0 var(--feb-space-3) 0 2.75rem;
  font-family: var(--feb-font-sans);
  font-size: var(--feb-fs-body);
  line-height: var(--feb-lh-tight);
  color: var(--feb-ink);
  background-color: var(--feb-white);
  border: var(--feb-hairline-width) solid var(--feb-border-strong);
  border-right: 0;
  border-radius: var(--feb-radius);
  -webkit-appearance: none;
  appearance: none;
}

.feb-search .feb-search__field .feb-search__input::-moz-placeholder { color: var(--feb-grey-500); opacity: 1; }
.feb-search .feb-search__field .feb-search__input::placeholder      { color: var(--feb-grey-500); opacity: 1; }

/* Das native Kreuz von Safari/Chrome doppelt den X-Knopf im Kopf und
   springt beim Tippen ins Bild. Es faellt weg. */
.feb-search .feb-search__field .feb-search__input::-webkit-search-cancel-button,
.feb-search .feb-search__field .feb-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Suchknopf: der Akzent #006ABC.
   Anders als der alte Knopf im Kopfzeilen-Panel (header-footer.css, dort
   Weiss auf Ink) ist dieser hier die Primaeraktion SEINER Flaeche - das
   Modal hat genau einen Zweck. Der Akzent traegt laut Token-Satz
   Abschnitt 2 ausschliesslich die Primaeraktion, und das ist der Fall.
   Zweiter Grund: die Ergebnisseite /search benutzt fuer denselben
   Vorgang schon .btn-primary, also denselben Akzent. Ein schwarzer Knopf
   im Modal und ein blauer eine Bildschirmseite spaeter waeren derselbe
   Vorgang in zwei Farben.
   Weiss auf #006ABC misst 5,54:1 (AA), Hover 5,98:1, Active 6,35:1. */
.feb-search .feb-search__form .feb-search__submit {
  flex: 0 0 auto;
  height: var(--feb-control-h);
  padding: 0 var(--feb-btn-px-sm);
  background-color: var(--feb-accent);
  border: var(--feb-hairline-width) solid var(--feb-accent);
  border-radius: var(--feb-radius);
  color: var(--feb-on-accent);
  font-family: var(--feb-font-sans);
  font-size: var(--feb-fs-btn);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-btn);
  white-space: nowrap;
  cursor: pointer;
}

.feb-search .feb-search__form .feb-search__submit:hover {
  background-color: var(--feb-accent-hover);
  border-color: var(--feb-accent-hover);
}

.feb-search .feb-search__form .feb-search__submit:active {
  background-color: var(--feb-accent-active);
  border-color: var(--feb-accent-active);
}

.feb-search__hint {
  margin: var(--feb-space-2) 0 0;
  font-size: var(--feb-fs-xs);
  line-height: var(--feb-lh-snug);
  color: var(--feb-grey-500);   /* 5,31:1 auf Weiss */
}

/* ============================================================
   5. Fokus - ein Ring fuer alles im Modal
   ============================================================ */

.feb-search .feb-search__field .feb-search__input:focus,
.feb-search .feb-search__field .feb-search__input:focus-visible,
.feb-search .feb-search__form .feb-search__submit:focus-visible,
.feb-search .feb-search__close:focus-visible,
.feb-search .feb-search__chip:focus-visible,
.feb-search .feb-search__all:focus-visible {
  outline: var(--feb-focus-width) solid var(--feb-focus);
  outline-offset: var(--feb-focus-offset);
}

/* Das Eingabefeld bekommt den Ring innen, sonst schneidet der Knopf
   daneben ihn an. */
.feb-search .feb-search__field .feb-search__input:focus,
.feb-search .feb-search__field .feb-search__input:focus-visible {
  outline-offset: -2px;
  border-color: var(--feb-ink);
}

/* ============================================================
   6. Leerzustand: kuratierte Einstiege
   ============================================================ */

.feb-search__body {
  margin-top: var(--feb-space-5);
}

.feb-search__eyebrow {
  margin: 0 0 var(--feb-space-3);
  font-size: var(--feb-fs-eyebrow);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--feb-grey-500);
}

.feb-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--feb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rechteckige Chips - "Radius 0, auch Badges" steht so im Token-Satz. */
.feb-search__chip {
  display: inline-block;
  padding: var(--feb-space-2) var(--feb-space-3);
  background-color: var(--feb-grey-50);
  border: var(--feb-hairline-width) solid var(--feb-border);
  border-radius: var(--feb-radius);
  color: var(--feb-ink);
  font-size: var(--feb-fs-sm);
  line-height: var(--feb-lh-tight);
  text-decoration: none;
}

.feb-search__chip:hover,
.feb-search__chip:focus {
  background-color: var(--feb-ink);
  border-color: var(--feb-ink);
  color: var(--feb-white);
  text-decoration: none;
}

/* ============================================================
   7. Trefferliste
   ============================================================ */

.feb-search__panel[hidden] {
  display: none;
}

.feb-search__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--feb-hairline-width) solid var(--feb-border);
}

.feb-search__option {
  display: block;
  padding: var(--feb-space-3) var(--feb-space-2);
  border-bottom: var(--feb-hairline-width) solid var(--feb-border);
  cursor: pointer;
}

/* Die aktive Zeile wird ueber aria-activedescendant gesetzt, nicht ueber
   :hover allein - Tastatur und Maus fuehren also denselben Zustand. Der
   Kontrast der Zeile gegen die Modalflaeche betraegt 1,46:1; sie ist
   deshalb ZUSAETZLICH mit einer 3 px breiten Ink-Kante links markiert,
   damit die Auswahl nicht allein an einer schwachen Flaeche haengt
   (WCAG 1.4.1 / 1.4.11). */
.feb-search__option.is-active,
.feb-search__option:hover {
  background-color: var(--feb-grey-50);
  box-shadow: inset 3px 0 0 0 var(--feb-ink);
}

.feb-search__option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--feb-space-3);
}

.feb-search__option-title {
  font-size: var(--feb-fs-body);
  font-weight: var(--feb-fw-medium);
  line-height: var(--feb-lh-snug);
  color: var(--feb-ink);
}

/* Die Fundstelle im Titel. mark bringt in Browsern eine gelbe Flaeche mit;
   die passt nicht in eine monochrome Sprache und traegt hier auch keine
   Bedeutung allein - sie wird auf Unterstreichung plus Fettung
   umgestellt. */
.feb-search__option-title mark,
.feb-search__option-excerpt mark {
  /* Bootstrap gibt <mark> padding: .1875em. Im Fliesstext reisst das den
     hervorgehobenen Teil sichtbar aus dem Wort heraus - aus
     "Mehrkomponenten-Spritzguss" wurde optisch
     "Mehrkomponenten- Spritzgu ss". Deshalb hier ausdruecklich 0. */
  padding: 0;
  background-color: transparent;
  color: inherit;
  font-weight: var(--feb-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.feb-search__option-type {
  flex: 0 0 auto;
  font-size: var(--feb-fs-xs);
  letter-spacing: var(--feb-ls-sm);
  color: var(--feb-grey-500);   /* 5,31:1 auf Weiss, 4,87:1 auf grey-50 */
  white-space: nowrap;
}

.feb-search__option-excerpt {
  margin: var(--feb-space-1) 0 0;
  font-size: var(--feb-fs-sm);
  line-height: var(--feb-lh-snug);
  color: var(--feb-grey-600);   /* 7,92:1 auf Weiss */
}

.feb-search__empty {
  margin: var(--feb-space-4) 0 0;
  font-size: var(--feb-fs-sm);
  line-height: var(--feb-lh-snug);
  color: var(--feb-grey-600);
}

.feb-search__empty[hidden] {
  display: none;
}

/* "Alle Ergebnisse" - Textlink mit Unterstreichung, wie alle Links der
   Sprache. */
.feb-search__all {
  display: inline-block;
  margin-top: var(--feb-space-4);
  font-size: var(--feb-fs-sm);
  font-weight: var(--feb-fw-semibold);
  color: var(--feb-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.feb-search__all[hidden] {
  display: none;
}

/* ============================================================
   8. Bewegung
   ============================================================ */

/* Nur wenn der Besucher nichts anderes verlangt hat. Bei
   prefers-reduced-motion: reduce erscheint das Modal ohne jede
   Ueberblendung - es gibt keine Animation, die dann noch laeuft. */
@media (prefers-reduced-motion: no-preference) {
  .feb-search__backdrop {
    animation: feb-search-fade var(--feb-dur-base) var(--feb-ease) both;
  }

  .feb-search__dialog {
    animation: feb-search-rise var(--feb-dur-base) var(--feb-ease) both;
  }

  .feb-search__close,
  .feb-search__chip,
  .feb-search__submit,
  .feb-search__option {
    transition: background-color var(--feb-dur-fast) var(--feb-ease),
                border-color var(--feb-dur-fast) var(--feb-ease),
                color var(--feb-dur-fast) var(--feb-ease);
  }
}

@keyframes feb-search-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes feb-search-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   9. Seitenhintergrund sperren, solange das Modal offen ist
   ============================================================ */

/* Die Bildlaufleiste bleibt reserviert (scrollbar-gutter), damit die
   Seite beim Oeffnen nicht um ihre Breite springt. */
html.feb-search-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ============================================================
   10. Ergebnisseite - Konsistenz mit dem Modal
   ============================================================

   Das Formular und die Trefferliste der Seite /search hat W4-9 bereits
   auf die Tokens gezogen (structure.css, Abschnitt 2.6, und das Kompilat
   css/style.css). Hier kommen nur die drei Punkte dazu, die W5-7
   aufgefallen sind. */

/* Die Seite hatte keine H1 - die Ueberschrift kommt neu aus
   templates/search/search-api-page.html.twig. */
body.path-search .feb-search-page__title {
  margin: 0 0 var(--feb-space-2);
  font-size: var(--feb-fs-h2);
  font-weight: var(--feb-fw-semibold);
  letter-spacing: var(--feb-ls-h2);
  line-height: var(--feb-lh-heading);
  color: var(--feb-ink);
  overflow-wrap: anywhere;   /* sehr lange Suchbegriffe brechen um */
}

body.path-search .feb-search-page__count {
  margin: 0 0 var(--feb-space-6);
  font-size: var(--feb-fs-sm);
  color: var(--feb-grey-600);
}

/* Das Kompilat gibt der Fundstelle im Auszug border-radius: 2px. Radius 0
   gilt systemweit ausnahmslos; die Flaeche selbst (ink bei 18 % Deckung)
   bleibt, sie traegt hier die Auszeichnung zusammen mit dem Fettdruck. */
body.path-search .node--view-mode-search-result .field--search-api-excerpt mark,
body.path-search .node--view-mode-search-result .field--search-api-excerpt .mark {
  border-radius: var(--feb-radius);
  font-weight: var(--feb-fw-semibold);
}

/* ============================================================
   11. Kopfzeile: der Suchknopf bleibt, das alte Panel ist fort
   ============================================================ */

/* .brm-header__search war in W4-10 der Anker fuer ein absolut
   positioniertes Panel. Das Panel gibt es nicht mehr; der Wrapper traegt
   jetzt nur noch den Knopf und braucht keinen eigenen Positionskontext.
   Die Regeln aus header-footer.css bleiben unangetastet - sie greifen
   ohne Panel schlicht ins Leere. */
.brm-header__search {
  position: static;
}