From 5ca71520114d757966604f543529415e47576207 Mon Sep 17 00:00:00 2001
From: Ermin Zoronjic <ermin.zoronjic@stud.fhgr.ch>
Date: Wed, 29 Apr 2026 00:39:49 +0200
Subject: [PATCH] add new product flow arrangement

---
 parfum-shop/src/App.jsx                       |    7 +-
 .../src/components/ProductDetailPage.css      | 2499 +++++++----------
 .../src/components/ProductDetailPage.jsx      |  929 +++---
 .../src/components/ProductTransition.css      |   40 +
 .../src/components/ProductTransition.jsx      |  327 +++
 parfum-shop/src/pages/LandingPage.jsx         |    4 +
 .../transitions/ProductTransitionContext.js   |    9 +
 7 files changed, 1882 insertions(+), 1933 deletions(-)
 create mode 100644 parfum-shop/src/components/ProductTransition.css
 create mode 100644 parfum-shop/src/components/ProductTransition.jsx
 create mode 100644 parfum-shop/src/transitions/ProductTransitionContext.js

diff --git a/parfum-shop/src/App.jsx b/parfum-shop/src/App.jsx
index ac50d50..c2fcc0a 100644
--- a/parfum-shop/src/App.jsx
+++ b/parfum-shop/src/App.jsx
@@ -13,6 +13,7 @@ import SupportChatbot from "./components/SupportChatbot";
 import ScrollToTop from "./components/ScrollToTop";
 import ShopDrawer from "./components/ShopDrawer";
 import CartToast from "./components/CartToast";
+import { ProductTransitionProvider } from "./components/ProductTransition";
 import useScrollTextReveal from "./hooks/useScrollTextReveal";
 import { ThemeProvider } from "./theme/ThemeContext";
 import "./style/textReveal.css";
@@ -52,10 +53,10 @@ function App() {
 
   return (
     <ThemeProvider value={{ theme, isLight, toggleTheme }}>
-      <>
+      <ProductTransitionProvider>
         <ScrollToTop />
 
-        <div ref={routeContentRef}>
+        <div ref={routeContentRef} data-route-content>
           <Routes>
             <Route path="/" element={<LandingPage />} />
             <Route path="/duft/:perfumeSlug" element={<ProductDetailPage />} />
@@ -72,7 +73,7 @@ function App() {
         <CartToast />
         <Footer flushTop={shouldFlushFooter} />
         <SupportChatbot />
-      </>
+      </ProductTransitionProvider>
     </ThemeProvider>
   );
 }
diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css
index 66c542f..c568363 100644
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@@ -1,1400 +1,217 @@
-/* --- Product Detail Page Wrapper Start --- */
-
 .detail-page {
   min-height: 100vh;
-  color: var(--theme-text);
-  padding: 26px 38px 0;
-  background:
-    linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
-    linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
-}
-
-.detail-shell {
-  background: var(--theme-surface);
-  border: 1px solid var(--theme-border);
-  border-radius: 0px;
-  width: 100%;
-  max-width: 1680px;
-  margin: 0 auto;
-  padding: 0 38px 0;
-}
-
-/* --- Product Detail Page Wrapper End --- */
-
-/* --- Topbar Start --- */
-
-.detail-topbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-  min-height: 72px;
-  padding: 18px 0;
-  border-bottom: 1px solid var(--theme-border);
-  margin-bottom: 28px;
-}
-
-.detail-topbar-meta {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  flex-wrap: wrap;
-  text-align: right;
-}
-
-.detail-topbar-label {
-  font-size: 11px;
-  letter-spacing: 0.22em;
-  color: var(--theme-text-muted);
-}
-
-.detail-topbar-name {
-  font-size: 13px;
-  letter-spacing: 0.16em;
-  color: var(--theme-text);
-}
-
-/* --- Topbar End --- */
-
-/* --- Back Link Start --- */
-
-.back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  background: none;
-  border: none;
   padding: 0;
-  font-size: 14px;
-  cursor: pointer;
   color: var(--theme-text);
-  letter-spacing: 0.01em;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.back-link:hover {
-  opacity: 0.65;
-  transform: translateX(-2px);
-}
-
-.back-link-arrow {
-  display: inline-block;
-  font-size: 14px;
-  line-height: 1;
-}
-
-/* --- Back Link End --- */
-
-/* --- Main Detail Layout Start --- */
-
-.detail-layout {
-  display: grid;
-  grid-template-columns: minmax(420px, 760px) minmax(0, 1fr);
-  gap: 34px;
-  align-items: start;
-}
-
-/* --- Main Detail Layout End --- */
-
-/* --- Left Column / Gallery Start --- */
-
-.detail-gallery {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 760px;
-  justify-self: center;
-}
-
-.detail-main-image {
-  background: #d9d9d9;
-  aspect-ratio: 1 / 1;
-  overflow: hidden;
-  border-radius: 0px;
-}
-
-.detail-main-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.detail-thumbs {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  margin-top: 14px;
-}
-
-.thumb-btn {
-  width: 92px;
-  height: 92px;
-  border: none;
-  border-radius: 0px;
-  background: var(--theme-paper);
-  padding: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.thumb-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
-}
-
-.thumb-btn.active {
-  outline: 1px solid #ff6a00;
-  outline-offset: 1px;
-}
-
-.thumb-btn img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* --- Left Column / Gallery End --- */
-
-/* --- Left Meta Top Start --- */
-
-.detail-meta-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1.2fr;
-  gap: 22px;
-}
-
-.detail-meta-grid--top {
-  margin-top: 22px;
-}
-
-.detail-meta-grid > div {
-  padding: 14px 0 0;
-  border-top: 1px solid var(--theme-border);
-}
-
-.detail-meta-grid span {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 11px;
-  letter-spacing: 0.22em;
-  color: var(--theme-text-muted);
-}
-
-.detail-meta-grid p {
-  font-size: 15px;
-  line-height: 1.55;
-  margin: 0;
-}
-
-/* --- Left Meta Top End --- */
-
-/* --- Duftstruktur Start --- */
-
-.detail-structure-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.95fr);
-  gap: 22px;
-  align-items: start;
-  margin-top: 26px;
-}
-
-.detail-structure {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 22px;
-  background: var(--theme-surface-soft);
-  border: 1px solid var(--theme-border);
-}
-
-.detail-structure h3 {
-  font-size: 13px;
-  letter-spacing: 0.24em;
-  font-weight: 500;
-  margin: 0;
-  color: var(--theme-text);
-}
-
-.structure-block {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px 14px 14px 16px;
-  background: rgba(255, 255, 255, 0.42);
-  border: 1px solid var(--theme-border);
-}
-
-.structure-block::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 3px;
-  height: 100%;
-}
-
-.structure-block:nth-of-type(1)::before {
-  background: #ffdecc;
-}
-
-.structure-block:nth-of-type(2)::before {
-  background: #ffad80;
-}
-
-.structure-block:nth-of-type(3)::before {
-  background: #ff6a00;
-}
-
-.structure-phase {
-  display: block;
-  margin-bottom: 0;
-  font-size: 11px;
-  letter-spacing: 0.18em;
-  color: var(--theme-text-muted);
-}
-
-.structure-block:nth-of-type(1) .structure-phase {
-  color: rgba(120, 74, 42, 0.88);
-}
-
-.structure-block:nth-of-type(2) .structure-phase {
-  color: rgba(110, 73, 45, 0.95);
-}
-
-.structure-block:nth-of-type(3) .structure-phase {
-  color: #a14b00;
-}
-
-.structure-tags-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-  width: 100%;
-}
-
-.structure-tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-  min-height: 42px;
-  padding: 10px 12px;
-  font-size: 14px;
-  line-height: 1.25;
-  text-align: center;
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-surface-soft);
-}
-
-.structure-block:nth-of-type(1) .structure-tag {
-  background: var(--theme-paper);
-  border-color: #f0e6df;
-  color: var(--theme-text-muted);
-}
-
-.structure-block:nth-of-type(2) .structure-tag {
-  background: #fff5ed;
-  border-color: #ffdecc;
-  color: var(--theme-text-muted);
-}
-
-.structure-block:nth-of-type(3) .structure-tag {
-  background: #ffece0;
-  border-color: #ffad80;
-  color: var(--theme-text);
-}
-
-/* --- Duftstruktur End --- */
-
-/* --- Struktur Info Box Start --- */
-
-.structure-info-box {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 22px;
-  background: #fff8f5;
-  border: 1px solid rgba(255, 106, 0, 0.18);
-}
-
-.structure-info-label {
-  font-size: 11px;
-  letter-spacing: 0.24em;
-  color: var(--theme-text-muted);
-}
-
-.structure-info-box p {
-  margin: 0;
-  font-size: 15px;
-  line-height: 1.7;
-  color: var(--theme-text-muted);
-}
-
-.structure-info-legend {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding-top: 4px;
-  border-top: 1px solid rgba(255, 106, 0, 0.12);
-}
-
-.structure-info-legend div {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 13px;
-  letter-spacing: 0.08em;
-  color: var(--theme-text-muted);
-}
-
-.structure-info-dot {
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-}
-
-.structure-info-dot--light {
-  background: #ffdecc;
-}
-
-.structure-info-dot--mid {
-  background: #ffad80;
-}
-
-.structure-info-dot--strong {
-  background: #ff6a00;
-}
-
-/* --- Struktur Info Box End --- */
-
-/* --- Mood Box Start --- */
-
-.mood-box {
-  margin-top: 22px;
-  background: #dfdfdf;
-  padding: 18px 20px;
-  border-left: 2px solid #ff6a00;
-}
-
-.mood-label {
-  display: block;
-  margin-bottom: 10px;
-  font-size: 11px;
-  letter-spacing: 0.2em;
-  color: var(--theme-text-muted);
-}
-
-.mood-box p {
-  font-size: 16px;
-  line-height: 1.65;
-  margin: 0;
-  color: var(--theme-text);
-}
-
-/* --- Mood Box End --- */
-
-/* --- Accordion / Dropdown Components Start --- */
-
-.accordion-group {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: 26px;
-}
-
-.accordion-item {
-  background: var(--theme-surface);
-  border: 1px solid var(--theme-border);
-  border-left: 3px solid #d9d9d9; /* Subtiler Rahmen im Normalzustand */
-  transition: border-color 0.2s ease, background 0.2s ease;
-}
-
-.accordion-item.is-open {
-  border-left-color: #ff6a00; /* Farbabgleich: Orange, wenn offen */
-  background: #fcfcfc;
-}
-
-.accordion-toggle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 18px 20px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 12px;
-  letter-spacing: 0.24em;
-  font-weight: 500;
-  color: var(--theme-text);
-  transition: opacity 0.2s ease;
-}
-
-.accordion-toggle:hover {
-  opacity: 0.7;
-}
-
-.accordion-icon {
-  font-size: 20px;
-  line-height: 1;
-  color: #ff6a00;
-  font-weight: 300;
-}
-
-.accordion-content {
-  padding: 0 20px 22px 20px;
-}
-
-/* Bereinigung der alten Strukturen für die Dropdowns */
-.detail-structure-layout {
-  margin-top: 6px; /* Angepasst für das Innere des Dropdowns */
-}
-
-.detail-structure {
-  background: transparent; /* Hintergrund wird jetzt vom Akkordeon gesteuert */
-  border: none;
-  padding: 0;
-}
-
-.mood-box-content p {
-  font-size: 16px;
-  line-height: 1.65;
-  margin: 0;
-  color: var(--theme-text);
-  padding-top: 6px;
-}
-
-/* --- Accordion / Dropdown Components End --- */
-
-/* --- Right Column Start --- */
-
-.detail-info {
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
-  padding-top: 4px;
-  min-width: 0;
-}
-
-.detail-heading {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid var(--theme-border);
-}
-
-.detail-heading-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.detail-kicker {
-  display: inline-block;
-  font-size: 11px;
-  letter-spacing: 0.24em;
-  color: var(--theme-text-muted);
-}
-
-.detail-heading h1 {
-  margin: 0;
-  font-size: 56px;
-  line-height: 0.92;
-  font-weight: 300;
-  letter-spacing: 0;
-  color: var(--theme-text);
-}
-
-.detail-heading p {
-  max-width: 640px;
-  font-size: 18px;
-  line-height: 1.45;
-  color: var(--theme-text-muted);
-  margin: 0;
-}
-
-.detail-section-block {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.label-title {
-  display: block;
-  margin-bottom: 0;
-  font-size: 11px;
-  letter-spacing: 0.24em;
-  color: var(--theme-text-muted);
-}
-
-/* --- Description Section Start --- */
-
-.detail-description-section {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  padding-top: 8px;
-}
-
-.detail-columns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 22px 30px;
-  padding-top: 0;
-}
-
-.detail-copy-block {
-  padding-top: 14px;
-  border-top: 1px solid var(--theme-border);
-}
-
-.detail-copy-label {
-  display: block;
-  margin-bottom: 10px;
-  font-size: 11px;
-  letter-spacing: 0.24em;
-  color: var(--theme-text-muted);
-}
-
-.detail-copy-block p {
-  white-space: pre-line;
-  line-height: 1.6;
-  margin: 0;
-  font-size: 16px;
-  color: var(--theme-text);
-}
-
-/* --- Description Section End --- */
-
-/* --- Delivery Box Start --- */
-
-.delivery-box {
-  margin-top: 4px;
-  padding: 20px;
-  border: 1px solid var(--theme-border);
   background: var(--theme-bg);
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
 }
 
-.delivery-box-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-
-.delivery-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 42px;
-  height: 28px;
-  padding: 0 10px;
-  border: 1px solid #ff6a00;
-  color: #ff6a00;
-  font-size: 12px;
-  letter-spacing: 0.16em;
-}
-
-.delivery-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px 20px;
-}
-
-.delivery-item {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.delivery-item--full {
-  grid-column: 1 / -1;
-  padding-top: 4px;
-  border-top: 1px solid var(--theme-border);
-}
-
-.delivery-item-label {
-  font-size: 11px;
-  letter-spacing: 0.2em;
-  color: var(--theme-text-muted);
-}
-
-.delivery-item p {
-  margin: 0;
-  font-size: 16px;
-  line-height: 1.45;
-  color: var(--theme-text);
-}
-
-/* --- Delivery Box End --- */
-
-/* --- Comment Spotlight Start --- */
-
-.comment-spotlight {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.comment-spotlight-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-
-.comment-dots {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.comment-dot {
-  width: 8px;
-  height: 8px;
-  border: none;
-  padding: 0;
-  background: #cfcfcf;
-  cursor: pointer;
-}
-
-.comment-dot.active {
-  background: #ff6a00;
-}
-
-.comment-spotlight-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-}
-
-.comment-card {
-  border: 1px solid var(--theme-border);
-  background: #ff6a0023;
-  padding: 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-height: 180px;
-}
-
-.comment-card-title {
-  font-size: 12px;
-  letter-spacing: 0.18em;
-  color: var(--theme-text-muted);
-}
-
-.comment-card p {
-  margin: 0;
-  font-size: 16px;
-  line-height: 1.55;
-  color: var(--theme-text);
-  flex: 1;
-}
-
-.comment-card-author {
-  font-size: 13px;
-  letter-spacing: 0.08em;
-  color: var(--theme-text-muted);
-}
-
-/* --- Comment Spotlight End --- */
-
-/* --- Review Section Start --- */
-
-.review-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.review-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 20px;
-}
-
-.review-section-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-width: 460px;
-}
-
-.review-section-text {
-  margin: 0;
-  font-size: 16px;
-  line-height: 1.55;
-  color: var(--theme-text-muted);
-}
-
-.review-section-main {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-shrink: 0;
-}
-
-.review-score {
-  font-size: 34px;
-  line-height: 1;
-  font-weight: 300;
-  letter-spacing: 0;
-  color: var(--theme-text);
-}
-
-.review-summary-copy {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
-}
-
-.review-stars {
-  font-size: 15px;
-  letter-spacing: 0.18em;
-  color: #ff6a00;
-}
-
-.review-count {
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  color: var(--theme-text-muted);
-}
-
-.review-panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  z-index: 8;
-}
-
-.review-panel.is-open {
-  z-index: 20;
-}
-
-.review-toggle {
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 14px;
-  width: 100%;
-  border: 1px solid var(--theme-border);
-  background: transparent;
-  padding: 12px 14px;
-  font-size: 13px;
-  letter-spacing: 0.08em;
-  color: var(--theme-text);
-  cursor: pointer;
-  transition: border-color 0.2s ease, background 0.2s ease;
-}
-
-.review-toggle:hover {
-  border-color: var(--theme-border);
-  background: rgba(255, 255, 255, 0.45);
-}
-
-.review-panel.is-open .review-toggle {
-  border-color: var(--theme-border);
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.review-toggle-icon {
-  font-size: 18px;
-  line-height: 1;
-  transition: transform 0.2s ease;
-}
-
-.review-toggle-icon.open {
-  transform: rotate(45deg);
-}
-
-.review-popover {
-  position: absolute;
-  top: calc(100% + 12px);
-  left: 0;
+.detail-page .navbar--light {
+  position: fixed;
+  top: clamp(0.75rem, 2.1vw, 1.4rem);
   right: 0;
-  z-index: 30;
-}
-
-.review-popover::before {
-  content: "";
-  position: absolute;
-  top: -6px;
-  right: 28px;
-  width: 12px;
-  height: 12px;
-  background: var(--theme-bg);
-  border-left: 1px solid var(--theme-border);
-  border-top: 1px solid var(--theme-border);
-  transform: rotate(45deg);
-}
-
-.review-details {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-bg);
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
-}
-
-.review-detail-row {
-  display: grid;
-  grid-template-columns: 86px 1fr 34px;
-  align-items: center;
-  gap: 12px;
-}
-
-.review-detail-label {
-  font-size: 11px;
-  letter-spacing: 0.18em;
-  color: var(--theme-text-muted);
-}
-
-.review-detail-bar {
-  position: relative;
-  height: 1px;
-  background: #cdcdcd;
-  overflow: hidden;
-}
-
-.review-detail-fill {
-  position: absolute;
-  inset: 0 auto 0 0;
-  height: 100%;
-  background: #ff6a00;
-}
-
-.review-detail-value {
-  font-size: 13px;
-  color: var(--theme-text);
-  text-align: right;
-}
-
-.review-write-button {
-  margin-top: 4px;
-  border: 1px solid var(--theme-border);
-  background: var(--theme-paper);
-  color: var(--theme-text-muted);
-  padding: 11px 14px;
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  cursor: not-allowed;
-}
-
-/* --- Review Section End --- */
-
-/* --- Right Column End --- */
-
-/* --- Material Tags Start --- */
-
-.material-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.material-tags span {
-  display: inline-flex;
-  align-items: center;
-  min-height: 36px;
-  padding: 8px 14px;
-  border: 1px solid var(--theme-border);
-  border-radius: 0px;
-  background: transparent;
-  font-size: 14px;
-  user-select: none;
-}
-
-/* --- Material Tags End --- */
-
-/* --- Size Selection Start --- */
-
-.size-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-.size-card {
-  border: 1px solid var(--theme-border);
-  border-radius: 0px;
-  background: var(--theme-paper);
-  padding: 20px 18px 18px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
-}
-
-.size-card:hover {
-  transform: translateY(-1px);
-  border-color: var(--theme-border);
-}
-
-.size-card.active {
-  border-color: #ff6a00;
-}
-
-.size-title {
-  display: block;
-  margin-bottom: 10px;
-  font-size: 13px;
-  letter-spacing: 0.02em;
-  color: var(--theme-text);
-}
-
-.size-card strong {
-  display: block;
-  font-size: 26px;
-  font-weight: 400;
-  margin-bottom: 8px;
-  letter-spacing: 0;
-}
-
-.size-card small {
-  font-size: 12px;
-  color: var(--theme-text-muted);
-}
-
-/* --- Size Selection End --- */
-
-/* --- Discovery Hinweis + Kaufen Button Start --- */
-
-.discovery-note {
-  background: #1f1f1f;
-  color: #fff;
-  padding: 16px 16px;
-  border-radius: 0px;
-  justify-content: space-between;
-  display: flex;
-  gap: 20px;
-  align-items: center;
-}
-
-.discovery-note-text strong {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.discovery-note-text p {
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--theme-text-muted);
-  margin: 0;
-  max-width: 520px;
-}
-
-.discovery-note-text .discount-preview {
-  margin-top: 8px;
-  color: #fff;
-}
-
-.discovery-note-btn {
-  border: none;
-  border-radius: 999px;
-  background: #ff6a00;
-  color: #fff;
-  padding: 12px 18px;
-  font-size: 14px;
-  cursor: pointer;
-  margin-left: auto;
-  flex-shrink: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.discovery-note-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
-}
-
-.discovery-note-btn:active {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  background: rgba(255, 106, 0, 0.8);
-}
-
-.buy-button {
-  width: 100%;
-  border: none;
-  border-radius: 0px;
-  background: #ff6a00;
-  color: #fff;
-  padding: 18px;
-  font-size: 15px;
-  letter-spacing: 0.12em;
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
-}
-
-.buy-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
-}
-
-.buy-button:active {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  background: rgba(255, 106, 0, 0.8);
-}
-
-.restock-button {
-  width: 100%;
-  min-height: 48px;
-  margin-top: 10px;
-  border: 1px solid var(--theme-border);
-  border-radius: 0;
-  background: var(--theme-surface-soft);
-  color: var(--theme-text);
-  font-size: 12px;
-  letter-spacing: 0.13em;
-  cursor: pointer;
-}
-
-.restock-button:hover {
-  outline: 1px solid #ff6a00;
-}
-
-/* --- Discovery Hinweis + Kaufen Button End --- */
-
-/* --- Bottom CTA Start --- */
-
-.detail-bottom-cta {
-  margin-top: 40px;
-  padding: 40px 38px;
-  background: #ff6a00;
-  border-radius: 0px;
-}
-
-.detail-bottom-cta h2 {
-  margin: 0;
-  font-size: 42px;
-  line-height: 0.95;
-  font-weight: 300;
-  letter-spacing: 0;
-  color: #fff;
-}
-
-.detail-bottom-cta p {
-  margin-top: 18px;
-  font-size: 16px;
-  line-height: 1.5;
-  color: #fff;
-}
-
-.detail-bottom-actions {
-  display: flex;
-  gap: 16px;
-  margin-top: 26px;
-}
-
-.detail-bottom-actions button {
-  border: none;
-  border-radius: 999px;
-  padding: 12px 18px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-  background: var(--theme-paper);
-  color: #ff6a00;
-}
-
-.detail-bottom-actions button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
-}
-
-.detail-bottom-actions button:active {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  background: rgba(255, 255, 255, 0.8);
-}
-
-/* --- Bottom CTA End --- */
-
-/* --- Responsive Start --- */
-
-@media (max-width: 1200px) {
-  .detail-structure-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .detail-layout {
-    grid-template-columns: minmax(380px, 680px) minmax(0, 1fr);
-    gap: 28px;
-  }
-
-  .detail-gallery {
-    max-width: 680px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .detail-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .detail-gallery {
-    width: min(100%, 720px);
-  }
-
-  .detail-info {
-    gap: 24px;
-  }
-
-  .detail-heading h1 {
-    font-size: 42px;
-  }
-
-  .detail-heading p {
-    font-size: 17px;
-  }
-}
-
-@media (max-width: 700px) {
-  .detail-page {
-    padding: 18px 14px 0;
-  }
-
-  .detail-shell {
-    padding: 0 16px 0;
-  }
-
-  .detail-layout {
-    gap: 24px;
-  }
-
-  .detail-columns,
-  .detail-meta-grid,
-  .size-grid,
-  .detail-bottom-actions,
-  .delivery-grid,
-  .comment-spotlight-grid {
-    grid-template-columns: 1fr;
-    display: grid;
-  }
-
-  .structure-tags-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .detail-bottom-actions button {
-    min-width: 100%;
-  }
-
-  .detail-thumbs {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  .thumb-btn {
-    width: 78px;
-    height: 78px;
-  }
-
-  .detail-topbar {
-    flex-direction: column;
-    align-items: flex-start;
-    min-height: auto;
-    padding: 16px 0;
-  }
-
-  .detail-topbar-meta {
-    text-align: left;
-    gap: 8px;
-  }
-
-  .detail-heading h1 {
-    font-size: 34px;
-  }
-
-  .detail-heading p {
-    font-size: 16px;
-  }
-
-  .detail-bottom-cta {
-    padding: 32px 20px;
-  }
-
-  .detail-bottom-cta h2 {
-    font-size: 34px;
-  }
-
-  .detail-bottom-cta p {
-    font-size: 15px;
-  }
-
-  .discovery-note {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .discovery-note-btn {
-    margin-left: 0;
-  }
-
-  .review-section-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .review-section-main {
-    align-items: flex-start;
-  }
-
-  .review-summary-copy {
-    align-items: flex-start;
-  }
-
-  .review-popover {
-    position: static;
-  }
-
-  .review-popover::before {
-    display: none;
-  }
-
-  .review-details {
-    box-shadow: none;
-  }
-
-  .review-detail-row {
-    grid-template-columns: 72px 1fr 30px;
-    gap: 10px;
-  }
-}
-
-@media (max-width: 480px) {
-  .detail-page {
-    padding: 12px 10px 0;
-  }
-
-  .detail-shell {
-    padding: 0 12px 0;
-  }
-
-  .structure-tags-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .detail-bottom-cta {
-    padding: 28px 16px;
-  }
-}
-
-/* --- Responsive End --- */
-
-
-/* --- Design System Refinement Start --- */
-
-.detail-page {
-  padding: clamp(1rem, 3vw, 2.4rem) var(--page-x) 0;
-  background:
-    radial-gradient(circle at 12% 8%, rgba(var(--theme-accent-rgb) / 0.13), transparent 28rem),
-    linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08)),
-    var(--theme-bg);
+  left: 0;
+  z-index: 998;
+  margin-bottom: 0;
+  padding-top: 0;
 }
 
 .detail-shell {
   width: var(--container-wide);
-  max-width: none;
-  padding: 0 clamp(1rem, 3vw, 2.4rem) clamp(2rem, 5vw, 4rem);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--theme-shadow);
+  margin: 0 auto;
+  padding: 0 0 clamp(2.2rem, 6vw, 5rem);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
 }
 
 .detail-topbar {
-  min-height: clamp(4rem, 7vw, 5rem);
+  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);
-  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
-  padding-block: clamp(1rem, 2vw, 1.35rem);
-}
-
-.back-link,
-.discovery-note-btn,
-.buy-button,
-.restock-button,
-.review-toggle,
-.review-write-button,
-.detail-bottom-actions button,
-.accordion-toggle,
-.thumb-btn,
-.size-card,
-.comment-dot {
-  min-height: 44px;
+  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);
 }
 
-.detail-layout {
-  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
-  gap: var(--gap-lg);
+.back-link:hover {
+  opacity: 0.68;
+  transform: translateX(-0.2rem);
 }
 
-.detail-gallery {
-  position: sticky;
-  top: clamp(1rem, 3vw, 2rem);
-  max-width: none;
+.back-link-arrow {
+  line-height: 1;
 }
 
-.detail-main-image,
-.thumb-btn,
-.detail-structure,
-.structure-block,
-.structure-info-box,
-.accordion-item,
-.delivery-box,
-.comment-card,
-.review-toggle,
-.review-details,
-.material-tags span,
-.size-card,
-.discovery-note,
-.detail-bottom-cta {
-  border-radius: var(--radius-lg);
-}
-
-.detail-main-image {
-  background:
-    radial-gradient(circle at 50% 54%, rgba(var(--theme-accent-rgb) / 0.08), transparent 54%),
-    var(--theme-paper);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
-}
-
-.detail-main-image img,
-.thumb-btn img {
-  height: 100%;
-}
-
-.detail-thumbs {
+.detail-topbar-meta {
+  display: none;
+  align-items: baseline;
+  justify-content: flex-end;
   gap: var(--gap-xs);
-  margin-top: 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;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--gap-md);
+  align-items: center;
+  min-height: 100svh;
+  padding-block: 0;
+  border-bottom: 0;
+  isolation: isolate;
+}
+
+.product-media-column {
+  position: relative;
+  grid-column: 1 / -1;
+  grid-row: 1;
+  display: grid;
+  place-items: center;
+  min-height: inherit;
+  min-width: 0;
+}
+
+.product-hero-visual {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  min-height: inherit;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+}
+
+.product-hero-visual::before {
+  display: none;
+}
+
+.product-hero-copy {
+  position: absolute;
+  top: clamp(6.5rem, 11vw, 9rem);
+  left: 0;
+  z-index: 2;
+  width: min(26vw, 390px);
+}
+
+.product-hero-copy span {
+  display: block;
+  margin-bottom: clamp(0.75rem, 1.5vw, 1.15rem);
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+
+.product-hero-copy h1 {
+  margin: 0;
+  color: var(--theme-text);
+  font-size: clamp(2.6rem, 5.1vw, 6.4rem);
+  font-weight: 300;
+  line-height: 0.9;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.product-hero-image {
+  position: relative;
+  z-index: 1;
+  width: min(36vw, 600px);
+  max-height: min(62svh, 700px);
+  height: auto;
+  object-fit: contain;
+  display: block;
+  filter: drop-shadow(0 34px 72px rgba(0, 0, 0, 0.42));
+}
+
+.is-transition-arriving .product-hero-image,
+.is-transition-arriving [data-product-transition-reveal] {
+  opacity: 0;
+}
+
+.product-thumbs {
+  position: absolute;
+  top: calc(50% + min(19vw, 318px) + clamp(0.75rem, 1.5vw, 1.2rem));
+  left: 50%;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  gap: var(--gap-xs);
+  margin-top: 0;
+  transform: translateX(-50%);
 }
 
 .thumb-btn {
   width: clamp(4.8rem, 7vw, 6.25rem);
   height: clamp(4.8rem, 7vw, 6.25rem);
+  min-height: 44px;
+  padding: 0;
   border: 1px solid var(--theme-border);
+  background: var(--theme-paper);
   overflow: hidden;
+  cursor: pointer;
+  transition:
+    transform var(--duration-med) var(--ease-out),
+    border-color var(--duration-med) var(--ease-out),
+    box-shadow var(--duration-med) var(--ease-out);
+}
+
+.thumb-btn:hover,
+.thumb-btn:focus-visible {
+  transform: translateY(-2px);
+  border-color: rgba(var(--theme-accent-rgb) / 0.62);
+  box-shadow: var(--theme-shadow-soft);
 }
 
 .thumb-btn.active {
@@ -1402,275 +219,955 @@
   outline-offset: 3px;
 }
 
-.detail-meta-grid {
+.thumb-btn img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.hero-fact-grid {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  z-index: 3;
+  width: min(22vw, 310px);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--gap-md);
+  margin-top: 0;
+  transform: translateY(-42%);
+}
+
+.hero-fact-grid div,
+.character-facts div,
+.meta-card,
+.delivery-grid div {
+  padding-top: 1rem;
+  border-top: 1px solid var(--theme-border);
+}
+
+.hero-fact-grid span,
+.character-facts span,
+.meta-card span,
+.delivery-grid span,
+.comment-card span,
+.review-detail-row span {
+  display: block;
+  margin-bottom: 0.55rem;
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.hero-fact-grid p,
+.character-facts p,
+.meta-card p,
+.delivery-grid p {
+  margin: 0;
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  line-height: 1.55;
+}
+
+.product-purchase-panel {
+  position: relative;
+  grid-column: 10 / -1;
+  grid-row: 1;
+  z-index: 4;
+  justify-self: end;
+  align-self: center;
+  width: min(100%, 390px);
+  max-height: none;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(1rem, 1.8vw, 1.45rem);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: none;
+}
+
+.purchase-price-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
   gap: var(--gap-sm);
 }
 
-.detail-meta-grid--top,
-.accordion-group {
-  margin-top: var(--gap-md);
+.purchase-price-row span {
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
 }
 
-.detail-info {
-  gap: clamp(1.4rem, 2.5vw, 2rem);
+.purchase-price-row strong {
+  color: var(--theme-text);
+  font-size: clamp(1.45rem, 2.3vw, 2rem);
+  font-weight: 400;
+  letter-spacing: 0;
 }
 
-.detail-heading {
-  padding-bottom: var(--gap-sm);
+.purchase-size-group,
+.purchase-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
 }
 
-.detail-heading h1 {
-  font-size: clamp(2.8rem, 6.5vw, 7.2rem);
-  line-height: 0.9;
+.size-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--gap-xs);
+}
+
+.size-card {
+  min-height: 112px;
+  padding: clamp(0.85rem, 1.4vw, 1.05rem);
+  border: 1px solid var(--theme-border);
+  background: var(--theme-paper);
+  color: var(--theme-text);
+  text-align: left;
+  cursor: pointer;
+  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);
+}
+
+.size-card:hover,
+.size-card:focus-visible {
+  transform: translateY(-2px);
+  border-color: rgba(var(--theme-accent-rgb) / 0.58);
+  box-shadow: var(--theme-shadow-soft);
+}
+
+.size-card.active {
+  border-color: var(--theme-accent);
+  background:
+    linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.12), transparent 62%),
+    var(--theme-paper);
+}
+
+.size-title {
+  display: block;
+  margin-bottom: 0.65rem;
+  color: var(--theme-text);
+  font-size: var(--text-sm);
+}
+
+.size-card strong {
+  display: block;
+  margin-bottom: 0.35rem;
+  color: var(--theme-text);
+  font-size: var(--text-xl);
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.size-card small {
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  line-height: 1.4;
+}
+
+.purchase-discovery-note {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  padding: clamp(0.85rem, 1.45vw, 1rem) 0 0;
+  border-top: 1px solid var(--theme-border);
+  background: transparent;
+}
+
+.purchase-discovery-note strong {
+  display: block;
+  margin-bottom: 0.25rem;
+  color: var(--theme-text);
+  font-weight: 500;
+}
+
+.purchase-discovery-note p {
+  max-width: 38rem;
+  margin: 0;
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  line-height: 1.42;
+}
+
+.purchase-discovery-note .discount-preview {
+  margin-top: 0.5rem;
+  color: #fff;
+}
+
+.purchase-discovery-note a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0 1rem;
+  border-radius: 999px;
+  background: var(--theme-accent);
+  color: #fff;
+  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);
+  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);
+  background: var(--theme-accent);
+  color: #fff;
+}
+
+.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);
+}
+
+.product-story-grid,
+.product-meta-section {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+  gap: clamp(1.5rem, 5vw, 6rem);
+  align-items: stretch;
+  padding-block: clamp(4rem, 9vw, 9rem);
+  border-top: 0;
+}
+
+.product-story-grid {
+  margin-top: clamp(4rem, 8vw, 8rem);
+}
+
+.story-copy {
+  align-self: center;
+  max-width: 58rem;
+}
+
+.story-copy h2,
+.section-intro h2,
+.reviews-heading h2,
+.recommendation-heading h2,
+.detail-bottom-cta h2 {
+  margin: 0.85rem 0 0;
+  color: var(--theme-text);
+  font-size: clamp(2.2rem, 5.6vw, 6rem);
+  font-weight: 300;
+  line-height: 0.94;
   letter-spacing: 0;
   text-wrap: balance;
 }
 
-.detail-heading p {
+.story-copy p,
+.section-intro p,
+.reviews-heading p,
+.detail-bottom-cta p {
   max-width: var(--text-measure);
+  margin: 1.25rem 0 0;
+  color: var(--theme-text-muted);
   font-size: var(--text-lg);
-  line-height: 1.5;
+  line-height: 1.62;
 }
 
-.label-title,
-.detail-kicker,
-.detail-topbar-label,
-.detail-copy-label,
-.detail-meta-grid span,
-.structure-phase,
-.structure-info-label,
-.delivery-item-label,
-.comment-card-title,
-.review-detail-label {
+.story-visual-panel {
+  min-height: clamp(360px, 42vw, 620px);
+  display: flex;
+  align-items: flex-end;
+  padding: clamp(1.2rem, 3vw, 2.4rem);
+  border: 1px solid var(--theme-border);
+  background:
+    radial-gradient(circle at 66% 32%, rgba(255, 255, 255, 0.11), transparent 14rem),
+    radial-gradient(circle at 38% 68%, rgba(var(--theme-accent-rgb) / 0.1), transparent 17rem),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
+    var(--theme-paper);
+}
+
+.character-facts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--gap-sm);
+  margin-top: clamp(1.4rem, 3vw, 2.4rem);
+  max-width: 58rem;
+}
+
+.character-facts div:last-child {
+  grid-column: 1 / -1;
+}
+
+.story-visual-panel > div {
+  width: 100%;
+}
+
+.story-visual-panel span:first-child {
+  display: block;
+  margin-bottom: var(--gap-sm);
+  color: var(--theme-text-muted);
   font-size: var(--text-xs);
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
 }
 
 .material-tags {
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--gap-xs);
 }
 
 .material-tags span {
+  display: inline-flex;
+  align-items: center;
   min-height: 40px;
-  background: color-mix(in srgb, var(--theme-surface-soft) 76%, transparent);
+  padding: 0.55rem 0.85rem;
+  border: 1px solid var(--theme-border);
+  background: rgba(255, 255, 255, 0.035);
+  color: var(--theme-text);
+  font-size: var(--text-sm);
 }
 
-.size-grid {
+.product-structure-section,
+.product-reviews-section,
+.recommendation-section {
+  position: relative;
+  padding-block: clamp(3rem, 8vw, 8rem);
+  border-top: 0;
+}
+
+.product-story-grid::before,
+.product-structure-section::before,
+.product-meta-section::before,
+.product-reviews-section::before,
+.recommendation-section::before {
+  position: absolute;
+  top: clamp(1.2rem, 3vw, 2rem);
+  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);
+  letter-spacing: 0.16em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.product-story-grid::before {
+  content: "01 / Charakter";
+}
+
+.product-structure-section::before {
+  content: "02 / Struktur";
+}
+
+.product-meta-section::before {
+  content: "03 / Atelier";
+}
+
+.product-reviews-section::before {
+  content: "04 / Resonanz";
+}
+
+.recommendation-section::before {
+  content: "05 / Kollektion";
+}
+
+.section-intro {
+  max-width: 74rem;
+}
+
+.structure-timeline {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--gap-sm);
+  margin-top: clamp(1.6rem, 4vw, 4rem);
 }
 
-.size-card {
-  padding: clamp(1rem, 2vw, 1.35rem);
-  text-align: left;
+.structure-phase-card,
+.comment-card,
+.delivery-panel,
+.review-details,
+.recommendation-card {
+  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);
 }
 
-.size-card:hover,
-.size-card:focus-visible,
-.thumb-btn:hover,
-.thumb-btn:focus-visible {
-  border-color: rgba(var(--theme-accent-rgb) / 0.56);
-  box-shadow: var(--theme-shadow-soft);
+.structure-phase-card {
+  min-height: 280px;
+  padding: clamp(1rem, 2vw, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--gap-md);
 }
 
-.size-card strong {
-  font-size: var(--text-xl);
-  letter-spacing: 0;
+.structure-index {
+  color: var(--theme-accent);
+  font-size: var(--text-sm);
+  letter-spacing: 0.2em;
 }
 
-.accordion-group {
+.structure-phase-card h3 {
+  margin: 0;
+  color: var(--theme-text);
+  font-size: var(--text-lg);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.structure-phase-card div {
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--gap-xs);
 }
 
-.accordion-item {
-  border-left-width: 1px;
+.structure-phase-card div span {
+  padding: 0.55rem 0.75rem;
+  border: 1px solid var(--theme-border);
+  color: var(--theme-text-muted);
+  font-size: var(--text-sm);
 }
 
-.accordion-item.is-open {
-  background: color-mix(in srgb, var(--theme-surface-soft) 78%, transparent);
+.product-meta-section {
+  align-items: start;
 }
 
-.accordion-toggle {
-  padding: clamp(1rem, 2vw, 1.25rem);
-}
-
-.accordion-content {
-  padding: 0 clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
-}
-
-.detail-structure-layout {
+.meta-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: var(--gap-sm);
 }
 
-.structure-tags-grid {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
+.meta-card {
+  min-height: 132px;
 }
 
-.structure-tag {
-  min-height: 44px;
+.delivery-panel {
+  padding: clamp(1.1rem, 2.4vw, 1.7rem);
 }
 
-.structure-info-box,
-.structure-block,
-.delivery-box,
-.comment-card,
-.review-details,
-.review-toggle {
-  background: var(--theme-surface-soft);
+.delivery-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  padding-bottom: var(--gap-sm);
+  border-bottom: 1px solid var(--theme-border);
 }
 
-.structure-block:nth-of-type(1) .structure-tag,
-.structure-block:nth-of-type(2) .structure-tag,
-.structure-block:nth-of-type(3) .structure-tag {
-  background: var(--theme-paper);
+.delivery-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 30px;
+  border: 1px solid var(--theme-accent);
+  color: var(--theme-accent);
+  font-size: var(--text-xs);
+  letter-spacing: 0.16em;
+}
+
+.delivery-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--gap-sm);
+  margin-top: var(--gap-sm);
+}
+
+.delivery-grid div:last-child {
+  grid-column: 1 / -1;
+}
+
+.reviews-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: var(--gap-lg);
+}
+
+.review-score-block {
+  display: grid;
+  justify-items: end;
+  gap: 0.35rem;
+  flex-shrink: 0;
+}
+
+.review-score-block strong {
   color: var(--theme-text);
+  font-size: clamp(3rem, 6vw, 6rem);
+  font-weight: 300;
+  line-height: 0.9;
+  letter-spacing: 0;
 }
 
-.discovery-note {
-  padding: clamp(1rem, 2vw, 1.25rem);
-  background:
-    linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.2), rgba(255, 255, 255, 0.02)),
-    #1f1f1f;
+.review-score-block span {
+  color: var(--theme-accent);
+  letter-spacing: 0.18em;
 }
 
-.discovery-note-btn,
-.buy-button,
-.detail-bottom-actions button {
-  min-height: 48px;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out);
+.review-score-block small {
+  color: var(--theme-text-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.12em;
 }
 
-.buy-button {
-  border-radius: var(--radius-lg);
+.comment-spotlight {
+  margin-top: clamp(1.6rem, 4vw, 4rem);
 }
 
-.restock-button {
-  border-radius: var(--radius-lg);
-  transition:
-    border-color var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out),
-    transform var(--duration-med) var(--ease-out);
-}
-
-.restock-button:hover {
-  outline: 0;
-  border-color: rgba(var(--theme-accent-rgb) / 0.7);
-  transform: translateY(-1px);
-}
-
-.detail-columns,
-.delivery-grid,
-.comment-spotlight-grid {
-  gap: var(--gap-sm);
+.comment-dots {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.6rem;
+  margin-bottom: var(--gap-sm);
 }
 
 .comment-dot {
   width: 16px;
   min-height: 16px;
+  padding: 0;
+  border: 0;
   border-radius: 999px;
+  background: var(--theme-text-muted);
+  cursor: pointer;
 }
 
-.review-section-header {
-  gap: var(--gap-md);
+.comment-dot.active {
+  background: var(--theme-accent);
 }
 
-.review-score {
-  font-size: clamp(2.4rem, 4.5vw, 4.5rem);
-  letter-spacing: 0;
+.comment-spotlight-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--gap-sm);
 }
 
-.review-popover {
-  top: calc(100% + var(--gap-xs));
+.comment-card {
+  min-height: 190px;
+  padding: clamp(1rem, 2vw, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.comment-card p {
+  margin: 0;
+  flex: 1;
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  line-height: 1.58;
+}
+
+.comment-card small {
+  color: var(--theme-text-muted);
+  font-size: var(--text-sm);
+  letter-spacing: 0.08em;
+}
+
+.review-panel {
+  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-icon {
+  font-size: 1.2rem;
+  line-height: 1;
+  transition: transform var(--duration-med) var(--ease-out);
+}
+
+.review-toggle-icon.open {
+  transform: rotate(45deg);
+}
+
+.review-details {
+  display: grid;
+  gap: var(--gap-sm);
+  margin-top: var(--gap-xs);
+  padding: clamp(1rem, 2vw, 1.25rem);
+}
+
+.review-detail-row {
+  display: grid;
+  grid-template-columns: 9rem 1fr 3rem;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.review-detail-row span {
+  margin-bottom: 0;
+}
+
+.review-detail-row strong {
+  color: var(--theme-text);
+  font-weight: 400;
+  text-align: right;
+}
+
+.review-detail-bar {
+  position: relative;
+  height: 1px;
+  overflow: hidden;
+  background: var(--theme-border);
+}
+
+.review-detail-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--theme-accent);
+}
+
+.review-write-button {
+  background: var(--theme-paper);
+  color: var(--theme-text-muted);
+  cursor: not-allowed;
 }
 
 .detail-bottom-cta {
-  margin-top: var(--gap-lg);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--gap-lg);
+  align-items: end;
+  margin-top: clamp(1rem, 3vw, 2rem);
   padding: clamp(1.5rem, 4vw, 3.5rem);
+  overflow: hidden;
   background:
-    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.22), transparent 18rem),
-    var(--theme-accent);
+    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.24), transparent 18rem),
+    linear-gradient(135deg, var(--theme-accent), #e95700);
 }
 
-.detail-bottom-cta h2 {
-  font-size: clamp(2.2rem, 5vw, 5.4rem);
-  letter-spacing: 0;
+.detail-bottom-cta .eyebrow,
+.detail-bottom-cta h2,
+.detail-bottom-cta p {
+  color: #fff;
 }
 
 .detail-bottom-cta p {
-  max-width: var(--text-measure);
-  font-size: var(--text-base);
+  max-width: 48rem;
 }
 
-@media (max-width: 1100px) {
-  .detail-layout {
+.detail-bottom-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-xs);
+  justify-content: flex-end;
+}
+
+.detail-bottom-actions button {
+  padding: 0 1.05rem;
+  border-color: rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  background: #262626;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.recommendation-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: var(--gap-lg);
+}
+
+.recommendation-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--gap-sm);
+  margin-top: clamp(1.6rem, 4vw, 4rem);
+}
+
+.recommendation-card {
+  min-height: clamp(360px, 36vw, 520px);
+  display: grid;
+  grid-template-rows: auto minmax(14rem, 1fr) auto;
+  gap: var(--gap-sm);
+  padding: clamp(1rem, 2vw, 1.4rem);
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  transition:
+    transform var(--duration-med) var(--ease-out),
+    border-color var(--duration-med) var(--ease-out),
+    box-shadow var(--duration-med) var(--ease-out);
+}
+
+.recommendation-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(var(--theme-accent-rgb) / 0.54);
+  box-shadow: var(--theme-shadow-soft);
+}
+
+.recommendation-card > span {
+  color: var(--theme-text-muted);
+  font-size: var(--text-sm);
+}
+
+.recommendation-card img {
+  place-self: center;
+  width: min(86%, 430px);
+  height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 28px 58px rgba(0, 0, 0, 0.34));
+  transition: transform var(--duration-slow) var(--ease-out);
+}
+
+.recommendation-card:hover img {
+  transform: scale(1.045) rotate(-0.4deg);
+}
+
+.recommendation-card h3 {
+  max-width: 12ch;
+  margin: 0;
+  color: var(--theme-text);
+  font-size: var(--text-base);
+  font-weight: 400;
+  line-height: 1.08;
+  text-transform: uppercase;
+}
+
+.recommendation-card p {
+  margin: 0.55rem 0 0;
+  color: var(--theme-text-muted);
+  font-size: var(--text-sm);
+  line-height: 1.45;
+}
+
+@media (max-width: 1180px) {
+  .product-hero,
+  .product-story-grid,
+  .product-meta-section,
+  .detail-bottom-cta {
     grid-template-columns: 1fr;
   }
 
-  .detail-gallery {
+  .product-hero {
+    min-height: auto;
+  }
+
+  .product-media-column,
+  .product-purchase-panel {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .product-media-column {
+    min-height: 0;
+    display: block;
+  }
+
+  .product-hero-copy {
     position: static;
-    width: min(100%, 760px);
+    width: min(100%, 720px);
+    margin-bottom: var(--gap-md);
+  }
+
+  .product-hero-visual {
+    min-height: clamp(520px, 66vw, 760px);
+  }
+
+  .product-hero-image {
+    width: min(66vw, 640px);
+    max-height: none;
+  }
+
+  .product-thumbs,
+  .hero-fact-grid {
+    position: static;
+    width: auto;
+    margin-top: var(--gap-sm);
+    transform: none;
+  }
+
+  .product-thumbs {
+    justify-content: center;
+  }
+
+  .product-purchase-panel {
+    position: static;
+    justify-self: center;
+    width: min(100%, 720px);
+    max-height: none;
+    overflow: visible;
+  }
+
+  .product-hero-copy h1 {
+    max-width: 12ch;
+  }
+
+  .structure-timeline,
+  .recommendation-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@media (max-width: 700px) {
+@media (max-width: 760px) {
   .detail-page {
-    padding: clamp(0.75rem, 4vw, 1rem) var(--page-x) 0;
+    padding: 0;
   }
 
   .detail-shell {
     width: var(--container-wide);
-    padding-inline: clamp(0.85rem, 4vw, 1rem);
+    padding-inline: 0;
   }
 
   .detail-topbar {
-    align-items: stretch;
+    top: clamp(4.65rem, 15vw, 5.5rem);
+    z-index: 999;
+    right: clamp(0.75rem, 4vw, 1rem);
+    left: clamp(0.75rem, 4vw, 1rem);
+    align-items: center;
+    flex-direction: row;
   }
 
   .detail-topbar-meta {
-    justify-content: space-between;
+    display: none;
   }
 
-  .detail-heading h1 {
-    font-size: clamp(2.35rem, 14vw, 4.4rem);
+  .product-hero {
+    padding-top: clamp(7.6rem, 25vw, 9rem);
   }
 
-  .detail-main-image {
-    aspect-ratio: 4 / 5;
+  .product-hero-visual {
+    min-height: clamp(390px, 102vw, 620px);
   }
 
-  .detail-columns,
-  .detail-meta-grid,
+  .product-hero-image {
+    width: min(88%, 560px);
+  }
+
+  .hero-fact-grid,
+  .character-facts,
   .size-grid,
-  .detail-bottom-actions,
+  .meta-grid,
   .delivery-grid,
-  .comment-spotlight-grid {
+  .comment-spotlight-grid,
+  .structure-timeline,
+  .recommendation-grid {
     grid-template-columns: 1fr;
   }
 
-  .discovery-note {
+  .purchase-discovery-note,
+  .reviews-heading,
+  .recommendation-heading {
     align-items: stretch;
+    flex-direction: column;
   }
 
-  .discovery-note-btn {
+  .product-story-grid::before,
+  .product-structure-section::before,
+  .product-meta-section::before,
+  .product-reviews-section::before,
+  .recommendation-section::before {
+    right: auto;
+    left: 0;
+    width: min(100%, 24rem);
+  }
+
+  .purchase-discovery-note a,
+  .buy-button,
+  .restock-button {
     width: 100%;
   }
 
+  .purchase-price-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .review-score-block {
+    justify-items: start;
+  }
+
   .detail-bottom-actions {
-    display: grid;
+    justify-content: stretch;
+  }
+
+  .detail-bottom-actions button {
+    width: 100%;
   }
 }
 
-@media (max-width: 420px) {
+@media (max-width: 480px) {
+  .product-hero-copy h1 {
+    font-size: clamp(2.6rem, 15vw, 4rem);
+  }
+
+  .product-thumbs {
+    flex-wrap: wrap;
+  }
+
   .review-detail-row {
     grid-template-columns: 1fr;
     align-items: start;
   }
 
-  .review-detail-value {
+  .review-detail-row strong {
     text-align: left;
   }
 }
 
-/* --- Design System Refinement End --- */
-
+@media (prefers-reduced-motion: reduce) {
+  .is-transition-arriving .product-hero-image,
+  .is-transition-arriving [data-product-transition-reveal] {
+    opacity: 1;
+  }
+}
diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx
index b29c45a..7e66ab2 100644
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router";
 import perfumes from "../data/perfumes";
 import SharedNavbar from "./SharedNavbar";
+import { useProductTransition } from "../transitions/ProductTransitionContext";
 import { formatChf } from "../shop/money";
 import { useShop } from "../shop/useShop";
 import "./ProductDetailPage.css";
@@ -11,9 +12,457 @@ const priceToCents = (price) => {
   return match ? Number(match[1]) * 100 : 0;
 };
 
+function ProductPurchasePanel({
+  perfume,
+  selectedSize,
+  setSelectedSize,
+  selectedPriceCents,
+  discountPreviewCents,
+  addToCart,
+  subscribeToProduct,
+}) {
+  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",
+    },
+  ];
+
+  return (
+    <aside className="product-purchase-panel" data-product-transition-reveal>
+      <div className="purchase-price-row">
+        <span>Preis</span>
+        <strong>{perfume.prices[selectedSize]}</strong>
+      </div>
+
+      <div className="purchase-size-group">
+        <span className="label-title">Größe wählen</span>
+        <div className="size-grid">
+          {sizeOptions.map((option) => (
+            <button
+              key={option.key}
+              type="button"
+              className={`size-card ${selectedSize === option.key ? "active" : ""}`}
+              onClick={() => setSelectedSize(option.key)}
+              aria-pressed={selectedSize === option.key}
+            >
+              <span className="size-title">{option.title}</span>
+              <strong>{option.price}</strong>
+              <small>{option.note}</small>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="purchase-actions">
+        <button
+          className="buy-button"
+          type="button"
+          onClick={() =>
+            addToCart(
+              selectedProductId,
+              1,
+              `${perfume.name} ${selectedProductLabel} added.`
+            ).catch(() => {})
+          }
+        >
+          Kaufen
+        </button>
+
+        <button
+          className="restock-button"
+          type="button"
+          onClick={() => subscribeToProduct(selectedProductId, "restock").catch(() => {})}
+        >
+          Restock Update abonnieren
+        </button>
+      </div>
+
+      <div className="purchase-discovery-note">
+        <div>
+          <strong>Discovery Set wird angerechnet</strong>
+          <p>
+            Sample- und Set-Guthaben werden beim Full-Size-Kauf automatisch
+            abgezogen.
+          </p>
+          {discountPreviewCents > 0 && (
+            <p className="discount-preview">
+              Erwarteter Preis mit Rabatt:{" "}
+              <strong>{formatChf(selectedPriceCents - discountPreviewCents)}</strong>
+            </p>
+          )}
+        </div>
+        <Link to="/discovery-set">Zum Set</Link>
+      </div>
+    </aside>
+  );
+}
+
+function ProductHero({
+  perfume,
+  selectedImage,
+  setSelectedImage,
+  selectedSize,
+  setSelectedSize,
+  selectedPriceCents,
+  discountPreviewCents,
+  addToCart,
+  subscribeToProduct,
+}) {
+  const galleryImages = [...new Set([perfume.image, ...(perfume.gallery || [])])].slice(0, 3);
+
+  return (
+    <section className="product-hero">
+      <div className="product-media-column">
+        <div className="product-hero-copy" data-product-transition-reveal>
+          <span>Edition {perfume.id}</span>
+          <h1>{perfume.name}</h1>
+        </div>
+
+        <div className="product-hero-visual">
+          <img
+            src={selectedImage}
+            alt={perfume.name}
+            className="product-hero-image"
+            data-product-transition-target={perfume.slug}
+            decoding="async"
+          />
+        </div>
+
+        <div className="product-thumbs" data-product-transition-reveal>
+          {galleryImages.map((img, index) => (
+            <button
+              key={`${img}-${index}`}
+              type="button"
+              className={`thumb-btn ${selectedImage === img ? "active" : ""}`}
+              onClick={() => setSelectedImage(img)}
+              aria-label={`${perfume.name} Ansicht ${index + 1}`}
+            >
+              <img src={img} alt="" loading="lazy" decoding="async" />
+            </button>
+          ))}
+        </div>
+
+        <div className="hero-fact-grid" data-product-transition-reveal>
+          <div>
+            <span>Tragehinweis</span>
+            <p>{perfume.dosage}</p>
+          </div>
+          <div>
+            <span>Konzentration</span>
+            <p>{perfume.concentration}</p>
+          </div>
+          <div>
+            <span>Studio</span>
+            <p>{perfume.description}</p>
+          </div>
+        </div>
+      </div>
+
+      <ProductPurchasePanel
+        perfume={perfume}
+        selectedSize={selectedSize}
+        setSelectedSize={setSelectedSize}
+        selectedPriceCents={selectedPriceCents}
+        discountPreviewCents={discountPreviewCents}
+        addToCart={addToCart}
+        subscribeToProduct={subscribeToProduct}
+      />
+    </section>
+  );
+}
+
+function ProductStorySection({ perfume }) {
+  return (
+    <section className="product-story-grid" data-reveal-group>
+      <div className="story-copy">
+        <span className="eyebrow" data-reveal="fade">Beschreibung / Charakter</span>
+        <h2 data-reveal="lines">{perfume.text}</h2>
+        <p data-reveal="fade">{perfume.mood}</p>
+
+        <div className="character-facts" data-reveal="fade">
+          <div>
+            <span>Haltbarkeit</span>
+            <p>{perfume.longevity}</p>
+          </div>
+          <div>
+            <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>
+
+      <div className="story-visual-panel" data-reveal="fade">
+        <div>
+          <span>Material-Komposition</span>
+          <div className="material-tags">
+            {perfume.materialTags.map((tag) => (
+              <span key={tag}>{tag}</span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ProductStructureSection({ perfume }) {
+  const phaseGroups = [
+    { label: "Top Notes / 0-1 h", notes: perfume.phases.top },
+    { label: "Heart Notes / 1-4 h", notes: perfume.phases.heart },
+    { label: "Base Notes / 4 h+", notes: perfume.phases.base },
+  ];
+
+  return (
+    <section className="product-structure-section" data-reveal-group>
+      <div className="section-intro">
+        <span className="eyebrow" data-reveal="fade">Duftstruktur</span>
+        <h2 data-reveal="lines">Die Spur entwickelt sich in Schichten.</h2>
+      </div>
+
+      <div className="structure-timeline">
+        {phaseGroups.map((phase, index) => (
+          <article className="structure-phase-card" key={phase.label} data-reveal="fade">
+            <span className="structure-index">0{index + 1}</span>
+            <h3>{phase.label}</h3>
+            <div>
+              {phase.notes.map((note) => (
+                <span key={note}>{note}</span>
+              ))}
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ProductMetaSection({ perfume }) {
+  const metaItems = [
+    ["Parfümerie / Studio", perfume.description],
+    ["Herkunft", perfume.origin],
+    ["Konzentration", perfume.concentration],
+    ["Edition", perfume.edition],
+  ];
+
+  return (
+    <section className="product-meta-section" data-reveal-group>
+      <div className="meta-grid">
+        {metaItems.map(([label, value]) => (
+          <div className="meta-card" key={label} data-reveal="fade">
+            <span>{label}</span>
+            <p>{value}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="delivery-panel" data-reveal="fade">
+        <div className="delivery-panel-header">
+          <span className="eyebrow">Lieferung</span>
+          <span className="delivery-badge">CH</span>
+        </div>
+
+        <div className="delivery-grid">
+          <div>
+            <span>Versand</span>
+            <p>Innerhalb von 1-2 Werktagen</p>
+          </div>
+          <div>
+            <span>Zustellung</span>
+            <p>In der Regel in 5-6 Tagen bei dir</p>
+          </div>
+          <div>
+            <span>Hinweis</span>
+            <p>Sorgfältig verpackt und geschützt versendet.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ProductReviews({
+  reviewSummary,
+  safeCommentPages,
+  commentPage,
+  setCommentPage,
+  showReviewDetails,
+  setShowReviewDetails,
+}) {
+  return (
+    <section className="product-reviews-section" data-reveal-group>
+      <div className="reviews-heading" data-reveal="fade">
+        <div>
+          <span className="eyebrow">Stimmen zum Duft</span>
+          <h2>Resonanz</h2>
+          <p>
+            Verdichtete Wahrnehmung aus bisherigen Stimmen zu Charakter,
+            Haltbarkeit, Sillage und Originalität.
+          </p>
+        </div>
+
+        <div className="review-score-block">
+          <strong>{reviewSummary.score.toFixed(1)}</strong>
+          <span>★★★★★</span>
+          <small>{reviewSummary.total} Stimmen</small>
+        </div>
+      </div>
+
+      <div className="comment-spotlight" data-reveal="fade">
+        <div className="comment-dots">
+          {safeCommentPages.map((_, index) => (
+            <button
+              key={index}
+              type="button"
+              className={`comment-dot ${commentPage === index ? "active" : ""}`}
+              onClick={() => setCommentPage(index)}
+              aria-label={`Kommentargruppe ${index + 1}`}
+            />
+          ))}
+        </div>
+
+        <div className="comment-spotlight-grid">
+          {safeCommentPages[commentPage].map((comment) => (
+            <article className="comment-card" key={comment.id}>
+              <span>{comment.title}</span>
+              <p>{comment.text}</p>
+              <small>{comment.name}</small>
+            </article>
+          ))}
+        </div>
+      </div>
+
+      <div className={`review-panel ${showReviewDetails ? "is-open" : ""}`} data-reveal="fade">
+        <button
+          type="button"
+          className="review-toggle"
+          onClick={() => setShowReviewDetails((prev) => !prev)}
+          aria-expanded={showReviewDetails}
+        >
+          <span>Detailbewertungen</span>
+          <span className={showReviewDetails ? "review-toggle-icon open" : "review-toggle-icon"}>
+            +
+          </span>
+        </button>
+
+        {showReviewDetails && (
+          <div className="review-details">
+            {reviewSummary.metrics.map((metric) => (
+              <div className="review-detail-row" key={metric.label}>
+                <span>{metric.label}</span>
+                <div className="review-detail-bar">
+                  <div
+                    className="review-detail-fill"
+                    style={{ width: `${(metric.value / 5) * 100}%` }}
+                  />
+                </div>
+                <strong>{metric.value.toFixed(1)}</strong>
+              </div>
+            ))}
+
+            <button type="button" className="review-write-button" disabled>
+              Bewertung schreiben
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function ProductTestingCTA({ perfume, addToCart }) {
+  return (
+    <section className="detail-bottom-cta" data-reveal-group>
+      <div>
+        <span className="eyebrow" data-reveal="fade">Lieber erst testen?</span>
+        <h2 data-reveal="lines">Sample oder Discovery Set.</h2>
+        <p data-reveal="fade">
+          Bestelle ein 2ml Sample für CHF 12 oder das komplette Discovery Set mit
+          allen 6 Düften für CHF 48. Beide werden beim späteren Full-Size-Kauf
+          vollständig angerechnet.
+        </p>
+      </div>
+
+      <div className="detail-bottom-actions" data-reveal="fade">
+        <button
+          type="button"
+          onClick={() =>
+            addToCart(`${perfume.slug}-sample`, 1, `${perfume.name} Sample added.`).catch(
+              () => {}
+            )
+          }
+        >
+          Sample bestellen - {perfume.prices.sample}
+        </button>
+        <button
+          type="button"
+          onClick={() => addToCart("discovery-set", 1, "Discovery Set added.").catch(() => {})}
+        >
+          Discovery Set - CHF 48
+        </button>
+      </div>
+    </section>
+  );
+}
+
+function ProductRecommendations({ currentSlug, startProductTransition }) {
+  const recommendations = perfumes
+    .filter((item) => item.slug !== currentSlug)
+    .slice(0, 3);
+
+  return (
+    <section className="recommendation-section" data-reveal-group>
+      <div className="recommendation-heading">
+        <span className="eyebrow" data-reveal="fade">Empfehlungen</span>
+        <h2 data-reveal="lines">Weitere Atmosphären</h2>
+      </div>
+
+      <div className="recommendation-grid">
+        {recommendations.map((item) => (
+          <Link
+            to={`/duft/${item.slug}`}
+            className="recommendation-card"
+            key={item.slug}
+            onClick={(event) => startProductTransition(event, item)}
+            data-reveal="fade"
+          >
+            <span>{item.id}</span>
+            <img
+              src={item.image}
+              alt={item.name}
+              loading="lazy"
+              decoding="async"
+              data-product-transition-source
+            />
+            <div>
+              <h3>{item.name}</h3>
+              <p>{item.text}</p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
 function ProductDetailContent({ perfumeSlug }) {
   const navigate = useNavigate();
   const { addToCart, subscribeToProduct, user } = useShop();
+  const { activeSlug, phase, startProductTransition } = useProductTransition();
 
   const perfume = useMemo(
     () => perfumes.find((item) => item.slug === perfumeSlug) || perfumes[0],
@@ -26,10 +475,6 @@ function ProductDetailContent({ perfumeSlug }) {
   const [selectedSize, setSelectedSize] = useState("sample");
   const [showReviewDetails, setShowReviewDetails] = useState(false);
   const [commentPage, setCommentPage] = useState(0);
-  const [isStructureOpen, setIsStructureOpen] = useState(false);
-  const [isMoodOpen, setIsMoodOpen] = useState(false);
-  const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
-  const selectedProductLabel = selectedSize === "sample" ? "Sample" : "Full Size";
   const selectedPriceCents = priceToCents(perfume.prices[selectedSize]);
   const sampleCredit = user?.sampleCredits?.find(
     (credit) => credit.slug === perfume.slug && credit.status === "available"
@@ -43,47 +488,35 @@ function ProductDetailContent({ perfumeSlug }) {
         )
       : 0;
 
-  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",
-    },
-  ];
-
   const reviewSummary = perfume.reviews || {
     score: 0,
     total: 0,
     metrics: [],
   };
 
-  const reviewComments = perfume.commentSpotlight || [];
+  const safeCommentPages = useMemo(() => {
+    const reviewComments = perfume.commentSpotlight || [];
+    const pages = [];
 
-  const commentPages = [];
-  for (let i = 0; i < reviewComments.length; i += 2) {
-    commentPages.push(reviewComments.slice(i, i + 2));
-  }
+    for (let i = 0; i < reviewComments.length; i += 2) {
+      pages.push(reviewComments.slice(i, i + 2));
+    }
 
-  const safeCommentPages =
-    commentPages.length > 0
-      ? commentPages
+    return pages.length > 0
+      ? pages
       : [
-        [
-          {
-            id: "fallback-1",
-            name: "Atelier",
-            title: "Noch keine Stimmen",
-            text: "Für diesen Duft sind aktuell noch keine Kommentare hinterlegt.",
-          },
-        ],
-      ];
+          [
+            {
+              id: "fallback-1",
+              name: "Atelier",
+              title: "Noch keine Stimmen",
+              text: "Für diesen Duft sind aktuell noch keine Kommentare hinterlegt.",
+            },
+          ],
+        ];
+  }, [perfume.commentSpotlight]);
+
+  const isTransitionArriving = activeSlug === perfume.slug && phase === "entering";
 
   useEffect(() => {
     const interval = window.setInterval(() => {
@@ -94,412 +527,50 @@ function ProductDetailContent({ perfumeSlug }) {
   }, [safeCommentPages.length]);
 
   return (
-    <div className="detail-page">
+    <div className={`detail-page ${isTransitionArriving ? "is-transition-arriving" : ""}`}>
       <SharedNavbar variant="light" />
 
       <main className="detail-shell">
-        <div className="detail-topbar">
+        <div className="detail-topbar" data-product-transition-reveal>
           <button className="back-link" type="button" onClick={() => navigate("/")}>
             <span className="back-link-arrow">←</span>
             <span>Zurück zur Startseite</span>
           </button>
 
           <div className="detail-topbar-meta">
-            <span className="detail-topbar-label">DUFTDETAIL</span>
-            <span className="detail-topbar-name">{perfume.name}</span>
+            <span>Duftdetail</span>
+            <strong>{perfume.name}</strong>
           </div>
         </div>
 
-        <section className="detail-layout">
-          <div className="detail-gallery">
-            <div className="detail-main-image">
-              <img src={selectedImage} alt={perfume.name} decoding="async" />
-            </div>
+        <ProductHero
+          perfume={perfume}
+          selectedImage={selectedImage}
+          setSelectedImage={setSelectedImage}
+          selectedSize={selectedSize}
+          setSelectedSize={setSelectedSize}
+          selectedPriceCents={selectedPriceCents}
+          discountPreviewCents={discountPreviewCents}
+          addToCart={addToCart}
+          subscribeToProduct={subscribeToProduct}
+        />
 
-            <div className="detail-thumbs">
-              {[perfume.image, ...(perfume.gallery || [])]
-                .slice(0, 3)
-                .map((img, index) => (
-                  <button
-                    key={`${img}-${index}`}
-                    type="button"
-                    className={`thumb-btn ${selectedImage === img ? "active" : ""}`}
-                    onClick={() => setSelectedImage(img)}
-                  >
-                    <img
-                      src={img}
-                      alt={`${perfume.name} Ansicht ${index + 1}`}
-                      loading="lazy"
-                      decoding="async"
-                    />
-                  </button>
-                ))}
-            </div>
-
-            <div className="detail-meta-grid detail-meta-grid--top">
-              <div>
-                <span>TRAGEHINWEIS</span>
-                <p>{perfume.dosage}</p>
-              </div>
-
-              <div>
-                <span>HALTBARKEIT</span>
-                <p>{perfume.longevity}</p>
-              </div>
-
-              <div>
-                <span>ANLASS</span>
-                <p>{perfume.occasion}</p>
-              </div>
-            </div>
-
-            {/* --- Accordion Group Start --- */}
-            <div className="accordion-group">
-              
-              {/* Dropdown: Duftstruktur */}
-              <div className={`accordion-item ${isStructureOpen ? "is-open" : ""}`}>
-                <button
-                  type="button"
-                  className="accordion-toggle"
-                  onClick={() => setIsStructureOpen(!isStructureOpen)}
-                >
-                  <span>DUFTSTRUKTUR</span>
-                  <span className="accordion-icon">{isStructureOpen ? "−" : "+"}</span>
-                </button>
-                
-                {isStructureOpen && (
-                  <div className="accordion-content">
-                    <div className="detail-structure-layout">
-                      <div className="detail-structure">
-                        <div className="structure-block">
-                          <span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
-                          <div className="structure-tags-grid">
-                            {perfume.phases.top.map((note) => (
-                              <span key={note} className="structure-tag">{note}</span>
-                            ))}
-                          </div>
-                        </div>
-
-                        <div className="structure-block">
-                          <span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
-                          <div className="structure-tags-grid">
-                            {perfume.phases.heart.map((note) => (
-                              <span key={note} className="structure-tag">{note}</span>
-                            ))}
-                          </div>
-                        </div>
-
-                        <div className="structure-block">
-                          <span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
-                          <div className="structure-tags-grid">
-                            {perfume.phases.base.map((note) => (
-                              <span key={note} className="structure-tag">{note}</span>
-                            ))}
-                          </div>
-                        </div>
-                      </div>
-
-                      <aside className="structure-info-box">
-                        <span className="structure-info-label">ZUR EINORDNUNG</span>
-                        <p>
-                          Die Duftstruktur zeigt, wie sich der Duft über die Zeit entfaltet:
-                          der erste Eindruck im Auftakt, die eigentliche Signatur im Herzen
-                          und die Spur, die lange auf Haut und Kleidung bleibt.
-                        </p>
-
-                        <div className="structure-info-legend">
-                          <div>
-                            <span className="structure-info-dot structure-info-dot--light" />
-                            <span>Auftakt</span>
-                          </div>
-                          <div>
-                            <span className="structure-info-dot structure-info-dot--mid" />
-                            <span>Herz</span>
-                          </div>
-                          <div>
-                            <span className="structure-info-dot structure-info-dot--strong" />
-                            <span>Basis</span>
-                          </div>
-                        </div>
-                      </aside>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* Dropdown: Moodsetting */}
-              <div className={`accordion-item ${isMoodOpen ? "is-open" : ""}`}>
-                <button
-                  type="button"
-                  className="accordion-toggle"
-                  onClick={() => setIsMoodOpen(!isMoodOpen)}
-                >
-                  <span>MOODSETTING</span>
-                  <span className="accordion-icon">{isMoodOpen ? "−" : "+"}</span>
-                </button>
-                
-                {isMoodOpen && (
-                  <div className="accordion-content">
-                    <div className="mood-box-content">
-                      <p>{perfume.mood}</p>
-                    </div>
-                  </div>
-                )}
-              </div>
-              
-            </div>
-            {/* --- Accordion Group End --- */}
-          </div>
-
-          <div className="detail-info">
-            <div className="detail-heading" data-reveal-group>
-              <div className="detail-heading-copy">
-                <span className="detail-kicker" data-reveal="fade">
-                  Edition 04
-                </span>
-                <h1 data-reveal="fade">{perfume.name}</h1>
-                <p data-reveal="fade">{perfume.shortText}</p>
-              </div>
-            </div>
-
-            <div className="detail-section-block">
-              <span className="label-title">MATERIAL-KOMPOSITION</span>
-              <div className="material-tags">
-                {perfume.materialTags.map((tag) => (
-                  <span key={tag}>{tag}</span>
-                ))}
-              </div>
-            </div>
-
-            <div className="detail-section-block">
-              <span className="label-title">GRÖSSE WÄHLEN</span>
-              <div className="size-grid">
-                {sizeOptions.map((option) => (
-                  <button
-                    key={option.key}
-                    type="button"
-                    className={`size-card ${selectedSize === option.key ? "active" : ""}`}
-                    onClick={() => setSelectedSize(option.key)}
-                  >
-                    <span className="size-title">{option.title}</span>
-                    <strong>{option.price}</strong>
-                    <small>{option.note}</small>
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <div className="discovery-note" data-reveal-group data-reveal-start="top 88%">
-              <div className="discovery-note-text" data-reveal="fade">
-                <strong>Discovery Set wird einmalig angerechnet</strong>
-                <p>
-                  Nur das erste Discovery Set erzeugt CHF 48 Guthaben. Es wird
-                  einmal bei einem späteren Full-Size-Kauf automatisch abgezogen.
-                </p>
-                {discountPreviewCents > 0 && (
-                  <p className="discount-preview">
-                    Erwarteter Preis mit Rabatt:{" "}
-                    <strong>{formatChf(selectedPriceCents - discountPreviewCents)}</strong>
-                  </p>
-                )}
-              </div>
-
-              <Link to="/discovery-set" className="discovery-note-btn" data-reveal="fade">
-                Zum Set
-              </Link>
-            </div>
-
-            <button
-              className="buy-button"
-              type="button"
-              onClick={() =>
-                addToCart(
-                  selectedProductId,
-                  1,
-                  `${perfume.name} ${selectedProductLabel} added.`
-                ).catch(() => {})
-              }
-            >
-              KAUFEN
-            </button>
-
-            <button
-              className="restock-button"
-              type="button"
-              onClick={() => subscribeToProduct(selectedProductId, "restock").catch(() => {})}
-            >
-              RESTOCK UPDATE ABONNIEREN
-            </button>
-
-            <div className="detail-description-section">
-              <span className="label-title">BESCHREIBUNG</span>
-
-              <div className="detail-columns">
-                <div className="detail-copy-block">
-                  <span className="detail-copy-label">PARFÜMERIE / STUDIO</span>
-                  <p>{perfume.description}</p>
-                </div>
-
-                <div className="detail-copy-block">
-                  <span className="detail-copy-label">HERKUNFT</span>
-                  <p>{perfume.origin}</p>
-                </div>
-
-                <div className="detail-copy-block">
-                  <span className="detail-copy-label">KONZENTRATION</span>
-                  <p>{perfume.concentration}</p>
-                </div>
-
-                <div className="detail-copy-block">
-                  <span className="detail-copy-label">EDITION</span>
-                  <p>{perfume.edition}</p>
-                </div>
-              </div>
-            </div>
-
-            <div className="delivery-box">
-              <div className="delivery-box-header">
-                <span className="label-title">LIEFERUNG</span>
-                <span className="delivery-badge">CH</span>
-              </div>
-
-              <div className="delivery-grid">
-                <div className="delivery-item">
-                  <span className="delivery-item-label">VERSAND</span>
-                  <p>Innerhalb von 1–2 Werktagen</p>
-                </div>
-
-                <div className="delivery-item">
-                  <span className="delivery-item-label">ZUSTELLUNG</span>
-                  <p>In der Regel in 5–6 Tagen bei dir</p>
-                </div>
-
-                <div className="delivery-item delivery-item--full">
-                  <span className="delivery-item-label">HINWEIS</span>
-                  <p>Sorgfältig verpackt und geschützt versendet.</p>
-                </div>
-              </div>
-            </div>
-
-            <div className="comment-spotlight">
-              <div className="comment-spotlight-header">
-                <span className="label-title">STIMMEN ZUM DUFT</span>
-
-                <div className="comment-dots">
-                  {safeCommentPages.map((_, index) => (
-                    <button
-                      key={index}
-                      type="button"
-                      className={`comment-dot ${commentPage === index ? "active" : ""}`}
-                      onClick={() => setCommentPage(index)}
-                      aria-label={`Kommentargruppe ${index + 1}`}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              <div className="comment-spotlight-grid">
-                {safeCommentPages[commentPage].map((comment) => (
-                  <article className="comment-card" key={comment.id}>
-                    <span className="comment-card-title">{comment.title}</span>
-                    <p>{comment.text}</p>
-                    <span className="comment-card-author">{comment.name}</span>
-                  </article>
-                ))}
-              </div>
-            </div>
-
-            <div className="review-section">
-              <div className="review-section-header">
-                <div className="review-section-copy">
-                  <span className="label-title">RESONANZ</span>
-                  <p className="review-section-text">
-                    Verdichtete Wahrnehmung aus bisherigen Stimmen zu Charakter,
-                    Haltbarkeit, Sillage und Originalität.
-                  </p>
-                </div>
-
-                <div className="review-section-main">
-                  <span className="review-score">{reviewSummary.score.toFixed(1)}</span>
-                  <div className="review-summary-copy">
-                    <span className="review-stars">★★★★★</span>
-                    <span className="review-count">{reviewSummary.total} Stimmen</span>
-                  </div>
-                </div>
-              </div>
-
-              <div className={`review-panel ${showReviewDetails ? "is-open" : ""}`}>
-                <button
-                  type="button"
-                  className="review-toggle"
-                  onClick={() => setShowReviewDetails((prev) => !prev)}
-                  aria-expanded={showReviewDetails}
-                >
-                  <span>Detailbewertungen</span>
-                  <span className={showReviewDetails ? "review-toggle-icon open" : "review-toggle-icon"}>
-                    +
-                  </span>
-                </button>
-
-                {showReviewDetails && (
-                  <div className="review-popover">
-                    <div className="review-details">
-                      {reviewSummary.metrics.map((metric) => (
-                        <div className="review-detail-row" key={metric.label}>
-                          <span className="review-detail-label">{metric.label}</span>
-                          <div className="review-detail-bar">
-                            <div
-                              className="review-detail-fill"
-                              style={{ width: `${(metric.value / 5) * 100}%` }}
-                            />
-                          </div>
-                          <span className="review-detail-value">
-                            {metric.value.toFixed(1)}
-                          </span>
-                        </div>
-                      ))}
-
-                      <button
-                        type="button"
-                        className="review-write-button"
-                        disabled
-                        title="Später mit Login verfügbar"
-                      >
-                        Bewertung schreiben
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className="detail-bottom-cta" data-reveal-group>
-          <h2 data-reveal="fade">Lieber erst testen?</h2>
-          <p data-reveal="fade">
-            Bestelle ein 2ml Sample für CHF 12 oder das komplette Discovery Set
-            mit allen 6 Düften für CHF 48. Beide werden beim späteren Full-Size-Kauf
-            vollständig angerechnet.
-          </p>
-
-          <div className="detail-bottom-actions" data-reveal="fade">
-            <button
-              type="button"
-              onClick={() =>
-                addToCart(`${perfume.slug}-sample`, 1, `${perfume.name} Sample added.`).catch(() => {})
-              }
-            >
-              SAMPLE BESTELLEN – {perfume.prices.sample}
-            </button>
-            <button
-              type="button"
-              onClick={() => addToCart("discovery-set", 1, "Discovery Set added.").catch(() => {})}
-            >
-              DISCOVERY SET – CHF 48
-            </button>
-          </div>
-        </section>
+        <ProductStorySection perfume={perfume} />
+        <ProductStructureSection perfume={perfume} />
+        <ProductMetaSection perfume={perfume} />
+        <ProductReviews
+          reviewSummary={reviewSummary}
+          safeCommentPages={safeCommentPages}
+          commentPage={commentPage}
+          setCommentPage={setCommentPage}
+          showReviewDetails={showReviewDetails}
+          setShowReviewDetails={setShowReviewDetails}
+        />
+        <ProductTestingCTA perfume={perfume} addToCart={addToCart} />
+        <ProductRecommendations
+          currentSlug={perfume.slug}
+          startProductTransition={startProductTransition}
+        />
       </main>
     </div>
   );
diff --git a/parfum-shop/src/components/ProductTransition.css b/parfum-shop/src/components/ProductTransition.css
new file mode 100644
index 0000000..6f01e81
--- /dev/null
+++ b/parfum-shop/src/components/ProductTransition.css
@@ -0,0 +1,40 @@
+.product-transition {
+  position: fixed;
+  inset: 0;
+  z-index: 2500;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+}
+
+.product-transition__wash {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(var(--theme-accent-rgb) / 0.16), transparent 32rem),
+    rgba(12, 12, 12, 0.78);
+  backdrop-filter: blur(14px) saturate(0.9);
+  -webkit-backdrop-filter: blur(14px) saturate(0.9);
+}
+
+.product-transition__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  object-fit: contain;
+  transform-origin: 0 0;
+  will-change: transform, opacity;
+  filter: drop-shadow(0 34px 82px rgba(0, 0, 0, 0.42));
+}
+
+body.product-transition-active {
+  cursor: progress;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .product-transition {
+    display: none;
+  }
+}
diff --git a/parfum-shop/src/components/ProductTransition.jsx b/parfum-shop/src/components/ProductTransition.jsx
new file mode 100644
index 0000000..4a60a08
--- /dev/null
+++ b/parfum-shop/src/components/ProductTransition.jsx
@@ -0,0 +1,327 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useNavigate } from "react-router";
+import { gsap } from "gsap";
+import { ProductTransitionContext } from "../transitions/ProductTransitionContext";
+import "./ProductTransition.css";
+
+const supportsProductTransition = () => {
+  if (typeof window === "undefined") return false;
+
+  return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+
+const rectToObject = (rect) => ({
+  top: rect.top,
+  left: rect.left,
+  width: rect.width,
+  height: rect.height,
+});
+
+const isPlainNavigationClick = (event) =>
+  event.button === 0 &&
+  !event.metaKey &&
+  !event.altKey &&
+  !event.ctrlKey &&
+  !event.shiftKey;
+
+const getStageRect = (sourceRect) => {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const sourceRatio = sourceRect.height / sourceRect.width || 1;
+  const stageWidth = Math.min(
+    Math.max(sourceRect.width * 1.16, 260),
+    viewportWidth * 0.56,
+    620
+  );
+  const stageHeight = Math.min(stageWidth * sourceRatio, viewportHeight * 0.72);
+  const normalizedWidth = stageHeight / sourceRatio;
+
+  return {
+    left: (viewportWidth - normalizedWidth) / 2,
+    top: (viewportHeight - stageHeight) / 2,
+    width: normalizedWidth,
+    height: stageHeight,
+  };
+};
+
+const getTransformForRect = (rect, sourceRect) => ({
+  x: rect.left,
+  y: rect.top,
+  scaleX: rect.width / sourceRect.width,
+  scaleY: rect.height / sourceRect.height,
+});
+
+export function ProductTransitionProvider({ children }) {
+  const navigate = useNavigate();
+  const overlayRef = useRef(null);
+  const imageRef = useRef(null);
+  const washRef = useRef(null);
+  const timelineRef = useRef(null);
+  const [transition, setTransition] = useState(null);
+
+  const clearTransition = useCallback(() => {
+    timelineRef.current?.kill();
+    timelineRef.current = null;
+    document.body.classList.remove("product-transition-active");
+    setTransition(null);
+  }, []);
+
+  const startProductTransition = useCallback(
+    (event, perfume) => {
+      if (!perfume?.slug || !isPlainNavigationClick(event)) {
+        return false;
+      }
+
+      if (!supportsProductTransition()) {
+        return false;
+      }
+
+      const card = event.currentTarget;
+      const image = card.querySelector("[data-product-transition-source]");
+
+      if (!image) {
+        return false;
+      }
+
+      const sourceRect = image.getBoundingClientRect();
+
+      if (sourceRect.width <= 0 || sourceRect.height <= 0) {
+        return false;
+      }
+
+      event.preventDefault();
+      timelineRef.current?.kill();
+      document.body.classList.add("product-transition-active");
+
+      setTransition({
+        id: `${perfume.slug}-${Date.now()}`,
+        slug: perfume.slug,
+        to: `/duft/${perfume.slug}`,
+        image: image.currentSrc || image.src || perfume.image,
+        alt: perfume.name,
+        sourceRect: rectToObject(sourceRect),
+        phase: "leaving",
+      });
+
+      return true;
+    },
+    []
+  );
+
+  useLayoutEffect(() => {
+    if (transition?.phase !== "leaving") {
+      return undefined;
+    }
+
+    const overlay = overlayRef.current;
+    const image = imageRef.current;
+    const wash = washRef.current;
+
+    if (!overlay || !image || !wash) {
+      return undefined;
+    }
+
+    const routeContent = document.querySelector("[data-route-content]");
+    const sourceRect = transition.sourceRect;
+    const stageRect = getStageRect(sourceRect);
+    let completed = false;
+
+    gsap.set(overlay, { autoAlpha: 1, pointerEvents: "auto" });
+    gsap.set(wash, { autoAlpha: 0 });
+    gsap.set(image, {
+      x: sourceRect.left,
+      y: sourceRect.top,
+      width: sourceRect.width,
+      height: sourceRect.height,
+      scaleX: 1,
+      scaleY: 1,
+      autoAlpha: 1,
+      transformOrigin: "0 0",
+      force3D: true,
+    });
+
+    timelineRef.current = gsap.timeline({
+      defaults: { ease: "power4.inOut" },
+      onComplete: () => {
+        completed = true;
+
+        navigate(transition.to, {
+          state: {
+            productTransition: true,
+            transitionId: transition.id,
+          },
+        });
+
+        setTransition((current) =>
+          current?.id === transition.id
+            ? { ...current, phase: "entering" }
+            : current
+        );
+      },
+    });
+
+    timelineRef.current
+      .to(wash, { autoAlpha: 1, duration: 0.42, ease: "power2.out" }, 0)
+      .to(
+        routeContent,
+        {
+          autoAlpha: 0.16,
+          filter: "blur(10px)",
+          scale: 0.985,
+          duration: 0.62,
+          ease: "power3.out",
+        },
+        0
+      )
+      .to(
+        image,
+        {
+          ...getTransformForRect(stageRect, sourceRect),
+          duration: 0.78,
+        },
+        0.03
+      );
+
+    return () => {
+      if (!completed) {
+        timelineRef.current?.kill();
+      }
+    };
+  }, [navigate, transition]);
+
+  useLayoutEffect(() => {
+    if (transition?.phase !== "entering") {
+      return undefined;
+    }
+
+    const overlay = overlayRef.current;
+    const image = imageRef.current;
+    const wash = washRef.current;
+
+    if (!overlay || !image || !wash) {
+      return undefined;
+    }
+
+    let frame = 0;
+    let cancelled = false;
+    let completed = false;
+    const sourceRect = transition.sourceRect;
+
+    const runEnterAnimation = () => {
+      if (cancelled) return;
+
+      window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+
+      const target = document.querySelector(
+        `[data-product-transition-target="${transition.slug}"]`
+      );
+
+      if (!target && frame < 16) {
+        frame += 1;
+        window.requestAnimationFrame(runEnterAnimation);
+        return;
+      }
+
+      const routeContent = document.querySelector("[data-route-content]");
+      gsap.set(routeContent, {
+        autoAlpha: 1,
+        filter: "none",
+        scale: 1,
+        clearProps: "opacity,visibility,filter,transform",
+      });
+
+      if (!target) {
+        gsap.to(overlay, {
+          autoAlpha: 0,
+          duration: 0.3,
+          ease: "power2.out",
+          onComplete: clearTransition,
+        });
+        return;
+      }
+
+      const targetRect = rectToObject(target.getBoundingClientRect());
+      const revealItems = gsap.utils.toArray("[data-product-transition-reveal]");
+
+      gsap.set(target, { autoAlpha: 0 });
+      gsap.set(revealItems, { y: 28, autoAlpha: 0, force3D: true });
+
+      timelineRef.current?.kill();
+      timelineRef.current = gsap.timeline({
+        defaults: { ease: "power4.out" },
+        onComplete: () => {
+          completed = true;
+          clearTransition();
+        },
+      });
+
+      timelineRef.current
+        .to(image, {
+          ...getTransformForRect(targetRect, sourceRect),
+          duration: 0.72,
+        })
+        .set(target, { autoAlpha: 1 }, ">-0.08")
+        .to(image, { autoAlpha: 0, duration: 0.16, ease: "power2.out" }, "<")
+        .to(wash, { autoAlpha: 0, duration: 0.5, ease: "power2.out" }, "<")
+        .to(
+          revealItems,
+          {
+            y: 0,
+            autoAlpha: 1,
+            duration: 0.82,
+            stagger: 0.07,
+            ease: "power4.out",
+            clearProps: "transform,opacity,visibility",
+          },
+          ">-0.05"
+        );
+    };
+
+    window.requestAnimationFrame(runEnterAnimation);
+
+    return () => {
+      cancelled = true;
+      if (!completed) {
+        timelineRef.current?.kill();
+      }
+    };
+  }, [clearTransition, transition]);
+
+  const value = useMemo(
+    () => ({
+      activeSlug: transition?.slug || null,
+      phase: transition?.phase || "idle",
+      startProductTransition,
+    }),
+    [startProductTransition, transition]
+  );
+
+  return (
+    <ProductTransitionContext.Provider value={value}>
+      {children}
+
+      {transition && (
+        <div
+          className={`product-transition product-transition--${transition.phase}`}
+          ref={overlayRef}
+          aria-hidden="true"
+        >
+          <div className="product-transition__wash" ref={washRef} />
+          <img
+            className="product-transition__image"
+            src={transition.image}
+            alt={transition.alt}
+            ref={imageRef}
+            decoding="async"
+          />
+        </div>
+      )}
+    </ProductTransitionContext.Provider>
+  );
+}
diff --git a/parfum-shop/src/pages/LandingPage.jsx b/parfum-shop/src/pages/LandingPage.jsx
index cf17e6c..a6eeb1e 100644
--- a/parfum-shop/src/pages/LandingPage.jsx
+++ b/parfum-shop/src/pages/LandingPage.jsx
@@ -10,6 +10,7 @@ import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import HeroSection from "../components/landing/HeroSection";
 import SharedNavbar from "../components/SharedNavbar";
+import { useProductTransition } from "../transitions/ProductTransitionContext";
 import perfumes from "../data/perfumes";
 import "../pages/LandingPage.css";
 import "../style/navbar.css";
@@ -28,6 +29,7 @@ function LandingPage() {
   const headlineLineRefs = useRef([]);
   const heroMetaRefs = useRef([]);
   const cardRefs = useRef([]);
+  const { startProductTransition } = useProductTransition();
 
   const [introSettings] = useState(() => {
     if (typeof window === "undefined") {
@@ -405,6 +407,7 @@ function LandingPage() {
                 to={`/duft/${item.slug}`}
                 className="product-card"
                 key={item.id}
+                onClick={(event) => startProductTransition(event, item)}
                 ref={(element) => {
                   cardRefs.current[index] = element;
                 }}
@@ -439,6 +442,7 @@ function LandingPage() {
                     src={item.image}
                     alt={item.name}
                     className="product-image"
+                    data-product-transition-source
                     loading={index < 3 ? "eager" : "lazy"}
                     decoding="async"
                   />
diff --git a/parfum-shop/src/transitions/ProductTransitionContext.js b/parfum-shop/src/transitions/ProductTransitionContext.js
new file mode 100644
index 0000000..ad481a5
--- /dev/null
+++ b/parfum-shop/src/transitions/ProductTransitionContext.js
@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+
+export const ProductTransitionContext = createContext({
+  activeSlug: null,
+  phase: "idle",
+  startProductTransition: () => false,
+});
+
+export const useProductTransition = () => useContext(ProductTransitionContext);