feat(landing): Add i18n

landing/app/app.vue

@@ -1,7 +1,7 @@
 <template>
   <UApp>
     <!-- Skip link for accessibility -->
-    <a href="#main-content" class="skip-link"> Zum Hauptinhalt springen </a>
+    <a href="#main-content" class="skip-link"> {{ $t('common.skipToContent') }} </a>
 
     <NuxtRouteAnnouncer />
 
@@ -40,6 +40,14 @@
       />
 
       <template #right>
+        <USelectMenu
+          v-model="selectedLocale"
+          :items="localeItems"
+          class="w-[100px]"
+          :ui="{
+            base: 'text-sm'
+          }"
+        />
         <UColorModeButton
           :ui="{
             base: 'text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400'
@@ -49,7 +57,7 @@
           to="#newsletter"
           class="btn-gradient px-5 py-2.5 rounded-xl font-semibold shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transition-shadow"
         >
-          <span>Informiert bleiben</span>
+          <span>{{ $t('common.stayInformed') }}</span>
         </UButton>
       </template>
 
@@ -64,7 +72,7 @@
         />
         <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-800">
           <UButton to="#newsletter" size="lg" block class="btn-gradient rounded-xl font-semibold">
-            Informiert bleiben
+            {{ $t('common.stayInformed') }}
           </UButton>
         </div>
       </template>
@@ -90,7 +98,7 @@
               <span class="font-heading text-xl font-bold text-gray-900 dark:text-white"> LegalConsentHub </span>
             </NuxtLink>
             <p class="text-gray-600 dark:text-gray-400 max-w-sm mb-6">
-              Digitale Mitbestimmung für IT- und KI-Systeme. Strukturierte Prozesse, revisionssichere Dokumentation.
+              {{ $t('footer.brandDescription') }}
             </p>
             <div class="flex items-center gap-3">
               <UButton
@@ -115,7 +123,7 @@
 
           <!-- Links column -->
           <div>
-            <h4 class="font-heading font-bold text-gray-900 dark:text-white mb-4">Navigation</h4>
+            <h4 class="font-heading font-bold text-gray-900 dark:text-white mb-4">{{ $t('common.navigation') }}</h4>
             <ul class="space-y-3">
               <li v-for="item in navigationItems" :key="item.label">
                 <NuxtLink
@@ -130,7 +138,7 @@
 
           <!-- Legal column -->
           <div>
-            <h4 class="font-heading font-bold text-gray-900 dark:text-white mb-4">Rechtliches</h4>
+            <h4 class="font-heading font-bold text-gray-900 dark:text-white mb-4">{{ $t('common.legal') }}</h4>
             <ul class="space-y-3">
               <li v-for="item in footerLinks" :key="item.label">
                 <NuxtLink
@@ -148,16 +156,16 @@
         <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-800">
           <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
             <p class="text-sm text-gray-500 dark:text-gray-400">
-              © {{ new Date().getFullYear() }} LegalConsentHub. Alle Rechte vorbehalten.
+              © {{ new Date().getFullYear() }} LegalConsentHub. {{ $t('common.allRightsReserved') }}
             </p>
             <div class="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
               <div class="flex items-center gap-2">
                 <UIcon name="i-lucide-server" class="w-4 h-4" />
-                <span>Hosted in Germany</span>
+                <span>{{ $t('common.hostedInGermany') }}</span>
               </div>
               <div class="flex items-center gap-2">
                 <UIcon name="i-lucide-shield-check" class="w-4 h-4" />
-                <span>DSGVO-konform</span>
+                <span>{{ $t('common.gdprCompliant') }}</span>
               </div>
             </div>
           </div>
@@ -170,6 +178,26 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
+const { t, locale, locales, setLocale } = useI18n()
+
+// Locale selector items
+const localeItems = computed(() =>
+  (locales.value as Array<{ code: string; name: string }>).map((l) => ({
+    label: l.name,
+    value: l.code
+  }))
+)
+
+// Selected locale for the dropdown
+const selectedLocale = computed({
+  get: () => localeItems.value.find((l) => l.value === locale.value),
+  set: (item) => {
+    if (item) {
+      setLocale(item.value as 'en' | 'de')
+    }
+  }
+})
+
 // Track scroll position for header styling
 const isScrolled = ref(false)
 
@@ -188,34 +216,34 @@ onMounted(() => {
 
 const navigationItems = computed<NavigationMenuItem[]>(() => [
   {
-    label: 'Für Betriebsräte',
+    label: t('nav.forWorksCouncils'),
     to: '#betriebsraete'
   },
   {
-    label: 'Für Unternehmen',
+    label: t('nav.forCompanies'),
     to: '#unternehmen'
   },
   {
-    label: 'Features',
+    label: t('nav.features'),
     to: '#features'
   },
   {
-    label: 'Kontakt',
+    label: t('nav.contact'),
     to: '#kontakt'
   }
 ])
 
 const footerLinks = computed<NavigationMenuItem[]>(() => [
   {
-    label: 'Impressum',
+    label: t('footer.imprint'),
     to: '/impressum'
   },
   {
-    label: 'Datenschutz',
+    label: t('footer.privacy'),
     to: '/datenschutz'
   },
   {
-    label: 'AGB',
+    label: t('footer.terms'),
     to: '/agb'
   }
 ])

landing/app/components/landing/AdditionalFeatures.vue

@@ -10,19 +10,20 @@
           class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-success-100 dark:bg-success-900/30 text-success-700 dark:text-success-300 text-sm font-medium mb-4"
         >
           <UIcon name="i-lucide-shield" class="w-4 h-4" />
-          Vertrauen & Sicherheit
+          {{ $t('additionalFeatures.badge') }}
         </span>
         <h2
           class="font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-gray-900 dark:text-white"
         >
-          Weitere <span class="gradient-text">Vorteile</span>
+          {{ $t('additionalFeatures.title', { highlight: '' })
+          }}<span class="gradient-text">{{ $t('additionalFeatures.titleHighlight') }}</span>
         </h2>
       </div>
     </template>
 
     <template #description>
       <p class="text-center text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-        Alles aus einer Hand – ohne Drittanbieter, mit Serverstandort in Deutschland.
+        {{ $t('additionalFeatures.description') }}
       </p>
     </template>
 
@@ -74,50 +75,32 @@
 
     <!-- Bottom CTA -->
     <div class="mt-12 text-center">
-      <p class="text-gray-500 dark:text-gray-400 mb-4">Haben Sie Fragen zu unseren Sicherheitsstandards?</p>
+      <p class="text-gray-500 dark:text-gray-400 mb-4">{{ $t('additionalFeatures.ctaQuestion') }}</p>
       <UButton to="#kontakt" variant="outline" class="btn-outline-gradient">
         <UIcon name="i-lucide-message-circle" class="w-4 h-4 mr-2" />
-        Kontakt aufnehmen
+        {{ $t('additionalFeatures.ctaButton') }}
       </UButton>
     </div>
   </UPageSection>
 </template>
 
 <script setup lang="ts">
-const features = [
+const { t } = useI18n()
-  {
+
-    icon: 'i-lucide-puzzle',
+const featureIcons = [
-    title: 'Keine Zusatztools erforderlich',
+  'i-lucide-puzzle',
-    description:
+  'i-lucide-server',
-      'Keine externen Zusatzlösungen für Prozess, Abstimmung und Dokumentenerstellung – alles läuft in einem System.'
+  'i-lucide-lock',
-  },
+  'i-lucide-sparkles',
-  {
+  'i-lucide-settings',
-    icon: 'i-lucide-server',
+  'i-lucide-headphones'
-    title: 'Hosting & Backups in Deutschland',
-    description:
-      'Betrieb und Datensicherung erfolgen in Deutschland – transparente Datenflüsse ohne unerwartete Auslandsverarbeitung.'
-  },
-  {
-    icon: 'i-lucide-lock',
-    title: 'Verschlüsselte Übertragung',
-    description:
-      'Alle Verbindungen sind per TLS/HTTPS verschlüsselt, damit Inhalte und Zugangsdaten beim Transport geschützt sind.'
-  },
-  {
-    icon: 'i-lucide-sparkles',
-    title: 'Einfach zu bedienen',
-    description: 'Nutzerfreundliche, selbsterklärende Oberfläche mit geführten Eingaben – reduziert Schulungsaufwand.'
-  },
-  {
-    icon: 'i-lucide-settings',
-    title: 'Hohe Anpassbarkeit',
-    description:
-      'Templates, Felder und Prozessschritte lassen sich auf Organisation und Abläufe konkret anpassen (auf Anfrage).'
-  },
-  {
-    icon: 'i-lucide-headphones',
-    title: 'Persönlicher Support',
-    description: 'Bei Fragen steht Ihnen unser Support-Team zur Verfügung – schnell, kompetent und auf Deutsch.'
-  }
 ]
+
+const features = computed(() =>
+  featureIcons.map((icon, index) => ({
+    icon,
+    title: t(`additionalFeatures.items[${index}].title`),
+    description: t(`additionalFeatures.items[${index}].description`)
+  }))
+)
 </script>

landing/app/components/landing/BenefitsCompany.vue

@@ -11,19 +11,20 @@
           class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 text-sm font-medium mb-4"
         >
           <UIcon name="i-lucide-building-2" class="w-4 h-4" />
-          Für Unternehmen
+          {{ $t('company.badge') }}
         </span>
         <h2
           class="font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-gray-900 dark:text-white"
         >
-          Vorteile für <span class="gradient-text">Unternehmen</span>
+          {{ $t('company.title', { highlight: '' })
+          }}<span class="gradient-text">{{ $t('company.titleHighlight') }}</span>
         </h2>
       </div>
     </template>
 
     <template #description>
       <p class="text-center text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-        Schneller zur abgestimmten Einführung von IT- und KI-Systemen mit planbaren Timelines.
+        {{ $t('company.description') }}
       </p>
     </template>
 
@@ -38,8 +39,10 @@
             <UIcon name="i-lucide-x" class="w-6 h-6 text-white" />
           </div>
           <div>
-            <h3 class="font-heading text-xl font-bold text-gray-900 dark:text-white">Weg von</h3>
+            <h3 class="font-heading text-xl font-bold text-gray-900 dark:text-white">
-            <p class="text-sm text-gray-500 dark:text-gray-400">Typische Herausforderungen</p>
+              {{ $t('company.awayFrom.title') }}
+            </h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('company.awayFrom.subtitle') }}</p>
           </div>
         </div>
 
@@ -69,8 +72,10 @@
             <UIcon name="i-lucide-check" class="w-6 h-6 text-white" />
           </div>
           <div>
-            <h3 class="font-heading text-xl font-bold text-gray-900 dark:text-white">Hin zu</h3>
+            <h3 class="font-heading text-xl font-bold text-gray-900 dark:text-white">
-            <p class="text-sm text-gray-500 dark:text-gray-400">Mit LegalConsentHub</p>
+              {{ $t('company.towards.title') }}
+            </h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('company.towards.subtitle') }}</p>
           </div>
         </div>
 
@@ -96,7 +101,8 @@
     <div class="mt-12">
       <div class="section-divider mb-8" />
       <h3 class="font-heading text-2xl sm:text-3xl text-gray-900 dark:text-white text-center mb-10">
-        So wirkt es in der <span class="gradient-text">Praxis</span>
+        {{ $t('company.highlightsTitle', { highlight: '' })
+        }}<span class="gradient-text">{{ $t('company.highlightsTitleHighlight') }}</span>
       </h3>
 
       <div class="grid sm:grid-cols-3 gap-6">
@@ -124,62 +130,48 @@
 </template>
 
 <script setup lang="ts">
-const painPoints = [
+const { t } = useI18n()
-  {
+
-    icon: 'i-lucide-refresh-cw',
+const painPointIcons = [
-    text: 'Unkalkulierbare Schleifen im Mitbestimmungsverfahren (fehlende Infos, Nachforderungen)'
+  'i-lucide-refresh-cw',
-  },
+  'i-lucide-ban',
-  { icon: 'i-lucide-ban', text: 'Verzögerungen, Projektstopps und Last-Minute-Änderungen kurz vor Go-live' },
+  'i-lucide-files',
-  { icon: 'i-lucide-files', text: 'Hoher Koordinationsaufwand (E-Mail/Excel/Word) und Versionschaos' },
+  'i-lucide-puzzle',
-  {
+  'i-lucide-help-circle',
-    icon: 'i-lucide-puzzle',
+  'i-lucide-hourglass',
-    text: 'Komplexität und Reibung durch uneinheitliche Prozesse und unterschiedliche Erwartungshaltungen'
+  'i-lucide-wallet'
-  },
-  { icon: 'i-lucide-help-circle', text: 'Unklarer Änderungsumfang bei Updates/Modulerweiterungen' },
-  { icon: 'i-lucide-hourglass', text: 'Verlust wertvoller Zeit und begrenzter Ressourcen' },
-  { icon: 'i-lucide-wallet', text: 'Vermeidbare Kosten (Einigungsstelle, externe Beratung, Eskalationen)' }
 ]
 
-const benefits = [
+const benefitIcons = [
-  {
+  'i-lucide-calendar-check',
-    icon: 'i-lucide-calendar-check',
+  'i-lucide-users',
-    text: 'Planbare, schnellere Verfahren durch Standardisierung & klare Prozessschritte'
+  'i-lucide-gauge',
-  },
+  'i-lucide-thumbs-up',
-  {
+  'i-lucide-file-check-2',
-    icon: 'i-lucide-users',
+  'i-lucide-sparkles'
-    text: 'Bessere Zusammenarbeit mit BR/PR durch Transparenz und nachvollziehbare Dokumentation'
-  },
-  {
-    icon: 'i-lucide-gauge',
-    text: 'Risikobasierter Ansatz: Schnellverfahren für Standard-/Low-Risk-Systeme, Fokus auf High-Risk'
-  },
-  {
-    icon: 'i-lucide-thumbs-up',
-    text: 'Höhere Einigungswahrscheinlichkeit, weil die Verhandlungsgrundlage strukturiert ist'
-  },
-  {
-    icon: 'i-lucide-file-check-2',
-    text: 'Qualitativ konsistente, robuste Betriebs-/Dienstvereinbarungen (auch bei Änderungen updatefähig)'
-  },
-  { icon: 'i-lucide-sparkles', text: 'Entlastung von Fachbereichen/IT/HR – mehr Zeit für Wertschöpfung' }
 ]
 
-const highlights = [
+const highlightIcons = ['i-lucide-repeat', 'i-lucide-rocket', 'i-lucide-refresh-cw']
-  {
+
-    icon: 'i-lucide-repeat',
+const painPoints = computed(() =>
-    title: 'Weniger Iterationen',
+  painPointIcons.map((icon, index) => ({
-    description: 'Unterlagen sind vollständig und vergleichbar – Nachforderungen sinken.'
+    icon,
-  },
+    text: t(`company.painPoints[${index}]`)
-  {
+  }))
-    icon: 'i-lucide-rocket',
+)
-    title: 'Schneller zur Freigabe',
+
-    description: 'Klare Schritte statt „Hauruck" und kurzfristiger Umplanungen.'
+const benefits = computed(() =>
-  },
+  benefitIcons.map((icon, index) => ({
-  {
+    icon,
-    icon: 'i-lucide-refresh-cw',
+    text: t(`company.benefits[${index}]`)
-    title: 'Change-ready',
+  }))
-    description:
+)
-      'Updates, neue Module oder neue Auswertungen werden strukturiert nachgezogen, ohne jedes Mal neu zu starten.'
+
-  }
+const highlights = computed(() =>
-]
+  highlightIcons.map((icon, index) => ({
+    icon,
+    title: t(`company.highlights[${index}].title`),
+    description: t(`company.highlights[${index}].description`)
+  }))
+)
 </script>

landing/app/components/landing/BenefitsWorksCouncil.vue

@@ -11,19 +11,20 @@
           class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-medium mb-4"
         >
           <UIcon name="i-lucide-users" class="w-4 h-4" />
-          Für Betriebsräte
+          {{ $t('worksCouncil.badge') }}
         </span>
         <h2
           class="font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-gray-900 dark:text-white"
         >
-          Vorteile für <span class="gradient-text">Betriebsräte</span>
+          {{ $t('worksCouncil.title', { highlight: '' })
+          }}<span class="gradient-text">{{ $t('worksCouncil.titleHighlight') }}</span>
         </h2>
       </div>
     </template>
 
     <template #description>
       <p class="text-center text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-        Weg von Informationsjagd und Blackbox-Systemen – hin zu Transparenz und belastbaren Vereinbarungen.
+        {{ $t('worksCouncil.description') }}
       </p>
     </template>
 
@@ -42,7 +43,7 @@
             @click="activeTab = 'pain'"
           >
             <UIcon name="i-lucide-x-circle" class="w-4 h-4 inline mr-2" />
-            Weg von
+            {{ $t('worksCouncil.tabs.awayFrom') }}
           </button>
           <button
             :class="[
@@ -54,7 +55,7 @@
             @click="activeTab = 'benefit'"
           >
             <UIcon name="i-lucide-check-circle" class="w-4 h-4 inline mr-2" />
-            Hin zu
+            {{ $t('worksCouncil.tabs.towards') }}
           </button>
         </div>
       </div>
@@ -117,7 +118,8 @@
     <div class="mt-12">
       <div class="section-divider mb-8" />
       <h3 class="font-heading text-2xl sm:text-3xl text-gray-900 dark:text-white text-center mb-10">
-        So hilft es im <span class="gradient-text">Alltag</span>
+        {{ $t('worksCouncil.highlightsTitle', { highlight: '' })
+        }}<span class="gradient-text">{{ $t('worksCouncil.highlightsTitleHighlight') }}</span>
       </h3>
 
       <div class="grid sm:grid-cols-3 gap-6">
@@ -145,65 +147,51 @@
 </template>
 
 <script setup lang="ts">
+const { t } = useI18n()
 const activeTab = ref<'pain' | 'benefit'>('benefit')
 
-const painPoints = [
+const painPointIcons = [
-  {
+  'i-lucide-search',
-    icon: 'i-lucide-search',
+  'i-lucide-git-branch',
-    text: 'Informationen zu IT-/KI-Systemen mühsam zusammensuchen (E-Mails, PDFs, PowerPoint, Excel-Chaos)'
+  'i-lucide-timer',
-  },
+  'i-lucide-brain',
-  { icon: 'i-lucide-git-branch', text: 'Medienbrüche, Versionschaos und wiederkehrende Rückfragen' },
+  'i-lucide-eye-off',
-  { icon: 'i-lucide-timer', text: 'Ad-hoc-Systemeinführungen unter Zeitdruck („Hauruck" statt Prozess)' },
+  'i-lucide-file-question',
-  { icon: 'i-lucide-brain', text: 'Überforderung durch Menge und Komplexität der Systeme' },
+  'i-lucide-calendar-x'
-  { icon: 'i-lucide-eye-off', text: 'Blackbox bei Funktionen, Auswertungen, Schnittstellen und Änderungen' },
-  { icon: 'i-lucide-file-question', text: 'Verhandlungen ohne belastbare Datenbasis' },
-  { icon: 'i-lucide-calendar-x', text: 'Heute geregelt, morgen veraltet' }
 ]
 
-const benefits = [
+const benefitIcons = [
-  {
+  'i-lucide-layout-list',
-    icon: 'i-lucide-layout-list',
+  'i-lucide-route',
-    text: 'Strukturierte, vollständige Informationsgrundlage (einheitlich je System/Verarbeitung)'
+  'i-lucide-file-check',
-  },
+  'i-lucide-scan-eye',
-  { icon: 'i-lucide-route', text: 'Klarer Mitbestimmungsprozess mit bewährten Schritten und Zuständigkeiten' },
+  'i-lucide-git-compare',
-  {
+  'i-lucide-clock',
-    icon: 'i-lucide-file-check',
+  'i-lucide-shield-check',
-    text: 'Betriebs-/Dienstvereinbarungen auf belastbarer Grundlage – schneller, konsistenter, leicht aktualisierbar'
+  'i-lucide-heart-handshake'
-  },
-  {
-    icon: 'i-lucide-scan-eye',
-    text: 'Transparenz über Systemfähigkeiten – inkl. möglicher Leistungs-/Verhaltenskontrolle'
-  },
-  {
-    icon: 'i-lucide-git-compare',
-    text: 'Vergleichbarkeit über viele Systeme hinweg durch Standardisierung und einheitliche Templates'
-  },
-  { icon: 'i-lucide-clock', text: 'Große Zeitersparnis gegenüber konventionellem Verfahren' },
-  {
-    icon: 'i-lucide-shield-check',
-    text: 'Schutzmaßnahmen konsequent dokumentiert und pro Auswertung/Verarbeitung nachvollziehbar'
-  },
-  {
-    icon: 'i-lucide-heart-handshake',
-    text: 'Spürbare Entlastung: mehr Zeit für andere Mitbestimmungsthemen und kontinuierlichen Arbeitnehmerschutz'
-  }
 ]
 
-const highlights = [
+const highlightIcons = ['i-lucide-zap', 'i-lucide-handshake', 'i-lucide-shield']
-  {
+
-    icon: 'i-lucide-zap',
+const painPoints = computed(() =>
-    title: 'Schneller prüfen',
+  painPointIcons.map((icon, index) => ({
-    description: 'Relevante Funktionen und Risiken sind auf einen Blick sichtbar.'
+    icon,
-  },
+    text: t(`worksCouncil.painPoints[${index}]`)
-  {
+  }))
-    icon: 'i-lucide-handshake',
+)
-    title: 'Besser verhandeln',
+
-    description: 'Klare, konsistente Unterlagen statt Interpretationsspielräumen.'
+const benefits = computed(() =>
-  },
+  benefitIcons.map((icon, index) => ({
-  {
+    icon,
-    icon: 'i-lucide-shield',
+    text: t(`worksCouncil.benefits[${index}]`)
-    title: 'Nachhaltig absichern',
+  }))
-    description: 'Änderungen und neue Auswertungen lassen sich strukturiert nachziehen.'
+)
-  }
+
-]
+const highlights = computed(() =>
+  highlightIcons.map((icon, index) => ({
+    icon,
+    title: t(`worksCouncil.highlights[${index}].title`),
+    description: t(`worksCouncil.highlights[${index}].description`)
+  }))
+)
 </script>

landing/app/components/landing/ExpertAccess.vue

@@ -30,16 +30,15 @@
             class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 backdrop-blur-sm text-white text-sm font-medium mb-6"
           >
             <UIcon name="i-lucide-users" class="w-4 h-4" />
-            Expertennetzwerk
+            {{ $t('expertAccess.badge') }}
           </span>
 
           <h2 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6 animate-fade-in-up">
-            Externer Sachverstand – direkt aus dem Verfahren
+            {{ $t('expertAccess.title') }}
           </h2>
 
           <p class="text-lg text-white/90 mb-8 animate-fade-in-up" style="animation-delay: 100ms">
-            Wenn Betriebsparteien bei einzelnen Fragen nicht weiterkommen, kann optional externer Sachverstand direkt im
+            {{ $t('expertAccess.description') }}
-            System angefragt werden. Anfragen, Rückfragen und Ergebnisse bleiben nachvollziehbar dokumentiert.
           </p>
 
           <!-- CTA buttons -->
@@ -52,7 +51,7 @@
               size="xl"
               class="bg-white text-primary-700 hover:bg-white/90 px-8 py-4 text-lg font-semibold rounded-xl shadow-lg"
             >
-              Kontakt aufnehmen
+              {{ $t('expertAccess.cta.contact') }}
               <UIcon name="i-lucide-arrow-right" class="w-5 h-5 ml-2" />
             </UButton>
             <UButton
@@ -60,7 +59,7 @@
               size="xl"
               class="bg-white/10 text-white border-2 border-white/30 hover:bg-white/20 px-8 py-4 text-lg font-semibold rounded-xl backdrop-blur-sm"
             >
-              Mehr erfahren
+              {{ $t('expertAccess.cta.learnMore') }}
             </UButton>
           </div>
         </div>
@@ -125,8 +124,8 @@
                   <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4">
                     <UIcon name="i-lucide-scale" class="w-6 h-6 text-white" />
                   </div>
-                  <h4 class="font-heading font-bold text-white mb-1">Arbeitsrecht</h4>
+                  <h4 class="font-heading font-bold text-white mb-1">{{ $t('expertAccess.experts.labor.title') }}</h4>
-                  <p class="text-sm text-white/70">Fachanwälte für Arbeitsrecht</p>
+                  <p class="text-sm text-white/70">{{ $t('expertAccess.experts.labor.description') }}</p>
                 </div>
               </div>
 
@@ -138,8 +137,10 @@
                   <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4">
                     <UIcon name="i-lucide-cpu" class="w-6 h-6 text-white" />
                   </div>
-                  <h4 class="font-heading font-bold text-white mb-1">Technik</h4>
+                  <h4 class="font-heading font-bold text-white mb-1">
-                  <p class="text-sm text-white/70">IT-Sachverständige</p>
+                    {{ $t('expertAccess.experts.technical.title') }}
+                  </h4>
+                  <p class="text-sm text-white/70">{{ $t('expertAccess.experts.technical.description') }}</p>
                 </div>
               </div>
 
@@ -156,8 +157,10 @@
                       <UIcon name="i-lucide-file-check" class="w-6 h-6 text-white" />
                     </div>
                     <div>
-                      <h4 class="font-heading font-bold text-white mb-1">Direkt im Verfahren</h4>
+                      <h4 class="font-heading font-bold text-white mb-1">
-                      <p class="text-sm text-white/70">Dokumentiert & nachvollziehbar</p>
+                        {{ $t('expertAccess.experts.process.title') }}
+                      </h4>
+                      <p class="text-sm text-white/70">{{ $t('expertAccess.experts.process.description') }}</p>
                     </div>
                   </div>
                 </div>
@@ -171,5 +174,5 @@
 </template>
 
 <script setup lang="ts">
-// No additional script needed
+// No additional script needed - using $t() from i18n
 </script>

landing/app/components/landing/FeaturesGrid.vue

@@ -10,24 +10,21 @@
         <span
           class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 text-sm font-medium mb-4"
         >
-          <UIcon
+          <UIcon name="i-lucide-sparkles" class="w-4 h-4" />
-            name="i-lucide-sparkles"
+          {{ $t('features.badge') }}
-            class="w-4 h-4"
-          />
-          Features
         </span>
         <h2
           class="font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-gray-900 dark:text-white"
         >
-          Features, die Mitbestimmung <span class="gradient-text">effizient</span> machen
+          {{ $t('features.title', { highlight: '' })
+          }}<span class="gradient-text">{{ $t('features.titleHighlight') }}</span>
         </h2>
       </div>
     </template>
 
     <template #description>
       <p class="text-center text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-        Eine strukturierte Eingabelogik, klare Prozesse und revisionssichere Dokumentation – damit IT-/KI-Systeme
+        {{ $t('features.description') }}
-        schneller bewertet, abgestimmt und sauber vereinbart werden können.
       </p>
     </template>
 
@@ -49,57 +46,25 @@
 </template>
 
 <script setup lang="ts">
-const features = [
+const { t } = useI18n()
-  {
+
-    icon: 'i-lucide-route',
+const featureIcons = [
-    title: 'Geführter Mitbestimmungsprozess',
+  'i-lucide-route',
-    description:
+  'i-lucide-shield-alert',
-      'Vorgegebene, erweiterbare Eingabeparameter strukturieren den gesamten Ablauf – von der Systembeschreibung bis zur Vereinbarung.'
+  'i-lucide-gauge',
-  },
+  'i-lucide-history',
-  {
+  'i-lucide-message-square',
-    icon: 'i-lucide-shield-alert',
+  'i-lucide-file-text',
-    title: 'Risikobasierter Assistent',
+  'i-lucide-pen-tool',
-    description:
+  'i-lucide-bell',
-      'Ein regelbasierter, risikoorientierter Assistent passt die Eingabemaske an Komplexität, Umfang und Potenziale zur Leistungs-/Verhaltensauswertung an.'
+  'i-lucide-shield-check'
-  },
-  {
-    icon: 'i-lucide-gauge',
-    title: 'Ampelsystem & Direktfeedback',
-    description:
-      'Kritikalität wird transparent bewertet und direkt beim Ausfüllen zurückgespielt – für schnelle Orientierung und weniger Schleifen.'
-  },
-  {
-    icon: 'i-lucide-history',
-    title: 'Versionierung & Audit-Trail',
-    description:
-      'Änderungen werden versioniert und lückenlos nachvollziehbar dokumentiert – inklusive Historie und Vergleich.'
-  },
-  {
-    icon: 'i-lucide-message-square',
-    title: 'Zusammenarbeit per Kommentaren',
-    description: 'Inline-Kommentare ermöglichen Abstimmung direkt an einzelnen Inhalten – ohne Medienbrüche.'
-  },
-  {
-    icon: 'i-lucide-file-text',
-    title: 'Automatische BV-/DV-Generierung',
-    description:
-      'Nach Abschluss der Eingaben erzeugt das System strukturierte, übersichtliche und signaturbereite Betriebs-/Dienstvereinbarungen.'
-  },
-  {
-    icon: 'i-lucide-pen-tool',
-    title: 'Signaturfähig mit QES (eIDAS)',
-    description: 'Optional rechtsverbindliche Unterzeichnung per qualifizierter elektronischer Signatur nach eIDAS.'
-  },
-  {
-    icon: 'i-lucide-bell',
-    title: 'Benachrichtigungen & News-Center',
-    description: 'Aktuell bleiben über Status-Updates, Änderungen und Aufgaben – per Nachrichten-Center und E-Mail.'
-  },
-  {
-    icon: 'i-lucide-shield-check',
-    title: 'SSO & Governance',
-    description:
-      'SSO-Integration via SAML oder OIDC sowie ein umfangreich konfigurierbares Rollen- und Berechtigungskonzept.'
-  }
 ]
+
+const features = computed(() =>
+  featureIcons.map((icon, index) => ({
+    icon,
+    title: t(`features.items[${index}].title`),
+    description: t(`features.items[${index}].description`)
+  }))
+)
 </script>

landing/app/components/landing/FrameworkAgreement.vue

@@ -11,19 +11,18 @@
           class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 text-sm font-medium mb-6"
         >
           <UIcon name="i-lucide-file-text" class="w-4 h-4" />
-          Optional verfügbar
+          {{ $t('frameworkAgreement.badge') }}
         </span>
 
         <h2
           class="font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-gray-900 dark:text-white mb-6"
         >
-          Rahmenbetriebsvereinbarung <span class="gradient-text">IT/KI</span>
+          {{ $t('frameworkAgreement.title', { highlight: '' })
+          }}<span class="gradient-text">{{ $t('frameworkAgreement.titleHighlight') }}</span>
         </h2>
 
         <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
-          Für den Einstieg stellen wir auf Nachfrage eine optionale Rahmenbetriebs-/Rahmendienstvereinbarung für IT- und
+          {{ $t('frameworkAgreement.description') }}
-          KI-Systeme bereit. Sie ist auf die Struktur des Tools zugeschnitten und enthält praxiserprobte
-          Regelungsbausteine.
         </p>
 
         <!-- Animated checklist -->
@@ -54,8 +53,8 @@
               <UIcon name="i-lucide-tag" class="w-5 h-5 text-white" />
             </div>
             <div>
-              <p class="text-sm text-gray-500 dark:text-gray-400">Preis</p>
+              <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('common.price') }}</p>
-              <p class="font-heading text-lg font-bold text-gray-900 dark:text-white">Auf Anfrage</p>
+              <p class="font-heading text-lg font-bold text-gray-900 dark:text-white">{{ $t('common.onRequest') }}</p>
             </div>
           </div>
         </div>
@@ -67,7 +66,7 @@
             size="xl"
             class="btn-gradient px-8 py-4 text-lg font-semibold rounded-xl shadow-lg shadow-primary-500/25"
           >
-            <span>Mehr erfahren</span>
+            <span>{{ $t('common.learnMore') }}</span>
             <UIcon name="i-lucide-arrow-right" class="w-5 h-5 ml-2" />
           </UButton>
         </div>
@@ -99,8 +98,10 @@
                     <UIcon name="i-lucide-file-text" class="w-6 h-6 text-white" />
                   </div>
                   <div>
-                    <h4 class="font-heading font-bold text-white text-lg">Rahmen-BV IT/KI</h4>
+                    <h4 class="font-heading font-bold text-white text-lg">
-                    <p class="text-sm text-white/80">Betriebsvereinbarung Vorlage</p>
+                      {{ $t('frameworkAgreement.document.title') }}
+                    </h4>
+                    <p class="text-sm text-white/80">{{ $t('frameworkAgreement.document.subtitle') }}</p>
                   </div>
                 </div>
               </div>
@@ -110,7 +111,7 @@
                 <!-- Table of contents -->
                 <div class="space-y-4">
                   <div class="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 font-semibold">
-                    Inhaltsverzeichnis
+                    {{ $t('frameworkAgreement.document.tableOfContents') }}
                   </div>
 
                   <!-- Section items with staggered animation -->
@@ -142,11 +143,13 @@
                   <div class="flex items-center justify-between">
                     <div class="flex items-center gap-2">
                       <UIcon name="i-lucide-layers" class="w-4 h-4 text-gray-400" />
-                      <span class="text-xs text-gray-500 dark:text-gray-400">12 Regelungsbausteine</span>
+                      <span class="text-xs text-gray-500 dark:text-gray-400">{{
+                        $t('frameworkAgreement.document.regulationBlocks')
+                      }}</span>
                     </div>
                     <UBadge color="success" variant="soft" size="sm">
                       <UIcon name="i-lucide-check-circle" class="w-3 h-3 mr-1" />
-                      Praxiserprobt
+                      {{ $t('frameworkAgreement.document.fieldTested') }}
                     </UBadge>
                   </div>
                 </div>
@@ -159,7 +162,7 @@
                 class="bg-gradient-to-r from-accent-500 to-violet-500 text-white px-4 py-2 rounded-full shadow-lg text-sm font-semibold flex items-center gap-2"
               >
                 <UIcon name="i-lucide-download" class="w-4 h-4" />
-                Auf Anfrage
+                {{ $t('common.onRequest') }}
               </div>
             </div>
           </div>
@@ -177,34 +180,21 @@
 </template>
 
 <script setup lang="ts">
+const { t } = useI18n()
 const isHovered = ref(false)
 
-const bulletPoints = [
+const bulletPointCount = 3
-  'Vorlage für eine Rahmen-BV/DV zu IT- und KI-Systemen',
+const bulletPoints = computed(() =>
-  'Auf die Tool-Logik und Dokumentationsstruktur zugeschnitten',
+  Array.from({ length: bulletPointCount }, (_, index) => t(`frameworkAgreement.bulletPoints[${index}]`))
-  'Enthält praxiserprobte Regelungsbausteine als Startpunkt für systembezogene Vereinbarungen'
+)
-]
 
-const documentSections = [
+const sectionIcons = ['i-lucide-target', 'i-lucide-git-branch', 'i-lucide-shield', 'i-lucide-refresh-cw']
-  {
+
-    title: 'Geltungsbereich',
+const documentSections = computed(() =>
-    description: 'Definition der betroffenen Systeme',
+  sectionIcons.map((icon, index) => ({
-    icon: 'i-lucide-target'
+    icon,
-  },
+    title: t(`frameworkAgreement.document.sections[${index}].title`),
-  {
+    description: t(`frameworkAgreement.document.sections[${index}].description`)
-    title: 'Mitbestimmungsverfahren',
+  }))
-    description: 'Prozessschritte und Zuständigkeiten',
+)
-    icon: 'i-lucide-git-branch'
-  },
-  {
-    title: 'Datenschutz & Kontrolle',
-    description: 'Schutzmaßnahmen und Auswertungen',
-    icon: 'i-lucide-shield'
-  },
-  {
-    title: 'Änderungsmanagement',
-    description: 'Updates und Erweiterungen',
-    icon: 'i-lucide-refresh-cw'
-  }
-]
 </script>

landing/app/components/landing/HeroSection.vue

@@ -39,17 +39,17 @@
               <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-400 opacity-75" />
               <span class="relative inline-flex rounded-full h-2 w-2 bg-primary-500" />
             </span>
-            Jetzt verfügbar
+            {{ $t('hero.badge') }}
           </span>
         </div>
 
         <!-- Title with gradient text -->
         <h1 class="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight mb-6">
           <span class="animate-fade-in-up block text-gray-900 dark:text-white" style="animation-delay: 100ms">
-            Digitale Mitbestimmung
+            {{ $t('hero.title1') }}
           </span>
           <span class="animate-fade-in-up block gradient-text" style="animation-delay: 200ms">
-            für IT- und KI-Systeme
+            {{ $t('hero.title2') }}
           </span>
         </h1>
 
@@ -58,7 +58,7 @@
           class="animate-fade-in-up text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-10"
           style="animation-delay: 300ms"
         >
-          {{ description }}
+          {{ $t('hero.description') }}
         </p>
 
         <!-- CTA Buttons -->
@@ -69,7 +69,7 @@
             trailing-icon="i-lucide-arrow-right"
             class="btn-gradient px-8 py-4 text-lg font-semibold rounded-xl shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 transition-all"
           >
-            <span>Demo anfragen</span>
+            <span>{{ $t('hero.cta.requestDemo') }}</span>
           </UButton>
           <UButton
             size="xl"
@@ -77,7 +77,7 @@
             variant="outline"
             class="btn-outline-gradient px-8 py-4 text-lg font-semibold rounded-xl"
           >
-            Features entdecken
+            {{ $t('hero.cta.discoverFeatures') }}
           </UButton>
         </div>
       </div>
@@ -97,8 +97,10 @@
                   <UIcon name="i-lucide-alert-triangle" class="w-5 h-5 text-white" />
                 </div>
                 <div>
-                  <p class="font-semibold text-gray-900 dark:text-white text-sm">Risikoprüfung</p>
+                  <p class="font-semibold text-gray-900 dark:text-white text-sm">
-                  <p class="text-xs text-gray-500 dark:text-gray-400">3 Punkte offen</p>
+                    {{ $t('hero.cards.riskAssessment') }}
+                  </p>
+                  <p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('hero.cards.pointsOpen') }}</p>
                 </div>
               </div>
               <div class="space-y-2">
@@ -106,19 +108,19 @@
                   <div class="w-4 h-4 rounded bg-warning-100 dark:bg-warning-900/50 flex items-center justify-center">
                     <UIcon name="i-lucide-clock" class="w-2.5 h-2.5 text-warning-600" />
                   </div>
-                  <span class="text-xs text-gray-600 dark:text-gray-300">Datenschutz-Folgenabschätzung</span>
+                  <span class="text-xs text-gray-600 dark:text-gray-300">{{ $t('hero.cards.privacyImpact') }}</span>
                 </div>
                 <div class="flex items-center gap-2">
                   <div class="w-4 h-4 rounded bg-warning-100 dark:bg-warning-900/50 flex items-center justify-center">
                     <UIcon name="i-lucide-clock" class="w-2.5 h-2.5 text-warning-600" />
                   </div>
-                  <span class="text-xs text-gray-600 dark:text-gray-300">Leistungskontrolle prüfen</span>
+                  <span class="text-xs text-gray-600 dark:text-gray-300">{{ $t('hero.cards.performanceCheck') }}</span>
                 </div>
                 <div class="flex items-center gap-2">
                   <div class="w-4 h-4 rounded bg-success-100 dark:bg-success-900/50 flex items-center justify-center">
                     <UIcon name="i-lucide-check" class="w-2.5 h-2.5 text-success-600" />
                   </div>
-                  <span class="text-xs text-gray-600 dark:text-gray-300">Zugriffsrechte definiert</span>
+                  <span class="text-xs text-gray-600 dark:text-gray-300">{{ $t('hero.cards.accessDefined') }}</span>
                 </div>
               </div>
             </div>
@@ -139,10 +141,10 @@
                   </div>
                   <div>
                     <p class="font-semibold text-gray-900 dark:text-white text-sm">Microsoft 365</p>
-                    <p class="text-xs text-gray-500 dark:text-gray-400">Betriebsvereinbarung</p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('hero.cards.operatingAgreement') }}</p>
                   </div>
                 </div>
-                <UBadge color="primary" variant="soft" size="sm">In Bearbeitung</UBadge>
+                <UBadge color="primary" variant="soft" size="sm">{{ $t('hero.cards.inProgress') }}</UBadge>
               </div>
 
               <!-- Mock content -->
@@ -150,7 +152,7 @@
                 <!-- Progress section -->
                 <div>
                   <div class="flex justify-between text-sm mb-2">
-                    <span class="text-gray-600 dark:text-gray-300 font-medium">Fortschritt</span>
+                    <span class="text-gray-600 dark:text-gray-300 font-medium">{{ $t('hero.cards.progress') }}</span>
                     <span class="text-primary-600 dark:text-primary-400 font-semibold">67%</span>
                   </div>
                   <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
@@ -165,8 +167,10 @@
                   >
                     <UIcon name="i-lucide-check-circle" class="w-5 h-5 text-success-500" />
                     <div>
-                      <p class="text-xs font-medium text-success-700 dark:text-success-300">8 Abschnitte</p>
+                      <p class="text-xs font-medium text-success-700 dark:text-success-300">
-                      <p class="text-xs text-success-600 dark:text-success-400">abgeschlossen</p>
+                        {{ $t('hero.cards.sectionsCompleted') }}
+                      </p>
+                      <p class="text-xs text-success-600 dark:text-success-400">{{ $t('hero.cards.completed') }}</p>
                     </div>
                   </div>
                   <div
@@ -174,8 +178,10 @@
                   >
                     <UIcon name="i-lucide-message-square" class="w-5 h-5 text-primary-500" />
                     <div>
-                      <p class="text-xs font-medium text-primary-700 dark:text-primary-300">4 Kommentare</p>
+                      <p class="text-xs font-medium text-primary-700 dark:text-primary-300">
-                      <p class="text-xs text-primary-600 dark:text-primary-400">neu</p>
+                        {{ $t('hero.cards.commentsNew') }}
+                      </p>
+                      <p class="text-xs text-primary-600 dark:text-primary-400">{{ $t('hero.cards.new') }}</p>
                     </div>
                   </div>
                 </div>
@@ -184,7 +190,7 @@
                 <button
                   class="w-full py-3 px-4 rounded-xl bg-gradient-to-r from-primary-500 to-cyan-500 text-white font-semibold text-sm hover:from-primary-600 hover:to-cyan-600 transition-all shadow-lg shadow-primary-500/25"
                 >
-                  Weiter bearbeiten
+                  {{ $t('hero.cards.continueEditing') }}
                 </button>
               </div>
             </div>
@@ -202,8 +208,10 @@
                   <UIcon name="i-lucide-check-circle" class="w-5 h-5 text-white" />
                 </div>
                 <div>
-                  <p class="font-semibold text-gray-900 dark:text-white text-sm">Abgeschlossen</p>
+                  <p class="font-semibold text-gray-900 dark:text-white text-sm">
-                  <p class="text-xs text-gray-500 dark:text-gray-400">Letzte Woche</p>
+                    {{ $t('hero.cards.completedTitle') }}
+                  </p>
+                  <p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('hero.cards.lastWeek') }}</p>
                 </div>
               </div>
               <div class="space-y-2">
@@ -236,8 +244,8 @@
               <UIcon name="i-lucide-sparkles" class="w-4 h-4 text-white" />
             </div>
             <div>
-              <p class="text-sm font-semibold text-gray-900 dark:text-white">BV erstellt!</p>
+              <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $t('hero.cards.bvCreated') }}</p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">Bereit zur Unterschrift</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('hero.cards.readyForSignature') }}</p>
             </div>
           </div>
         </div>
@@ -249,7 +257,7 @@
       <a
         href="#betriebsraete"
         class="flex items-center justify-center w-12 h-12 rounded-full glass text-gray-600 dark:text-gray-300 hover:bg-white/80 dark:hover:bg-gray-800/80 transition-colors"
-        aria-label="Nach unten scrollen"
+        :aria-label="$t('hero.scrollDown')"
       >
         <UIcon name="i-lucide-chevron-down" class="w-6 h-6" />
       </a>
@@ -258,6 +266,5 @@
 </template>
 
 <script setup lang="ts">
-const description =
+// No additional script needed - using $t() from i18n
-  'Struktur statt Hauruck: Alle relevanten Informationen an einem Ort, klare Prozessschritte und nachvollziehbare Dokumentation – damit Mitbestimmung schneller, belastbarer und dauerhaft updatefähig wird.'
 </script>

landing/app/components/landing/NewsletterSignup.vue

@@ -41,7 +41,8 @@
           <h2
             class="font-heading text-3xl sm:text-4xl font-bold text-center text-gray-900 dark:text-white mb-4 animate-fade-in-up"
           >
-            Bleiben Sie <span class="gradient-text">informiert</span>
+            {{ $t('newsletter.title', { highlight: '' })
+            }}<span class="gradient-text">{{ $t('newsletter.titleHighlight') }}</span>
           </h2>
 
           <!-- Description -->
@@ -49,8 +50,7 @@
             class="text-center text-lg text-gray-600 dark:text-gray-300 mb-8 animate-fade-in-up"
             style="animation-delay: 100ms"
           >
-            Erhalten Sie Updates zur Entwicklung von LegalConsentHub und seien Sie unter den Ersten, die von neuen
+            {{ $t('newsletter.description') }}
-            Funktionen erfahren.
           </p>
 
           <!-- Form -->
@@ -66,7 +66,7 @@
                 <UInput
                   v-model="formState.email"
                   type="email"
-                  placeholder="Ihre E-Mail-Adresse"
+                  :placeholder="$t('newsletter.placeholder')"
                   size="xl"
                   :disabled="isLoading || isSuccess"
                   :ui="{
@@ -89,10 +89,10 @@
               >
                 <template v-if="isSuccess">
                   <UIcon name="i-lucide-check" class="w-5 h-5 mr-2" />
-                  <span>Angemeldet!</span>
+                  <span>{{ $t('newsletter.submitted') }}</span>
                 </template>
                 <template v-else>
-                  <span>Anmelden</span>
+                  <span>{{ $t('newsletter.submit') }}</span>
                 </template>
               </UButton>
             </div>
@@ -115,7 +115,7 @@
                 <div class="w-8 h-8 rounded-full bg-success-500 flex items-center justify-center">
                   <UIcon name="i-lucide-check" class="w-5 h-5 text-white" />
                 </div>
-                <span class="font-medium">Vielen Dank! Wir halten Sie auf dem Laufenden.</span>
+                <span class="font-medium">{{ $t('newsletter.success') }}</span>
               </div>
             </div>
           </Transition>
@@ -125,11 +125,13 @@
             class="mt-6 text-sm text-center text-gray-500 dark:text-gray-400 animate-fade-in-up"
             style="animation-delay: 300ms"
           >
-            Mit der Anmeldung stimmen Sie unserer
+            <i18n-t keypath="newsletter.privacyNote" tag="span">
-            <NuxtLink to="/datenschutz" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">
+              <template #link>
-              Datenschutzerklärung
+                <NuxtLink to="/datenschutz" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">
-            </NuxtLink>
+                  {{ $t('newsletter.privacyLink') }}
-            zu. Wir versenden keinen Spam.
+                </NuxtLink>
+              </template>
+            </i18n-t>
           </p>
 
           <!-- Trust indicators -->
@@ -141,19 +143,19 @@
               <div class="w-6 h-6 rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
                 <UIcon name="i-lucide-shield-check" class="w-3.5 h-3.5 text-success-600 dark:text-success-400" />
               </div>
-              <span>DSGVO-konform</span>
+              <span>{{ $t('newsletter.trust.gdpr') }}</span>
             </div>
             <div class="flex items-center gap-2 text-gray-600 dark:text-gray-300">
               <div class="w-6 h-6 rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
                 <UIcon name="i-lucide-lock" class="w-3.5 h-3.5 text-success-600 dark:text-success-400" />
               </div>
-              <span>Verschlüsselt</span>
+              <span>{{ $t('newsletter.trust.encrypted') }}</span>
             </div>
             <div class="flex items-center gap-2 text-gray-600 dark:text-gray-300">
               <div class="w-6 h-6 rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
                 <UIcon name="i-lucide-x-circle" class="w-3.5 h-3.5 text-success-600 dark:text-success-400" />
               </div>
-              <span>Kein Spam</span>
+              <span>{{ $t('newsletter.trust.noSpam') }}</span>
             </div>
           </div>
         </div>
@@ -166,22 +168,20 @@
 import { z } from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
+const { t } = useI18n()
 const { isLoading, isSuccess, submitEmail } = useNewsletterSignup()
 
-const schema = z.object({
+const schema = computed(() =>
-  email: z
+  z.object({
-    .string()
+    email: z.string().min(1, t('newsletter.validation.required')).email(t('newsletter.validation.invalid'))
-    .min(1, 'Bitte geben Sie eine E-Mail-Adresse ein')
+  })
-    .email('Bitte geben Sie eine gültige E-Mail-Adresse ein')
+)
-})
 
-type Schema = z.output<typeof schema>
+const formState = reactive<{ email: string }>({
-
-const formState = reactive<Partial<Schema>>({
   email: ''
 })
 
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<{ email: string }>) {
   await submitEmail(event.data.email)
 }
 </script>

landing/app/components/landing/StatsSection.vue

@@ -29,7 +29,7 @@
 
       <!-- Trust badges -->
       <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-800">
-        <p class="text-center text-sm text-gray-500 dark:text-gray-400 mb-8">Vertrauen & Sicherheit</p>
+        <p class="text-center text-sm text-gray-500 dark:text-gray-400 mb-8">{{ $t('stats.trustAndSecurity') }}</p>
 
         <div class="flex flex-wrap justify-center items-center gap-8 lg:gap-12">
           <div
@@ -52,22 +52,24 @@
 </template>
 
 <script setup lang="ts">
-const stats = [
+const { t } = useI18n()
-  { value: 70, suffix: '%', label: 'Zeitersparnis im Verfahren' },
-  { value: 100, suffix: '%', label: 'Revisionssicher dokumentiert' },
-  { value: 24, suffix: '/7', label: 'Verfügbarkeit' },
-  { value: 0, suffix: '', label: 'Medienbrüche' }
-]
 
-const trustBadges = [
+const stats = computed(() => [
-  { icon: 'i-lucide-shield-check', label: 'DSGVO-konform' },
+  { value: 70, suffix: '%', label: t('stats.timeSaved') },
-  { icon: 'i-lucide-server', label: 'Hosting in Deutschland' },
+  { value: 100, suffix: '%', label: t('stats.auditProof') },
-  { icon: 'i-lucide-lock', label: 'Ende-zu-Ende verschlüsselt' },
+  { value: 24, suffix: '/7', label: t('stats.availability') },
-  { icon: 'i-lucide-key', label: 'SSO-fähig' }
+  { value: 0, suffix: '', label: t('stats.mediaBreaks') }
-]
+])
+
+const trustBadges = computed(() => [
+  { icon: 'i-lucide-shield-check', label: t('stats.badges.gdpr') },
+  { icon: 'i-lucide-server', label: t('stats.badges.hosting') },
+  { icon: 'i-lucide-lock', label: t('stats.badges.encrypted') },
+  { icon: 'i-lucide-key', label: t('stats.badges.sso') }
+])
 
 // Animated counter values
-const animatedValues = ref(stats.map(() => 0))
+const animatedValues = ref(stats.value.map(() => 0))
 const hasAnimated = ref(false)
 
 // Counter animation function
@@ -99,7 +101,7 @@ onMounted(() => {
       entries.forEach((entry) => {
         if (entry.isIntersecting && !hasAnimated.value) {
           hasAnimated.value = true
-          stats.forEach((stat, index) => {
+          stats.value.forEach((stat, index) => {
             setTimeout(() => {
               animateCounter(index, stat.value)
             }, index * 200)

landing/app/composables/useNewsletterSignup.ts

@@ -1,4 +1,5 @@
 export function useNewsletterSignup() {
+  const { t } = useI18n()
   const isLoading = ref(false)
   const isSuccess = ref(false)
   const error = ref<string | null>(null)
@@ -20,7 +21,7 @@ export function useNewsletterSignup() {
 
       isSuccess.value = true
     } catch (e: unknown) {
-      error.value = e instanceof Error ? e.message : 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.'
+      error.value = e instanceof Error ? e.message : t('errors.generic')
       throw e
     } finally {
       isLoading.value = false

landing/app/pages/index.vue

@@ -30,13 +30,14 @@
 </template>
 
 <script setup lang="ts">
+const { t, locale } = useI18n()
+
 // SEO Meta
 useSeoMeta({
-  title: 'LegalConsentHub - Digitale Mitbestimmung für IT- und KI-Systeme',
+  title: () => t('meta.title'),
-  description:
+  description: () => t('meta.description'),
-    'Struktur statt Hauruck: Alle relevanten Informationen an einem Ort, klare Prozessschritte und nachvollziehbare Dokumentation – damit Mitbestimmung schneller, belastbarer und dauerhaft updatefähig wird.',
+  ogTitle: () => t('meta.title'),
-  ogTitle: 'LegalConsentHub - Digitale Mitbestimmung für IT- und KI-Systeme',
+  ogDescription: () => t('meta.ogDescription'),
-  ogDescription: 'Strukturierte IT-Mitbestimmung mit klaren Prozessen und revisionssicherer Dokumentation.',
   ogImage: '/og-image.png',
   ogType: 'website',
   twitterCard: 'summary_large_image'
@@ -44,6 +45,9 @@ useSeoMeta({
 
 // Structured data for SEO
 useHead({
+  htmlAttrs: {
+    lang: () => locale.value
+  },
   script: [
     {
       type: 'application/ld+json',
@@ -53,20 +57,19 @@ useHead({
         name: 'LegalConsentHub',
         applicationCategory: 'BusinessApplication',
         operatingSystem: 'Web',
-        description:
+        description: t('meta.description'),
-          'Digitale Mitbestimmung für IT- und KI-Systeme. Strukturierte Eingabelogik, klare Prozesse und revisionssichere Dokumentation.',
         offers: {
           '@type': 'Offer',
           price: '0',
           priceCurrency: 'EUR',
-          description: 'Kontaktieren Sie uns für Preisdetails'
+          description: t('common.onRequest')
         },
         featureList: [
-          'Geführter Mitbestimmungsprozess',
+          t('features.items[0].title'),
-          'Risikobasierter Assistent',
+          t('features.items[1].title'),
-          'Versionierung & Audit-Trail',
+          t('features.items[3].title'),
-          'Automatische BV-/DV-Generierung',
+          t('features.items[5].title'),
-          'SSO & Governance'
+          t('features.items[8].title')
         ]
       })
     }

landing/i18n/locales/de.json

@@ -0,0 +1,328 @@
+{
+  "meta": {
+    "title": "LegalConsentHub - Digitale Mitbestimmung für IT- und KI-Systeme",
+    "description": "Struktur statt Hauruck: Alle relevanten Informationen an einem Ort, klare Prozessschritte und nachvollziehbare Dokumentation für IT-Mitbestimmung.",
+    "ogDescription": "Strukturierte IT-Mitbestimmung mit klaren Prozessen und revisionssicherer Dokumentation."
+  },
+  "common": {
+    "skipToContent": "Zum Hauptinhalt springen",
+    "stayInformed": "Informiert bleiben",
+    "learnMore": "Mehr erfahren",
+    "contact": "Kontakt aufnehmen",
+    "features": "Features",
+    "navigation": "Navigation",
+    "legal": "Rechtliches",
+    "allRightsReserved": "Alle Rechte vorbehalten",
+    "hostedInGermany": "Hosted in Germany",
+    "gdprCompliant": "DSGVO-konform",
+    "price": "Preis",
+    "onRequest": "Auf Anfrage"
+  },
+  "nav": {
+    "forWorksCouncils": "Für Betriebsräte",
+    "forCompanies": "Für Unternehmen",
+    "features": "Features",
+    "contact": "Kontakt"
+  },
+  "footer": {
+    "brandDescription": "Digitale Mitbestimmung für IT- und KI-Systeme. Strukturierte Prozesse, revisionssichere Dokumentation.",
+    "imprint": "Impressum",
+    "privacy": "Datenschutz",
+    "terms": "AGB"
+  },
+  "hero": {
+    "badge": "Jetzt verfügbar",
+    "title1": "Digitale Mitbestimmung",
+    "title2": "für IT- und KI-Systeme",
+    "description": "Struktur statt Hauruck: Alle relevanten Informationen an einem Ort, klare Prozessschritte und nachvollziehbare Dokumentation – damit Mitbestimmung schneller, belastbarer und dauerhaft updatefähig wird.",
+    "cta": {
+      "requestDemo": "Demo anfragen",
+      "discoverFeatures": "Features entdecken"
+    },
+    "cards": {
+      "riskAssessment": "Risikoprüfung",
+      "pointsOpen": "3 Punkte offen",
+      "privacyImpact": "Datenschutz-Folgenabschätzung",
+      "performanceCheck": "Leistungskontrolle prüfen",
+      "accessDefined": "Zugriffsrechte definiert",
+      "operatingAgreement": "Betriebsvereinbarung",
+      "inProgress": "In Bearbeitung",
+      "progress": "Fortschritt",
+      "sectionsCompleted": "8 Abschnitte",
+      "completed": "abgeschlossen",
+      "commentsNew": "4 Kommentare",
+      "new": "neu",
+      "continueEditing": "Weiter bearbeiten",
+      "completedTitle": "Abgeschlossen",
+      "lastWeek": "Letzte Woche",
+      "bvCreated": "BV erstellt!",
+      "readyForSignature": "Bereit zur Unterschrift"
+    },
+    "scrollDown": "Nach unten scrollen"
+  },
+  "stats": {
+    "timeSaved": "Zeitersparnis im Verfahren",
+    "auditProof": "Revisionssicher dokumentiert",
+    "availability": "Verfügbarkeit",
+    "mediaBreaks": "Medienbrüche",
+    "trustAndSecurity": "Vertrauen & Sicherheit",
+    "badges": {
+      "gdpr": "DSGVO-konform",
+      "hosting": "Hosting in Deutschland",
+      "encrypted": "Ende-zu-Ende verschlüsselt",
+      "sso": "SSO-fähig"
+    }
+  },
+  "worksCouncil": {
+    "badge": "Für Betriebsräte",
+    "title": "Vorteile für {highlight}",
+    "titleHighlight": "Betriebsräte",
+    "description": "Weg von Informationsjagd und Blackbox-Systemen – hin zu Transparenz und belastbaren Vereinbarungen.",
+    "tabs": {
+      "awayFrom": "Weg von",
+      "towards": "Hin zu"
+    },
+    "painPoints": [
+      "Informationen zu IT-/KI-Systemen mühsam zusammensuchen (E-Mails, PDFs, PowerPoint, Excel-Chaos)",
+      "Medienbrüche, Versionschaos und wiederkehrende Rückfragen",
+      "Ad-hoc-Systemeinführungen unter Zeitdruck (\"Hauruck\" statt Prozess)",
+      "Überforderung durch Menge und Komplexität der Systeme",
+      "Blackbox bei Funktionen, Auswertungen, Schnittstellen und Änderungen",
+      "Verhandlungen ohne belastbare Datenbasis",
+      "Heute geregelt, morgen veraltet"
+    ],
+    "benefits": [
+      "Strukturierte, vollständige Informationsgrundlage (einheitlich je System/Verarbeitung)",
+      "Klarer Mitbestimmungsprozess mit bewährten Schritten und Zuständigkeiten",
+      "Betriebs-/Dienstvereinbarungen auf belastbarer Grundlage – schneller, konsistenter, leicht aktualisierbar",
+      "Transparenz über Systemfähigkeiten – inkl. möglicher Leistungs-/Verhaltenskontrolle",
+      "Vergleichbarkeit über viele Systeme hinweg durch Standardisierung und einheitliche Templates",
+      "Große Zeitersparnis gegenüber konventionellem Verfahren",
+      "Schutzmaßnahmen konsequent dokumentiert und pro Auswertung/Verarbeitung nachvollziehbar",
+      "Spürbare Entlastung: mehr Zeit für andere Mitbestimmungsthemen und kontinuierlichen Arbeitnehmerschutz"
+    ],
+    "highlightsTitle": "So hilft es im {highlight}",
+    "highlightsTitleHighlight": "Alltag",
+    "highlights": [
+      {
+        "title": "Schneller prüfen",
+        "description": "Relevante Funktionen und Risiken sind auf einen Blick sichtbar."
+      },
+      {
+        "title": "Besser verhandeln",
+        "description": "Klare, konsistente Unterlagen statt Interpretationsspielräumen."
+      },
+      {
+        "title": "Nachhaltig absichern",
+        "description": "Änderungen und neue Auswertungen lassen sich strukturiert nachziehen."
+      }
+    ]
+  },
+  "company": {
+    "badge": "Für Unternehmen",
+    "title": "Vorteile für {highlight}",
+    "titleHighlight": "Unternehmen",
+    "description": "Schneller zur abgestimmten Einführung von IT- und KI-Systemen mit planbaren Timelines.",
+    "awayFrom": {
+      "title": "Weg von",
+      "subtitle": "Typische Herausforderungen"
+    },
+    "towards": {
+      "title": "Hin zu",
+      "subtitle": "Mit LegalConsentHub"
+    },
+    "painPoints": [
+      "Unkalkulierbare Schleifen im Mitbestimmungsverfahren (fehlende Infos, Nachforderungen)",
+      "Verzögerungen, Projektstopps und Last-Minute-Änderungen kurz vor Go-live",
+      "Hoher Koordinationsaufwand (E-Mail/Excel/Word) und Versionschaos",
+      "Komplexität und Reibung durch uneinheitliche Prozesse und unterschiedliche Erwartungshaltungen",
+      "Unklarer Änderungsumfang bei Updates/Modulerweiterungen",
+      "Verlust wertvoller Zeit und begrenzter Ressourcen",
+      "Vermeidbare Kosten (Einigungsstelle, externe Beratung, Eskalationen)"
+    ],
+    "benefits": [
+      "Planbare, schnellere Verfahren durch Standardisierung & klare Prozessschritte",
+      "Bessere Zusammenarbeit mit BR/PR durch Transparenz und nachvollziehbare Dokumentation",
+      "Risikobasierter Ansatz: Schnellverfahren für Standard-/Low-Risk-Systeme, Fokus auf High-Risk",
+      "Höhere Einigungswahrscheinlichkeit, weil die Verhandlungsgrundlage strukturiert ist",
+      "Qualitativ konsistente, robuste Betriebs-/Dienstvereinbarungen (auch bei Änderungen updatefähig)",
+      "Entlastung von Fachbereichen/IT/HR – mehr Zeit für Wertschöpfung"
+    ],
+    "highlightsTitle": "So wirkt es in der {highlight}",
+    "highlightsTitleHighlight": "Praxis",
+    "highlights": [
+      {
+        "title": "Weniger Iterationen",
+        "description": "Unterlagen sind vollständig und vergleichbar – Nachforderungen sinken."
+      },
+      {
+        "title": "Schneller zur Freigabe",
+        "description": "Klare Schritte statt \"Hauruck\" und kurzfristiger Umplanungen."
+      },
+      {
+        "title": "Change-ready",
+        "description": "Updates, neue Module oder neue Auswertungen werden strukturiert nachgezogen, ohne jedes Mal neu zu starten."
+      }
+    ]
+  },
+  "features": {
+    "badge": "Features",
+    "title": "Features, die Mitbestimmung {highlight} machen",
+    "titleHighlight": "effizient",
+    "description": "Eine strukturierte Eingabelogik, klare Prozesse und revisionssichere Dokumentation – damit IT-/KI-Systeme schneller bewertet, abgestimmt und sauber vereinbart werden können.",
+    "items": [
+      {
+        "title": "Geführter Mitbestimmungsprozess",
+        "description": "Vorgegebene, erweiterbare Eingabeparameter strukturieren den gesamten Ablauf – von der Systembeschreibung bis zur Vereinbarung."
+      },
+      {
+        "title": "Risikobasierter Assistent",
+        "description": "Ein regelbasierter, risikoorientierter Assistent passt die Eingabemaske an Komplexität, Umfang und Potenziale zur Leistungs-/Verhaltensauswertung an."
+      },
+      {
+        "title": "Ampelsystem & Direktfeedback",
+        "description": "Kritikalität wird transparent bewertet und direkt beim Ausfüllen zurückgespielt – für schnelle Orientierung und weniger Schleifen."
+      },
+      {
+        "title": "Versionierung & Audit-Trail",
+        "description": "Änderungen werden versioniert und lückenlos nachvollziehbar dokumentiert – inklusive Historie und Vergleich."
+      },
+      {
+        "title": "Zusammenarbeit per Kommentaren",
+        "description": "Inline-Kommentare ermöglichen Abstimmung direkt an einzelnen Inhalten – ohne Medienbrüche."
+      },
+      {
+        "title": "Automatische BV-/DV-Generierung",
+        "description": "Nach Abschluss der Eingaben erzeugt das System strukturierte, übersichtliche und signaturbereite Betriebs-/Dienstvereinbarungen."
+      },
+      {
+        "title": "Signaturfähig mit QES (eIDAS)",
+        "description": "Optional rechtsverbindliche Unterzeichnung per qualifizierter elektronischer Signatur nach eIDAS."
+      },
+      {
+        "title": "Benachrichtigungen & News-Center",
+        "description": "Aktuell bleiben über Status-Updates, Änderungen und Aufgaben – per Nachrichten-Center und E-Mail."
+      },
+      {
+        "title": "SSO & Governance",
+        "description": "SSO-Integration via SAML oder OIDC sowie ein umfangreich konfigurierbares Rollen- und Berechtigungskonzept."
+      }
+    ]
+  },
+  "additionalFeatures": {
+    "badge": "Vertrauen & Sicherheit",
+    "title": "Weitere {highlight}",
+    "titleHighlight": "Vorteile",
+    "description": "Alles aus einer Hand – ohne Drittanbieter, mit Serverstandort in Deutschland.",
+    "items": [
+      {
+        "title": "Keine Zusatztools erforderlich",
+        "description": "Keine externen Zusatzlösungen für Prozess, Abstimmung und Dokumentenerstellung – alles läuft in einem System."
+      },
+      {
+        "title": "Hosting & Backups in Deutschland",
+        "description": "Betrieb und Datensicherung erfolgen in Deutschland – transparente Datenflüsse ohne unerwartete Auslandsverarbeitung."
+      },
+      {
+        "title": "Verschlüsselte Übertragung",
+        "description": "Alle Verbindungen sind per TLS/HTTPS verschlüsselt, damit Inhalte und Zugangsdaten beim Transport geschützt sind."
+      },
+      {
+        "title": "Einfach zu bedienen",
+        "description": "Nutzerfreundliche, selbsterklärende Oberfläche mit geführten Eingaben – reduziert Schulungsaufwand."
+      },
+      {
+        "title": "Hohe Anpassbarkeit",
+        "description": "Templates, Felder und Prozessschritte lassen sich auf Organisation und Abläufe konkret anpassen (auf Anfrage)."
+      },
+      {
+        "title": "Persönlicher Support",
+        "description": "Bei Fragen steht Ihnen unser Support-Team zur Verfügung – schnell, kompetent und auf Deutsch."
+      }
+    ],
+    "ctaQuestion": "Haben Sie Fragen zu unseren Sicherheitsstandards?",
+    "ctaButton": "Kontakt aufnehmen"
+  },
+  "frameworkAgreement": {
+    "badge": "Optional verfügbar",
+    "title": "Rahmenbetriebsvereinbarung {highlight}",
+    "titleHighlight": "IT/KI",
+    "description": "Für den Einstieg stellen wir auf Nachfrage eine optionale Rahmenbetriebs-/Rahmendienstvereinbarung für IT- und KI-Systeme bereit. Sie ist auf die Struktur des Tools zugeschnitten und enthält praxiserprobte Regelungsbausteine.",
+    "bulletPoints": [
+      "Vorlage für eine Rahmen-BV/DV zu IT- und KI-Systemen",
+      "Auf die Tool-Logik und Dokumentationsstruktur zugeschnitten",
+      "Enthält praxiserprobte Regelungsbausteine als Startpunkt für systembezogene Vereinbarungen"
+    ],
+    "document": {
+      "title": "Rahmen-BV IT/KI",
+      "subtitle": "Betriebsvereinbarung Vorlage",
+      "tableOfContents": "Inhaltsverzeichnis",
+      "sections": [
+        {
+          "title": "Geltungsbereich",
+          "description": "Definition der betroffenen Systeme"
+        },
+        {
+          "title": "Mitbestimmungsverfahren",
+          "description": "Prozessschritte und Zuständigkeiten"
+        },
+        {
+          "title": "Datenschutz & Kontrolle",
+          "description": "Schutzmaßnahmen und Auswertungen"
+        },
+        {
+          "title": "Änderungsmanagement",
+          "description": "Updates und Erweiterungen"
+        }
+      ],
+      "regulationBlocks": "12 Regelungsbausteine",
+      "fieldTested": "Praxiserprobt"
+    }
+  },
+  "newsletter": {
+    "title": "Bleiben Sie {highlight}",
+    "titleHighlight": "informiert",
+    "description": "Erhalten Sie Updates zur Entwicklung von LegalConsentHub und seien Sie unter den Ersten, die von neuen Funktionen erfahren.",
+    "placeholder": "Ihre E-Mail-Adresse",
+    "submit": "Anmelden",
+    "submitted": "Angemeldet!",
+    "success": "Vielen Dank! Wir halten Sie auf dem Laufenden.",
+    "privacyNote": "Mit der Anmeldung stimmen Sie unserer {link} zu. Wir versenden keinen Spam.",
+    "privacyLink": "Datenschutzerklärung",
+    "validation": {
+      "required": "Bitte geben Sie eine E-Mail-Adresse ein",
+      "invalid": "Bitte geben Sie eine gültige E-Mail-Adresse ein"
+    },
+    "trust": {
+      "gdpr": "DSGVO-konform",
+      "encrypted": "Verschlüsselt",
+      "noSpam": "Kein Spam"
+    }
+  },
+  "expertAccess": {
+    "badge": "Expertennetzwerk",
+    "title": "Externer Sachverstand – direkt aus dem Verfahren",
+    "description": "Wenn Betriebsparteien bei einzelnen Fragen nicht weiterkommen, kann optional externer Sachverstand direkt im System angefragt werden. Anfragen, Rückfragen und Ergebnisse bleiben nachvollziehbar dokumentiert.",
+    "cta": {
+      "contact": "Kontakt aufnehmen",
+      "learnMore": "Mehr erfahren"
+    },
+    "experts": {
+      "labor": {
+        "title": "Arbeitsrecht",
+        "description": "Fachanwälte für Arbeitsrecht"
+      },
+      "technical": {
+        "title": "Technik",
+        "description": "IT-Sachverständige"
+      },
+      "process": {
+        "title": "Direkt im Verfahren",
+        "description": "Dokumentiert & nachvollziehbar"
+      }
+    }
+  },
+  "errors": {
+    "generic": "Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut."
+  }
+}

landing/i18n/locales/en.json

@@ -0,0 +1,328 @@
+{
+  "meta": {
+    "title": "LegalConsentHub - Digital Co-determination for IT and AI Systems",
+    "description": "Structure instead of chaos: All relevant information in one place, clear process steps and traceable documentation for IT co-determination.",
+    "ogDescription": "Structured IT co-determination with clear processes and audit-proof documentation."
+  },
+  "common": {
+    "skipToContent": "Skip to main content",
+    "stayInformed": "Stay informed",
+    "learnMore": "Learn more",
+    "contact": "Contact us",
+    "features": "Features",
+    "navigation": "Navigation",
+    "legal": "Legal",
+    "allRightsReserved": "All rights reserved",
+    "hostedInGermany": "Hosted in Germany",
+    "gdprCompliant": "GDPR compliant",
+    "price": "Price",
+    "onRequest": "On request"
+  },
+  "nav": {
+    "forWorksCouncils": "For Works Councils",
+    "forCompanies": "For Companies",
+    "features": "Features",
+    "contact": "Contact"
+  },
+  "footer": {
+    "brandDescription": "Digital co-determination for IT and AI systems. Structured processes, audit-proof documentation.",
+    "imprint": "Imprint",
+    "privacy": "Privacy Policy",
+    "terms": "Terms & Conditions"
+  },
+  "hero": {
+    "badge": "Available now",
+    "title1": "Digital Co-determination",
+    "title2": "for IT and AI Systems",
+    "description": "Structure instead of chaos: All relevant information in one place, clear process steps and traceable documentation – making co-determination faster, more robust and continuously updatable.",
+    "cta": {
+      "requestDemo": "Request demo",
+      "discoverFeatures": "Discover features"
+    },
+    "cards": {
+      "riskAssessment": "Risk Assessment",
+      "pointsOpen": "3 points open",
+      "privacyImpact": "Privacy impact assessment",
+      "performanceCheck": "Check performance monitoring",
+      "accessDefined": "Access rights defined",
+      "operatingAgreement": "Operating Agreement",
+      "inProgress": "In Progress",
+      "progress": "Progress",
+      "sectionsCompleted": "8 sections",
+      "completed": "completed",
+      "commentsNew": "4 comments",
+      "new": "new",
+      "continueEditing": "Continue editing",
+      "completedTitle": "Completed",
+      "lastWeek": "Last week",
+      "bvCreated": "Agreement created!",
+      "readyForSignature": "Ready for signature"
+    },
+    "scrollDown": "Scroll down"
+  },
+  "stats": {
+    "timeSaved": "Time saved in process",
+    "auditProof": "Audit-proof documented",
+    "availability": "Availability",
+    "mediaBreaks": "Media breaks",
+    "trustAndSecurity": "Trust & Security",
+    "badges": {
+      "gdpr": "GDPR compliant",
+      "hosting": "Hosting in Germany",
+      "encrypted": "End-to-end encrypted",
+      "sso": "SSO capable"
+    }
+  },
+  "worksCouncil": {
+    "badge": "For Works Councils",
+    "title": "Benefits for {highlight}",
+    "titleHighlight": "Works Councils",
+    "description": "Away from information hunting and black-box systems – towards transparency and robust agreements.",
+    "tabs": {
+      "awayFrom": "Away from",
+      "towards": "Towards"
+    },
+    "painPoints": [
+      "Laboriously gathering information on IT/AI systems (emails, PDFs, PowerPoint, Excel chaos)",
+      "Media breaks, version chaos and recurring inquiries",
+      "Ad-hoc system introductions under time pressure (chaos instead of process)",
+      "Overwhelm due to the volume and complexity of systems",
+      "Black box for functions, evaluations, interfaces and changes",
+      "Negotiations without reliable data basis",
+      "Regulated today, outdated tomorrow"
+    ],
+    "benefits": [
+      "Structured, complete information basis (uniform per system/processing)",
+      "Clear co-determination process with proven steps and responsibilities",
+      "Operating/service agreements on a solid basis – faster, more consistent, easily updatable",
+      "Transparency about system capabilities – including potential performance/behavior monitoring",
+      "Comparability across many systems through standardization and uniform templates",
+      "Significant time savings compared to conventional procedures",
+      "Protective measures consistently documented and traceable per evaluation/processing",
+      "Noticeable relief: more time for other co-determination topics and continuous employee protection"
+    ],
+    "highlightsTitle": "How it helps in {highlight}",
+    "highlightsTitleHighlight": "daily work",
+    "highlights": [
+      {
+        "title": "Review faster",
+        "description": "Relevant functions and risks are visible at a glance."
+      },
+      {
+        "title": "Negotiate better",
+        "description": "Clear, consistent documentation instead of room for interpretation."
+      },
+      {
+        "title": "Secure sustainably",
+        "description": "Changes and new evaluations can be tracked in a structured way."
+      }
+    ]
+  },
+  "company": {
+    "badge": "For Companies",
+    "title": "Benefits for {highlight}",
+    "titleHighlight": "Companies",
+    "description": "Faster to agreed IT and AI system implementation with predictable timelines.",
+    "awayFrom": {
+      "title": "Away from",
+      "subtitle": "Typical challenges"
+    },
+    "towards": {
+      "title": "Towards",
+      "subtitle": "With LegalConsentHub"
+    },
+    "painPoints": [
+      "Unpredictable loops in the co-determination process (missing info, follow-up requests)",
+      "Delays, project stops and last-minute changes shortly before go-live",
+      "High coordination effort (email/Excel/Word) and version chaos",
+      "Complexity and friction due to inconsistent processes and different expectations",
+      "Unclear scope of changes for updates/module extensions",
+      "Loss of valuable time and limited resources",
+      "Avoidable costs (arbitration, external consulting, escalations)"
+    ],
+    "benefits": [
+      "Plannable, faster procedures through standardization & clear process steps",
+      "Better collaboration with works councils through transparency and traceable documentation",
+      "Risk-based approach: fast-track for standard/low-risk systems, focus on high-risk",
+      "Higher probability of agreement because the negotiation basis is structured",
+      "Qualitatively consistent, robust operating agreements (also updatable when changes occur)",
+      "Relief for departments/IT/HR – more time for value creation"
+    ],
+    "highlightsTitle": "How it works in {highlight}",
+    "highlightsTitleHighlight": "practice",
+    "highlights": [
+      {
+        "title": "Fewer iterations",
+        "description": "Documents are complete and comparable – follow-up requests decrease."
+      },
+      {
+        "title": "Faster to approval",
+        "description": "Clear steps instead of chaos and short-term rescheduling."
+      },
+      {
+        "title": "Change-ready",
+        "description": "Updates, new modules or new evaluations are structurally tracked without starting from scratch each time."
+      }
+    ]
+  },
+  "features": {
+    "badge": "Features",
+    "title": "Features that make co-determination {highlight}",
+    "titleHighlight": "efficient",
+    "description": "A structured input logic, clear processes and audit-proof documentation – so IT/AI systems can be evaluated, coordinated and properly agreed upon faster.",
+    "items": [
+      {
+        "title": "Guided Co-determination Process",
+        "description": "Predefined, extensible input parameters structure the entire workflow – from system description to agreement."
+      },
+      {
+        "title": "Risk-based Assistant",
+        "description": "A rule-based, risk-oriented assistant adapts the input form to complexity, scope and potential for performance/behavior evaluation."
+      },
+      {
+        "title": "Traffic Light System & Direct Feedback",
+        "description": "Criticality is transparently assessed and fed back directly during completion – for quick orientation and fewer loops."
+      },
+      {
+        "title": "Versioning & Audit Trail",
+        "description": "Changes are versioned and documented traceably without gaps – including history and comparison."
+      },
+      {
+        "title": "Collaboration via Comments",
+        "description": "Inline comments enable coordination directly on individual content – without media breaks."
+      },
+      {
+        "title": "Automatic Agreement Generation",
+        "description": "After completing the inputs, the system generates structured, clear and signature-ready operating agreements."
+      },
+      {
+        "title": "Signature-ready with QES (eIDAS)",
+        "description": "Optionally legally binding signing via qualified electronic signature according to eIDAS."
+      },
+      {
+        "title": "Notifications & News Center",
+        "description": "Stay current on status updates, changes and tasks – via news center and email."
+      },
+      {
+        "title": "SSO & Governance",
+        "description": "SSO integration via SAML or OIDC as well as an extensively configurable role and permission concept."
+      }
+    ]
+  },
+  "additionalFeatures": {
+    "badge": "Trust & Security",
+    "title": "Additional {highlight}",
+    "titleHighlight": "Benefits",
+    "description": "Everything from one source – without third-party providers, with server location in Germany.",
+    "items": [
+      {
+        "title": "No Additional Tools Required",
+        "description": "No external additional solutions for process, coordination and document creation – everything runs in one system."
+      },
+      {
+        "title": "Hosting & Backups in Germany",
+        "description": "Operations and data backup take place in Germany – transparent data flows without unexpected foreign processing."
+      },
+      {
+        "title": "Encrypted Transmission",
+        "description": "All connections are encrypted via TLS/HTTPS, so content and credentials are protected during transport."
+      },
+      {
+        "title": "Easy to Use",
+        "description": "User-friendly, self-explanatory interface with guided inputs – reduces training effort."
+      },
+      {
+        "title": "Highly Customizable",
+        "description": "Templates, fields and process steps can be specifically adapted to organization and workflows (on request)."
+      },
+      {
+        "title": "Personal Support",
+        "description": "Our support team is available for questions – fast, competent and in German."
+      }
+    ],
+    "ctaQuestion": "Do you have questions about our security standards?",
+    "ctaButton": "Contact us"
+  },
+  "frameworkAgreement": {
+    "badge": "Optionally available",
+    "title": "Framework Operating Agreement {highlight}",
+    "titleHighlight": "IT/AI",
+    "description": "For getting started, we provide on request an optional framework operating/service agreement for IT and AI systems. It is tailored to the structure of the tool and contains field-tested regulation building blocks.",
+    "bulletPoints": [
+      "Template for a framework operating agreement for IT and AI systems",
+      "Tailored to the tool logic and documentation structure",
+      "Contains field-tested regulation building blocks as a starting point for system-specific agreements"
+    ],
+    "document": {
+      "title": "Framework Agreement IT/AI",
+      "subtitle": "Operating Agreement Template",
+      "tableOfContents": "Table of Contents",
+      "sections": [
+        {
+          "title": "Scope",
+          "description": "Definition of affected systems"
+        },
+        {
+          "title": "Co-determination Process",
+          "description": "Process steps and responsibilities"
+        },
+        {
+          "title": "Data Protection & Control",
+          "description": "Protective measures and evaluations"
+        },
+        {
+          "title": "Change Management",
+          "description": "Updates and extensions"
+        }
+      ],
+      "regulationBlocks": "12 regulation blocks",
+      "fieldTested": "Field-tested"
+    }
+  },
+  "newsletter": {
+    "title": "Stay {highlight}",
+    "titleHighlight": "informed",
+    "description": "Receive updates on the development of LegalConsentHub and be among the first to learn about new features.",
+    "placeholder": "Your email address",
+    "submit": "Subscribe",
+    "submitted": "Subscribed!",
+    "success": "Thank you! We'll keep you updated.",
+    "privacyNote": "By subscribing, you agree to our {link}. We don't send spam.",
+    "privacyLink": "Privacy Policy",
+    "validation": {
+      "required": "Please enter an email address",
+      "invalid": "Please enter a valid email address"
+    },
+    "trust": {
+      "gdpr": "GDPR compliant",
+      "encrypted": "Encrypted",
+      "noSpam": "No spam"
+    }
+  },
+  "expertAccess": {
+    "badge": "Expert Network",
+    "title": "External Expertise – Directly from the Process",
+    "description": "When parties cannot resolve certain questions, external expertise can optionally be requested directly in the system. Requests, follow-ups and results remain traceably documented.",
+    "cta": {
+      "contact": "Contact us",
+      "learnMore": "Learn more"
+    },
+    "experts": {
+      "labor": {
+        "title": "Labor Law",
+        "description": "Specialized labor lawyers"
+      },
+      "technical": {
+        "title": "Technology",
+        "description": "IT experts"
+      },
+      "process": {
+        "title": "Directly in Process",
+        "description": "Documented & traceable"
+      }
+    }
+  },
+  "errors": {
+    "generic": "An error occurred. Please try again later."
+  }
+}

landing/nuxt.config.ts

@@ -1,6 +1,6 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
-  modules: ['@nuxt/ui', '@nuxt/eslint', '@nuxt/fonts'],
+  modules: ['@nuxt/ui', '@nuxt/eslint', '@nuxt/fonts', '@nuxtjs/i18n'],
   css: ['~/assets/css/main.css'],
   devtools: { enabled: true },
 
@@ -23,12 +23,19 @@ export default defineNuxtConfig({
     ]
   },
 
+  // i18n configuration
+  i18n: {
+    defaultLocale: 'de',
+    strategy: 'no_prefix',
+    locales: [
+      { code: 'en', name: 'English', file: 'en.json' },
+      { code: 'de', name: 'Deutsch', file: 'de.json' }
+    ]
+  },
+
   // App configuration
   app: {
     head: {
-      htmlAttrs: {
-        lang: 'de'
-      },
       title: 'LegalConsentHub - Digitale Mitbestimmung für IT- und KI-Systeme',
       meta: [
         {

landing/package.json

@@ -16,13 +16,14 @@
   },
   "dependencies": {
     "@nuxt/eslint": "1.12.1",
-    "@nuxt/fonts": "^0.12.1",
+    "@nuxt/fonts": "0.12.1",
     "@nuxt/ui": "4.3.0",
+    "@nuxtjs/i18n": "10.2.1",
     "eslint": "9.39.2",
     "nuxt": "4.2.2",
     "vue": "3.5.26",
     "vue-router": "4.6.4",
-    "zod": "^4.3.4"
+    "zod": "4.3.4"
   },
   "devDependencies": {
     "prettier": "^3.7.4",