diff --git a/parfum-shop/src/components/CartToast.jsx b/parfum-shop/src/components/CartToast.jsx
index a7ec7ba..8901970 100644
--- a/parfum-shop/src/components/CartToast.jsx
+++ b/parfum-shop/src/components/CartToast.jsx
@@ -22,14 +22,23 @@ function CartToast() {
   };
 
   return (
-    <div className="cart-toast">
-      <button className="cart-toast-close" type="button" onClick={dismissToast}>
-        x
+    <div className="cart-toast" role="status" aria-live="polite">
+      <button
+        type="button"
+        className="atmos-btn atmos-btn--outline atmos-btn--icon atmos-btn--sm cart-toast-close"
+        onClick={dismissToast}
+        aria-label="Hinweis schliessen"
+      >
+        <span aria-hidden="true">×</span>
       </button>
       <strong>{cartToast.title}</strong>
       <p>{cartToast.message}</p>
       {cartToast.actionLabel && (
-        <button type="button" onClick={runAction}>
+        <button
+          type="button"
+          className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--sm"
+          onClick={runAction}
+        >
           {cartToast.actionLabel}
         </button>
       )}
diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css
index 89352da..2946939 100644
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@@ -362,67 +362,9 @@
   color: #fff;
 }
 
-.purchase-discovery-note a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 44px;
-  padding: 0 1rem;
-  border-radius: var(--radius-lg);
-  background: var(--theme-accent-fill);
-  color: var(--theme-accent-contrast);
-  text-decoration: none;
-  white-space: nowrap;
-  font-size: var(--text-sm);
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out);
-}
-
-.purchase-discovery-note a:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
-}
-
-.buy-button,
-.restock-button,
-.detail-bottom-actions button,
-.review-toggle,
-.review-write-button {
-  min-height: 48px;
-  border: 1px solid var(--theme-border);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    border-color var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out);
-}
-
-.buy-button {
-  border-color: var(--theme-accent-fill);
-  background: var(--theme-accent-fill);
-  color: var(--theme-accent-contrast);
-}
-
-.restock-button {
-  background: transparent;
-  color: var(--theme-text);
-}
-
-.buy-button:hover,
-.restock-button:hover,
-.detail-bottom-actions button:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--theme-shadow-soft);
-}
-
-.restock-button:hover {
-  border-color: rgba(var(--theme-accent-rgb) / 0.68);
-}
+/* Buy / restock / discovery / review CTAs use the global .atmos-btn system
+   (see src/style/buttons.css). The .restock-button class is kept on the
+   element only as a hook for the mobile breakpoint that hides it. */
 
 .product-story-grid,
 .product-meta-section {
@@ -834,21 +776,7 @@
   margin-top: var(--gap-sm);
 }
 
-.review-toggle {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--gap-sm);
-  padding: 0.9rem 1rem;
-  background: transparent;
-  color: var(--theme-text);
-}
-
-.review-toggle:hover {
-  border-color: rgba(var(--theme-accent-rgb) / 0.6);
-}
-
+/* .review-toggle is rendered as `.atmos-btn--outline --block --split`. */
 .review-toggle-icon {
   font-size: 1.2rem;
   line-height: 1;
@@ -896,12 +824,6 @@
   background: var(--theme-accent);
 }
 
-.review-write-button {
-  background: var(--theme-paper);
-  color: var(--theme-text-muted);
-  cursor: not-allowed;
-}
-
 .detail-bottom-cta {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -926,29 +848,9 @@
 }
 
 .detail-bottom-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap-xs);
   justify-content: flex-end;
 }
 
-.detail-bottom-actions button {
-  padding: 0 clamp(1rem, 2vw, 1.35rem);
-  border: 0;
-  border-radius: var(--radius-lg);
-  background: #fff;
-  color: var(--theme-accent-fill-strong);
-  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
-  font-size: var(--text-sm);
-  letter-spacing: 0;
-  text-transform: none;
-  white-space: nowrap;
-}
-
-.detail-bottom-actions button:active {
-  transform: translateY(0) scale(0.98);
-}
-
 .recommendation-heading {
   display: block;
   max-width: 74rem;
@@ -1250,7 +1152,7 @@
     display: none;
   }
 
-  .buy-button,
+  .purchase-actions .atmos-btn,
   .restock-button {
     min-height: 38px;
     font-size: 0.72rem;
@@ -1273,11 +1175,6 @@
     width: min(100%, 24rem);
   }
 
-  .buy-button,
-  .restock-button {
-    width: 100%;
-  }
-
   .review-score-block {
     justify-items: start;
   }
diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx
index e5794cb..061bfae 100644
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@@ -119,7 +119,7 @@ function ProductPurchasePanel({
 
       <div className="purchase-actions">
         <button
-          className="buy-button"
+          className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--uppercase"
           type="button"
           onClick={() =>
             addToCart(
@@ -133,7 +133,7 @@ function ProductPurchasePanel({
         </button>
 
         <button
-          className="restock-button"
+          className="atmos-btn atmos-btn--outline atmos-btn--block atmos-btn--uppercase atmos-btn--sm restock-button"
           type="button"
           onClick={() => subscribeToProduct(selectedProductId, "restock").catch(() => {})}
         >
@@ -155,7 +155,12 @@ function ProductPurchasePanel({
             </p>
           )}
         </div>
-        <Link to="/discovery-set">Zum Set</Link>
+        <Link
+          to="/discovery-set"
+          className="atmos-btn atmos-btn--outline atmos-btn--sm"
+        >
+          Zum Set
+        </Link>
       </div>
     </aside>
   );
@@ -429,7 +434,7 @@ function ProductReviews({
       <div className={`review-panel ${showReviewDetails ? "is-open" : ""}`} data-reveal="fade">
         <button
           type="button"
-          className="review-toggle"
+          className="atmos-btn atmos-btn--outline atmos-btn--block atmos-btn--split atmos-btn--uppercase review-toggle"
           onClick={() => setShowReviewDetails((prev) => !prev)}
           aria-expanded={showReviewDetails}
         >
@@ -454,7 +459,11 @@ function ProductReviews({
               </div>
             ))}
 
-            <button type="button" className="review-write-button" disabled>
+            <button
+              type="button"
+              className="atmos-btn atmos-btn--outline atmos-btn--block atmos-btn--uppercase"
+              disabled
+            >
               Bewertung schreiben
             </button>
           </div>
@@ -466,7 +475,7 @@ function ProductReviews({
 
 function ProductTestingCTA({ perfume, addToCart }) {
   return (
-    <section className="detail-bottom-cta" data-reveal-group>
+    <section className="detail-bottom-cta" data-reveal-group data-on-accent>
       <div>
         <span className="eyebrow" data-reveal="fade">Lieber erst testen?</span>
         <h2 data-reveal="lines">Sample oder Discovery Set.</h2>
@@ -477,22 +486,24 @@ function ProductTestingCTA({ perfume, addToCart }) {
         </p>
       </div>
 
-      <div className="detail-bottom-actions" data-reveal="fade">
+      <div className="detail-bottom-actions atmos-btn-row atmos-btn-row--responsive" data-reveal="fade">
         <button
           type="button"
+          className="atmos-btn atmos-btn--primary"
           onClick={() =>
             addToCart(`${perfume.slug}-sample`, 1, `${perfume.name} Sample added.`).catch(
               () => {}
             )
           }
         >
-          Sample bestellen - {perfume.prices.sample}
+          Sample bestellen — {perfume.prices.sample}
         </button>
         <button
           type="button"
+          className="atmos-btn atmos-btn--secondary"
           onClick={() => addToCart("discovery-set", 1, "Discovery Set added.").catch(() => {})}
         >
-          Discovery Set - CHF 48
+          Discovery Set — CHF 48
         </button>
       </div>
     </section>
diff --git a/parfum-shop/src/components/ShopDrawer.css b/parfum-shop/src/components/ShopDrawer.css
index 1795e1a..a4c96c9 100644
--- a/parfum-shop/src/components/ShopDrawer.css
+++ b/parfum-shop/src/components/ShopDrawer.css
@@ -1,3 +1,13 @@
+/**
+ * ShopDrawer + CartToast — visually aligned with Landing/Product surfaces.
+ *
+ * Buttons inside the drawer use the global `.atmos-btn` system. This file
+ * only owns layout, the form-field skin, and the surface look of inner
+ * cards (cart item, payment card, requirements, orders, etc.).
+ */
+
+/* ----- Backdrop & shell -------------------------------------------------- */
+
 .drawer-backdrop {
   position: fixed;
   inset: 0;
@@ -5,10 +15,10 @@
   background: rgba(0, 0, 0, 0.58);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.22s ease;
+  transition: opacity var(--duration-med) var(--ease-out);
 }
 
-.drawer-backdrop.open {
+.drawer-backdrop.is-open {
   opacity: 1;
   pointer-events: auto;
 }
@@ -20,481 +30,676 @@
   z-index: 90;
   width: min(560px, 100%);
   height: 100vh;
-  padding: 22px;
+  height: 100dvh;
+  padding: clamp(1rem, 3vw, 1.4rem);
   overflow-y: auto;
   background: var(--theme-surface);
   border-left: 1px solid var(--theme-border);
   color: var(--theme-text);
+  box-shadow: var(--theme-shadow);
   transform: translateX(100%);
-  transition: transform 0.24s ease;
+  transition: transform var(--duration-med) var(--ease-out);
 }
 
-.shop-drawer.open {
+.shop-drawer.is-open {
   transform: translateX(0);
 }
 
-.drawer-top,
-.profile-section-header,
-.drawer-actions {
+/* ----- Top bar ----------------------------------------------------------- */
+
+.drawer-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 14px;
-}
-
-.drawer-top {
-  padding-bottom: 18px;
+  gap: var(--gap-sm);
+  padding-bottom: var(--gap-sm);
+  margin-bottom: var(--gap-md);
   border-bottom: 1px solid var(--theme-border);
-  margin-bottom: 18px;
-  font-size: 12px;
-  letter-spacing: 0.24em;
 }
 
-.drawer-top button,
-.cart-toast-close {
-  width: 34px;
-  height: 34px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-  color: var(--theme-text);
-  cursor: pointer;
+.drawer-top .atmos-btn--icon {
+  font-size: 1.1rem;
+  line-height: 1;
 }
 
-.drawer-stack,
-.auth-panel,
-.cart-items,
-.order-list,
-.requirements,
-.sample-credit-list,
-.subscription-list {
+/* ----- Sections ---------------------------------------------------------- */
+
+.drawer-stack {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: var(--gap-sm);
 }
 
 .drawer-section {
-  padding: 18px;
-  background: var(--theme-surface-soft);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  padding: clamp(1rem, 2.4vw, 1.4rem);
   border: 1px solid var(--theme-border);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
+    var(--theme-surface-soft);
 }
 
-.drawer-section h2,
-.drawer-section h3,
-.drawer-section p {
-  margin-top: 0;
+.drawer-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
 }
 
-.drawer-kicker {
+.drawer-eyebrow {
   display: block;
-  margin-bottom: 12px;
-  font-size: 10px;
-  letter-spacing: 0.22em;
+  margin: 0;
   color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
 }
 
+.drawer-heading {
+  margin: 0;
+  color: var(--theme-text);
+  font-size: clamp(1.4rem, 3vw, 1.8rem);
+  font-weight: 300;
+  line-height: 1.05;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.drawer-muted {
+  margin: 0;
+  color: var(--theme-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.drawer-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+}
+
+/* ----- Form fields ------------------------------------------------------- */
+
 .drawer-grid {
   display: grid;
-  gap: 12px;
+  gap: var(--gap-xs);
 }
 
-.drawer-grid--two,
-.profile-read-grid,
-.toggle-grid,
-.payment-grid {
-  display: grid;
+.drawer-grid--two {
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
 }
 
-.shop-field {
+.drawer-field {
   display: flex;
   flex-direction: column;
-  gap: 7px;
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--theme-text-muted);
+  gap: 0.4rem;
 }
 
-.shop-field input {
+.drawer-field > span {
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.drawer-field input {
   width: 100%;
-  min-height: 42px;
+  min-height: 44px;
+  padding: 0 0.75rem;
   border: 1px solid var(--theme-control-border);
-  border-radius: 0;
   background: var(--theme-control-bg);
-  padding: 10px 11px;
   color: var(--theme-text);
   font: inherit;
   letter-spacing: 0;
   text-transform: none;
+  transition:
+    border-color var(--duration-med) var(--ease-out),
+    background-color var(--duration-med) var(--ease-out);
 }
 
-.shop-field input:hover {
+.drawer-field input:hover {
   border-color: var(--theme-control-border-hover);
 }
 
-.shop-field input:focus {
+.drawer-field input:focus {
   border-color: var(--theme-control-border-focus);
   outline: 2px solid var(--theme-focus-ring);
   outline-offset: 2px;
 }
 
-.drawer-primary,
-.drawer-secondary,
-.cart-remove,
-.pref-toggle,
-.payment-card,
-.cart-controls button,
-.cart-toast button {
-  border-radius: 0;
-  cursor: pointer;
-  font: inherit;
-}
+/* ----- Cart -------------------------------------------------------------- */
 
-.drawer-primary {
-  width: 100%;
-  min-height: 46px;
-  border: 1px solid #1f1f1f;
-  background: #1f1f1f;
-  color: #fff;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-}
-
-.drawer-primary:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.drawer-secondary {
-  min-height: 38px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-  color: var(--theme-text);
-  padding: 0 13px;
-}
-
-.drawer-link-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-}
-
-.cart-item,
-.order-card,
-.read-block,
-.status-box,
-.requirement-row {
-  background: var(--theme-surface-soft);
-  border: 1px solid var(--theme-border);
+.cart-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  margin-top: var(--gap-2xs);
 }
 
 .cart-item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto;
-  gap: 12px;
   align-items: center;
-  padding: 14px;
+  gap: var(--gap-sm);
+  padding: clamp(0.85rem, 2vw, 1.1rem);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-paper);
 }
 
-.cart-item h3 {
-  margin-bottom: 4px;
-  font-size: 14px;
+.cart-item-info h3 {
+  margin: 0 0 0.25rem;
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
-.cart-item p,
-.drawer-muted,
-.order-card p {
+.cart-item-info p {
   margin: 0;
   color: var(--theme-text-muted);
-  font-size: 13px;
-  line-height: 1.45;
+  font-size: var(--text-sm);
+  line-height: 1.4;
 }
 
 .cart-controls {
   display: grid;
-  grid-template-columns: 32px 32px 32px;
+  grid-template-columns: 36px 36px 36px;
   align-items: center;
   border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
+  background: var(--theme-surface);
 }
 
 .cart-controls button {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border: 0;
   background: transparent;
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-med) var(--ease-out),
+    color var(--duration-med) var(--ease-out);
+}
+
+.cart-controls button:hover {
+  background: rgba(var(--theme-accent-rgb) / 0.12);
+  color: var(--theme-accent);
 }
 
 .cart-controls span {
   text-align: center;
+  font-size: var(--text-sm);
 }
 
-.cart-remove {
-  min-height: 34px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-  padding: 0 10px;
+/* ----- Payment ----------------------------------------------------------- */
+
+.payment-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--gap-xs);
+  margin-top: var(--gap-2xs);
 }
 
 .payment-card {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--gap-xs);
   min-height: 60px;
+  padding: var(--gap-xs);
   border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-  padding: 12px;
+  background: var(--theme-paper);
+  color: var(--theme-text);
+  cursor: pointer;
+  isolation: isolate;
+  transition:
+    border-color var(--duration-med) var(--ease-out),
+    background-color var(--duration-med) var(--ease-out);
 }
 
-.payment-card span {
+.payment-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--theme-accent);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform var(--duration-med) var(--ease-out);
+}
+
+.payment-card:hover {
+  border-color: rgba(var(--theme-accent-rgb) / 0.55);
+}
+
+.payment-card.is-active {
+  border-color: var(--theme-accent);
+  background: rgba(var(--theme-accent-rgb) / 0.08);
+}
+
+.payment-card.is-active::before {
+  transform: scaleX(1);
+}
+
+.payment-card__badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   height: 28px;
-  background: #1f1f1f;
-  color: #fff;
-  font-size: 10px;
-  letter-spacing: 0.08em;
+  background: var(--theme-text);
+  color: var(--theme-bg);
+  font-size: var(--text-xs);
+  letter-spacing: 0.12em;
 }
 
-.payment-card.active {
-  border-color: var(--theme-accent);
-  background: rgba(var(--theme-accent-rgb) / 0.12);
+.payment-card strong {
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+  font-weight: 400;
 }
 
-.totals-box {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+/* ----- Totals ------------------------------------------------------------ */
+
+.drawer-totals {
+  gap: var(--gap-xs);
 }
 
-.totals-box > div,
-.requirement-row {
+.drawer-totals__row {
   display: flex;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--gap-sm);
+  font-size: var(--text-sm);
+  color: var(--theme-text);
 }
 
-.totals-box .discount-explainer {
-  display: block;
-  padding: 12px;
+.drawer-totals__row span {
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.drawer-totals__row--total {
+  margin-top: var(--gap-xs);
+  padding-top: var(--gap-xs);
+  border-top: 1px solid var(--theme-border);
+  font-size: var(--text-lg);
+}
+
+.drawer-totals__row--total span {
+  color: var(--theme-text);
+  font-size: var(--text-xs);
+}
+
+.drawer-totals__explainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: var(--gap-xs);
   border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
+  background: var(--theme-paper);
 }
 
-.discount-explainer span {
-  display: block;
-  margin-bottom: 8px;
-}
-
-.discount-explainer p {
+.drawer-totals__explainer p {
   margin: 0;
   color: var(--theme-text);
-  font-size: 13px;
+  font-size: var(--text-sm);
   line-height: 1.45;
 }
 
-.discount-explainer p + p {
-  margin-top: 6px;
+.drawer-totals__explainer strong {
+  color: var(--theme-accent);
+  font-weight: 400;
 }
 
-.total-row {
-  padding-top: 10px;
-  border-top: 1px solid var(--theme-border);
-  font-size: 18px;
-}
+/* ----- Error ------------------------------------------------------------- */
 
 .drawer-error {
   margin: 0;
-  padding: 12px 14px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
+  padding: var(--gap-xs);
+  border: 1px solid var(--theme-accent);
+  background: rgba(var(--theme-accent-rgb) / 0.08);
   color: var(--theme-text);
+  font-size: var(--text-sm);
+  line-height: 1.5;
 }
 
-.drawer-error {
-  border-color: var(--theme-accent);
+/* ----- Profile ----------------------------------------------------------- */
+
+.drawer-profile-head {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
 }
 
-.profile-head {
-  display: grid;
-  gap: 8px;
-}
-
-.profile-head h2 {
-  margin-bottom: 0;
+.drawer-profile-head > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
 }
 
 .profile-read-grid {
-  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--gap-xs);
+  margin-top: var(--gap-2xs);
 }
 
-.read-block {
-  padding: 13px;
+.drawer-read-block {
   display: flex;
   flex-direction: column;
-  gap: 7px;
+  gap: 0.4rem;
+  padding: var(--gap-xs);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-paper);
 }
 
-.read-block span,
-.requirement-row span,
-.totals-box span {
+.drawer-read-block span {
   color: var(--theme-text-muted);
-  font-size: 11px;
-  letter-spacing: 0.08em;
+  font-size: var(--text-xs);
+  letter-spacing: 0.16em;
   text-transform: uppercase;
 }
 
-.status-box {
-  padding: 14px;
-  font-weight: 700;
+.drawer-read-block strong {
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+  font-weight: 400;
+  line-height: 1.4;
+  word-break: break-word;
 }
 
-.sample-credit-list {
-  margin-top: 12px;
-}
+/* ----- Status box -------------------------------------------------------- */
 
-.sample-credit-list span {
-  padding: 10px;
-  background: var(--theme-surface-soft);
+.drawer-status-box {
+  padding: var(--gap-xs);
   border: 1px solid var(--theme-border);
-  font-size: 13px;
+  background: var(--theme-paper);
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  line-height: 1.4;
 }
 
-.pref-toggle {
-  min-height: 58px;
-  padding: 12px;
+.drawer-credit-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: var(--gap-2xs);
+}
+
+.drawer-credit-list span {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.4rem 0.7rem;
   border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
+  background: var(--theme-paper);
+  color: var(--theme-text);
+  font-size: var(--text-xs);
+  letter-spacing: 0.05em;
+}
+
+/* ----- Toggles ----------------------------------------------------------- */
+
+.drawer-toggle-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--gap-xs);
+}
+
+.drawer-toggle {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 6px;
+  gap: 0.35rem;
+  min-height: 64px;
+  padding: var(--gap-xs);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-paper);
+  color: var(--theme-text);
+  cursor: pointer;
+  isolation: isolate;
+  transition:
+    border-color var(--duration-med) var(--ease-out),
+    background-color var(--duration-med) var(--ease-out);
 }
 
-.pref-toggle.active {
+.drawer-toggle::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--theme-accent);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform var(--duration-med) var(--ease-out);
+}
+
+.drawer-toggle:hover {
+  border-color: rgba(var(--theme-accent-rgb) / 0.55);
+}
+
+.drawer-toggle.is-active {
   border-color: var(--theme-accent);
-  background: rgba(var(--theme-accent-rgb) / 0.12);
+  background: rgba(var(--theme-accent-rgb) / 0.08);
 }
 
-.subscription-list {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid var(--theme-border);
+.drawer-toggle.is-active::before {
+  transform: scaleX(1);
 }
 
-.subscription-list-title {
+.drawer-toggle span {
   color: var(--theme-text-muted);
-  font-size: 10px;
-  letter-spacing: 0.18em;
+  font-size: var(--text-xs);
+  letter-spacing: 0.16em;
   text-transform: uppercase;
 }
 
-.subscription-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px;
-  align-items: center;
-  padding: 12px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-}
-
-.subscription-row div {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.subscription-row span {
-  color: var(--theme-text-muted);
-  font-size: 12px;
-}
-
-.subscription-row button {
-  min-height: 34px;
-  border: 1px solid var(--theme-border);
-  border-radius: 0;
-  background: var(--theme-surface-soft);
+.drawer-toggle strong {
   color: var(--theme-text);
-  padding: 0 12px;
-  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: 400;
 }
 
-.subscription-row button:hover {
-  border-color: var(--theme-accent);
-}
-
-.requirement-row {
-  padding: 12px;
-}
-
-.requirement-row strong.met {
+.drawer-toggle.is-active strong {
   color: var(--theme-accent);
 }
 
-.order-card {
-  padding: 14px;
+/* ----- Subscriptions ----------------------------------------------------- */
+
+.drawer-subscription-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  margin-top: var(--gap-sm);
+  padding-top: var(--gap-sm);
+  border-top: 1px solid var(--theme-border);
 }
 
-.order-card div {
+.drawer-subscription-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--gap-xs);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-paper);
+}
+
+.drawer-subscription-row > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+}
+
+.drawer-subscription-row strong {
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+  font-weight: 400;
+}
+
+.drawer-subscription-row span {
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+}
+
+/* ----- Requirements ------------------------------------------------------ */
+
+.drawer-requirements {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: var(--gap-2xs);
+}
+
+.drawer-requirement {
+  position: relative;
   display: flex;
   justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
+  gap: var(--gap-sm);
+  padding: var(--gap-xs);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-paper);
+  isolation: isolate;
 }
 
+.drawer-requirement::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--theme-accent);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform var(--duration-med) var(--ease-out);
+}
+
+.drawer-requirement.is-met::before {
+  transform: scaleX(1);
+}
+
+.drawer-requirement span {
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.drawer-requirement strong {
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+  font-weight: 400;
+}
+
+.drawer-requirement.is-met strong {
+  color: var(--theme-accent);
+}
+
+/* ----- Orders ------------------------------------------------------------ */
+
+.drawer-order-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  margin-top: var(--gap-2xs);
+}
+
+.drawer-order-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: var(--gap-xs);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-paper);
+}
+
+.drawer-order-card header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+}
+
+.drawer-order-card header span {
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+}
+
+.drawer-order-card p {
+  margin: 0;
+  color: var(--theme-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.45;
+}
+
+.drawer-order-card__total {
+  align-self: flex-end;
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  font-weight: 400;
+}
+
+/* ----- Cart Toast -------------------------------------------------------- */
+
 .cart-toast {
   position: fixed;
-  right: 22px;
-  bottom: 22px;
+  right: var(--page-x);
+  bottom: var(--page-x);
   z-index: 100;
-  width: min(360px, calc(100vw - 44px));
-  padding: 18px;
+  width: min(360px, calc(100vw - (var(--page-x) * 2)));
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  padding: clamp(1rem, 2.4vw, 1.25rem);
   border: 1px solid var(--theme-border);
   background: var(--theme-surface);
   color: var(--theme-text);
-  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
+  box-shadow: var(--theme-shadow);
+}
+
+.cart-toast strong {
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  font-weight: 400;
+  line-height: 1.2;
 }
 
 .cart-toast p {
-  margin: 8px 38px 14px 0;
+  margin: 0 var(--gap-md) 0 0;
   color: var(--theme-text-muted);
-}
-
-.cart-toast > button:last-child {
-  min-height: 40px;
-  width: 100%;
-  border: 1px solid #1f1f1f;
-  background: #1f1f1f;
-  color: #fff;
-}
-
-.cart-toast > button.cart-toast-close:last-child {
-  width: 34px;
-  min-height: 34px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-  color: var(--theme-text);
+  font-size: var(--text-sm);
+  line-height: 1.5;
 }
 
 .cart-toast-close {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: 0.55rem;
+  right: 0.55rem;
 }
 
+/* ----- Responsive -------------------------------------------------------- */
+
 @media (max-width: 640px) {
   .shop-drawer {
-    padding: 16px;
+    width: 100%;
   }
 
   .drawer-grid--two,
   .profile-read-grid,
-  .toggle-grid,
+  .drawer-toggle-grid,
   .payment-grid {
     grid-template-columns: 1fr;
   }
@@ -502,92 +707,19 @@
   .cart-item {
     grid-template-columns: 1fr;
   }
-}
 
-
-/* --- Design System Refinement Start --- */
-
-.shop-drawer {
-  width: min(560px, 100%);
-  min-width: 0;
-  padding: clamp(1rem, 3vw, 1.4rem);
-  box-shadow: var(--theme-shadow);
-}
-
-.drawer-top button,
-.cart-toast-close,
-.cart-controls button,
-.subscription-row button {
-  min-width: 44px;
-  min-height: 44px;
-}
-
-.drawer-section,
-.cart-item,
-.order-card,
-.read-block,
-.status-box,
-.requirement-row,
-.drawer-error,
-.payment-card,
-.pref-toggle,
-.subscription-row,
-.totals-box .discount-explainer,
-.cart-toast,
-.shop-field input {
-  border-radius: var(--radius-lg);
-}
-
-.drawer-primary,
-.drawer-secondary,
-.cart-remove,
-.cart-controls,
-.cart-controls button,
-.cart-toast button,
-.subscription-row button {
-  border-radius: var(--radius-lg);
-}
-
-.drawer-primary,
-.cart-toast > button:last-child {
-  min-height: 48px;
-}
-
-.drawer-primary,
-.drawer-secondary,
-.cart-remove,
-.payment-card,
-.pref-toggle,
-.subscription-row button {
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    border-color var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out);
-}
-
-.drawer-primary:hover:not(:disabled),
-.drawer-secondary:hover,
-.cart-remove:hover,
-.payment-card:hover,
-.pref-toggle:hover,
-.subscription-row button:hover {
-  transform: translateY(-1px);
-  border-color: rgba(var(--theme-accent-rgb) / 0.55);
-}
-
-@media (max-width: 640px) {
-  .shop-drawer {
-    width: 100%;
-  }
-
-  .cart-toast {
-    right: var(--page-x);
-    bottom: var(--page-x);
-    width: calc(100vw - (var(--page-x) * 2));
+  .drawer-profile-head {
+    flex-direction: column;
+    align-items: flex-start;
   }
 }
 
-/* --- Design System Refinement End --- */
-
-
+@media (prefers-reduced-motion: reduce) {
+  .shop-drawer,
+  .drawer-backdrop,
+  .payment-card::before,
+  .drawer-toggle::before,
+  .drawer-requirement::before {
+    transition: none;
+  }
+}
diff --git a/parfum-shop/src/components/ShopDrawer.jsx b/parfum-shop/src/components/ShopDrawer.jsx
index be38df2..ba5f844 100644
--- a/parfum-shop/src/components/ShopDrawer.jsx
+++ b/parfum-shop/src/components/ShopDrawer.jsx
@@ -5,8 +5,8 @@ import { useShop } from "../shop/useShop";
 import "./ShopDrawer.css";
 
 const paymentMethods = [
-  { key: "Bill", badge: "BILL", label: "Bill" },
-  { key: "Card", badge: "CARD", label: "Card" },
+  { key: "Bill", badge: "BILL", label: "Rechnung" },
+  { key: "Card", badge: "CARD", label: "Karte" },
   { key: "Twint", badge: "TW", label: "Twint" },
   { key: "PayPal", badge: "PP", label: "PayPal" },
 ];
@@ -38,7 +38,7 @@ function Field({
   const fieldId = id || `shop-field-${fieldName}-${generatedId}`;
 
   return (
-    <label className="shop-field" htmlFor={fieldId}>
+    <label className="drawer-field" htmlFor={fieldId}>
       <span>{label}</span>
       <input
         id={fieldId}
@@ -76,62 +76,72 @@ function AuthPanel() {
   };
 
   return (
-    <form className="drawer-section auth-panel" onSubmit={submit}>
-      <span className="drawer-kicker">{mode === "login" ? "LOGIN" : "REGISTER"}</span>
-      <h2>{mode === "login" ? "Welcome back." : "Create your atmos account."}</h2>
+    <form className="drawer-stack" onSubmit={submit}>
+      <section className="drawer-section">
+        <span className="drawer-eyebrow">{mode === "login" ? "Login" : "Registrieren"}</span>
+        <h2 className="drawer-heading">
+          {mode === "login" ? "Willkommen zurück." : "Konto erstellen."}
+        </h2>
+
+        <div className="drawer-form">
+          {mode === "register" && (
+            <div className="drawer-grid drawer-grid--two">
+              <Field
+                label="Name"
+                name="first_name"
+                value={form.first_name}
+                autoComplete="given-name"
+                onChange={(value) => update("first_name", value)}
+              />
+              <Field
+                label="Nachname"
+                name="surname"
+                value={form.surname}
+                autoComplete="family-name"
+                onChange={(value) => update("surname", value)}
+              />
+            </div>
+          )}
 
-      {mode === "register" && (
-        <div className="drawer-grid drawer-grid--two">
           <Field
-            label="Name"
-            name="first_name"
-            value={form.first_name}
-            autoComplete="given-name"
-            onChange={(value) => update("first_name", value)}
+            id="auth-email"
+            label="E-Mail"
+            name="email"
+            type="email"
+            value={form.email}
+            autoComplete="email"
+            inputMode="email"
+            onChange={(value) => update("email", value)}
           />
           <Field
-            label="Surname"
-            name="surname"
-            value={form.surname}
-            autoComplete="family-name"
-            onChange={(value) => update("surname", value)}
+            id="auth-password"
+            label="Passwort"
+            name="password"
+            type="password"
+            value={form.password}
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            onChange={(value) => update("password", value)}
           />
+
+          {error && <p className="drawer-error">{error}</p>}
+
+          <button
+            className="atmos-btn atmos-btn--primary atmos-btn--block"
+            type="submit"
+            disabled={busy}
+          >
+            {mode === "login" ? "Login" : "Registrieren"}
+          </button>
+
+          <button
+            className="atmos-btn atmos-btn--ghost atmos-btn--block atmos-btn--sm"
+            type="button"
+            onClick={() => setMode((current) => (current === "login" ? "register" : "login"))}
+          >
+            {mode === "login" ? "Konto erstellen" : "Bestehenden Account nutzen"}
+          </button>
         </div>
-      )}
-
-      <Field
-        id="auth-email"
-        label="Email address"
-        name="email"
-        type="email"
-        value={form.email}
-        autoComplete="email"
-        inputMode="email"
-        onChange={(value) => update("email", value)}
-      />
-      <Field
-        id="auth-password"
-        label="Password"
-        name="password"
-        type="password"
-        value={form.password}
-        autoComplete={mode === "login" ? "current-password" : "new-password"}
-        onChange={(value) => update("password", value)}
-      />
-
-      {error && <p className="drawer-error">{error}</p>}
-
-      <button className="drawer-primary" type="submit" disabled={busy}>
-        {mode === "login" ? "Login" : "Register"}
-      </button>
-
-      <button
-        className="drawer-secondary"
-        type="button"
-        onClick={() => setMode((current) => (current === "login" ? "register" : "login"))}
-      >
-        {mode === "login" ? "Create account" : "Use existing account"}
-      </button>
+      </section>
     </form>
   );
 }
@@ -165,30 +175,32 @@ function CartPanel() {
   return (
     <form className="drawer-stack" onSubmit={submit}>
       <section className="drawer-section">
-        <span className="drawer-kicker">CART</span>
+        <span className="drawer-eyebrow">Warenkorb</span>
         {cart.items.length === 0 ? (
-          <p className="drawer-muted">Your cart is empty.</p>
+          <p className="drawer-muted">Dein Warenkorb ist leer.</p>
         ) : (
           <div className="cart-items">
             {cart.items.map((item) => (
               <article className="cart-item" key={item.product_id}>
-                <div>
+                <div className="cart-item-info">
                   <h3>{item.product.name}</h3>
                   <p>
                     {item.product.size_label} · {formatChf(item.product.price_cents)}
                   </p>
                 </div>
 
-                <div className="cart-controls">
+                <div className="cart-controls" role="group" aria-label="Menge anpassen">
                   <button
                     type="button"
+                    aria-label="Menge verringern"
                     onClick={() => updateCartQuantity(item.product_id, item.quantity - 1)}
                   >
-                    -
+                    −
                   </button>
                   <span>{item.quantity}</span>
                   <button
                     type="button"
+                    aria-label="Menge erhöhen"
                     onClick={() => updateCartQuantity(item.product_id, item.quantity + 1)}
                   >
                     +
@@ -196,11 +208,11 @@ function CartPanel() {
                 </div>
 
                 <button
-                  className="cart-remove"
+                  className="atmos-btn atmos-btn--ghost atmos-btn--sm"
                   type="button"
                   onClick={() => removeCartItem(item.product_id)}
                 >
-                  Remove
+                  Entfernen
                 </button>
               </article>
             ))}
@@ -209,56 +221,77 @@ function CartPanel() {
       </section>
 
       <section className="drawer-section">
-        <span className="drawer-kicker">SHIPPING</span>
+        <span className="drawer-eyebrow">Versand</span>
         <div className="drawer-grid drawer-grid--two">
-          <Field label="Street Name" value={address.street_name} onChange={(value) => updateAddress("street_name", value)} />
-          <Field label="House Number" value={address.house_number} onChange={(value) => updateAddress("house_number", value)} />
-          <Field label="ZIP Code" value={address.zip_code} onChange={(value) => updateAddress("zip_code", value)} />
-          <Field label="City" value={address.city} onChange={(value) => updateAddress("city", value)} />
+          <Field
+            label="Strasse"
+            value={address.street_name}
+            onChange={(value) => updateAddress("street_name", value)}
+          />
+          <Field
+            label="Nr."
+            value={address.house_number}
+            onChange={(value) => updateAddress("house_number", value)}
+          />
+          <Field
+            label="PLZ"
+            value={address.zip_code}
+            onChange={(value) => updateAddress("zip_code", value)}
+          />
+          <Field
+            label="Ort"
+            value={address.city}
+            onChange={(value) => updateAddress("city", value)}
+          />
         </div>
       </section>
 
       <section className="drawer-section">
-        <span className="drawer-kicker">PAYMENT</span>
-        <div className="payment-grid">
-          {paymentMethods.map((method) => (
-            <button
-              type="button"
-              className={`payment-card ${paymentMethod === method.key ? "active" : ""}`}
-              key={method.key}
-              onClick={() => setPaymentMethod(method.key)}
-            >
-              <span>{method.badge}</span>
-              <strong>{method.label}</strong>
-            </button>
-          ))}
+        <span className="drawer-eyebrow">Zahlung</span>
+        <div className="payment-grid" role="radiogroup" aria-label="Zahlungsmethode">
+          {paymentMethods.map((method) => {
+            const active = paymentMethod === method.key;
+            return (
+              <button
+                type="button"
+                role="radio"
+                aria-checked={active}
+                className={`payment-card ${active ? "is-active" : ""}`}
+                key={method.key}
+                onClick={() => setPaymentMethod(method.key)}
+              >
+                <span className="payment-card__badge">{method.badge}</span>
+                <strong>{method.label}</strong>
+              </button>
+            );
+          })}
         </div>
       </section>
 
-      <section className="drawer-section totals-box">
-        <div>
+      <section className="drawer-section drawer-totals">
+        <div className="drawer-totals__row">
           <span>Subtotal</span>
           <strong>{formatChf(cart.subtotal_cents)}</strong>
         </div>
-        <div>
+        <div className="drawer-totals__row">
           <span>Rabatte</span>
-          <strong>-{formatChf(cart.discount_cents)}</strong>
+          <strong>−{formatChf(cart.discount_cents)}</strong>
         </div>
         {cart.discounts?.length > 0 && (
-          <div className="discount-explainer">
-            <span>Applied automatically</span>
+          <div className="drawer-totals__explainer">
+            <span className="drawer-eyebrow">Automatisch angewendet</span>
             {cart.discounts.map((discount) => (
               <p key={`${discount.type}-${discount.creditId}`}>
                 <strong>{formatChf(discount.amount_cents)}</strong>
-                {" - "}
+                {" — "}
                 {discount.type === "discovery"
-                  ? "Discovery Set credit for a full-size bottle"
-                  : `Sample credit for ${discount.slug}`}
+                  ? "Discovery Set Credit für eine Full Size"
+                  : `Sample Credit für ${discount.slug}`}
               </p>
             ))}
           </div>
         )}
-        <div className="total-row">
+        <div className="drawer-totals__row drawer-totals__row--total">
           <span>Total</span>
           <strong>{formatChf(cart.total_cents)}</strong>
         </div>
@@ -266,8 +299,12 @@ function CartPanel() {
 
       {error && <p className="drawer-error">{error}</p>}
 
-      <button className="drawer-primary" type="submit" disabled={busy || cart.items.length === 0}>
-        Checkout
+      <button
+        className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--lg"
+        type="submit"
+        disabled={busy || cart.items.length === 0}
+      >
+        Jetzt bezahlen
       </button>
     </form>
   );
@@ -275,9 +312,9 @@ function CartPanel() {
 
 function RequirementRow({ label, met, children }) {
   return (
-    <div className="requirement-row">
+    <div className={`drawer-requirement ${met ? "is-met" : ""}`}>
       <span>{label}</span>
-      <strong className={met ? "met" : ""}>{children || (met ? "met" : "open")}</strong>
+      <strong>{children || (met ? "Erfüllt" : "Offen")}</strong>
     </div>
   );
 }
@@ -330,69 +367,84 @@ function ProfilePanel() {
 
   return (
     <div className="drawer-stack">
-      <section className="drawer-section profile-head">
-        <span className="drawer-kicker">PROFILE</span>
-        <h2>Hi, {user.first_name}</h2>
-        <button className="drawer-secondary" type="button" onClick={logout}>
+      <section className="drawer-section drawer-profile-head">
+        <div>
+          <span className="drawer-eyebrow">Profil</span>
+          <h2 className="drawer-heading">Hi, {user.first_name}.</h2>
+        </div>
+        <button
+          className="atmos-btn atmos-btn--outline atmos-btn--sm"
+          type="button"
+          onClick={logout}
+        >
           Logout
         </button>
       </section>
 
       <section className="drawer-section">
-        <div className="profile-section-header">
-          <span className="drawer-kicker">PROFILE INFORMATION</span>
+        <header className="drawer-section-head">
+          <span className="drawer-eyebrow">Profil-Informationen</span>
           {!editing && (
-            <button className="drawer-secondary" type="button" onClick={() => setEditing(true)}>
-              Profil bearbeiten
+            <button
+              className="atmos-btn atmos-btn--ghost atmos-btn--sm"
+              type="button"
+              onClick={() => setEditing(true)}
+            >
+              Bearbeiten
             </button>
           )}
-        </div>
+        </header>
 
         {editing ? (
           <>
             <div className="drawer-grid drawer-grid--two">
               <Field label="Name" value={form.first_name || ""} onChange={(value) => update("first_name", value)} />
-              <Field label="Surname" value={form.surname || ""} onChange={(value) => update("surname", value)} />
-              <Field label="Street Name" value={form.street_name || ""} onChange={(value) => update("street_name", value)} />
-              <Field label="House Number" value={form.house_number || ""} onChange={(value) => update("house_number", value)} />
-              <Field label="ZIP Code" value={form.zip_code || ""} onChange={(value) => update("zip_code", value)} />
-              <Field label="City" value={form.city || ""} onChange={(value) => update("city", value)} />
-              <Field label="Birthdate" type="date" value={form.birthdate || ""} onChange={(value) => update("birthdate", value)} />
+              <Field label="Nachname" value={form.surname || ""} onChange={(value) => update("surname", value)} />
+              <Field label="Strasse" value={form.street_name || ""} onChange={(value) => update("street_name", value)} />
+              <Field label="Nr." value={form.house_number || ""} onChange={(value) => update("house_number", value)} />
+              <Field label="PLZ" value={form.zip_code || ""} onChange={(value) => update("zip_code", value)} />
+              <Field label="Ort" value={form.city || ""} onChange={(value) => update("city", value)} />
+              <Field label="Geburtsdatum" type="date" value={form.birthdate || ""} onChange={(value) => update("birthdate", value)} />
             </div>
-            <div className="drawer-actions">
-              <button className="drawer-primary" type="button" disabled={busy} onClick={save}>
-                Save profile
+            <div className="atmos-btn-row">
+              <button
+                className="atmos-btn atmos-btn--primary"
+                type="button"
+                disabled={busy}
+                onClick={save}
+              >
+                Profil speichern
               </button>
               <button
-                className="drawer-secondary"
+                className="atmos-btn atmos-btn--outline"
                 type="button"
                 onClick={() => {
                   setForm(user);
                   setEditing(false);
                 }}
               >
-                Cancel
+                Abbrechen
               </button>
             </div>
           </>
         ) : (
           <div className="profile-read-grid">
             <ReadBlock label="Name" value={user.first_name} />
-            <ReadBlock label="Surname" value={user.surname} />
-            <ReadBlock label="Street Name" value={user.street_name || "-"} />
-            <ReadBlock label="House Number" value={user.house_number || "-"} />
-            <ReadBlock label="ZIP Code" value={user.zip_code || "-"} />
-            <ReadBlock label="City" value={user.city || "-"} />
-            <ReadBlock label="Birthdate" value={user.birthdate || "-"} />
+            <ReadBlock label="Nachname" value={user.surname} />
+            <ReadBlock label="Strasse" value={user.street_name || "—"} />
+            <ReadBlock label="Nr." value={user.house_number || "—"} />
+            <ReadBlock label="PLZ" value={user.zip_code || "—"} />
+            <ReadBlock label="Ort" value={user.city || "—"} />
+            <ReadBlock label="Geburtsdatum" value={user.birthdate || "—"} />
           </div>
         )}
       </section>
 
       <section className="drawer-section">
-        <span className="drawer-kicker">DISCOUNT STATUS</span>
-        <div className="status-box">{user.discoveryStatus}</div>
+        <span className="drawer-eyebrow">Discount Status</span>
+        <div className="drawer-status-box">{user.discoveryStatus}</div>
         {user.sampleCredits?.length > 0 && (
-          <div className="sample-credit-list">
+          <div className="drawer-credit-list">
             {user.sampleCredits.map((credit) => (
               <span key={`${credit.slug}-${credit.created_at}`}>
                 {credit.slug}: {credit.status}
@@ -403,37 +455,42 @@ function ProfilePanel() {
       </section>
 
       <section className="drawer-section">
-        <span className="drawer-kicker">DROP / RESTOCK PREFERENCES</span>
-        <div className="toggle-grid">
-          {notificationLabels.map(([key, label]) => (
-            <button
-              key={key}
-              type="button"
-              className={`pref-toggle ${notifications[key] ? "active" : ""}`}
-              onClick={() => togglePreference(key)}
-            >
-              <span>{label}</span>
-              <strong>{notifications[key] ? "Active" : "Inactive"}</strong>
-            </button>
-          ))}
+        <span className="drawer-eyebrow">Drop / Restock Preferences</span>
+        <div className="drawer-toggle-grid">
+          {notificationLabels.map(([key, label]) => {
+            const active = !!notifications[key];
+            return (
+              <button
+                key={key}
+                type="button"
+                aria-pressed={active}
+                className={`drawer-toggle ${active ? "is-active" : ""}`}
+                onClick={() => togglePreference(key)}
+              >
+                <span>{label}</span>
+                <strong>{active ? "Active" : "Inactive"}</strong>
+              </button>
+            );
+          })}
         </div>
 
-        <div className="subscription-list">
-          <span className="subscription-list-title">Subscribed Restocks</span>
+        <div className="drawer-subscription-list">
+          <span className="drawer-eyebrow">Abonnierte Restocks</span>
           {restockSubscriptions.length === 0 ? (
-            <p className="drawer-muted">No product-specific restock updates yet.</p>
+            <p className="drawer-muted">Noch keine produktbezogenen Restock-Updates.</p>
           ) : (
             restockSubscriptions.map((subscription) => (
-              <article className="subscription-row" key={subscription.id}>
+              <article className="drawer-subscription-row" key={subscription.id}>
                 <div>
                   <strong>{subscription.name}</strong>
                   <span>{subscription.size_label}</span>
                 </div>
                 <button
                   type="button"
+                  className="atmos-btn atmos-btn--ghost atmos-btn--sm"
                   onClick={() => removeProductSubscription(subscription.id).catch(() => {})}
                 >
-                  Delete
+                  Entfernen
                 </button>
               </article>
             ))
@@ -442,20 +499,22 @@ function ProfilePanel() {
       </section>
 
       <section className="drawer-section">
-        <span className="drawer-kicker">SMALL BATCH ACCESS</span>
-        <div className="status-box">{loyalty.unlocked ? "Unlocked" : "Locked"}</div>
-        <div className="requirements">
+        <span className="drawer-eyebrow">Small Batch Access</span>
+        <div className="drawer-status-box">
+          {loyalty.unlocked ? "Freigeschaltet" : "Noch gesperrt"}
+        </div>
+        <div className="drawer-requirements">
           <RequirementRow label="Discovery Set" met={loyalty.hasDiscoverySet} />
           <RequirementRow label="Full Size" met={loyalty.hasFullSize} />
-          <RequirementRow label="Purchases" met={loyalty.purchases >= 3}>
-            {loyalty.purchases}/3 Purchases
+          <RequirementRow label="Bestellungen" met={loyalty.purchases >= 3}>
+            {loyalty.purchases}/3
           </RequirementRow>
-          <RequirementRow label="Spend" met={loyalty.spent_cents > 50000}>
+          <RequirementRow label="Umsatz" met={loyalty.spent_cents > 50000}>
             {formatChf(loyalty.spent_cents)} / CHF 500+
           </RequirementRow>
         </div>
         <Link
-          className="drawer-primary drawer-link-primary"
+          className="atmos-btn atmos-btn--secondary atmos-btn--block"
           to="/small-batch"
           onClick={closePanel}
         >
@@ -464,19 +523,19 @@ function ProfilePanel() {
       </section>
 
       <section className="drawer-section">
-        <span className="drawer-kicker">PURCHASES</span>
+        <span className="drawer-eyebrow">Bestellungen</span>
         {orders.length === 0 ? (
-          <p className="drawer-muted">No orders yet.</p>
+          <p className="drawer-muted">Noch keine Bestellungen.</p>
         ) : (
-          <div className="order-list">
+          <div className="drawer-order-list">
             {orders.map((order) => (
-              <article className="order-card" key={order.id}>
-                <div>
-                  <strong>Order #{order.id}</strong>
+              <article className="drawer-order-card" key={order.id}>
+                <header>
+                  <strong>Bestellung #{order.id}</strong>
                   <span>{new Date(order.created_at).toLocaleDateString("de-CH")}</span>
-                </div>
-                <p>{order.items.map((item) => `${item.quantity} x ${item.product.name}`).join(", ")}</p>
-                <strong>{formatChf(order.total_cents)}</strong>
+                </header>
+                <p>{order.items.map((item) => `${item.quantity} × ${item.product.name}`).join(", ")}</p>
+                <strong className="drawer-order-card__total">{formatChf(order.total_cents)}</strong>
               </article>
             ))}
           </div>
@@ -490,7 +549,7 @@ function ProfilePanel() {
 
 function ReadBlock({ label, value }) {
   return (
-    <div className="read-block">
+    <div className="drawer-read-block">
       <span>{label}</span>
       <strong>{value}</strong>
     </div>
@@ -500,23 +559,30 @@ function ReadBlock({ label, value }) {
 function ShopDrawer() {
   const { closePanel, panelOpen, panelType, user } = useShop();
 
+  const drawerLabel = !user ? "Account" : panelType === "cart" ? "Warenkorb" : "Profil";
+
   return (
     <>
       <div
-        className={`drawer-backdrop ${panelOpen ? "open" : ""}`}
+        className={`drawer-backdrop ${panelOpen ? "is-open" : ""}`}
         onClick={closePanel}
       />
       <aside
-        className={`shop-drawer ${panelOpen ? "open" : ""}`}
+        className={`shop-drawer ${panelOpen ? "is-open" : ""}`}
         aria-hidden={!panelOpen}
         data-lenis-prevent
       >
-        <div className="drawer-top">
-          <span>{!user ? "ACCOUNT" : panelType === "cart" ? "CART" : "PROFILE"}</span>
-          <button type="button" onClick={closePanel} aria-label="Close panel">
-            x
+        <header className="drawer-top">
+          <span className="drawer-eyebrow">{drawerLabel}</span>
+          <button
+            type="button"
+            className="atmos-btn atmos-btn--outline atmos-btn--icon atmos-btn--sm"
+            onClick={closePanel}
+            aria-label="Panel schliessen"
+          >
+            <span aria-hidden="true">×</span>
           </button>
-        </div>
+        </header>
         {!user ? <AuthPanel /> : panelType === "cart" ? <CartPanel /> : <ProfilePanel />}
       </aside>
     </>
diff --git a/parfum-shop/src/components/landing/HeroSection.jsx b/parfum-shop/src/components/landing/HeroSection.jsx
index e005332..60a5d82 100644
--- a/parfum-shop/src/components/landing/HeroSection.jsx
+++ b/parfum-shop/src/components/landing/HeroSection.jsx
@@ -76,10 +76,10 @@ function HeroSection({
         </h1>
 
         <div className="hero-actions" ref={setActionsRef}>
-          <a href="#dufte" className="btn btn-primary">
+          <a href="#dufte" className="atmos-btn atmos-btn--primary">
             {"Aktuelle D\u00FCfte"}
           </a>
-          <Link to="/discovery-set" className="btn btn-secondary">
+          <Link to="/discovery-set" className="atmos-btn atmos-btn--secondary">
             Discovery Set
           </Link>
         </div>
diff --git a/parfum-shop/src/pages/DiscoverySetPage.css b/parfum-shop/src/pages/DiscoverySetPage.css
index b79755e..f29d0fc 100644
--- a/parfum-shop/src/pages/DiscoverySetPage.css
+++ b/parfum-shop/src/pages/DiscoverySetPage.css
@@ -170,39 +170,7 @@
   gap: var(--gap-xs);
 }
 
-.discovery-primary-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 48px;
-  padding: 0.8rem 1.35rem;
-  border: 1px solid var(--theme-accent-fill);
-  border-radius: 0;
-  background: var(--theme-accent-fill);
-  color: var(--theme-accent-contrast);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  letter-spacing: 0.12em;
-  line-height: 1.25;
-  text-align: center;
-  text-transform: uppercase;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    border-color var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out);
-}
-
-.discovery-primary-btn:hover,
-.discovery-primary-btn:focus-visible {
-  transform: translateY(-2px);
-  box-shadow: var(--theme-shadow-soft);
-}
-
-.discovery-primary-btn:active {
-  transform: translateY(0) scale(0.98);
-}
+/* Discovery CTAs use the global .atmos-btn system (see src/style/buttons.css). */
 
 .discovery-panel-actions p {
   margin: 0;
@@ -556,10 +524,8 @@
   min-width: min(100%, 22rem);
 }
 
-.discovery-final-actions .discovery-primary-btn {
-  border-color: rgba(255, 255, 255, 0.18);
-  background: #262626;
-}
+/* On the accent-filled final CTA, the `data-on-accent` wrapper auto-flips
+   .atmos-btn--primary to a white pill — no override needed here. */
 
 @media (max-width: 1180px) {
   .discovery-story-grid,
@@ -743,20 +709,12 @@
     gap: 0.25rem;
   }
 
-  .discovery-primary-btn {
-    min-height: 48px;
-    padding-inline: 1rem;
-    font-size: 0.76rem;
-    white-space: normal;
-  }
-
   .discovery-product-card {
     min-height: 360px;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .discovery-primary-btn,
   .discovery-product-card,
   .discovery-product-image img {
     transition: none;
diff --git a/parfum-shop/src/pages/DiscoverySetPage.jsx b/parfum-shop/src/pages/DiscoverySetPage.jsx
index 3026574..1c46a66 100644
--- a/parfum-shop/src/pages/DiscoverySetPage.jsx
+++ b/parfum-shop/src/pages/DiscoverySetPage.jsx
@@ -81,7 +81,11 @@ function DiscoveryOrderPanel({ onBuy }) {
       </div>
 
       <div className="discovery-panel-actions">
-        <button type="button" className="discovery-primary-btn" onClick={onBuy}>
+        <button
+          type="button"
+          className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--uppercase"
+          onClick={onBuy}
+        >
           Kaufen
         </button>
         <p>Nur das erste Set erstellt einen einmaligen CHF 48 Full-Size-Rabatt.</p>
@@ -265,7 +269,7 @@ function DiscoveryComparisonSection() {
 
 function DiscoveryFinalCta({ onBuy }) {
   return (
-    <section className="discovery-final-cta" data-reveal-group>
+    <section className="discovery-final-cta" data-reveal-group data-on-accent>
       <div>
         <span className="discovery-label" data-reveal="fade">
           Discovery Set
@@ -277,8 +281,12 @@ function DiscoveryFinalCta({ onBuy }) {
       </div>
 
       <div className="discovery-final-actions" data-reveal="fade">
-        <button type="button" className="discovery-primary-btn" onClick={onBuy}>
-          Kaufen
+        <button
+          type="button"
+          className="atmos-btn atmos-btn--primary atmos-btn--uppercase"
+          onClick={onBuy}
+        >
+          Discovery Set bestellen
         </button>
       </div>
     </section>
diff --git a/parfum-shop/src/pages/LandingPage.css b/parfum-shop/src/pages/LandingPage.css
index 83c1cd9..dc697fb 100644
--- a/parfum-shop/src/pages/LandingPage.css
+++ b/parfum-shop/src/pages/LandingPage.css
@@ -161,47 +161,7 @@ body.theme-light .hero-wordmark__image {
   will-change: transform, opacity;
 }
 
-.btn,
-.discovery-btn {
-  min-height: 48px;
-  border: none;
-  border-radius: var(--radius-lg);
-  padding: 0 clamp(1rem, 2vw, 1.35rem);
-  font-size: var(--text-sm);
-  cursor: pointer;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    opacity var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out),
-    border-color var(--duration-med) var(--ease-out);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn:hover,
-.discovery-btn:hover {
-  transform: translateY(-2px);
-}
-
-.btn:active,
-.discovery-btn:active {
-  transform: translateY(0) scale(0.98);
-}
-
-.btn-primary {
-  background: var(--theme-accent-fill);
-  color: var(--theme-accent-contrast);
-}
-
-.btn-secondary {
-  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
-  color: var(--theme-text);
-  border: 1px solid var(--theme-border-strong);
-  backdrop-filter: blur(10px);
-}
+/* Hero CTAs use the global .atmos-btn system (see src/style/buttons.css). */
 
 .hero-scroll {
   position: absolute;
@@ -587,11 +547,8 @@ body.theme-light .hero-wordmark__image {
   line-height: 1.62;
 }
 
-.discovery-btn {
+.discovery-copy .atmos-btn {
   margin-top: clamp(1.3rem, 3vw, 2.1rem);
-  background: var(--theme-surface);
-  color: var(--theme-text);
-
 }
 
 .discovery-banner {
@@ -719,7 +676,7 @@ body.theme-light .hero-wordmark__image {
     margin-top: 1.1rem;
   }
 
-  .hero-actions .btn {
+  .hero-actions .atmos-btn {
     min-height: 44px;
     padding-inline: 0.95rem;
     font-size: 0.78rem;
diff --git a/parfum-shop/src/pages/LandingPage.jsx b/parfum-shop/src/pages/LandingPage.jsx
index 18914f4..b28464c 100644
--- a/parfum-shop/src/pages/LandingPage.jsx
+++ b/parfum-shop/src/pages/LandingPage.jsx
@@ -554,7 +554,11 @@ function LandingPage() {
               <br />
               Verstehen, was funktioniert.
             </p>
-            <Link to="/discovery-set" className="discovery-btn" data-reveal="fade">
+            <Link
+              to="/discovery-set"
+              className="atmos-btn atmos-btn--invert"
+              data-reveal="fade"
+            >
               Discovery Set bestellen
             </Link>
           </div>
diff --git a/parfum-shop/src/pages/SmallBatchPage.jsx b/parfum-shop/src/pages/SmallBatchPage.jsx
index 3e00a6c..35b6e5a 100644
--- a/parfum-shop/src/pages/SmallBatchPage.jsx
+++ b/parfum-shop/src/pages/SmallBatchPage.jsx
@@ -136,7 +136,7 @@ function SmallBatchPage() {
             {state.error && <p className="small-message">{state.error}</p>}
             {state.loading && <p className="small-message">Loading access…</p>}
 
-            {loyalty.unlocked && state.releases.length > 0 && (
+            {loyalty.unlocked && (
               <section
                 className="release-grid"
                 data-reveal-group
diff --git a/parfum-shop/src/style/buttons.css b/parfum-shop/src/style/buttons.css
index 18a42fb..df1edcb 100644
--- a/parfum-shop/src/style/buttons.css
+++ b/parfum-shop/src/style/buttons.css
@@ -273,6 +273,13 @@
   letter-spacing: 0.12em;
 }
 
+/* Content distributed across the button (label left, icon right). */
+.atmos-btn--split {
+  justify-content: space-between;
+  text-align: left;
+  padding-inline: clamp(0.85rem, 1.6vw, 1.1rem);
+}
+
 /* Group helper — consistent spacing wherever buttons cluster. */
 .atmos-btn-row {
   display: flex;