/* ---------- Suchleiste in der Kopfzeile (alle Seiten) ----------
   Form nach uiverse.io/themrsami/calm-eel-15 (MIT): runde Lupe rechts.
   Zu sehen ist nur die Lupe; ein Klick klappt die Leiste aus.
   Hier ohne Fläche und ohne Lichtschein, in den Farben der Kopfzeile. Verhalten: site-search.js. */
.site-search {
  --ss-1: #ECEAE4; --ss-2: #B9B7B0; --ss-3: #918F89;
  --ss-line: rgba(236, 234, 228, .14); --ss-line-2: rgba(236, 234, 228, .30);
  position: relative; flex: none; width: 40px; transition: width .35s cubic-bezier(.2, .8, .2, 1);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.nav .wrap > .site-search { order: 6; margin-left: 22px; }
.site-search:focus-within { width: 220px; }

.site-search__bar {
  position: relative; display: flex; align-items: center; height: 40px; padding: 0 4px; box-sizing: border-box; overflow: hidden;
  border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .3s ease, padding .35s cubic-bezier(.2, .8, .2, 1);
}
.site-search .site-search__input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; outline: none !important;
  color: var(--ss-1); font-family: inherit; font-size: 14.5px; font-weight: 400; line-height: 1.2; letter-spacing: 0; -webkit-appearance: none; appearance: none;
  opacity: 0; transition: opacity .25s ease;
}
.site-search:focus-within .site-search__bar { padding: 0 4px 0 15px; }
.site-search:focus-within .site-search__input { opacity: 1; }
.site-search:focus-within .site-search__icon { margin-left: 8px; }
.site-search .site-search__input::placeholder { color: var(--ss-3); opacity: 1; }
.site-search .site-search__icon {
  display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(236, 234, 228, .08); color: var(--ss-1); box-shadow: none; cursor: pointer;
  transition: background-color .3s ease, margin .35s cubic-bezier(.2, .8, .2, 1);
}
.site-search .site-search__icon:hover { background: rgba(236, 234, 228, .18); }
.site-search__icon svg { width: 18px; height: 18px; fill: currentColor; }

.site-search__bar:focus-within { box-shadow: inset 0 0 0 1px rgba(236, 234, 228, .46); }

/* Treffer */
.site-search__panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; box-sizing: border-box;
  width: max(100%, 340px); max-width: calc(100vw - 32px); max-height: min(60vh, 420px); overflow-y: auto; padding: 6px;
  background: #242424; border: 1px solid var(--ss-line-2); border-radius: 2px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  color: var(--ss-1); text-align: left;
}
.site-search__panel[hidden] { display: none; }
.site-search__group { padding: 10px 10px 4px; font: 500 12px/1.4 "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; color: var(--ss-3); }
.site-search .site-search__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; margin: 0; padding: 9px 10px;
  border: 0; border-radius: 2px; background: transparent; box-shadow: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 400; line-height: 1.35; letter-spacing: 0; color: var(--ss-2); text-align: left;
}
.site-search__item span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search__item span:last-child { flex: none; font: 12px/1 "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; color: var(--ss-3); }
.site-search .site-search__item[aria-selected="true"] { background: rgba(236, 234, 228, .09); color: var(--ss-1); }
.site-search__empty { padding: 22px 12px; text-align: center; font-size: 14px; color: var(--ss-3); }

/* Zwischen 1001 und 1240 px wird es neben den fünf Links eng: schmalere Leiste */
@media (max-width: 1240px) { .site-search:focus-within { width: 170px; } .nav .wrap > .site-search { margin-left: 16px; } }

/* Schmal: beim Antippen legt sich die Leiste über die ganze Kopfzeile. */
@media (max-width: 1000px) {
  .site-search { transition: none; }
  .nav .wrap > .site-search { margin-left: 12px; }
  .site-search:focus-within { position: absolute; left: var(--nh-pad, var(--pad, 20px)); right: var(--nh-pad, var(--pad, 20px)); top: 50%; width: auto; margin: 0 !important; transform: translateY(-50%); }
  .site-search:focus-within .site-search__input { font-size: 16px; }
  .site-search:focus-within .site-search__panel { left: 0; right: 0; width: auto; max-width: none; }
  .nav .wrap:has(.site-search:focus-within) > :not(.site-search),
  .top:has(.site-search:focus-within) > :not(.top__right),
  .top__right:has(.site-search:focus-within) > :not(.site-search) { visibility: hidden; }
  .top__right:has(.site-search:focus-within) { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .site-search, .site-search__bar, .site-search .site-search__input, .site-search .site-search__icon { transition: none; }
}
@media print { .site-search { display: none; } }

/* Handy: Lupe, Sprache, Konto und Menü rücken zusammen, damit alles in eine Zeile passt */
@media (max-width: 480px) {
  .site-search:not(:focus-within) { width: 36px; }
  .site-search:not(:focus-within) .site-search__bar { height: 36px; padding: 0 2px; }
  .nav .wrap > .site-search { margin-left: 6px; }
  .nav .wrap:has(> .site-search) > .lang-switch { margin-left: 6px; }
  .nav .wrap:has(> .site-search) > .acct { margin-left: 6px !important; }
  .nav .wrap:has(> .site-search) > .nav-toggle { margin-left: 6px; padding-left: 12px; padding-right: 12px; }
}