Warenkorb & Checkout optisch deutlich hochwertiger: echte Produktfotos im Warenkorb, elegante Pillen-Mengensteuerung, Zahlungsart jetzt als auswählbare Karten mit Icons und Leucht-Rand statt Standard-Radiobuttons

src/pages/ch/checkout/index.astro

@@ -42,9 +42,21 @@ const t = useTranslations(lang);
         <hr class="divider" />
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option"><input type="radio" name="pay" value="paypal" checked /> PayPal</label>
-          <label class="pay-option"><input type="radio" name="pay" value="klarna" /> Klarna</label>
-          <label class="pay-option"><input type="radio" name="pay" value="ueberweisung" /> {t.checkout.bankTransfer}</label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">🅿️</span>
+            <span>PayPal</span>
+            <input type="radio" name="pay" value="paypal" checked />
+          </label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">💳</span>
+            <span>Klarna</span>
+            <input type="radio" name="pay" value="klarna" />
+          </label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">🏦</span>
+            <span>{t.checkout.bankTransfer}</span>
+            <input type="radio" name="pay" value="ueberweisung" />
+          </label>
         </div>
 
         <hr class="divider" />

src/pages/ch/warenkorb/index.astro

@@ -24,10 +24,10 @@ const t = useTranslations(lang);
       <div id="cart-content" class="cart-layout" style="display:none;">
         <div class="card cart-items" id="cart-items"></div>
         <aside class="card cart-summary">
-          <h3>{t.cart.subtotal}</h3>
+          <h3>🧾 {t.cart.subtotal}</h3>
           <div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
           <div class="summary-row"><span>{t.cart.shipping}</span><span id="sum-shipping">{t.cart.shippingCalculated}</span></div>
-          <p class="small" id="shipping-hint"></p>
+          <p class="free-shipping-badge" id="shipping-hint"></p>
           <hr class="divider" />
           <div class="summary-row total"><span>{t.cart.total}</span><span id="sum-total">0,00 €</span></div>
           <p class="small">{t.common.vatNote}</p>
@@ -45,6 +45,7 @@ const t = useTranslations(lang);
 <script type="module">
   import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
+  import { getProduct } from "../../../data/products";
 
   const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
 
@@ -62,29 +63,36 @@ const t = useTranslations(lang);
     empty.style.display = "none";
     content.style.display = "grid";
 
-    itemsEl.innerHTML = cart.map((i) => `
+    itemsEl.innerHTML = cart.map((i) => {
+      const produkt = getProduct(i.slug);
+      const foto = produkt?.bilder?.[0];
+      const thumb = foto
+        ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
+        : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
+      return `
       <div class="cart-item">
-        <div class="img-placeholder thumb"></div>
+        ${thumb}
         <div class="info">
           <strong>${i.name}</strong>
           <div class="small">${formatPrice(i.preis, cartLang)} ${perItemLabel}</div>
         </div>
         <div class="qty-controls">
-          <button data-action="dec" data-slug="${i.slug}">−</button>
+          <button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
           <span>${i.menge}</span>
-          <button data-action="inc" data-slug="${i.slug}">+</button>
+          <button data-action="inc" data-slug="${i.slug}" aria-label="+">+</button>
         </div>
-        <div><strong>${formatPrice(i.preis * i.menge, cartLang)}</strong></div>
-        <a href="#" class="remove" data-action="remove" data-slug="${i.slug}">${removeLabel}</a>
+        <div class="line-total">${formatPrice(i.preis * i.menge, cartLang)}</div>
+        <a href="#" class="remove" data-action="remove" data-slug="${i.slug}">✕ ${removeLabel}</a>
       </div>
-    `).join("");
+    `;
+    }).join("");
 
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
     document.getElementById("sum-subtotal").textContent = formatPrice(subtotal, cartLang);
     document.getElementById("sum-total").textContent = formatPrice(subtotal, cartLang);
     document.getElementById("shipping-hint").textContent =
-      remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : freeShippingText;
+      remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : `🩵 ${freeShippingText}`;
 
     itemsEl.querySelectorAll("button, a.remove").forEach((el) => {
       el.addEventListener("click", (e) => {

src/pages/checkout/index.astro

@@ -42,9 +42,21 @@ const t = useTranslations(lang);
         <hr class="divider" />
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option"><input type="radio" name="pay" value="paypal" checked /> PayPal</label>
-          <label class="pay-option"><input type="radio" name="pay" value="klarna" /> Klarna</label>
-          <label class="pay-option"><input type="radio" name="pay" value="ueberweisung" /> {t.checkout.bankTransfer}</label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">🅿️</span>
+            <span>PayPal</span>
+            <input type="radio" name="pay" value="paypal" checked />
+          </label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">💳</span>
+            <span>Klarna</span>
+            <input type="radio" name="pay" value="klarna" />
+          </label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">🏦</span>
+            <span>{t.checkout.bankTransfer}</span>
+            <input type="radio" name="pay" value="ueberweisung" />
+          </label>
         </div>
 
         <hr class="divider" />

src/pages/en/checkout/index.astro

@@ -42,9 +42,21 @@ const t = useTranslations(lang);
         <hr class="divider" />
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option"><input type="radio" name="pay" value="paypal" checked /> PayPal</label>
-          <label class="pay-option"><input type="radio" name="pay" value="klarna" /> Klarna</label>
-          <label class="pay-option"><input type="radio" name="pay" value="ueberweisung" /> {t.checkout.bankTransfer}</label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">🅿️</span>
+            <span>PayPal</span>
+            <input type="radio" name="pay" value="paypal" checked />
+          </label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">💳</span>
+            <span>Klarna</span>
+            <input type="radio" name="pay" value="klarna" />
+          </label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">🏦</span>
+            <span>{t.checkout.bankTransfer}</span>
+            <input type="radio" name="pay" value="ueberweisung" />
+          </label>
         </div>
 
         <hr class="divider" />

src/pages/en/warenkorb/index.astro

@@ -24,10 +24,10 @@ const t = useTranslations(lang);
       <div id="cart-content" class="cart-layout" style="display:none;">
         <div class="card cart-items" id="cart-items"></div>
         <aside class="card cart-summary">
-          <h3>{t.cart.subtotal}</h3>
+          <h3>🧾 {t.cart.subtotal}</h3>
           <div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
           <div class="summary-row"><span>{t.cart.shipping}</span><span id="sum-shipping">{t.cart.shippingCalculated}</span></div>
-          <p class="small" id="shipping-hint"></p>
+          <p class="free-shipping-badge" id="shipping-hint"></p>
           <hr class="divider" />
           <div class="summary-row total"><span>{t.cart.total}</span><span id="sum-total">0,00 €</span></div>
           <p class="small">{t.common.vatNote}</p>
@@ -45,6 +45,7 @@ const t = useTranslations(lang);
 <script type="module">
   import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
+  import { getProduct } from "../../../data/products";
 
   const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
 
@@ -62,29 +63,36 @@ const t = useTranslations(lang);
     empty.style.display = "none";
     content.style.display = "grid";
 
-    itemsEl.innerHTML = cart.map((i) => `
+    itemsEl.innerHTML = cart.map((i) => {
+      const produkt = getProduct(i.slug);
+      const foto = produkt?.bilder?.[0];
+      const thumb = foto
+        ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
+        : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
+      return `
       <div class="cart-item">
-        <div class="img-placeholder thumb"></div>
+        ${thumb}
         <div class="info">
           <strong>${i.name}</strong>
           <div class="small">${formatPrice(i.preis, cartLang)} ${perItemLabel}</div>
         </div>
         <div class="qty-controls">
-          <button data-action="dec" data-slug="${i.slug}">−</button>
+          <button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
           <span>${i.menge}</span>
-          <button data-action="inc" data-slug="${i.slug}">+</button>
+          <button data-action="inc" data-slug="${i.slug}" aria-label="+">+</button>
         </div>
-        <div><strong>${formatPrice(i.preis * i.menge, cartLang)}</strong></div>
-        <a href="#" class="remove" data-action="remove" data-slug="${i.slug}">${removeLabel}</a>
+        <div class="line-total">${formatPrice(i.preis * i.menge, cartLang)}</div>
+        <a href="#" class="remove" data-action="remove" data-slug="${i.slug}">✕ ${removeLabel}</a>
       </div>
-    `).join("");
+    `;
+    }).join("");
 
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
     document.getElementById("sum-subtotal").textContent = formatPrice(subtotal, cartLang);
     document.getElementById("sum-total").textContent = formatPrice(subtotal, cartLang);
     document.getElementById("shipping-hint").textContent =
-      remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : freeShippingText;
+      remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : `🩵 ${freeShippingText}`;
 
     itemsEl.querySelectorAll("button, a.remove").forEach((el) => {
       el.addEventListener("click", (e) => {

src/pages/fr/checkout/index.astro

@@ -42,9 +42,21 @@ const t = useTranslations(lang);
         <hr class="divider" />
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option"><input type="radio" name="pay" value="paypal" checked /> PayPal</label>
-          <label class="pay-option"><input type="radio" name="pay" value="klarna" /> Klarna</label>
-          <label class="pay-option"><input type="radio" name="pay" value="ueberweisung" /> {t.checkout.bankTransfer}</label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">🅿️</span>
+            <span>PayPal</span>
+            <input type="radio" name="pay" value="paypal" checked />
+          </label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">💳</span>
+            <span>Klarna</span>
+            <input type="radio" name="pay" value="klarna" />
+          </label>
+          <label class="pay-option">
+            <span class="pay-icon" aria-hidden="true">🏦</span>
+            <span>{t.checkout.bankTransfer}</span>
+            <input type="radio" name="pay" value="ueberweisung" />
+          </label>
         </div>
 
         <hr class="divider" />

src/pages/fr/warenkorb/index.astro

@@ -24,10 +24,10 @@ const t = useTranslations(lang);
       <div id="cart-content" class="cart-layout" style="display:none;">
         <div class="card cart-items" id="cart-items"></div>
         <aside class="card cart-summary">
-          <h3>{t.cart.subtotal}</h3>
+          <h3>🧾 {t.cart.subtotal}</h3>
           <div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
           <div class="summary-row"><span>{t.cart.shipping}</span><span id="sum-shipping">{t.cart.shippingCalculated}</span></div>
-          <p class="small" id="shipping-hint"></p>
+          <p class="free-shipping-badge" id="shipping-hint"></p>
           <hr class="divider" />
           <div class="summary-row total"><span>{t.cart.total}</span><span id="sum-total">0,00 €</span></div>
           <p class="small">{t.common.vatNote}</p>
@@ -45,6 +45,7 @@ const t = useTranslations(lang);
 <script type="module">
   import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
+  import { getProduct } from "../../../data/products";
 
   const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
 
@@ -62,29 +63,36 @@ const t = useTranslations(lang);
     empty.style.display = "none";
     content.style.display = "grid";
 
-    itemsEl.innerHTML = cart.map((i) => `
+    itemsEl.innerHTML = cart.map((i) => {
+      const produkt = getProduct(i.slug);
+      const foto = produkt?.bilder?.[0];
+      const thumb = foto
+        ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
+        : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
+      return `
       <div class="cart-item">
-        <div class="img-placeholder thumb"></div>
+        ${thumb}
         <div class="info">
           <strong>${i.name}</strong>
           <div class="small">${formatPrice(i.preis, cartLang)} ${perItemLabel}</div>
         </div>
         <div class="qty-controls">
-          <button data-action="dec" data-slug="${i.slug}">−</button>
+          <button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
           <span>${i.menge}</span>
-          <button data-action="inc" data-slug="${i.slug}">+</button>
+          <button data-action="inc" data-slug="${i.slug}" aria-label="+">+</button>
         </div>
-        <div><strong>${formatPrice(i.preis * i.menge, cartLang)}</strong></div>
-        <a href="#" class="remove" data-action="remove" data-slug="${i.slug}">${removeLabel}</a>
+        <div class="line-total">${formatPrice(i.preis * i.menge, cartLang)}</div>
+        <a href="#" class="remove" data-action="remove" data-slug="${i.slug}">✕ ${removeLabel}</a>
       </div>
-    `).join("");
+    `;
+    }).join("");
 
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
     document.getElementById("sum-subtotal").textContent = formatPrice(subtotal, cartLang);
     document.getElementById("sum-total").textContent = formatPrice(subtotal, cartLang);
     document.getElementById("shipping-hint").textContent =
-      remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : freeShippingText;
+      remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : `🩵 ${freeShippingText}`;
 
     itemsEl.querySelectorAll("button, a.remove").forEach((el) => {
       el.addEventListener("click", (e) => {

src/pages/warenkorb/index.astro

@@ -24,10 +24,10 @@ const t = useTranslations(lang);
       <div id="cart-content" class="cart-layout" style="display:none;">
         <div class="card cart-items" id="cart-items"></div>
         <aside class="card cart-summary">
-          <h3>{t.cart.subtotal}</h3>
+          <h3>🧾 {t.cart.subtotal}</h3>
           <div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
           <div class="summary-row"><span>{t.cart.shipping}</span><span id="sum-shipping">{t.cart.shippingCalculated}</span></div>
-          <p class="small" id="shipping-hint"></p>
+          <p class="free-shipping-badge" id="shipping-hint"></p>
           <hr class="divider" />
           <div class="summary-row total"><span>{t.cart.total}</span><span id="sum-total">0,00 €</span></div>
           <p class="small">{t.common.vatNote}</p>
@@ -45,6 +45,7 @@ const t = useTranslations(lang);
 <script type="module">
   import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../scripts/cart";
   import { formatPrice } from "../../i18n/format";
+  import { getProduct } from "../../data/products";
 
   const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
 
@@ -62,29 +63,36 @@ const t = useTranslations(lang);
     empty.style.display = "none";
     content.style.display = "grid";
 
-    itemsEl.innerHTML = cart.map((i) => `
+    itemsEl.innerHTML = cart.map((i) => {
+      const produkt = getProduct(i.slug);
+      const foto = produkt?.bilder?.[0];
+      const thumb = foto
+        ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
+        : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
+      return `
       <div class="cart-item">
-        <div class="img-placeholder thumb"></div>
+        ${thumb}
         <div class="info">
           <strong>${i.name}</strong>
           <div class="small">${formatPrice(i.preis, cartLang)} ${perItemLabel}</div>
         </div>
         <div class="qty-controls">
-          <button data-action="dec" data-slug="${i.slug}">−</button>
+          <button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
           <span>${i.menge}</span>
-          <button data-action="inc" data-slug="${i.slug}">+</button>
+          <button data-action="inc" data-slug="${i.slug}" aria-label="+">+</button>
         </div>
-        <div><strong>${formatPrice(i.preis * i.menge, cartLang)}</strong></div>
-        <a href="#" class="remove" data-action="remove" data-slug="${i.slug}">${removeLabel}</a>
+        <div class="line-total">${formatPrice(i.preis * i.menge, cartLang)}</div>
+        <a href="#" class="remove" data-action="remove" data-slug="${i.slug}">✕ ${removeLabel}</a>
       </div>
-    `).join("");
+    `;
+    }).join("");
 
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
     document.getElementById("sum-subtotal").textContent = formatPrice(subtotal, cartLang);
     document.getElementById("sum-total").textContent = formatPrice(subtotal, cartLang);
     document.getElementById("shipping-hint").textContent =
-      remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : freeShippingText;
+      remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : `🩵 ${freeShippingText}`;
 
     itemsEl.querySelectorAll("button, a.remove").forEach((el) => {
       el.addEventListener("click", (e) => {

src/styles/global.css

@@ -764,24 +764,137 @@ a:focus-visible, button:focus-visible {
 .contact-layout { align-items: start; }
 
 /* Warenkorb */
-.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
-.cart-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(244,241,247,0.08); }
+.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
+.cart-item {
+  display: flex;
+  align-items: center;
+  gap: 1.1rem;
+  padding: 1.1rem 0.4rem;
+  border-bottom: 1px solid rgba(244, 241, 247, 0.08);
+  transition: background 0.2s var(--ease);
+  border-radius: var(--radius-s);
+}
+.cart-item:hover { background: rgba(244, 241, 247, 0.02); }
 .cart-item:last-child { border-bottom: none; }
-.cart-item .thumb { width: 64px; height: 64px; flex-shrink: 0; }
-.cart-item .info { flex: 1; }
-.cart-item .qty-controls { display: flex; align-items: center; gap: 0.4rem; }
-.cart-item .qty-controls button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(244,241,247,0.15); background: var(--c-anthracite); color: var(--c-text); cursor: pointer; }
-.cart-item .remove { color: var(--c-sale); font-size: 0.8rem; margin-left: 0.8rem; }
-.summary-row { display: flex; justify-content: space-between; margin: 0.5rem 0; font-size: 0.92rem; color: var(--c-text-muted); }
-.summary-row.total { color: var(--c-text); font-weight: 700; font-size: 1.15rem; }
+.cart-item .thumb {
+  width: 76px;
+  height: 76px;
+  flex-shrink: 0;
+  border-radius: var(--radius-m);
+  overflow: hidden;
+  border: 1px solid rgba(244, 241, 247, 0.1);
+  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.5);
+}
+.cart-item .thumb.img-placeholder { font-size: 0.6rem; padding: 0.3rem; min-height: 0; }
+.cart-item .info { flex: 1; min-width: 0; }
+.cart-item .info strong { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 0.2rem; }
+.cart-item .info .small { color: var(--c-text-muted); }
+.cart-item .qty-controls {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  border: 1px solid rgba(244, 241, 247, 0.14);
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--c-anthracite);
+  flex-shrink: 0;
+}
+.cart-item .qty-controls button {
+  width: 30px;
+  height: 30px;
+  border: none;
+  background: transparent;
+  color: var(--c-text);
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.15s var(--ease), color 0.15s var(--ease);
+}
+.cart-item .qty-controls button:hover { background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent); }
+.cart-item .qty-controls span { min-width: 1.6em; text-align: center; font-weight: 600; font-size: 0.92rem; }
+.cart-item .line-total { min-width: 5.5em; text-align: right; font-weight: 700; color: var(--c-text); flex-shrink: 0; }
+.cart-item .remove {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+  color: var(--c-text-muted);
+  font-size: 0.78rem;
+  margin-left: 0.4rem;
+  flex-shrink: 0;
+  transition: color 0.15s var(--ease);
+}
+.cart-item .remove:hover { color: var(--c-sale); }
+.summary-row { display: flex; justify-content: space-between; margin: 0.55rem 0; font-size: 0.92rem; color: var(--c-text-muted); }
+.summary-row.total { color: var(--c-text); font-weight: 700; font-size: 1.2rem; margin-top: 0.3rem; }
+.cart-summary h3 { display: flex; align-items: center; gap: 0.5em; }
+.free-shipping-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin: 0.7rem 0;
+  padding: 0.6em 0.9em;
+  border-radius: var(--radius-s);
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
+  color: var(--c-accent);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
 @media (max-width: 800px) { .cart-layout { grid-template-columns: 1fr; } }
 
 /* Checkout */
 .checkout-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
-.payment-options { display: grid; gap: 0.6rem; }
-.pay-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.7em 1em; border: 1px solid rgba(244,241,247,0.12); border-radius: var(--radius-s); font-size: 0.92rem; }
-.checkout-summary .row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.3rem 0; color: var(--c-text-muted); }
-.checkout-summary .row.total { color: var(--c-text); font-weight: 700; }
+
+/* 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.7rem; }
+.pay-option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.9em;
+  padding: 0.95em 1.1em;
+  border: 1px solid rgba(244, 241, 247, 0.12);
+  border-radius: var(--radius-m);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--c-anthracite);
+  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
+}
+.pay-option:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); transform: translateY(-1px); }
+.pay-option .pay-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
+.pay-option input[type="radio"] {
+  appearance: none;
+  width: 19px;
+  height: 19px;
+  border-radius: 50%;
+  border: 2px solid rgba(244, 241, 247, 0.3);
+  margin-left: auto;
+  flex-shrink: 0;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  transition: border-color 0.2s var(--ease);
+}
+.pay-option input[type="radio"]::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: transform 0.15s var(--ease);
+  background: var(--c-accent);
+}
+.pay-option input[type="radio"]:checked::before { transform: scale(1); }
+.pay-option input[type="radio"]:checked { border-color: var(--c-accent); }
+.pay-option:has(input:checked) {
+  border-color: var(--c-accent);
+  background: color-mix(in srgb, var(--c-accent) 9%, var(--c-anthracite));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 45%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--c-accent) 55%, transparent);
+}
+
+.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); }
 @media (max-width: 800px) { .checkout-layout { grid-template-columns: 1fr; } }
 .danke { max-width: 560px; margin-inline: auto; }