Verwaltungsseite: 6 kleine verteilte Hintergrund-Logos statt 2 große + Custom-Scrollbar im Shop-Filter

Auf ausdrücklichen Wunsch: das rotierende Logo-Wasserzeichen im Hintergrund der Verwaltungs-
Hauptseite wirkte als EIN großer zentraler Fleck (zwei große, zentrierte Ebenen). Jetzt sechs
kleinere Logos (150-260px statt 950-1500px), über den ganzen Viewport verteilt (obere/mittlere/
untere Zeile, je links und rechts), weiterhin gegenläufig rotierend, jetzt zusätzlich mit einer
dritten Markenfarbe (Cyan) neben Gold/Violett für mehr Abwechslung. Reine Markup-/CSS-Änderung.

Zusätzlich: die Standard-Browser-Scrollbar im Kategorie-Dropdown des Shop-Filters (schwarz-weiß,
wirkte fremd im dunklen Design) durch eine gestylte, schlanke, markenfarbene Verlaufs-Scrollbar
ersetzt (Firefox über scrollbar-color/-width, Chrome/Edge/Safari über ::-webkit-scrollbar).

Lokal mit wrangler pages dev getestet (beide Änderungen im ausgelieferten CSS bestätigt).

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/pages/verwaltung/index.astro

@@ -29,14 +29,19 @@ const lang: Locale = "de";
   path="/verwaltung/"
   noindex={true}
 >
-  {/* Van's-Logo als großes, sehr dezentes Wasserzeichen im GESAMTEN Seitenhintergrund — fix
+  {/* Van's-Logo als mehrere kleine, sehr dezente Wasserzeichen, verteilt über den GESAMTEN
-      positioniert (bleibt beim Scrollen stehen), zwei gegenläufig rotierende Ebenen (gold/violett
+      Seitenhintergrund — fix positioniert (bleiben beim Scrollen stehen), sechs unterschiedlich
-      eingefärbt), exakt dieselbe CSS-Technik wie auf der Zugangscode-Seite (invert()+sepia()+
+      große/schnelle/gegenläufig rotierende Kopien (gold/violett/cyan eingefärbt), exakt dieselbe
-      mix-blend-mode:screen), nur als eigenständige Datei nachgebaut, da diese Seite anders als
+      CSS-Technik wie auf der Zugangscode-Seite (invert()+sepia()+mix-blend-mode:screen). Auf
-      /verwaltung-code.html ein ganz normaler Astro-Layout-Seiteninhalt mit Scroll ist. Auf
+      ausdrücklichen Wunsch (04.08.2026): statt zwei großer, zentrierter Logos (wirkte wie EIN
-      ausdrücklichen Wunsch: die ganze Seite soll sich für VanVan "ultra speziell" anfühlen. */}
+      großer Fleck) jetzt viele kleine, über die ganze Fläche verstreut. Auf ausdrücklichen
+      Wunsch: die ganze Seite soll sich für VanVan "ultra speziell" anfühlen. */}
   <div class="verwaltung-logo-bg verwaltung-logo-bg-1" aria-hidden="true"></div>
   <div class="verwaltung-logo-bg verwaltung-logo-bg-2" aria-hidden="true"></div>
+  <div class="verwaltung-logo-bg verwaltung-logo-bg-3" aria-hidden="true"></div>
+  <div class="verwaltung-logo-bg verwaltung-logo-bg-4" aria-hidden="true"></div>
+  <div class="verwaltung-logo-bg verwaltung-logo-bg-5" aria-hidden="true"></div>
+  <div class="verwaltung-logo-bg verwaltung-logo-bg-6" aria-hidden="true"></div>
 
   <section class="section-tight">
     <div class="container">

src/styles/global.css

@@ -1078,8 +1078,19 @@ a:focus-visible, button:focus-visible {
   flex-direction: column;
   gap: 0.1rem;
   z-index: 60;
+  /* Firefox: eigene, schmale, markenfarbene Scrollleiste statt der grauen Standard-Leiste. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--c-accent) transparent;
 }
 .cat-filter.open .cat-filter-menu { display: flex; }
+/* Chrome/Edge/Safari (WebKit/Blink): dieselbe Wirkung über die proprietären ::-webkit-scrollbar-
+   Pseudoelemente — dunkle, transparente Spur, schlanker abgerundeter Verlaufs-Balken in den
+   Markenfarben, der beim Hover/Ziehen heller aufleuchtet, statt der nackten schwarz-weißen
+   System-Leiste. */
+.cat-filter-menu::-webkit-scrollbar { width: 8px; }
+.cat-filter-menu::-webkit-scrollbar-track { background: rgba(244, 241, 247, 0.05); border-radius: 999px; margin-block: 0.3rem; }
+.cat-filter-menu::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c-accent), #9b7fd6); border-radius: 999px; }
+.cat-filter-menu::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #78ddf1, #ad94e0); }
 .cat-filter-group { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.5rem; }
 .cat-filter-group:first-of-type { margin-top: 0.2rem; }
 .cat-filter-group-label {
@@ -3181,36 +3192,84 @@ a:focus-visible, button:focus-visible {
 
 /* Interne Bestellverwaltung (/verwaltung/) — Status-Kacheln, Filterleiste, Auswertungs-Balken. */
 
-/* 04.08.2026: Van's-Logo als riesiges, sehr dezentes Wasserzeichen im GESAMTEN Seitenhintergrund
+/* 04.08.2026, überarbeitet: Van's-Logo als SECHS kleine, sehr dezente Wasserzeichen, verteilt
-   — fix positioniert (bleibt beim Scrollen an Ort und Stelle, läuft "unter" der Seite durch),
+   über den GESAMTEN Seitenhintergrund — fix positioniert (bleiben beim Scrollen an Ort und
-   zwei gegenläufig rotierende Ebenen in Gold/Violett. Exakt derselbe Einfärbe-Trick wie auf der
+   Stelle), jedes rotiert unabhängig um die eigene Mitte, unterschiedliche Größe/Tempo/Richtung/
-   Zugangscode-Seite (public/verwaltung-code.html): invert() dreht das schwarze Logo auf weißem
+   Einfärbung für eine organische, nicht-synchrone Wirkung (ursprünglich zwei GROSSE, zentrierte
-   Grund um, mix-blend-mode:screen lässt den (jetzt schwarzen) ehemals-weißen Kreis komplett
+   Ebenen — wirkte wie ein einzelner großer Fleck statt "über die Fläche verstreut", siehe
-   verschwinden, sepia()+saturate()+hue-rotate() färbt die übrig bleibenden (jetzt weißen) Linien
+   Vault-Feedback). Exakt derselbe Einfärbe-Trick wie auf der Zugangscode-Seite
-   warm ein. z-index -1, damit die Seite selbst (alle Boxen haben eigene, deckende Hintergründe)
+   (public/verwaltung-code.html): invert() dreht das schwarze Logo auf weißem Grund um,
-   ganz normal darüber liegt — sichtbar wird das Wasserzeichen nur in den Zwischenräumen. */
+   mix-blend-mode:screen lässt den (jetzt schwarzen) ehemals-weißen Kreis komplett verschwinden,
+   sepia()+saturate()+hue-rotate() färbt die übrig bleibenden (jetzt weißen) Linien ein. z-index
+   -1, damit die Seite selbst (alle Boxen haben eigene, deckende Hintergründe) ganz normal
+   darüber liegt — sichtbar wird jedes Wasserzeichen nur in den Zwischenräumen. */
 .verwaltung-logo-bg {
   position: fixed;
-  top: 50%;
-  left: 50%;
   background: url("/logo.png") center / contain no-repeat;
   mix-blend-mode: screen;
   pointer-events: none;
   z-index: -1;
 }
+/* Oben links, golden, größtes der sechs. */
 .verwaltung-logo-bg-1 {
-  width: min(1500px, 220vw);
+  top: 4%;
-  height: min(1500px, 220vw);
+  left: 3%;
+  width: min(260px, 55vw);
+  height: min(260px, 55vw);
+  filter: invert(1) sepia(1) saturate(6) hue-rotate(358deg) brightness(1.35);
+  opacity: 0.08;
+  animation: verwaltung-logo-spin-1 95s linear infinite;
+}
+/* Oben rechts, violett. */
+.verwaltung-logo-bg-2 {
+  top: 10%;
+  right: 5%;
+  width: min(190px, 45vw);
+  height: min(190px, 45vw);
+  filter: invert(1) sepia(1) saturate(7) hue-rotate(233deg) brightness(1.15);
+  opacity: 0.07;
+  animation: verwaltung-logo-spin-2 130s linear infinite;
+}
+/* Mitte links, cyan (dritte Markenfarbe), leicht über den Rand hinaus für einen "angeschnittenen"
+   Effekt. */
+.verwaltung-logo-bg-3 {
+  top: 46%;
+  left: -3%;
+  width: min(220px, 50vw);
+  height: min(220px, 50vw);
+  filter: invert(1) sepia(1) saturate(6) hue-rotate(160deg) brightness(1.2);
+  opacity: 0.06;
+  animation: verwaltung-logo-spin-1 75s linear infinite;
+}
+/* Mitte rechts, golden, kleinstes der sechs. */
+.verwaltung-logo-bg-4 {
+  top: 55%;
+  right: -2%;
+  width: min(150px, 40vw);
+  height: min(150px, 40vw);
   filter: invert(1) sepia(1) saturate(6) hue-rotate(358deg) brightness(1.35);
   opacity: 0.09;
-  animation: verwaltung-logo-spin-1 110s linear infinite;
+  animation: verwaltung-logo-spin-2 60s linear infinite;
 }
-.verwaltung-logo-bg-2 {
+/* Unten links, violett. */
-  width: min(950px, 150vw);
+.verwaltung-logo-bg-5 {
-  height: min(950px, 150vw);
+  bottom: 6%;
+  left: 8%;
+  width: min(210px, 48vw);
+  height: min(210px, 48vw);
   filter: invert(1) sepia(1) saturate(7) hue-rotate(233deg) brightness(1.15);
+  opacity: 0.07;
+  animation: verwaltung-logo-spin-1 140s linear infinite;
+}
+/* Unten rechts, cyan. */
+.verwaltung-logo-bg-6 {
+  bottom: 3%;
+  right: 10%;
+  width: min(175px, 42vw);
+  height: min(175px, 42vw);
+  filter: invert(1) sepia(1) saturate(6) hue-rotate(160deg) brightness(1.2);
   opacity: 0.08;
-  animation: verwaltung-logo-spin-2 75s linear infinite;
+  animation: verwaltung-logo-spin-2 110s linear infinite;
 }
 @keyframes verwaltung-logo-spin-1 {
   from { transform: translate(-50%, -50%) rotate(0deg); }
@@ -3220,7 +3279,10 @@ a:focus-visible, button:focus-visible {
   from { transform: translate(-50%, -50%) rotate(360deg); }
   to { transform: translate(-50%, -50%) rotate(0deg); }
 }
-@media (prefers-reduced-motion: reduce) { .verwaltung-logo-bg-1, .verwaltung-logo-bg-2 { animation: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .verwaltung-logo-bg-1, .verwaltung-logo-bg-2, .verwaltung-logo-bg-3,
+  .verwaltung-logo-bg-4, .verwaltung-logo-bg-5, .verwaltung-logo-bg-6 { animation: none; }
+}
 @media print { .verwaltung-logo-bg { display: none; } }
 
 /* "Kisten" — jede zusammengehörige Gruppe (Bestellstatus, Kennzahlen, Bestellliste, Bestseller,