hms-licht-ton/frontend/components/AppFooter.vue

<template>
  <footer
    class="bg-bg border-t border-border-default mt-auto"
    role="contentinfo"
  >
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- Column 1: Navigation -->
        <div>
          <h2 class="text-sm font-bold text-text uppercase tracking-wider mb-4">Navigation</h2>
          <ul class="space-y-2">
            <li>
              <NuxtLink to="/" class="text-text-muted hover:text-accent text-sm transition-colors duration-fast">Home</NuxtLink>
            </li>
            <li>
              <NuxtLink to="/referenzen" class="text-text-muted hover:text-accent text-sm transition-colors duration-fast">Referenzen</NuxtLink>
            </li>
            <li>
              <NuxtLink to="/mietkatalog" class="text-text-muted hover:text-accent text-sm transition-colors duration-fast">Mietkatalog</NuxtLink>
            </li>
            <li>
              <NuxtLink to="/kontakt" class="text-text-muted hover:text-accent text-sm transition-colors duration-fast">Kontakt</NuxtLink>
            </li>
          </ul>
        </div>

        <!-- Column 2: Kontakt -->
        <div>
          <h2 class="text-sm font-bold text-text uppercase tracking-wider mb-4">Kontakt</h2>
          <address class="not-italic text-sm text-text-muted space-y-2">
            <p>Grockelhofen 10<br>89340 Leipheim</p>
            <p>
              <a href="tel:+498221204433" class="hover:text-accent transition-colors duration-fast">
                +49 (0) 8221 / 204433
              </a>
            </p>
            <p>
              <a href="mailto:info@hms-licht-ton.de" class="hover:text-accent transition-colors duration-fast">
                info@hms-licht-ton.de
              </a>
            </p>
          </address>
        </div>

        <!-- Column 3: Rechtliches -->
        <div>
          <h2 class="text-sm font-bold text-text uppercase tracking-wider mb-4">Rechtliches</h2>
          <ul class="space-y-2">
            <li>
              <NuxtLink to="/impressum" class="text-text-muted hover:text-accent text-sm transition-colors duration-fast">Impressum</NuxtLink>
            </li>
            <li>
              <NuxtLink to="/datenschutz" class="text-text-muted hover:text-accent text-sm transition-colors duration-fast">DSGVO</NuxtLink>
            </li>
            <li>
              <NuxtLink to="/agb-vermietung" class="text-text-muted hover:text-accent text-sm transition-colors duration-fast">AGB Vermietung</NuxtLink>
            </li>
          </ul>
        </div>

        <!-- Column 4: Social -->
        <div>
          <h2 class="text-sm font-bold text-text uppercase tracking-wider mb-4">Folgen Sie uns</h2>
          <div class="flex items-center gap-4">
            <a
              href="https://www.facebook.com/hms.licht.ton"
              target="_blank"
              rel="noopener noreferrer"
              class="text-secondary hover:text-accent transition-colors duration-flex"
              aria-label="Facebook"
            >
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z"/>
              </svg>
            </a>
            <a
              href="https://www.instagram.com/hms.licht.ton"
              target="_blank"
              rel="noopener noreferrer"
              class="text-secondary hover:text-accent transition-colors duration-fast"
              aria-label="Instagram"
            >
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 01-1.38-.9 3.7 3.7 0 01-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.9 5.9 0 00-2.13 1.38A5.9 5.9 0 00.63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91a5.9 5.9 0 001.38 2.13 5.9 5.9 0 002.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.9 5.9 0 002.13-1.38 5.9 5.9 0 001.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 00-1.38-2.13A5.9 5.9 0 0019.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0z"/>
                <path d="M12 5.84A6.16 6.16 0 1018.16 12 6.16 6.16 0 0012 5.84zm0 10.16A4 4 0 1116 12a4 4 0 01-4 4z"/>
                <circle cx="18.41" cy="5.59" r="1.44"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Copyright -->
      <div class="mt-8 pt-6 border-t border-border-default">
        <p class="text-xs text-secondary text-center">
          &copy; {{ new Date().getFullYear() }} Hammerschmidt u. M&ouml;ssle GbR &middot; Veranstaltungstechnik &middot; Leipheim / Ellzee
        </p>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
// AppFooter – 4-column footer with navigation, contact, legal links, and social icons
</script>