/* Banner „Suchauftrag“ ganz oben (09.11.2026, Micha: „Bau oben jetzt noch in der Website einen richtig geilen Banner, richtig
   geil animiert, über diese neue Funktion“). banner-suche.js baut ihn auf der Startseite und auf /shop an die Stelle der schmalen
   Leiste .announcement. Schwarz und eckig wie der Bereich „YOU WANT IT. / WE FIND
   IT.“, Kleintext in --mono, Grün (#8fc7a0) nur für den Punkt bei „Neu“ und für „Gefunden“.
   Am Laptop liegt er im Raster der Kopfleiste darunter: links „Neu“ und der Satz, in der Mitte ein kleines Suchfeld, rechts der
   Knopf, das X im Rand. Schmaler (bis 1023 px) ist es eine Zeile, in der Satz und Suchfeld sich abwechseln.
   Alles trägt den Vorsatz bs-. Bewegt wird nur über transform, translate und opacity. Einzige Ausnahme: das Zuklappen, dort geht
   einmal die Höhe zurück auf die alte Leiste. */

/* ---------- Höhe, vorab eingeplant ----------
   Das kleine Skript im Kopf von index.html setzt html.bs-an, bevor der body gezeichnet wird. Bis der Banner steht, hält die alte Leiste seinen Platz in
   seiner Höhe und Farbe, ohne Schrift. Beim Einsetzen springt darum nichts. */
:root { --bs-h: 48px; }
@media (max-width: 1023px) { :root { --bs-h: 44px; } }
@media (max-width: 680px) { :root { --bs-h: 40px; } }
html:root.bs-an .announcement { height: var(--bs-h); min-height: 0; overflow: hidden; color: transparent; background: #050505; border-bottom: 1px solid rgba(232, 232, 229, .09); }
html:root[data-theme="light"].bs-an .announcement { background: #131312; }
/* Nach dem Schließen blendet die alte Leiste wieder auf. */
.announcement.bs-zurueck { animation: bs-auftauchen .5s ease both; }
@keyframes bs-auftauchen { from { opacity: 0; } }

/* ---------- Grundfläche ---------- */
.bs-banner {
  --bs-gruen: #8fc7a0;
  --bs-gruen-rgb: 143, 199, 160;
  --bs-rand: var(--gutter);
  --bs-neu-b: 62px;
  --bs-feld-h: 28px;
  position: relative;
  isolation: isolate;
  height: var(--bs-h);
  overflow: hidden;
  color: var(--paper);
  background: #050505;
  border-bottom: 1px solid var(--line-soft);
  font: 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  contain: layout paint;
}
/* Im hellen Design bleibt er ein dunkles Band wie die alte Leiste dort: die Seiten-Tokens mit ihren dunklen Werten. */
:root[data-theme="light"] .bs-banner { color-scheme: dark; --black: #080808; --paper: #e8e8e5; --muted: #92928f; --dim: #5d5d5b; --line: rgba(232, 232, 229, .19); --line-soft: rgba(232, 232, 229, .09); background: #131312; }

/* Der ganze Banner ist ein Link auf wir-suchen.html (wechsel-suche.js fängt ihn ab), das X liegt als eigener Knopf darüber.
   Raster wie die Kopfleiste: links und rechts gleich breit, das Suchfeld genau in der Mitte. */
html:root .bs-banner a.bs-link:any-link { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(18px, 2.2vw, 32px); padding: 0 var(--bs-rand); color: var(--paper); }
.bs-link:focus-visible { outline: 1px solid var(--paper); outline-offset: -5px; }
.bs-slot { display: contents; }

/* ---------- Neu ---------- */
.bs-neu { position: relative; display: inline-flex; width: var(--bs-neu-b); height: 22px; grid-area: 1 / 1; justify-self: start; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(var(--bs-gruen-rgb), .42); font-size: 9px; font-weight: 700; letter-spacing: .24em; }
.bs-neu-wort { margin-right: -.24em; }
.bs-punkt { position: relative; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--bs-gruen); box-shadow: 0 0 8px rgba(var(--bs-gruen-rgb), .75); }
.bs-punkt::after { position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--bs-gruen-rgb), .5), rgba(var(--bs-gruen-rgb), .14) 55%, transparent); content: ""; opacity: .2; transform: scale(.6); animation: bs-atmen 2.6s ease-in-out 1.2s infinite alternate; }
/* Ein weiches Leuchten statt eines Rings: ein Verlauf bleibt beim Vergrößern weich, ein feiner Ring wurde in WebKit unscharf. */
@keyframes bs-atmen { to { opacity: 1; transform: none; } }

/* ---------- Satz und Preis ---------- */
.bs-text { display: flex; min-width: 0; grid-area: 1 / 1; flex-direction: column; justify-content: center; gap: 6px; margin-left: calc(var(--bs-neu-b) + 18px); overflow: hidden; }
.bs-satz, .bs-preis { display: block; width: max-content; }
.bs-satz { color: var(--muted); }
.bs-satz b { color: var(--paper); font-weight: 400; }
.bs-preis { color: var(--muted); font-size: 8px; letter-spacing: .16em; opacity: .78; }

/* ---------- Kleines Suchfeld ---------- */
.bs-feld { position: relative; display: flex; width: clamp(250px, 25vw, 360px); height: var(--bs-feld-h); grid-area: 1 / 2; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(232, 232, 229, .26); background: rgba(232, 232, 229, .025); transition: border-color .3s ease; }
/* Überfahren nur mit echter Maus: Am Handy bliebe der Zustand nach dem Antippen sonst stehen. */
@media (hover: hover) and (pointer: fine) { .bs-link:hover .bs-feld { border-color: rgba(232, 232, 229, .48); } }
/* Beim Fund leuchtet der Rand kurz grün auf (eigene Ebene, nur opacity). */
.bs-feld::after { position: absolute; inset: -1px; border: 1px solid rgba(var(--bs-gruen-rgb), .75); content: ""; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.bs-gefunden .bs-feld::after { opacity: .6; transition: opacity .22s ease .1s; }
.bs-lupe { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; opacity: .85; }
.bs-fenster { position: relative; min-width: 0; flex: 1; align-self: stretch; }
.bs-maske { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 7px, #000 calc(100% - 34px), transparent); }
/* Das Laufband: Wunschjacken hintereinander, dreimal, damit es ohne Naht weiterlaufen kann. Bewegt per Web Animations (transform). */
.bs-band { position: absolute; top: 0; left: 0; display: flex; height: 100%; align-items: center; will-change: transform; }
/* Nach dem Fund kommen die übrigen erst zurück, wenn „Gefunden“ weg ist, sonst liefen sie kurz darunter durch. */
.bs-stueck { flex: none; margin-right: 30px; opacity: .4; transition: opacity .45s ease .24s; }
.bs-gefunden .bs-stueck { opacity: 0; transition: opacity .3s ease; }
.bs-gefunden .bs-stueck.bs-dieser { opacity: 1; }

/* Der Sucher: vier Ecken rasten um den Treffer ein (wie im WANTED-Übergang). Lage und Breite setzt das Skript, solange er unsichtbar ist. */
.bs-sucher { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.bs-sucher i { position: absolute; width: 5px; height: 5px; border: 0 solid var(--paper); transition: transform .3s ease; }
.bs-sucher i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; transform: translate(-6px, -3px); }
.bs-sucher i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; transform: translate(6px, -3px); }
.bs-sucher i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; transform: translate(-6px, 3px); }
.bs-sucher i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; transform: translate(6px, 3px); }
.bs-gefunden .bs-sucher { opacity: 1; transition: opacity .12s ease; }
.bs-gefunden .bs-sucher i { transform: none; transition: transform .55s cubic-bezier(.2, 1.6, .4, 1); }

/* „Gefunden“: Punkt ploppt, Ring geht auf, jeder Buchstabe rattert kurz über drei Zeichen und rastet ein (wie im Bereich). */
.bs-fund { position: absolute; top: 50%; right: 11px; display: inline-flex; align-items: center; gap: 7px; color: var(--bs-gruen); font-size: 8px; letter-spacing: .22em; opacity: 0; transform: translate(-4px, -50%); transition: opacity .2s ease, transform .3s ease; }
.bs-gefunden .bs-fund { opacity: 1; transform: translate(0, -50%); transition: opacity .12s linear .12s, transform .5s cubic-bezier(.16, 1, .3, 1) .12s; }
.bs-fund-zeichen { position: relative; width: 5px; height: 5px; flex: none; }
.bs-fund-punkt, .bs-fund-ring { position: absolute; border-radius: 50%; }
.bs-fund-punkt { inset: 0; background: var(--bs-gruen); box-shadow: 0 0 7px rgba(var(--bs-gruen-rgb), .7); }
.bs-fund-ring { inset: -12px; background: radial-gradient(closest-side, rgba(var(--bs-gruen-rgb), .55), rgba(var(--bs-gruen-rgb), .12) 60%, transparent); opacity: 0; }
.bs-fund-wort { display: inline-flex; margin-right: -.22em; }
.bs-fund-z { display: block; height: 1em; overflow: hidden; font-weight: inherit; line-height: 1; }
.bs-fund-z > span { display: block; transform: translateY(-3em); }
.bs-gefunden .bs-fund-punkt { animation: bs-plopp .6s cubic-bezier(.3, .7, .4, 1) .14s both; }
.bs-gefunden .bs-fund-ring { animation: bs-ring 1.1s cubic-bezier(.15, .6, .3, 1) .18s forwards; }
.bs-gefunden .bs-fund-z { animation: bs-auf .01s linear calc(.2s + var(--i) * 34ms) both; }
.bs-gefunden .bs-fund-z > span { animation: bs-rattern .26s steps(1, end) calc(.2s + var(--i) * 34ms) both; }
@keyframes bs-plopp { 0% { transform: scale(0); } 45% { transform: scale(1.6); } 68% { transform: scale(.82); } 86% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes bs-ring { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes bs-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes bs-rattern { 0% { transform: none; } 25% { transform: translateY(-1em); } 50% { transform: translateY(-2em); } 75%, 100% { transform: translateY(-3em); } }

/* ---------- Knopf ---------- */
.bs-knopf { display: inline-flex; height: 30px; grid-area: 1 / 3; justify-self: end; align-items: center; gap: 12px; padding: 0 12px 0 15px; color: #080808; background: var(--paper); font-size: 9.5px; letter-spacing: .15em; }
.bs-knopf-text { margin-right: -.15em; }
.bs-pfeil { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .bs-link:hover .bs-pfeil { transform: translateX(3px); } }

/* ---------- X: gezeichnet, liegt im rechten Rand neben dem Knopf ---------- */
.bs-zu { position: absolute; z-index: 2; top: 50%; right: max(4px, calc((var(--bs-rand) - 30px) / 2)); display: grid; width: 30px; height: 30px; place-items: center; margin-top: -15px; padding: 0; border: 0; color: var(--muted); background: transparent; transition: color .2s ease; }
.bs-zu svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .bs-zu:hover { color: var(--paper); }
  .bs-zu:hover svg { transform: rotate(90deg); }
}
.bs-zu:focus-visible { outline: 1px solid var(--paper); outline-offset: -3px; }

/* ---------- Lichtschimmer: ein weiches Band streicht über den Banner, unten leuchtet die Kante mit ---------- */
.bs-schimmer { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: min(46vw, 560px); pointer-events: none; transform: translate3d(-100%, 0, 0); background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, .045) 36%, rgba(255, 255, 255, .115) 50%, rgba(255, 255, 255, .045) 64%, transparent 85%); }
.bs-schimmer::after { position: absolute; right: 22%; bottom: 0; left: 22%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); content: ""; }

/* ---------- Auftritt: der Inhalt gleitet von oben herein, Teil für Teil (translate, damit transform frei bleibt) ---------- */
.bs-wartet :is(.bs-neu, .bs-text, .bs-feld, .bs-knopf, .bs-zu) { opacity: 0; }
.bs-auftritt :is(.bs-neu, .bs-text, .bs-feld, .bs-knopf, .bs-zu) { animation: bs-rein 1.15s cubic-bezier(.16, 1, .3, 1) .12s backwards; }
.bs-auftritt .bs-text { animation-delay: .2s; }
.bs-auftritt .bs-feld { animation-delay: .28s; }
.bs-auftritt .bs-knopf { animation-delay: .36s; }
.bs-auftritt .bs-zu { animation-delay: .46s; }
/* Aus der oberen Kante: fast eine ganze Bannerhöhe, der Banner schneidet oben ab. */
@keyframes bs-rein { 0% { opacity: 0; translate: 0 calc(var(--bs-h) * -.85); } 35% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }

/* ---------- Zuklappen: Inhalt geht nach oben weg, dann die Höhe zurück auf die alte Leiste (--bs-ziel misst das Skript) ---------- */
.bs-banner.bs-geht { height: var(--bs-ziel, 0px); transition: height .46s cubic-bezier(.65, 0, .25, 1) .12s; }
.bs-geht :is(.bs-link, .bs-zu) { opacity: 0; transform: translateY(-12px); transition: opacity .24s ease, transform .34s cubic-bezier(.6, 0, .4, 1); }
.bs-geht .bs-schimmer { opacity: 0; }

/* ---------- Schmaler: eine Zeile, Satz und Suchfeld wechseln sich im selben Platz ab ---------- */
@media (max-width: 1023px) {
  html:root .bs-banner a.bs-link:any-link { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; padding-right: calc(var(--bs-rand) + 30px); }
  .bs-zu { right: max(2px, calc(var(--bs-rand) - 10px)); }
  .bs-slot { position: relative; display: block; height: calc(var(--bs-feld-h) + 2px); grid-area: 1 / 2; overflow: hidden; }
  .bs-text { position: absolute; inset: 0; margin: 0; }
  .bs-preis { display: none; }
  .bs-feld { position: absolute; top: 1px; left: 0; width: min(100%, 380px); opacity: 0; transform: translateY(100%); }
  .bs-knopf { grid-area: 1 / 3; }
  .bs-auftritt .bs-feld, .bs-wartet .bs-feld { animation: none; }
}
@media (max-width: 680px) {
  .bs-banner { --bs-rand: 19px; --bs-neu-b: 52px; --bs-feld-h: 26px; font-size: 9px; letter-spacing: .1em; }
  .bs-neu { height: 20px; gap: 7px; font-size: 8px; letter-spacing: .2em; }
  .bs-neu-wort { margin-right: -.2em; }
  .bs-punkt { width: 5px; height: 5px; }
  .bs-feld { gap: 7px; padding: 0 8px; }
  .bs-lupe { width: 10px; height: 10px; }
  .bs-stueck { margin-right: 24px; }
  .bs-fund { right: 8px; gap: 6px; font-size: 7.5px; letter-spacing: .18em; }
  .bs-fund-wort { margin-right: -.18em; }
}
/* Ganz schmal: nur der Pfeil im hellen Quadrat, der ganze Banner ist ohnehin der Link. Unter 381 px fällt die Lupe weg und die
   Abstände rücken zusammen, damit Wunsch und „Gefunden“ nebeneinander passen. Reicht es dann noch nicht (bs-eng, misst das
   Skript), steht beim Fund nur der grüne Punkt. */
@media (max-width: 380px) {
  html:root .bs-banner a.bs-link:any-link { column-gap: 10px; }
  .bs-banner { --bs-neu-b: 48px; }
  .bs-lupe { display: none; }
}
.bs-eng .bs-fund-wort { display: none; }
@media (max-width: 560px) {
  .bs-knopf { width: 30px; justify-content: center; padding: 0; }
  .bs-knopf-text { display: none; }
}

/* ---------- Bewegung reduziert: ein ruhiges, fertiges Bild ---------- */
@media (prefers-reduced-motion: reduce) {
  .bs-banner *, .bs-banner *::before, .bs-banner *::after { animation: none !important; transition: none !important; }
  .bs-schimmer { display: none; }
  .announcement.bs-zurueck { animation: none; }
}