add dropdown for duftstruktur and moodsetting

parfum-shop/src/components/ProductDetailPage.css

@@ -395,6 +395,79 @@
 
 /* --- Mood Box End --- */
 
+/* --- Accordion / Dropdown Components Start --- */
+
+.accordion-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 26px;
+}
+
+.accordion-item {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  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: #1f1f1f;
+  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: #1f1f1f;
+  padding-top: 6px;
+}
+
+/* --- Accordion / Dropdown Components End --- */
+
 /* --- Right Column Start --- */
 
 .detail-info {
@@ -915,7 +988,7 @@
 }
 
 .discovery-note-text p {
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.45;
   color: #d0d0d0;
   margin: 0;

parfum-shop/src/components/ProductDetailPage.jsx

@@ -26,6 +26,8 @@ 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]);
@@ -146,17 +148,29 @@ function ProductDetailContent({ perfumeSlug }) {
               </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">
-                <h3>DUFTSTRUKTUR</h3>
-
                         <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">
+                              <span key={note} className="structure-tag">{note}</span>
-                        {note}
-                      </span>
                             ))}
                           </div>
                         </div>
@@ -165,9 +179,7 @@ function ProductDetailContent({ perfumeSlug }) {
                           <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">
+                              <span key={note} className="structure-tag">{note}</span>
-                        {note}
-                      </span>
                             ))}
                           </div>
                         </div>
@@ -176,9 +188,7 @@ function ProductDetailContent({ perfumeSlug }) {
                           <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">
+                              <span key={note} className="structure-tag">{note}</span>
-                        {note}
-                      </span>
                             ))}
                           </div>
                         </div>
@@ -208,12 +218,33 @@ function ProductDetailContent({ perfumeSlug }) {
                         </div>
                       </aside>
                     </div>
+                  </div>
+                )}
+              </div>
 
-            <div className="mood-box">
+              {/* Dropdown: Moodsetting */}
-              <span className="mood-label">MOODSETTING</span>
+              <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">