add global btn and page layout stylings

2026-05-06 11:59:09 +02:00 · 2026-05-06 11:59:09 +02:00 · 365fcf0cae
commit 365fcf0cae
parent 8960ffd844
12 changed files with 794 additions and 745 deletions
--- 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>
      )}
--- 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;
  }
--- 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>
--- a/parfum-shop/src/components/ShopDrawer.css
+++ b/parfum-shop/src/components/ShopDrawer.css
--- 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>
    </>
--- 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>
--- 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;
--- 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>
--- 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;
--- 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>
--- 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
--- 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;