From 76db073cb0e07a8a01f2c50faa329ae5e16df801 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 23:12:52 +0200
Subject: [PATCH] =?UTF-8?q?Verwaltung:=20Auswertungs-Kisten=20sind=20jetzt?=
 =?UTF-8?q?=20selbst=20der=20Klick-Ausl=C3=B6ser=20(Accordion=20statt=20Ex?=
 =?UTF-8?q?tra-Knopf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <noreply@anthropic.com>
---
 src/pages/verwaltung/index.astro | 112 ++++++++++++++++---------------
 src/styles/global.css            |  59 ++++++++++++----
 2 files changed, 102 insertions(+), 69 deletions(-)

diff --git a/src/pages/verwaltung/index.astro b/src/pages/verwaltung/index.astro
index 382f651..6515690 100644
--- a/src/pages/verwaltung/index.astro
+++ b/src/pages/verwaltung/index.astro
@@ -137,63 +137,70 @@ const lang: Locale = "de";
       </div>
     </section>
 
-    {/* Auswertung (Bestseller/Herkunft/Stammkundschaft) ist standardmäßig eingeklappt und
-        erscheint per Klick sofort hier, direkt unter den beiden Kisten oben — statt immer
-        Platz auf der Seite zu belegen, bevor man überhaupt Bestellungen zum Auswerten hat. */}
+    {/* Auswertung (Bestseller/Herkunft/Stammkundschaft): jede Kiste ist jetzt SELBST der
+        Klick-Auslöser (Wunsch: "es sollten Kisten sein wo man drauf drückt und dann gehen die
+        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">
-          <span aria-hidden="true">📊</span> Auswertung anzeigen <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>
-        </button>
-
-        <div id="verwaltung-auswertung-wrapper" hidden>
-          <div class="verwaltung-box" style="--box-color: #e3b23c;">
-            <div class="verwaltung-box-head">
+        <div id="verwaltung-auswertung-wrapper">
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #e3b23c;" data-collapsible-box>
+            <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>
+              <span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
+            </button>
             <div class="verwaltung-box-body">
-              <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 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 eine eigene Kachel im selben Stil wie die Bestellstatus-
+                    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>
-              {/* Jede Kategorie ist jetzt eine eigene Kachel im selben Stil wie die
-                  Bestellstatus-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 class="verwaltung-box" style="--box-color: #6ecb8f;">
-            <div class="verwaltung-box-head">
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #6ecb8f;" data-collapsible-box>
+            <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-empty" id="verwaltung-land-empty" style="display:none;">
-                <span class="verwaltung-box-empty-icon" aria-hidden="true">🗺️</span>
-                <p>Noch keine Bestellungen.</p>
-                <p class="small">Sobald Bestellungen eingehen, siehst du hier den Anteil je Land (DE/AT/CH/LU).</p>
+              <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>
+                  <p class="small">Sobald Bestellungen eingehen, siehst du hier den Anteil je Land (DE/AT/CH/LU).</p>
+                </div>
+                <div class="verwaltung-analyse-grid" id="verwaltung-land-grid"></div>
+                <div class="verwaltung-analyse-detail" id="verwaltung-land-detail" hidden></div>
               </div>
-              <div class="verwaltung-analyse-grid" id="verwaltung-land-grid"></div>
-              <div class="verwaltung-analyse-detail" id="verwaltung-land-detail" hidden></div>
             </div>
           </div>
 
-          <div class="verwaltung-box" style="--box-color: var(--c-sale);">
-            <div class="verwaltung-box-head">
+          <div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: var(--c-sale);" data-collapsible-box>
+            <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-empty" id="verwaltung-kunden-empty" style="display:none;">
-                <span class="verwaltung-box-empty-icon" aria-hidden="true">💌</span>
-                <p>Noch keine wiederkehrende Kundschaft.</p>
-                <p class="small">Sobald jemand zum zweiten Mal bestellt, erscheint sie hier — sortiert nach bisherigem Umsatz.</p>
+              <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>
+                  <p class="small">Sobald jemand zum zweiten Mal bestellt, erscheint sie hier — sortiert nach bisherigem Umsatz.</p>
+                </div>
+                <div class="verwaltung-analyse-grid" id="verwaltung-kunden-grid"></div>
+                <div class="verwaltung-analyse-detail" id="verwaltung-kunden-detail" hidden></div>
               </div>
-              <div class="verwaltung-analyse-grid" id="verwaltung-kunden-grid"></div>
-              <div class="verwaltung-analyse-detail" id="verwaltung-kunden-detail" hidden></div>
             </div>
           </div>
         </div>
@@ -857,24 +864,19 @@ 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
-  //    per Klick sofort unter der Bestellstatus-/Kennzahlen-Kiste. ──
-  const auswertungToggleBtn = document.getElementById("verwaltung-auswertung-toggle");
-  const auswertungWrapper = document.getElementById("verwaltung-auswertung-wrapper");
-  auswertungToggleBtn?.addEventListener("click", () => {
-    const eingeklappt = auswertungWrapper.hasAttribute("hidden");
-    if (eingeklappt) {
-      auswertungWrapper.removeAttribute("hidden");
-      auswertungToggleBtn.setAttribute("aria-expanded", "true");
-      auswertungToggleBtn.classList.add("is-open");
-      auswertungToggleBtn.innerHTML = '<span aria-hidden="true">📊</span> Auswertung ausblenden <span class="verwaltung-toggle-chevron" aria-hidden="true">▾</span>';
-      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>';
-    }
+  // ── Auswertung (Bestseller/Herkunft/Stammkundschaft): jede Kiste ist SELBST der Klick-
+  //    Auslöser für ihren eigenen Inhalt — kein separater Knopf mehr davor. Alle drei starten
+  //    eingeklappt (nur Kopfzeile sichtbar) und lassen sich unabhängig voneinander auf-/zuklappen. ──
+  document.querySelectorAll("[data-collapsible-box] > .verwaltung-box-head-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const box = btn.closest("[data-collapsible-box]");
+      const wirdJetztGeoeffnet = box.classList.contains("is-collapsed");
+      box.classList.toggle("is-collapsed");
+      btn.setAttribute("aria-expanded", String(wirdJetztGeoeffnet));
+      if (wirdJetztGeoeffnet) {
+        box.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    });
   });
 
   // ── CSV-Export: exportiert genau die aktuell sichtbare (gefilterte) Liste — für die
diff --git a/src/styles/global.css b/src/styles/global.css
index 60a7ba9..c6b00b5 100644
--- a/src/styles/global.css
+++ b/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-
-   Kiste, die Auswertungs-Kisten selbst bleiben bis zum Klick unsichtbar (siehe [hidden] auf
-   #verwaltung-auswertung-wrapper), damit sie nicht permanent Platz beanspruchen. */
-.verwaltung-auswertung-toggle {
-  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); }
+/* Auswertungs-Kisten (Bestseller/Herkunft/Stammkundschaft) sind jetzt SELBST der Klick-Auslöser
+   für ihren eigenen Inhalt (Wunsch: "es sollten Kisten sein wo man drauf drückt und dann gehen
+   die anderen Sachen auf") — kein separater Knopf mehr davor. Jede startet eingeklappt (nur
+   Kopfzeile sichtbar) und lässt sich unabhängig von den anderen beiden öffnen/schließen. */
 #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