diff --git a/src/styles/global.css b/src/styles/global.css
index fcaab02..a4b7e5c 100644
--- a/src/styles/global.css
+++ b/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
- — fix positioniert (bleibt beim Scrollen an Ort und Stelle, läuft "unter" der Seite durch),
- zwei gegenläufig rotierende Ebenen in Gold/Violett. Exakt derselbe Einfärbe-Trick wie auf der
- Zugangscode-Seite (public/verwaltung-code.html): invert() dreht das schwarze Logo auf weißem
- Grund um, 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
- warm ein. z-index -1, damit die Seite selbst (alle Boxen haben eigene, deckende Hintergründe)
- ganz normal darüber liegt — sichtbar wird das Wasserzeichen nur in den Zwischenräumen. */
+/* 04.08.2026, überarbeitet: Van's-Logo als SECHS kleine, sehr dezente Wasserzeichen, verteilt
+ über den GESAMTEN Seitenhintergrund — fix positioniert (bleiben beim Scrollen an Ort und
+ Stelle), jedes rotiert unabhängig um die eigene Mitte, unterschiedliche Größe/Tempo/Richtung/
+ Einfärbung für eine organische, nicht-synchrone Wirkung (ursprünglich zwei GROSSE, zentrierte
+ Ebenen — wirkte wie ein einzelner großer Fleck statt "über die Fläche verstreut", siehe
+ Vault-Feedback). Exakt derselbe Einfärbe-Trick wie auf der Zugangscode-Seite
+ (public/verwaltung-code.html): invert() dreht das schwarze Logo auf weißem Grund um,
+ 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);
- height: min(1500px, 220vw);
+ top: 4%;
+ 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 {
- width: min(950px, 150vw);
- height: min(950px, 150vw);
+/* Unten links, violett. */
+.verwaltung-logo-bg-5 {
+ 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,