add responsive and scroll behaviour changes

2026-04-30 09:39:32 +02:00 · 2026-04-30 09:39:32 +02:00 · 283a7a5214
commit 283a7a5214
parent 2eea587e8b
22 changed files with 294 additions and 268 deletions
--- a/parfum-shop/package-lock.json
+++ b/parfum-shop/package-lock.json
@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "gsap": "^3.14.2",
+        "lenis": "^1.3.23",
        "react": "^19.2.4",
        "react-dom": "^19.2.4",
        "react-router": "^7.14.0"
@ -1778,6 +1779,37 @@
        "json-buffer": "3.0.1"
      }
    },
+    "node_modules/lenis": {
+      "version": "1.3.23",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.23.tgz",
+      "integrity": "sha512-YxYq3TJqj9sJNv0V9SkyQHejt14xwyIwgDaaMK89Uf9SxQfIszu+gTQSSphh6BWlLTNVKvvXAGkg+Zf+oFIevg==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*",
+        "playground",
+        "playground/*"
+      ],
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/levn": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
--- a/parfum-shop/package.json
+++ b/parfum-shop/package.json
@ -13,6 +13,7 @@
  },
  "dependencies": {
    "gsap": "^3.14.2",
+    "lenis": "^1.3.23",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "react-router": "^7.14.0"
--- a/parfum-shop/src/App.jsx
+++ b/parfum-shop/src/App.jsx
@ -14,6 +14,7 @@ import ScrollToTop from "./components/ScrollToTop";
 import ShopDrawer from "./components/ShopDrawer";
 import CartToast from "./components/CartToast";
 import { ProductTransitionProvider } from "./components/ProductTransition";
+import useLenisSmoothScroll from "./hooks/useLenisSmoothScroll";
 import useScrollTextReveal from "./hooks/useScrollTextReveal";
 import { ThemeProvider } from "./theme/ThemeContext";
 import "./style/textReveal.css";
@ -30,7 +31,9 @@ function App() {
  });
  const shouldFlushFooter =
    location.pathname === "/" || location.pathname.startsWith("/duft/");
+  const showSupportChatbot = location.pathname === "/";

+  useLenisSmoothScroll(location.pathname);
  useScrollTextReveal(routeContentRef, location.pathname);

  useEffect(() => {
@ -72,7 +75,7 @@ function App() {
        <ShopDrawer />
        <CartToast />
        <Footer flushTop={shouldFlushFooter} />
-        <SupportChatbot />
+        {showSupportChatbot && <SupportChatbot />}
      </ProductTransitionProvider>
    </ThemeProvider>
  );
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@ -5,87 +5,17 @@
  background: var(--theme-bg);
 }

-.detail-topbar {
-  position: fixed;
-  top: clamp(0.75rem, 2.1vw, 1.4rem);
-  right: var(--page-x);
-  left: var(--page-x);
-  z-index: 997;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--gap-sm);
-  min-height: clamp(3rem, 5.4vw, 3.5rem);
-  padding: 0;
-  border-bottom: 0;
-  pointer-events: none;
-}
-
-.back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.65rem;
-  min-height: 44px;
-  padding: 0.35rem 0;
-  border: 0;
-  background: transparent;
-  color: var(--theme-text);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  pointer-events: auto;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    opacity var(--duration-med) var(--ease-out);
-}
-
-.back-link:hover {
-  opacity: 0.68;
-  transform: translateX(-0.2rem);
-}
-
-.back-link-arrow {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  flex: 0 0 auto;
-  background: currentColor;
-  -webkit-mask: url("/icon-arrow-left.svg") center / contain no-repeat;
-  mask: url("/icon-arrow-left.svg") center / contain no-repeat;
-}
-
-.detail-topbar-meta {
-  display: none;
-  align-items: baseline;
-  justify-content: flex-end;
-  gap: var(--gap-xs);
-  min-width: 0;
-  flex-wrap: wrap;
-  text-align: right;
-  text-transform: uppercase;
-  pointer-events: auto;
-}
-
-.detail-topbar-meta span,
-.detail-topbar-meta strong,
 .eyebrow,
 .label-title {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
 }

-.detail-topbar-meta span,
 .eyebrow,
 .label-title {
  color: var(--theme-text-muted);
 }

-.detail-topbar-meta strong {
-  color: var(--theme-text);
-  font-weight: 500;
-  max-width: 100%;
-  overflow-wrap: anywhere;
-}
-
 .product-hero {
  position: relative;
  display: grid;
@ -359,9 +289,11 @@
  display: block;
  margin-bottom: 0.35rem;
  color: var(--theme-text);
-  font-size: var(--text-xl);
+  font-size: clamp(1.05rem, 1.4vw, 1.38rem);
  font-weight: 400;
  letter-spacing: 0;
+  line-height: 1.05;
+  white-space: nowrap;
 }

 .size-card small {
@ -407,7 +339,7 @@
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
-  border-radius: 999px;
+  border-radius: var(--radius-lg);
  background: var(--theme-accent);
  color: #fff;
  text-decoration: none;
@ -430,6 +362,7 @@
 .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;
@ -551,7 +484,7 @@

 .character-facts {
  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  max-width: 58rem;
@ -939,14 +872,22 @@
 }

 .detail-bottom-actions button {
-  padding: 0 1.05rem;
-  border-color: rgba(255, 255, 255, 0.18);
-  border-radius: 999px;
-  background: #262626;
-  color: #fff;
+  padding: 0 clamp(1rem, 2vw, 1.35rem);
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: #fff;
+  color: var(--theme-accent);
+  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;
@ -1128,19 +1069,6 @@
    padding: 0;
  }

-  .detail-topbar {
-    top: clamp(4.35rem, 14vw, 5.05rem);
-    z-index: 999;
-    right: clamp(0.75rem, 4vw, 1rem);
-    left: clamp(0.75rem, 4vw, 1rem);
-    align-items: center;
-    flex-direction: row;
-  }
-
-  .detail-topbar-meta {
-    display: none;
-  }
-
  .product-hero {
    grid-template-columns: 1fr;
    align-content: start;
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router";
+import { Link, useParams } from "react-router";
 import perfumes from "../data/perfumes";
 import SharedNavbar from "./SharedNavbar";
 import { useProductTransition } from "../transitions/ProductTransitionContext";
@ -14,6 +14,16 @@ const priceToCents = (price) => {
  return match ? Number(match[1]) * 100 : 0;
 };

+const getFullSizeImage = (perfume) => perfume.gallery?.[0] || perfume.image;
+
+const getSampleImage = (perfume) =>
+  perfume.gallery?.find((image) => image.toLowerCase().includes("sample")) ||
+  perfume.gallery?.[1] ||
+  perfume.image;
+
+const getImageForSize = (perfume, size) =>
+  size === "sample" ? getSampleImage(perfume) : getFullSizeImage(perfume);
+
 function ProductPurchasePanel({
  perfume,
  selectedSize,
@ -26,18 +36,18 @@ function ProductPurchasePanel({
  const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
  const selectedProductLabel = selectedSize === "sample" ? "Sample" : "Full Size";
  const sizeOptions = [
-    {
-      key: "sample",
-      title: "Sample 2ml",
-      price: perfume.prices.sample,
-      note: "Zum Testen, ca. 20 Anwendungen",
-    },
    {
      key: "full",
      title: "Full Size 50ml",
      price: perfume.prices.full,
      note: "Nachkauf, 500+ Anwendungen",
    },
+    {
+      key: "sample",
+      title: "Sample 2ml",
+      price: perfume.prices.sample,
+      note: "Zum Testen, ca. 20 Anwendungen",
+    },
  ];

  return (
@ -201,10 +211,6 @@ function ProductStorySection({ perfume }) {
            <span>Anlass</span>
            <p>{perfume.occasion}</p>
          </div>
-          <div>
-            <span>Lieferung</span>
-            <p>Versand in 1-2 Werktagen. Zustellung in der Regel in 5-6 Tagen.</p>
-          </div>
        </div>
      </div>

@ -469,7 +475,6 @@ function ProductRecommendations({ currentSlug, startProductTransition }) {
 }

 function ProductDetailContent({ perfumeSlug }) {
-  const navigate = useNavigate();
  const { addToCart, subscribeToProduct, user } = useShop();
  const { activeSlug, phase, startProductTransition } = useProductTransition();

@ -479,9 +484,9 @@ function ProductDetailContent({ perfumeSlug }) {
  );

  const [selectedImage, setSelectedImage] = useState(
-    perfume.gallery?.[0] || perfume.image
+    getImageForSize(perfume, "full")
  );
-  const [selectedSize, setSelectedSize] = useState("sample");
+  const [selectedSize, setSelectedSize] = useState("full");
  const [showReviewDetails, setShowReviewDetails] = useState(false);
  const [commentPage, setCommentPage] = useState(0);
  const selectedPriceCents = priceToCents(perfume.prices[selectedSize]);
@ -527,6 +532,11 @@ function ProductDetailContent({ perfumeSlug }) {

  const isTransitionArriving = activeSlug === perfume.slug && phase === "entering";

+  const handleSizeSelection = (size) => {
+    setSelectedSize(size);
+    setSelectedImage(getImageForSize(perfume, size));
+  };
+
  useEffect(() => {
    const interval = window.setInterval(() => {
      setCommentPage((prev) => (prev + 1) % safeCommentPages.length);
@ -537,27 +547,15 @@ function ProductDetailContent({ perfumeSlug }) {

  return (
    <div className={`detail-page ${isTransitionArriving ? "is-transition-arriving" : ""}`}>
-      <SharedNavbar variant="hero" />
+      <SharedNavbar variant="hero" brandMode="back" />

      <main className="shell">
-        <div className="detail-topbar" data-product-transition-reveal>
-          <button className="back-link" type="button" onClick={() => navigate("/")}>
-            <span className="back-link-arrow" aria-hidden="true" />
-            <span>Zurück zur Startseite</span>
-          </button>
-
-          <div className="detail-topbar-meta">
-            <span>Duftdetail</span>
-            <strong>{perfume.name}</strong>
-          </div>
-        </div>
-
        <ProductHero
          perfume={perfume}
          selectedImage={selectedImage}
          setSelectedImage={setSelectedImage}
          selectedSize={selectedSize}
-          setSelectedSize={setSelectedSize}
+          setSelectedSize={handleSizeSelection}
          selectedPriceCents={selectedPriceCents}
          discountPreviewCents={discountPreviewCents}
          addToCart={addToCart}
--- a/parfum-shop/src/components/SharedNavbar.jsx
+++ b/parfum-shop/src/components/SharedNavbar.jsx
@ -3,23 +3,33 @@ import { useShop } from "../shop/useShop";
 import { useTheme } from "../theme/useTheme";
 import "../style/navbar.css";

-function SharedNavbar({ variant = "hero", active = "" }) {
+function SharedNavbar({ variant = "hero", active = "", brandMode = "logo" }) {
  const { cart, openCart, openProfile, user } = useShop();
  const { isLight, toggleTheme } = useTheme();
  const cartLabel =
    cart.total_quantity > 0 ? `Cart ${cart.total_quantity}` : "Cart";
  const logoSrc =
    variant === "hero" ? "/atmos-logo-light.svg" : "/atmos-logo-dark.svg";
+  const brandIsBack = brandMode === "back";

  return (
    <nav className={`navbar navbar--${variant}`} aria-label="Hauptnavigation">
      <div className="nav-pill">
        <Link
          to="/"
-          className={`nav-link nav-link--brand ${active === "atmos" ? "active" : ""}`}
-          aria-label="Atmos Startseite"
+          className={`nav-link nav-link--brand ${brandIsBack ? "nav-link--back" : ""} ${
+            active === "atmos" ? "active" : ""
+          }`}
+          aria-label={brandIsBack ? "Zur Startseite" : "Atmos Startseite"}
        >
-          <img src={logoSrc} alt="" className="nav-brand-logo" />
+          {brandIsBack ? (
+            <>
+              <span className="nav-back-icon" aria-hidden="true" />
+              <span>Zurück</span>
+            </>
+          ) : (
+            <img src={logoSrc} alt="" className="nav-brand-logo" />
+          )}
        </Link>
        <Link
          to="/discovery-set"
--- a/parfum-shop/src/components/ShopDrawer.css
+++ b/parfum-shop/src/components/ShopDrawer.css
@ -535,7 +535,7 @@
 .cart-controls button,
 .cart-toast button,
 .subscription-row button {
-  border-radius: 999px;
+  border-radius: var(--radius-lg);
 }

 .drawer-primary,
--- a/parfum-shop/src/components/ShopDrawer.jsx
+++ b/parfum-shop/src/components/ShopDrawer.jsx
@ -460,7 +460,11 @@ function ShopDrawer() {
        className={`drawer-backdrop ${panelOpen ? "open" : ""}`}
        onClick={closePanel}
      />
-      <aside className={`shop-drawer ${panelOpen ? "open" : ""}`} aria-hidden={!panelOpen}>
+      <aside
+        className={`shop-drawer ${panelOpen ? "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">
--- a/parfum-shop/src/components/SupportChatbot.css
+++ b/parfum-shop/src/components/SupportChatbot.css
@ -278,12 +278,17 @@
 /* --- Design System Refinement Start --- */

 .chatbot-trigger {
-  right: max(0.9rem, env(safe-area-inset-right));
+  --chatbot-size: 48px;
+  right: max(
+    0.75rem,
+    calc((100vw - var(--container-wide)) * 0.25 - (var(--chatbot-size) * 0.5)),
+    env(safe-area-inset-right)
+  );
  bottom: max(0.9rem, env(safe-area-inset-bottom));
-  width: 52px;
-  height: 52px;
-  min-height: 52px;
-  min-width: 52px;
+  width: var(--chatbot-size);
+  height: var(--chatbot-size);
+  min-height: var(--chatbot-size);
+  min-width: var(--chatbot-size);
  padding: 0;
  display: inline-grid;
  place-items: center;
@ -298,8 +303,8 @@
 .chatbot-trigger-icon,
 .chatbot-close-icon {
  display: block;
-  width: 1.45rem;
-  height: 1.45rem;
+  width: 1.32rem;
+  height: 1.32rem;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
@ -353,7 +358,7 @@
 }

 .chatbot-send {
-  border-radius: 999px;
+  border-radius: var(--radius-lg);
 }

 .chatbot-chip,
--- a/parfum-shop/src/components/SupportChatbot.jsx
+++ b/parfum-shop/src/components/SupportChatbot.jsx
@ -220,7 +220,12 @@ function SupportChatbot() {
      </button>

      {isOpen && (
-        <div className="chatbot-window" role="dialog" aria-label="Support Chat">
+        <div
+          className="chatbot-window"
+          role="dialog"
+          aria-label="Support Chat"
+          data-lenis-prevent
+        >
          <div className="chatbot-header">
            <div className="chatbot-header-copy">
              <span className="chatbot-kicker">atmos SUPPORT</span>
--- a/parfum-shop/src/hooks/useLenisSmoothScroll.js
+++ b/parfum-shop/src/hooks/useLenisSmoothScroll.js
@ -0,0 +1,79 @@
+import { useEffect, useRef } from "react";
+import Lenis from "lenis";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+let scrollTriggerRegistered = false;
+
+const registerScrollTrigger = () => {
+  if (!scrollTriggerRegistered) {
+    gsap.registerPlugin(ScrollTrigger);
+    scrollTriggerRegistered = true;
+  }
+};
+
+function useLenisSmoothScroll(dependencyKey = "") {
+  const lenisRef = useRef(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+
+    if (prefersReducedMotion) {
+      return undefined;
+    }
+
+    registerScrollTrigger();
+
+    const lenis = new Lenis({
+      anchors: {
+        duration: 1.05,
+        easing: (time) => 1 - Math.pow(1 - time, 4),
+      },
+      duration: 1.1,
+      easing: (time) => Math.min(1, 1.001 - Math.pow(2, -10 * time)),
+      lerp: 0.09,
+      smoothWheel: true,
+      syncTouch: false,
+      wheelMultiplier: 0.9,
+    });
+    lenisRef.current = lenis;
+
+    const updateScrollTrigger = () => ScrollTrigger.update();
+    const raf = (time) => {
+      lenis.raf(time * 1000);
+    };
+
+    lenis.on("scroll", updateScrollTrigger);
+    gsap.ticker.add(raf);
+    gsap.ticker.lagSmoothing(0);
+
+    return () => {
+      lenis.off("scroll", updateScrollTrigger);
+      gsap.ticker.remove(raf);
+      lenis.destroy();
+      lenisRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+
+    const frame = window.requestAnimationFrame(() => {
+      lenisRef.current?.scrollTo(0, { immediate: true, force: true });
+      window.scrollTo(0, 0);
+      ScrollTrigger.refresh();
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [dependencyKey]);
+}
+
+export default useLenisSmoothScroll;
--- a/parfum-shop/src/hooks/useScrollTextReveal.js
+++ b/parfum-shop/src/hooks/useScrollTextReveal.js
@ -11,13 +11,13 @@ const registerGsap = () => {
  }
 };

-const createRevealLines = (element) => {
+const createRevealWords = (element) => {
  if (!element) {
    return [];
  }

  if (element.dataset.revealPrepared === "true") {
-    return Array.from(element.querySelectorAll(".reveal-line"));
+    return Array.from(element.querySelectorAll(".reveal-word"));
  }

  const originalHtml = element.innerHTML;
@ -33,16 +33,24 @@ const createRevealLines = (element) => {
  element.dataset.revealPrepared = "true";
  element.dataset.revealOriginalHtml = originalHtml;
  element.innerHTML = segments
-    .map(
-      (segment) =>
-        `<span class="reveal-line-mask"><span class="reveal-line">${segment}</span></span>`
-    )
+    .map((segment) => {
+      const words = segment
+        .split(/\s+/)
+        .filter(Boolean)
+        .map(
+          (word) =>
+            `<span class="reveal-word-mask"><span class="reveal-word">${word}</span></span>`
+        )
+        .join(" ");
+
+      return `<span class="reveal-line-mask reveal-word-line">${words}</span>`;
+    })
    .join("");

-  return Array.from(element.querySelectorAll(".reveal-line"));
+  return Array.from(element.querySelectorAll(".reveal-word"));
 };

-const restoreRevealLines = (element) => {
+const restoreRevealWords = (element) => {
  if (!element || element.dataset.revealPrepared !== "true") {
    return;
  }
@ -108,15 +116,15 @@ function useScrollTextReveal(scopeRef, dependencyKey = "") {
              const position = index === 0 ? 0 : "<0.16";

              if (item.dataset.reveal === "lines") {
-                const lines = createRevealLines(item);
+                const words = createRevealWords(item);

-                if (lines.length === 0) {
+                if (words.length === 0) {
                  return;
                }

                preparedElements.push(item);
                gsap.set(item, { autoAlpha: 1 });
-                gsap.set(lines, {
+                gsap.set(words, {
                  yPercent: 115,
                  rotate: 2.2,
                  transformOrigin: "0% 100%",
@ -124,12 +132,12 @@ function useScrollTextReveal(scopeRef, dependencyKey = "") {
                });

                timeline.to(
-                  lines,
+                  words,
                  {
                    yPercent: 0,
                    rotate: 0,
-                    duration: 1.18,
-                    stagger: 0.1,
+                    duration: 1.08,
+                    stagger: 0.065,
                    ease: "power4.out",
                    clearProps: "transform",
                  },
@ -160,7 +168,7 @@ function useScrollTextReveal(scopeRef, dependencyKey = "") {

    return () => {
      ctx.revert();
-      preparedElements.forEach((element) => restoreRevealLines(element));
+      preparedElements.forEach((element) => restoreRevealWords(element));
    };
  }, [scopeRef, dependencyKey]);
 }
--- a/parfum-shop/src/index.css
+++ b/parfum-shop/src/index.css
@ -69,7 +69,7 @@
 }

 html {
-  scroll-behavior: smooth;
+  scroll-behavior: auto;
 }

 body {
--- a/parfum-shop/src/main.jsx
+++ b/parfum-shop/src/main.jsx
@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router";
 import App from "./App";
 import { ShopProvider } from "./shop/ShopContext";
+import "lenis/dist/lenis.css";
 import "./index.css";
 import "./App.css";

--- a/parfum-shop/src/pages/AboutPage.css
+++ b/parfum-shop/src/pages/AboutPage.css
@ -304,7 +304,7 @@
  min-height: 48px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
-  border-radius: 999px;
+  border-radius: var(--radius-lg);
  color: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
--- a/parfum-shop/src/pages/DiscoverySetPage.css
+++ b/parfum-shop/src/pages/DiscoverySetPage.css
@ -5,50 +5,6 @@
  background: var(--theme-bg);
 }

-.discovery-topbar {
-  position: fixed;
-  top: clamp(0.75rem, 2.1vw, 1.4rem);
-  right: var(--page-x);
-  left: var(--page-x);
-  z-index: 997;
-  min-height: 44px;
-  margin-bottom: 0;
-  pointer-events: none;
-}
-
-.discovery-back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.65rem;
-  min-height: 44px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--theme-text);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  pointer-events: auto;
-  transition:
-    opacity var(--duration-med) var(--ease-out),
-    transform var(--duration-med) var(--ease-out);
-}
-
-.discovery-back-link:hover,
-.discovery-back-link:focus-visible {
-  opacity: 0.68;
-  transform: translateX(-0.2rem);
-}
-
-.discovery-back-arrow {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  flex: 0 0 auto;
-  background: currentColor;
-  -webkit-mask: url("/icon-arrow-left.svg") center / contain no-repeat;
-  mask: url("/icon-arrow-left.svg") center / contain no-repeat;
-}
-
 .discovery-kicker,
 .discovery-label,
 .discovery-price-row span,
@ -88,7 +44,7 @@
  top: clamp(6.5rem, 11vw, 9rem);
  left: 0;
  z-index: 5;
-  width: min(34vw, 540px);
+  width: min(26vw, 390px);
  min-width: 0;
 }

@ -96,7 +52,7 @@
  max-width: 9ch;
  margin: clamp(0.75rem, 1.5vw, 1.15rem) 0 clamp(1rem, 2vw, 1.4rem);
  color: var(--theme-text);
-  font-size: clamp(3.35rem, 6.2vw, 7.6rem);
+  font-size: clamp(2.6rem, 5.1vw, 6.4rem);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: 0;
@ -115,14 +71,14 @@

 .discovery-hero-visual {
  position: relative;
-  grid-column: 5 / 10;
+  grid-column: 4 / 10;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  z-index: 1;
  display: grid;
  place-items: center;
-  justify-items: end;
+  justify-items: center;
  width: 100%;
  min-height: inherit;
  margin: 0;
@ -133,11 +89,11 @@
  position: relative;
  z-index: 2;
  display: block;
-  width: min(100%, 520px);
-  height: min(56svh, 640px);
-  max-height: min(68svh, 760px);
-  border: 1px solid var(--theme-border);
-  object-fit: cover;
+  width: min(100%, 600px);
+  height: auto;
+  max-height: min(62svh, 700px);
+  border: 0;
+  object-fit: contain;
  object-position: center;
  filter: saturate(0.92) contrast(1.04) drop-shadow(0 34px 72px rgba(0, 0, 0, 0.42));
 }
@ -378,13 +334,12 @@

 .discovery-benefit {
  display: grid;
-  grid-template-columns: 1.75rem minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-sm);
  align-items: start;
  padding-top: 1rem;
 }

-.discovery-benefit-icon,
 .discovery-comparison-icon {
  display: inline-flex;
  align-items: center;
@ -663,8 +618,8 @@
  }

  .discovery-hero-visual img {
-    width: min(100%, 480px);
-    height: 100%;
+    width: min(74%, 430px);
+    height: auto;
    max-height: 100%;
  }

@ -688,13 +643,6 @@
 }

@media (max-width: 820px) {
-  .discovery-topbar {
-    top: clamp(4.35rem, 14vw, 5.05rem);
-    z-index: 999;
-    right: clamp(0.75rem, 4vw, 1rem);
-    left: clamp(0.75rem, 4vw, 1rem);
-  }
-
  .discovery-hero {
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vw, 1rem);
@ -735,7 +683,7 @@
  }

  .discovery-hero-visual img {
-    width: 100%;
+    width: min(82%, 320px);
  }

  .discovery-panel-facts,
@ -826,8 +774,7 @@
@media (prefers-reduced-motion: reduce) {
  .discovery-primary-btn,
  .discovery-product-card,
-  .discovery-product-image img,
-  .discovery-back-link {
+  .discovery-product-image img {
    transition: none;
  }
 }
--- a/parfum-shop/src/pages/DiscoverySetPage.jsx
+++ b/parfum-shop/src/pages/DiscoverySetPage.jsx
@ -1,4 +1,3 @@
-import { useNavigate } from "react-router";
 import perfumes from "../data/perfumes";
 import SharedNavbar from "../components/SharedNavbar";
 import { useShop } from "../shop/useShop";
@ -81,7 +80,7 @@ function DiscoveryOrderPanel({ onBuy }) {

      <div className="discovery-panel-actions">
        <button type="button" className="discovery-primary-btn" onClick={onBuy}>
-          Discovery Set bestellen – CHF 48.–
+          Kaufen
        </button>
        <p>Nur das erste Set erstellt einen einmaligen CHF 48 Full-Size-Rabatt.</p>
      </div>
@ -94,8 +93,8 @@ function DiscoveryHero({ onBuy }) {
    <section className="discovery-hero">
      <div className="discovery-hero-stage">
        <div className="discovery-hero-copy">
-          <span className="discovery-kicker">Der Einstieg</span>
-          <h1>Discovery Set</h1>
+          <span className="discovery-kicker">Discovery Set</span>
+          <h1>Der Einstieg</h1>

          <p className="discovery-intro">
            6 Düfte × 2ml. Jeden Duft eine Woche tragen. Verstehen, was
@ -126,7 +125,7 @@ function DiscoveryStorySection() {
        <span className="discovery-label" data-reveal="fade">
          Warum Discovery Set
        </span>
-        <h2 data-reveal="lines">Der klügere Einstieg in Nischendüfte.</h2>
+        <h2 data-reveal="lines">Der klügere Einstieg.</h2>
        <p data-reveal="fade">
          Nischen-Parfums sind keine Impulskäufe. Sie brauchen Zeit, um zu
          verstehen, wie sie auf deiner Haut funktionieren, wie sie sich im
@ -142,9 +141,6 @@ function DiscoveryStorySection() {

        {discoveryBenefits.map((benefit) => (
          <article className="discovery-benefit" key={benefit.title}>
-            <span className="discovery-benefit-icon" aria-hidden="true">
-              ✓
-            </span>
            <div>
              <strong>{benefit.title}</strong>
              <p>{benefit.text}</p>
@ -261,7 +257,7 @@ function DiscoveryFinalCta({ onBuy }) {

      <div className="discovery-final-actions" data-reveal="fade">
        <button type="button" className="discovery-primary-btn" onClick={onBuy}>
-          Discovery Set bestellen – CHF 48.–
+          Kaufen
        </button>
      </div>
    </section>
@ -269,7 +265,6 @@ function DiscoveryFinalCta({ onBuy }) {
 }

 function DiscoverySetPage() {
-  const navigate = useNavigate();
  const { addToCart } = useShop();
  const buyDiscoverySet = () =>
    addToCart("discovery-set", 1, "Discovery Set added.").catch(() => {});
@ -279,13 +274,6 @@ function DiscoverySetPage() {
      <SharedNavbar variant="hero" active="testen" />

      <main className="shell">
-        <div className="discovery-topbar">
-          <button className="discovery-back-link" type="button" onClick={() => navigate("/")}>
-            <span className="discovery-back-arrow" aria-hidden="true" />
-            <span>Zurück zur Startseite</span>
-          </button>
-        </div>
-
        <DiscoveryHero onBuy={buyDiscoverySet} />
        <DiscoveryStorySection />
        <DiscoveryIncludedSection />
--- a/parfum-shop/src/pages/LandingPage.css
+++ b/parfum-shop/src/pages/LandingPage.css
@ -140,7 +140,7 @@
 .discovery-btn {
  min-height: 48px;
  border: none;
-  border-radius: 999px;
+  border-radius: var(--radius-lg);
  padding: 0 clamp(1rem, 2vw, 1.35rem);
  font-size: var(--text-sm);
  cursor: pointer;
@ -223,6 +223,7 @@
 }

 .section-heading {
+  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-md);
@ -232,9 +233,11 @@

 .section-heading::after {
  content: "01 / Kollektion";
-  grid-column: 9 / span 3;
-  align-self: start;
-  padding-top: 0.3rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: min(32vw, 420px);
+  padding-top: 0.55rem;
  border-top: 1px solid var(--theme-border);
  color: var(--theme-text-muted);
  font-size: var(--text-xs);
@ -591,6 +594,7 @@

  .section-heading {
    grid-template-columns: 1fr;
+    padding-top: clamp(2.4rem, 6vw, 3.4rem);
  }

  .section-heading h2,
@ -662,6 +666,12 @@
    grid-template-columns: 1fr;
  }

+  .section-heading::after {
+    right: auto;
+    left: 0;
+    width: min(100%, 24rem);
+  }
+
  .product-card {
    min-height: clamp(340px, 118vw, 520px);
  }
--- a/parfum-shop/src/pages/SmallBatchPage.css
+++ b/parfum-shop/src/pages/SmallBatchPage.css
@ -78,7 +78,7 @@
  margin-top: 1.2rem;
  padding: 0 1.1rem;
  border: 1px solid #111;
-  border-radius: 999px;
+  border-radius: var(--radius-lg);
  background: #111;
  color: #fff;
  cursor: pointer;
--- a/parfum-shop/src/pages/SupportPage.css
+++ b/parfum-shop/src/pages/SupportPage.css
@ -204,7 +204,7 @@
  min-height: 48px;
  margin-top: 1.15rem;
  padding: 0 1.1rem;
-  border-radius: 999px;
+  border-radius: var(--radius-lg);
  background: var(--theme-accent);
  color: #fff;
  font-size: var(--text-sm);
@ -268,7 +268,7 @@
  min-height: 48px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
-  border-radius: 999px;
+  border-radius: var(--radius-lg);
  color: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
--- a/parfum-shop/src/style/navbar.css
+++ b/parfum-shop/src/style/navbar.css
@ -47,35 +47,24 @@
    transform var(--duration-med) var(--ease-out);
 }

-.nav-link::after {
-  content: "";
-  position: absolute;
-  right: 0.8rem;
-  bottom: 0.45rem;
-  left: 0.8rem;
-  height: 1px;
-  background: currentColor;
-  opacity: 0;
-  transform: scaleX(0.35);
-  transform-origin: center;
-  transition:
-    opacity var(--duration-med) var(--ease-out),
-    transform var(--duration-med) var(--ease-out);
-}
-
-.nav-link:hover::after,
-.nav-link.active::after {
-  opacity: 0.5;
-  transform: scaleX(1);
-}
-
 .nav-link--brand {
  padding-inline: clamp(0.75rem, 1.4vw, 1rem);
 }

-.nav-link--brand::after,
-.nav-theme-switch::after {
-  display: none;
+.nav-link--back {
+  gap: 0.5rem;
+  min-width: 0;
+  text-transform: none;
+}
+
+.nav-back-icon {
+  display: inline-block;
+  width: 0.95rem;
+  height: 0.95rem;
+  flex: 0 0 auto;
+  background: currentColor;
+  -webkit-mask: url("/icon-arrow-left.svg") center / contain no-repeat;
+  mask: url("/icon-arrow-left.svg") center / contain no-repeat;
 }

 .nav-brand-logo {
--- a/parfum-shop/src/style/textReveal.css
+++ b/parfum-shop/src/style/textReveal.css
@ -5,12 +5,30 @@
  margin-bottom: -0.08em;
 }

+.reveal-word-line {
+  overflow: visible;
+}
+
+.reveal-word-mask {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  padding-bottom: 0.08em;
+  margin-bottom: -0.08em;
+}
+
 .reveal-line {
  display: block;
  will-change: transform;
  backface-visibility: hidden;
 }

+.reveal-word {
+  display: inline-block;
+  will-change: transform;
+  backface-visibility: hidden;
+}
+
 [data-reveal="fade"] {
  will-change: transform, opacity;
 }