From 258f943c4c784e245cd85aa91ec8049880ee78cc Mon Sep 17 00:00:00 2001
From: Sabrina Hennrich <sabrina@digimedialoop.de>
Date: Sat, 7 Jun 2025 14:49:23 +0200
Subject: [PATCH] new Nav

---
 components/template/NavBar.vue        | 313 ++++++++++++++++++
 components/template/NavigationBar.vue | 436 ++++++++++++++++++++++++++
 components/template/PageHeader.vue    | 384 +----------------------
 i18n/i18n-pages.ts                    |   8 +
 i18n/locales/de.json                  |  23 +-
 layouts/default.vue                   |   2 +-
 pages/sectors/film/index.vue          | 303 ++++++++++++++++++
 7 files changed, 1085 insertions(+), 384 deletions(-)
 create mode 100644 components/template/NavBar.vue
 create mode 100644 components/template/NavigationBar.vue
 create mode 100644 pages/sectors/film/index.vue

diff --git a/components/template/NavBar.vue b/components/template/NavBar.vue
new file mode 100644
index 0000000..850b74d
--- /dev/null
+++ b/components/template/NavBar.vue
@@ -0,0 +1,313 @@
+<template>
+    <nav class="mainNav" :class="[
+    isMenuOpen ? 'active' : '',
+    screenWidth < 1350 ? 'mobile-nav' : 'desk-nav',
+    scrollPosition > 50 ? 'scrolled' : ''
+  ]">
+      <!-- Burger Icon nur bei Mobile sichtbar -->
+      <div class="burger" @click="toggleMenu" v-if="screenWidth < 1350" :class="{ open: isMenuOpen }">
+        <span></span>
+        <span></span>
+      </div>
+  
+      <!-- Navigation -->
+      <ul
+        :class="[
+            screenWidth < 1350 && isMenuOpen ? 'mobile-menu active' :
+            screenWidth < 1350 ? 'mobile-menu' : 'desk-menu']"    
+            v-show="screenWidth >= 1350 || isMenuOpen"    
+      >
+        <li
+          v-for="link in navigationLinks"
+          :key="link.label"
+          class="nav-item"
+          @mouseenter="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
+          @mouseleave="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
+          
+        >
+          <!-- Mit SubNav -->
+          <template v-if="link.subNav">
+            <div @click="screenWidth < 1350 ? toggleMobileSubNav(link.label) : null">
+              {{ $t(link.label) }}
+              <span class="arrow" :class="{ open: (screenWidth < 1350 ? isMobileSubNavOpen : isSubNavOpen) === link.label }"></span>
+            </div>
+  
+            <ul
+                v-show="isActiveSubNav(link.label)"
+                class="submenu"
+                :class="{ open: isActiveSubNav(link.label) }"
+            >
+              <li v-for="sublink in link.subNav" :key="sublink.label">
+                <NuxtLinkLocale :to="sublink.routeKey" @click.native="handleMobileClose">
+                  {{ $t(sublink.label) }}
+                </NuxtLinkLocale>
+              </li>
+            </ul>
+          </template>
+  
+          <!-- Ohne SubNav -->
+          <template v-else>
+            <NuxtLinkLocale :to="link.routeKey" @click.native="handleMobileClose">
+              {{ $t(link.label) }}
+            </NuxtLinkLocale>
+          </template>
+        </li>
+      </ul>
+    </nav>
+  </template>
+  
+  
+  <script setup>
+  import { ref, computed } from 'vue'
+  import { useMainStore } from '@/stores/main'
+  const mainStore = useMainStore()
+  
+  const screenWidth = computed(() => mainStore.screenWidth)
+  const scrollPosition = computed(() => mainStore.scrollPosition)
+  
+  const isSubNavOpen = ref(null)
+  const isMobileSubNavOpen = ref(null)
+  
+  function toggleMobileSubNav(routeKey) {
+    if (screenWidth.value < 1350) {
+      isMobileSubNavOpen.value = isMobileSubNavOpen.value === routeKey ? null : routeKey
+    }
+  }
+  
+  function showSubNav(routeKey) {
+    isSubNavOpen.value = routeKey
+  }
+  function hideSubNav(routeKey) {
+    if (isSubNavOpen.value === routeKey) {
+      isSubNavOpen.value = null
+    }
+  }
+
+  function isActiveSubNav(label) {
+      return (screenWidth.value < 1350 ? isMobileSubNavOpen.value : isSubNavOpen.value) === label
+    }
+  
+  const isMenuOpen = computed(() => mainStore.menuOpen)
+  const toggleMenu = () => mainStore.toggleMenu()
+  
+  const toggleContactBubble = () => mainStore.toggleContactBubble()
+  
+  const handleMobileClose = () => {
+    if (screenWidth.value < 1350 && isMenuOpen.value) {
+      toggleMenu()
+    } else {
+      hideSubNav()
+    }
+  }
+  
+  const navigationLinks = [
+    {
+      routeKey: 'webagency',
+      label: 'menu.webagency'
+    },
+    {
+      routeKey: '',
+      label: 'menu.services',
+      subNav: [
+        { routeKey: 'services-cms', label: 'menu.menuCms' },
+        { routeKey: 'services-seo', label: 'menu.menuSEO' },
+        { routeKey: 'services-accessibility', label: 'menu.menuAccessibility' },
+        { routeKey: 'services-ai', label: 'menu.menuAi' }
+      ]
+    },
+    {
+      routeKey: '',
+      label: 'menu.sectors',
+      subNav: [
+        { routeKey: 'sectors-schools', label: 'menu.menuSchools' },
+        { routeKey: 'sectors-film', label: 'menu.menuFilm' }
+      ]
+    },
+    { routeKey: 'references', label: 'menu.references' }
+  ]
+  </script>
+  
+<style lang="sass">
+.mainNav
+  position: fixed
+  z-index: 50 
+  display: flex
+  justify-content: flex-end
+  width: auto
+
+  &.desk-nav
+    top: 2rem
+    right: 2rem
+    background: rgba(white, .9)
+    border-radius: 1rem
+    transition: .8s
+    &.scrolled
+        top: -.5rem
+        right: -3rem
+        background: transparent
+
+  &.mobile-nav
+    top: 0
+    right: 0
+    background-color: transparent
+
+
+  .burger
+    width: 4rem
+    height: 4rem
+    border-radius: 50%
+    background-color: $darkgrey
+    display: flex
+    align-items: center
+    justify-content: center
+    flex-direction: column
+    cursor: pointer
+    z-index: 55
+    margin: 2rem 1.5rem
+
+    span
+        display: block
+        width: 25px
+        height: 5px
+        background-color: white
+        margin: 4px 0
+        border-radius: 2rem
+        transition: all 0.3s ease
+
+    &.open
+        background-color: transparent
+        margin: 1.2rem 1rem
+        span
+            height: 3px
+            &:nth-child(1)
+                transform: rotate(45deg) translate(2px, 5px)
+            &:nth-child(2)
+                transform: rotate(-45deg) translate(3px, -6px)
+ 
+  .nav-item
+    font-family: 'Comfortaa-Bold'
+    text-transform: uppercase
+    color: $darkgrey
+    font-size: 1.1rem
+    cursor: pointer
+    a
+        text-decoration: none
+        color: $darkgrey
+        &:hover
+            transform: scale(1.1)
+    .arrow
+      display: inline-block
+      margin-left: 0.5rem
+      transition: transform 0.8s ease
+
+      &::after
+        content: '\276F' 
+        display: inline-block
+        transform: rotate(90deg) 
+
+      &.open::after
+        transform: rotate(-90deg) 
+    
+    .submenu
+        max-height: 0
+        opacity: 0
+        overflow: hidden
+        visibility: hidden
+        transition: max-height 0.5s ease, opacity 0.5s ease
+        &.open
+            max-height: 500px // hoch genug für deinen Content
+            opacity: 1
+            visibility: visible
+
+        li
+            padding: .8rem 1rem .4rem 0
+            font-size: 1rem
+            line-height: 140%
+            position: relative
+            &::before
+                content: ''
+                width: .5rem
+                height: .4rem
+                background-color: rgba($primaryColor, .9)
+                border-radius: $loopShape
+                position: absolute
+                top: 1.2rem
+                left: -1rem
+                border-radius: 20px
+
+.desk-menu
+  list-style: none
+  display: flex
+  flex-direction: row
+  padding: .2rem 3.5rem  
+
+  .nav-item
+    position: relative
+    padding: .5rem 1rem
+    cursor: pointer
+
+    a
+        transition: .5s
+        :hover
+            transform: scale(1.1)
+
+  .submenu
+    position: absolute
+    top: 100%
+    left: -50%
+    width: 200%
+    background-image: linear-gradient(to bottom, rgba(#fff, 0.1) 0%, rgba(#fff, 0.9) 8%, rgba(#fff, .98) 100%)
+    border-bottom-right-radius: 1rem
+    border-bottom-left-radius: 1rem
+    list-style: none
+    padding: 1rem .5rem .5rem 2.5rem
+    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1)
+    z-index: 10
+    
+
+.mobile-menu
+  list-style: none
+  padding: 5rem 8%
+  background-color: rgba($darkgrey, .95)
+  width: 6rem
+  display: flex
+  flex-direction: column
+  align-items: flex-start
+  transition: .8s
+  position: fixed
+  top: -1rem
+  right: 0
+
+  &.active
+    width: 80vw
+    max-height: 100vh
+    border-bottom-left-radius: 2rem
+  .nav-item
+    position: relative
+    padding: .5rem 1rem
+    cursor: pointer
+    color: white 
+    &::before
+        content: ''
+        width: .7rem
+        height: .5rem
+        background-color: rgba($primaryColor, .9)
+        border-radius: $loopShape
+        position: absolute
+        top: .8rem
+        left: -.4rem
+        border-radius: 20px
+    
+    .submenu
+        margin: 1rem 0 .2rem -1.8rem
+        list-style: none
+        a
+            text-transform: none
+    li, a
+        transition: .5s
+        color: white 
+        :hover
+            transform: scale(1.1)      
+
+</style>
+  
\ No newline at end of file
diff --git a/components/template/NavigationBar.vue b/components/template/NavigationBar.vue
new file mode 100644
index 0000000..039818a
--- /dev/null
+++ b/components/template/NavigationBar.vue
@@ -0,0 +1,436 @@
+<template>
+    <div
+        class="navigationBox"
+        :class="[
+          isMenuOpen ? 'menu-active' : '',
+          screenWidth < 1350 ? 'mobile' : 'desk'
+        ]"
+        role="navigation"
+        aria-label="Hauptnavigation"
+        tabindex="0"
+      >
+      <div
+        class="closer"
+        role="button"
+        tabindex="0"
+        aria-label="Navigation schließen"
+        @click="toggleMenu"
+        @keydown.enter="toggleMenu"
+      />
+
+        <nav
+          v-if="isMenuOpen || screenWidth > 1350"
+          :aria-expanded="screenWidth < 1350 ? 'true' : undefined"
+          @mouseleave="screenWidth >= 1350 && hideSubNav()"
+          >
+
+          <!-- <div class="mobilNavLogo">
+            <NuxtImg
+                v-if="screenWidth < 1350"
+                provider="strapi"
+                src="/uploads/DML_Logo_mint_negative_2024_9257db5430.svg"
+                alt="digimedialoop Logo"
+                width="120"
+            /> 
+          </div>  -->       
+          
+          <span
+            v-for="link in navigationLinks"
+            :key="link.routeKey"
+            class="main-nav-item"
+            @mouseenter="screenWidth >= 1350 && showSubNav(link.routeKey)"
+            @mouseleave="screenWidth >= 1350 && hideSubNav(link.routeKey)"
+          >
+            <NuxtLinkLocale
+              :to="link.routeKey"
+              class="main-nav-link"
+              :aria-haspopup="link.subNav && link.subNav.length > 0 ? 'true' : undefined"
+              :aria-expanded="isSubNavOpen === link.routeKey ? 'true' : 'false'"
+              @click="handleMobileClose"
+            >
+              {{ $t(link.label) }}
+            </NuxtLinkLocale>
+
+            <!-- PFEIL FÜR MOBILE UND TOGGLE -->
+            <button
+              v-if="link.subNav && link.subNav.length > 0 && screenWidth < 1350"
+              class="submenu-toggle"
+              @click.prevent="toggleMobileSubNav(link.routeKey)"
+              :aria-expanded="isMobileSubNavOpen === link.routeKey ? 'true' : 'false'"
+              aria-label="Untermenü öffnen/schließen"
+            >
+              <svg
+                :class="{ 'open': isMobileSubNavOpen === link.routeKey }"
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="8"
+                viewBox="0 0 12 8"
+                fill="none"
+              >
+                <path d="M1 1L6 6L11 1" stroke="currentColor" stroke-width="2"/>
+              </svg>
+            </button>
+
+            <!-- SUBNAVIGATION -->
+            <ul
+              v-if="link.subNav && link.subNav.length > 0"
+              v-show="(screenWidth >= 1350 && isSubNavOpen === link.routeKey) || (screenWidth < 1350 && isMobileSubNavOpen === link.routeKey)"
+              class="sub-nav"
+            >
+              <li v-for="subLink in link.subNav" :key="subLink.routeKey" class="sub-nav-item">
+                <NuxtLinkLocale
+                  :to="subLink.routeKey"
+                  class="sub-nav-link"
+                  @click="handleMobileClose"
+                >
+                  {{ $t(subLink.label) }}
+                </NuxtLinkLocale>
+              </li>
+            </ul>
+          </span>
+
+
+          <a
+              class="menu_link" href="#"
+              role="button" 
+              aria-label="Kontaktformular öffnen"
+              @click="toggleContactBubble"
+            >
+              {{ $t('contact') }}   
+          </a>    
+        <SettingsPanel v-if="screenWidth < 1350" />
+        </nav>
+      </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useMainStore } from '@/stores/main'
+const mainStore = useMainStore()
+
+const screenWidth = computed(() => mainStore.screenWidth)
+const scrollPosition = computed(() => mainStore.scrollPosition)
+
+const isSubNavOpen = ref(null) // speichert, welches Submenü auf Desktop offen ist
+const isMobileSubNavOpen = ref(null) // Trackt, welches Submenü auf Mobile offen ist
+
+function toggleMobileSubNav(routeKey) {
+  if (screenWidth.value < 1350) {
+    isMobileSubNavOpen.value = isMobileSubNavOpen.value === routeKey ? null : routeKey
+  }
+}
+
+// Funktionen zum Öffnen und Schließen der Subnavigation auf Desktop
+function showSubNav(routeKey) {
+  isSubNavOpen.value = routeKey
+}
+function hideSubNav(routeKey) {
+  if (isSubNavOpen.value === routeKey) {
+    isSubNavOpen.value = null
+  }
+}
+
+const isMenuOpen = computed(() => mainStore.menuOpen)
+const toggleMenu = () => mainStore.toggleMenu()
+
+const toggleContactBubble = () => mainStore.toggleContactBubble()
+
+const handleMobileClose = () => {
+  if (screenWidth.value < 1350 && isMenuOpen.value) {
+    toggleMenu()
+  } else {
+    hideSubNav()
+  }
+}
+
+const navigationLinks = [
+  { 
+    routeKey: 'webagency', 
+    label: 'webagency'
+  },
+  { 
+    routeKey: '', 
+    label: 'services', 
+    subNav: [
+    { routeKey: 'services-cms', label: 'menuCms' },
+    { routeKey: 'services-seo', label: 'menuSEO' },
+    { routeKey: 'services-accessibility', label: 'menuAccessibility' },
+    { routeKey: 'services-ai', label: 'menuAi' },
+    ] 
+  },
+  { 
+    routeKey: '', 
+    label: 'sectors', 
+    subNav: [
+    { routeKey: 'sectors-schools', label: 'menuSchools' },
+    { routeKey: 'sectors-film', label: 'menuFilm' }
+    ] 
+  },
+  { routeKey: 'references', label: 'references' }
+]
+</script>
+
+<style lang="sass">
+.navigationBox
+  position: relative
+  display: flex
+  align-items: center
+  justify-content: flex-end
+  width: 80%
+  transition: .8s
+  margin-top: 1.2rem // -1rem
+
+  nav
+    display: block
+    z-index: 102
+    //background: linear-gradient(to right, rgba($lightgrey, 0.8), rgba(white, 0.9), rgba(white, 0.9))
+    background: white
+    border: 1px solid adjust-color($beige, $lightness: 5%)
+    padding: 1rem 2rem
+    text-align: center
+    border-radius: 1rem
+    margin: 4.8rem 1rem 0 1rem
+    transition: .8s
+
+    a
+      margin: 0 1.2rem
+      text-decoration: none
+      color: $darkgrey
+      text-transform: uppercase
+      font-family: 'Comfortaa-Bold'
+      font-size: 1.1rem
+      letter-spacing: .05rem
+      transition: .6s
+      display: inline-block
+      
+      &:hover
+        transform: scale(1.15)
+        background-image: radial-gradient(rgba(white, .5), rgba(white, .1))
+        box-shadow: 0 0 10px 10px rgba(white, 0.2)
+        border-radius: 10px
+
+  &.desk
+    .sub-nav
+      display: block
+      position: absolute
+      top: 3rem
+      right: 5%
+      background-color: rgba(white, .95)
+      padding: 2rem 2rem 1rem 2rem
+      text-align: left
+      cursor: pointer
+      border-bottom-left-radius: 1rem
+      border-bottom-right-radius: 1rem
+      list-style: none
+
+      .sub-nav-item
+        padding: 0 0 1.5rem 0
+
+        .sub-nav-link
+          position: relative
+          margin-left: 1.2rem
+
+          &::before
+            content: ''
+            width: .5rem
+            height: .4rem
+            background-color: rgba($primaryColor, .9)
+            border-radius: $loopShape
+            position: absolute
+            top: .4rem
+            left: -1.3rem
+            border-radius: 20px
+
+          &:hover
+            transform: scale(1.025)
+
+  &.mobile
+    top: 0
+    
+    &.navigationBox
+      display: block
+      position: relative
+      background-color: $darkgrey
+      width: 4rem
+      height: 4rem
+      z-index: 8
+      border-radius: 50%
+      margin-right: 5vw
+      margin-top: 2rem
+
+      .closer
+        position: relative
+        width: 100%
+        height: 4rem
+
+        &::after, &::before
+          position: absolute
+          content: ''
+          width: 2rem
+          z-index: 12
+          height: 5px
+          border-radius: 4px
+          background-color: white
+          right: 75%
+          transform: translateX(100%)
+          transition: .8s
+
+        &::before
+          top: 35%
+
+        &::after
+          top: 55%
+
+      nav
+        display: none
+        background-image: none
+        background: transparent
+        border: none
+        padding-top: 0rem !important
+
+        .submenu-toggle
+          background: none
+          border: none
+          padding: 0 0 0 0.5rem
+          margin-top: -1rem
+          cursor: pointer
+          display: inline-flex
+          align-items: center
+          color: white
+          transition: transform 0.3s ease
+
+          svg
+            transition: transform 0.3s ease
+
+          &.open svg,
+          svg.open
+            transform: rotate(180deg) // Pfeil zeigt nach oben, wenn offen
+
+        .sub-nav
+          overflow: hidden
+          max-height: 0
+          opacity: 0
+          transition: max-height 0.4s ease, opacity 0.4s ease
+
+          &.open
+            max-height: 500px
+            opacity: 1
+
+    .sub-nav
+      list-style: none
+      padding-left: 1.8rem
+      margin: 0
+
+      .sub-nav-item
+        padding-left: 1rem
+        margin-bottom: 0.2rem
+
+        .sub-nav-link
+          color: white
+          font-size: 1rem !important
+          line-height: 1.5rem
+          padding: 0.5rem 1.5rem
+
+          &:hover
+
+          &::before
+            content: ''
+            width: .5rem
+            height: .4rem
+            background-color: rgba($primaryColor, .9)
+            border-radius: $loopShape
+            position: absolute
+            top: 1rem
+            left: 0
+            border-radius: 20px
+
+    .menu_link
+      margin-left: 1.5rem
+      transition: .8s
+
+      &:hover
+        transform: scale(1.06)
+        background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
+        box-shadow: 0 0 0 0 transparent
+        border-radius: 20px
+
+    a, .menu_link
+      display: block
+      color: white
+      text-align: left
+      margin-bottom: .2rem
+      padding: 1rem 2.8rem .5rem 1.2rem
+      position: relative
+      font-size: 1.25rem !important
+      width: auto
+      max-width: 18rem
+      text-transform: uppercase
+      font-family: 'Mainfont-Bold'
+
+      &::before
+        content: ''
+        width: .8rem
+        height: .6rem
+        background-color: rgba($primaryColor, .9)
+        border-radius: $loopShape
+        position: absolute
+        top: 1.5rem
+        left: -.5rem
+        border-radius: 20px
+
+      &:hover
+        transform: scale(1.06)
+        background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
+        box-shadow: 0 0 0 0 transparent
+        border-radius: 20px
+
+  &.menu-active
+    width: 100vw
+    height: 98vh
+    border-radius: 5px
+    margin: 0
+    background-color: rgba($darkgrey, .97)
+
+    .closer
+      &::before, &::after
+        top: 2rem
+        right: 2rem
+
+      &::before
+        transform: rotate(45deg)
+
+      &::after
+        transform: rotate(-45deg)
+
+    nav
+      display: block
+      padding: 10vh 0
+      margin: 0 5vw
+
+.navigationBox
+  margin-top: .5rem
+
+  nav
+    display: flex
+    margin: 2.5rem 0 0 0
+    padding: 1rem .5rem
+    border-top-right-radius: 0
+    border-top-left-radius: 0
+    border-bottom-left-radius: 50px
+    border-bottom-right-radius: 0
+    background: transparent
+    border: 1px solid transparent
+
+    a
+      font-size: 1rem
+      font-weight: bold
+      margin: 0 .8rem
+
+  &.desk
+    .sub-nav
+      top: 1.5rem
+      right: 2%
+      background-color: transparent
+      background-image: linear-gradient(to bottom, transparent 0%, white 15%)
+
+</style>
\ No newline at end of file
diff --git a/components/template/PageHeader.vue b/components/template/PageHeader.vue
index 7cae56e..065b529 100644
--- a/components/template/PageHeader.vue
+++ b/components/template/PageHeader.vue
@@ -22,94 +22,7 @@
           <path ref="logoLoop" fill="rgb(255,255,255)" d=" M 352.155 85.21 L 351.399 85.21 L 351.399 85.21 Q 349.074 85.21 347.244 83.931 L 347.244 83.931 L 347.244 83.931 Q 345.413 82.653 344.397 80.386 L 344.397 80.386 L 344.397 80.386 Q 343.379 78.12 343.379 75.156 L 343.379 75.156 L 343.379 42.033 L 343.379 42.033 Q 343.379 41.045 343.99 40.434 L 343.99 40.434 L 343.99 40.434 Q 344.6 39.825 345.588 39.825 L 345.588 39.825 L 345.588 39.825 Q 346.576 39.825 347.186 40.434 L 347.186 40.434 L 347.186 40.434 Q 347.796 41.045 347.796 42.033 L 347.796 42.033 L 347.796 75.156 L 347.796 75.156 Q 347.796 77.655 348.813 79.224 L 348.813 79.224 L 348.813 79.224 Q 349.83 80.793 351.399 80.793 L 351.399 80.793 L 352.852 80.793 L 352.852 80.793 Q 353.723 80.793 354.246 81.403 L 354.246 81.403 L 354.246 81.403 Q 354.77 82.014 354.77 83.001 L 354.77 83.001 L 354.77 83.001 Q 354.77 83.989 354.043 84.599 L 354.043 84.599 L 354.043 84.599 Q 353.316 85.21 352.155 85.21 L 352.155 85.21 Z  M 373.656 85.5 L 373.656 85.5 L 373.656 85.5 Q 369.007 85.5 365.346 83.408 L 365.346 83.408 L 365.346 83.408 Q 361.685 81.316 359.592 77.655 L 359.592 77.655 L 359.592 77.655 Q 357.501 73.994 357.501 69.345 L 357.501 69.345 L 357.501 69.345 Q 357.501 64.638 359.592 60.977 L 359.592 60.977 L 359.592 60.977 Q 361.685 57.316 365.346 55.224 L 365.346 55.224 L 365.346 55.224 Q 369.007 53.132 373.656 53.132 L 373.656 53.132 L 373.656 53.132 Q 378.304 53.132 381.937 55.224 L 381.937 55.224 L 381.937 55.224 Q 385.568 57.316 387.66 60.977 L 387.66 60.977 L 387.66 60.977 Q 389.753 64.638 389.811 69.345 L 389.811 69.345 L 389.811 69.345 Q 389.811 73.994 387.689 77.655 L 387.689 77.655 L 387.689 77.655 Q 385.568 81.316 381.937 83.408 L 381.937 83.408 L 381.937 83.408 Q 378.304 85.5 373.656 85.5 Z  M 373.656 81.432 L 373.656 81.432 L 373.656 81.432 Q 377.026 81.432 379.699 79.863 L 379.699 79.863 L 379.699 79.863 Q 382.372 78.294 383.883 75.563 L 383.883 75.563 L 383.883 75.563 Q 385.394 72.832 385.394 69.345 L 385.394 69.345 L 385.394 69.345 Q 385.394 65.859 383.883 63.098 L 383.883 63.098 L 383.883 63.098 Q 382.372 60.338 379.699 58.769 L 379.699 58.769 L 379.699 58.769 Q 377.026 57.2 373.656 57.2 L 373.656 57.2 L 373.656 57.2 Q 370.285 57.2 367.612 58.769 L 367.612 58.769 L 367.612 58.769 Q 364.939 60.338 363.399 63.098 L 363.399 63.098 L 363.399 63.098 Q 361.859 65.859 361.859 69.345 L 361.859 69.345 L 361.859 69.345 Q 361.859 72.832 363.399 75.563 L 363.399 75.563 L 363.399 75.563 Q 364.939 78.294 367.612 79.863 L 367.612 79.863 L 367.612 79.863 Q 370.285 81.432 373.656 81.432 Z  M 412.997 85.5 L 412.997 85.5 L 412.997 85.5 Q 408.348 85.5 404.687 83.408 L 404.687 83.408 L 404.687 83.408 Q 401.026 81.316 398.934 77.655 L 398.934 77.655 L 398.934 77.655 Q 396.842 73.994 396.842 69.345 L 396.842 69.345 L 396.842 69.345 Q 396.842 64.638 398.934 60.977 L 398.934 60.977 L 398.934 60.977 Q 401.026 57.316 404.687 55.224 L 404.687 55.224 L 404.687 55.224 Q 408.348 53.132 412.997 53.132 L 412.997 53.132 L 412.997 53.132 Q 417.646 53.132 421.278 55.224 L 421.278 55.224 L 421.278 55.224 Q 424.91 57.316 427.002 60.977 L 427.002 60.977 L 427.002 60.977 Q 429.094 64.638 429.152 69.345 L 429.152 69.345 L 429.152 69.345 Q 429.152 73.994 427.031 77.655 L 427.031 77.655 L 427.031 77.655 Q 424.91 81.316 421.278 83.408 L 421.278 83.408 L 421.278 83.408 Q 417.646 85.5 412.997 85.5 Z  M 412.997 81.432 L 412.997 81.432 L 412.997 81.432 Q 416.367 81.432 419.041 79.863 L 419.041 79.863 L 419.041 79.863 Q 421.714 78.294 423.224 75.563 L 423.224 75.563 L 423.224 75.563 Q 424.736 72.832 424.736 69.345 L 424.736 69.345 L 424.736 69.345 Q 424.736 65.859 423.224 63.098 L 423.224 63.098 L 423.224 63.098 Q 421.714 60.338 419.041 58.769 L 419.041 58.769 L 419.041 58.769 Q 416.367 57.2 412.997 57.2 L 412.997 57.2 L 412.997 57.2 Q 409.626 57.2 406.953 58.769 L 406.953 58.769 L 406.953 58.769 Q 404.28 60.338 402.741 63.098 L 402.741 63.098 L 402.741 63.098 Q 401.2 65.859 401.2 69.345 L 401.2 69.345 L 401.2 69.345 Q 401.2 72.832 402.741 75.563 L 402.741 75.563 L 402.741 75.563 Q 404.28 78.294 406.953 79.863 L 406.953 79.863 L 406.953 79.863 Q 409.626 81.432 412.997 81.432 Z  M 440.135 98.808 L 440.135 98.808 L 440.135 98.808 Q 439.089 98.808 438.479 98.197 L 438.479 98.197 L 438.479 98.197 Q 437.869 97.587 437.869 96.541 L 437.869 96.541 L 437.869 69.113 L 437.869 69.113 Q 437.927 64.58 440.048 60.948 L 440.048 60.948 L 440.048 60.948 Q 442.169 57.316 445.801 55.224 L 445.801 55.224 L 445.801 55.224 Q 449.433 53.132 453.965 53.132 L 453.965 53.132 L 453.965 53.132 Q 458.614 53.132 462.276 55.253 L 462.276 55.253 L 462.276 55.253 Q 465.937 57.374 468.058 61.035 L 468.058 61.035 L 468.058 61.035 Q 470.179 64.696 470.179 69.345 L 470.179 69.345 L 470.179 69.345 Q 470.179 73.936 468.116 77.597 L 468.116 77.597 L 468.116 77.597 Q 466.052 81.258 462.507 83.379 L 462.507 83.379 L 462.507 83.379 Q 458.963 85.5 454.488 85.5 L 454.488 85.5 L 454.488 85.5 Q 450.595 85.5 447.428 83.844 L 447.428 83.844 L 447.428 83.844 Q 444.261 82.188 442.343 79.456 L 442.343 79.456 L 442.343 96.541 L 442.343 96.541 Q 442.343 97.587 441.733 98.197 L 441.733 98.197 L 441.733 98.197 Q 441.123 98.808 440.135 98.808 Z  M 453.965 81.432 L 453.965 81.432 L 453.965 81.432 Q 457.336 81.432 460.009 79.863 L 460.009 79.863 L 460.009 79.863 Q 462.682 78.294 464.222 75.534 L 464.222 75.534 L 464.222 75.534 Q 465.762 72.774 465.762 69.345 L 465.762 69.345 L 465.762 69.345 Q 465.762 65.859 464.222 63.127 L 464.222 63.127 L 464.222 63.127 Q 462.682 60.396 460.009 58.798 L 460.009 58.798 L 460.009 58.798 Q 457.336 57.2 453.965 57.2 L 453.965 57.2 L 453.965 57.2 Q 450.653 57.2 447.98 58.798 L 447.98 58.798 L 447.98 58.798 Q 445.307 60.396 443.796 63.127 L 443.796 63.127 L 443.796 63.127 Q 442.285 65.859 442.285 69.345 L 442.285 69.345 L 442.285 69.345 Q 442.285 72.774 443.796 75.534 L 443.796 75.534 L 443.796 75.534 Q 445.307 78.294 447.98 79.863 L 447.98 79.863 L 447.98 79.863 Q 450.653 81.432 453.965 81.432 Z " />  
         </svg>
       </div>
-      <div
-        class="navigationBox"
-        :class="[
-          isMenuOpen ? 'menu-active' : '',
-          screenWidth < 1350 ? 'mobile' : 'desk'
-        ]"
-        role="navigation"
-        aria-label="Hauptnavigation"
-        tabindex="0"
-      >
-      <div
-        class="closer"
-        role="button"
-        tabindex="0"
-        aria-label="Navigation schließen"
-        @click="toggleMenu"
-        @keydown.enter="toggleMenu"
-      />
-
-        <nav
-          v-if="isMenuOpen || screenWidth > 1350"
-          :aria-expanded="screenWidth < 1350 ? 'true' : undefined"
-          @mouseleave="screenWidth >= 1350 && hideSubNav()"
-          >
-
-          <div v-if="false" class="mobilNavLogo">
-            <NuxtImg
-            v-if="screenWidth < 1350"
-            provider="strapi"
-            src="/uploads/DML_Logo_mint_negative_2024_9257db5430.svg"
-            alt="digimedialoop Logo"
-            width="120"
-          />
-          </div>         
-          
-          <span class="main-nav">
-            <span
-              v-for="link in navigationLinks"
-              :key="link.routeKey"
-              class="main-nav-item"
-              @mouseenter="screenWidth >= 1350 && showSubNav(link.routeKey)"
-              @keydown.enter="showSubNav(link.routeKey)"
-            >
-              <NuxtLinkLocale
-                :to="link.routeKey"
-                class="main-nav-link"
-                :aria-haspopup="link.subNav && link.subNav.length > 0 ? 'true' : undefined"
-                :aria-expanded="isSubNavOpen === link.routeKey ? 'true' : 'false'"
-                @click="handleMobileClose"
-              >
-                {{ $t(link.label) }}
-              </NuxtLinkLocale>
-
-              <!-- Subnavigation -->
-              <ul
-                v-if="link.subNav && link.subNav.length > 0"
-                v-show="isSubNavOpen === link.routeKey || screenWidth < 1350"
-                class="sub-nav"
-              >
-
-                <li
-                  v-for="subLink in link.subNav"
-                  :key="subLink.routeKey"
-                  class="sub-nav-item"
-                >
-                  <NuxtLinkLocale
-                    :to="subLink.routeKey"
-                    class="sub-nav-link"
-                    @click="handleMobileClose"
-                  >
-                    {{ $t(subLink.label) }}
-                  </NuxtLinkLocale>
-                </li>
-              </ul>
-            </span>
-          </span>
-
-          <a
-              class="menu_link" href="#"
-              role="button" 
-              aria-label="Kontaktformular öffnen"
-              @click="toggleContactBubble"
-            >
-              {{ $t('contact') }}   
-          </a>    
-        <SettingsPanel v-if="screenWidth < 1350" />
-        </nav>
-      </div>
+     <NavBar /> <!--   -->
     </div>
   </header>
 </template>
@@ -117,65 +30,11 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { useMainStore } from '@/stores/main'
-
-const localePath = useLocalePath()
 const mainStore = useMainStore()
 
-const isSubNavOpen = ref(null) // speichert, welches Submenü auf Desktop offen ist
-
-// Funktionen zum Öffnen und Schließen der Subnavigation auf Desktop
-function showSubNav(routeKey) {
-  if (screenWidth.value >= 1350) {
-    isSubNavOpen.value = routeKey
-  }
-}
-
-function hideSubNav() {
-  if (screenWidth.value >= 1350) {
-    isSubNavOpen.value = null
-  }
-}
-
-const navigationLinks = [
-  { 
-    routeKey: 'webagency', 
-    label: 'webagency'
-  },
-  { 
-    routeKey: 'services', 
-    label: 'services', 
-    subNav: [
-    { routeKey: 'services-cms', label: 'menuCms' },
-    { routeKey: 'services-seo', label: 'menuSEO' },
-    { routeKey: 'services-accessibility', label: 'menuAccessibility' },
-    { routeKey: 'services-ai', label: 'menuAi' },
-    ] 
-  },
-  { 
-    routeKey: '', 
-    label: 'sectors', 
-    subNav: [
-    { routeKey: 'sectors-schools', label: 'menuSchools' }
-    ] 
-  },
-  { routeKey: 'references', label: 'references' }
-]
-
-const isMenuOpen = computed(() => mainStore.menuOpen)
 const scrollPosition = computed(() => mainStore.scrollPosition)
 const screenWidth = computed(() => mainStore.screenWidth)
 
-const toggleMenu = () => mainStore.toggleMenu()
-const toggleContactBubble = () => mainStore.toggleContactBubble()
-
-const handleMobileClose = () => {
-  if (screenWidth.value < 1350 && isMenuOpen.value) {
-    toggleMenu()
-  } else {
-    hideSubNav()
-  }
-}
-
 const logoLettering = ref(null)
 const logoShape = ref(null)
 const logoLoop = ref(null)
@@ -238,148 +97,15 @@ header
     @media(max-width: $breakPointMD)
       height: 8rem
       right: -10vw
-  // MOBILE NAVIGATION
-  &.mobile
-    top: 0
-    .headContent
-      padding: 0
-      .logoBox
-        width: 50%
-        z-index: 102
-        svg
-          margin-top: 1.5rem //5rem
-      &.active
-        .logoBox
-          svg
-            margin-top: 3rem
-      .navigationBox
-        display: block
-        position: relative
-        background-color: $darkgrey
-        width: 4rem
-        height: 4rem
-        z-index: 8
-        border-radius: 50%
-        margin-right: 5vw
-        margin-top: 2rem
-        .closer
-          position: relative
-          width: 100%
-          height: 4rem
-          &::after, &::before
-            position: absolute
-            content: ''
-            width: 2rem
-            z-index: 12
-            height: 5px
-            border-radius: 4px
-            background-color: white
-            right: 75%
-            transform: translateX(100%)
-            transition: .8s
-          &::before          
-            top: 35%
-          &::after
-            top: 55%
-        nav
-          display: none
-          background-image: none
-          background: transparent
-          border: none
-          padding-top: 0rem !important
-
-          .sub-nav
-            list-style: none
-            padding-left: 1.8rem
-            margin: 0
-
-            .sub-nav-item              
-              padding-left: 1rem 
-              margin-bottom: 0.2rem
-
-              .sub-nav-link
-                color: white
-                font-size: 1rem !important
-                line-height: 1.5rem
-                padding: 0.5rem 1.5rem
-                &:hover
-                
-                &::before
-                  content: ''
-                  width: .5rem
-                  height: .4rem
-                  background-color: rgba($primaryColor, .9)
-                  border-radius: $loopShape
-                  position: absolute
-                  top: 1rem
-                  left: 0
-                  border-radius: 20px
-
-
-          .menu_link
-            margin-left: 1.5rem
-            transition: .8s
-            &:hover
-              transform: scale(1.06)
-              background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
-              box-shadow: 0 0 0 0 transparent
-              border-radius: 20px  
-            
-
-          a, .menu_link
-            display: block
-            color: white
-            text-align: left
-            margin-bottom: .2rem
-            padding: 1rem 2.8rem .5rem 1.2rem
-            position: relative
-            font-size: 1.25rem !important
-            width: auto
-            max-width: 18rem
-            text-transform: uppercase
-            font-family: 'Mainfont-Bold'
-            
-            &::before
-              content: ''
-              width: .8rem
-              height: .6rem
-              background-color: rgba($primaryColor, .9)
-              border-radius: $loopShape
-              position: absolute
-              top: 1.5rem
-              left: -.5rem
-              border-radius: 20px
-            &:hover
-              transform: scale(1.06)
-              background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
-              box-shadow: 0 0 0 0 transparent
-              border-radius: 20px
-
-        &.menu-active
-          width: 100vw
-          height: 98vh
-          border-radius: 5px
-          margin: 0
-          background-color: rgba($darkgrey, .97)
-          .closer
-            &::before, &::after
-              top: 2rem
-              right: 2rem
-            &::before    
-              transform: rotate(45deg)
-            &::after    
-              transform: rotate(-45deg)
-          nav
-            display: block
-            padding: 10vh 0
-            margin: 0 5vw
+  
 
   .headContent
+    position: relative
     display: flex
     align-items: top
     justify-content: space-between
     width: 100%
-    padding: 0 2rem
+    padding: 0 5%
     box-sizing: border-box
     transition: .8s
     z-index: 7
@@ -390,85 +116,17 @@ header
       align-self: center
       justify-content: left
       width: 33%
+      min-width: 170px
       transition: .8s
       background-color: transparent
       margin-top: 4.5rem
       @media(max-width: $breakPointMD)
-        margin-top: 3rem
+        margin-top: 2rem
       svg
         width: 80%
         max-width: 250px
         margin: 4rem 5vw 0 5vw
         transition: .8s
-    .navigationBox
-      position: relative
-      display: flex
-      align-items: center
-      justify-content: flex-end
-      width: 80%
-      transition: .8s
-      margin-top: 1.2rem //-1rem
-      nav
-        display: block
-        z-index: 102
-        //background: linear-gradient(to right, rgba($lightgrey, 0.8), rgba(white, 0.9), rgba(white, 0.9))
-        background: white
-        border: 1px solid adjust-color($beige, $lightness: 5%)
-        padding: 1rem 2rem
-        text-align: center
-        border-radius: 1rem
-        margin: 4.8rem 1rem 0 1rem
-        transition: .8s
-        a
-          margin: 0 1.2rem
-          text-decoration: none
-          color: $darkgrey
-          text-transform: uppercase
-          font-family: 'Comfortaa-Bold'
-          font-size: 1.1rem
-          letter-spacing: .05rem
-          transition: .6s
-          display: inline-block
-          &:hover
-            transform: scale(1.15)
-            background-image: radial-gradient(rgba(white, .5), rgba(white, .1))
-            box-shadow: 0 0 10px 10px rgba(white, 0.2)
-            border-radius: 10px
-      &.desk
-          .sub-nav
-            display: block
-            position: absolute
-            top: 3rem
-            right: 5%
-            background-color: rgba(white, .95)
-            padding: 2rem 2rem 1rem 2rem
-            text-align: left
-            cursor: pointer
-            border-bottom-left-radius: 1rem
-            border-bottom-right-radius: 1rem
-            list-style: none
-            
-            .sub-nav-item
-              padding: 0 0 1.5rem 0
-
-              .sub-nav-link
-                position: relative
-                margin-left: 1.2rem
-                
-                &::before
-                  content: ''
-                  width: .5rem
-                  height: .4rem
-                  background-color: rgba($primaryColor, .9)
-                  border-radius: $loopShape
-                  position: absolute
-                  top: .4rem
-                  left: -1.3rem
-                  border-radius: 20px
-
-                &:hover
-                  transform: scale(1.025)
-
 
   &.active
     &::before
@@ -476,35 +134,15 @@ header
     &::after
       top: -5rem
     .headContent
-      padding: 0 //0 0 2.5rem 0
-      .navigationBox
-        margin-top: .5rem
-        nav
-          display: flex
-          margin: 2.5rem 0 0 0
-          padding: 1rem .5rem
-          border-top-right-radius: 0
-          border-top-left-radius: 0
-          border-bottom-left-radius: 50px
-          border-bottom-right-radius: 0
-          background: transparent
-          border: 1px solid transparent
-          
-          a
-            font-size: 1rem
-            font-weight: bold
-            margin: 0 .8rem
-        &.desk
-          .sub-nav
-            top: 1.5rem
-            right: 2%
-            background-color: transparent
-            background-image: linear-gradient(to bottom, transparent 0%, white 15%)
+      padding: 0 //0 0 2.5rem 0   
+      @media(max-width: $breakPointMD)
+        padding-top: .6rem   
             
       .logoBox
         align-items: left
         svg
-          margin-bottom: .5rem          
+          margin-top: 0     
           width: 70%
           max-width: 200px
+  
 </style>
\ No newline at end of file
diff --git a/i18n/i18n-pages.ts b/i18n/i18n-pages.ts
index b0f9296..82bac24 100644
--- a/i18n/i18n-pages.ts
+++ b/i18n/i18n-pages.ts
@@ -63,6 +63,14 @@ export const i18nPages = {
         es: '/sectores/escuelas',
         tr: '/sektorler/okullar'
       },   
+      'sectors-film': {
+        de: '/branchen/film-und-fernsehen',
+        en: '/sectors/film-and-media',
+        fr: '/secteurs/film-et-medias',
+        it: '/settori/film-e-media',
+        es: '/sectores/cine-y-medios',
+        tr: '/sektorler/film-ve-medya'
+      },       
     references: {
         de: '/referenzen',
         en: '/references',
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index d96400c..f2bd845 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -2,16 +2,19 @@
     "welcome": "Willkommen",
     "districtSta": "Landkreis Starnberg",
     "upperBavaria": "Oberbayern",
-    "webagency": "Webagentur",
-    "services": "Leistungen",
-    "sectors": "Branchen",
-    "menuSchools": "Webseiten für Schulen",
-    "menuAi": "KI-kompatible Webseiten",
-    "menuCms": "Headless Content-Management-System (CMS)",
-    "menuAccessibility": "Barrierefeies Webdesign",
-    "menuSEO": "Suchmaschinen-Optimierung (SEO)",
-    "contact": "Kontakt",
-    "references": "Referenzen",
+    "menu": {
+        "webagency": "Webagentur",
+        "services": "Leistungen",
+        "sectors": "Branchen",
+        "menuCms": "Headless Content-Management-System (CMS)",
+        "menuSEO": "Suchmaschinen-Optimierung (SEO)",
+        "menuAccessibility": "Barrierefreies Webdesign",
+        "menuAi": "KI-kompatible Webseiten",
+        "menuSchools": "Webseiten für Schulen",
+        "menuFilm": "Webauftritte für Film und Fernsehen",
+        "references": "Referenzen",
+        "contact": "Kontakt"
+    },      
     "referenceoverview": "Referenzübersicht",
     "imprint": "Impressum",
     "privacy": "Datenschutz",
diff --git a/layouts/default.vue b/layouts/default.vue
index d7b77eb..2705f8f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -65,7 +65,7 @@ main
     font-size: 1.1rem
     line-height: 150%
   
-  b, bold, strong
+  b, bold, strong, .bold
     font-family: 'Mainfont-Bold'  
 
   u
diff --git a/pages/sectors/film/index.vue b/pages/sectors/film/index.vue
new file mode 100644
index 0000000..3b0bbf7
--- /dev/null
+++ b/pages/sectors/film/index.vue
@@ -0,0 +1,303 @@
+<template>
+    <div class="filmPage">
+      <HeroBox
+        image="/uploads/filmhintergrundcollage_a0c4b0e99d.webp"
+        :aria-label="'Hero-Bild für Webseiten in der Filmbranche'"
+        overlay-image="/uploads/scheinwerfe_b884e87a2f.webp"
+        overlay-alt-text="ki roboter fliegt"
+        :overlay-width="'15%'"
+        :overlay-position="{ top: '25%', right: '10vw' }"
+        :dark-background="true"
+      >
+        <h1>Webseiten für die Film- & Fernsehbranche</h1>
+        <h2>Für Schauspieler, Regisseure, Produktionsfirmen und Filmtechnik-Profis</h2>
+        <h3>Einfach zu bedienende Webseiten, die Ihre Arbeit ins richtige Licht rücken</h3>
+        <button class="whiteBtn" role="button" @click.prevent="toggleContactBubble">Erstkontakt – ganz ohne Drehbuch</button>
+      </HeroBox>
+  
+      <section class="visibility">
+        <NuxtImg
+            provider="strapi"
+            src="/uploads/musician_704e5a3556.webp"
+            alt="Fans"
+            class="background-image"
+        />
+        <div class="container-10">
+            <!-- <NuxtImg
+            provider="strapi"
+            src="/uploads/scheinwerfe_b884e87a2f.webp"
+            alt="Licht"
+            class="contentImage"
+        /> -->
+          <div class="textBox">
+            <h2>Sichtbarkeit - nicht nur vor der Kamera</h2>
+            <h3>Ihr Erfolg beginnt mit Ihrer Reichweite im Netz</h3>
+            <p>
+              Wer bei Google & Co. sichtbar ist, bekommt auch die Aufmerksamkeit, die er verdient. 
+              <br>Wir sorgen dafür, dass Ihre Webseite technisch
+              top optimiert und inhaltlich präzise auf Ihre Zielgruppe ausgerichtet ist. Damit Casting-Agenten, 
+              Produzenten und andere Player der Medienbranche Sie auch online finden.
+            </p>
+            <p>
+              Egal ob Schauspieler, Regisseur oder Tontechniker wir stellen Sie <b>online ins Rampenlicht</b>.
+            </p>
+            <p class="pt-3"><NuxtLinkLocale class="btn" to="services-seo">Erfahren Sie mehr über Suchmaschinen-Optimierung</NuxtLinkLocale></p>
+          </div>
+        </div>
+      </section>
+  
+      <section class="references">
+        <div class="spotlight"></div>
+        <div class="spotlight strong"></div>
+        
+        <div class="container-10">
+            <h2>Referenzen aus der Filmbranche</h2>
+            <div class="reference-content">
+                <div class="reference-text">    
+                    <NuxtImg
+                        src="/uploads/MBH_Home_3ef5ee1437.png"
+                        alt="Webseite von herbX"
+                        provider="strapi"
+                        class="ref-img"
+                    />                
+                <h3><a href="#" target="_blank" rel="noopener noreferrer">Michael Bully Herbig – Schauspieler & Regisseur</a></h3>
+                <p>Ein kreativer Kopf mit großer Reichweite. Wir haben seine Künstlerseite technisch und optisch auf den Punkt gebracht. 
+                    Modern, dynamisch und benutzerfreundlich.</p>
+                    <a href="/projekt/relaunch-kuenstlerseite-von-michael-bully-herbig" class="btn whiteBtn">Zum Projekt</a>
+                </div>
+                <div class="reference-text">
+                    <NuxtImg
+                        src="/uploads/HBX_Home_692e6e9bc5.png"
+                        alt="Webseite von herbX"
+                        provider="strapi"
+                        class="ref-img"
+                    />
+                <h3><a href="#" target="_blank" rel="noopener noreferrer">Produktionsfirma herbX</a></h3>
+                <p>Professionelle Produktionsfirma mit Anspruch auf Performance und Design. Für herbX haben wir eine Webseite gebaut, 
+                    die Flexibilität und einfache Content-Pflege ermöglicht.</p>
+                    <a href="/projekt/relaunch-herb-x-film-webauftritt" class="btn whiteBtn">Zum Projekt</a>    
+                </div>
+            </div>
+        </div>
+        <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+        </svg> 
+    </section>
+  
+    <section class="headlessCMS">
+        <div class="container">
+            <NuxtImg
+            src="/uploads/CMS_easy_d0674d59cc.webp"
+            provider="strapi"
+            alt="Headless CMS für Filmbranche"
+            width="500"
+            height="350"
+            />
+            <div class="textBox">
+            <h2>Pflegeleicht und professionell</h2>
+            <h3>Dank einer individuell anpassbaren und benutzerfreundlichen Verwaltungs-Oberfläche (CMS) für Ihre Texte, Fotos und Videos</h3> 
+            
+            <p>
+                Ob neue Rollen, Auszeichnungen, Trailer, Pressefotos oder aktuelle Projekte, erfolgreiche Karrieren entwickeln sich weiter. Damit Ihre Webseite das widerspiegelt, richten wir eine benutzerfreundliche Verwaltungsoberfläche ein, mit der Sie Inhalte ganz einfach selbst pflegen können.
+                Diese Oberfläche ist unabhängig vom Design – so bleibt Ihre Seite immer optisch stimmig, selbst wenn Sie Texte, Fotos oder Videos austauschen. Es kann nichts „kaputtgehen“.
+            </p>
+            <p>
+                Auf Wunsch übernehmen wir auch die Pflege für Sie, so dass Ihre Seite immer aktuell bleibt, ohne dass Sie sich selbst darum kümmern müssen.
+            </p>
+            <p class="pt-3"><NuxtLinkLocale class="btn" to="services-cms">Mehr zu unserem Content-Management-System</NuxtLinkLocale></p>
+            </div>
+        </div>
+        </section>
+
+        <section class="cta">
+            <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+            </svg> 
+            <NuxtImg
+                provider="strapi"
+                src="/uploads/rolle_7efa6a471f.webp"
+                alt="Fans"
+                class="background-image"
+            />
+            <CallToActionBox
+            headline="Na? – Schon ganz von der Rolle?"
+            text="Dann wird’s Zeit für eine Website mit professioneller Regie und einem Content-Management-System, das keine Szene macht."
+            button-text="Licht, Kamera, Kontakt!"
+        />
+        <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+                <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
+            </svg> 
+        </section>   
+
+  
+      <FAQArea
+        page-link="/branchen/film-und-fernsehen"
+        headline="Häufig gestellte Fragen zur Webseite für die Filmbranche"
+      />
+    </div>
+  </template>
+  
+  <script setup>
+
+import { useMainStore } from '@/stores/main'
+  
+  const mainStore = useMainStore()
+  
+  const toggleContactBubble = () => {
+    mainStore.toggleContactBubble()
+  }
+
+  
+  </script>
+  
+  <style lang="sass" scoped>
+  @keyframes moveSpotlight
+    0%
+        transform: translate(-30%, -30%) rotate(0deg)
+    15%
+        transform: translate(50%, 60%) rotate(5deg)
+    30%
+        transform: translate(0%, 30%) rotate(-3deg)
+    45%
+        transform: translate(70%, -20%) rotate(4deg)
+    60%
+        transform: translate(-20%, 50%) rotate(-5deg)
+    75%
+        transform: translate(30%, 0%) rotate(2deg)
+    90%
+        transform: translate(-10%, -40%) rotate(-4deg)
+    100%
+        transform: translate(20%, 20%) rotate(0deg)
+
+
+  .filmPage
+    overflow-x: hidden 
+  
+    .visibility      
+        align-items: center
+        margin-bottom: 0
+        padding-bottom: 30%
+        .background-image
+            width: 100%
+            height: auto
+            position: absolute
+            bottom: 0
+            left: 0
+        .textBox
+            p
+            line-height: 1.6
+            margin-bottom: 1rem
+        .contentImage
+            width: 20%
+            float: right
+  
+    .references
+        position: relative
+        overflow: hidden
+        color: white
+        padding: 2rem 0 5rem 0
+        text-align: center
+        background: linear-gradient(to bottom, #000000, #022337)
+
+        margin-top: -5px  
+        .spotlight
+            position: absolute
+            top: -50%
+            left: -50%
+            width: 130%
+            height: 130%
+            background: radial-gradient(ellipse 30% 20% at center, rgba(255,245,200,0.4) 0%, rgba(255,245,200,0) 100%)
+            filter: blur(100px) brightness(1.5)
+            mix-blend-mode: screen
+            animation: moveSpotlight 16s ease-in-out infinite alternate
+            pointer-events: none
+            z-index: 1
+        .spotlight.strong
+            background: radial-gradient(ellipse at center, rgba(255,245,200,0.25) 0%, rgba(255,245,200,0) 40%)
+            filter: blur(20px)
+            z-index: 2
+          
+        a
+            color: white
+            text-decoration: none
+            font-family: 'Mainfont-Bold'
+        .whiteBtn
+            color: black !important
+    
+        h2
+            margin: 3rem auto
+            font-family: 'Comfortaa'
+            text-transform: uppercase
+            letter-spacing: .15rem
+
+        h3, p
+            margin-bottom: 1rem
+
+        .ref-img
+            width: 80%
+            max-width: 300px
+            z-index: 4
+        
+        .reference-content
+            display: flex
+            gap: 2rem
+            justify-content: center
+            flex-wrap: nowrap
+        
+            .reference-text
+              flex: 1 1 45%
+              text-align: center         
+        
+        @media (max-width: $breakPointMD)
+            .reference-content
+                flex-direction: column
+        
+            .reference-text
+                flex-basis: 100%
+                margin-bottom: 1.5rem
+  
+    .headlessCMS
+        padding: 2rem 0 0 0             
+        img
+            float: right
+            width: 90%
+            max-width: 300px
+            height: auto
+            margin: 0 0 1rem 1rem
+        
+    .cta
+        position: relative
+        overflow: hidden
+        display: flex
+        align-items: center
+        justify-content: bottom
+        padding: 0 auto 6rem auto
+        text-align: center
+        color: black
+        
+        .background-image
+            position: absolute
+            top: 0
+            left: 0
+            width: 100%
+            height: 100%
+            object-fit: cover
+            object-position: bottom center
+            z-index: 0      
+        .ctaBox
+            z-index: 1
+            margin-bottom: 30%
+            margin-top: 1rem
+
+  
+    @media (max-width: $breakPointMD)
+      section.visibility,
+      section.headlessCMS
+        grid-template-columns: 1fr
+        text-align: center
+        .textBox
+          margin-top: 1rem
+
+
+  </style>
+  
\ No newline at end of file