Add team roles and content management updates

frontend/src/components/home/HomeSupportFooterSection.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { privacyContentToHtml } from '../../lib/privacyContent'
+
 interface HomeSocialLink {
   label: string
   platform: string
@@ -7,8 +11,10 @@ interface HomeSocialLink {
 }
 
 interface FooterLink {
+  key: string
   label: string
   url: string
+  content: string
 }
 
 interface SiteContent {
@@ -31,6 +37,25 @@ const props = defineProps<{
   socialSimpleIconColor: (platform: string | null | undefined) => string
   platformKey: (platform: string | null | undefined) => string
 }>()
+
+const activeFooterLink = ref<FooterLink | null>(null)
+const activeFooterHtml = computed(() => privacyContentToHtml(activeFooterLink.value?.content || ''))
+
+function openFooterLink(event: Event, link: FooterLink) {
+  if (!link.content.trim()) {
+    if (!link.url.trim()) {
+      event.preventDefault()
+    }
+    return
+  }
+
+  event.preventDefault()
+  activeFooterLink.value = link
+}
+
+function closeFooterLink() {
+  activeFooterLink.value = null
+}
 </script>
 
 <template>
@@ -111,10 +136,83 @@ const props = defineProps<{
         VTuber Star Award 2026
       </div>
       <div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-size:14px;font-weight:500;">
-        <a v-for="link in props.footerLinks" :key="link.label" :href="link.url" target="_blank" rel="noopener" style="color:var(--muted,#8a8398);text-decoration:none;" style-hover="color:var(--accent,#8b6cdb);">{{ link.label }}</a>
+        <template v-for="link in props.footerLinks" :key="link.key || link.label">
+          <button
+            v-if="link.content"
+            type="button"
+            style="background:none;border:none;padding:0;color:var(--muted,#8a8398);text-decoration:none;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:inherit;"
+            style-hover="color:var(--accent,#8b6cdb);"
+            @click="openFooterLink($event, link)"
+          >
+            {{ link.label }}
+          </button>
+          <a
+            v-else
+            :href="link.url || '#'"
+            target="_blank"
+            rel="noopener"
+            style="color:var(--muted,#8a8398);text-decoration:none;"
+            style-hover="color:var(--accent,#8b6cdb);"
+            @click="openFooterLink($event, link)"
+          >
+            {{ link.label }}
+          </a>
+        </template>
         <button @click="props.onOpenPrivacy" style="background:none;border:none;padding:0;color:var(--muted,#8a8398);text-decoration:none;cursor:pointer;font-size:inherit;" style-hover="color:var(--accent,#8b6cdb);">Datenschutz</button>
       </div>
       <div style="font-size:13px;color:var(--muted,#c9b8da);">© 2026 · Made with ♡ &amp; Chaos</div>
     </div>
   </footer>
+
+  <template v-if="activeFooterLink">
+    <div class="home-modal-overlay" @click="closeFooterLink" style="position:fixed;inset:0;z-index:420;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(40,24,70,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);">
+      <div class="home-modal" @click.stop style="position:relative;width:100%;max-width:720px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 40px 90px rgba(40,24,70,.4);">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 32px 18px;border-bottom:1px solid #f1ecfb;flex:none;">
+          <div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8b6cdb;margin-bottom:4px;">Footer Seite</div>
+            <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;margin:0;color:#3f3556;">{{ activeFooterLink.label }}</h2>
+          </div>
+          <button @click="closeFooterLink" style="width:34px;height:34px;border-radius:50%;border:none;background:#f1ecfb;color:#8b6cdb;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;" style-hover="background:#e6dcf6;">✕</button>
+        </div>
+        <div style="overflow-y:auto;padding:28px 32px;flex:1;font-family:'Outfit',sans-serif;font-size:14px;line-height:1.7;color:#6f6685;">
+          <div v-if="activeFooterHtml" class="home-footer-page-content" v-html="activeFooterHtml" />
+          <p v-else style="margin:0;padding:14px 16px;border-radius:16px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;font-weight:600;">
+            Für diese Footer-Seite ist noch kein Inhalt hinterlegt.
+          </p>
+          <a
+            v-if="activeFooterLink.url"
+            :href="activeFooterLink.url"
+            target="_blank"
+            rel="noopener"
+            style="display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:12px 16px;border-radius:14px;background:#f6f1fd;border:1px solid #e6dcf6;color:#6a4fb8;text-decoration:none;font-weight:700;"
+            style-hover="background:#f1ecfb;"
+          >
+            Externe Seite öffnen
+          </a>
+        </div>
+      </div>
+    </div>
+  </template>
 </template>
+
+<style scoped>
+.home-footer-page-content :deep(p) {
+  margin: 0 0 14px;
+}
+
+.home-footer-page-content :deep(p:last-child),
+.home-footer-page-content :deep(ul:last-child),
+.home-footer-page-content :deep(ol:last-child) {
+  margin-bottom: 0;
+}
+
+.home-footer-page-content :deep(ul),
+.home-footer-page-content :deep(ol) {
+  margin: 0 0 14px 20px;
+  padding-left: 16px;
+}
+
+.home-footer-page-content :deep(li) {
+  margin: 3px 0;
+}
+</style>