"Ältere Bestellungen"-Knopf steht jetzt ganz oben, vor allen Bestellungen

Auf ausdrücklichen Wunsch: der Knopf war bisher unter allen aktuellen Bestellungen platziert.
Jetzt steht er direkt unter der Überschrift "Meine Bestellungen", noch vor der neuesten
Bestellung — beim Aufklappen erscheinen Suchfeld und ältere Bestellungen also ganz oben,
noch vor der aktuellen Liste. Alle 4 Sprachen.

Rein eine Markup-Verschiebung (das <div class="order-archive"> wandert vor <div id="order-list">
im DOM) — die JavaScript-Logik, die ältere Karten per appendChild() in den Aufklappbereich
verschiebt, funktioniert unabhängig von der Position weiter, da sie über getElementById auf
beide Container zugreift. CSS entsprechend angepasst: margin-top wurde zu margin-bottom, weil
der Abstand jetzt VOR der ersten Bestellkarte gebraucht wird statt danach.

Getestet (Browser): DOM-Reihenfolge in allen 4 Sprachen bestätigt (order-archive vor
order-list), Auf-/Zuklappen weiterhin funktionsfähig, Karten wandern korrekt in den
Archiv-Bereich und wieder zurück, Sichtprüfung per Screenshot.

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

src/pages/ch/konto/angemeldet.astro

@@ -178,6 +178,45 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
       <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
+
+      {/* Bestellungen, die aelter als ein Monat sind, stehen nicht dauerhaft in der Liste, sondern
+          gebuendelt hinter diesem Knopf — sonst wird die Uebersicht mit den Jahren unuebersichtlich
+          lang. Aufgeklappt kann man sie gezielt nach Bestellnummer oder Artikel durchsuchen.
+          WICHTIG: Ob eine Bestellung "aelter als ein Monat" ist, wird ERST IM BROWSER berechnet
+          (siehe Skript unten). Die Seite ist statisch vorgebaut — eine schon beim Bauen berechnete
+          Grenze wuerde mit jedem Tag ungenauer werden.
+          Bewusst GANZ OBEN im Bereich, noch vor der neuesten Bestellung — auf ausdruecklichen
+          Wunsch, damit der Zugang zu aelteren Bestellungen sofort sichtbar ist. */}
+      <div class="order-archive" id="order-archive" hidden>
+        <button
+          type="button"
+          class="order-archive-toggle"
+          id="order-archive-toggle"
+          aria-expanded="false"
+          aria-controls="order-archive-panel"
+          data-label-show={t.accountDash.olderOrdersShow}
+          data-label-hide={t.accountDash.olderOrdersHide}
+        >
+          <span class="order-archive-icon" aria-hidden="true">📦</span>
+          <span class="order-archive-label" id="order-archive-label"></span>
+          <span class="order-archive-chevron" aria-hidden="true">▾</span>
+        </button>
+
+        <div class="order-archive-panel" id="order-archive-panel" hidden>
+          <div class="order-archive-search">
+            <span class="order-archive-search-icon" aria-hidden="true">🔍</span>
+            <input
+              type="search"
+              id="order-archive-search"
+              autocomplete="off"
+              placeholder={t.accountDash.olderOrdersSearch}
+              aria-label={t.accountDash.olderOrdersSearch}
+            />
+          </div>
+          <p class="small order-archive-nohits" id="order-archive-nohits" hidden>{t.accountDash.olderOrdersNoHits}</p>
+        </div>
+      </div>
+
       <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`} data-order-iso={b.iso}>
@@ -288,42 +327,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           </div>
         ))}
       </div>
-
-      {/* Bestellungen, die aelter als ein Monat sind, stehen nicht dauerhaft in der Liste, sondern
-          gebuendelt hinter diesem Knopf — sonst wird die Uebersicht mit den Jahren unuebersichtlich
-          lang. Aufgeklappt kann man sie gezielt nach Bestellnummer oder Artikel durchsuchen.
-          WICHTIG: Ob eine Bestellung "aelter als ein Monat" ist, wird ERST IM BROWSER berechnet
-          (siehe Skript unten). Die Seite ist statisch vorgebaut — eine schon beim Bauen berechnete
-          Grenze wuerde mit jedem Tag ungenauer werden. */}
-      <div class="order-archive" id="order-archive" hidden>
-        <button
-          type="button"
-          class="order-archive-toggle"
-          id="order-archive-toggle"
-          aria-expanded="false"
-          aria-controls="order-archive-panel"
-          data-label-show={t.accountDash.olderOrdersShow}
-          data-label-hide={t.accountDash.olderOrdersHide}
-        >
-          <span class="order-archive-icon" aria-hidden="true">📦</span>
-          <span class="order-archive-label" id="order-archive-label"></span>
-          <span class="order-archive-chevron" aria-hidden="true">▾</span>
-        </button>
-
-        <div class="order-archive-panel" id="order-archive-panel" hidden>
-          <div class="order-archive-search">
-            <span class="order-archive-search-icon" aria-hidden="true">🔍</span>
-            <input
-              type="search"
-              id="order-archive-search"
-              autocomplete="off"
-              placeholder={t.accountDash.olderOrdersSearch}
-              aria-label={t.accountDash.olderOrdersSearch}
-            />
-          </div>
-          <p class="small order-archive-nohits" id="order-archive-nohits" hidden>{t.accountDash.olderOrdersNoHits}</p>
-        </div>
-      </div>
     </div>
   </section>
 

src/pages/en/konto/angemeldet.astro

@@ -178,6 +178,45 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
       <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
+
+      {/* Bestellungen, die aelter als ein Monat sind, stehen nicht dauerhaft in der Liste, sondern
+          gebuendelt hinter diesem Knopf — sonst wird die Uebersicht mit den Jahren unuebersichtlich
+          lang. Aufgeklappt kann man sie gezielt nach Bestellnummer oder Artikel durchsuchen.
+          WICHTIG: Ob eine Bestellung "aelter als ein Monat" ist, wird ERST IM BROWSER berechnet
+          (siehe Skript unten). Die Seite ist statisch vorgebaut — eine schon beim Bauen berechnete
+          Grenze wuerde mit jedem Tag ungenauer werden.
+          Bewusst GANZ OBEN im Bereich, noch vor der neuesten Bestellung — auf ausdruecklichen
+          Wunsch, damit der Zugang zu aelteren Bestellungen sofort sichtbar ist. */}
+      <div class="order-archive" id="order-archive" hidden>
+        <button
+          type="button"
+          class="order-archive-toggle"
+          id="order-archive-toggle"
+          aria-expanded="false"
+          aria-controls="order-archive-panel"
+          data-label-show={t.accountDash.olderOrdersShow}
+          data-label-hide={t.accountDash.olderOrdersHide}
+        >
+          <span class="order-archive-icon" aria-hidden="true">📦</span>
+          <span class="order-archive-label" id="order-archive-label"></span>
+          <span class="order-archive-chevron" aria-hidden="true">▾</span>
+        </button>
+
+        <div class="order-archive-panel" id="order-archive-panel" hidden>
+          <div class="order-archive-search">
+            <span class="order-archive-search-icon" aria-hidden="true">🔍</span>
+            <input
+              type="search"
+              id="order-archive-search"
+              autocomplete="off"
+              placeholder={t.accountDash.olderOrdersSearch}
+              aria-label={t.accountDash.olderOrdersSearch}
+            />
+          </div>
+          <p class="small order-archive-nohits" id="order-archive-nohits" hidden>{t.accountDash.olderOrdersNoHits}</p>
+        </div>
+      </div>
+
       <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`} data-order-iso={b.iso}>
@@ -288,42 +327,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           </div>
         ))}
       </div>
-
-      {/* Bestellungen, die aelter als ein Monat sind, stehen nicht dauerhaft in der Liste, sondern
-          gebuendelt hinter diesem Knopf — sonst wird die Uebersicht mit den Jahren unuebersichtlich
-          lang. Aufgeklappt kann man sie gezielt nach Bestellnummer oder Artikel durchsuchen.
-          WICHTIG: Ob eine Bestellung "aelter als ein Monat" ist, wird ERST IM BROWSER berechnet
-          (siehe Skript unten). Die Seite ist statisch vorgebaut — eine schon beim Bauen berechnete
-          Grenze wuerde mit jedem Tag ungenauer werden. */}
-      <div class="order-archive" id="order-archive" hidden>
-        <button
-          type="button"
-          class="order-archive-toggle"
-          id="order-archive-toggle"
-          aria-expanded="false"
-          aria-controls="order-archive-panel"
-          data-label-show={t.accountDash.olderOrdersShow}
-          data-label-hide={t.accountDash.olderOrdersHide}
-        >
-          <span class="order-archive-icon" aria-hidden="true">📦</span>
-          <span class="order-archive-label" id="order-archive-label"></span>
-          <span class="order-archive-chevron" aria-hidden="true">▾</span>
-        </button>
-
-        <div class="order-archive-panel" id="order-archive-panel" hidden>
-          <div class="order-archive-search">
-            <span class="order-archive-search-icon" aria-hidden="true">🔍</span>
-            <input
-              type="search"
-              id="order-archive-search"
-              autocomplete="off"
-              placeholder={t.accountDash.olderOrdersSearch}
-              aria-label={t.accountDash.olderOrdersSearch}
-            />
-          </div>
-          <p class="small order-archive-nohits" id="order-archive-nohits" hidden>{t.accountDash.olderOrdersNoHits}</p>
-        </div>
-      </div>
     </div>
   </section>
 

src/pages/fr/konto/angemeldet.astro

@@ -178,6 +178,45 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
       <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
+
+      {/* Bestellungen, die aelter als ein Monat sind, stehen nicht dauerhaft in der Liste, sondern
+          gebuendelt hinter diesem Knopf — sonst wird die Uebersicht mit den Jahren unuebersichtlich
+          lang. Aufgeklappt kann man sie gezielt nach Bestellnummer oder Artikel durchsuchen.
+          WICHTIG: Ob eine Bestellung "aelter als ein Monat" ist, wird ERST IM BROWSER berechnet
+          (siehe Skript unten). Die Seite ist statisch vorgebaut — eine schon beim Bauen berechnete
+          Grenze wuerde mit jedem Tag ungenauer werden.
+          Bewusst GANZ OBEN im Bereich, noch vor der neuesten Bestellung — auf ausdruecklichen
+          Wunsch, damit der Zugang zu aelteren Bestellungen sofort sichtbar ist. */}
+      <div class="order-archive" id="order-archive" hidden>
+        <button
+          type="button"
+          class="order-archive-toggle"
+          id="order-archive-toggle"
+          aria-expanded="false"
+          aria-controls="order-archive-panel"
+          data-label-show={t.accountDash.olderOrdersShow}
+          data-label-hide={t.accountDash.olderOrdersHide}
+        >
+          <span class="order-archive-icon" aria-hidden="true">📦</span>
+          <span class="order-archive-label" id="order-archive-label"></span>
+          <span class="order-archive-chevron" aria-hidden="true">▾</span>
+        </button>
+
+        <div class="order-archive-panel" id="order-archive-panel" hidden>
+          <div class="order-archive-search">
+            <span class="order-archive-search-icon" aria-hidden="true">🔍</span>
+            <input
+              type="search"
+              id="order-archive-search"
+              autocomplete="off"
+              placeholder={t.accountDash.olderOrdersSearch}
+              aria-label={t.accountDash.olderOrdersSearch}
+            />
+          </div>
+          <p class="small order-archive-nohits" id="order-archive-nohits" hidden>{t.accountDash.olderOrdersNoHits}</p>
+        </div>
+      </div>
+
       <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`} data-order-iso={b.iso}>
@@ -288,42 +327,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           </div>
         ))}
       </div>
-
-      {/* Bestellungen, die aelter als ein Monat sind, stehen nicht dauerhaft in der Liste, sondern
-          gebuendelt hinter diesem Knopf — sonst wird die Uebersicht mit den Jahren unuebersichtlich
-          lang. Aufgeklappt kann man sie gezielt nach Bestellnummer oder Artikel durchsuchen.
-          WICHTIG: Ob eine Bestellung "aelter als ein Monat" ist, wird ERST IM BROWSER berechnet
-          (siehe Skript unten). Die Seite ist statisch vorgebaut — eine schon beim Bauen berechnete
-          Grenze wuerde mit jedem Tag ungenauer werden. */}
-      <div class="order-archive" id="order-archive" hidden>
-        <button
-          type="button"
-          class="order-archive-toggle"
-          id="order-archive-toggle"
-          aria-expanded="false"
-          aria-controls="order-archive-panel"
-          data-label-show={t.accountDash.olderOrdersShow}
-          data-label-hide={t.accountDash.olderOrdersHide}
-        >
-          <span class="order-archive-icon" aria-hidden="true">📦</span>
-          <span class="order-archive-label" id="order-archive-label"></span>
-          <span class="order-archive-chevron" aria-hidden="true">▾</span>
-        </button>
-
-        <div class="order-archive-panel" id="order-archive-panel" hidden>
-          <div class="order-archive-search">
-            <span class="order-archive-search-icon" aria-hidden="true">🔍</span>
-            <input
-              type="search"
-              id="order-archive-search"
-              autocomplete="off"
-              placeholder={t.accountDash.olderOrdersSearch}
-              aria-label={t.accountDash.olderOrdersSearch}
-            />
-          </div>
-          <p class="small order-archive-nohits" id="order-archive-nohits" hidden>{t.accountDash.olderOrdersNoHits}</p>
-        </div>
-      </div>
     </div>
   </section>
 

src/pages/konto/angemeldet.astro

@@ -179,6 +179,45 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
       <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
+
+      {/* Bestellungen, die aelter als ein Monat sind, stehen nicht dauerhaft in der Liste, sondern
+          gebuendelt hinter diesem Knopf — sonst wird die Uebersicht mit den Jahren unuebersichtlich
+          lang. Aufgeklappt kann man sie gezielt nach Bestellnummer oder Artikel durchsuchen.
+          WICHTIG: Ob eine Bestellung "aelter als ein Monat" ist, wird ERST IM BROWSER berechnet
+          (siehe Skript unten). Die Seite ist statisch vorgebaut — eine schon beim Bauen berechnete
+          Grenze wuerde mit jedem Tag ungenauer werden.
+          Bewusst GANZ OBEN im Bereich, noch vor der neuesten Bestellung — auf ausdruecklichen
+          Wunsch, damit der Zugang zu aelteren Bestellungen sofort sichtbar ist. */}
+      <div class="order-archive" id="order-archive" hidden>
+        <button
+          type="button"
+          class="order-archive-toggle"
+          id="order-archive-toggle"
+          aria-expanded="false"
+          aria-controls="order-archive-panel"
+          data-label-show={t.accountDash.olderOrdersShow}
+          data-label-hide={t.accountDash.olderOrdersHide}
+        >
+          <span class="order-archive-icon" aria-hidden="true">📦</span>
+          <span class="order-archive-label" id="order-archive-label"></span>
+          <span class="order-archive-chevron" aria-hidden="true">▾</span>
+        </button>
+
+        <div class="order-archive-panel" id="order-archive-panel" hidden>
+          <div class="order-archive-search">
+            <span class="order-archive-search-icon" aria-hidden="true">🔍</span>
+            <input
+              type="search"
+              id="order-archive-search"
+              autocomplete="off"
+              placeholder={t.accountDash.olderOrdersSearch}
+              aria-label={t.accountDash.olderOrdersSearch}
+            />
+          </div>
+          <p class="small order-archive-nohits" id="order-archive-nohits" hidden>{t.accountDash.olderOrdersNoHits}</p>
+        </div>
+      </div>
+
       <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`} data-order-iso={b.iso}>
@@ -289,42 +328,6 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
           </div>
         ))}
       </div>
-
-      {/* Bestellungen, die aelter als ein Monat sind, stehen nicht dauerhaft in der Liste, sondern
-          gebuendelt hinter diesem Knopf — sonst wird die Uebersicht mit den Jahren unuebersichtlich
-          lang. Aufgeklappt kann man sie gezielt nach Bestellnummer oder Artikel durchsuchen.
-          WICHTIG: Ob eine Bestellung "aelter als ein Monat" ist, wird ERST IM BROWSER berechnet
-          (siehe Skript unten). Die Seite ist statisch vorgebaut — eine schon beim Bauen berechnete
-          Grenze wuerde mit jedem Tag ungenauer werden. */}
-      <div class="order-archive" id="order-archive" hidden>
-        <button
-          type="button"
-          class="order-archive-toggle"
-          id="order-archive-toggle"
-          aria-expanded="false"
-          aria-controls="order-archive-panel"
-          data-label-show={t.accountDash.olderOrdersShow}
-          data-label-hide={t.accountDash.olderOrdersHide}
-        >
-          <span class="order-archive-icon" aria-hidden="true">📦</span>
-          <span class="order-archive-label" id="order-archive-label"></span>
-          <span class="order-archive-chevron" aria-hidden="true">▾</span>
-        </button>
-
-        <div class="order-archive-panel" id="order-archive-panel" hidden>
-          <div class="order-archive-search">
-            <span class="order-archive-search-icon" aria-hidden="true">🔍</span>
-            <input
-              type="search"
-              id="order-archive-search"
-              autocomplete="off"
-              placeholder={t.accountDash.olderOrdersSearch}
-              aria-label={t.accountDash.olderOrdersSearch}
-            />
-          </div>
-          <p class="small order-archive-nohits" id="order-archive-nohits" hidden>{t.accountDash.olderOrdersNoHits}</p>
-        </div>
-      </div>
     </div>
   </section>
 

src/styles/global.css

@@ -1687,7 +1687,10 @@ a:focus-visible, button:focus-visible {
 /* Aufklappbereich für Bestellungen, die älter als ein Monat sind (siehe konto/angemeldet.astro).
    Bewusst zurückhaltend gestaltet: Es ist ein Archiv-Zugang, kein Hauptinhalt — soll die
    aktuellen Bestellungen darüber nicht optisch überstrahlen. */
-.order-archive { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; }
+/* Steht bewusst GANZ OBEN im Bestellungen-Bereich, noch vor der neuesten Bestellung (siehe
+   konto/angemeldet.astro) — deshalb margin-bottom statt margin-top: der Abstand wird jetzt
+   VOR der ersten Bestellkarte gebraucht, nicht mehr danach. */
+.order-archive { margin: 0.3rem 0 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; }
 .order-archive[hidden] { display: none; }
 .order-archive-toggle {
   align-self: flex-start;