/* AK86 2026 – Lostippen: Konsole an der Stelle des Laders, Vorschläge darüber. Immer dunkel, damit sie auf jedem Licht lesbar bleibt. */
.such { position: fixed; z-index: 97; /* über dem Geek-Fenster (96), unter Absturz und Röhre */  left: clamp(14px, 1.6vw, 28px); bottom: clamp(18px, 4vh, 44px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'liste bild' 'zeile bild'; align-items: end; width: min(700px, calc(100vw - 28px)); font: 500 clamp(13px, .92vw, 16px)/1.4 var(--f-mono); color: #fff; background-color: rgba(8, 8, 9, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .22); }
.such[hidden] { display: none; }
.such-liste { grid-area: liste; list-style: none; margin: 0; padding: 6px 0 0; }
.such-liste:empty { padding: 0; }
.such-liste a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 4px 13px; color: rgba(255, 255, 255, .72); text-decoration: none; cursor: pointer; }
.such-liste b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.such-liste small { flex: none; font-size: .74em; opacity: .62; }
.such-liste .an a { color: #fff; background-color: rgba(255, 255, 255, .1); }
.such-liste .an a::before { content: '→'; margin-right: -8px; color: #50BBB8; }
.such-liste .an b { flex: 1; font-weight: 700; }
.such-nichts { padding: 4px 13px; color: #ff8b95; }
.such-zeile { grid-area: zeile; display: flex; align-items: baseline; gap: .1em; margin: 0; padding: 9px 13px 10px; border-top: 1px solid rgba(255, 255, 255, .14); }
.such-liste:empty + .such-zeile { border-top: 0; }
.such-prompt { flex: none; white-space: pre; max-width: 46%; overflow: hidden; text-overflow: ellipsis; color: #50BBB8; }
.such-feld { position: relative; flex: 1; min-width: 0; }
.such-feld input { display: block; width: 100%; padding: 0; font: inherit; font-weight: 700; color: #fff; caret-color: #BA1424; background: none; border: 0; outline: 0; }
.such-geist { position: absolute; left: 0; top: 0; max-width: 100%; overflow: hidden; white-space: pre; font-weight: 700; color: rgba(255, 255, 255, .36); pointer-events: none; }
.such-bild { grid-area: bild; align-self: stretch; width: 0; overflow: hidden; transition: width .28s cubic-bezier(.2, .8, .2, 1); }
.such-bild.an { width: clamp(140px, 12vw, 210px); }
.such-bild img { display: block; width: clamp(140px, 12vw, 210px); height: 100%; min-height: 110px; object-fit: cover; }

/* Das Statusfeld unten rechts spricht jetzt dieselbe Schrift wie die Konsole (05.11.: „irgendwie passt die schrift in dem rechten status panel nicht dazu“) */
.toast { font: 500 clamp(13px, .92vw, 16px)/1.4 var(--f-mono); letter-spacing: 0; }
/* Übersicht der Codes */
.such-kopf { padding: 3px 13px 5px; font-size: .78em; color: rgba(255, 255, 255, .55); }
.such-liste .ist-code b { color: #7fe3df; }

/* Knopf in der Kopfzeile, liegt in der Navigation wie der Hell/Dunkel-Schalter */
.such-knopf { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--static-white); font: 700 15px/1 var(--f-mono); letter-spacing: -.04em; cursor: pointer; opacity: .85; transition: opacity .2s; }
.such-knopf:hover { opacity: 1; }
.such-knopf i { font-style: normal; animation: trx-to-c 1.1s steps(1) infinite; }
/* Hinweis mittig über dem Knopf, nicht links daneben (lag sonst über „Agentur“, Alex 09.11.2026) */
.such-knopf::after { content: 'Tipp einfach los'; position: absolute; left: 50%; bottom: 100%; margin-bottom: 14px; transform: translate(-50%, 5px); white-space: nowrap; font: 500 12px/1 var(--f-mono); letter-spacing: .02em; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.such-knopf:hover::after, .such-knopf:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
html.lightmode .such-knopf { color: var(--textcolor); }
.error404 .nk ~ * .such-knopf { display: none; }
@media (max-width: 760px) {
  .such-knopf { margin-left: auto; }
  .such-knopf + .mode-btn { margin-left: 0; }
  .such-knopf::after { content: none; }
  /* Am Handy verdeckt die Tastatur den unteren Rand: Die Zeile steht oben, die Vorschläge darunter */
  .such { top: 92px; bottom: auto; left: 10px; width: calc(100vw - 20px); grid-template-columns: minmax(0, 1fr); grid-template-areas: 'zeile' 'liste'; }
  .such-feld input { font-size: 16px; } /* sonst zoomt das Handy beim Antippen */
  .such-zeile { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .such-liste { padding: 0 0 6px; }
  .such-prompt { max-width: 34%; }
  .such-bild { display: none; }
}
@media (prefers-reduced-motion: reduce) { .such-knopf i { animation: none; } .such-bild { transition: none; } }