/* =====================================================================
   Fragen durchsuchen

   Die Bausteine sind bewusst Zwillinge der Glossaransicht: Feld und
   Trefferzahl sind dort bereits auf Kontrast und Zielgröße gemessen. Neu zu
   messen ist ausschließlich die Fundstellenmarkierung.
   ===================================================================== */

.suche__eingabe {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.suche__feldzeile {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
  max-inline-size: 34rem;
}

.suche__feld {
  padding: var(--abstand-xs) var(--abstand-s);
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  background-color: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: inherit;
  font-size: var(--schrift-basis);
  /* Zielgröße: das Feld ist auch eine Klickfläche (WCAG 2.5.8). */
  min-block-size: var(--klickflaeche-min);
}

/* --- Bereichswahl ---------------------------------------------------- */

.suche__bereiche {
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-m);
  padding: var(--abstand-s) var(--abstand-m) var(--abstand-m);
}

.suche__bereiche legend {
  padding-inline: var(--abstand-2xs);
  font-weight: var(--schriftstaerke-mittel);
}

.suche__bereichsliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: var(--abstand-2xs) var(--abstand-m);
}

.suche__bereich {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  /* Die ganze Zeile ist Klickfläche, nicht nur das runde Feld. */
  min-block-size: var(--klickflaeche-min);
}

.suche__bereichsfeld {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
  /* Wie überall sonst im Haus (`pruefung.css`, `lernen.css`): Ohne diese Zeile
     zeichnet Chromium den gewählten Knopf im Systemblau, während dieselbe
     Bedienung in der Prüfungswahl im Hausfarbton steht. Aufgefallen am
     Store-Bild „Fragen durchsuchen“, auf dem beide Farben nebeneinander zu
     sehen wären. */
  accent-color: var(--farbe-akzent);
}

.suche__bereichsbeschriftung {
  cursor: pointer;
}

/* --- Zählzeile ------------------------------------------------------- */

.suche__anzahl {
  font-weight: var(--schriftstaerke-mittel);
  /* Dicht unter dem Feld: Wer mit einer Bildschirmlupe arbeitet, soll die
     Meldung im selben Ausschnitt haben wie die Eingabe. */
  margin-block-start: var(--abstand-xs);
}

.suche__leer {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  max-inline-size: var(--textbreite-max);
}

.suche__nummernkopf {
  font-weight: var(--schriftstaerke-mittel);
}

.suche__sammelaktion,
.suche__mehr,
.suche__aktionen {
  margin-block-start: var(--abstand-s);
}

/* --- Trefferliste ---------------------------------------------------- */

.suche__treffer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.treffer {
  background-color: var(--farbe-flaeche);
  border: var(--rahmenbreite) solid var(--farbe-rahmen);
  border-radius: var(--radius-m);
  padding: var(--abstand-m);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.treffer__einordnung {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  margin: 0;
}

.treffer__frage {
  margin: 0;
  font-size: var(--schrift-h3);
  /* Der Sprung aus einer Liste setzt den Fokus hierher; ohne Abstand nach
     oben klebte der Fokusring am Rand des Bildlaufs (WCAG 2.4.11). */
  scroll-margin-block-start: var(--abstand-m);
}

.treffer__fundstelle {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

.treffer__optionenliste {
  margin: var(--abstand-xs) 0 0;
  padding-inline-start: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}

.treffer__label {
  font-weight: var(--schriftstaerke-mittel);
}

/*
  Die Fundstelle ist DOPPELT kodiert: Fläche und Unterstreichung für das Auge,
  dazu die Fundstellenzeile im Klartext für Braille und Sprachausgabe. Die
  Markierung allein wäre eine Aussage über Farbe (WCAG 1.4.1); sie wegzulassen
  hülfe Blinden und verteuerte es für Sehbehinderte, die sonst einen Fragetext
  von bis zu 317 Zeichen ganz absuchen müssten. Verdopplung statt Verzicht.
*/
.fundstelle {
  background-color: var(--farbe-akzent-leise);
  color: var(--farbe-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  border-radius: var(--radius-s);
  padding-inline: 0.1em;
}

@media (forced-colors: active) {
  /* Im Kontrastdesign des Systems zeichnet die Marke sich selbst; eigene
     Farben würden dort ignoriert und die Unterstreichung bliebe als Träger. */
  .fundstelle {
    background-color: Mark;
    color: MarkText;
  }
}
