style: restore CSS-only transitions and update config examples

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) {

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>
+        <FadeIn>
-        <p className="subpage-subtitle">Angaben gemäß § 5 TMG</p>
+          <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' }}>
+        <FadeIn delay={0.1}>
-          <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) && (
           <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 && (
+              {legal.name}
-                <>
+              <br />
-                  E-Mail: {legal.email}
+              {legal.address}
-                  <br />
+              <br />
-                </>
+              {legal.zipCity}
-              )}
+              <br />
-              {legal.phone && <>Telefon: {legal.phone}</>}
+              {legal.country}
             </p>
           </section>
-        )}
 
-        {(legal.taxId || legal.vatId) && (
+          {(legal.email || legal.phone) && (
-          <section style={{ marginBottom: '2rem' }}>
+            <section style={{ marginBottom: '2rem' }}>
-            <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
+              <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Kontakt</h2>
-              Steuernummer
+              <p style={{ lineHeight: 1.6 }}>
-            </h2>
+                {legal.email && (
-            <p style={{ lineHeight: 1.6 }}>
+                  <>
-              {legal.taxId && (
+                    E-Mail: {legal.email}
-                <>
+                    <br />
-                  Steuernummer: {legal.taxId}
+                  </>
-                  <br />
+                )}
-                </>
+                {legal.phone && <>Telefon: {legal.phone}</>}
-              )}
+              </p>
-              {legal.vatId && <>Umsatzsteuer-ID: {legal.vatId}</>}
+            </section>
-            </p>
+          )}
+
+          {(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>
-        )}
+        </FadeIn>
-
-        {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>
       </main>
     </div>
   );

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" />

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:

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,