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/ch/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="/ch/versand-zahlung/">{t.checkout.shippingLink}</a>
       </aside>

src/pages/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="/versand-zahlung/">{t.checkout.shippingLink}</a>
       </aside>

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>

src/pages/fr/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="/fr/versand-zahlung/">{t.checkout.shippingLink}</a>
       </aside>

src/styles/global.css

@@ -943,6 +943,77 @@ a:focus-visible, button:focus-visible {
 /* Checkout */
 .checkout-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
 
+/* "1. Zahlungsart" und "2. Kontakt & Lieferadresse" nebeneinander statt gestapelt, getrennt
+   durch eine dezente Verlaufslinie mit kleinem Garnrollen-Symbol in der Mitte — spielt auf
+   "Bastelbedarf" an (wie eine Naht zwischen zwei Stoffteilen), bleibt aber ruhig & professionell. */
+.checkout-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.7rem; align-items: start; }
+.checkout-split-col h3:first-child { margin-top: 0; }
+.checkout-split-divider {
+  align-self: stretch;
+  position: relative;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.checkout-split-divider::before {
+  content: "";
+  position: absolute;
+  top: 0.2rem;
+  bottom: 0.2rem;
+  left: 50%;
+  width: 1px;
+  background: linear-gradient(
+    180deg,
+    transparent,
+    color-mix(in srgb, var(--c-accent) 55%, transparent) 12%,
+    color-mix(in srgb, var(--c-purple-glow) 55%, transparent) 50%,
+    color-mix(in srgb, var(--c-accent) 55%, transparent) 88%,
+    transparent
+  );
+}
+.checkout-split-divider span {
+  position: relative;
+  z-index: 1;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--c-anthracite);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
+  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--c-accent) 45%, transparent);
+  font-size: 0.95rem;
+}
+@media (max-width: 760px) {
+  .checkout-split { grid-template-columns: 1fr; gap: 0; }
+  .checkout-split-divider { width: auto; min-height: 0; height: 44px; margin: 0.2rem 0; }
+  .checkout-split-divider::before { top: 50%; bottom: auto; left: 0.2rem; right: 0.2rem; width: auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent); }
+}
+
+/* Sidebar (Gutschein + Versandhinweis): dezenter Akzentstreifen links + "genähte" gestrichelte
+   Trennung zwischen den beiden Blöcken statt einer nüchternen durchgezogenen Linie. */
+.checkout-aside { position: relative; padding-left: 1.9rem; }
+.checkout-aside::after {
+  content: "";
+  position: absolute;
+  top: 1.5rem;
+  bottom: 1.5rem;
+  left: 1.05rem;
+  width: 3px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, var(--c-accent), var(--c-purple-glow) 55%, var(--c-sale));
+  opacity: 0.85;
+}
+.checkout-aside .coupon-row label { font-weight: 700; color: var(--c-text); font-size: 0.95rem; }
+.checkout-aside h3 { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5em; }
+.checkout-aside hr.stitched {
+  border: none;
+  border-top: 1.5px dashed rgba(244, 241, 247, 0.22);
+  margin: 1.2rem 0;
+}
+
 /* Zahlungsart als richtige, klickbare Auswahlkarten statt Standard-Radiobuttons — passend zum
    restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). */
 .payment-options { display: grid; gap: 0.85rem; }
@@ -1018,7 +1089,52 @@ a:focus-visible, button:focus-visible {
 .pay-option:has(input:checked) span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }
 
 .checkout-summary .row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.35rem 0; color: var(--c-text-muted); }
-.checkout-summary .row.total { color: var(--c-text); font-weight: 700; font-size: 1.1rem; padding-top: 0.6rem; margin-top: 0.3rem; border-top: 1px solid rgba(244, 241, 247, 0.1); }
+
+/* "Gesamt"-Zeile wie ein Kassenbon-Abriss: gestrichelte Trennlinie + Summe in Marken-Verlauf,
+   damit der Endbetrag klar heraussticht statt einfach nur fett zu sein. */
+.checkout-summary .row.total {
+  font-weight: 700;
+  font-size: 1.3rem;
+  padding-top: 0.9rem;
+  margin-top: 0.5rem;
+  border-top: 1.5px dashed rgba(244, 241, 247, 0.22);
+}
+.checkout-summary .row.total span:first-child { color: var(--c-text); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; font-weight: 700; }
+.checkout-summary .row.total span:last-child {
+  background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Eigene, zum Radio-Button passende Checkbox statt nüchternem Browser-Kästchen. */
+.frm .checkbox-row input[type="checkbox"] {
+  appearance: none;
+  width: 21px;
+  height: 21px;
+  border-radius: 6px;
+  border: 2px solid rgba(244, 241, 247, 0.3);
+  flex-shrink: 0;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
+}
+.frm .checkbox-row input[type="checkbox"]::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 16%, 80% 0%, 43% 68%);
+  transform: scale(0);
+  transition: transform 0.15s var(--ease);
+  background: #08181c;
+}
+.frm .checkbox-row input[type="checkbox"]:checked {
+  border-color: var(--c-accent);
+  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
+}
+.frm .checkbox-row input[type="checkbox"]:checked::before { transform: scale(1); }
+
 @media (max-width: 800px) { .checkout-layout { grid-template-columns: 1fr; } }
 .danke { max-width: 560px; margin-inline: auto; }