From 3c2e5c24ae31efe2a764f5bf4d9258a8f853f16c Mon Sep 17 00:00:00 2001
From: JUSN <justin@webklar.com>
Date: Tue, 18 Aug 2026 19:52:49 +0200
Subject: [PATCH] =?UTF-8?q?Web-Kauf:=20Kauf-Block=20nach=20oben=20(jetzt?=
 =?UTF-8?q?=20=C2=A72,=20direkt=20hinter=20Upload)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 webseite/demo.html | 62 +++++++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/webseite/demo.html b/webseite/demo.html
index 05c82a2..da1aa5c 100644
--- a/webseite/demo.html
+++ b/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">