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,11 +26,14 @@ export default function ImpressumPage() {
     <div className="subpage-container">
       <header className="subpage-header">
         <BackLink href="/" label="Home" />
+        <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' }}>
+        <FadeIn delay={0.1}>
           <section style={{ marginBottom: '2rem' }}>
             <h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Anschrift</h2>
             <p style={{ lineHeight: 1.6 }}>
@@ -87,6 +91,7 @@ export default function ImpressumPage() {
           <section style={{ marginTop: '4rem', fontSize: '0.85rem', opacity: 0.6 }}>
             <p>Quelle: Erstellt mit dem Impressum-Generator von eRecht24.</p>
           </section>
+        </FadeIn>
       </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,