T01: Frontend Foundation – Nuxt 3 + Tailwind + Design Tokens + Layout + Meta

- Nuxt 3 project with @nuxtjs/tailwindcss module
- Tailwind CSS config with A0 Dark Theme design tokens (CSS custom properties)
- AppHeader: sticky, logo, nav, phone, social icons, mobile burger menu
- AppFooter: 4-column grid (Navigation, Kontakt, Rechtliches, Social)
- HmsLogo: SVG with orange #EC6925 border
- error.vue: 404 page with Seite nicht gefunden
- robots.txt server route: Disallow: /
- Meta: noindex, nofollow, noarchive, nosnippet
- JSON-LD: LocalBusiness schema
- OpenGraph tags
- routeRules: SSR/CSR per route
- Shared components: LoadingSkeleton, EmptyState, ErrorState, LegalContentPage, SpeakerIcon
- 42 vitest tests passing
- Build: 0 errors

frontend/pages/agb-vermietung.vue

@@ -0,0 +1,7 @@
+<template>
+  <LegalContentPage title="AGB Vermietung" :content="content" />
+</template>
+<script setup lang="ts">
+useHead({ title: "AGB Vermietung – HMS Licht & Ton", meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }] });
+const content = `<p>Allgemeine Geschäftsbedingungen für die Vermietung.</p>`;
+</script>

frontend/pages/datenschutz.vue

@@ -0,0 +1,7 @@
+<template>
+  <LegalContentPage title="Datenschutz (DSGVO)" :content="content" />
+</template>
+<script setup lang="ts">
+useHead({ title: "Datenschutz – HMS Licht & Ton", meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }] });
+const content = `<p>Datenschutzerklärung gemäß DSGVO.</p>`;
+</script>

frontend/pages/impressum.vue

@@ -0,0 +1,7 @@
+<template>
+  <LegalContentPage title="Impressum" :content="impressumContent" />
+</template>
+<script setup lang="ts">
+useHead({ title: "Impressum – HMS Licht & Ton", meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }] });
+const impressumContent = `<p>Hammerschmidt u. Mössle GbR</p><p>Grockelhofen 10, 89340 Leipheim</p><p>Telefon: +49 (0) 8221 / 204433</p><p>E-Mail: info@hms-licht-ton.de</p>`;
+</script>

frontend/pages/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <section class="mb-12">
+      <p class="text-sm text-accent font-semibold mb-2">Seit 2003 &middot; Über 20 Jahre Veranstaltungstechnik</p>
+      <h1 class="text-4xl lg:text-5xl font-extrabold mb-4">Professionelle Technik für Ihre Veranstaltung</h1>
+      <p class="text-text-muted text-lg mb-6 max-w-2xl">
+        Von der Firmenevent-Beschallung bis zur Open-Air-Großproduktion: HMS Licht &amp; Ton liefert
+        Tontechnik, Lichttechnik, Rigging und Komplettlösungen aus Leipheim und Ellzee.
+      </p>
+      <div class="flex flex-wrap gap-4">
+        <NuxtLink to="/mietkatalog" class="btn-primary">Mietkatalog öffnen</NuxtLink>
+        <NuxtLink to="/kontakt" class="btn-secondary">Beratung anfragen</NuxtLink>
+      </div>
+    </section>
+
+    <section class="mb-12">
+      <h2 class="text-2xl font-bold mb-6">Leistungen</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div
+          v-for="service in services"
+          :key="service.title"
+          class="bg-panel border border-border-default rounded-lg p-5 hover:border-accent-border transition-colors duration-fast"
+        >
+          <h3 class="text-accent text-sm font-bold mb-2">{{ service.title }}</h3>
+          <p class="text-text-muted text-sm">{{ service.description }}</p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({
+  title: "HMS Licht & Ton – Veranstaltungstechnik Leipheim/Ellzee",
+  meta: [
+    { name: "robots", content: "noindex, nofollow, noarchive, nosnippet" },
+    { property: "og:type", content: "website" },
+    { property: "og:title", content: "HMS Licht & Ton – Veranstaltungstechnik" },
+    { property: "og:description", content: "Professionelle Veranstaltungstechnik aus Leipheim/Ellzee. Vermietung, Verkauf, Personal, Transport." },
+    { property: "og:locale", content: "de_DE" },
+    { property: "og:site_name", content: "HMS Licht & Ton" },
+    { property: "og:url", content: "https://hms.media-on.de" },
+  ],
+});
+
+const services = [
+  { title: "Vermietung", description: "Lautsprecher, Mischpulte, Lichtanlagen, Rigging und Komplett-Setups aus unserem 1.000+ Geräte umfassenden Mietlager." },
+  { title: "Verkauf", description: "Neu- und Gebrauchtgeräte führender Hersteller mit Beratung, Inbetriebnahme und Service." },
+  { title: "Personal", description: "Qualifizierte Tontechniker, Lichttechniker und Rigger für Aufbau, Betrieb und Abbau." },
+  { title: "Transport", description: "Eigene Transportfahrzeuge für sichere An- und Ablieferung inklusive Verladekonzept." },
+];
+</script>

frontend/pages/kontakt.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-bold text-text mb-4">Kontakt</h1>
+    <p class="text-text-muted">Kontaktformular wird hier angezeigt.</p>
+  </div>
+</template>
+<script setup lang="ts">
+useHead({ title: "Kontakt – HMS Licht & Ton", meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }] });
+</script>

frontend/pages/mietkatalog.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-bold text-text mb-4">Mietkatalog</h1>
+    <p class="text-text-muted">Unser Equipment-Katalog wird hier geladen.</p>
+  </div>
+</template>
+<script setup lang="ts">
+useHead({ title: "Mietkatalog – HMS Licht & Ton", meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }] });
+</script>

frontend/pages/referenzen.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-bold text-text mb-4">Referenzen</h1>
+    <p class="text-text-muted">Unsere Referenzen werden hier angezeigt.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({
+  title: "Referenzen – HMS Licht & Ton",
+  meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
+});
+</script>