Web-Kauf: Kauf-Block nach oben (jetzt §2, direkt hinter Upload)

Guthaben-Kauf erscheint jetzt gleich unter dem Upload statt ganz unten.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

webseite/demo.html

@@ -312,38 +312,8 @@
       </div>
     </section>
 
-    <section id="ergebnis">
-      <h2><span class="nr">§ 2</span> Ihr Brief in Klartext</h2>
-
-      <div class="brief-karte">
-        <span class="karten-label neutral" id="ergBrieftyp">Brief</span>
-        <p style="margin-top: 6px;"><strong id="ergKern"></strong></p>
-        <p class="ampelzeile" id="ergAmpel" style="display: none;"></p>
-      </div>
-
-      <div class="brief-karte">
-        <span class="karten-label">Einfach erklärt</span>
-        <p id="ergErklaerung" style="white-space: pre-line;"></p>
-      </div>
-
-      <div class="brief-karte" id="ergChecklisteKarte" style="display: none;">
-        <span class="karten-label neutral">Das müssen Sie tun</span>
-        <div id="ergCheckliste"></div>
-      </div>
-
-      <div class="brief-karte" id="ergBegriffeKarte" style="display: none;">
-        <span class="karten-label neutral">Schwere Wörter erklärt</span>
-        <div id="ergBegriffe"></div>
-      </div>
-
-      <p class="hinweis-recht">
-        ⚖️ BehördenKlar erklärt Briefe, ersetzt aber keine Rechtsberatung. Bei
-        wichtigen Entscheidungen hilft eine Beratungsstelle oder ein Anwalt.
-      </p>
-    </section>
-
     <section id="kaufBlock" style="display: none;">
-      <h2><span class="nr">§ 3</span> Guthaben kaufen &amp; weiter nutzen</h2>
+      <h2><span class="nr">§ 2</span> Guthaben kaufen &amp; sofort nutzen</h2>
       <div class="antrag">
         <p class="formular-kopf">Im Browser nutzen · ohne App Store</p>
         <h3 style="font-size: 24px; line-height: 1.3;">Guthaben kaufen — sofort loslegen</h3>
@@ -373,6 +343,36 @@
       </div>
     </section>
 
+    <section id="ergebnis">
+      <h2><span class="nr">§ 3</span> Ihr Brief in Klartext</h2>
+
+      <div class="brief-karte">
+        <span class="karten-label neutral" id="ergBrieftyp">Brief</span>
+        <p style="margin-top: 6px;"><strong id="ergKern"></strong></p>
+        <p class="ampelzeile" id="ergAmpel" style="display: none;"></p>
+      </div>
+
+      <div class="brief-karte">
+        <span class="karten-label">Einfach erklärt</span>
+        <p id="ergErklaerung" style="white-space: pre-line;"></p>
+      </div>
+
+      <div class="brief-karte" id="ergChecklisteKarte" style="display: none;">
+        <span class="karten-label neutral">Das müssen Sie tun</span>
+        <div id="ergCheckliste"></div>
+      </div>
+
+      <div class="brief-karte" id="ergBegriffeKarte" style="display: none;">
+        <span class="karten-label neutral">Schwere Wörter erklärt</span>
+        <div id="ergBegriffe"></div>
+      </div>
+
+      <p class="hinweis-recht">
+        ⚖️ BehördenKlar erklärt Briefe, ersetzt aber keine Rechtsberatung. Bei
+        wichtigen Entscheidungen hilft eine Beratungsstelle oder ein Anwalt.
+      </p>
+    </section>
+
     <section id="werbung" style="display: none;">
       <h2><span class="nr">§ 4</span> Wie geht es weiter?</h2>
       <div class="antrag">