Verwaltung: Auswertungs-Kisten sind jetzt selbst der Klick-Auslöser (Accordion statt Extra-Knopf

Der separate "Auswertung anzeigen"-Knopf war nicht der Plan — stattdessen sind
jetzt die drei Kisten (Bestseller je Kategorie / Herkunft der Bestellungen /
Stammkundschaft) selbst klickbar und klappen unabhängig voneinander ihren
eigenen Inhalt auf, per sanfter CSS-Grid-Animation und rotierendem Chevron.
Startzustand: alle drei eingeklappt (nur Kopfzeile sichtbar).

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

src/pages/verwaltung/index.astro

@@ -137,40 +137,43 @@ const lang: Locale = "de";
       </div>
     </section>
 
-    {/* Auswertung (Bestseller/Herkunft/Stammkundschaft) ist standardmäßig eingeklappt und
+    {/* Auswertung (Bestseller/Herkunft/Stammkundschaft): jede Kiste ist jetzt SELBST der
-        erscheint per Klick sofort hier, direkt unter den beiden Kisten oben — statt immer
+        Klick-Auslöser (Wunsch: "es sollten Kisten sein wo man drauf drückt und dann gehen die
-        Platz auf der Seite zu belegen, bevor man überhaupt Bestellungen zum Auswerten hat. */}
+        anderen Sachen auf") — kein separater Knopf mehr davor. Jede Box startet eingeklappt
+        (nur Kopfzeile sichtbar) und klappt beim Klick auf die Kopfzeile ihren eigenen Inhalt auf,
+        unabhängig von den anderen beiden Kisten. */}
     <section class="section-tight">
       <div class="container">
-        <button type="button" class="btn btn-outline verwaltung-auswertung-toggle" id="verwaltung-auswertung-toggle" aria-expanded="false" aria-controls="verwaltung-auswertung-wrapper">
+        <div id="verwaltung-auswertung-wrapper">
-          <span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #e3b23c;" data-collapsible-box>
-        </button>
+            <button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
-
-        <div id="verwaltung-auswertung-wrapper" hidden>
-          <div class="verwaltung-box" style="--box-color: #e3b23c;">
-            <div class="verwaltung-box-head">
               <span class="verwaltung-box-icon" aria-hidden="true">🏆</span>
               <h2>Bestseller je Kategorie</h2>
-            </div>
+              <span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
+            </button>
             <div class="verwaltung-box-body">
+              <div class="verwaltung-box-body-inner">
                 <div class="verwaltung-box-empty" id="verwaltung-kat-empty" style="display:none;">
                   <span class="verwaltung-box-empty-icon" aria-hidden="true">🧶</span>
                   <p>Noch keine ausgewerteten Verkäufe.</p>
                   <p class="small">Hier siehst du bald, welche Produkte je Kategorie am besten laufen (stornierte Bestellungen zählen nicht mit).</p>
                 </div>
-              {/* Jede Kategorie ist jetzt eine eigene Kachel im selben Stil wie die
+                {/* Jede Kategorie ist eine eigene Kachel im selben Stil wie die Bestellstatus-
-                  Bestellstatus-Kacheln oben — Klick öffnet direkt darunter die volle Produktliste. */}
+                    Kacheln oben — Klick öffnet direkt darunter die volle Produktliste. */}
                 <div class="verwaltung-analyse-grid" id="verwaltung-kat-grid"></div>
                 <div class="verwaltung-analyse-detail" id="verwaltung-kat-detail" hidden></div>
               </div>
             </div>
+          </div>
 
-          <div class="verwaltung-box" style="--box-color: #6ecb8f;">
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #6ecb8f;" data-collapsible-box>
-            <div class="verwaltung-box-head">
+            <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>
+              <span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
+            </button>
             <div class="verwaltung-box-body">
+              <div class="verwaltung-box-body-inner">
                 <div class="verwaltung-box-empty" id="verwaltung-land-empty" style="display:none;">
                   <span class="verwaltung-box-empty-icon" aria-hidden="true">🗺️</span>
                   <p>Noch keine Bestellungen.</p>
@@ -180,13 +183,16 @@ const lang: Locale = "de";
                 <div class="verwaltung-analyse-detail" id="verwaltung-land-detail" hidden></div>
               </div>
             </div>
+          </div>
 
-          <div class="verwaltung-box" style="--box-color: var(--c-sale);">
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: var(--c-sale);" data-collapsible-box>
-            <div class="verwaltung-box-head">
+            <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>
+              <span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
+            </button>
             <div class="verwaltung-box-body">
+              <div class="verwaltung-box-body-inner">
                 <div class="verwaltung-box-empty" id="verwaltung-kunden-empty" style="display:none;">
                   <span class="verwaltung-box-empty-icon" aria-hidden="true">💌</span>
                   <p>Noch keine wiederkehrende Kundschaft.</p>
@@ -198,6 +204,7 @@ const lang: Locale = "de";
             </div>
           </div>
         </div>
+      </div>
     </section>
 
     <section class="section-tight">
@@ -857,25 +864,20 @@ const lang: Locale = "de";
   document.getElementById("verwaltung-new-refresh-btn")?.addEventListener("click", ladeUndRendere);
   document.getElementById("verwaltung-retry-btn")?.addEventListener("click", ladeUndRendere);
 
-  // ── Auswertung (Bestseller/Herkunft/Stammkundschaft): standardmäßig eingeklappt, erscheint
+  // ── Auswertung (Bestseller/Herkunft/Stammkundschaft): jede Kiste ist SELBST der Klick-
-  //    per Klick sofort unter der Bestellstatus-/Kennzahlen-Kiste. ──
+  //    Auslöser für ihren eigenen Inhalt — kein separater Knopf mehr davor. Alle drei starten
-  const auswertungToggleBtn = document.getElementById("verwaltung-auswertung-toggle");
+  //    eingeklappt (nur Kopfzeile sichtbar) und lassen sich unabhängig voneinander auf-/zuklappen. ──
-  const auswertungWrapper = document.getElementById("verwaltung-auswertung-wrapper");
+  document.querySelectorAll("[data-collapsible-box] > .verwaltung-box-head-btn").forEach((btn) => {
-  auswertungToggleBtn?.addEventListener("click", () => {
+    btn.addEventListener("click", () => {
-    const eingeklappt = auswertungWrapper.hasAttribute("hidden");
+      const box = btn.closest("[data-collapsible-box]");
-    if (eingeklappt) {
+      const wirdJetztGeoeffnet = box.classList.contains("is-collapsed");
-      auswertungWrapper.removeAttribute("hidden");
+      box.classList.toggle("is-collapsed");
-      auswertungToggleBtn.setAttribute("aria-expanded", "true");
+      btn.setAttribute("aria-expanded", String(wirdJetztGeoeffnet));
-      auswertungToggleBtn.classList.add("is-open");
+      if (wirdJetztGeoeffnet) {
-      auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung ausblenden <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
+        box.scrollIntoView({ behavior: "smooth", block: "start" });
-      auswertungWrapper.scrollIntoView({ behavior: "smooth", block: "start" });
-    } else {
-      auswertungWrapper.setAttribute("hidden", "");
-      auswertungToggleBtn.setAttribute("aria-expanded", "false");
-      auswertungToggleBtn.classList.remove("is-open");
-      auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
       }
     });
+  });
 
   // ── CSV-Export: exportiert genau die aktuell sichtbare (gefilterte) Liste — für die
   //    Buchhaltung/Steuer, komplett clientseitig, keine Serverkosten. ──

src/styles/global.css

@@ -2937,21 +2937,52 @@ a:focus-visible, button:focus-visible {
 .verwaltung-box-empty p { margin: 0; }
 .verwaltung-box-empty p:first-of-type { color: var(--c-text); font-weight: 600; font-size: 1.02rem; }
 
-/* Ein-/Ausklapp-Knopf für die Auswertung — steht direkt unter der Bestellstatus-/Kennzahlen-
+/* Auswertungs-Kisten (Bestseller/Herkunft/Stammkundschaft) sind jetzt SELBST der Klick-Auslöser
-   Kiste, die Auswertungs-Kisten selbst bleiben bis zum Klick unsichtbar (siehe [hidden] auf
+   für ihren eigenen Inhalt (Wunsch: "es sollten Kisten sein wo man drauf drückt und dann gehen
-   #verwaltung-auswertung-wrapper), damit sie nicht permanent Platz beanspruchen. */
+   die anderen Sachen auf") — kein separater Knopf mehr davor. Jede startet eingeklappt (nur
-.verwaltung-auswertung-toggle {
+   Kopfzeile sichtbar) und lässt sich unabhängig von den anderen beiden öffnen/schließen. */
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
-  border-color: color-mix(in srgb, #e3b23c 45%, transparent);
-  color: var(--c-text);
-}
-.verwaltung-auswertung-toggle:hover { border-color: #e3b23c; background: color-mix(in srgb, #e3b23c 12%, transparent); }
-.verwaltung-toggle-chevron { transition: transform 0.2s var(--ease); }
-.verwaltung-auswertung-toggle.is-open .verwaltung-toggle-chevron { transform: rotate(180deg); }
 #verwaltung-auswertung-wrapper { margin-top: 1rem; }
-#verwaltung-auswertung-wrapper[hidden] { display: none; }
+.verwaltung-box-collapsible .verwaltung-box-body {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.25s var(--ease);
+}
+.verwaltung-box-collapsible .verwaltung-box-body-inner {
+  min-height: 0;
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity 0.2s var(--ease);
+}
+.verwaltung-box-collapsible.is-collapsed .verwaltung-box-body { grid-template-rows: 0fr; }
+.verwaltung-box-collapsible.is-collapsed .verwaltung-box-body-inner { opacity: 0; }
+.verwaltung-box-collapsible.is-collapsed .verwaltung-box-head-btn { margin-bottom: 0; }
+.verwaltung-box-head-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0 0 1.1rem;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.verwaltung-box-head-btn h2 { flex: 1; }
+.verwaltung-box-chevron {
+  flex-shrink: 0;
+  font-size: 1.1rem;
+  color: var(--c-text-muted);
+  transition: transform 0.25s var(--ease);
+}
+.verwaltung-box-collapsible.is-collapsed .verwaltung-box-chevron { transform: rotate(-90deg); }
+.verwaltung-box-collapsible:not(.is-collapsed) .verwaltung-box-head-btn { color: var(--c-text); }
+@media (prefers-reduced-motion: reduce) {
+  .verwaltung-box-collapsible .verwaltung-box-body,
+  .verwaltung-box-chevron { transition: none; }
+}
 
 /* Hero-Kopf: dieselbe "besondere" Formsprache wie die anderen Premium-Karten der Seite
    (wanderndes Verlaufslicht + pulsierender Rand + Funkeln), passend zu einer Seite, die "alles