/* ============================================================================
   agentbooks.de — Suche in der Bibliothek
   Präfix su-. Geteilte Seitenkomponente wie footer.css und topnav.css: die
   Bibliothek trägt den Suchblock, die Suchseiten (site/suche/<slug>.html)
   tragen die Rückkehrzeile. Geladen wird die Datei über `page_css` in
   catalog/render.py, also NACH css/catalog.css — bei gleicher Spezifität
   gewinnt sie damit.

   Die Werte sind 1:1 aus den Inline-Styles des Mockups übernommen
   (design/vorlagen/bibliothek-suche/Bibliothek.dc.html: Such-Rahmen
   ~Zeile 52–64, Dropdown ~66–108, Zeile „Häufig gesucht" ~111–116,
   Ergebnisleiste ~124–148, dazu SEG_OFF/SEG_ON/TERM_STYLE im Skript).
   Farben, Abstände und Schatten kommen ausschliesslich aus den DS-Tokens.

   Das Markup steht in templates/library.html.j2 (statischer Teil),
   templates/suche.html.j2 und site/js/library.js (Dropdown-Inhalt).
   ============================================================================ */

/* ---- Such-Rahmen ---- */
.su-block{position:relative;margin-top:24px}
.su-rahmen{display:flex;align-items:stretch;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-card);overflow:hidden;transition:box-shadow 150ms cubic-bezier(.2,0,.2,1)}
/* Der Fokus-Ring gehört dem Rahmen, nicht dem Eingabefeld — wie im Mockup
   (`0 0 0 2px var(--blue-400)` am Rahmen, `outline:none` am Feld).
   `:focus-within` statt einer Klasse aus dem Skript: der Ring gehört zum
   Fokus und nicht zum geöffneten Dropdown, er bleibt also stehen, wenn Esc
   die Vorschläge schliesst, und trägt auch ohne JavaScript. */
.su-rahmen:focus-within{box-shadow:0 0 0 2px var(--blue-400)}
.su-lupe{display:flex;align-items:center;padding:0 0 0 20px;color:var(--text-tertiary)}
.su-eingabe{flex:1;min-width:0;height:64px;padding:0 16px;border:0;outline:none;background:transparent;font-family:var(--font-sans);font-size:19px;color:var(--text-primary)}
/* Das DS legt auf jedes fokussierte Feld einen eigenen Ring
   (css/tokens/base.css, `input:focus-visible`). Innerhalb des Rahmens ergäbe
   das ein zweites Rechteck im ersten. Klasse schlägt Element — DS-CSS bleibt
   unangetastet. */
.su-eingabe:focus,.su-eingabe:focus-visible{outline:none;box-shadow:none;border-radius:0}
/* Das eigene Kreuz von `type=search` doppelt den Leeren-Knopf. */
.su-eingabe::-webkit-search-cancel-button{display:none}
.su-leeren{display:flex;align-items:center;justify-content:center;width:44px;border:0;background:transparent;color:var(--text-tertiary);cursor:pointer}
.su-trenner{width:1px;background:var(--border-default);margin:12px 0}
.su-kontext{display:flex;align-items:center;gap:4px;padding:0 10px;min-width:0}
.su-seg{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:5px;border:1px solid transparent;background:transparent;font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.su-seg--on{background:var(--surface-sunken);border-color:var(--border-default);color:var(--text-primary)}
.su-punkt{width:6px;height:6px;border-radius:1px;background:var(--a)}

/* ---- Vorschlags-Dropdown ----
   `top` hängt an der Höhe des Rahmens statt an den 72px des Mockups: unter
   900px wandern die Kontext-Segmente in eine zweite Zeile, und der Rahmen
   wird höher. */
.su-vorschlag{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;border:1px solid var(--border-default);border-radius:12px;background:var(--surface-card);box-shadow:var(--shadow-medium);overflow:hidden}
.su-gruppe{padding:12px 12px 8px}
.su-gruppe--titel{padding:8px 12px 12px;border-top:1px solid var(--border-default)}
.su-gruppe-label{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);padding:0 8px 8px}
.su-gruppe--titel .su-gruppe-label{padding:8px}
.su-begriffe{display:flex;flex-direction:column}
.su-begriff{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0 8px;border-radius:8px;border:0;background:transparent;font-family:var(--font-sans);cursor:pointer;text-align:left;text-decoration:none;color:inherit}
.su-begriff:hover,.su-begriff--aktiv{background:var(--surface-sunken)}
.su-begriff-symbol{display:flex;align-items:center;color:var(--text-tertiary)}
.su-begriff-text{flex:1;min-width:0;text-align:left;font-size:15px;color:var(--text-primary)}
.su-begriff-vor{color:var(--text-tertiary)}
.su-begriff-fund{font-weight:600}
.su-begriff-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary)}

/* ---- Die Titel im Dropdown ---- */
.su-titel{display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center;padding:10px 8px;border-radius:8px;text-decoration:none;color:inherit}
.su-titel:hover,.su-titel--aktiv{background:var(--surface-sunken)}
.su-titel-cover{display:block;width:36px;aspect-ratio:var(--cover-ratio,1024 / 1448);border-radius:2px;border:1px solid var(--border-default);box-sizing:border-box;background:var(--surface-sunken)}
.su-titel-cover--img{background:var(--surface-card) var(--cover) center/cover no-repeat}
.su-titel-text{display:block;min-width:0}
.su-titel-name{display:block;font-size:15px;font-weight:600;letter-spacing:-.008em;overflow-wrap:anywhere}
.su-titel-problem{display:block;font-size:13px;line-height:1.5;color:var(--text-secondary);margin-top:2px}
.su-titel-welt{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary)}

/* ---- Null Treffer ---- */
.su-nichts{padding:20px;border-top:1px solid var(--border-default);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.su-nichts-text{flex:1;min-width:240px}
.su-nichts-titel{font-size:16px;font-weight:600;letter-spacing:-.008em}
.su-nichts-satz{font-size:14px;line-height:1.55;color:var(--text-secondary);margin:4px 0 0}
.su-alle{min-height:40px;padding:0 14px;border-radius:5px;border:1px solid var(--border-default);background:var(--surface-card);font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--text-primary);cursor:pointer}

/* ---- Fusszeile des Dropdowns ---- */
.su-fuss{display:flex;align-items:center;gap:16px;padding:12px 20px;border-top:1px solid var(--border-default);background:var(--surface-sunken);flex-wrap:wrap}
.su-fuss-zahl,.su-fuss-hinweis{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary)}
.su-fuss-luecke{flex:1}

/* ---- „Häufig gesucht" ----
   Echte Links auf die Suchseiten — die einzige Verlinkung, die es zu ihnen
   gibt (catalog/suche.py). */
.su-quick{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:16px}
.su-quick-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
.su-quick-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:5px;border:1px solid var(--border-default);background:var(--surface-card);font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--text-secondary);text-decoration:none}
.su-quick-chip:hover{color:var(--text-primary);border-color:var(--border-strong)}
/* Die Suchseite, auf der man gerade steht — dieselbe Auszeichnung wie ein
   gesetzter Filter-Chip (`.cat-chip--on`). Der `:hover` muss mit, sonst
   faerbte das globale `a:hover` den weissen Text blau. */
.su-quick-chip--on,.su-quick-chip--on:hover{background:var(--interactive-primary);border-color:var(--interactive-primary);color:#fff}

/* ---- Ergebnisleiste ---- */
.su-ergebnis{font-size:22px;line-height:1.28;letter-spacing:-.012em;font-weight:600}
.su-mehr{display:inline-flex;align-items:center;gap:8px;color:var(--text-primary)}
.su-panel{margin-top:16px}

/* ---- Suchseite ----
   Die Überschrift der Bibliothek ist auf 20ch gesetzt; hier steht hinter dem
   Begriff noch die Trefferzahl, und der Gedankenstrich landete damit allein
   auf der zweiten Zeile. */
.su-seite-h1{max-width:34ch;text-wrap:balance}
.su-weiter{padding:32px 0 0}
.su-weiter-link{font-size:15px;font-weight:500;color:var(--text-accent);text-decoration:none}

/* ---- Schmale Fenster ----
   Unter 900px wandern die Kontext-Segmente in eine eigene Zeile unter das
   Eingabefeld und scrollen dort waagerecht; der Trenner ergibt dann keinen
   Sinn mehr. `min-width:0` am Rahmen und an der Zeile ist Pflicht: ohne sie
   schöben die nicht umbrechenden Segmente die Seite waagerecht auf. */
@media (max-width:900px){
  .su-rahmen{flex-wrap:wrap}
  .su-trenner{display:none}
  .su-kontext{order:3;flex-basis:100%;max-width:100%;overflow-x:auto;border-top:1px solid var(--border-default);padding:8px 10px;gap:6px}
  .su-eingabe{height:56px;font-size:17px}
}

@media (max-width:640px){
  /* Auf dem Telefon gibt es keine Pfeiltasten. */
  .su-fuss-hinweis{display:none}
  .su-titel{grid-template-columns:36px 1fr;gap:12px}
  .su-titel-welt{display:none}
}