diff --git a/app/globals.css b/app/globals.css
index 6d03cff..2eeb26a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -60,6 +60,22 @@
   padding: 104px 24px 96px; /* 56px header + 48px original padding */
 }
 
+/* Simple CSS Page Fade-In (Replaces Framer Motion) */
+[data-transitions='true'] .main {
+  animation: page-fade-in 0.5s ease-out forwards;
+}
+
+@keyframes page-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* Homepage hero + About page use full bleed — override main padding */
 .main:has(.hero),
 .main:has(.about) {
diff --git a/app/impressum/page.tsx b/app/impressum/page.tsx
index b4e072f..039ae51 100644
--- a/app/impressum/page.tsx
+++ b/app/impressum/page.tsx
@@ -7,6 +7,7 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getConfig } from '@/lib/config';
 import { BackLink } from '@/components/BackLink';
+import { FadeIn } from '@/components/FadeIn';
 import './impressum.css';
 
 export const metadata: Metadata = {
@@ -25,68 +26,72 @@ export default function ImpressumPage() {
     <div className="subpage-container">
       <header className="subpage-header">
         <BackLink href="/" label="Home" />
-        <h1 className="subpage-title">Impressum</h1>
-        <p className="subpage-subtitle">Angaben gemäß § 5 TMG</p>
+        <FadeIn>
+          <h1 className="subpage-title">Impressum</h1>
+          <p className="subpage-subtitle">Angaben gemäß § 5 TMG</p>
+        </FadeIn>
       </header>
 
       <main className="subpage-content" style={{ maxWidth: '600px', margin: '0 auto' }}>
-        <section style={{ marginBottom: '2rem' }}>
-          <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Anschrift</h2>
-          <p style={{ lineHeight: 1.6 }}>
-            {legal.name}
-            <br />
-            {legal.address}
-            <br />
-            {legal.zipCity}
-            <br />
-            {legal.country}
-          </p>
-        </section>
-
-        {(legal.email || legal.phone) && (
+        <FadeIn delay={0.1}>
           <section style={{ marginBottom: '2rem' }}>
-            <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Kontakt</h2>
+            <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Anschrift</h2>
             <p style={{ lineHeight: 1.6 }}>
-              {legal.email && (
-                <>
-                  E-Mail: {legal.email}
-                  <br />
-                </>
-              )}
-              {legal.phone && <>Telefon: {legal.phone}</>}
+              {legal.name}
+              <br />
+              {legal.address}
+              <br />
+              {legal.zipCity}
+              <br />
+              {legal.country}
             </p>
           </section>
-        )}
 
-        {(legal.taxId || legal.vatId) && (
-          <section style={{ marginBottom: '2rem' }}>
-            <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
-              Steuernummer
-            </h2>
-            <p style={{ lineHeight: 1.6 }}>
-              {legal.taxId && (
-                <>
-                  Steuernummer: {legal.taxId}
-                  <br />
-                </>
-              )}
-              {legal.vatId && <>Umsatzsteuer-ID: {legal.vatId}</>}
-            </p>
+          {(legal.email || legal.phone) && (
+            <section style={{ marginBottom: '2rem' }}>
+              <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Kontakt</h2>
+              <p style={{ lineHeight: 1.6 }}>
+                {legal.email && (
+                  <>
+                    E-Mail: {legal.email}
+                    <br />
+                  </>
+                )}
+                {legal.phone && <>Telefon: {legal.phone}</>}
+              </p>
+            </section>
+          )}
+
+          {(legal.taxId || legal.vatId) && (
+            <section style={{ marginBottom: '2rem' }}>
+              <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
+                Steuernummer
+              </h2>
+              <p style={{ lineHeight: 1.6 }}>
+                {legal.taxId && (
+                  <>
+                    Steuernummer: {legal.taxId}
+                    <br />
+                  </>
+                )}
+                {legal.vatId && <>Umsatzsteuer-ID: {legal.vatId}</>}
+              </p>
+            </section>
+          )}
+
+          {legal.extraInfo && (
+            <section style={{ marginBottom: '2rem' }}>
+              <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
+                Weitere Informationen
+              </h2>
+              <p style={{ lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{legal.extraInfo}</p>
+            </section>
+          )}
+
+          <section style={{ marginTop: '4rem', fontSize: '0.85rem', opacity: 0.6 }}>
+            <p>Quelle: Erstellt mit dem Impressum-Generator von eRecht24.</p>
           </section>
-        )}
-
-        {legal.extraInfo && (
-          <section style={{ marginBottom: '2rem' }}>
-            <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
-              Weitere Informationen
-            </h2>
-            <p style={{ lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{legal.extraInfo}</p>
-          </section>
-        )}
-
-        <section style={{ marginTop: '4rem', fontSize: '0.85rem', opacity: 0.6 }}>
-          <p>Quelle: Erstellt mit dem Impressum-Generator von eRecht24.</p>
-        </section>
+        </FadeIn>
       </main>
     </div>
   );
diff --git a/app/layout.tsx b/app/layout.tsx
index 5fd7bc3..e867853 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -63,6 +63,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       data-grain={theme.grain}
       data-header-dot={theme.headerDot}
       data-photo-frame={theme.photoFrame}
+      data-transitions={config.transitions}
     >
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/content/settings.yaml.example b/content/settings.yaml.example
index fcd2786..6c99b32 100644
--- a/content/settings.yaml.example
+++ b/content/settings.yaml.example
@@ -12,6 +12,9 @@ exifOnHover: true
 # Enable the interactive world map view (/map)
 map: true
 
+# Enable smooth page transitions between routes
+transitions: true
+
 # ── Theme configuration ──────────────────────────────────────────
 # Presets: studio, minimal, editorial, classic, noir, monograph, botanica
 theme:
diff --git a/lib/config.ts b/lib/config.ts
index 655e5c6..cd2e075 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -156,6 +156,7 @@ interface SettingsYaml {
   subtitle?: string;
   exifOnHover?: boolean;
   map?: boolean;
+  transitions?: boolean;
   theme?:
     | string
     | {
@@ -258,6 +259,8 @@ export interface AppConfig {
   legal: LegalConfig;
   /** Show the /map page. Default: false. */
   map: boolean;
+  /** Enable page transitions between routes. Default: true. */
+  transitions: boolean;
   /** Explicit album name overrides from gallery.yaml. */
   albumOverrides: Record<string, string>;
   cacheTtl: number;
@@ -502,6 +505,7 @@ export function getConfig(): AppConfig {
       extraInfo: settings.legal?.extraInfo,
     },
     map: settings.map === true,
+    transitions: settings.transitions !== false,
     albumOverrides,
     cacheTtl: env.CACHE_TTL * 1000,
     rateLimitRpm: env.RATE_LIMIT_RPM,