/* ═══════════════════════════════════════════════════════════════════════════════════════
   Globale Suche · Variante A „Suchfenster mittig“ (13.10.2026, Peters Wunsch)

   Aussehen nach der abgenommenen Vorschau A: Fenster mittig unter der Kopfleiste, groß und
   gut lesbar, Treffer gruppiert, Suchwort gelb markiert, Fußzeile mit den Tasten.
   Farben nur aus der Haus-Palette von index.html (--sbCard, --sbInk, --sbSoft, --sbFaint,
   --sbLine, --sbBar, --sbB50, --sbBrand, --pill…), damit Hell und Dunkel von selbst stimmen.

   Peters Regeln, hier eingehalten:
   - keine farbigen Ränder: Auswahl und Zustand über getönte Flächen, nie über Randfarbe
   - nie kursiv (auch nicht in <mark> oder Hinweisen)
   - Suchfeld mindestens 16 px (iOS zoomt sonst die ganze Seite)
   - Bewegung trägt keine Bedeutung: ohne Einblenden ist alles vollständig da
   ⚠️ Keine Klassen .modal/.dlg/.ctl/.open/.chip: die bringen in index.html blaue Puls- und
      Randanimationen bzw. display:flex mit.
   Ebene 9500: über Fenstern (200–220), Dateien (1200) und Weltkarte (9000/9001), unter
   Abgleich (10001), Linda (99989 ff.) und den Rückfragen (100000).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

#thsu-schleier{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:flex-start; justify-content:center;
  /* Fenster beginnt unter der Kopfleiste: dort läuft der Kobold mit der Lupe */
  padding:calc(var(--hdrH, 64px) + 28px) 16px 24px;
  background:rgba(17,24,39,.34);
  color:var(--sbInk, #111827);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:15px; line-height:1.45; font-weight:400; font-style:normal;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
html[data-theme=dark] #thsu-schleier{background:rgba(2,8,18,.62)}
/* ⚠️ Eigenes display:flex oben schlägt das hidden-Attribut — deshalb hier ausdrücklich */
#thsu-schleier[hidden]{display:none !important}
#thsu-schleier *, #thsu-schleier *::before, #thsu-schleier *::after{box-sizing:border-box; font-style:normal}

/* Solange die Suche offen ist, liegt die Kopfleiste über dem Schleier: der Kobold bleibt
   sichtbar und hält die Lupe. Die Kopfleiste ist ein Flex-Kind, z-index wirkt ohne position.
   Nur ab 981 px: darunter gibt es keinen Kobold, und das Fenster beginnt ganz oben. */
@media (min-width:981px){
  html.thsu-offen #appShell header{z-index:9501}
}

.thsu-fenster{
  width:min(760px, 100%);
  max-height:min(680px, calc(100dvh - var(--hdrH, 64px) - 52px));
  display:flex; flex-direction:column; overflow:hidden;
  /* der weiche Schimmer oben links (Peters „Farbverlauf“), sonst ruhige Fläche */
  background:radial-gradient(900px 420px at 10% 0%, rgba(42,135,200,.06), transparent 60%), var(--sbCard, #fff);
  border-radius:18px;
  box-shadow:0 28px 70px rgba(16,24,40,.28), 0 2px 8px rgba(16,24,40,.08);
}
html[data-theme=dark] .thsu-fenster{
  background:radial-gradient(900px 420px at 10% 0%, rgba(99,184,234,.08), transparent 60%), var(--sbCard, #0f2338);
  box-shadow:0 28px 80px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
}

.thsu-unsichtbar{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ── Suchfeld ─────────────────────────────────────────────────────────────────────────── */
.thsu-feld{
  flex:none; display:flex; align-items:center; gap:12px;
  min-height:66px; padding:0 12px 0 22px;
  box-shadow:0 1px 0 var(--sbLine, #e5e7eb);
}
.thsu-ic{display:block; width:20px; height:20px; flex:none}
.thsu-lupe{width:22px; height:22px; color:var(--sbFaint, #6b7280)}
#thsu-schleier .thsu-eingabe{
  flex:1 1 auto; min-width:0; height:64px; margin:0; padding:0;
  border:0; border-radius:0; outline:0; box-shadow:none; background:transparent;
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:19px; font-weight:500; line-height:1.2; letter-spacing:0;
  color:var(--sbInk, #111827); caret-color:var(--sbBrand, #1b4b7a);
}
#thsu-schleier .thsu-eingabe::placeholder{color:var(--sbFaint, #6b7280); opacity:1; font-weight:400}
#thsu-schleier .thsu-eingabe:focus{outline:0; box-shadow:none}
.thsu-zu{
  flex:none; width:40px; height:40px; margin:0; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:11px; background:transparent; color:var(--sbSoft, #4b5563);
  cursor:pointer; font:inherit;
}
.thsu-zu:hover, .thsu-zu:focus-visible{background:var(--sbBar, #f3f4f6); color:var(--sbInk, #111827); outline:0}

/* ── Trefferliste ─────────────────────────────────────────────────────────────────────── */
.thsu-liste{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:4px 10px 10px;
  scrollbar-width:thin; scrollbar-color:var(--sbScroll, #d3d8de) transparent;
}
.thsu-liste::-webkit-scrollbar{width:10px}
.thsu-liste::-webkit-scrollbar-thumb{background:var(--sbScroll, #d3d8de); border-radius:10px; border:3px solid transparent; background-clip:padding-box}
.thsu-gkopf{
  padding:16px 12px 6px; margin:0;
  font-size:11.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sbFaint, #6b7280);
}
.thsu-zeile{
  display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:14px; align-items:center;
  min-height:58px; padding:9px 12px; border-radius:12px; cursor:pointer;
}
.thsu-zeile[aria-selected="true"]{background:var(--sbB50, #eef5fb)}
.thsu-sym{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--sbBar, #f3f4f6); color:var(--sbBrand, #1b4b7a);
}
.thsu-zeile[aria-selected="true"] .thsu-sym{background:var(--sbCard, #fff)}
.thsu-text{display:block; min-width:0}
.thsu-titel{
  display:block; font-size:15.5px; font-weight:600; line-height:1.35; color:var(--sbInk, #111827);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.thsu-unter, .thsu-fund{
  display:block; margin-top:2px; font-size:13.5px; line-height:1.4; color:var(--sbSoft, #4b5563);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.thsu-fund{font-size:12.5px; color:var(--sbFaint, #6b7280); font-variant-numeric:tabular-nums}
.thsu-fundlupe{display:inline-block; width:13px; height:13px; margin-right:5px; vertical-align:-2px}
/* Zustand als getönte Pille, ohne Rand und ohne Innenring */
.thsu-zustand{
  max-width:240px; padding:4px 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
  background:var(--pillNeutral, #f0f1f3); color:var(--sbSoft, #4b5563);
}
.thsu-zeile[aria-selected="true"] .thsu-zustand{background:var(--sbCard, #fff)}
.thsu-zustand.thsu-ton-ok{background:var(--pillOk, #e7f8ee); color:var(--pillOkTx, #067a46)}
.thsu-zustand.thsu-ton-warn{background:var(--pillWarn, #fdf3e7); color:var(--pillWarnTx, #b45309)}
.thsu-zustand.thsu-ton-bad{background:var(--pillBad, #fdecec); color:var(--pillBadTx, #b91c1c)}
.thsu-zustand.thsu-ton-info{background:var(--pillInfo, #eef5fb); color:var(--pillInfoTx, #185fa5)}

/* Suchwort markieren: weiches Gelb, im Dunkeln getönt */
#thsu-schleier mark{
  background:#fff0b3; color:inherit; font:inherit; font-style:normal;
  border-radius:3px; padding:0 1px; margin:0 -1px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
html[data-theme=dark] #thsu-schleier mark{background:rgba(250,204,21,.30); color:#fff7dc}

/* Linda fragen */
.thsu-linda{margin-top:8px; background:var(--sbCard2, #f9fafb)}
/* im Dunkeln wäre --sbCard2 fast so hell wie die Auswahl: dort nur ein Hauch */
html[data-theme=dark] .thsu-linda{background:rgba(255,255,255,.025)}
.thsu-linda .thsu-sym{border-radius:50%; background:var(--sbBrand, #1b4b7a); color:#fff}
html[data-theme=dark] .thsu-linda .thsu-sym{background:var(--sbBrandDark, #2578b0)}
.thsu-linda[aria-selected="true"]{background:var(--sbB50, #eef5fb)}
.thsu-linda[aria-selected="true"] .thsu-sym{background:var(--sbBrand, #1b4b7a)}
html[data-theme=dark] .thsu-linda[aria-selected="true"] .thsu-sym{background:var(--sbBrandDark, #2578b0)}

.thsu-leer{margin:0; padding:22px 14px 8px; font-size:15px; color:var(--sbSoft, #4b5563)}
.thsu-hinweis{margin:0; padding:14px 12px 0; font-size:13.5px; color:var(--sbFaint, #6b7280)}

/* ── Fußzeile mit den Tasten ──────────────────────────────────────────────────────────── */
.thsu-fuss{
  flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px;
  padding:11px 20px; font-size:13px; color:var(--sbFaint, #6b7280);
  box-shadow:0 -1px 0 var(--sbLineSoft, #f0f1f3);
}
.thsu-tipp{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.thsu-tipp .thsu-taste:last-of-type{margin-right:3px}
.thsu-taste{
  display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 6px; border-radius:6px;
  background:var(--sbBar, #f3f4f6); color:var(--sbSoft, #4b5563);
  font:600 11.5px/1 ui-monospace,'SFMono-Regular',Consolas,Menlo,monospace;
}
/* v4.900 (Kontrolletti M2): „32 von 237 Treffern, Eingabe genauer machen“ darf am schmalen Fuß umbrechen */
.thsu-zahl{margin-left:auto; font-variant-numeric:tabular-nums; text-align:right; min-width:0}

/* ── Knopf in der Kopfleiste: nur die Lupe (v4.902) ──────────────────────────────────────────────────────────────
   Peter, 14.10.2026: „Eigentlich würde ja nur eine Lupe ausreichen … Das ist ein bisschen dezenter.“ Ein quadratischer
   Symbolknopf, so hoch wie die übrigen Kopfknöpfe (--topPillH) und wie sie gezeichnet: Fläche, Linie, Radius und Farben
   kommen aus #appShell header .btn.s (hell und dunkel über dieselben Variablen). Kein Wort, kein Kürzel; „Suchen
   (Strg+K)“ steht in title und aria-label. „header #thsu-knopf“, damit die Maße die Pillen-Regeln der Kopfleiste
   (header .btn.s: Innenabstand 12 px) sicher schlagen. Die Stufen von v4.900 (ohnekuerzel/schmal/aus) gibt es nicht
   mehr. */
.thsu-knopf{display:inline-flex; align-items:center; justify-content:center; flex:none; white-space:nowrap}
.thsu-knopf .thsu-ic{width:18px; height:18px}
header #thsu-knopf{width:var(--topPillH, 38px); min-width:var(--topPillH, 38px); padding-left:0; padding-right:0}
/* nur während der Messung (nie gemalt): aus dem Fluss, so stünde die Kopfleiste ohne Lupe da */
html body header .thsu-knopf.thsu-k-mess{position:absolute !important}
/* G4: folgt nur noch Leeres, zieht er die Lücke der Reihe ein und endet bündig wie die Seitenknöpfe */
html body header .thsu-knopf.thsu-k-buendig{margin-right:calc(-1 * var(--thsu-luecke, 0px))}
/* v4.902, Platz: Wird es eng (die Lupe drückte die Kopfleiste sonst in eine zweite Zeile oder schöbe den Kobold unter
   sich, gemessen von knopfAnpassen() in js/suche.js), weichen die Beschriftungen „Cloud“ und „Online“ der Statuspillen.
   Symbol, Zustand und Zahl bleiben; der Text bleibt für Vorleseprogramme erhalten (nur unsichtbar, nicht entfernt). */
html body header.thsu-eng .statusStack .metaLbl{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── Telefon und schmale Fenster: volle Breite, oben ──────────────────────────────────── */
@media (max-width:640px){
  #thsu-schleier{padding:0}
  .thsu-fenster{
    width:100%; max-height:100dvh; border-radius:0 0 20px 20px;
    padding-top:env(safe-area-inset-top);
  }
  .thsu-feld{min-height:60px; padding:0 8px 0 16px; gap:10px}
  #thsu-schleier .thsu-eingabe{height:58px; font-size:17px}
  .thsu-liste{padding:2px 6px 10px}
  /* Zustand unter den Text, damit der Titel die ganze Breite bekommt */
  .thsu-zeile{grid-template-columns:34px minmax(0,1fr); gap:4px 11px; min-height:56px; padding:8px 10px}
  .thsu-zeile > span:empty{display:none}
  .thsu-sym{width:34px; height:34px; border-radius:10px; grid-row:span 2; align-self:center}
  .thsu-zeile .thsu-zustand{grid-column:2; justify-self:start; max-width:100%}
  .thsu-sym .thsu-ic{width:19px; height:19px}
  .thsu-titel{font-size:15px}
  .thsu-unter{font-size:13px}
  .thsu-zustand{font-size:11.5px; padding:2px 8px}
  /* Tastenhilfe braucht am Telefon niemand, die Trefferzahl bleibt */
  .thsu-tipp{display:none}
  .thsu-fuss{padding:9px 16px calc(9px + env(safe-area-inset-bottom))}
}

/* ── Bewegung: kurzes Ein- und Ausblenden, abschaltbar wie überall im TradeHub ───────── */
@keyframes thsu-schleier-ein{from{opacity:0}to{opacity:1}}
@keyframes thsu-fenster-ein{from{opacity:0; transform:translateY(-6px) scale(.985)}to{opacity:1; transform:none}}
#thsu-schleier:not([hidden]){animation:thsu-schleier-ein .14s ease-out}
#thsu-schleier:not([hidden]) .thsu-fenster{animation:thsu-fenster-ein .16s ease-out}
/* v4.902 (14.10.2026), Peter: „Wenn ich das Fenster aber schließe, dann schließt es sich abrupt. Da bräuchte ich
   eigentlich auch wieder einen Fade-out-Effekt beim Schließen des Fensters.“ Das Ausblenden ist das Einblenden
   rückwärts: gleiche Dauer und Bewegung, die Kurve gespiegelt (ease-in ist ease-out rückwärts), der Schleier wartet
   0,02 s, damit beide zugleich enden, wie sie beim Öffnen zugleich beginnen (zusammen 0,16 s). „both“ hält das Ende
   fest, bis js/suche.js hidden setzt (kein Aufblitzen). Der Schleier nimmt dabei keine Klicks mehr an. Abgeschaltet
   wird es von denselben Regeln wie das Einblenden (unten, spezifischer). */
/* v4.903: Weil das Ausblenden genau das Einblenden rückwärts ist (derselbe Rahmen von 0,16 s), setzt js/suche.js eine
   unterbrochene Bewegung an der gespiegelten Stelle fort (blendeUebergabe): Wer 40 ms eingeblendet hat, blendet von dort
   aus, wo das Ausblenden bei 120 ms steht, und umgekehrt; die Deckkraft springt nicht. ⚠️ Ein und Aus deshalb immer
   spiegelbildlich halten (gleiche Dauer und gleicher Rahmen, Kurven ease-out und ease-in, Keyframes vertauscht). */
@keyframes thsu-schleier-aus{from{opacity:1}to{opacity:0}}
@keyframes thsu-fenster-aus{from{opacity:1; transform:none}to{opacity:0; transform:translateY(-6px) scale(.985)}}
#thsu-schleier.thsu-schliesst{pointer-events:none; animation:thsu-schleier-aus .14s ease-in .02s both}
#thsu-schleier.thsu-schliesst .thsu-fenster{animation:thsu-fenster-aus .16s ease-in both}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="an"]) #thsu-schleier, html:not([data-motion="an"]) #thsu-schleier .thsu-fenster{animation:none}
}
html[data-motion="aus"] #thsu-schleier, html[data-motion="aus"] #thsu-schleier .thsu-fenster{animation:none}