add site refactors and media for scent notes

parfum-shop/src/App.jsx

@@ -16,6 +16,7 @@ import CartToast from "./components/CartToast";
 import { ProductTransitionProvider } from "./components/ProductTransition";
 import useLenisSmoothScroll from "./hooks/useLenisSmoothScroll";
 import useScrollTextReveal from "./hooks/useScrollTextReveal";
+import useButtonInteractions from "./hooks/useButtonInteractions";
 import { ThemeProvider } from "./theme/ThemeContext";
 import "./style/textReveal.css";
 
@@ -35,6 +36,7 @@ function App() {
 
   useLenisSmoothScroll(location.pathname);
   useScrollTextReveal(routeContentRef, location.pathname);
+  useButtonInteractions();
 
   useEffect(() => {
     if (typeof document === "undefined") return;

parfum-shop/src/components/ProductDetailPage.css

@@ -626,23 +626,54 @@
 }
 
 .structure-phase-card {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
   min-height: 280px;
   padding: clamp(1rem, 2vw, 1.5rem);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: var(--gap-md);
+  border-color: rgba(255, 255, 255, 0.18);
+  background: #262626;
+  color: #fff;
+}
+
+.structure-phase-card::before,
+.structure-phase-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.structure-phase-card::before {
+  background: var(--phase-visual-image, none) center / cover no-repeat;
+  transform: scale(1.02);
+}
+
+.structure-phase-card::after {
+  background:
+    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.72)),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.12));
+}
+
+.structure-phase-card > * {
+  position: relative;
+  z-index: 1;
 }
 
 .structure-index {
-  color: var(--theme-accent);
+  color: rgba(255, 255, 255, 0.7);
   font-size: var(--text-sm);
   letter-spacing: 0.2em;
 }
 
 .structure-phase-card h3 {
   margin: 0;
-  color: var(--theme-text);
+  color: #fff;
   font-size: var(--text-lg);
   font-weight: 400;
   letter-spacing: 0.02em;
@@ -657,8 +688,9 @@
 
 .structure-phase-card div span {
   padding: 0.55rem 0.75rem;
-  border: 1px solid var(--theme-border);
+  border: 1px solid rgba(255, 255, 255, 0.22);
-  color: var(--theme-text-muted);
+  background: rgba(0, 0, 0, 0.26);
+  color: rgba(255, 255, 255, 0.86);
   font-size: var(--text-sm);
 }
 

parfum-shop/src/components/ProductDetailPage.jsx

@@ -279,10 +279,23 @@ function ProductStorySection({ perfume }) {
 }
 
 function ProductStructureSection({ perfume }) {
+  const phaseVisualImages = perfume.phaseVisualImages || [];
   const phaseGroups = [
-    { label: "Top Notes / 0-1 h", notes: perfume.phases.top },
+    {
-    { label: "Heart Notes / 1-4 h", notes: perfume.phases.heart },
+      label: "Top Notes / 0-1 h",
-    { label: "Base Notes / 4 h+", notes: perfume.phases.base },
+      notes: perfume.phases.top,
+      visualImage: phaseVisualImages[0],
+    },
+    {
+      label: "Heart Notes / 1-4 h",
+      notes: perfume.phases.heart,
+      visualImage: phaseVisualImages[1],
+    },
+    {
+      label: "Base Notes / 4 h+",
+      notes: perfume.phases.base,
+      visualImage: phaseVisualImages[2],
+    },
   ];
 
   return (
@@ -294,7 +307,16 @@ function ProductStructureSection({ perfume }) {
 
       <div className="structure-timeline">
         {phaseGroups.map((phase, index) => (
-          <article className="structure-phase-card" key={phase.label} data-reveal="fade">
+          <article
+            className="structure-phase-card"
+            key={phase.label}
+            data-reveal="fade"
+            style={
+              phase.visualImage
+                ? { "--phase-visual-image": `url(${phase.visualImage})` }
+                : undefined
+            }
+          >
             <span className="structure-index">0{index + 1}</span>
             <h3>{phase.label}</h3>
             <div>

parfum-shop/src/data/perfumes.js

@@ -18,6 +18,11 @@ const perfumes = [
       heart: ["Stein Akkord", "Salz", "Staubnote"],
       base: ["Zedernholz", "Pfeffer", "Weihrauch"],
     },
+    phaseVisualImages: [
+      "/kalter-beton-visual-phase-1.webp",
+      "/kalter-beton-visual-phase-2.webp",
+      "/kalter-beton-visual-phase-3.webp",
+    ],
     mood: "Unbewohnte Räume. Erste Kälte. Architektonische Stille.",
     dosage: "2–3 Sprühstösse",
     longevity: "8–12 Stunden",
@@ -98,6 +103,11 @@ const perfumes = [
       heart: ["Marmorakkord", "Iris", "Nebelnote"],
       base: ["Moschus", "Vetiver", "Ambra"],
     },
+    phaseVisualImages: [
+      "/nasser-marmor-visual-phase-1.webp",
+      "/nasser-marmor-visual-phase-2.webp",
+      "/nasser-marmor-visual-phase-3.webp",
+    ],
     mood: "Feuchte Flächen. Kühle Eleganz. Polierte Ruhe.",
     dosage: "2–3 Sprühstösse",
     longevity: "7–11 Stunden",
@@ -178,6 +188,11 @@ const perfumes = [
       heart: ["Iris", "Seidenakkord", "Puder"],
       base: ["Kaschmirholz", "Weisser Moschus", "Ambrette"],
     },
+    phaseVisualImages: [
+      "/blasse-seide-visual-phase-1.webp",
+      "/blasse-seide-visual-phase-2.webp",
+      "/blasse-seide-visual-phase-3.webp",
+    ],
     mood: "Helles Gewebe. Stille Hautnähe. Gedämpfte Wärme.",
     dosage: "3–4 Sprühstösse",
     longevity: "6–10 Stunden",
@@ -258,6 +273,11 @@ const perfumes = [
       heart: ["Ascheakkord", "Papyrus", "Kreide"],
       base: ["Weisses Holz", "Rauch", "Harz"],
     },
+    phaseVisualImages: [
+      "/weisse-asche-visual-phase-1.webp",
+      "/weisse-asche-visual-phase-2.webp",
+      "/weisse-asche-visual-phase-3.webp",
+    ],
     mood: "Stille Rückstände. Helle Spuren. Erhobene Leere.",
     dosage: "2–3 Sprühstösse",
     longevity: "8–12 Stunden",
@@ -338,6 +358,11 @@ const perfumes = [
       heart: ["Metallakkord", "Rauch", "Harz"],
       base: ["Oud", "Labdanum", "Dunkles Holz"],
     },
+    phaseVisualImages: [
+      "/verbranntes-chrom-visual-phase-1.webp",
+      "/verbranntes-chrom-visual-phase-2.webp",
+      "/verbranntes-chrom-visual-phase-3.webp",
+    ],
     mood: "Hitze auf Metall. Dunkler Glanz. Kontrollierte Zerstörung.",
     dosage: "1–2 Sprühstösse",
     longevity: "10–14 Stunden",
@@ -418,6 +443,11 @@ const perfumes = [
       heart: ["Leder", "Birke", "Harz"],
       base: ["Patchouli", "Vetiver", "Dunkles Holz"],
     },
+    phaseVisualImages: [
+      "/schwarzes-benzin-visual-phase-1.webp",
+      "/schwarzes-benzin-visual-phase-2.webp",
+      "/schwarzes-benzin-visual-phase-3.webp",
+    ],
     mood: "Verbotene Oberfläche. Glanz im Schatten. Asphalt nach Regen.",
     dosage: "1–2 Sprühstösse",
     longevity: "9–13 Stunden",

parfum-shop/src/hooks/useButtonInteractions.js

@@ -0,0 +1,99 @@
+import { useEffect } from "react";
+import { gsap } from "gsap";
+
+/**
+ * Global, subtle GSAP micro-interactions for every `.atmos-btn`.
+ *
+ * Uses event delegation on the document so newly mounted buttons (drawer,
+ * route changes, conditional CTAs) work without re-binding.
+ *
+ * Effect = premium-but-quiet:
+ *   - pointerenter:  smooth lift + faint glow (overrides CSS transition)
+ *   - pointerleave:  return to rest
+ *   - pointerdown:   precise press
+ *   - pointerup:     release
+ *
+ * Skipped when prefers-reduced-motion is set, or when the button is disabled.
+ */
+function useButtonInteractions() {
+  useEffect(() => {
+    if (typeof document === "undefined") return undefined;
+
+    const reduceMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    if (reduceMotion) return undefined;
+
+    const isInteractiveButton = (target) => {
+      if (!target || typeof target.closest !== "function") return null;
+      const button = target.closest(".atmos-btn");
+      if (!button) return null;
+      if (button.disabled || button.getAttribute("aria-disabled") === "true") {
+        return null;
+      }
+      return button;
+    };
+
+    const onPointerEnter = (event) => {
+      const button = isInteractiveButton(event.target);
+      if (!button) return;
+      gsap.to(button, {
+        y: -2,
+        duration: 0.32,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+    };
+
+    const onPointerLeave = (event) => {
+      const button = isInteractiveButton(event.target);
+      if (!button) return;
+      gsap.to(button, {
+        y: 0,
+        scale: 1,
+        duration: 0.42,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+    };
+
+    const onPointerDown = (event) => {
+      const button = isInteractiveButton(event.target);
+      if (!button) return;
+      gsap.to(button, {
+        scale: 0.97,
+        duration: 0.12,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+    };
+
+    const onPointerUp = (event) => {
+      const button = isInteractiveButton(event.target);
+      if (!button) return;
+      gsap.to(button, {
+        scale: 1,
+        duration: 0.28,
+        ease: "power3.out",
+        overwrite: "auto",
+      });
+    };
+
+    const root = document;
+    root.addEventListener("pointerenter", onPointerEnter, true);
+    root.addEventListener("pointerleave", onPointerLeave, true);
+    root.addEventListener("pointerdown", onPointerDown, true);
+    root.addEventListener("pointerup", onPointerUp, true);
+    root.addEventListener("pointercancel", onPointerLeave, true);
+
+    return () => {
+      root.removeEventListener("pointerenter", onPointerEnter, true);
+      root.removeEventListener("pointerleave", onPointerLeave, true);
+      root.removeEventListener("pointerdown", onPointerDown, true);
+      root.removeEventListener("pointerup", onPointerUp, true);
+      root.removeEventListener("pointercancel", onPointerLeave, true);
+    };
+  }, []);
+}
+
+export default useButtonInteractions;

parfum-shop/src/index.css

@@ -9,6 +9,7 @@
 @import "./style/tokens.css";
 @import "./style/grid.css";
 @import "./style/breakpoints.css";
+@import "./style/buttons.css";
 
 @font-face {
   font-family: "Questrial";

parfum-shop/src/pages/AboutPage.css

@@ -1,43 +1,42 @@
+/**
+ * AboutPage — aligned to the visual language of LandingPage / ProductDetail:
+ *  - shared 12-column container width via .shell
+ *  - small uppercase "eyebrow" label + large light-weight headline
+ *  - section-y rhythm tokens
+ *  - hard-edge surface cards with subtle gradient overlay
+ *  - accent-filled CTA banner reused from product page
+ */
+
 .about-page {
   min-height: 100vh;
   padding: 0 0 var(--section-y-sm);
   color: var(--theme-text);
-  background:
+  background: var(--theme-bg);
-    radial-gradient(circle at 86% 8%, rgba(var(--theme-accent-rgb) / 0.13), transparent 28rem),
-    linear-gradient(180deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 88%, #000 12%));
 }
 
-.about-kicker,
+/* Eyebrow — single source of truth for kicker/label styling on this page. */
-.about-label,
+.about-eyebrow {
-.about-panel-label,
-.about-origin-box span,
-.about-panel-meta span,
-.about-method-points span {
   display: block;
+  margin-bottom: var(--gap-2xs);
   color: var(--theme-text-muted);
   font-size: var(--text-xs);
   letter-spacing: 0.22em;
   text-transform: uppercase;
 }
 
+/* ----- Hero -------------------------------------------------------------- */
+
 .about-hero {
   display: grid;
-  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.72fr);
+  gap: clamp(0.75rem, 1.6vw, 1.25rem);
-  gap: var(--gap-lg);
+  padding: clamp(5rem, 9vw, 8rem) 0 var(--section-y-sm);
-  align-items: end;
-  padding: clamp(2rem, 5vw, 5rem) 0 var(--section-y-sm);
-  border-bottom: 1px solid var(--theme-border);
 }
 
-.about-hero-copy {
+.about-hero h1 {
-  min-width: 0;
+  max-width: 14ch;
-}
+  margin: 0;
-
-.about-hero-copy h1 {
-  max-width: 11.4ch;
-  margin: clamp(0.85rem, 2vw, 1.2rem) 0 clamp(1rem, 2vw, 1.35rem);
   color: var(--theme-text);
-  font-size: clamp(3rem, 7.4vw, 8.8rem);
+  font-size: clamp(2.8rem, 8vw, 8rem);
   line-height: 0.9;
   font-weight: 300;
   letter-spacing: 0;
@@ -45,66 +44,45 @@
   text-wrap: balance;
 }
 
-.about-intro {
+.about-lead {
   max-width: var(--text-measure);
-  margin: 0;
+  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
   color: var(--theme-text-muted);
   font-size: var(--text-lg);
-  line-height: 1.65;
-}
-
-.about-hero-panel {
-  padding: clamp(1.25rem, 3vw, 2rem);
-  border: 1px solid rgba(var(--theme-accent-rgb) / 0.2);
-  background:
-    linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.1), transparent 62%),
-    var(--theme-surface-soft);
-}
-
-.about-hero-panel p {
-  margin: 0.75rem 0 0;
-  color: var(--theme-text);
-  font-size: var(--text-base);
   line-height: 1.62;
 }
 
-.about-panel-meta {
+/* ----- Quote ------------------------------------------------------------- */
-  display: grid;
+
-  gap: var(--gap-sm);
+.about-quote {
-  margin-top: clamp(1.2rem, 2.6vw, 2rem);
+  margin-top: var(--section-y-sm);
-  padding-top: var(--gap-sm);
+  padding-top: clamp(1.6rem, 3.5vw, 2.6rem);
-  border-top: 1px solid rgba(var(--theme-accent-rgb) / 0.2);
+  border-top: 1px solid var(--theme-border);
 }
 
-.about-panel-meta p,
+.about-quote p {
-.about-origin-box p,
+  max-width: 64rem;
-.about-method-points p {
+  margin: 0;
-  margin: 0.45rem 0 0;
   color: var(--theme-text);
-  font-size: var(--text-sm);
+  font-size: clamp(1.6rem, 4vw, 3.6rem);
-  line-height: 1.55;
+  line-height: 1.1;
+  font-weight: 300;
+  letter-spacing: 0;
+  text-wrap: balance;
 }
 
-.about-section {
+/* ----- Section heading (shared) ----------------------------------------- */
-  padding-top: var(--section-y-sm);
-}
 
-.about-section--split,
+.about-section-head {
-.about-origin-section,
-.about-method-section {
   display: grid;
-  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
+  gap: var(--gap-2xs);
-  gap: var(--gap-lg);
+  margin-bottom: clamp(1.6rem, 4vw, 3rem);
-  align-items: start;
 }
 
-.about-section-heading h2,
+.about-section-head h2 {
-.about-origin-copy h2,
+  margin: 0;
-.about-bottom-copy h2,
-.about-method-copy h2 {
-  margin: 0.75rem 0 0;
   color: var(--theme-text);
-  font-size: clamp(2.15rem, 5.2vw, 6rem);
+  font-size: clamp(2.2rem, 5.4vw, 6rem);
   line-height: 0.94;
   font-weight: 300;
   letter-spacing: 0;
@@ -112,149 +90,110 @@
   text-wrap: balance;
 }
 
-.about-section-copy,
+/* ----- Pillars ----------------------------------------------------------- */
-.about-method-points {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-sm);
-}
 
-.about-section-copy p,
+.about-pillars {
-.about-origin-copy p,
-.about-bottom-copy p,
-.about-method-copy p,
-.about-credential-card p,
-.about-card p,
-.about-proof-item p,
-.about-trust-note p {
-  margin: 0;
-  color: var(--theme-text-muted);
-  font-size: var(--text-base);
-  line-height: 1.7;
-}
-
-.about-section-copy p + p,
-.about-origin-copy p + p {
-  margin-top: var(--gap-sm);
-}
-
-/* These three sections use the global Grid12 system (see Grid.jsx).
-   We keep only the section-level spacing here. */
-.about-proof-strip,
-.about-grid-section,
-.about-credentials-grid {
   margin-top: var(--section-y-sm);
 }
 
-.about-card,
+.about-pillars-grid {
-.about-proof-item,
+  display: grid;
-.about-credential-card,
+  grid-template-columns: repeat(3, minmax(0, 1fr));
-.about-origin-box,
+  gap: var(--gap-sm);
-.about-method-section,
+}
-.about-trust-note {
+
+.about-pillar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  min-height: 14rem;
+  padding: clamp(1.1rem, 2.4vw, 1.8rem);
   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);
-}
-
-.about-card,
-.about-proof-item,
-.about-credential-card {
-  min-height: 100%;
-  padding: clamp(1.1rem, 2.4vw, 1.8rem);
   transition:
     transform var(--duration-med) var(--ease-out),
     border-color var(--duration-med) var(--ease-out),
     box-shadow var(--duration-med) var(--ease-out);
 }
 
-.about-card:hover,
+.about-pillar:hover {
-.about-proof-item:hover,
-.about-credential-card:hover {
   transform: translateY(-4px);
   border-color: rgba(var(--theme-accent-rgb) / 0.42);
   box-shadow: var(--theme-shadow-soft);
 }
 
-.about-card h3,
+.about-pillar h3 {
-.about-credential-card h3 {
+  margin: 0;
-  margin: 0.9rem 0 0.75rem;
   color: var(--theme-text);
   font-size: var(--text-xl);
-  line-height: 1.08;
   font-weight: 400;
+  line-height: 1.1;
   letter-spacing: 0;
 }
 
-.about-proof-item {
+.about-pillar p {
-  min-height: 9rem;
-}
-
-.about-proof-item p {
-  margin-top: 0.7rem;
-}
-
-.about-quote-block {
-  margin-top: var(--section-y-sm);
-  padding: clamp(1.4rem, 4vw, 3rem);
-  overflow: hidden;
-  border-left: 3px solid var(--theme-accent);
-  background:
-    radial-gradient(circle at 100% 0%, rgba(var(--theme-accent-rgb) / 0.18), transparent 18rem),
-    #171717;
-}
-
-.about-quote-block p {
-  max-width: 58rem;
   margin: 0;
-  color: #fff;
+  color: var(--theme-text-muted);
-  font-size: clamp(1.7rem, 4vw, 4.2rem);
+  font-size: var(--text-base);
-  line-height: 1.08;
+  line-height: 1.6;
-  font-weight: 300;
-  letter-spacing: 0;
 }
 
-.about-process-section,
+/* ----- Origin ------------------------------------------------------------ */
-.about-origin-section {
+
+.about-origin {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+  gap: var(--gap-lg);
+  align-items: start;
   margin-top: var(--section-y-sm);
   padding-top: var(--section-y-sm);
   border-top: 1px solid var(--theme-border);
 }
 
-.about-method-section {
+.about-origin-copy h2 {
-  margin-top: var(--section-y-sm);
+  margin: 0;
-  padding: clamp(1.25rem, 3vw, 2.4rem);
+  color: var(--theme-text);
+  font-size: clamp(2.2rem, 5.2vw, 5.4rem);
+  line-height: 0.94;
+  font-weight: 300;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
 }
 
-.about-method-points > div,
+.about-origin-copy p {
-.about-origin-box > div {
+  max-width: var(--text-measure);
-  padding-top: 1rem;
+  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
+  color: var(--theme-text-muted);
+  font-size: var(--text-base);
+  line-height: 1.65;
+}
+
+.about-origin-meta {
+  display: grid;
+  gap: var(--gap-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.about-origin-meta li {
+  padding-top: var(--gap-xs);
   border-top: 1px solid var(--theme-border);
 }
 
-.about-origin-box {
+.about-origin-meta p {
-  display: grid;
+  margin: 0;
-  gap: var(--gap-sm);
-  padding: clamp(1.1rem, 2.4vw, 1.8rem);
-}
-
-.about-trust-note {
-  margin-top: var(--section-y-sm);
-  padding: clamp(1.1rem, 2.4vw, 1.8rem);
-  border-color: rgba(var(--theme-accent-rgb) / 0.24);
-  background:
-    linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.11), transparent 60%),
-    var(--theme-surface-soft);
-}
-
-.about-trust-note p {
-  max-width: 72rem;
-  margin-top: 0.75rem;
   color: var(--theme-text);
+  font-size: var(--text-base);
+  line-height: 1.5;
 }
 
-.about-bottom-cta {
+/* ----- Bottom CTA (shares language with .detail-bottom-cta) ------------- */
+
+.about-cta {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--gap-lg);
@@ -263,88 +202,49 @@
   padding: clamp(1.5rem, 4vw, 3.5rem);
   overflow: hidden;
   background:
-    radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.22), transparent 20rem),
+    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.24), transparent 18rem),
-    var(--theme-accent-fill);
+    linear-gradient(135deg, var(--theme-accent-fill), var(--theme-accent-fill-strong));
 }
 
-.about-bottom-copy .about-label,
+.about-cta .about-eyebrow,
-.about-bottom-copy h2,
+.about-cta h2 {
-.about-bottom-copy p {
   color: var(--theme-accent-contrast);
 }
 
-.about-bottom-copy p {
+.about-cta-copy h2 {
-  max-width: 48rem;
+  max-width: 22ch;
-  margin-top: 1rem;
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 5rem);
+  line-height: 0.96;
+  font-weight: 300;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
 }
 
-.about-bottom-actions {
+/* ----- Responsive -------------------------------------------------------- */
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap-xs);
-  justify-content: flex-end;
-}
-
-.about-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 48px;
-  padding: 0 1.1rem;
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  color: inherit;
-  font-size: var(--text-sm);
-  text-decoration: none;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out);
-}
-
-.about-btn:hover,
-.about-btn:focus-visible {
-  transform: translateY(-2px);
-  box-shadow: var(--theme-shadow-soft);
-}
-
-.about-btn--primary {
-  background: #fff;
-  color: var(--theme-accent-fill-strong);
-}
-
-.about-btn--secondary {
-  border-color: rgba(255, 255, 255, 0.22);
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
-  backdrop-filter: blur(8px);
-}
 
 @media (max-width: 1180px) {
-  .about-hero,
+  .about-pillars-grid {
-  .about-section--split,
+    grid-template-columns: repeat(2, minmax(0, 1fr));
-  .about-origin-section,
+  }
-  .about-method-section,
+
-  .about-bottom-cta {
+  .about-origin,
+  .about-cta {
     grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 760px) {
   .about-hero {
-    padding-top: clamp(1.4rem, 5vw, 2rem);
+    padding-top: clamp(5.5rem, 18vw, 7rem);
   }
 
-  .about-hero-copy h1 {
+  .about-hero h1 {
     font-size: clamp(2.55rem, 13vw, 4.4rem);
   }
 
-  .about-bottom-actions {
+  .about-pillars-grid {
-    display: grid;
+    grid-template-columns: 1fr;
-    justify-content: stretch;
-  }
-
-  .about-btn {
-    width: 100%;
   }
 }

parfum-shop/src/pages/AboutPage.jsx

@@ -1,54 +1,23 @@
 import { Link } from "react-router";
 import SharedNavbar from "../components/SharedNavbar";
-import Grid, { Col } from "../components/layout/Grid";
 import PageMeta from "../components/seo/PageMeta";
 import "./AboutPage.css";
 
-const PROOF_ITEMS = [
+const PILLARS = [
-  { label: "ATELIER", text: "Entwicklung aus einem kuratierten Duft- und Materialkontext" },
-  { label: "KLEINSERIEN", text: "Chargenbasiert gedacht statt massenmarktfähig optimiert" },
-  { label: "KOMPOSITION", text: "Materiallogik vor Trendformel und Lautstärke" },
-  { label: "HERKUNFT", text: "Creative Direction und Qualitätsanspruch aus der Schweiz" },
-];
-
-const APPROACH_CARDS = [
   {
-    label: "01 / DEKODIEREN",
+    label: "01 / Material",
     title: "Atmosphäre lesen",
-    text: "Wir beobachten Licht, Materialität, Temperatur, Distanz und Spannung. Nicht als Moodboard allein, sondern als System von Eindrücken, das eine bestimmte Wirkung erzeugt.",
+    text: "Licht, Temperatur, Oberfläche. Wir beobachten zuerst — dann komponieren wir.",
   },
   {
-    label: "02 / VERDICHTEN",
+    label: "02 / Komposition",
     title: "In Duft übersetzen",
-    text: "Diese Eindrücke werden in eine olfaktorische Sprache übertragen: mineralisch, staubig, metallisch, glatt, rau, still oder warm. So entsteht keine Kopie eines Objekts, sondern seine Atmosphäre.",
+    text: "Eindrücke werden zu olfaktorischer Sprache: mineralisch, staubig, glatt, still.",
   },
   {
-    label: "03 / REDUZIEREN",
+    label: "03 / Reduktion",
     title: "Wirkung schärfen",
-    text: "Wir lassen weg, was beliebig ist. Übrig bleibt eine klare Signatur: charaktervoll, hochwertig und bewusst nischig. Ein Duft, der Haltung zeigt, statt nur zu gefallen.",
+    text: "Wir lassen weg, was beliebig ist. Übrig bleibt eine klare, eigene Signatur.",
-  },
-];
-
-const CREDENTIAL_CARDS = [
-  {
-    label: "ATELIER / ENTWICKLUNG",
-    title: "Komposition aus einem klaren Duftverständnis",
-    text: "Jede Arbeit basiert auf einem kuratierten Konzept, einer definierten Materialwelt und mehreren internen Entwicklungsstufen statt auf kurzfristigen Trendbriefings.",
-  },
-  {
-    label: "MATERIALLOGIK",
-    title: "Noten folgen einer Idee, nicht bloss einer Wirkung",
-    text: "Rohstoffe und Akkorde werden danach gewählt, welche Oberfläche, Temperatur oder Spannung sie transportieren – nicht nur danach, ob sie möglichst sofort gefallen.",
-  },
-  {
-    label: "CHARGENPRINZIP",
-    title: "Kleinserie statt gesichtsloser Massenästhetik",
-    text: "atmos denkt in kontrollierten Batches und klaren Editionen. Das stärkt Nachvollziehbarkeit, Qualitätsfokus und die Eigenständigkeit jeder Komposition.",
-  },
-  {
-    label: "QUALITÄTSPRÜFUNG",
-    title: "Komposition, Haltbarkeit und Verlauf werden bewusst geprüft",
-    text: "Bewertet werden nicht nur Auftakt und Präsenz, sondern auch Übergänge, Balance, Textur, Wiedererkennbarkeit und das Verhalten auf Haut über mehrere Stunden.",
   },
 ];
 
@@ -57,294 +26,100 @@ function AboutPage() {
     <div className="about-page">
       <PageMeta
         title="About"
-        description="atmos dekodiert Atmosphären und übersetzt Materialität, Raum und Charakter in konzeptionelle Düfte. Nischig. Hochwertig. Made in Switzerland."
+        description="atmos dekodiert Atmosphären und übersetzt Materialität, Raum und Charakter in konzeptionelle Düfte. Made in Switzerland."
         path="/about"
       />
       <SharedNavbar variant="hero" />
 
       <main id="main-content" className="shell">
         <section className="about-hero" data-reveal-group>
-          <div className="about-hero-copy">
+          <span className="about-eyebrow" data-reveal="fade">
-            <span className="about-kicker" data-reveal="fade">
+            ABOUT atmos
-              ABOUT atmos
+          </span>
-            </span>
+          <h1 data-reveal="lines">
-            <h1 data-reveal="lines">
+            WIR DEKODIEREN
-              WIR DEKODIEREN
+            <br />
-              <br />
+            ATMOSPHÄREN.
-              ATMOSPHÄREN
+          </h1>
-              <br />
+          <p className="about-lead" data-reveal="fade">
-              UND WANDELN
+            atmos entwickelt Nischendüfte, die eine Atmosphäre präzise
-              <br />
+            übersetzen — Material, Raum, Licht, Spannung. Reduziert in der
-              SIE IN DÜFTE
+            Form, konsequent in der Wirkung.
-            </h1>
+          </p>
-            <p className="about-intro" data-reveal="fade">
-              atmos entwickelt Nischendüfte, die nicht bloss gut riechen sollen,
-              sondern eine Atmosphäre präzise übersetzen: Material, Raum, Kälte,
-              Licht, Oberfläche, Spannung. Jeder Duft ist eine verdichtete
-              Komposition aus Eindruck, Haltung und Charakter.
-            </p>
-          </div>
-
-          <div className="about-hero-panel" data-reveal="fade">
-            <span className="about-panel-label">POSITIONIERUNG</span>
-            <p>
-              Nischig. Hochwertig. Edel. Luxuriös. Reduziert in der Form,
-              konsequent in der Wirkung.
-            </p>
-
-            <div className="about-panel-meta">
-              <div>
-                <span>HERKUNFT</span>
-                <p>Made in Switzerland</p>
-              </div>
-              <div>
-                <span>ANSATZ</span>
-                <p>Atmosphäre vor Mainstream</p>
-              </div>
-              <div>
-                <span>FOKUS</span>
-                <p>Duft als Konzeptobjekt</p>
-              </div>
-            </div>
-          </div>
         </section>
 
-        <section className="about-section about-section--split" data-reveal-group>
+        <section className="about-quote" data-reveal-group>
-          <div className="about-section-heading">
-            <span className="about-label" data-reveal="fade">
-              UNSER VERSTÄNDNIS
-            </span>
-            <h2 data-reveal="lines">NICHT DEKORATION. SONDERN HALTUNG.</h2>
-          </div>
-
-          <div className="about-section-copy" data-reveal="fade">
-            <p>
-              atmos versteht Parfum nicht als beiläufiges Accessoire, sondern als
-              Form von Ausdruck. Unsere Düfte entstehen nicht aus Trends, sondern
-              aus Stimmungen, Kontrasten und räumlichen Eindrücken. Uns interessiert
-              nicht das Laute, Überladene oder Gefällige, sondern das Präzise, das
-              Eigenständige und das, was nachwirkt.
-            </p>
-
-            <p>
-              Deshalb arbeiten wir mit Atmosphären wie kaltem Beton, nassem Marmor,
-              heller Asche oder textilem Puder. Wir übersetzen Oberflächen,
-              Materialien und emotionale Spannung in olfaktorische Kompositionen,
-              die sich bewusst von klassischer Parfümerie abheben.
-            </p>
-          </div>
-        </section>
-
-        <Grid
-          as="section"
-          gap="sm"
-          className="about-proof-strip"
-          data-reveal-group
-          data-reveal-start="top 90%"
-        >
-          {PROOF_ITEMS.map((item) => (
-            <Col
-              key={item.label}
-              span={12}
-              md={6}
-              lg={3}
-              className="about-proof-item"
-              data-reveal="fade"
-            >
-              <span className="about-label">{item.label}</span>
-              <p>{item.text}</p>
-            </Col>
-          ))}
-        </Grid>
-
-        <section className="about-quote-block" data-reveal-group>
           <p data-reveal="fade">
             „Jeder Duft beginnt bei uns nicht mit einer Note, sondern mit einem
             Raumgefühl.“
           </p>
         </section>
 
-        <Grid
+        <section className="about-pillars" data-reveal-group data-reveal-start="top 86%">
-          as="section"
+          <header className="about-section-head">
-          gap="sm"
+            <span className="about-eyebrow" data-reveal="fade">
-          className="about-grid-section"
+              Unser Ansatz
-          data-reveal-group
-          data-reveal-start="top 84%"
-        >
-          {APPROACH_CARDS.map((card) => (
-            <Col
-              key={card.label}
-              span={12}
-              md={6}
-              lg={4}
-              className="about-card"
-              data-reveal="fade"
-            >
-              <span className="about-label">{card.label}</span>
-              <h3>{card.title}</h3>
-              <p>{card.text}</p>
-            </Col>
-          ))}
-        </Grid>
-
-        <section
-          className="about-section about-section--split about-process-section"
-          data-reveal-group
-        >
-          <div className="about-section-heading">
-            <span className="about-label" data-reveal="fade">
-              PROZESS & KOMPETENZ
             </span>
-            <h2 data-reveal="lines">
+            <h2 data-reveal="lines">DREI SCHRITTE. EINE HALTUNG.</h2>
-              WIE AUS EINER IDEE EINE BELASTBARE KOMPOSITION WIRD.
+          </header>
-            </h2>
-          </div>
 
-          <div className="about-section-copy" data-reveal="fade">
+          <div className="about-pillars-grid">
-            <p>
+            {PILLARS.map((pillar) => (
-              atmos arbeitet nicht mit einem losgelösten Storytelling, das im
+              <article className="about-pillar" key={pillar.label} data-reveal="fade">
-              Nachhinein auf einen Duft gelegt wird. Jede Komposition beginnt mit
+                <span className="about-eyebrow">{pillar.label}</span>
-              einer klaren Material- und Spannungslogik: Welche Oberfläche soll
+                <h3>{pillar.title}</h3>
-              spürbar werden? Welche Temperatur? Welche Dichte? Welche Distanz?
+                <p>{pillar.text}</p>
-            </p>
+              </article>
-
+            ))}
-            <p>
-              Erst danach wird in Akkorden, Übergängen und Gewichtungen gedacht.
-              So entstehen Düfte, die nicht bloss „inspirierte Namen“ tragen,
-              sondern in sich konsistent wirken – vom ersten Eindruck bis in den
-              Drydown.
-            </p>
           </div>
         </section>
 
-        <Grid
+        <section className="about-origin" data-reveal-group>
-          as="section"
-          gap="sm"
-          className="about-credentials-grid"
-          data-reveal-group
-          data-reveal-start="top 84%"
-        >
-          {CREDENTIAL_CARDS.map((card) => (
-            <Col
-              key={card.label}
-              as="article"
-              span={12}
-              md={6}
-              className="about-credential-card"
-              data-reveal="fade"
-            >
-              <span className="about-label">{card.label}</span>
-              <h3>{card.title}</h3>
-              <p>{card.text}</p>
-            </Col>
-          ))}
-        </Grid>
-
-        <section className="about-method-section" data-reveal-group>
-          <div className="about-method-copy">
-            <span className="about-label" data-reveal="fade">
-              NACHWEISBARE DUFTLOGIK
-            </span>
-            <h2 data-reveal="lines">
-              FÜR MENSCHEN, DIE HYPE ERKENNEN UND SUBSTANZ SUCHEN.
-            </h2>
-            <p data-reveal="fade">
-              Wer in der Szene unterwegs ist, erkennt schnell, wenn ein Duft vor
-              allem über Bildsprache verkauft wird. Genau deshalb machen wir unsere
-              Denkweise sichtbar: über Struktur, Materialbezug, Edition, Trageverlauf
-              und eine klare innere Logik der Komposition.
-            </p>
-          </div>
-
-          <div className="about-method-points" data-reveal="fade">
-            <div>
-              <span>DUFTSTRUKTUR</span>
-              <p>Top, Heart und Base werden als Verlauf und nicht nur als Liste gedacht.</p>
-            </div>
-            <div>
-              <span>MATERIALBEZUG</span>
-              <p>Jeder Duft wird über Atmosphäre, Oberfläche und sensorische Spannung verankert.</p>
-            </div>
-            <div>
-              <span>EDITIONEN</span>
-              <p>Chargen und Editionen machen Entwicklung und Kontext nachvollziehbarer.</p>
-            </div>
-            <div>
-              <span>TRAGBARKEIT</span>
-              <p>Nische bedeutet bei uns Charakter – nicht Beliebigkeit oder reine Provokation.</p>
-            </div>
-          </div>
-        </section>
-
-        <section className="about-section about-origin-section" data-reveal-group>
           <div className="about-origin-copy">
-            <span className="about-label" data-reveal="fade">
+            <span className="about-eyebrow" data-reveal="fade">
-              MADE IN SWITZERLAND
+              Made in Switzerland
             </span>
-            <h2 data-reveal="lines">PRÄZISION IN FORM, DUFT UND AUFTRITT.</h2>
+            <h2 data-reveal="lines">PRÄZISION IN FORM UND DUFT.</h2>
             <p data-reveal="fade">
-              atmos ist in der Schweiz verankert. Dieser Ursprung zeigt sich nicht
+              Verankert in der Schweiz. Kontrollierte Chargen, klare Editionen,
-              nur in der Herstellung, sondern auch in unserer Haltung zur Qualität:
+              eine Designsprache zwischen Luxus und Konzept. Hochwertig, ohne
-              kontrolliert, bewusst, präzise und kompromisslos in der Ausarbeitung.
+              laut zu werden.
-            </p>
-            <p data-reveal="fade">
-              Unsere Düfte bewegen sich zwischen Luxus und Konzept. Sie sollen
-              hochwertig wirken, ohne laut zu werden. Edel, ohne klassisch zu sein.
-              Und luxuriös, ohne sich über Überfluss zu definieren.
             </p>
           </div>
 
-          <div className="about-origin-box" data-reveal="fade">
+          <ul className="about-origin-meta" data-reveal="fade">
-            <div>
+            <li>
-              <span>QUALITÄTSVERSPRECHEN</span>
+              <span className="about-eyebrow">Herkunft</span>
-              <p>Kuratiert, präzise und mit Fokus auf charakterstarke Kompositionen.</p>
+              <p>Made in Switzerland</p>
-            </div>
+            </li>
-            <div>
+            <li>
-              <span>DESIGNSPRACHE</span>
+              <span className="about-eyebrow">Ansatz</span>
-              <p>Reduziert, architektonisch und materialorientiert.</p>
+              <p>Atmosphäre vor Mainstream</p>
-            </div>
+            </li>
-            <div>
+            <li>
-              <span>ZIEL</span>
+              <span className="about-eyebrow">Fokus</span>
-              <p>Düfte schaffen, die nicht austauschbar sind, sondern erinnerbar.</p>
+              <p>Duft als Konzeptobjekt</p>
-            </div>
+            </li>
-          </div>
+          </ul>
         </section>
 
-        <section className="about-trust-note" data-reveal-group>
+        <section className="about-cta" data-reveal-group data-on-accent>
-          <span className="about-label" data-reveal="fade">
+          <div className="about-cta-copy">
-            QUALITÄTSVERSTÄNDNIS
+            <span className="about-eyebrow" data-reveal="fade">
-          </span>
-          <p data-reveal="fade">
-            Bei atmos steht nicht die schnelle Aufmerksamkeit im Vordergrund, sondern die
-            Qualität der Komposition. Unsere Düfte entstehen aus klaren Materialideen,
-            kontrollierter Entwicklung und einem kuratierten Anspruch an Verlauf,
-            Balance, Haltbarkeit und Charakter. Jede Edition soll nicht nur auffallen,
-            sondern bestehen – durch Präzision, Eigenständigkeit und eine spürbare
-            kompositorische Disziplin.
-          </p>
-        </section>
-
-        <section className="about-bottom-cta" data-reveal-group>
-          <div className="about-bottom-copy">
-            <span className="about-label" data-reveal="fade">
               atmos
             </span>
             <h2 data-reveal="lines">
-              FÜR MENSCHEN, DIE NICHT NUR EINEN DUFT SUCHEN, SONDERN EINE HALTUNG.
+              FÜR MENSCHEN, DIE SUBSTANZ SUCHEN.
             </h2>
-            <p data-reveal="fade">
-              Entdecke Düfte, die Atmosphäre nicht illustrieren, sondern in eine
-              tragbare Form übersetzen.
-            </p>
           </div>
 
-          <div className="about-bottom-actions" data-reveal="fade">
+          <div className="atmos-btn-row atmos-btn-row--responsive" data-reveal="fade">
-            <Link to="/" className="about-btn about-btn--primary">
+            <Link to="/#dufte" className="atmos-btn atmos-btn--primary">
-              Zur Startseite
-            </Link>
-            <Link to="/#dufte" className="about-btn about-btn--secondary">
               Düfte entdecken
             </Link>
+            <Link to="/discovery-set" className="atmos-btn atmos-btn--secondary">
+              Discovery Set
+            </Link>
           </div>
         </section>
       </main>

parfum-shop/src/pages/DatenschutzPage.css

@@ -1,108 +1,11 @@
+/**
+ * Datenschutz-specific overrides.
+ *
+ * The full visual system lives in ImpressumPage.css under the shared
+ * `.legal-*` namespace; both pages are rendered with `class="legal-page"`
+ * so they stay perfectly consistent. Page-specific tweaks belong here.
+ */
+
 .datenschutz-page {
-  min-height: 100vh;
+  /* No bespoke overrides today — kept for future page-only needs. */
-  padding: 0 0 var(--section-y-sm);
-  color: var(--theme-text);
-  background:
-    radial-gradient(circle at 86% 8%, rgba(var(--theme-accent-rgb) / 0.12), transparent 28rem),
-    linear-gradient(180deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 88%, #000 12%));
-}
-
-.datenschutz-kicker,
-.datenschutz-label {
-  display: block;
-  color: var(--theme-text-muted);
-  font-size: var(--text-xs);
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-}
-
-.datenschutz-hero {
-  padding: clamp(2rem, 5vw, 5rem) 0 var(--section-y-sm);
-  border-bottom: 1px solid var(--theme-border);
-}
-
-.datenschutz-hero h1 {
-  margin: clamp(0.85rem, 2vw, 1.2rem) 0 clamp(1rem, 2vw, 1.35rem);
-  color: var(--theme-text);
-  font-size: clamp(3rem, 8vw, 7.2rem);
-  line-height: 0.9;
-  font-weight: 300;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.datenschutz-intro {
-  max-width: var(--text-measure);
-  margin: 0;
-  color: var(--theme-text-muted);
-  font-size: var(--text-lg);
-  line-height: 1.7;
-}
-
-.datenschutz-section {
-  display: grid;
-  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
-  gap: var(--gap-lg);
-  align-items: start;
-  margin-top: var(--section-y-sm);
-  padding-top: var(--section-y-sm);
-  border-top: 1px solid var(--theme-border);
-}
-
-.datenschutz-section-heading h2 {
-  margin: 0.75rem 0 0;
-  color: var(--theme-text);
-  font-size: clamp(2rem, 4.2vw, 4.5rem);
-  line-height: 0.96;
-  font-weight: 300;
-  letter-spacing: 0;
-  text-transform: uppercase;
-  text-wrap: balance;
-}
-
-.datenschutz-section-copy p {
-  margin: 0 0 1rem;
-  color: var(--theme-text-muted);
-  font-size: var(--text-base);
-  line-height: 1.75;
-}
-
-.datenschutz-list {
-  display: grid;
-  gap: 0.75rem;
-  margin: 0;
-  padding-left: 1.1rem;
-}
-
-.datenschutz-list li {
-  color: var(--theme-text-muted);
-  font-size: var(--text-base);
-  line-height: 1.7;
-}
-
-.datenschutz-note-box {
-  padding: clamp(1.1rem, 2.4vw, 1.8rem);
-  border: 1px solid rgba(var(--theme-accent-rgb) / 0.24);
-  background:
-    linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.11), transparent 60%),
-    var(--theme-surface-soft);
-}
-
-.datenschutz-note-box p {
-  margin: 0;
-  color: var(--theme-text);
-  font-size: var(--text-base);
-  line-height: 1.65;
-}
-
-@media (max-width: 900px) {
-  .datenschutz-section {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 700px) {
-  .datenschutz-hero {
-    padding-top: clamp(1.4rem, 5vw, 2rem);
-  }
 }

parfum-shop/src/pages/DatenschutzPage.jsx

@@ -1,220 +1,132 @@
 import SharedNavbar from "../components/SharedNavbar";
 import PageMeta from "../components/seo/PageMeta";
+// Datenschutz reuses the shared legal-page system defined in ImpressumPage.css.
+import "./ImpressumPage.css";
 import "./DatenschutzPage.css";
 
+const SECTIONS = [
+  {
+    label: "Verantwortliche Stelle",
+    title: "Wer für die Datenverarbeitung verantwortlich ist",
+    body: [
+      "Verantwortlich für die Datenverarbeitung im Zusammenhang mit dieser Website ist die atmos GmbH, Musterstrasse 12, 7000 Chur, Schweiz.",
+      "E-Mail: hello@atmos.ch · Telefon: +41 00 000 00 00",
+    ],
+  },
+  {
+    label: "Allgemeines",
+    title: "Welche Daten erhoben werden",
+    body: [
+      "Beim Besuch dieser Website können automatisch technische Daten erfasst werden — etwa IP-Adresse, Datum und Uhrzeit des Zugriffs, Browsertyp, Betriebssystem und Referrer-URL.",
+      "Personenbezogene Daten werden darüber hinaus nur erhoben, wenn du sie freiwillig mitteilst — etwa bei einer Bestellung, einer Supportanfrage oder einer Newsletter-Anmeldung.",
+    ],
+  },
+  {
+    label: "Zweck",
+    title: "Wofür die Daten verwendet werden",
+    body: ["Die Verarbeitung personenbezogener Daten erfolgt insbesondere:"],
+    list: [
+      "zur Bereitstellung und technischen Optimierung der Website,",
+      "zur Bearbeitung von Anfragen und Supportfällen,",
+      "zur Abwicklung von Bestellungen und Vertragsverhältnissen,",
+      "zur Sicherheit und Missbrauchsprävention,",
+      "zur Erfüllung gesetzlicher Verpflichtungen.",
+    ],
+  },
+  {
+    label: "Cookies & Tracking",
+    title: "Cookies und ähnliche Technologien",
+    body: [
+      "Diese Website kann Cookies oder ähnliche Technologien verwenden, um Funktionen bereitzustellen und das Nutzererlebnis zu verbessern.",
+      "Soweit nicht technisch notwendige Cookies oder Tracking-Tools eingesetzt werden, erfolgt dies nur im Rahmen der jeweils geltenden rechtlichen Vorgaben.",
+    ],
+  },
+  {
+    label: "Weitergabe",
+    title: "Weitergabe an Dritte",
+    body: [
+      "Eine Weitergabe personenbezogener Daten an Dritte erfolgt nur, soweit dies zur Vertragserfüllung notwendig ist, eine gesetzliche Verpflichtung besteht oder eine entsprechende Einwilligung erteilt wurde.",
+    ],
+  },
+  {
+    label: "Speicherdauer",
+    title: "Wie lange Daten gespeichert werden",
+    body: [
+      "Personenbezogene Daten werden nur so lange gespeichert, wie dies für die jeweiligen Zwecke erforderlich ist oder gesetzliche Aufbewahrungspflichten bestehen.",
+    ],
+  },
+  {
+    label: "Rechte",
+    title: "Rechte der betroffenen Personen",
+    body: [
+      "Betroffene Personen haben im Rahmen des anwendbaren Datenschutzrechts insbesondere das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung sowie gegebenenfalls auf Widerspruch.",
+    ],
+  },
+  {
+    label: "Sicherheit",
+    title: "Technische und organisatorische Massnahmen",
+    body: [
+      "Wir treffen angemessene technische und organisatorische Sicherheitsmassnahmen, um personenbezogene Daten vor unbefugtem Zugriff, Verlust oder Manipulation zu schützen.",
+    ],
+  },
+  {
+    label: "Aktualisierung",
+    title: "Änderungen dieser Datenschutzerklärung",
+    body: [
+      "atmos behält sich vor, diese Datenschutzerklärung bei Bedarf anzupassen. Es gilt jeweils die auf dieser Website veröffentlichte aktuelle Fassung.",
+    ],
+  },
+];
+
 function DatenschutzPage() {
-    return (
+  return (
-        <div className="datenschutz-page">
+    <div className="datenschutz-page legal-page">
-            <PageMeta
+      <PageMeta
-                title="Datenschutz"
+        title="Datenschutz"
-                description="Datenschutzerklärung von atmos: Erhebung, Speicherung und Verarbeitung personenbezogener Daten."
+        description="Datenschutzerklärung von atmos: Erhebung, Speicherung und Verarbeitung personenbezogener Daten."
-                path="/datenschutz"
+        path="/datenschutz"
-            />
+      />
-            <SharedNavbar variant="hero" />
+      <SharedNavbar variant="hero" />
 
-            <main id="main-content" className="shell">
+      <main id="main-content" className="shell">
-                <section className="datenschutz-hero" data-reveal-group>
+        <section className="legal-hero" data-reveal-group>
-                    <span className="datenschutz-kicker" data-reveal="fade">RECHTLICHE ANGABEN</span>
+          <span className="legal-eyebrow" data-reveal="fade">
-                    <h1 data-reveal="lines">DATENSCHUTZ</h1>
+            Rechtliche Angaben
-                    <p className="datenschutz-intro" data-reveal="fade">
+          </span>
-                        Der Schutz persönlicher Daten hat für atmos einen hohen Stellenwert.
+          <h1 data-reveal="lines">DATENSCHUTZ</h1>
-                        Nachfolgend informieren wir darüber, welche personenbezogenen Daten bei
+          <p className="legal-lead" data-reveal="fade">
-                        der Nutzung dieser Website erhoben, verarbeitet und gespeichert werden,
+            Der Schutz persönlicher Daten hat für atmos einen hohen Stellenwert.
-                        zu welchen Zwecken dies erfolgt und welche Rechte betroffene Personen im
+            Nachfolgend erfährst du, welche Daten wir bei der Nutzung dieser
-                        Zusammenhang mit ihren Daten haben.
+            Website verarbeiten und welche Rechte du dabei hast.
-                    </p>
+          </p>
-                </section>
+        </section>
 
-                <section className="datenschutz-section" data-reveal-group>
+        {SECTIONS.map((section) => (
-                    <div className="datenschutz-section-heading">
+          <section className="legal-section" key={section.label} data-reveal-group>
-                        <span className="datenschutz-label" data-reveal="fade">VERANTWORTLICHE STELLE</span>
+            <header className="legal-section-head">
-                        <h2 data-reveal="lines">WER FÜR DIE DATENVERARBEITUNG VERANTWORTLICH IST</h2>
+              <span className="legal-eyebrow" data-reveal="fade">
-                    </div>
+                {section.label}
+              </span>
+              <h2 data-reveal="lines">{section.title}</h2>
+            </header>
 
-                    <div className="datenschutz-section-copy" data-reveal="fade">
+            <div className="legal-section-body" data-reveal="fade">
-                        <p>
+              {section.body.map((paragraph) => (
-                            Verantwortlich für die Datenverarbeitung im Zusammenhang mit dieser
+                <p key={paragraph}>{paragraph}</p>
-                            Website ist:
+              ))}
-                        </p>
+              {section.list && (
-                        <p>
+                <ul className="legal-list">
-                            atmos GmbH
+                  {section.list.map((item) => (
-                            <br />
+                    <li key={item}>{item}</li>
-                            Musterstrasse 12
+                  ))}
-                            <br />
+                </ul>
-                            7000 Chur
+              )}
-                            <br />
+            </div>
-                            Schweiz
+          </section>
-                        </p>
+        ))}
-                        <p>
+      </main>
-                            E-Mail: hello@atmos.ch
+    </div>
-                            <br />
+  );
-                            Telefon: +41 00 000 00 00
-                        </p>
-                    </div>
-                </section>
-
-                <section className="datenschutz-section" data-reveal-group>
-                    <div className="datenschutz-section-heading">
-                        <span className="datenschutz-label" data-reveal="fade">ALLGEMEINES</span>
-                        <h2 data-reveal="lines">WELCHE DATEN ERHOBEN WERDEN</h2>
-                    </div>
-
-                    <div className="datenschutz-section-copy" data-reveal="fade">
-                        <p>
-                            Beim Besuch dieser Website können automatisch technische Daten
-                            erfasst werden. Dazu gehören insbesondere IP-Adresse, Datum und
-                            Uhrzeit des Zugriffs, Browsertyp, Betriebssystem, Referrer-URL sowie
-                            weitere Informationen, die zur Stabilität und Sicherheit der Website
-                            erforderlich sind.
-                        </p>
-                        <p>
-                            Personenbezogene Daten werden darüber hinaus nur dann erhoben, wenn
-                            du uns diese freiwillig mitteilst, beispielsweise über ein
-                            Kontaktformular, bei einer Bestellung, bei einer Supportanfrage oder
-                            durch die Anmeldung zu einem Newsletter.
-                        </p>
-                    </div>
-                </section>
-
-                <section className="datenschutz-section" data-reveal-group>
-                    <div className="datenschutz-section-heading">
-                        <span className="datenschutz-label" data-reveal="fade">ZWECK</span>
-                        <h2 data-reveal="lines">WOFÜR DIE DATEN VERWENDET WERDEN</h2>
-                    </div>
-
-                    <div className="datenschutz-section-copy" data-reveal="fade">
-                        <p>Die Verarbeitung personenbezogener Daten erfolgt insbesondere:</p>
-                        <ul className="datenschutz-list">
-                            <li>zur Bereitstellung und technischen Optimierung der Website,</li>
-                            <li>zur Bearbeitung von Anfragen und Supportfällen,</li>
-                            <li>zur Abwicklung von Bestellungen und Vertragsverhältnissen,</li>
-                            <li>zur Kommunikation mit Kundinnen und Kunden,</li>
-                            <li>zur Sicherheit und Missbrauchsprävention,</li>
-                            <li>zur Erfüllung gesetzlicher Verpflichtungen.</li>
-                        </ul>
-                    </div>
-                </section>
-
-                <section className="datenschutz-section" data-reveal-group>
-                    <div className="datenschutz-section-heading">
-                        <span className="datenschutz-label" data-reveal="fade">COOKIES & TRACKING</span>
-                        <h2 data-reveal="lines">COOKIES UND ÄHNLICHE TECHNOLOGIEN</h2>
-                    </div>
-
-                    <div className="datenschutz-section-copy" data-reveal="fade">
-                        <p>
-                            Diese Website kann Cookies oder ähnliche Technologien verwenden, um
-                            Funktionen bereitzustellen, die Nutzung zu analysieren und das
-                            Nutzererlebnis zu verbessern. Cookies sind kleine Textdateien, die
-                            auf deinem Endgerät gespeichert werden.
-                        </p>
-                        <p>
-                            Soweit technisch nicht notwendige Cookies oder Tracking-Tools
-                            eingesetzt werden, erfolgt dies nur im Rahmen der jeweils geltenden
-                            rechtlichen Vorgaben. Falls du ein Cookie-Banner oder
-                            Einwilligungs-Tool einsetzt, sollten die hier gemachten Angaben exakt
-                            auf dieses Setup abgestimmt sein.
-                        </p>
-                    </div>
-                </section>
-
-                <section className="datenschutz-section" data-reveal-group>
-                    <div className="datenschutz-section-heading">
-                        <span className="datenschutz-label" data-reveal="fade">WEITERGABE</span>
-                        <h2 data-reveal="lines">WEITERGABE AN DRITTE</h2>
-                    </div>
-
-                    <div className="datenschutz-section-copy" data-reveal="fade">
-                        <p>
-                            Eine Weitergabe personenbezogener Daten an Dritte erfolgt nur, soweit
-                            dies zur Vertragserfüllung notwendig ist, eine gesetzliche
-                            Verpflichtung besteht, ein berechtigtes Interesse vorliegt oder eine
-                            entsprechende Einwilligung erteilt wurde.
-                        </p>
-                        <p>
-                            Eine Datenweitergabe kann insbesondere an technische Dienstleister,
-                            Hosting-Anbieter, Zahlungsdienstleister, Versandpartner oder
-                            Analyseanbieter erfolgen, sofern dies für den Betrieb der Website
-                            oder die angebotenen Leistungen erforderlich ist.
-                        </p>
-                    </div>
-                </section>
-
-                <section className="datenschutz-section" data-reveal-group>
-                    <div className="datenschutz-section-heading">
-                        <span className="datenschutz-label" data-reveal="fade">SPEICHERDAUER</span>
-                        <h2 data-reveal="lines">WIE LANGE DATEN GESPEICHERT WERDEN</h2>
-                    </div>
-
-                    <div className="datenschutz-section-copy" data-reveal="fade">
-                        <p>
-                            Personenbezogene Daten werden nur so lange gespeichert, wie dies für
-                            die jeweiligen Zwecke erforderlich ist oder gesetzliche
-                            Aufbewahrungspflichten bestehen. Anschliessend werden die Daten
-                            gelöscht oder anonymisiert, soweit keine weitere rechtliche Grundlage
-                            für die Verarbeitung besteht.
-                        </p>
-                    </div>
-                </section>
-
-                <section className="datenschutz-section" data-reveal-group>
-                    <div className="datenschutz-section-heading">
-                        <span className="datenschutz-label" data-reveal="fade">RECHTE</span>
-                        <h2 data-reveal="lines">RECHTE DER BETROFFENEN PERSONEN</h2>
-                    </div>
-
-                    <div className="datenschutz-section-copy" data-reveal="fade">
-                        <p>
-                            Betroffene Personen haben im Rahmen des anwendbaren Datenschutzrechts
-                            insbesondere das Recht auf Auskunft, Berichtigung, Löschung,
-                            Einschränkung der Verarbeitung sowie gegebenenfalls auf Widerspruch
-                            gegen bestimmte Datenverarbeitungen.
-                        </p>
-                        <p>
-                            Anfragen hierzu können an die oben genannte verantwortliche Stelle
-                            gerichtet werden.
-                        </p>
-                    </div>
-                </section>
-
-                <section className="datenschutz-section" data-reveal-group>
-                    <div className="datenschutz-section-heading">
-                        <span className="datenschutz-label" data-reveal="fade">SICHERHEIT</span>
-                        <h2 data-reveal="lines">TECHNISCHE UND ORGANISATORISCHE MASSNAHMEN</h2>
-                    </div>
-
-                    <div className="datenschutz-section-copy" data-reveal="fade">
-                        <p>
-                            Wir treffen angemessene technische und organisatorische
-                            Sicherheitsmassnahmen, um personenbezogene Daten vor unbefugtem
-                            Zugriff, Verlust, Missbrauch oder Manipulation zu schützen.
-                        </p>
-                        <p>
-                            Bitte beachte jedoch, dass die Datenübertragung im Internet trotz
-                            aller Sorgfalt Sicherheitslücken aufweisen kann.
-                        </p>
-                    </div>
-                </section>
-
-                <section className="datenschutz-section" data-reveal-group>
-                    <div className="datenschutz-section-heading">
-                        <span className="datenschutz-label" data-reveal="fade">AKTUALISIERUNG</span>
-                        <h2 data-reveal="lines">ÄNDERUNGEN DIESER DATENSCHUTZERKLÄRUNG</h2>
-                    </div>
-
-                    <div className="datenschutz-note-box" data-reveal="fade">
-                        <p>
-                            atmos behält sich vor, diese Datenschutzerklärung bei Bedarf
-                            anzupassen, insbesondere wenn sich rechtliche Vorgaben, technische
-                            Prozesse oder die angebotenen digitalen Leistungen weiterentwickeln.
-                            Es gilt jeweils die auf dieser Website veröffentlichte aktuelle
-                            Fassung.
-                        </p>
-                    </div>
-                </section>
-            </main>
-        </div>
-    );
 }
 
 export default DatenschutzPage;

parfum-shop/src/pages/ImpressumPage.css

@@ -1,91 +1,105 @@
-.impressum-page {
+/**
+ * Shared legal-page styling — used by both Impressum and Datenschutz.
+ * Aligned with the global design system: .shell container, eyebrow + light
+ * weight headlines, hard-edge surface cards, accent stripes via tokens.
+ *
+ * Class prefix `.legal-*` is shared so both pages stay perfectly consistent.
+ */
+
+.legal-page {
   min-height: 100vh;
   padding: 0 0 var(--section-y-sm);
   color: var(--theme-text);
-  background:
+  background: var(--theme-bg);
-    radial-gradient(circle at 86% 8%, rgba(var(--theme-accent-rgb) / 0.12), transparent 28rem),
-    linear-gradient(180deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 88%, #000 12%));
 }
 
-.impressum-kicker,
+.legal-eyebrow {
-.impressum-label {
   display: block;
+  margin-bottom: var(--gap-2xs);
   color: var(--theme-text-muted);
   font-size: var(--text-xs);
   letter-spacing: 0.22em;
   text-transform: uppercase;
 }
 
-.impressum-hero {
+/* ----- Hero -------------------------------------------------------------- */
-  padding: clamp(2rem, 5vw, 5rem) 0 var(--section-y-sm);
+
-  border-bottom: 1px solid var(--theme-border);
+.legal-hero {
+  display: grid;
+  gap: clamp(0.75rem, 1.6vw, 1.25rem);
+  padding: clamp(5rem, 9vw, 8rem) 0 var(--section-y-sm);
 }
 
-.impressum-hero h1 {
+.legal-hero h1 {
-  margin: clamp(0.85rem, 2vw, 1.2rem) 0 clamp(1rem, 2vw, 1.35rem);
+  margin: 0;
   color: var(--theme-text);
-  font-size: clamp(3rem, 8vw, 7.2rem);
+  font-size: clamp(3rem, 8vw, 7.6rem);
   line-height: 0.9;
   font-weight: 300;
   letter-spacing: 0;
   text-transform: uppercase;
+  text-wrap: balance;
 }
 
-.impressum-intro {
+.legal-lead {
   max-width: var(--text-measure);
-  margin: 0;
+  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
   color: var(--theme-text-muted);
   font-size: var(--text-lg);
-  line-height: 1.65;
+  line-height: 1.62;
 }
 
-.impressum-grid {
+/* ----- Fact grid (Impressum address blocks) ---------------------------- */
+
+.legal-fact-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--gap-sm);
   margin-top: var(--section-y-sm);
 }
 
-.impressum-card,
+.legal-fact {
-.impressum-note-box {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  min-height: 12rem;
+  padding: clamp(1.1rem, 2.4vw, 1.6rem);
   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);
-}
-
-.impressum-card {
-  min-height: 210px;
-  padding: clamp(1.1rem, 2.4vw, 1.8rem);
   transition:
     transform var(--duration-med) var(--ease-out),
     border-color var(--duration-med) var(--ease-out),
     box-shadow var(--duration-med) var(--ease-out);
 }
 
-.impressum-card:hover {
+.legal-fact:hover {
   transform: translateY(-4px);
   border-color: rgba(var(--theme-accent-rgb) / 0.42);
   box-shadow: var(--theme-shadow-soft);
 }
 
-.impressum-card h2 {
+.legal-fact h2 {
-  margin: 0.9rem 0 0.75rem;
+  margin: 0;
   color: var(--theme-text);
-  font-size: var(--text-xl);
+  font-size: var(--text-lg);
-  line-height: 1.08;
   font-weight: 400;
+  line-height: 1.15;
   letter-spacing: 0;
+  text-transform: none;
 }
 
-.impressum-card p {
+.legal-fact p {
   margin: 0;
   color: var(--theme-text-muted);
   font-size: var(--text-base);
-  line-height: 1.7;
+  line-height: 1.6;
 }
 
-.impressum-section {
+/* ----- Long-form sections ----------------------------------------------- */
+
+.legal-section {
   display: grid;
   grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
   gap: var(--gap-lg);
@@ -95,10 +109,10 @@
   border-top: 1px solid var(--theme-border);
 }
 
-.impressum-section-heading h2 {
+.legal-section-head h2 {
-  margin: 0.75rem 0 0;
+  margin: 0;
   color: var(--theme-text);
-  font-size: clamp(2rem, 4.2vw, 4.5rem);
+  font-size: clamp(1.85rem, 4vw, 3.6rem);
   line-height: 0.96;
   font-weight: 300;
   letter-spacing: 0;
@@ -106,37 +120,44 @@
   text-wrap: balance;
 }
 
-.impressum-section-copy p {
+.legal-section-body {
-  margin: 0 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  max-width: var(--text-measure);
+}
+
+.legal-section-body p {
+  margin: 0;
   color: var(--theme-text-muted);
   font-size: var(--text-base);
-  line-height: 1.75;
+  line-height: 1.7;
 }
 
-.impressum-note-box {
+.legal-list {
-  padding: clamp(1.1rem, 2.4vw, 1.8rem);
+  display: grid;
-  border-color: rgba(var(--theme-accent-rgb) / 0.24);
+  gap: 0.6rem;
-  background:
-    linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.11), transparent 60%),
-    var(--theme-surface-soft);
-}
-
-.impressum-note-box p {
   margin: 0;
-  color: var(--theme-text);
+  padding-left: 1.1rem;
+  color: var(--theme-text-muted);
   font-size: var(--text-base);
-  line-height: 1.65;
+  line-height: 1.6;
 }
 
-@media (max-width: 900px) {
+/* ----- Responsive -------------------------------------------------------- */
-  .impressum-grid,
+
-  .impressum-section {
+@media (max-width: 1024px) {
+  .legal-section {
     grid-template-columns: 1fr;
   }
 }
 
-@media (max-width: 700px) {
+@media (max-width: 760px) {
-  .impressum-hero {
+  .legal-hero {
-    padding-top: clamp(1.4rem, 5vw, 2rem);
+    padding-top: clamp(5.5rem, 18vw, 7rem);
+  }
+
+  .legal-fact-grid {
+    grid-template-columns: 1fr;
   }
 }

parfum-shop/src/pages/ImpressumPage.jsx

@@ -2,9 +2,70 @@ import SharedNavbar from "../components/SharedNavbar";
 import PageMeta from "../components/seo/PageMeta";
 import "./ImpressumPage.css";
 
+const FACTS = [
+  {
+    label: "Anbieter",
+    title: "Unternehmen",
+    body: (
+      <>
+        atmos GmbH
+        <br />
+        Musterstrasse 12
+        <br />
+        7000 Chur, Schweiz
+      </>
+    ),
+  },
+  {
+    label: "Kontakt",
+    title: "Erreichbarkeit",
+    body: (
+      <>
+        hello@atmos.ch
+        <br />
+        +41 00 000 00 00
+      </>
+    ),
+  },
+  {
+    label: "Vertretungsberechtigt",
+    title: "Geschäftsführung",
+    body: <>Amanda Nielsen, Ermin Zoronjic, Tobias Högger, Salih Hasicic</>,
+  },
+  {
+    label: "Handelsregister",
+    title: "Registereintrag",
+    body: (
+      <>
+        Handelsregisteramt: Kanton Graubünden
+        <br />
+        UID: CHE-000.000.000
+      </>
+    ),
+  },
+];
+
+const SECTIONS = [
+  {
+    label: "Inhaltliche Verantwortung",
+    title: "Verantwortlich für den Inhalt",
+    body: "Verantwortlich für diese Website und die publizierten Inhalte ist die atmos GmbH, Musterstrasse 12, 7000 Chur, Schweiz.",
+  },
+  {
+    label: "Haftung",
+    title: "Haftungsausschluss",
+    body: "Trotz sorgfältiger Kontrolle übernimmt atmos keine Gewähr für Aktualität, Richtigkeit oder Vollständigkeit der bereitgestellten Informationen. Haftungsansprüche werden im gesetzlich zulässigen Rahmen ausgeschlossen.",
+  },
+  {
+    label: "Urheberrecht",
+    title: "Urheber- und Markenrechte",
+    body: "Sämtliche Inhalte dieser Website sind urheberrechtlich geschützt. Jede Vervielfältigung oder Bearbeitung bedarf der vorherigen schriftlichen Zustimmung.",
+  },
+];
+
 function ImpressumPage() {
   return (
-    <div className="impressum-page">
+    <div className="impressum-page legal-page">
       <PageMeta
         title="Impressum"
         description="Rechtliche Angaben, Verantwortlichkeit und Erreichbarkeit von atmos."
@@ -13,148 +74,40 @@ function ImpressumPage() {
       <SharedNavbar variant="hero" />
 
       <main id="main-content" className="shell">
-        <section className="impressum-hero" data-reveal-group>
+        <section className="legal-hero" data-reveal-group>
-          <span className="impressum-kicker" data-reveal="fade">
+          <span className="legal-eyebrow" data-reveal="fade">
-            RECHTLICHE ANGABEN
+            Rechtliche Angaben
           </span>
           <h1 data-reveal="lines">IMPRESSUM</h1>
-          <p className="impressum-intro" data-reveal="fade">
+          <p className="legal-lead" data-reveal="fade">
-            Dieses Impressum enthält die rechtlichen Angaben zu atmos sowie
+            Rechtliche Angaben zu atmos sowie Informationen zur Verantwortlichkeit,
-            Informationen zur Verantwortlichkeit, Erreichbarkeit und zu den
+            Erreichbarkeit und zu den veröffentlichten Inhalten dieser Website.
-            veröffentlichten Inhalten dieser Website.
           </p>
         </section>
 
-        <section className="impressum-grid" data-reveal-group data-reveal-start="top 90%">
+        <section className="legal-fact-grid" data-reveal-group data-reveal-start="top 88%">
-          <article className="impressum-card" data-reveal="fade">
+          {FACTS.map((fact) => (
-            <span className="impressum-label">ANBIETER</span>
+            <article className="legal-fact" key={fact.label} data-reveal="fade">
-            <h2>Unternehmen</h2>
+              <span className="legal-eyebrow">{fact.label}</span>
-            <p>
+              <h2>{fact.title}</h2>
-              atmos GmbH
+              <p>{fact.body}</p>
-              <br />
+            </article>
-              Musterstrasse 12
+          ))}
-              <br />
-              7000 Chur
-              <br />
-              Schweiz
-            </p>
-          </article>
-
-          <article className="impressum-card" data-reveal="fade">
-            <span className="impressum-label">KONTAKT</span>
-            <h2>Erreichbarkeit</h2>
-            <p>
-              E-Mail: hello@atmos.ch
-              <br />
-              Telefon: +41 00 000 00 00
-            </p>
-          </article>
-
-          <article className="impressum-card" data-reveal="fade">
-            <span className="impressum-label">VERTRETUNGSBERECHTIGT</span>
-            <h2>Geschäftsführung</h2>
-            <p>
-              Amanda Nielsen, Ermin Zoronjic, Tobias Högger, Salih Hasicic
-              <br />
-              Geschäftsführer*innen
-            </p>
-          </article>
-
-          <article className="impressum-card" data-reveal="fade">
-            <span className="impressum-label">HANDELSREGISTER</span>
-            <h2>Registereintrag</h2>
-            <p>
-              Handelsregisteramt: Kanton Graubünden
-              <br />
-              Unternehmens-Identifikationsnummer: CHE-000.000.000
-            </p>
-          </article>
         </section>
 
-        <section className="impressum-section" data-reveal-group>
+        {SECTIONS.map((section) => (
-          <div className="impressum-section-heading">
+          <section className="legal-section" key={section.label} data-reveal-group>
-            <span className="impressum-label" data-reveal="fade">
+            <header className="legal-section-head">
-              INHALTLICHE VERANTWORTUNG
+              <span className="legal-eyebrow" data-reveal="fade">
-            </span>
+                {section.label}
-            <h2 data-reveal="lines">VERANTWORTLICH FÜR DEN INHALT</h2>
+              </span>
-          </div>
+              <h2 data-reveal="lines">{section.title}</h2>
-
+            </header>
-          <div className="impressum-section-copy" data-reveal="fade">
+            <div className="legal-section-body" data-reveal="fade">
-            <p>
+              <p>{section.body}</p>
-              Verantwortlich für diese Website und die publizierten Inhalte:
+            </div>
-            </p>
+          </section>
-            <p>
+        ))}
-              atmos GmbH
-              <br />
-              Musterstrasse 12
-              <br />
-              7000 Chur
-              <br />
-              Schweiz
-            </p>
-          </div>
-        </section>
-
-        <section className="impressum-section" data-reveal-group>
-          <div className="impressum-section-heading">
-            <span className="impressum-label" data-reveal="fade">
-              HAFTUNG
-            </span>
-            <h2 data-reveal="lines">HAFTUNGSAUSSCHLUSS</h2>
-          </div>
-
-          <div className="impressum-section-copy" data-reveal="fade">
-            <p>
-              Trotz sorgfältiger inhaltlicher Kontrolle übernimmt atmos keine
-              Gewähr für die Aktualität, Richtigkeit, Vollständigkeit oder
-              Qualität der bereitgestellten Informationen. Haftungsansprüche gegen
-              atmos wegen Schäden materieller oder immaterieller Art, welche aus
-              dem Zugriff oder der Nutzung beziehungsweise Nichtnutzung der
-              veröffentlichten Informationen, durch Missbrauch der Verbindung oder
-              durch technische Störungen entstanden sind, werden im gesetzlich
-              zulässigen Rahmen ausgeschlossen.
-            </p>
-          </div>
-        </section>
-
-        <section className="impressum-section" data-reveal-group>
-          <div className="impressum-section-heading">
-            <span className="impressum-label" data-reveal="fade">
-              URHEBERRECHT
-            </span>
-            <h2 data-reveal="lines">URHEBER- UND MARKENRECHTE</h2>
-          </div>
-
-          <div className="impressum-section-copy" data-reveal="fade">
-            <p>
-              Sämtliche Inhalte dieser Website, einschliesslich Texte, Bilder,
-              Gestaltungselemente, Logos und Marken, sind urheberrechtlich
-              geschützt und Eigentum von atmos oder der jeweils genannten
-              Rechteinhaber, sofern nicht anders angegeben. Jede Vervielfältigung,
-              Bearbeitung, Verbreitung oder sonstige Verwendung ausserhalb der
-              gesetzlichen Schranken bedarf der vorherigen schriftlichen Zustimmung.
-            </p>
-          </div>
-        </section>
-
-        <section className="impressum-section" data-reveal-group>
-          <div className="impressum-section-heading">
-            <span className="impressum-label" data-reveal="fade">
-              TRANSPARENZ
-            </span>
-            <h2 data-reveal="lines">KLARE ANGABEN UND ERREICHBARKEIT</h2>
-          </div>
-
-          <div className="impressum-note-box" data-reveal="fade">
-            <p>
-              atmos legt Wert auf eine klare, transparente und nachvollziehbare
-              Kommunikation. Dieses Impressum dient der eindeutigen
-              Anbieterkennzeichnung und stellt die wesentlichen Informationen zur
-              verantwortlichen Stelle, Kontaktaufnahme und rechtlichen Zuordnung
-              dieser Website bereit.
-            </p>
-          </div>
-        </section>
       </main>
     </div>
   );

parfum-shop/src/pages/SmallBatchPage.css

@@ -1,124 +1,153 @@
+/**
+ * SmallBatchPage (Early Access) — same visual rhythm as About / Support.
+ * All buttons go through the global .atmos-btn system; only structural,
+ * data-display styling lives here.
+ */
+
 .small-page {
   min-height: 100vh;
   padding: 0 0 var(--section-y-sm);
   color: var(--theme-text);
-  background:
+  background: var(--theme-bg);
-    radial-gradient(circle at 84% 8%, rgba(var(--theme-accent-rgb) / 0.13), transparent 28rem),
-    linear-gradient(180deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 88%, #000 12%));
 }
 
-.small-hero {
+.small-eyebrow {
-  max-width: 64rem;
-  padding: clamp(2rem, 5vw, 5rem) 0 var(--section-y-sm);
-  border-bottom: 1px solid var(--theme-border);
-}
-
-.small-kicker,
-.small-requirement span,
-.release-card span {
   display: block;
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--gap-2xs);
   color: var(--theme-text-muted);
   font-size: var(--text-xs);
   letter-spacing: 0.22em;
   text-transform: uppercase;
 }
 
-.small-hero h1,
+/* ----- Hero -------------------------------------------------------------- */
-.small-panel h2 {
+
-  margin: 0 0 clamp(0.85rem, 2vw, 1.2rem);
+.small-hero {
-  color: var(--theme-text);
+  display: grid;
-  font-weight: 300;
+  gap: clamp(0.75rem, 1.6vw, 1.25rem);
-  letter-spacing: 0;
+  max-width: 64rem;
-  text-transform: uppercase;
+  padding: clamp(5rem, 9vw, 8rem) 0 var(--section-y-sm);
 }
 
 .small-hero h1 {
+  margin: 0;
+  color: var(--theme-text);
   font-size: clamp(3rem, 8.6vw, 9rem);
   line-height: 0.88;
+  font-weight: 300;
+  letter-spacing: 0;
+  text-transform: uppercase;
   text-wrap: balance;
 }
 
-.small-panel h2 {
+.small-lead {
-  font-size: clamp(2.2rem, 5vw, 5.4rem);
-  line-height: 0.94;
-}
-
-.small-hero p,
-.small-panel p,
-.release-card p {
   max-width: var(--text-measure);
-  margin: 0;
+  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
   color: var(--theme-text-muted);
-  font-size: var(--text-base);
+  font-size: var(--text-lg);
-  line-height: 1.65;
+  line-height: 1.62;
 }
 
-.small-panel,
+/* ----- Panels ------------------------------------------------------------ */
-.release-card,
+
-.small-error {
+.small-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  margin-top: var(--section-y-sm);
+  padding: clamp(1.25rem, 3vw, 2.2rem);
   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);
 }
 
-.small-panel {
+.small-panel h2 {
-  max-width: 68rem;
+  margin: 0;
-  margin-top: var(--section-y-sm);
+  color: var(--theme-text);
-  padding: clamp(1.25rem, 3vw, 2.2rem);
+  font-size: clamp(1.85rem, 4vw, 3.4rem);
+  line-height: 0.96;
+  font-weight: 300;
+  letter-spacing: 0;
+  text-transform: uppercase;
 }
 
-.small-panel button,
+.small-panel p {
-.release-card button {
+  max-width: var(--text-measure);
+  margin: 0;
+  color: var(--theme-text-muted);
+  font-size: var(--text-base);
+  line-height: 1.6;
+}
+
+.small-panel-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+}
+
+.small-panel-head > div {
+  min-width: 0;
+}
+
+.small-status-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 48px;
+  min-height: 32px;
-  margin-top: 1.2rem;
+  padding: 0 0.85rem;
-  padding: 0 1.1rem;
+  border: 1px solid var(--theme-border);
-  border: 1px solid #111;
+  background: transparent;
-  border-radius: var(--radius-lg);
+  color: var(--theme-text-muted);
-  background: #111;
+  font-size: var(--text-xs);
-  color: #fff;
+  letter-spacing: 0.18em;
-  cursor: pointer;
-  font-size: var(--text-sm);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out);
 }
 
-.small-panel button:hover,
+.small-status-pill.is-unlocked {
-.release-card button:hover,
+  border-color: var(--theme-accent);
-.small-panel button:focus-visible,
+  color: var(--theme-accent);
-.release-card button:focus-visible {
-  transform: translateY(-2px);
-  box-shadow: var(--theme-shadow-soft);
 }
 
+/* ----- Requirements grid ------------------------------------------------ */
+
 .small-requirements {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--gap-sm);
+  gap: var(--gap-xs);
-  margin-top: clamp(1.4rem, 3vw, 2.4rem);
+  margin-top: var(--gap-sm);
 }
 
 .small-requirement {
-  min-height: 7rem;
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: var(--gap-xs);
-  padding: clamp(1rem, 2vw, 1.4rem);
+  min-height: 7rem;
+  padding: clamp(0.95rem, 2vw, 1.25rem);
   border: 1px solid var(--theme-border);
   background: var(--theme-paper);
+  isolation: isolate;
 }
 
-.small-requirement span {
+.small-requirement::before {
-  margin-bottom: 0;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--theme-accent);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform var(--duration-med) var(--ease-out);
+}
+
+.small-requirement.is-met::before {
+  transform: scaleX(1);
 }
 
 .small-requirement strong {
@@ -128,18 +157,26 @@
   line-height: 1.3;
 }
 
-.small-requirement strong.met {
+.small-requirement.is-met strong {
   color: var(--theme-accent);
 }
 
-.small-error {
+/* ----- Status / error message ------------------------------------------ */
-  max-width: 68rem;
+
+.small-message {
+  max-width: 64rem;
   margin: var(--gap-sm) 0 0;
   padding: clamp(1rem, 2vw, 1.4rem);
-  border-color: rgba(var(--theme-accent-rgb) / 0.45);
+  border: 1px solid rgba(var(--theme-accent-rgb) / 0.45);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
+    var(--theme-surface-soft);
   color: var(--theme-text);
+  font-size: var(--text-sm);
 }
 
+/* ----- Releases --------------------------------------------------------- */
+
 .release-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -148,12 +185,15 @@
 }
 
 .release-card {
-  min-height: 280px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  gap: var(--gap-xs);
-  gap: var(--gap-sm);
+  min-height: 18rem;
-  padding: clamp(1.1rem, 2.4vw, 1.8rem);
+  padding: clamp(1.1rem, 2.4vw, 1.6rem);
+  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);
   transition:
     transform var(--duration-med) var(--ease-out),
     border-color var(--duration-med) var(--ease-out),
@@ -166,21 +206,30 @@
   box-shadow: var(--theme-shadow-soft);
 }
 
-.release-card span {
-  margin-bottom: 0;
-}
-
 .release-card h3 {
   margin: 0;
   color: var(--theme-text);
-  font-size: var(--text-xl);
+  font-size: var(--text-lg);
-  line-height: 1.08;
   font-weight: 400;
+  line-height: 1.15;
   letter-spacing: 0;
 }
 
+.release-card p {
+  flex: 1;
+  margin: 0;
+  color: var(--theme-text-muted);
+  font-size: var(--text-base);
+  line-height: 1.6;
+}
+
+/* ----- Responsive -------------------------------------------------------- */
+
 @media (max-width: 1180px) {
-  .small-requirements,
+  .small-requirements {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .release-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -188,7 +237,7 @@
 
 @media (max-width: 760px) {
   .small-hero {
-    padding-top: clamp(1.4rem, 5vw, 2rem);
+    padding-top: clamp(5.5rem, 18vw, 7rem);
   }
 
   .small-hero h1 {
@@ -199,9 +248,4 @@
   .release-grid {
     grid-template-columns: 1fr;
   }
-
-  .small-panel button,
-  .release-card button {
-    width: 100%;
-  }
 }

parfum-shop/src/pages/SmallBatchPage.jsx

@@ -7,9 +7,9 @@ import "./SmallBatchPage.css";
 
 function Requirement({ label, met, children }) {
   return (
-    <div className="small-requirement">
+    <div className={`small-requirement ${met ? "is-met" : ""}`}>
-      <span>{label}</span>
+      <span className="small-eyebrow">{label}</span>
-      <strong className={met ? "met" : ""}>{children || (met ? "met" : "open")}</strong>
+      <strong>{children || (met ? "Erfüllt" : "Offen")}</strong>
     </div>
   );
 }
@@ -70,57 +70,89 @@ function SmallBatchPage() {
 
       <main id="main-content" className="shell">
         <section className="small-hero" data-reveal-group>
-          <span className="small-kicker" data-reveal="fade">
+          <span className="small-eyebrow" data-reveal="fade">
-            SMALL BATCH / ARCHIVE / PROTOTYPE
+            Small Batch · Archive · Prototype
           </span>
-          <h1 data-reveal="fade">EARLY ACCESS</h1>
+          <h1 data-reveal="lines">EARLY ACCESS.</h1>
-          <p data-reveal="fade">
+          <p className="small-lead" data-reveal="fade">
-            Limited releases are reserved for customers with enough purchase
+            Limitierte Releases sind Kund:innen vorbehalten, die genug
-            history to understand the atmos material language.
+            Berührung mit der atmos Materialwelt hatten — kuratiert,
+            chargenbasiert, in kleiner Auflage.
           </p>
         </section>
 
         {!user ? (
           <section className="small-panel" data-reveal-group>
-            <span className="small-kicker" data-reveal="fade">
+            <span className="small-eyebrow" data-reveal="fade">
-              LOGIN REQUIRED
+              Login erforderlich
             </span>
-            <h2 data-reveal="fade">Sign in to check access.</h2>
+            <h2 data-reveal="fade">Melde dich an, um deinen Zugang zu prüfen.</h2>
-            <p data-reveal="fade">Small Batch access is calculated from your completed orders.</p>
+            <p data-reveal="fade">
-            <button type="button" onClick={openProfile}>
+              Small Batch Access wird aus deinen abgeschlossenen Bestellungen
-              Login / Register
+              berechnet.
-            </button>
+            </p>
+            <div className="atmos-btn-row" data-reveal="fade">
+              <button
+                type="button"
+                className="atmos-btn atmos-btn--primary"
+                onClick={openProfile}
+              >
+                Anmelden / Registrieren
+              </button>
+            </div>
           </section>
         ) : (
           <>
             <section className="small-panel" data-reveal-group>
-              <span className="small-kicker" data-reveal="fade">
+              <div className="small-panel-head">
-                ACCESS STATUS
+                <div>
-              </span>
+                  <span className="small-eyebrow" data-reveal="fade">
-              <h2 data-reveal="fade">{loyalty.unlocked ? "Unlocked" : "Locked"}</h2>
+                    Access Status
+                  </span>
+                  <h2 data-reveal="fade">
+                    {loyalty.unlocked ? "Freigeschaltet" : "Noch gesperrt"}
+                  </h2>
+                </div>
+                <span
+                  className={`small-status-pill ${loyalty.unlocked ? "is-unlocked" : ""}`}
+                  data-reveal="fade"
+                >
+                  {loyalty.unlocked ? "Unlocked" : "Locked"}
+                </span>
+              </div>
+
               <div className="small-requirements" data-reveal="fade">
                 <Requirement label="Discovery Set" met={loyalty.hasDiscoverySet} />
                 <Requirement label="Full Size" met={loyalty.hasFullSize} />
-                <Requirement label="Purchases" met={loyalty.purchases >= 3}>
+                <Requirement label="Bestellungen" met={loyalty.purchases >= 3}>
-                  {loyalty.purchases}/3 Purchases
+                  {loyalty.purchases}/3
                 </Requirement>
-                <Requirement label="Spend" met={loyalty.spent_cents > 50000}>
+                <Requirement label="Umsatz" met={loyalty.spent_cents > 50000}>
                   {formatChf(loyalty.spent_cents)} / CHF 500+
                 </Requirement>
               </div>
             </section>
 
-            {state.error && <p className="small-error">{state.error}</p>}
+            {state.error && <p className="small-message">{state.error}</p>}
-            {state.loading && <p className="small-error">Loading access...</p>}
+            {state.loading && <p className="small-message">Loading access…</p>}
 
-            {loyalty.unlocked && (
+            {loyalty.unlocked && state.releases.length > 0 && (
-              <section className="release-grid" data-reveal-group data-reveal-start="top 88%">
+              <section
+                className="release-grid"
+                data-reveal-group
+                data-reveal-start="top 88%"
+              >
                 {state.releases.map((release) => (
                   <article className="release-card" key={release.name} data-reveal="fade">
-                    <span>{release.type}</span>
+                    <span className="small-eyebrow">{release.type}</span>
                     <h3>{release.name}</h3>
                     <p>{release.note}</p>
-                    <button type="button">Request Allocation</button>
+                    <button
+                      type="button"
+                      className="atmos-btn atmos-btn--outline atmos-btn--block"
+                    >
+                      Allokation anfragen
+                    </button>
                   </article>
                 ))}
               </section>

parfum-shop/src/pages/SupportPage.css

@@ -1,30 +1,35 @@
+/**
+ * SupportPage — same visual rhythm as AboutPage:
+ *  - .shell container, eyebrow + light-weight headline
+ *  - hard-edge surface cards
+ *  - accent CTA banner reused at the bottom
+ *  - all CTAs use the global .atmos-btn system
+ */
+
 .support-page {
   min-height: 100vh;
   padding: 0 0 var(--section-y-sm);
   color: var(--theme-text);
-  background:
+  background: var(--theme-bg);
-    radial-gradient(circle at 86% 8%, rgba(var(--theme-accent-rgb) / 0.13), transparent 28rem),
-    linear-gradient(180deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 88%, #000 12%));
 }
 
-.support-kicker,
+.support-eyebrow {
-.support-label,
-.support-panel-label,
-.support-panel-meta span {
   display: block;
+  margin-bottom: var(--gap-2xs);
   color: var(--theme-text-muted);
   font-size: var(--text-xs);
   letter-spacing: 0.22em;
   text-transform: uppercase;
 }
 
+/* ----- Hero -------------------------------------------------------------- */
+
 .support-hero {
   display: grid;
-  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.72fr);
+  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.72fr);
   gap: var(--gap-lg);
   align-items: end;
-  padding: clamp(2rem, 5vw, 5rem) 0 var(--section-y-sm);
+  padding: clamp(5rem, 9vw, 8rem) 0 var(--section-y-sm);
-  border-bottom: 1px solid var(--theme-border);
 }
 
 .support-hero-copy {
@@ -32,10 +37,10 @@
 }
 
 .support-hero-copy h1 {
-  max-width: 10.8ch;
+  max-width: 12ch;
-  margin: clamp(0.85rem, 2vw, 1.2rem) 0 clamp(1rem, 2vw, 1.35rem);
+  margin: 0;
   color: var(--theme-text);
-  font-size: clamp(3rem, 7.4vw, 8.8rem);
+  font-size: clamp(2.8rem, 8vw, 8rem);
   line-height: 0.9;
   font-weight: 300;
   letter-spacing: 0;
@@ -43,108 +48,68 @@
   text-wrap: balance;
 }
 
-.support-intro {
+.support-lead {
   max-width: var(--text-measure);
-  margin: 0;
+  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
   color: var(--theme-text-muted);
   font-size: var(--text-lg);
-  line-height: 1.65;
-}
-
-.support-hero-panel {
-  padding: clamp(1.25rem, 3vw, 2rem);
-  border: 1px solid rgba(var(--theme-accent-rgb) / 0.2);
-  background:
-    linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.1), transparent 62%),
-    var(--theme-surface-soft);
-}
-
-.support-hero-panel p {
-  margin: 0.75rem 0 0;
-  color: var(--theme-text);
-  font-size: var(--text-base);
   line-height: 1.62;
 }
 
-.support-panel-meta {
+/* ----- Contact card ------------------------------------------------------ */
-  display: grid;
+
-  gap: var(--gap-sm);
+.support-contact-card {
-  margin-top: clamp(1.2rem, 2.6vw, 2rem);
+  display: flex;
-  padding-top: var(--gap-sm);
+  flex-direction: column;
-  border-top: 1px solid rgba(var(--theme-accent-rgb) / 0.2);
+  gap: var(--gap-xs);
+  padding: clamp(1.25rem, 3vw, 1.8rem);
+  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);
 }
 
-.support-panel-meta p {
+.support-mail-link {
-  margin: 0.45rem 0 0;
+  margin: 0;
   color: var(--theme-text);
+  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
+  font-weight: 400;
+  letter-spacing: 0;
+  text-decoration: none;
+  word-break: break-word;
+}
+
+.support-mail-link:hover {
+  color: var(--theme-accent);
+}
+
+.support-contact-card p {
+  margin: 0;
+  color: var(--theme-text-muted);
   font-size: var(--text-sm);
   line-height: 1.55;
 }
 
-.support-quick-grid,
+.support-contact-card .atmos-btn {
-.support-info-grid,
+  margin-top: var(--gap-xs);
-.support-faq-grid {
-  display: grid;
-  gap: var(--gap-sm);
 }
 
-.support-quick-grid {
+/* ----- Topic cards ------------------------------------------------------- */
+
+.support-topics {
+  display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--gap-sm);
   margin-top: var(--section-y-sm);
 }
 
-.support-section,
+.support-topic,
-.support-faq-section {
+.support-faq-item {
-  padding-top: var(--section-y-sm);
-}
-
-.support-section--split,
-.support-info-grid {
-  display: grid;
-  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
-  gap: var(--gap-lg);
-  align-items: start;
-}
-
-.support-info-grid {
-  margin-top: var(--section-y-sm);
-}
-
-.support-section-heading h2,
-.support-bottom-copy h2 {
-  margin: 0.75rem 0 0;
-  color: var(--theme-text);
-  font-size: clamp(2.15rem, 5.2vw, 6rem);
-  line-height: 0.94;
-  font-weight: 300;
-  letter-spacing: 0;
-  text-transform: uppercase;
-  text-wrap: balance;
-}
-
-.support-section-copy {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-sm);
+  gap: var(--gap-xs);
-}
+  min-height: 12rem;
-
+  padding: clamp(1.1rem, 2.4vw, 1.6rem);
-.support-section-copy p,
-.support-bottom-copy p,
-.support-quick-card p,
-.support-faq-card p,
-.support-info-box p,
-.support-list li {
-  margin: 0;
-  color: var(--theme-text-muted);
-  font-size: var(--text-base);
-  line-height: 1.7;
-}
-
-.support-quick-card,
-.support-faq-card,
-.support-info-box {
-  min-height: 100%;
-  padding: clamp(1.1rem, 2.4vw, 1.8rem);
   border: 1px solid var(--theme-border);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
@@ -155,82 +120,65 @@
     box-shadow var(--duration-med) var(--ease-out);
 }
 
-.support-quick-card:hover,
+.support-topic:hover,
-.support-faq-card:hover,
+.support-faq-item:hover {
-.support-info-box:hover {
   transform: translateY(-4px);
   border-color: rgba(var(--theme-accent-rgb) / 0.42);
   box-shadow: var(--theme-shadow-soft);
 }
 
-.support-quick-card h3,
+.support-topic h3,
-.support-faq-card h3,
+.support-faq-item h3 {
-.support-info-box h3 {
+  margin: 0;
-  margin: 0.9rem 0 0.75rem;
   color: var(--theme-text);
-  font-size: var(--text-xl);
+  font-size: var(--text-lg);
-  line-height: 1.08;
   font-weight: 400;
+  line-height: 1.15;
   letter-spacing: 0;
 }
 
-.support-info-box--dark {
+.support-topic p,
-  border-color: rgba(255, 255, 255, 0.16);
+.support-faq-item p {
-  background:
+  margin: 0;
-    radial-gradient(circle at 100% 0%, rgba(var(--theme-accent-rgb) / 0.18), transparent 18rem),
+  color: var(--theme-text-muted);
-    #171717;
+  font-size: var(--text-base);
+  line-height: 1.6;
 }
 
-.support-info-box--dark .support-label,
+/* ----- FAQ --------------------------------------------------------------- */
-.support-info-box--dark p {
-  color: rgba(255, 255, 255, 0.78);
-}
 
-.support-info-box--dark h3 {
+.support-faq {
-  color: #fff;
-}
-
-.support-list {
-  display: grid;
-  gap: 0.75rem;
-  margin: 1rem 0 0;
-  padding-left: 1.1rem;
-}
-
-.support-mail-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 48px;
-  margin-top: 1.15rem;
-  padding: 0 1.1rem;
-  border-radius: var(--radius-lg);
-  background: var(--theme-accent-fill);
-  color: var(--theme-accent-contrast);
-  font-size: var(--text-sm);
-  text-decoration: none;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out);
-}
-
-.support-mail-btn:hover,
-.support-mail-btn:focus-visible {
-  transform: translateY(-2px);
-  box-shadow: var(--theme-shadow-soft);
-}
-
-.support-faq-section {
   margin-top: var(--section-y-sm);
+  padding-top: var(--section-y-sm);
   border-top: 1px solid var(--theme-border);
 }
 
-.support-faq-grid {
+.support-section-head {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  display: grid;
-  margin-top: clamp(1.6rem, 4vw, 3rem);
+  gap: var(--gap-2xs);
+  margin-bottom: clamp(1.6rem, 4vw, 3rem);
 }
 
-.support-bottom-cta {
+.support-section-head h2 {
+  margin: 0;
+  color: var(--theme-text);
+  font-size: clamp(2.2rem, 5.4vw, 6rem);
+  line-height: 0.94;
+  font-weight: 300;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.support-faq-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--gap-sm);
+}
+
+/* ----- CTA --------------------------------------------------------------- */
+
+.support-cta {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--gap-lg);
@@ -239,72 +187,35 @@
   padding: clamp(1.5rem, 4vw, 3.5rem);
   overflow: hidden;
   background:
-    radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.22), transparent 20rem),
+    radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.24), transparent 18rem),
-    var(--theme-accent-fill);
+    linear-gradient(135deg, var(--theme-accent-fill), var(--theme-accent-fill-strong));
 }
 
-.support-bottom-copy .support-label,
+.support-cta .support-eyebrow,
-.support-bottom-copy h2,
+.support-cta h2 {
-.support-bottom-copy p {
   color: var(--theme-accent-contrast);
 }
 
-.support-bottom-copy p {
+.support-cta-copy h2 {
-  max-width: 48rem;
+  max-width: 22ch;
-  margin-top: 1rem;
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 5rem);
+  line-height: 0.96;
+  font-weight: 300;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
 }
 
-.support-bottom-actions {
+/* ----- Responsive -------------------------------------------------------- */
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap-xs);
-  justify-content: flex-end;
-}
-
-.support-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 48px;
-  padding: 0 1.1rem;
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  color: inherit;
-  font-size: var(--text-sm);
-  text-decoration: none;
-  transition:
-    transform var(--duration-med) var(--ease-out),
-    box-shadow var(--duration-med) var(--ease-out),
-    background-color var(--duration-med) var(--ease-out);
-}
-
-.support-btn:hover,
-.support-btn:focus-visible {
-  transform: translateY(-2px);
-  box-shadow: var(--theme-shadow-soft);
-}
-
-.support-btn--primary {
-  background: #fff;
-  color: var(--theme-accent-fill-strong);
-}
-
-.support-btn--secondary {
-  border-color: rgba(255, 255, 255, 0.22);
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
-  backdrop-filter: blur(8px);
-}
 
 @media (max-width: 1180px) {
   .support-hero,
-  .support-section--split,
+  .support-cta {
-  .support-info-grid,
-  .support-bottom-cta {
     grid-template-columns: 1fr;
   }
 
-  .support-quick-grid,
+  .support-topics,
   .support-faq-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -312,24 +223,15 @@
 
 @media (max-width: 760px) {
   .support-hero {
-    padding-top: clamp(1.4rem, 5vw, 2rem);
+    padding-top: clamp(5.5rem, 18vw, 7rem);
   }
 
   .support-hero-copy h1 {
     font-size: clamp(2.55rem, 13vw, 4.4rem);
   }
 
-  .support-quick-grid,
+  .support-topics,
   .support-faq-grid {
     grid-template-columns: 1fr;
   }
-
-  .support-bottom-actions {
-    display: grid;
-    justify-content: stretch;
-  }
-
-  .support-btn {
-    width: 100%;
-  }
 }

parfum-shop/src/pages/SupportPage.jsx

@@ -3,6 +3,43 @@ import SharedNavbar from "../components/SharedNavbar";
 import PageMeta from "../components/seo/PageMeta";
 import "./SupportPage.css";
 
+const TOPICS = [
+  {
+    label: "Bestellung",
+    title: "Status, Anpassung, Ablauf",
+    text: "Fragen zu einer laufenden Bestellung beantworten wir schnell und direkt.",
+  },
+  {
+    label: "Versand",
+    title: "Lieferung & Zustellung",
+    text: "Versanddauer, Zustellung, Bestätigung oder mögliche Verzögerungen.",
+  },
+  {
+    label: "Beratung",
+    title: "Duft, Sample, Discovery",
+    text: "Unterstützung bei der Auswahl oder beim Einordnen eines Duftes.",
+  },
+];
+
+const FAQ = [
+  {
+    q: "Wie lange dauert der Versand?",
+    a: "Bestellungen werden in der Regel innerhalb von 1–2 Werktagen bearbeitet und zugestellt.",
+  },
+  {
+    q: "Kann ich zuerst testen?",
+    a: "Ja — über das Discovery Set oder ein einzelnes Sample. So erlebst du den Duft auf der Haut.",
+  },
+  {
+    q: "Welcher Duft passt zu mir?",
+    a: "Schreib uns kurz, welche Materialien oder Stimmungen dich ansprechen. Wir helfen bei der Einordnung.",
+  },
+  {
+    q: "Problem mit der Bestellung?",
+    a: "Schick uns die Bestellnummer und eine kurze Beschreibung. Wir prüfen den Fall und melden uns zeitnah.",
+  },
+];
+
 function SupportPage() {
   return (
     <div className="support-page">
@@ -16,192 +53,79 @@ function SupportPage() {
       <main id="main-content" className="shell">
         <section className="support-hero" data-reveal-group>
           <div className="support-hero-copy">
-            <span className="support-kicker" data-reveal="fade">
+            <span className="support-eyebrow" data-reveal="fade">
-              SUPPORT
+              Support
             </span>
             <h1 data-reveal="lines">
-              WIR HELFEN
-              <br />
               KLAR, DIREKT
               <br />
-              UND OHNE
+              UND PERSÖNLICH.
-              <br />
-              UMWEGE
             </h1>
-            <p className="support-intro" data-reveal="fade">
+            <p className="support-lead" data-reveal="fade">
-              Wenn du Fragen zu Bestellung, Versand, Discovery Set, Produkten oder
+              Fragen zu Bestellung, Versand, Discovery Set oder einem Duft?
-              deiner Auswahl hast, ist das Support-Team von atmos für dich da.
+              Unser Team antwortet sorgfältig — meist innerhalb von 1–2
-              Präzise, persönlich und mit dem Anspruch, jedes Anliegen sorgfältig
-              zu bearbeiten.
-            </p>
-          </div>
-
-          <div className="support-hero-panel" data-reveal="fade">
-            <span className="support-panel-label">KONTAKT</span>
-            <p>
-              Für Anliegen rund um Bestellung, Produkte, Versand und allgemeine
-              Fragen erreichst du uns direkt per E-Mail.
-            </p>
-
-            <div className="support-panel-meta">
-              <div>
-                <span>E-MAIL</span>
-                <p>support@atmos.ch</p>
-              </div>
-              <div>
-                <span>ANTWORTZEIT</span>
-                <p>In der Regel innerhalb von 1–2 Werktagen</p>
-              </div>
-              <div>
-                <span>SERVICE</span>
-                <p>Persönlich, präzise und sorgfältig</p>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className="support-quick-grid" data-reveal-group data-reveal-start="top 90%">
-          <article className="support-quick-card" data-reveal="fade">
-            <span className="support-label">BESTELLUNG</span>
-            <h3>Fragen zu einer laufenden Bestellung</h3>
-            <p>
-              Bei Fragen zu Bestellstatus, Anpassungen oder Unklarheiten zum Ablauf
-              hilft dir unser Support schnell und direkt weiter.
-            </p>
-          </article>
-
-          <article className="support-quick-card" data-reveal="fade">
-            <span className="support-label">VERSAND</span>
-            <h3>Lieferung und Zustellung</h3>
-            <p>
-              Wir unterstützen bei Fragen zu Versanddauer, Zustellung,
-              Lieferbestätigung oder allfälligen Verzögerungen.
-            </p>
-          </article>
-
-          <article className="support-quick-card" data-reveal="fade">
-            <span className="support-label">PRODUKTE</span>
-            <h3>Beratung zu Duft, Sample oder Discovery Set</h3>
-            <p>
-              Wenn du Unterstützung bei der Auswahl brauchst oder einen Duft besser
-              einordnen möchtest, helfen wir dir gerne weiter.
-            </p>
-          </article>
-        </section>
-
-        <section className="support-section support-section--split" data-reveal-group>
-          <div className="support-section-heading">
-            <span className="support-label" data-reveal="fade">
-              SO ERREICHST DU UNS
-            </span>
-            <h2 data-reveal="lines">EIN GUTER SUPPORT BEGINNT MIT EINER KLAREN ANFRAGE.</h2>
-          </div>
-
-          <div className="support-section-copy" data-reveal="fade">
-            <p>
-              Damit wir dein Anliegen möglichst schnell bearbeiten können, hilft es,
-              wenn du uns in deiner Nachricht die wichtigsten Informationen direkt
-              mitgibst. Dazu gehören je nach Fall deine Bestellnummer, der betroffene
-              Duft oder Artikel sowie eine kurze Beschreibung deines Anliegens.
-            </p>
-
-            <p>
-              Bei Fragen zur Auswahl genügt oft schon ein Hinweis darauf, welche
-              Düfte dich bisher angesprochen haben oder welche Richtung du suchst.
-              So können wir gezielter und hilfreicher antworten.
-            </p>
-          </div>
-        </section>
-
-        <section className="support-info-grid" data-reveal-group>
-          <div className="support-info-box" data-reveal="fade">
-            <span className="support-label">AM BESTEN MITGEBEN</span>
-            <ul className="support-list">
-              <li>Bestellnummer, falls bereits bestellt wurde</li>
-              <li>Produkt- oder Duftname</li>
-              <li>Kurze Beschreibung des Anliegens</li>
-              <li>Bei Bedarf Fotos oder relevante Details</li>
-            </ul>
-          </div>
-
-          <div className="support-info-box support-info-box--dark" data-reveal="fade">
-            <span className="support-label">KONTAKT</span>
-            <h3>support@atmos.ch</h3>
-            <p>
-              Unser Support beantwortet Anfragen in der Regel innerhalb von 1–2
               Werktagen.
             </p>
-            <a href="mailto:support@atmos.ch" className="support-mail-btn">
-              Support kontaktieren
-            </a>
           </div>
+
+          <aside className="support-contact-card" data-reveal="fade">
+            <span className="support-eyebrow">Kontakt</span>
+            <a className="support-mail-link" href="mailto:support@atmos.ch">
+              support@atmos.ch
+            </a>
+            <p>Antwortzeit 1–2 Werktage · persönlich, präzise.</p>
+            <a
+              href="mailto:support@atmos.ch"
+              className="atmos-btn atmos-btn--primary atmos-btn--block"
+            >
+              E-Mail schreiben
+            </a>
+          </aside>
         </section>
 
-        <section className="support-faq-section" data-reveal-group>
+        <section className="support-topics" data-reveal-group data-reveal-start="top 88%">
-          <div className="support-section-heading">
+          {TOPICS.map((topic) => (
-            <span className="support-label" data-reveal="fade">
+            <article className="support-topic" key={topic.label} data-reveal="fade">
-              HÄUFIGE FRAGEN
+              <span className="support-eyebrow">{topic.label}</span>
+              <h3>{topic.title}</h3>
+              <p>{topic.text}</p>
+            </article>
+          ))}
+        </section>
+
+        <section className="support-faq" data-reveal-group>
+          <header className="support-section-head">
+            <span className="support-eyebrow" data-reveal="fade">
+              Häufige Fragen
             </span>
             <h2 data-reveal="lines">DIE WICHTIGSTEN THEMEN AUF EINEN BLICK.</h2>
-          </div>
+          </header>
 
           <div className="support-faq-grid">
-            <article className="support-faq-card" data-reveal="fade">
+            {FAQ.map((item) => (
-              <h3>Wie lange dauert der Versand?</h3>
+              <article className="support-faq-item" key={item.q} data-reveal="fade">
-              <p>
+                <h3>{item.q}</h3>
-                Bestellungen werden in der Regel innerhalb von 1–2 Werktagen
+                <p>{item.a}</p>
-                bearbeitet. Die Zustellung erfolgt üblicherweise wenige Werktage
+              </article>
-                danach.
+            ))}
-              </p>
-            </article>
-
-            <article className="support-faq-card" data-reveal="fade">
-              <h3>Kann ich zuerst testen?</h3>
-              <p>
-                Ja. Dafür ist das Discovery Set oder ein einzelnes Sample gedacht.
-                So kannst du einen Duft erst auf der Haut erleben, bevor du dich
-                für eine Full Size entscheidest.
-              </p>
-            </article>
-
-            <article className="support-faq-card" data-reveal="fade">
-              <h3>Ich bin unsicher, welcher Duft zu mir passt.</h3>
-              <p>
-                Schreib uns kurz, welche Duftcharaktere, Materialien oder Stimmungen
-                dich ansprechen. Wir helfen dir gerne bei der Einordnung.
-              </p>
-            </article>
-
-            <article className="support-faq-card" data-reveal="fade">
-              <h3>Was tun bei einem Problem mit der Bestellung?</h3>
-              <p>
-                Kontaktiere uns direkt mit deiner Bestellnummer und einer kurzen
-                Beschreibung des Anliegens. Wir prüfen den Fall sorgfältig und
-                melden uns so schnell wie möglich zurück.
-              </p>
-            </article>
           </div>
         </section>
 
-        <section className="support-bottom-cta" data-reveal-group>
+        <section className="support-cta" data-reveal-group data-on-accent>
-          <div className="support-bottom-copy">
+          <div className="support-cta-copy">
-            <span className="support-label" data-reveal="fade">
+            <span className="support-eyebrow" data-reveal="fade">
-              atmos SUPPORT
+              atmos Support
             </span>
             <h2 data-reveal="lines">
-              NICHT AUTOMATISIERT AUF DISTANZ. SONDERN PERSÖNLICH UND PRÄZISE.
+              PERSÖNLICH STATT AUTOMATISIERT.
             </h2>
-            <p data-reveal="fade">
-              Wir möchten, dass sich auch der Service so anfühlt wie die Marke
-              selbst: klar, hochwertig und sorgfältig.
-            </p>
           </div>
 
-          <div className="support-bottom-actions" data-reveal="fade">
+          <div className="atmos-btn-row atmos-btn-row--responsive" data-reveal="fade">
-            <a href="mailto:support@atmos.ch" className="support-btn support-btn--primary">
+            <a href="mailto:support@atmos.ch" className="atmos-btn atmos-btn--primary">
               E-Mail senden
             </a>
-            <Link to="/" className="support-btn support-btn--secondary">
+            <Link to="/" className="atmos-btn atmos-btn--secondary">
               Zur Startseite
             </Link>
           </div>

parfum-shop/src/style/buttons.css

@@ -0,0 +1,316 @@
+/**
+ * Global Button System (atmos-btn)
+ * ----------------------------------------------------------------------------
+ * Single source of truth for every button & button-styled link in the app.
+ * Mirrors the visual language used by Landing Hero and Product Detail
+ * (hard edges, surface lift, accent stripe on hover).
+ *
+ * Usage:
+ *   <button class="atmos-btn atmos-btn--primary">…</button>
+ *   <a class="atmos-btn atmos-btn--secondary">…</a>
+ *
+ * Variants:
+ *   --primary    accent fill, contrast text   (key CTA, works on any bg)
+ *   --invert     paper fill, accent-strong    (CTA inside accent banners)
+ *   --secondary  surface w/ blur, themed text (secondary CTA on dark/photo)
+ *   --outline    transparent + strong border  (utility CTA, theme-aware)
+ *   --ghost      transparent, subtle hover    (tertiary, link-style)
+ *   --solid      neutral text-color fill      (form submit / drawer primary)
+ *   --danger     destructive, theme-aware     (remove / cancel actions)
+ *
+ * Sizes:
+ *   default      48px min-height
+ *   --sm         40px min-height
+ *   --lg         56px min-height
+ *
+ * Modifiers:
+ *   --block      width: 100%
+ *   --icon       compact square (no text)
+ *
+ * GSAP-driven micro-interactions are bound globally by
+ * useButtonInteractions() (see src/hooks/useButtonInteractions.js).
+ * The CSS here keeps a graceful no-JS fallback (transitions only).
+ */
+
+.atmos-btn {
+  --btn-bg: transparent;
+  --btn-bg-hover: transparent;
+  --btn-fg: var(--theme-text);
+  --btn-fg-hover: var(--theme-text);
+  --btn-border: transparent;
+  --btn-border-hover: transparent;
+  --btn-stripe: var(--theme-accent);
+  --btn-shadow-hover: var(--theme-shadow-soft);
+  --btn-min-height: 48px;
+  --btn-px: clamp(1rem, 2vw, 1.35rem);
+  --btn-font: var(--text-sm);
+
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+  min-height: var(--btn-min-height);
+  padding: 0 var(--btn-px);
+  border: 1px solid var(--btn-border);
+  border-radius: var(--radius-lg);
+  background: var(--btn-bg);
+  color: var(--btn-fg);
+  font: inherit;
+  font-size: var(--btn-font);
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform var(--duration-med) var(--ease-out),
+    background-color var(--duration-med) var(--ease-out),
+    border-color var(--duration-med) var(--ease-out),
+    color var(--duration-med) var(--ease-out),
+    box-shadow var(--duration-med) var(--ease-out),
+    opacity var(--duration-med) var(--ease-out);
+}
+
+/* Top accent stripe — same idiom as .size-card on the product page. */
+.atmos-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--btn-stripe);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform var(--duration-med) var(--ease-out);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.atmos-btn > * {
+  position: relative;
+  z-index: 2;
+}
+
+.atmos-btn:hover,
+.atmos-btn:focus-visible {
+  background: var(--btn-bg-hover);
+  border-color: var(--btn-border-hover);
+  color: var(--btn-fg-hover);
+  box-shadow: var(--btn-shadow-hover);
+  transform: translateY(-2px);
+}
+
+.atmos-btn:hover::before,
+.atmos-btn:focus-visible::before {
+  transform: scaleX(1);
+}
+
+.atmos-btn:active {
+  transform: translateY(0) scale(0.985);
+  transition-duration: var(--duration-fast);
+}
+
+.atmos-btn:focus-visible {
+  outline: 2px solid var(--theme-focus-ring);
+  outline-offset: 3px;
+}
+
+.atmos-btn:disabled,
+.atmos-btn[aria-disabled="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+  transform: none;
+  box-shadow: none;
+}
+
+.atmos-btn:disabled::before,
+.atmos-btn[aria-disabled="true"]::before {
+  transform: scaleX(0);
+}
+
+/* ----- Variants ---------------------------------------------------------- */
+
+.atmos-btn--primary {
+  --btn-bg: var(--theme-accent-fill);
+  --btn-bg-hover: var(--theme-accent-fill-strong);
+  --btn-fg: var(--theme-accent-contrast);
+  --btn-fg-hover: var(--theme-accent-contrast);
+  --btn-border: var(--theme-accent-fill);
+  --btn-border-hover: var(--theme-accent-fill-strong);
+  --btn-stripe: rgba(255, 255, 255, 0.85);
+}
+
+.atmos-btn--invert {
+  --btn-bg: #fff;
+  --btn-bg-hover: #fff;
+  --btn-fg: var(--theme-accent-fill-strong);
+  --btn-fg-hover: var(--theme-accent-fill-strong);
+  --btn-border: #fff;
+  --btn-border-hover: #fff;
+  --btn-stripe: var(--theme-accent-fill-strong);
+  --btn-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.22);
+}
+
+.atmos-btn--secondary {
+  --btn-bg: color-mix(in srgb, var(--theme-surface) 72%, transparent);
+  --btn-bg-hover: color-mix(in srgb, var(--theme-surface) 86%, transparent);
+  --btn-fg: var(--theme-text);
+  --btn-fg-hover: var(--theme-text);
+  --btn-border: var(--theme-border-strong);
+  --btn-border-hover: rgba(var(--theme-accent-rgb) / 0.55);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.atmos-btn--outline {
+  --btn-bg: transparent;
+  --btn-bg-hover: rgba(var(--theme-accent-rgb) / 0.06);
+  --btn-fg: var(--theme-text);
+  --btn-fg-hover: var(--theme-text);
+  --btn-border: var(--theme-border);
+  --btn-border-hover: var(--theme-accent);
+}
+
+.atmos-btn--ghost {
+  --btn-bg: transparent;
+  --btn-bg-hover: rgba(var(--theme-accent-rgb) / 0.08);
+  --btn-fg: var(--theme-text);
+  --btn-fg-hover: var(--theme-text);
+  --btn-border: transparent;
+  --btn-border-hover: transparent;
+  --btn-shadow-hover: none;
+}
+
+.atmos-btn--solid {
+  --btn-bg: var(--theme-text);
+  --btn-bg-hover: var(--theme-text);
+  --btn-fg: var(--theme-bg);
+  --btn-fg-hover: var(--theme-bg);
+  --btn-border: var(--theme-text);
+  --btn-border-hover: var(--theme-text);
+  --btn-stripe: var(--theme-accent);
+}
+
+.atmos-btn--danger {
+  --btn-bg: transparent;
+  --btn-bg-hover: rgba(var(--theme-accent-rgb) / 0.1);
+  --btn-fg: var(--theme-text);
+  --btn-fg-hover: var(--theme-text);
+  --btn-border: var(--theme-border);
+  --btn-border-hover: var(--theme-accent);
+  --btn-stripe: var(--theme-accent);
+  --btn-shadow-hover: none;
+}
+
+/* On any accent-filled banner, primary/secondary need different defaults so
+   they remain readable. Apply by adding `data-on-accent` to a wrapper. */
+[data-on-accent] .atmos-btn--primary,
+.atmos-btn--primary[data-on-accent] {
+  --btn-bg: #fff;
+  --btn-bg-hover: #fff;
+  --btn-fg: var(--theme-accent-fill-strong);
+  --btn-fg-hover: var(--theme-accent-fill-strong);
+  --btn-border: #fff;
+  --btn-border-hover: #fff;
+  --btn-stripe: var(--theme-accent-fill-strong);
+}
+
+[data-on-accent] .atmos-btn--secondary,
+.atmos-btn--secondary[data-on-accent] {
+  --btn-bg: rgba(255, 255, 255, 0.14);
+  --btn-bg-hover: rgba(255, 255, 255, 0.22);
+  --btn-fg: #fff;
+  --btn-fg-hover: #fff;
+  --btn-border: rgba(255, 255, 255, 0.32);
+  --btn-border-hover: #fff;
+  --btn-stripe: #fff;
+}
+
+[data-on-accent] .atmos-btn--ghost,
+.atmos-btn--ghost[data-on-accent] {
+  --btn-fg: rgba(255, 255, 255, 0.86);
+  --btn-fg-hover: #fff;
+  --btn-bg-hover: rgba(255, 255, 255, 0.12);
+}
+
+/* ----- Sizes ------------------------------------------------------------- */
+
+.atmos-btn--sm {
+  --btn-min-height: 40px;
+  --btn-px: clamp(0.7rem, 1.4vw, 0.95rem);
+  --btn-font: var(--text-xs);
+}
+
+.atmos-btn--lg {
+  --btn-min-height: 56px;
+  --btn-px: clamp(1.2rem, 2.6vw, 1.7rem);
+  --btn-font: var(--text-base);
+}
+
+/* ----- Modifiers --------------------------------------------------------- */
+
+.atmos-btn--block {
+  width: 100%;
+}
+
+.atmos-btn--icon {
+  --btn-px: 0;
+  width: var(--btn-min-height);
+  min-width: var(--btn-min-height);
+  padding: 0;
+  gap: 0;
+}
+
+.atmos-btn--uppercase {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+/* Group helper — consistent spacing wherever buttons cluster. */
+.atmos-btn-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.atmos-btn-row--end {
+  justify-content: flex-end;
+}
+
+.atmos-btn-row--stretch {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: var(--gap-xs);
+}
+
+@media (max-width: 600px) {
+  .atmos-btn-row--responsive {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .atmos-btn-row--responsive > .atmos-btn {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .atmos-btn,
+  .atmos-btn::before {
+    transition: none;
+  }
+
+  .atmos-btn:hover,
+  .atmos-btn:focus-visible {
+    transform: none;
+  }
+}