Checkout: Zahlungsart und Kontakt/Lieferadresse nebeneinander statt gestapelt

"1. Zahlungsart" und "2. Kontakt & Lieferadresse" stehen jetzt Seite an
Seite, getrennt durch eine dezente Verlaufslinie mit kleinem
Garnrollen-Symbol in der Mitte (Naht-Motiv, passend zu "Bastelbedarf").
Auf schmalen Bildschirmen fällt die Trennung automatisch zurück auf eine
horizontale Linie und die Spalten stapeln sich normal.

Zusätzlich Feinschliff an der Sidebar und der Bestellübersicht:
- Sidebar (Gutschein/Versandhinweis) bekommt einen farbigen Akzentstreifen
  links und eine gestrichelte "genähte" Trennlinie statt einer nüchternen
  durchgezogenen Linie, plus Lieferwagen-Icon vor "Versandhinweis".
- "Gesamt"-Zeile in der Bestellübersicht wie ein Kassenbon-Abriss
  (gestrichelte Linie) mit dem Betrag in Marken-Verlaufsfarbe.
- Eigene, zum Radiobutton-Stil passende Checkbox-Optik für AGB/Widerruf
  statt der nüchternen Browser-Standard-Kästchen.

Verifiziert per Puppeteer-Screenshot (Desktop + Mobile), keine
Konsolenfehler.

src/pages/en/checkout/index.astro

@@ -18,6 +18,8 @@ const t = useTranslations(lang);
   <section class="section-tight">
     <div class="container checkout-layout">
       <form class="frm card" id="checkout-form">
+        <div class="checkout-split">
+        <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
           <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
@@ -37,7 +39,9 @@ const t = useTranslations(lang);
           </label>
         </div>
 
-        <hr class="divider" />
+        </div>
+        <div class="checkout-split-divider" aria-hidden="true"><span>🧵</span></div>
+        <div class="checkout-split-col">
         <h3>{t.checkout.step1}</h3>
         <div><label for="email">{t.checkout.email}</label><input id="email" type="email" required /></div>
         <div class="grid grid-2">
@@ -59,6 +63,9 @@ const t = useTranslations(lang);
           </select>
         </div>
 
+        </div>
+        </div>
+
         <hr class="divider" />
         <h3>{t.checkout.step3}</h3>
         <div id="checkout-summary" class="checkout-summary"></div>
@@ -85,8 +92,8 @@ const t = useTranslations(lang);
           </div>
           <p class="small" id="coupon-status"></p>
         </div>
-        <hr class="divider" />
-        <h3>{t.checkout.shippingHintTitle}</h3>
+        <hr class="divider stitched" />
+        <h3>🚚 {t.checkout.shippingHintTitle}</h3>
         <p class="small">{t.checkout.shippingHint}</p>
         <a class="small" href="/en/versand-zahlung/">{t.checkout.shippingLink}</a>
       </aside>