diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ac736f8..bf7a108 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -89,6 +89,28 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
       className={`${cormorant.variable} ${inter.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col bg-background text-ink">
+        {/* Rettungsnetz fuer den Fall, dass kein JavaScript laeuft.
+
+            Hero, ScrollReveal und ProductCard starten mit opacity 0 und werden
+            erst per motion/react eingeblendet. Weil diese Startwerte schon im
+            server-gerenderten HTML als inline-style stehen, blieb ohne
+            JavaScript alles unterhalb des Hero-Bildes dauerhaft unsichtbar —
+            kein Teilausfall, sondern der komplette Seiteninhalt. Auf
+            wabenhain.com waren das 38 Elemente.
+
+            !important ist hier notwendig und nicht nachlaessig: es gibt keine
+            andere Moeglichkeit, einen inline-style zu ueberschreiben. Die
+            Regel zielt ausschliesslich auf [data-reveal] — Ein- und
+            Ausblendungen in AnimatePresence (Warenkorb-Schublade, Menue,
+            Cookie-Banner) tragen das Attribut nicht und bleiben verborgen.
+
+            Deckt den Fall "JavaScript deaktiviert" ab. Laedt das Bundle
+            dagegen und schlaegt erst spaeter fehl, greift noscript nicht —
+            dafuer waere ein Zeitgeber noetig, der die Animation im Normalfall
+            stoeren wuerde. */}
+        <noscript>
+          <style>{`[data-reveal]{opacity:1!important;transform:none!important}`}</style>
+        </noscript>
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessJsonLd).replace(/</g, "\\u003c") }}
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 459a223..6ba167e 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -119,18 +119,18 @@ export function Hero({
             variants={itemContainerVariants}
           >
             <motion.p
-              variants={itemVariants}
+              data-reveal="" variants={itemVariants}
               className="tracking-wide-caps text-xs text-honey-light mb-4"
             >
               {location}
             </motion.p>
-            <motion.h1 variants={itemVariants} className="text-4xl md:text-6xl leading-tight">
+            <motion.h1 data-reveal="" variants={itemVariants} className="text-4xl md:text-6xl leading-tight">
               {t.footer.tagline}
             </motion.h1>
-            <motion.p variants={itemVariants} className="mt-6 text-cream/85 max-w-md leading-relaxed">
+            <motion.p data-reveal="" variants={itemVariants} className="mt-6 text-cream/85 max-w-md leading-relaxed">
               {intro}
             </motion.p>
-            <motion.div variants={itemVariants} className="mt-10 flex flex-wrap gap-4">
+            <motion.div data-reveal="" variants={itemVariants} className="mt-10 flex flex-wrap gap-4">
               <LinkButton href="/shop">{t.home.hero.ctaPrimary}</LinkButton>
               <LinkButton
                 href="/imkerei"
@@ -140,7 +140,7 @@ export function Hero({
                 {t.home.hero.ctaSecondary}
               </LinkButton>
             </motion.div>
-            <motion.p variants={itemVariants} className="mt-8 text-xs text-cream/60 tracking-wide">
+            <motion.p data-reveal="" variants={itemVariants} className="mt-8 text-xs text-cream/60 tracking-wide">
               {footnote}
             </motion.p>
           </motion.div>
diff --git a/src/components/product-card.tsx b/src/components/product-card.tsx
index afe539b..581d0a8 100644
--- a/src/components/product-card.tsx
+++ b/src/components/product-card.tsx
@@ -178,6 +178,8 @@ export function ProductCard({
 
   return (
     <motion.article
+      // Siehe scroll-reveal.tsx: Gegenstueck zum noscript-Block im Root-Layout.
+      data-reveal=""
       initial={{ opacity: 0, y: 16 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true, margin: "-60px" }}
diff --git a/src/components/scroll-reveal.tsx b/src/components/scroll-reveal.tsx
index 4fc83af..7f291bd 100644
--- a/src/components/scroll-reveal.tsx
+++ b/src/components/scroll-reveal.tsx
@@ -23,6 +23,12 @@ export function ScrollReveal({
 
   return (
     <motion.div
+      // Markiert dieses Element als "startet unsichtbar und wird per
+      // JavaScript eingeblendet". Der noscript-Block im Root-Layout hebt genau
+      // darueber die Startwerte wieder auf — ohne das Attribut muesste er
+      // blind auf [style*="opacity:0"] zielen und traefe damit auch
+      // Ein-/Ausblendungen, die bewusst verborgen bleiben sollen.
+      data-reveal=""
       className={className}
       initial={shouldReduceMotion ? false : { opacity: 0, y }}
       whileInView={{ opacity: 1, y: 0 }}