Verwaltung: alle Kisten deutlich aufgewertet ("speziell speziell speziell")

Jede der 6 Kisten (Bestellstatus, Kennzahlen, Bestseller je Kategorie, Herkunft,
Stammkundschaft, Alle Bestellungen) bekommt jetzt:
- einen schimmernden Aurora-Rand in der eigenen Box-Farbe (derselbe Verlaufs-
  Trick wie beim Hero-Kopf, nur pro Kiste individuell eingefärbt)
- ihr eigenes Icon riesig und ganz dezent als Wasserzeichen im Hintergrund
- einen "Radar-Ping"-Ring, der leise vom Icon-Abzeichen ausgeht
- eine kleine farbige Eyebrow-Kennzeichnung über dem Titel (z.B. "TOP-VERKÄUFE",
  "GEOGRAFIE", "TREUE & WIEDERKEHR")

Die Kennzahlen-Kacheln bekommen zusätzlich einen Lichtstreif, der beim Hover
einmal quer durchläuft. Alles respektiert prefers-reduced-motion.

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

src/pages/verwaltung/index.astro

@@ -64,10 +64,13 @@ const lang: Locale = "de";
       <div class="container">
         {/* Jede zusammengehörige Gruppe bekommt jetzt ihre eigene, farblich eigenständige "Kiste"
             (siehe .verwaltung-box in global.css) — statt loser Kacheln/Absätze auf der Seite. */}
-        <div class="verwaltung-box" style="--box-color: var(--c-accent);">
+        <div class="verwaltung-box" style="--box-color: var(--c-accent);" data-icon="📊">
           <div class="verwaltung-box-head">
             <span class="verwaltung-box-icon" aria-hidden="true">📊</span>
-            <h2>Bestellstatus</h2>
+            <div class="verwaltung-box-headtext">
+              <span class="verwaltung-box-kicker">Live-Überblick</span>
+              <h2>Bestellstatus</h2>
+            </div>
           </div>
           <div class="verwaltung-box-body">
             <div class="verwaltung-stat-grid">
@@ -104,10 +107,13 @@ const lang: Locale = "de";
             wichtig sind: wie viel kommt gerade neu rein, und wie hoch ist der durchschnittliche
             Bestellwert (wichtig für Preis-/Werbeentscheidungen). "Heute"/"7 Tage" sind zusätzlich
             anklickbar und setzen direkt den Zeitraum-Filter unten. */}
-        <div class="verwaltung-box" style="--box-color: #9b7fd6;">
+        <div class="verwaltung-box" style="--box-color: #9b7fd6;" data-icon="📈">
           <div class="verwaltung-box-head">
             <span class="verwaltung-box-icon" aria-hidden="true">📈</span>
-            <h2>Kennzahlen</h2>
+            <div class="verwaltung-box-headtext">
+              <span class="verwaltung-box-kicker">Performance</span>
+              <h2>Kennzahlen</h2>
+            </div>
           </div>
           <div class="verwaltung-box-body">
             <div class="verwaltung-stat-grid verwaltung-stat-grid-secondary">
@@ -148,10 +154,13 @@ const lang: Locale = "de";
             Bestellstatus-/Kennzahlen-Kisten oben (nicht in einer eigenen <section>), sonst
             addieren sich die Section-Innenabstände zu einer viel zu großen Lücke dazwischen. */}
         <div id="verwaltung-auswertung-wrapper">
-          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #e3b23c;" data-collapsible-box>
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #e3b23c;" data-collapsible-box data-icon="🏆">
             <button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
               <span class="verwaltung-box-icon" aria-hidden="true">🏆</span>
-              <h2>Bestseller je Kategorie</h2>
+              <div class="verwaltung-box-headtext">
+                <span class="verwaltung-box-kicker">Top-Verkäufe</span>
+                <h2>Bestseller je Kategorie</h2>
+              </div>
               <span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
             </button>
             <div class="verwaltung-box-body">
@@ -169,10 +178,13 @@ const lang: Locale = "de";
             </div>
           </div>
 
-          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #6ecb8f;" data-collapsible-box>
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #6ecb8f;" data-collapsible-box data-icon="🌍">
             <button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
               <span class="verwaltung-box-icon" aria-hidden="true">🌍</span>
-              <h2>Herkunft der Bestellungen</h2>
+              <div class="verwaltung-box-headtext">
+                <span class="verwaltung-box-kicker">Geografie</span>
+                <h2>Herkunft der Bestellungen</h2>
+              </div>
               <span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
             </button>
             <div class="verwaltung-box-body">
@@ -188,10 +200,13 @@ const lang: Locale = "de";
             </div>
           </div>
 
-          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: var(--c-sale);" data-collapsible-box>
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: var(--c-sale);" data-collapsible-box data-icon="👑">
             <button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
               <span class="verwaltung-box-icon" aria-hidden="true">👑</span>
-              <h2>Stammkundschaft</h2>
+              <div class="verwaltung-box-headtext">
+                <span class="verwaltung-box-kicker">Treue &amp; Wiederkehr</span>
+                <h2>Stammkundschaft</h2>
+              </div>
               <span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
             </button>
             <div class="verwaltung-box-body">
@@ -210,10 +225,13 @@ const lang: Locale = "de";
 
         {/* Bewusst in DERSELBEN Section wie die Kisten oben (nicht in einer eigenen <section>) —
             sonst addieren sich die Section-Innenabstände wieder zu einer viel zu großen Lücke. */}
-        <div class="verwaltung-box" style="--box-color: var(--c-accent);">
+        <div class="verwaltung-box" style="--box-color: var(--c-accent);" data-icon="📦">
           <div class="verwaltung-box-head">
             <span class="verwaltung-box-icon" aria-hidden="true">📦</span>
-            <h2>Alle Bestellungen</h2>
+            <div class="verwaltung-box-headtext">
+              <span class="verwaltung-box-kicker">Vollständige Liste</span>
+              <h2>Alle Bestellungen</h2>
+            </div>
           </div>
           <div class="verwaltung-box-body">
             <div class="verwaltung-new-banner" id="verwaltung-new-banner" style="display:none;">

src/styles/global.css

@@ -2870,23 +2870,34 @@ a:focus-visible, button:focus-visible {
 
 /* "Kisten" — jede zusammengehörige Gruppe (Bestellstatus, Kennzahlen, Bestellliste, Bestseller,
    Herkunft, Stammkundschaft) bekommt ihre eigene, klar abgegrenzte Box mit eigener Akzentfarbe
-   (--box-color, pro Kiste per inline style gesetzt) statt lose auf der Seite zu stehen — auf
+   (--box-color, pro Kiste per inline style gesetzt) statt lose auf der Seite zu stehen. Auf
-   Wunsch ("alles was zueinander passt in einer Kiste, richtig geil speziell") deutlich
+   Wunsch ("alle Kisten sollen speziell speziell speziell sein, überrasch mich") noch eine Stufe
-   eigenständiger gestaltet als eine normale .card: eigener farbiger Eckenschein, eigenes
+   weiter aufgewertet: der Rand schimmert jetzt wie eine Aurora in der jeweiligen Box-Farbe
-   Icon-Abzeichen vor dem Titel, dezent pulsierender Rand. */
+   (derselbe Verlaufs-Trick wie beim Hero-Kopf oben auf der Seite, siehe .verwaltung-hero), jede
+   Box trägt ihr eigenes Icon zusätzlich riesig und ganz dezent als Wasserzeichen im Hintergrund
+   (per data-icon-Attribut, kein Bild nötig), und das Icon-Abzeichen sendet einen leisen
+   "Radar-Ping"-Ring aus — zusammen wirkt jede Kiste wie eine eigenständige kleine Instrumenten-
+   Kachel statt einer austauschbaren grauen Box. */
 .verwaltung-box {
   position: relative;
   overflow: hidden;
   border-radius: var(--radius-l);
-  border: 1.5px solid color-mix(in srgb, var(--box-color, var(--c-accent)) 38%, transparent);
+  border: 1.5px solid transparent;
-  background: linear-gradient(155deg, color-mix(in srgb, var(--box-color, var(--c-accent)) 9%, var(--c-anthracite-light)), var(--c-anthracite));
+  background:
+    linear-gradient(155deg, color-mix(in srgb, var(--box-color, var(--c-accent)) 9%, var(--c-anthracite-light)), var(--c-anthracite)) padding-box,
+    linear-gradient(120deg, var(--box-color, var(--c-accent)), color-mix(in srgb, var(--box-color, var(--c-accent)) 35%, white), var(--box-color, var(--c-accent))) border-box;
+  background-size: 100% 100%, 300% 100%;
   padding: 1.6rem 1.7rem;
   margin: 1.4rem 0;
-  animation: verwaltung-box-glow 3.4s ease-in-out infinite;
+  animation: verwaltung-box-border-shift 9s ease-in-out infinite, verwaltung-box-glow 3.4s ease-in-out infinite;
+}
+@keyframes verwaltung-box-border-shift {
+  0%, 100% { background-position: 0 0, 0% 50%; }
+  50% { background-position: 0 0, 100% 50%; }
 }
 @keyframes verwaltung-box-glow {
   0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--box-color, var(--c-accent)) 22%, transparent); }
-  50% { box-shadow: 0 0 22px -8px color-mix(in srgb, var(--box-color, var(--c-accent)) 55%, transparent); }
+  50% { box-shadow: 0 0 26px -6px color-mix(in srgb, var(--box-color, var(--c-accent)) 60%, transparent); }
 }
 .verwaltung-box::before {
   content: "";
@@ -2898,6 +2909,21 @@ a:focus-visible, button:focus-visible {
   background: radial-gradient(circle, color-mix(in srgb, var(--box-color, var(--c-accent)) 30%, transparent), transparent 70%);
   pointer-events: none;
 }
+/* Riesiges, kaum sichtbares Icon-Wasserzeichen — nutzt dasselbe Icon wie das Abzeichen (über
+   data-icon), damit jede Kiste eine eigene "Textur" bekommt, ganz ohne zusätzliche Bilddateien. */
+.verwaltung-box::after {
+  content: attr(data-icon);
+  position: absolute;
+  right: -1rem;
+  bottom: -2.2rem;
+  font-size: 8.5rem;
+  line-height: 1;
+  opacity: 0.06;
+  transform: rotate(-10deg);
+  filter: grayscale(0.4);
+  pointer-events: none;
+  z-index: 0;
+}
 .verwaltung-box-head {
   display: flex;
   align-items: center;
@@ -2906,6 +2932,15 @@ a:focus-visible, button:focus-visible {
   position: relative;
   z-index: 1;
 }
+.verwaltung-box-headtext { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
+.verwaltung-box-kicker {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--box-color, var(--c-accent)) 80%, white);
+  opacity: 0.85;
+}
 .verwaltung-box-icon {
   display: flex;
   align-items: center;
@@ -2917,10 +2952,27 @@ a:focus-visible, button:focus-visible {
   font-size: 1.3rem;
   background: color-mix(in srgb, var(--box-color, var(--c-accent)) 24%, transparent);
   border: 1px solid color-mix(in srgb, var(--box-color, var(--c-accent)) 55%, transparent);
+  position: relative;
 }
-.verwaltung-box-head h2 { margin: 0; font-size: 1.3rem; }
+.verwaltung-box-icon::before {
+  content: "";
+  position: absolute;
+  inset: -6px;
+  border-radius: 50%;
+  border: 1.5px solid color-mix(in srgb, var(--box-color, var(--c-accent)) 65%, transparent);
+  animation: verwaltung-box-icon-ping 2.8s ease-out infinite;
+  pointer-events: none;
+}
+@keyframes verwaltung-box-icon-ping {
+  0% { transform: scale(0.75); opacity: 0.75; }
+  70%, 100% { transform: scale(1.4); opacity: 0; }
+}
+.verwaltung-box-head h2, .verwaltung-box-headtext h2 { margin: 0; font-size: 1.3rem; }
 .verwaltung-box-body { position: relative; z-index: 1; }
-@media (prefers-reduced-motion: reduce) { .verwaltung-box { animation: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .verwaltung-box,
+  .verwaltung-box-icon::before { animation: none; }
+}
 
 /* Leerzustände innerhalb einer Kiste — großes Icon + kurzer, freundlicher Text statt nacktem
    Fließtext, damit auch "noch nichts da" nicht trostlos wirkt. */
@@ -2970,7 +3022,7 @@ a:focus-visible, button:focus-visible {
   text-align: left;
   cursor: pointer;
 }
-.verwaltung-box-head-btn h2 { flex: 1; }
+.verwaltung-box-head-btn .verwaltung-box-headtext { flex: 1; }
 .verwaltung-box-chevron {
   flex-shrink: 0;
   font-size: 1.1rem;
@@ -3028,6 +3080,8 @@ a:focus-visible, button:focus-visible {
 }
 @media (prefers-reduced-motion: reduce) { #stat-attention-tile { animation: none; } }
 .verwaltung-stat-tile {
+  position: relative;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -3041,6 +3095,22 @@ a:focus-visible, button:focus-visible {
   color: inherit;
 }
 .verwaltung-stat-tile:hover { transform: translateY(-3px); border-color: var(--c-accent); }
+/* Kleiner Lichtstreif, der beim Hover einmal quer über die Kachel läuft — dezente "Premium"-
+   Mikro-Interaktion statt einer starren Karte. */
+.verwaltung-stat-tile::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -60%;
+  width: 40%;
+  height: 100%;
+  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.16), transparent);
+  transform: skewX(-20deg);
+  transition: left 0.6s var(--ease);
+  pointer-events: none;
+}
+.verwaltung-stat-tile:hover::after { left: 120%; }
+@media (prefers-reduced-motion: reduce) { .verwaltung-stat-tile::after { transition: none; display: none; } }
 .verwaltung-stat-tile-highlight { border-color: color-mix(in srgb, #e3b23c 45%, transparent); background: color-mix(in srgb, #e3b23c 10%, var(--c-anthracite-light)); cursor: default; }
 .verwaltung-stat-tile-highlight:hover { transform: none; border-color: color-mix(in srgb, #e3b23c 45%, transparent); }
 .verwaltung-stat-icon { font-size: 1.6rem; }