feat: Implement initial admin and mobile application UI, including styling, layouts, authentication, and legal page components.

innungsapp/apps/admin/app/components/LegalPageShell.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState, type ReactNode } from 'react'
 import Link from 'next/link'
 import { Syne } from 'next/font/google'
-import { Moon, Sun } from 'lucide-react'
+import { Moon, Sun, ArrowLeft } from 'lucide-react'
 
 const syne = Syne({ subsets: ['latin'], weight: ['400', '500', '600', '700', '800'] })
 
@@ -141,6 +141,19 @@ export default function LegalPageShell({ title, subtitle, children }: LegalPageS
 
         .theme-btn:hover { color: var(--ink); }
 
+        .back-link {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          color: var(--ink-muted);
+          text-decoration: none;
+          font-size: 0.875rem;
+          margin-bottom: 24px;
+          transition: color 0.15s;
+        }
+
+        .back-link:hover { color: var(--ink); }
+
         .main-wrap {
           max-width: 980px;
           margin: 0 auto;
@@ -310,6 +323,10 @@ export default function LegalPageShell({ title, subtitle, children }: LegalPageS
         </nav>
 
         <main className="main-wrap">
+          <Link href="/" className="back-link">
+            <ArrowLeft size={16} />
+            Zurück zur Startseite
+          </Link>
           <div className="eyebrow">Rechtliches</div>
           <h1 className="page-title">{title}</h1>
           <p className="page-subtitle">{subtitle}</p>

innungsapp/apps/admin/app/layout.tsx

@@ -21,7 +21,7 @@ export async function generateMetadata(): Promise<Metadata> {
   const description = org
     ? `Willkommen im offiziellen Portal der ${org.name}.`
     : 'Digitale Mitgliederverwaltung, Push-News und Lehrlingsboerse fuer Handwerksinnungen.'
-  const icon = org?.logoUrl || '/favicon.ico'
+  const icon = org?.logoUrl || '/logo.png'
 
   return {
     title,

innungsapp/apps/admin/app/login/page.tsx

@@ -13,7 +13,7 @@ export default async function LoginPage() {
     })
   }
 
-  const primaryColor = org?.primaryColor || '#E63946'
+  const primaryColor = org?.primaryColor || '#C99738'
   const orgName = org?.name || 'InnungsApp'
   const logoUrl = org?.logoUrl || '/logo.png'
   const secondaryText = org ? `Verwaltungsportal für die ${org.name}` : 'Verwaltungsportal für Innungen'

innungsapp/apps/admin/app/page.tsx

@@ -284,12 +284,12 @@ export default function RootPage() {
           color: var(--gold); margin-bottom: 32px; font-weight: 500;
         }
         .hero-h1 {
-          font-weight: 800; font-size: clamp(1.75rem, 5vw, 7.5rem);
+          font-weight: 800; font-size: clamp(1.5rem, 8vw, 7.5rem);
           line-height: 0.92; letter-spacing: -0.04em;
           margin: 0 0 48px; color: var(--ink);
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-          hyphens: auto;
+        }
+        @media (max-width: 767px) {
+          .hero-h1 { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
         }
         .hero-h1 em { color: var(--gold); font-style: normal; }
 
@@ -376,12 +376,12 @@ export default function RootPage() {
           .features-sticky { position: sticky; top: 88px; }
         }
         .features-h2 {
-          font-weight: 800; font-size: clamp(1.5rem, 5vw, 4rem);
+          font-weight: 800; font-size: clamp(1.5rem, 7vw, 4rem);
           letter-spacing: -0.04em; line-height: 1.0;
           margin: 24px 0 28px; color: var(--ink);
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-          hyphens: auto;
+        }
+        @media (max-width: 767px) {
+          .features-h2 { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
         }
         .features-sub { color: var(--ink-muted); font-family: 'Georgia', serif; line-height: 1.65; font-size: 0.9375rem; }
 
@@ -468,9 +468,9 @@ export default function RootPage() {
         .aeo-inner { max-width: 800px; margin: 0 auto; padding: 0 32px; }
         .aeo-text {
           color: var(--ink-muted); font-size: 1rem; line-height: 1.8; font-family: 'Georgia', serif;
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-          hyphens: auto;
+        }
+        @media (max-width: 767px) {
+          .aeo-text { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
         }
         .aeo-text p { margin-bottom: 24px; }
         .aeo-text strong { color: var(--ink); font-weight: 600; }
@@ -512,11 +512,11 @@ export default function RootPage() {
           .cta-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; }
         }
         .cta-h2 {
-          font-weight: 800; font-size: clamp(1.5rem, 5vw, 4.5rem);
+          font-weight: 800; font-size: clamp(1.25rem, 6.5vw, 4.5rem);
           letter-spacing: -0.04em; line-height: 1.0; color: var(--ink);
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-          hyphens: auto;
+        }
+        @media (max-width: 767px) {
+          .cta-h2 { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
         }
         .cta-h2 em { color: var(--gold); font-style: normal; }
         .cta-right { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
@@ -956,9 +956,13 @@ export default function RootPage() {
 
           {/* AEO / GEO Content Block */}
           <section className="aeo-section">
-            <div className="aeo-inner">
-              <div className="section-marker">Über unsere Plattform</div>
-              <h2 className="cta-h2" style={{ marginBottom: '32px', fontSize: 'clamp(2rem, 4vw, 3rem)' }}>Die smarte Lösung für moderne Handwerksorganisationen</h2>
+            <div className="aeo-inner" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
+              <div className="section-marker" style={{ justifyContent: 'center' }}>Über unsere Plattform</div>
+              <h2 className="cta-h2" style={{ marginBottom: '32px', fontSize: 'clamp(1.25rem, 4vw, 2.5rem)', lineHeight: 1.2 }}>
+                <span style={{ display: 'block' }}>Die smarte Lösung</span>
+                <span style={{ display: 'block' }}>für moderne</span>
+                <span style={{ display: 'block' }}>Handwerksorganisationen</span>
+              </h2>
               <div className="aeo-text">
                 <p>
                   <strong>InnungsApp PRO</strong> ist eine cloudbasierte Verwaltungssoftware, die speziell auf die Bedürfnisse von <strong>Handwerksinnungen in Deutschland</strong> zugeschnitten ist. Die Plattform bündelt Mitgliederverwaltung, Kommunikation und Eventmanagement in einer zentralen Oberfläche.

innungsapp/apps/admin/components/auth/LoginForm.tsx

@@ -14,7 +14,7 @@ interface LoginFormProps {
     primaryColor?: string
 }
 
-export function LoginForm({ primaryColor = '#E63946' }: LoginFormProps) {
+export function LoginForm({ primaryColor = '#C99738' }: LoginFormProps) {
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')
     const [loading, setLoading] = useState(false)

innungsapp/apps/admin/tailwind.config.ts

@@ -11,16 +11,16 @@ const config: Config = {
     extend: {
       colors: {
         brand: {
-          50: '#fff1f1',
-          100: '#ffe1e1',
-          200: '#ffC7c7',
-          300: '#ffa0a0',
-          400: '#ff6b6b',
-          500: 'var(--color-brand-primary, #E63946)',
-          600: 'var(--color-brand-hover, #d42535)',
-          700: '#b21e2c',
-          800: '#931d29',
-          900: '#7a1e27',
+          50: '#fdf8f0',
+          100: '#f9edd7',
+          200: '#f1d6b0',
+          300: '#e6ba83',
+          400: '#d99d58',
+          500: 'var(--color-brand-primary, #C99738)',
+          600: 'var(--color-brand-hover, #A6752C)',
+          700: '#8c5d26',
+          800: '#734c24',
+          900: '#5e3f21',
         },
       },
       fontFamily: {