diff --git a/package.json b/package.json
index 0fd7140..5592a8e 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,7 @@
   "dependencies": {
     "vue": "^2.6.7",
     "vue-router": "^3.0.2",
-    "vue-meta": "^2.2.1",
-    "dangerous-html": "0.1.11"
+    "vue-meta": "^2.2.1"
   },
   "devDependencies": {
     "@vue/babel-preset-app": "^5.0.8",
diff --git a/public/index.html b/public/index.html
index 335e277..442f4c8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,10 +48,24 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       data-tag="font"
     />
+    undefined
+    <style data-section-id="dropdown">
+      [data-thq="thq-dropdown"]:hover > [data-thq="thq-dropdown-list"] {
+          display: flex;
+        }
+
+        [data-thq="thq-dropdown"]:hover > div [data-thq="thq-dropdown-arrow"] {
+          transform: rotate(90deg);
+        }
+    </style>
   </head>
   <body>
     <div id="app"></div>
     <!-- Your body code here -->
     <!-- <script type="text/javascript"> ... </script> -->
+    <script
+      data-section-id="navbar"
+      src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
+    ></script>
   </body>
 </html>
diff --git a/public/playground_assets/buch-vorderseite-schrift-1100w.png b/public/playground_assets/buch-vorderseite-schrift-1400w.png
similarity index 100%
rename from public/playground_assets/buch-vorderseite-schrift-1100w.png
rename to public/playground_assets/buch-vorderseite-schrift-1400w.png
diff --git a/public/playground_assets/hamburger-200h.png b/public/playground_assets/hamburger-200h.png
deleted file mode 100644
index 0752c7d..0000000
Binary files a/public/playground_assets/hamburger-200h.png and /dev/null differ
diff --git a/public/playground_assets/logo_mitoffenemvisier_bw_png-1500h.png b/public/playground_assets/logo_mitoffenemvisier_bw_png-1500h.png
new file mode 100644
index 0000000..7825831
Binary files /dev/null and b/public/playground_assets/logo_mitoffenemvisier_bw_png-1500h.png differ
diff --git a/public/playground_assets/logo_mitoffenemvisier_bw_png-200h.png b/public/playground_assets/logo_mitoffenemvisier_bw_png-200h.png
deleted file mode 100644
index 14b523d..0000000
Binary files a/public/playground_assets/logo_mitoffenemvisier_bw_png-200h.png and /dev/null differ
diff --git a/src/components/footer.vue b/src/components/kontakt.vue
similarity index 78%
rename from src/components/footer.vue
rename to src/components/kontakt.vue
index db1af28..2401312 100644
--- a/src/components/footer.vue
+++ b/src/components/kontakt.vue
@@ -1,12 +1,12 @@
 <template>
-  <footer class="footer-footer" v-bind:class="rootClassName">
-    <div class="footer-category">
-      <div class="footer-header">
-        <span class="footer-text footer-header">{{ Text }}</span>
+  <footer class="kontakt-footer" v-bind:class="rootClassName">
+    <div class="kontakt-category">
+      <div class="kontakt-header">
+        <span class="kontakt-text footer-header">{{ Text }}</span>
       </div>
       <a
         href="mailto:info@openvisor.ch?subject="
-        class="footer-text1 footer-link"
+        class="kontakt-text1 footer-link"
       >
         {{ Text1 }}
       </a>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'Footer',
+  name: 'Kontakt',
   props: {
     Text: {
       type: String,
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style scoped>
-.footer-footer {
+.kontakt-footer {
   gap: var(--dl-space-space-fiveunits);
   flex: 1;
   width: 100%;
@@ -48,7 +48,7 @@ export default {
   padding-bottom: var(--dl-space-space-sixunits);
   justify-content: center;
 }
-.footer-category {
+.kontakt-category {
   gap: var(--dl-space-space-unit);
   display: flex;
   align-items: center;
@@ -57,21 +57,21 @@ export default {
   justify-content: center;
   border-top-width: 0px;
 }
-.footer-header {
+.kontakt-header {
   gap: var(--dl-space-space-unit);
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: center;
 }
-.footer-text {
+.kontakt-text {
   font-size: 36px;
   margin-bottom: var(--dl-space-space-unit);
   text-transform: uppercase;
 }
-.footer-text1 {
+.kontakt-text1 {
   color: #ffff00;
-  font-size: 20px;
+  font-size: 18px;
   align-self: center;
   font-style: normal;
   font-weight: 300;
diff --git a/src/components/letzte-gelegenheit-run1.vue b/src/components/letzte-gelegenheit-run1.vue
index 09b6421..ee63c6c 100644
--- a/src/components/letzte-gelegenheit-run1.vue
+++ b/src/components/letzte-gelegenheit-run1.vue
@@ -1,12 +1,9 @@
 <template>
-  <div class="letzte-gelegenheit-run1-container">
+  <div class="letzte-gelegenheit-run1-container" v-bind:class="rootClassName">
     <h2 class="letzte-gelegenheit-run1-heading">{{ Name }}</h2>
     <p class="letzte-gelegenheit-run1-description">{{ Datum }}</p>
     <p class="letzte-gelegenheit-run1-description1">{{ Standort }}</p>
-    <router-link
-      to="/letzte-gelegenheit1"
-      class="letzte-gelegenheit-run1-navlink"
-    >
+    <router-link to="/letzte-gelegenheit" class="letzte-gelegenheit-run1-navlink">
       <div class="letzte-gelegenheit-run1-explore-more">
         <p class="letzte-gelegenheit-run1-text">{{ Anmeldung }}</p>
       </div>
@@ -30,6 +27,7 @@ export default {
       type: String,
       default: '1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr',
     },
+    rootClassName: String,
     Name: {
       type: String,
       default: 'Letzte Gelegenheit Run 1 (Schweiz)',
diff --git a/src/components/letzte-gelegenheit-run2.vue b/src/components/letzte-gelegenheit-run2.vue
index 297681c..483122c 100644
--- a/src/components/letzte-gelegenheit-run2.vue
+++ b/src/components/letzte-gelegenheit-run2.vue
@@ -3,10 +3,7 @@
     <h2 class="letzte-gelegenheit-run2-heading">{{ Name }}</h2>
     <p class="letzte-gelegenheit-run2-description">{{ Datum }}</p>
     <p class="letzte-gelegenheit-run2-description1">{{ Standort }}</p>
-    <router-link
-      to="/letzte-gelegenheit1"
-      class="letzte-gelegenheit-run2-navlink"
-    >
+    <router-link to="/letzte-gelegenheit" class="letzte-gelegenheit-run2-navlink">
       <div class="letzte-gelegenheit-run2-explore-more">
         <p class="letzte-gelegenheit-run2-text">{{ Mehr }}</p>
       </div>
@@ -103,7 +100,6 @@ export default {
   line-height: 24px;
 }
 
-
 @media(max-width: 767px) {
   .letzte-gelegenheit-run2-heading {
     font-size: 28px;
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
deleted file mode 100644
index 06cd6be..0000000
--- a/src/components/navbar.vue
+++ /dev/null
@@ -1,349 +0,0 @@
-<template>
-  <nav class="navbar-navbar" v-bind:class="rootClassName">
-    <div class="navbar-container">
-      <div class="navbar-container1">
-        <div class="navbar-container2">
-          <router-link to="/" class="navbar-navlink">
-            <img :alt="image_alt2" :src="image_src2" class="navbar-logo" />
-          </router-link>
-        </div>
-      </div>
-    </div>
-    <div class="navbar-container3">
-      <div class="navbar-nav-content">
-        <div class="navbar-nav-links">
-          <router-link to="/" class="navbar-link nav-link">Home</router-link>
-          <router-link to="/larp-konzept1" class="navbar-link01 nav-link">
-            {{ Larpkonzept }}
-          </router-link>
-          <router-link to="/letzte-gelegenheit1" class="navbar-link02 nav-link">
-            <span>Letzte Gelegenheit</span>
-            <br />
-          </router-link>
-          <router-link to="/ssse-trume1" class="navbar-link03 nav-link">
-            <span>Süsse Träume</span>
-            <br />
-          </router-link>
-          <router-link
-            to="/ein-orden-fr-eine-gute-tat1"
-            class="navbar-link04 nav-link"
-          >
-            <span>Ein Orden für eine gute Tat</span>
-            <br />
-          </router-link>
-          <router-link to="/rosenteufel1" class="navbar-link05 nav-link">
-            Rosenteufel
-          </router-link>
-        </div>
-        <div id="open-mobile-menu" class="navbar-hamburger get-started">
-          <img :alt="image_alt" :src="image_src" class="navbar-image" />
-        </div>
-      </div>
-    </div>
-    <div id="mobile-menu" class="navbar-mobile-menu">
-      <div class="navbar-branding">
-        <img :alt="image_alt1" :src="image_src1" class="navbar-image1" />
-        <div id="close-mobile-menu" class="navbar-container4">
-          <svg viewBox="0 0 1024 1024" class="navbar-icon">
-            <path
-              d="M225.835 286.165l225.835 225.835-225.835 225.835c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.835-225.835 225.835 225.835c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331l-225.835-225.835 225.835-225.835c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.835 225.835-225.835-225.835c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"
-            ></path>
-          </svg>
-        </div>
-      </div>
-      <div class="navbar-nav-links1">
-        <span class="navbar-link06 nav-link">Features</span>
-        <span class="nav-link">Why us</span>
-        <span class="nav-link">Prices</span>
-        <span class="nav-link">Contact</span>
-      </div>
-      <div class="get-started"><span class="navbar-text6">Get started</span></div>
-    </div>
-    <div>
-      <DangerousHTML
-        html="<script>
-      /*
-  Mobile menu - Code Embed
-  */
-  
-  /* listenForUrlChangesMobileMenu() makes sure that if you changes pages inside your app, 
-  the mobile menu will still work*/
-  
-  const listenForUrlChangesMobileMenu = () => {
-      let url = location.href;
-      document.body.addEventListener('click', () => {
-          requestAnimationFrame(() => {
-              if (url !== location.href) {
-                  runMobileMenuCodeEmbed();
-                  url = location.href;
-              }
-          });
-      },
-      true
-      );
-  };
-  
-  const runMobileMenuCodeEmbed = () => {
-      // Mobile menu
-      const mobileMenu = document.querySelector('#mobile-menu')
-  
-      // Buttons
-      const closeButton = document.querySelector('#close-mobile-menu')
-      const openButton = document.querySelector('#open-mobile-menu')
-  
-      // On openButton click, set the mobileMenu position left to -100vw
-      openButton && openButton.addEventListener('click', function() {
-          mobileMenu.style.transform = 'translateX(0%)'
-      })
-  
-      // On closeButton click, set the mobileMenu position to 0vw
-      closeButton && closeButton.addEventListener('click', function() {
-          mobileMenu.style.transform = 'translateX(100%)'
-      })
-  }
-  
-  runMobileMenuCodeEmbed()
-  listenForUrlChangesMobileMenu()
-  </script>"
-      ></DangerousHTML>
-    </div>
-  </nav>
-</template>
-
-<script>
-import DangerousHTML from 'dangerous-html/vue'
-
-export default {
-  name: 'Navbar',
-  props: {
-    image_src2: {
-      type: String,
-      default: '/playground_assets/logo_mitoffenemvisier_bw_png-200h.png',
-    },
-    image_alt: {
-      type: String,
-      default: 'e',
-    },
-    image_src1: {
-      type: String,
-      default:
-        'https://play.teleporthq.io/static/svg/placeholders/no-image.svg',
-    },
-    image_src: {
-      type: String,
-      default: '/playground_assets/hamburger-200h.png',
-    },
-    Link: {
-      type: String,
-      default: 'Rosenteufel',
-    },
-    image_alt1: {
-      type: String,
-      default: 'image',
-    },
-    image_alt2: {
-      type: String,
-      default: 'image',
-    },
-    Larpkonzept: {
-      type: String,
-      default: 'Larpkonzept',
-    },
-    rootClassName: String,
-    BrandingLogo: {
-      type: String,
-      default:
-        'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/08e9141c-e9e9-4d51-994d-22f260b21c68/0f4ac702-51a5-4a68-8182-06e3f427edb8?org_if_sml=14251',
-    },
-  },
-  components: {
-    DangerousHTML,
-  },
-}
-</script>
-
-<style scoped>
-.navbar-navbar {
-  width: 100%;
-  display: flex;
-  z-index: 1000;
-  position: relative;
-  max-width: 1200px;
-  align-self: auto;
-  align-items: center;
-  flex-shrink: 1;
-  padding-top: var(--dl-space-space-twounits);
-  padding-left: var(--dl-space-space-oneandhalfunits);
-  padding-right: var(--dl-space-space-oneandhalfunits);
-  padding-bottom: var(--dl-space-space-fiveunits);
-}
-.navbar-container {
-  flex: 0 0 auto;
-  width: auto;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-}
-.navbar-container1 {
-  flex: 0 0 auto;
-  width: auto;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-}
-.navbar-container2 {
-  flex: 0 0 auto;
-  width: auto;
-  height: auto;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-}
-.navbar-navlink {
-  display: contents;
-}
-.navbar-logo {
-  width: 100px;
-  object-fit: cover;
-  transition: 0.3s;
-  text-decoration: none;
-}
-
-.navbar-container3 {
-  flex: 0 0 auto;
-  width: auto;
-  height: auto;
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-}
-.navbar-nav-content {
-  gap: var(--dl-space-space-threeunits);
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  flex-direction: row;
-  justify-content: flex-end;
-}
-.navbar-nav-links {
-  gap: var(--dl-space-space-threeunits);
-  display: flex;
-  align-items: flex-start;
-  margin-left: var(--dl-space-space-twounits);
-  border-color: transparent;
-  justify-content: flex-end;
-}
-.navbar-link {
-  text-decoration: none;
-}
-.navbar-link01 {
-  text-decoration: none;
-}
-.navbar-link02 {
-  text-decoration: none;
-}
-.navbar-link03 {
-  text-decoration: none;
-}
-.navbar-link04 {
-  text-decoration: none;
-}
-.navbar-link05 {
-  text-decoration: none;
-}
-.navbar-hamburger {
-  display: none;
-}
-.navbar-image {
-  width: 100px;
-  object-fit: cover;
-}
-.navbar-mobile-menu {
-  gap: var(--dl-space-space-twounits);
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  padding: var(--dl-space-space-twounits);
-  z-index: 100;
-  position: fixed;
-  transform: translateX(100%);
-  transition: 0.3s;
-  align-items: stretch;
-  flex-direction: column;
-  background-color: #fff;
-}
-.navbar-branding {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.navbar-image1 {
-  width: 100px;
-  filter: brightness(0) saturate(100%);
-  object-fit: cover;
-}
-.navbar-container4 {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.navbar-icon {
-  width: 24px;
-  height: 24px;
-}
-.navbar-nav-links1 {
-  gap: var(--dl-space-space-unit);
-  color: var(--dl-color-gray-black);
-  display: flex;
-  flex-direction: column;
-}
-.navbar-link06 {
-  color: #ffffff;
-}
-.navbar-text6 {
-  color: rgba(255, 255, 255, 1);
-  align-self: auto;
-  font-style: Medium;
-  text-align: left;
-  font-family: Poppins;
-  font-weight: 500;
-  font-stretch: normal;
-  text-decoration: none;
-}
-
-
-
-
-
-
-@media(max-width: 767px) {
-  .navbar-navbar {
-    padding-bottom: var(--dl-space-space-fourunits);
-  }
-  .navbar-nav-links {
-    display: none;
-  }
-  .navbar-hamburger {
-    display: flex;
-    padding-left: var(--dl-space-space-unit);
-    padding-right: var(--dl-space-space-unit);
-  }
-  .navbar-image {
-    width: 16px;
-    height: 14px;
-  }
-  .navbar-branding {
-    width: 100%;
-  }
-  .navbar-nav-links1 {
-    margin-top: var(--dl-space-space-twounits);
-    align-items: flex-start;
-    margin-bottom: var(--dl-space-space-twounits);
-    justify-content: center;
-  }
-}
-</style>
diff --git a/src/components/navigation.vue b/src/components/navigation.vue
new file mode 100644
index 0000000..b12fbbd
--- /dev/null
+++ b/src/components/navigation.vue
@@ -0,0 +1,1052 @@
+<template>
+  <nav class="navigation-navbar" v-bind:class="rootClassName">
+    <header data-thq="thq-navbar" class="navigation-navbar-interactive">
+      <router-link to="/" class="navigation-navlink">
+        <img alt="image" :src="OpenvisorLogo" class="navigation-logo" />
+      </router-link>
+      <div
+        data-thq="thq-navbar-nav"
+        data-role="Nav"
+        class="navigation-desktop-menu"
+      >
+        <nav
+          data-thq="thq-navbar-nav-links"
+          data-role="Nav"
+          class="navigation-nav"
+        >
+          <router-link to="/" class="navigation-home nav-link">
+            {{ Home }}
+          </router-link>
+          <router-link to="/larpkonzept" class="navigation-larpkonzept">
+            {{ Larpkonzept }}
+          </router-link>
+          <div
+            data-thq="thq-dropdown"
+            class="navigation-larps-dropdown list-item"
+          >
+            <div
+              data-thq="thq-dropdown-toggle"
+              class="navigation-dropdown-toggle"
+            >
+              <span class="navigation-larps">{{ Larps }}</span>
+              <div
+                data-thq="thq-dropdown-arrow"
+                class="navigation-dropdown-arrow"
+              >
+                <svg viewBox="0 0 1024 1024" class="navigation-icon">
+                  <path d="M426 726v-428l214 214z"></path>
+                </svg>
+              </div>
+            </div>
+            <ul data-thq="thq-dropdown-list" class="navigation-dropdown-list">
+              <router-link to="/letzte-gelegenheit">
+                <li data-thq="thq-dropdown" class="navigation-dropdown list-item">
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navigation-dropdown-toggle01"
+                  >
+                    <span class="navigation-letzte-gelegenheit">
+                      {{ LetzteGelegenheit }}
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+              <router-link to="/suesse-traeume">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navigation-dropdown1 list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navigation-dropdown-toggle02"
+                  >
+                    <span class="navigation-suesse-traeume">
+                      {{ SuesseTraeume }}
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+            </ul>
+          </div>
+          <div
+            data-thq="thq-dropdown"
+            class="navigation-kurzgeschichten-dropdown list-item"
+          >
+            <div
+              data-thq="thq-dropdown-toggle"
+              class="navigation-dropdown-toggle03"
+            >
+              <span class="navigation-kurzgeschichten">
+                {{ Kurzgeschichten }}
+              </span>
+              <div
+                data-thq="thq-dropdown-arrow"
+                class="navigation-dropdown-arrow1"
+              >
+                <svg viewBox="0 0 1024 1024" class="navigation-icon02">
+                  <path d="M426 726v-428l214 214z"></path>
+                </svg>
+              </div>
+            </div>
+            <ul data-thq="thq-dropdown-list" class="navigation-dropdown-list1">
+              <router-link to="/ein-orden-fuer-eine-gute-tat">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navigation-dropdown2 list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navigation-dropdown-toggle04"
+                  >
+                    <span class="navigation-ein-orden-fuer-eine-gute-tat">
+                      {{ EinOrdenFuerEineGuteTat }}
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+              <router-link to="/rosenteufel">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navigation-dropdown3 list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navigation-dropdown-toggle05"
+                  >
+                    <span class="navigation-rosenteufel">{{ Rosenteufel }}</span>
+                  </div>
+                </li>
+              </router-link>
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div data-thq="thq-burger-menu" class="navigation-burger-menu">
+        <svg viewBox="0 0 1024 1024" class="navigation-icon04">
+          <path
+            d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
+          ></path>
+        </svg>
+      </div>
+      <div data-thq="thq-mobile-menu" class="navigation-mobile-menu">
+        <div
+          data-thq="thq-mobile-menu-nav"
+          data-role="Nav"
+          class="navigation-nav1"
+        >
+          <div class="navigation-nav-top">
+            <div data-thq="thq-close-menu" class="navigation-menu-close">
+              <svg viewBox="0 0 1024 1024" class="navigation-icon06">
+                <path
+                  d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
+                ></path>
+              </svg>
+            </div>
+          </div>
+          <nav
+            data-thq="thq-mobile-menu-nav-links"
+            data-role="Nav"
+            class="navigation-nav-body"
+          >
+            <router-link to="/" class="navigation-home1">{{ Home }}</router-link>
+            <router-link to="/larpkonzept" class="navigation-larpkonzept1">
+              {{ Larpkonzept }}
+            </router-link>
+            <div
+              data-thq="thq-dropdown"
+              class="navigation-larps-dropdown1 list-item"
+            >
+              <div
+                data-thq="thq-dropdown-toggle"
+                class="navigation-dropdown-toggle06"
+              >
+                <span class="navigation-larps1">{{ Larps }}</span>
+                <div
+                  data-thq="thq-dropdown-arrow"
+                  class="navigation-dropdown-arrow2"
+                >
+                  <svg viewBox="0 0 1024 1024" class="navigation-icon08">
+                    <path d="M426 726v-428l214 214z"></path>
+                  </svg>
+                </div>
+              </div>
+              <ul
+                data-thq="thq-dropdown-list"
+                class="navigation-larps-dropdown-list"
+              >
+                <router-link to="/letzte-gelegenheit">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navigation-letzte-gelegenheit-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navigation-dropdown-toggle07"
+                    >
+                      <span class="navigation-letzte-gelegenheit1">
+                        {{ LetzteGelegenheit }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+                <router-link to="/suesse-traeume">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navigation-suesse-traeume-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navigation-dropdown-toggle08"
+                    >
+                      <span class="navigation-suesse-traeume1">
+                        {{ SuesseTraeume }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+              </ul>
+            </div>
+            <div
+              data-thq="thq-dropdown"
+              class="navigation-kurzgeschichten-dropdown1 list-item"
+            >
+              <div
+                data-thq="thq-dropdown-toggle"
+                class="navigation-dropdown-toggle09"
+              >
+                <span class="navigation-kurzgeschichten1">
+                  {{ Kurzgeschichten }}
+                </span>
+                <div
+                  data-thq="thq-dropdown-arrow"
+                  class="navigation-dropdown-arrow3"
+                >
+                  <svg viewBox="0 0 1024 1024" class="navigation-icon10">
+                    <path d="M426 726v-428l214 214z"></path>
+                  </svg>
+                </div>
+              </div>
+              <ul
+                data-thq="thq-dropdown-list"
+                class="navigation-kurzgeschichten-dropdown-list"
+              >
+                <router-link to="/ein-orden-fuer-eine-gute-tat">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navigation-ein-orden-fuer-eine-gute-tat-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navigation-dropdown-toggle10"
+                    >
+                      <span class="navigation-ein-orden-fuer-eine-gute-tat1">
+                        {{ EinOrdenFuerEineGuteTat }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+                <router-link to="/rosenteufel">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navigation-rosenteufel-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navigation-dropdown-toggle11"
+                    >
+                      <span class="navigation-rosenteufel1">
+                        {{ Rosenteufel }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+              </ul>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </header>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'Navigation',
+  props: {
+    OpenvisorLogo: {
+      type: String,
+      default: '/playground_assets/logo_mitoffenemvisier_bw_png-1500h.png',
+    },
+    Kurzgeschichten: {
+      type: String,
+      default: 'Kurzgeschichten',
+    },
+    LetzteGelegenheit: {
+      type: String,
+      default: 'Letzte Gelegenheit',
+    },
+    Home: {
+      type: String,
+      default: 'Home',
+    },
+    Larps: {
+      type: String,
+      default: 'Larps',
+    },
+    EinOrdenFuerEineGuteTat: {
+      type: String,
+      default: 'Ein Orden für eine gute Tat',
+    },
+    SuesseTraeume: {
+      type: String,
+      default: 'Süsse Träume',
+    },
+    Larpkonzept: {
+      type: String,
+      default: 'Larpkonzept',
+    },
+    Rosenteufel: {
+      type: String,
+      default: 'Rosenteufel',
+    },
+    rootClassName: String,
+    image_alt: {
+      type: String,
+      default: 'image',
+    },
+  },
+}
+</script>
+
+<style scoped>
+.navigation-navbar {
+  width: 100%;
+  display: flex;
+  z-index: 1000;
+  position: relative;
+  max-width: 1200px;
+  align-self: auto;
+  align-items: center;
+  flex-shrink: 1;
+  padding-top: var(--dl-space-space-twounits);
+  padding-left: var(--dl-space-space-oneandhalfunits);
+  padding-right: var(--dl-space-space-oneandhalfunits);
+  padding-bottom: var(--dl-space-space-fiveunits);
+  justify-content: space-between;
+}
+.navigation-navbar-interactive {
+  width: 100%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  padding-top: var(--dl-space-space-twounits);
+  padding-left: var(--dl-space-space-threeunits);
+  padding-right: var(--dl-space-space-threeunits);
+  padding-bottom: var(--dl-space-space-twounits);
+  justify-content: space-between;
+}
+.navigation-navlink {
+  display: contents;
+}
+.navigation-logo {
+  width: 100px;
+  object-fit: cover;
+  transition: 0.3s;
+  text-decoration: none;
+}
+
+.navigation-desktop-menu {
+  display: flex;
+}
+.navigation-nav {
+  gap: var(--dl-space-space-fourunits);
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.navigation-home {
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.15;
+  text-decoration: none;
+}
+.navigation-larpkonzept {
+  color: #ffffff;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  text-decoration: none;
+}
+.navigation-larps-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navigation-dropdown-toggle {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: 0px;
+  border-radius: var(--dl-radius-radius-radius2);
+  padding-right: 0px;
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-larps {
+  color: #ffffff;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navigation-dropdown-arrow {
+  transition: 0.3s;
+}
+.navigation-icon {
+  fill: #ffffff;
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navigation-dropdown-list {
+  left: 0%;
+  width: max-content;
+  display: none;
+  z-index: 100;
+  position: absolute;
+  min-width: 100%;
+  transition: 0.3s;
+  align-items: stretch;
+  border-color: #D9D9D9;
+  border-width: 1px;
+  border-radius: var(--dl-radius-radius-radius4);
+  flex-direction: column;
+  list-style-type: none;
+  background-color: var(--dl-color-gray-white);
+  list-style-position: inside;
+}
+.navigation-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navigation-dropdown-toggle01 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  transition: 0.3s;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-dropdown-toggle01:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-letzte-gelegenheit {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navigation-dropdown1 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navigation-dropdown-toggle02 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  transition: 0.3s;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-dropdown-toggle02:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-suesse-traeume {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navigation-kurzgeschichten-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navigation-dropdown-toggle03 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: 0px;
+  border-radius: var(--dl-radius-radius-radius2);
+  padding-right: 0px;
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-kurzgeschichten {
+  color: #ffffff;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navigation-dropdown-arrow1 {
+  transition: 0.3s;
+}
+.navigation-icon02 {
+  fill: #ffffff;
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navigation-dropdown-list1 {
+  left: 0%;
+  width: max-content;
+  display: none;
+  z-index: 100;
+  position: absolute;
+  min-width: 100%;
+  transition: 0.3s;
+  align-items: stretch;
+  border-color: #D9D9D9;
+  border-width: 1px;
+  border-radius: var(--dl-radius-radius-radius4);
+  flex-direction: column;
+  list-style-type: none;
+  background-color: var(--dl-color-gray-white);
+  list-style-position: inside;
+}
+.navigation-dropdown2 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navigation-dropdown-toggle04 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  transition: 0.3s;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-dropdown-toggle04:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-ein-orden-fuer-eine-gute-tat {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navigation-dropdown3 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navigation-dropdown-toggle05 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  transition: 0.3s;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-dropdown-toggle05:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-rosenteufel {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navigation-burger-menu {
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+.navigation-icon04 {
+  width: 36px;
+  cursor: pointer;
+  height: 36px;
+  padding: 6px;
+  border-radius: 18px;
+  background-color: rgba(100, 100, 100, 0.4);
+}
+.navigation-mobile-menu {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  padding: 32px;
+  z-index: 100;
+  position: fixed;
+  transform: translateY(-100%);
+  transition: 0.5s;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: rgba(0,0,0,0.8);
+}
+.navigation-nav1 {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.navigation-nav-top {
+  width: auto;
+  display: flex;
+  align-items: flex-end;
+  margin-left: 90%;
+  justify-content: flex-end;
+}
+.navigation-menu-close {
+  display: flex;
+}
+.navigation-icon06 {
+  fill: #ffffff;
+  width: 30px;
+  cursor: pointer;
+  height: 30px;
+}
+.navigation-nav-body {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.navigation-home1 {
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-bottom: var(--dl-space-space-unit);
+  text-decoration: none;
+}
+.navigation-larpkonzept1 {
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-bottom: var(--dl-space-space-unit);
+  text-decoration: none;
+}
+.navigation-larps-dropdown1 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navigation-dropdown-toggle06 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius2);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-larps1 {
+  font-size: 14px;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navigation-dropdown-arrow2 {
+  transition: 0.3s;
+}
+.navigation-icon08 {
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navigation-larps-dropdown-list {
+  left: 0%;
+  width: max-content;
+  display: none;
+  z-index: 100;
+  position: absolute;
+  min-width: 100%;
+  transition: 0.3s;
+  align-items: stretch;
+  border-color: #D9D9D9;
+  border-width: 1px;
+  border-radius: var(--dl-radius-radius-radius4);
+  flex-direction: column;
+  list-style-type: none;
+  background-color: var(--dl-color-gray-white);
+  list-style-position: inside;
+}
+.navigation-letzte-gelegenheit-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navigation-dropdown-toggle07 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  transition: 0.3s;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-dropdown-toggle07:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-letzte-gelegenheit1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navigation-suesse-traeume-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navigation-dropdown-toggle08 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  transition: 0.3s;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-dropdown-toggle08:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-suesse-traeume1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navigation-kurzgeschichten-dropdown1 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navigation-dropdown-toggle09 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius2);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-kurzgeschichten1 {
+  font-size: 14px;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navigation-dropdown-arrow3 {
+  transition: 0.3s;
+}
+.navigation-icon10 {
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navigation-kurzgeschichten-dropdown-list {
+  left: 0%;
+  width: max-content;
+  display: none;
+  z-index: 100;
+  position: absolute;
+  min-width: 100%;
+  transition: 0.3s;
+  align-items: stretch;
+  border-color: #D9D9D9;
+  border-width: 1px;
+  border-radius: var(--dl-radius-radius-radius4);
+  flex-direction: column;
+  list-style-type: none;
+  background-color: var(--dl-color-gray-white);
+  list-style-position: inside;
+}
+.navigation-ein-orden-fuer-eine-gute-tat-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navigation-dropdown-toggle10 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  transition: 0.3s;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-dropdown-toggle10:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-ein-orden-fuer-eine-gute-tat1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navigation-rosenteufel-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navigation-dropdown-toggle11 {
+  fill: #595959;
+  color: #595959;
+  width: 100%;
+  display: inline-flex;
+  transition: 0.3s;
+  align-items: center;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: var(--dl-space-space-unit);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.navigation-dropdown-toggle11:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-rosenteufel1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+
+
+
+
+
+
+@media(max-width: 991px) {
+  .navigation-nav {
+    gap: var(--dl-space-space-twounits);
+    justify-content: center;
+  }
+}
+@media(max-width: 767px) {
+  .navigation-navbar {
+    padding-bottom: var(--dl-space-space-fourunits);
+  }
+  .navigation-navbar-interactive {
+    padding-left: TwoUnits;
+    padding-right: var(--dl-space-space-twounits);
+  }
+  .navigation-desktop-menu {
+    display: none;
+  }
+  .navigation-dropdown-list {
+    display: none;
+  }
+  .navigation-dropdown-list1 {
+    display: none;
+  }
+  .navigation-burger-menu {
+    display: flex;
+  }
+  .navigation-icon04 {
+    fill: #ffffff;
+  }
+  .navigation-home1 {
+    color: #ffffff;
+  }
+  .navigation-larpkonzept1 {
+    color: #ffffff;
+  }
+  .navigation-larps1 {
+    color: #ffffff;
+    font-size: 16px;
+  }
+  .navigation-icon08 {
+    fill: #ffffff;
+  }
+  .navigation-larps-dropdown-list {
+    display: none;
+    border-color: #000000;
+    background-color: rgb(41, 41, 41);
+  }
+  .navigation-letzte-gelegenheit1 {
+    color: #ffffff;
+  }
+  .navigation-suesse-traeume1 {
+    color: #ffffff;
+  }
+  .navigation-kurzgeschichten1 {
+    color: #ffffff;
+    font-size: 16px;
+  }
+  .navigation-icon10 {
+    fill: #ffffff;
+  }
+  .navigation-kurzgeschichten-dropdown-list {
+    display: none;
+    border-color: #000000;
+    background-color: rgb(41, 41, 41);
+  }
+  .navigation-ein-orden-fuer-eine-gute-tat1 {
+    color: #ffffff;
+  }
+  .navigation-rosenteufel1 {
+    color: #ffffff;
+  }
+}
+@media(max-width: 479px) {
+  .navigation-navbar {
+    border-color: var(--dl-color-gray-black);
+    border-width: 0px;
+  }
+  .navigation-navbar-interactive {
+    padding: var(--dl-space-space-unit);
+  }
+  .navigation-burger-menu {
+    width: auto;
+    height: auto;
+  }
+  .navigation-icon04 {
+    fill: transparent;
+    width: auto;
+    height: auto;
+    z-index: 110;
+    padding-top: 0px;
+    border-color: var(--dl-color-gray-black);
+    border-width: 0px;
+  }
+  .navigation-mobile-menu {
+    padding: 16px;
+  }
+  .navigation-icon08 {
+    fill: #ffffff;
+  }
+  .navigation-icon10 {
+    fill: #ffffff;
+  }
+  .navigation-root-class-name {
+    max-width: auto;
+  }
+}
+</style>
diff --git a/src/components/ein-orden-fr-eine-gute-tat.vue b/src/components/zusammenfassung-ein-orden-fuer-eine-gute-tat.vue
similarity index 60%
rename from src/components/ein-orden-fr-eine-gute-tat.vue
rename to src/components/zusammenfassung-ein-orden-fuer-eine-gute-tat.vue
index d0f72cd..19d16cf 100644
--- a/src/components/ein-orden-fr-eine-gute-tat.vue
+++ b/src/components/zusammenfassung-ein-orden-fuer-eine-gute-tat.vue
@@ -1,17 +1,26 @@
 <template>
-  <div class="ein-orden-fr-eine-gute-tat-container" v-bind:class="rootClassName">
-    <section class="ein-orden-fr-eine-gute-tat-card">
-      <main class="ein-orden-fr-eine-gute-tat-content">
-        <header class="ein-orden-fr-eine-gute-tat-header">
-          <h1 class="ein-orden-fr-eine-gute-tat-header1">{{ Header }}</h1>
+  <div
+    class="zusammenfassung-ein-orden-fuer-eine-gute-tat-container"
+    v-bind:class="rootClassName"
+  >
+    <section class="zusammenfassung-ein-orden-fuer-eine-gute-tat-card">
+      <main class="zusammenfassung-ein-orden-fuer-eine-gute-tat-content">
+        <header class="zusammenfassung-ein-orden-fuer-eine-gute-tat-header">
+          <h1 class="zusammenfassung-ein-orden-fuer-eine-gute-tat-header1">
+            {{ Header }}
+          </h1>
         </header>
-        <p class="ein-orden-fr-eine-gute-tat-description">{{ Description }}</p>
+        <p class="zusammenfassung-ein-orden-fuer-eine-gute-tat-description">
+          {{ Description }}
+        </p>
         <router-link
-          to="/ein-orden-fr-eine-gute-tat1"
-          class="ein-orden-fr-eine-gute-tat-navlink"
+          to="/ein-orden-fuer-eine-gute-tat"
+          class="zusammenfassung-ein-orden-fuer-eine-gute-tat-navlink"
         >
-          <div class="ein-orden-fr-eine-gute-tat-button">
-            <p class="ein-orden-fr-eine-gute-tat-text">{{ Button }}</p>
+          <div class="zusammenfassung-ein-orden-fuer-eine-gute-tat-button">
+            <p class="zusammenfassung-ein-orden-fuer-eine-gute-tat-text">
+              {{ Button }}
+            </p>
           </div>
         </router-link>
       </main>
@@ -21,7 +30,7 @@
 
 <script>
 export default {
-  name: 'EinOrdenFrEineGuteTat',
+  name: 'ZusammenfassungEinOrdenFuerEineGuteTat',
   props: {
     ButtonLink: String,
     Button: {
@@ -43,7 +52,7 @@ export default {
 </script>
 
 <style scoped>
-.ein-orden-fr-eine-gute-tat-container {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-container {
   width: 100%;
   height: 400px;
   display: flex;
@@ -51,7 +60,7 @@ export default {
   align-items: flex-start;
   flex-direction: column;
 }
-.ein-orden-fr-eine-gute-tat-card {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-card {
   gap: var(--dl-space-space-oneandhalfunits);
   flex: 1;
   display: flex;
@@ -63,20 +72,20 @@ export default {
   justify-content: flex-start;
   background-color: rgba(41, 41, 41, 0.8);
 }
-.ein-orden-fr-eine-gute-tat-content {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-content {
   gap: var(--dl-space-space-twounits);
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: flex-start;
 }
-.ein-orden-fr-eine-gute-tat-header {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-header {
   display: flex;
   align-items: flex-start;
   flex-direction: row;
   justify-content: flex-start;
 }
-.ein-orden-fr-eine-gute-tat-header1 {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-header1 {
   color: rgb(255, 255, 255);
   font-size: 24px;
   font-style: normal;
@@ -84,16 +93,16 @@ export default {
   font-weight: 600;
   line-height: 36px;
 }
-.ein-orden-fr-eine-gute-tat-description {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-description {
   color: #ffffff;
-  font-size: 20px;
+  font-size: 18px;
   font-family: Poppins;
   line-height: 28px;
 }
-.ein-orden-fr-eine-gute-tat-navlink {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-navlink {
   display: contents;
 }
-.ein-orden-fr-eine-gute-tat-button {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-button {
   gap: var(--dl-space-space-oneandhalfunits);
   cursor: pointer;
   display: flex;
@@ -106,23 +115,23 @@ export default {
   text-decoration: none;
   border-bottom-width: 1px;
 }
-.ein-orden-fr-eine-gute-tat-button:hover {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-button:hover {
   opacity: 0.5;
 }
-.ein-orden-fr-eine-gute-tat-text {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-text {
   color: #ffff00;
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
 }
-.ein-orden-fr-eine-gute-tat-root-class-name {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name {
   height: auto;
 }
-.ein-orden-fr-eine-gute-tat-root-class-name1 {
+.zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name1 {
   height: auto;
 }
 @media(max-width: 991px) {
-  .ein-orden-fr-eine-gute-tat-card {
+  .zusammenfassung-ein-orden-fuer-eine-gute-tat-card {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-oneandhalfunits);
     padding-right: var(--dl-space-space-oneandhalfunits);
diff --git a/src/components/letzte-gelegenheit.vue b/src/components/zusammenfassung-letzte-gelegenheit.vue
similarity index 63%
rename from src/components/letzte-gelegenheit.vue
rename to src/components/zusammenfassung-letzte-gelegenheit.vue
index 5de4961..862c3e9 100644
--- a/src/components/letzte-gelegenheit.vue
+++ b/src/components/zusammenfassung-letzte-gelegenheit.vue
@@ -1,13 +1,21 @@
 <template>
-  <section class="letzte-gelegenheit-card" v-bind:class="rootClassName">
-    <main class="letzte-gelegenheit-content">
-      <header class="letzte-gelegenheit-header">
-        <h1 class="letzte-gelegenheit-header1">{{ Header }}</h1>
+  <section
+    class="zusammenfassung-letzte-gelegenheit-card"
+    v-bind:class="rootClassName"
+  >
+    <main class="zusammenfassung-letzte-gelegenheit-content">
+      <header class="zusammenfassung-letzte-gelegenheit-header">
+        <h1 class="zusammenfassung-letzte-gelegenheit-header1">{{ Header }}</h1>
       </header>
-      <p class="letzte-gelegenheit-description">{{ Description }}</p>
-      <router-link to="/letzte-gelegenheit1" class="letzte-gelegenheit-navlink">
-        <div class="letzte-gelegenheit-button">
-          <p class="letzte-gelegenheit-text">{{ Mehr }}</p>
+      <p class="zusammenfassung-letzte-gelegenheit-description">
+        {{ Description }}
+      </p>
+      <router-link
+        to="/letzte-gelegenheit"
+        class="zusammenfassung-letzte-gelegenheit-navlink"
+      >
+        <div class="zusammenfassung-letzte-gelegenheit-button">
+          <p class="zusammenfassung-letzte-gelegenheit-text">{{ Mehr }}</p>
         </div>
       </router-link>
     </main>
@@ -16,7 +24,7 @@
 
 <script>
 export default {
-  name: 'LetzteGelegenheit',
+  name: 'ZusammenfassungLetzteGelegenheit',
   props: {
     rootClassName: String,
     Mehr: {
@@ -38,7 +46,7 @@ export default {
 </script>
 
 <style scoped>
-.letzte-gelegenheit-card {
+.zusammenfassung-letzte-gelegenheit-card {
   gap: var(--dl-space-space-oneandhalfunits);
   flex: 1;
   display: flex;
@@ -50,20 +58,20 @@ export default {
   justify-content: flex-start;
   background-color: rgba(41, 41, 41, 0.8);
 }
-.letzte-gelegenheit-content {
+.zusammenfassung-letzte-gelegenheit-content {
   gap: var(--dl-space-space-twounits);
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: flex-start;
 }
-.letzte-gelegenheit-header {
+.zusammenfassung-letzte-gelegenheit-header {
   display: flex;
   align-items: flex-start;
   flex-direction: row;
   justify-content: flex-start;
 }
-.letzte-gelegenheit-header1 {
+.zusammenfassung-letzte-gelegenheit-header1 {
   color: rgb(255, 255, 255);
   font-size: 24px;
   font-style: normal;
@@ -71,16 +79,16 @@ export default {
   font-weight: 600;
   line-height: 36px;
 }
-.letzte-gelegenheit-description {
+.zusammenfassung-letzte-gelegenheit-description {
   color: #ffffff;
-  font-size: 20px;
+  font-size: 18px;
   font-family: Poppins;
   line-height: 28px;
 }
-.letzte-gelegenheit-navlink {
+.zusammenfassung-letzte-gelegenheit-navlink {
   display: contents;
 }
-.letzte-gelegenheit-button {
+.zusammenfassung-letzte-gelegenheit-button {
   gap: var(--dl-space-space-oneandhalfunits);
   cursor: pointer;
   display: flex;
@@ -93,16 +101,16 @@ export default {
   text-decoration: none;
   border-bottom-width: 1px;
 }
-.letzte-gelegenheit-button:hover {
+.zusammenfassung-letzte-gelegenheit-button:hover {
   opacity: 0.5;
 }
-.letzte-gelegenheit-text {
+.zusammenfassung-letzte-gelegenheit-text {
   color: #ffff00;
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
 }
-.letzte-gelegenheit-root-class-name {
+.zusammenfassung-letzte-gelegenheit-root-class-name {
   width: 100%;
 }
 
@@ -114,15 +122,20 @@ export default {
 
 
 
-.letzte-gelegenheit-root-class-name10 {
+.zusammenfassung-letzte-gelegenheit-root-class-name10 {
   width: 100%;
 }
 @media(max-width: 991px) {
-  .letzte-gelegenheit-card {
+  .zusammenfassung-letzte-gelegenheit-card {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-oneandhalfunits);
     padding-right: var(--dl-space-space-oneandhalfunits);
     padding-bottom: var(--dl-space-space-twounits);
   }
 }
+@media(max-width: 767px) {
+  .zusammenfassung-letzte-gelegenheit-root-class-name {
+    height: 50%;
+  }
+}
 </style>
diff --git a/src/components/rosenteufel.vue b/src/components/zusammenfassung-rosenteufel.vue
similarity index 66%
rename from src/components/rosenteufel.vue
rename to src/components/zusammenfassung-rosenteufel.vue
index 821c98f..08ab6e5 100644
--- a/src/components/rosenteufel.vue
+++ b/src/components/zusammenfassung-rosenteufel.vue
@@ -1,14 +1,17 @@
 <template>
-  <div class="rosenteufel-container" v-bind:class="rootClassName">
-    <section class="rosenteufel-card">
-      <main class="rosenteufel-content">
-        <header class="rosenteufel-header">
-          <h1 class="rosenteufel-header1">{{ Header }}</h1>
+  <div class="zusammenfassung-rosenteufel-container" v-bind:class="rootClassName">
+    <section class="zusammenfassung-rosenteufel-card">
+      <main class="zusammenfassung-rosenteufel-content">
+        <header class="zusammenfassung-rosenteufel-header">
+          <h1 class="zusammenfassung-rosenteufel-header1">{{ Header }}</h1>
         </header>
-        <p class="rosenteufel-description">{{ Description }}</p>
-        <router-link to="/rosenteufel1" class="rosenteufel-navlink">
-          <div class="rosenteufel-button">
-            <p class="rosenteufel-text">{{ Lesen }}</p>
+        <p class="zusammenfassung-rosenteufel-description">{{ Description }}</p>
+        <router-link
+          to="/rosenteufel"
+          class="zusammenfassung-rosenteufel-navlink"
+        >
+          <div class="zusammenfassung-rosenteufel-button">
+            <p class="zusammenfassung-rosenteufel-text">{{ Lesen }}</p>
           </div>
         </router-link>
       </main>
@@ -18,7 +21,7 @@
 
 <script>
 export default {
-  name: 'Rosenteufel',
+  name: 'ZusammenfassungRosenteufel',
   props: {
     Lesen: {
       type: String,
@@ -40,7 +43,7 @@ export default {
 </script>
 
 <style scoped>
-.rosenteufel-container {
+.zusammenfassung-rosenteufel-container {
   width: 100%;
   height: 400px;
   display: flex;
@@ -48,7 +51,7 @@ export default {
   align-items: flex-start;
   flex-direction: column;
 }
-.rosenteufel-card {
+.zusammenfassung-rosenteufel-card {
   gap: var(--dl-space-space-oneandhalfunits);
   flex: 1;
   display: flex;
@@ -60,20 +63,20 @@ export default {
   justify-content: flex-start;
   background-color: rgba(41, 41, 41, 0.8);
 }
-.rosenteufel-content {
+.zusammenfassung-rosenteufel-content {
   gap: var(--dl-space-space-twounits);
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: flex-start;
 }
-.rosenteufel-header {
+.zusammenfassung-rosenteufel-header {
   display: flex;
   align-items: flex-start;
   flex-direction: row;
   justify-content: flex-start;
 }
-.rosenteufel-header1 {
+.zusammenfassung-rosenteufel-header1 {
   color: rgb(255, 255, 255);
   font-size: 24px;
   font-style: normal;
@@ -81,16 +84,16 @@ export default {
   font-weight: 600;
   line-height: 36px;
 }
-.rosenteufel-description {
+.zusammenfassung-rosenteufel-description {
   color: #ffffff;
-  font-size: 20px;
+  font-size: 18px;
   font-family: Poppins;
   line-height: 28px;
 }
-.rosenteufel-navlink {
+.zusammenfassung-rosenteufel-navlink {
   display: contents;
 }
-.rosenteufel-button {
+.zusammenfassung-rosenteufel-button {
   gap: var(--dl-space-space-oneandhalfunits);
   cursor: pointer;
   display: flex;
@@ -103,23 +106,23 @@ export default {
   text-decoration: none;
   border-bottom-width: 1px;
 }
-.rosenteufel-button:hover {
+.zusammenfassung-rosenteufel-button:hover {
   opacity: 0.5;
 }
-.rosenteufel-text {
+.zusammenfassung-rosenteufel-text {
   color: #ffff00;
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
 }
-.rosenteufel-root-class-name {
+.zusammenfassung-rosenteufel-root-class-name {
   height: auto;
 }
-.rosenteufel-root-class-name1 {
+.zusammenfassung-rosenteufel-root-class-name1 {
   height: auto;
 }
 @media(max-width: 991px) {
-  .rosenteufel-card {
+  .zusammenfassung-rosenteufel-card {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-oneandhalfunits);
     padding-right: var(--dl-space-space-oneandhalfunits);
diff --git a/src/components/ssse-trume.vue b/src/components/zusammenfassung-suesse-traeume.vue
similarity index 62%
rename from src/components/ssse-trume.vue
rename to src/components/zusammenfassung-suesse-traeume.vue
index 64d30e1..844098c 100644
--- a/src/components/ssse-trume.vue
+++ b/src/components/zusammenfassung-suesse-traeume.vue
@@ -1,14 +1,22 @@
 <template>
-  <div class="ssse-trume-container" v-bind:class="rootClassName">
-    <section class="ssse-trume-card">
-      <main class="ssse-trume-content">
-        <header class="ssse-trume-header">
-          <h1 class="ssse-trume-header1">{{ Header }}</h1>
+  <div
+    class="zusammenfassung-suesse-traeume-container"
+    v-bind:class="rootClassName"
+  >
+    <section class="zusammenfassung-suesse-traeume-card">
+      <main class="zusammenfassung-suesse-traeume-content">
+        <header class="zusammenfassung-suesse-traeume-header">
+          <h1 class="zusammenfassung-suesse-traeume-header1">{{ Header }}</h1>
         </header>
-        <p class="ssse-trume-description">{{ Description }}</p>
-        <router-link to="/ssse-trume1" class="ssse-trume-navlink">
-          <div class="ssse-trume-button">
-            <p class="ssse-trume-text">{{ Mehr }}</p>
+        <p class="zusammenfassung-suesse-traeume-description">
+          {{ Description }}
+        </p>
+        <router-link
+          to="/suesse-traeume"
+          class="zusammenfassung-suesse-traeume-navlink"
+        >
+          <div class="zusammenfassung-suesse-traeume-button">
+            <p class="zusammenfassung-suesse-traeume-text">{{ Mehr }}</p>
           </div>
         </router-link>
       </main>
@@ -18,7 +26,7 @@
 
 <script>
 export default {
-  name: 'SsseTrume',
+  name: 'ZusammenfassungSuesseTraeume',
   props: {
     Description: {
       type: String,
@@ -40,7 +48,7 @@ export default {
 </script>
 
 <style scoped>
-.ssse-trume-container {
+.zusammenfassung-suesse-traeume-container {
   width: 100%;
   height: 400px;
   display: flex;
@@ -48,7 +56,7 @@ export default {
   align-items: flex-start;
   flex-direction: column;
 }
-.ssse-trume-card {
+.zusammenfassung-suesse-traeume-card {
   gap: var(--dl-space-space-oneandhalfunits);
   flex: 1;
   display: flex;
@@ -60,20 +68,20 @@ export default {
   justify-content: flex-start;
   background-color: rgba(41, 41, 41, 0.8);
 }
-.ssse-trume-content {
+.zusammenfassung-suesse-traeume-content {
   gap: var(--dl-space-space-twounits);
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: flex-start;
 }
-.ssse-trume-header {
+.zusammenfassung-suesse-traeume-header {
   display: flex;
   align-items: flex-start;
   flex-direction: row;
   justify-content: flex-start;
 }
-.ssse-trume-header1 {
+.zusammenfassung-suesse-traeume-header1 {
   color: rgb(255, 255, 255);
   font-size: 24px;
   font-style: normal;
@@ -81,16 +89,16 @@ export default {
   font-weight: 600;
   line-height: 36px;
 }
-.ssse-trume-description {
+.zusammenfassung-suesse-traeume-description {
   color: #ffffff;
-  font-size: 20px;
+  font-size: 18px;
   font-family: Poppins;
   line-height: 28px;
 }
-.ssse-trume-navlink {
+.zusammenfassung-suesse-traeume-navlink {
   display: contents;
 }
-.ssse-trume-button {
+.zusammenfassung-suesse-traeume-button {
   gap: var(--dl-space-space-oneandhalfunits);
   cursor: pointer;
   display: flex;
@@ -103,36 +111,43 @@ export default {
   text-decoration: none;
   border-bottom-width: 1px;
 }
-.ssse-trume-button:hover {
+.zusammenfassung-suesse-traeume-button:hover {
   opacity: 0.5;
 }
-.ssse-trume-text {
+.zusammenfassung-suesse-traeume-text {
   color: #FFFF00;
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
 }
-.ssse-trume-root-class-name {
-  flex: 2;
+.zusammenfassung-suesse-traeume-root-class-name {
+  flex: 1;
   width: 100%;
   height: auto;
 }
-.ssse-trume-root-class-name1 {
+.zusammenfassung-suesse-traeume-root-class-name1 {
   flex: 1;
   width: auto;
   height: auto;
 }
-.ssse-trume-root-class-name2 {
+.zusammenfassung-suesse-traeume-root-class-name2 {
   flex: 2;
   width: 100%;
   height: auto;
 }
 @media(max-width: 991px) {
-  .ssse-trume-card {
+  .zusammenfassung-suesse-traeume-card {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-oneandhalfunits);
     padding-right: var(--dl-space-space-oneandhalfunits);
     padding-bottom: var(--dl-space-space-twounits);
   }
 }
+@media(max-width: 767px) {
+  .zusammenfassung-suesse-traeume-root-class-name {
+    flex: 1;
+    width: 100%;
+    height: 50%;
+  }
+}
 </style>
diff --git a/src/router.js b/src/router.js
index e765e42..19e6219 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,11 +2,11 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Meta from 'vue-meta'
 
-import SsseTrume1 from './views/ssse-trume1'
-import LarpKonzept1 from './views/larp-konzept1'
-import EinOrdenFrEineGuteTat1 from './views/ein-orden-fr-eine-gute-tat1'
-import LetzteGelegenheit1 from './views/letzte-gelegenheit1'
-import Rosenteufel1 from './views/rosenteufel1'
+import SsseTrume from './views/ssse-trume'
+import Larpkonzept from './views/larpkonzept'
+import EinOrdenFrEineGuteTat from './views/ein-orden-fr-eine-gute-tat'
+import LetzteGelegenheit from './views/letzte-gelegenheit'
+import Rosenteufel from './views/rosenteufel'
 import Home from './views/home'
 import './style.css'
 
@@ -16,29 +16,29 @@ export default new Router({
   mode: 'history',
   routes: [
     {
-      name: 'Ssse-Trume1',
-      path: '/ssse-trume1',
-      component: SsseTrume1,
+      name: 'Ssse-Trume',
+      path: '/suesse-traeume',
+      component: SsseTrume,
     },
     {
-      name: 'LarpKonzept1',
-      path: '/larp-konzept1',
-      component: LarpKonzept1,
+      name: 'Larpkonzept',
+      path: '/larpkonzept',
+      component: Larpkonzept,
     },
     {
-      name: 'Ein-Orden-fr-eine-gute-Tat1',
-      path: '/ein-orden-fr-eine-gute-tat1',
-      component: EinOrdenFrEineGuteTat1,
+      name: 'Ein-Orden-fr-eine-gute-Tat',
+      path: '/ein-orden-fuer-eine-gute-tat',
+      component: EinOrdenFrEineGuteTat,
     },
     {
-      name: 'Letzte-Gelegenheit1',
-      path: '/letzte-gelegenheit1',
-      component: LetzteGelegenheit1,
+      name: 'Letzte-Gelegenheit',
+      path: '/letzte-gelegenheit',
+      component: LetzteGelegenheit,
     },
     {
-      name: 'Rosenteufel1',
-      path: '/rosenteufel1',
-      component: Rosenteufel1,
+      name: 'Rosenteufel',
+      path: '/rosenteufel',
+      component: Rosenteufel,
     },
     {
       name: 'Home',
diff --git a/src/style.css b/src/style.css
index 6e12de8..3ce08f8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -72,7 +72,7 @@
 }
 .teleport-show {
   display: flex !important;
-  transform: none !important;
+  transform: translateY(0%) !important;
 }
 .nav-link {
   color: #fff;
@@ -129,9 +129,10 @@
 .section-head {
   color: rgb(128, 255, 68);
   font-style: normal;
+  text-align: center;
   font-family: Poppins;
   font-weight: 500;
-  line-height: 24px;
+  line-height: 36px;
   letter-spacing: 2px;
   text-transform: uppercase;
 }
@@ -218,6 +219,28 @@
   font-family: Poppins;
   line-height: 21px;
 }
+.site-title {
+  color: rgb(255, 255, 255);
+  font-size: 56px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+}
+.round-borders {
+  flex: 0 0 auto;
+  width: 1080px;
+  display: flex;
+  margin-top: var(--dl-space-space-twounits);
+  align-items: center;
+  padding-top: var(--dl-space-space-twounits);
+  padding-left: var(--dl-space-space-twounits);
+  border-radius: 2%;
+  padding-right: var(--dl-space-space-twounits);
+  flex-direction: column;
+  padding-bottom: var(--dl-space-space-twounits);
+  justify-content: center;
+  background-color: rgba(41, 41, 41, 0.8);
+}
 .Heading {
   font-size: 32px;
   font-family: Inter;
@@ -234,7 +257,11 @@
   text-transform: none;
   text-decoration: none;
 }
-
+@media(max-width: 991px) {
+  .site-title {
+    text-align: center;
+  }
+}
 @media(max-width: 767px) {
   .nav-link {
     color: black;
@@ -242,6 +269,9 @@
   .accordion-element {
     gap: var(--dl-space-space-oneandhalfunits);
   }
+  .round-borders {
+    width: 90%;
+  }
 }
 @media(max-width: 479px) {
   .accordion-element {
diff --git a/src/views/ein-orden-fr-eine-gute-tat.vue b/src/views/ein-orden-fr-eine-gute-tat.vue
new file mode 100644
index 0000000..b1fde8b
--- /dev/null
+++ b/src/views/ein-orden-fr-eine-gute-tat.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="ein-orden-fr-eine-gute-tat-container">
+    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
+    <h1 class="ein-orden-fr-eine-gute-tat-heading site-title">
+      <span>Ein Orden für eine gute Tat</span>
+      <br />
+    </h1>
+    <span class="ein-orden-fr-eine-gute-tat-caption">
+      <span>Eine moralische Kurzgeschichte für Kinder</span>
+      <br />
+    </span>
+    <div class="ein-orden-fr-eine-gute-tat-beschreibung round-borders">
+      <span class="ein-orden-fr-eine-gute-tat-text04">
+        <span class="ein-orden-fr-eine-gute-tat-text05">
+          Ein brauner Schneehase besucht ein ein Rothörnchen und ein Grauhörnchen
+          im vom Herbst bunt gefärbten Wald. Er hat einen Orden, den er für eine
+          gute Tat vergeben möchte. Doch welches Hörnchen schafft es, diesen zu
+          bekommen?
+        </span>
+        <br class="ein-orden-fr-eine-gute-tat-text06" />
+        <br class="ein-orden-fr-eine-gute-tat-text07" />
+        <span class="ein-orden-fr-eine-gute-tat-text08">
+          Diese Kurzgeschichte für Kinder und Eltern stellt spielerisch eine
+          moralische Frage dar, dessen Antwort das Elternteil oder das Kind selbst
+          finden muss. Es soll das Kind unterhalten und zugleich mit einer
+          einfachen aber doch spannenden Fragestellung bilden.
+        </span>
+        <br />
+        <br />
+        <span> · 28 Seiten</span>
+        <br />
+        <span> · 14 Illustrationen</span>
+        <br />
+      </span>
+      <img
+        alt="image"
+        src="/playground_assets/buch-vorderseite-schrift-1400w.png"
+        class="ein-orden-fr-eine-gute-tat-image"
+      />
+    </div>
+    <app-kontakt rootClassName="kontakt-root-class-name4"></app-kontakt>
+  </div>
+</template>
+
+<script>
+import AppNavigation from '../components/navigation'
+import AppKontakt from '../components/kontakt'
+
+export default {
+  name: 'EinOrdenFrEineGuteTat',
+  components: {
+    AppNavigation,
+    AppKontakt,
+  },
+  metaInfo: {
+    title: 'Ein-Orden-fr-eine-gute-Tat - Open Visor',
+    meta: [
+      {
+        property: 'og:title',
+        content: 'Ein-Orden-fr-eine-gute-Tat - Open Visor',
+      },
+    ],
+  },
+}
+</script>
+
+<style scoped>
+.ein-orden-fr-eine-gute-tat-container {
+  width: 100%;
+  display: flex;
+  overflow: auto;
+  min-height: 100vh;
+  overflow-x: hidden;
+  align-items: center;
+  flex-direction: column;
+  background-size: cover;
+  background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
+}
+.ein-orden-fr-eine-gute-tat-heading {
+  color: rgb(255, 255, 255);
+  font-size: 64px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 600;
+}
+.ein-orden-fr-eine-gute-tat-caption {
+  color: rgb(255, 255, 255);
+  font-size: 20px;
+  font-family: Poppins;
+  line-height: 30px;
+}
+.ein-orden-fr-eine-gute-tat-beschreibung {
+  width: 90%;
+  max-width: 1080px;
+}
+.ein-orden-fr-eine-gute-tat-text04 {
+  color: rgb(255, 255, 255);
+}
+.ein-orden-fr-eine-gute-tat-text05 {
+  font-style: italic;
+}
+.ein-orden-fr-eine-gute-tat-text06 {
+  font-style: italic;
+}
+.ein-orden-fr-eine-gute-tat-text07 {
+  font-style: italic;
+}
+.ein-orden-fr-eine-gute-tat-text08 {
+  font-style: italic;
+}
+.ein-orden-fr-eine-gute-tat-image {
+  width: 100%;
+  height: 100%;
+  margin-top: var(--dl-space-space-twounits);
+  object-fit: cover;
+}
+@media(max-width: 991px) {
+  .ein-orden-fr-eine-gute-tat-heading {
+    text-align: center;
+  }
+  .ein-orden-fr-eine-gute-tat-caption {
+    text-align: left;
+  }
+  .ein-orden-fr-eine-gute-tat-beschreibung {
+    width: 90%;
+  }
+}
+@media(max-width: 767px) {
+  .ein-orden-fr-eine-gute-tat-heading {
+    width: 70%;
+    font-size: 40px;
+  }
+  .ein-orden-fr-eine-gute-tat-caption {
+    color: rgb(255, 255, 255);
+    font-size: 16px;
+    font-family: Poppins;
+    line-height: 24px;
+  }
+  .ein-orden-fr-eine-gute-tat-text04 {
+    width: auto;
+  }
+}
+@media(max-width: 479px) {
+  .ein-orden-fr-eine-gute-tat-heading {
+    max-width: 70%;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/views/ein-orden-fr-eine-gute-tat1.vue b/src/views/ein-orden-fr-eine-gute-tat1.vue
deleted file mode 100644
index 2586b9a..0000000
--- a/src/views/ein-orden-fr-eine-gute-tat1.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div class="ein-orden-fr-eine-gute-tat1-container">
-    <app-navbar rootClassName="navbar-root-class-name"></app-navbar>
-    <h1 class="ein-orden-fr-eine-gute-tat1-heading">
-      <span>Ein Orden für eine gute Tat</span>
-      <br />
-    </h1>
-    <span class="ein-orden-fr-eine-gute-tat1-caption">
-      <span>Eine moralische Kurzgeschichte für Kinder</span>
-      <br />
-    </span>
-    <div class="ein-orden-fr-eine-gute-tat1-container1">
-      <span class="ein-orden-fr-eine-gute-tat1-text04">
-        <span class="ein-orden-fr-eine-gute-tat1-text05">
-          Ein brauner Schneehase besucht ein ein Rothörnchen und ein Grauhörnchen
-          im vom Herbst bunt gefärbten Wald. Er hat einen Orden, den er für eine
-          gute Tat vergeben möchte. Doch welches Hörnchen schafft es, diesen zu
-          bekommen?
-        </span>
-        <br class="ein-orden-fr-eine-gute-tat1-text06" />
-        <br class="ein-orden-fr-eine-gute-tat1-text07" />
-        <span class="ein-orden-fr-eine-gute-tat1-text08">
-          Diese Kurzgeschichte für Kinder und Eltern stellt spielerisch eine
-          moralische Frage dar, dessen Antwort das Elternteil oder das Kind selbst
-          finden muss. Es soll das Kind unterhalten und zugleich mit einer
-          einfachen aber doch spannenden Fragestellung bilden.
-        </span>
-        <br />
-        <br />
-        <span> · 28 Seiten</span>
-        <br />
-        <span> · 14 Illustrationen</span>
-        <br />
-        <span> ·  A5 waagerecht</span>
-        <br />
-        <span> · drahtgebunden</span>
-        <br />
-        <span> · dickes Papier</span>
-        <br />
-        <span> · CHF 10.- pro Stück</span>
-        <br />
-        <span> · CHF 8.- pro Stück ab 3 Exemplare</span>
-        <br />
-        <br />
-        <span>
-          Bei Interesse schreiben Sie bitte eine E-Mail an:
-          <span v-html="raw41ge"></span>
-        </span>
-        <a
-          href="mailto:info@openvisor.ch?subject="
-          class="ein-orden-fr-eine-gute-tat1-link"
-        >
-          info@openvisor.ch
-        </a>
-        <br />
-      </span>
-      <img
-        alt="image"
-        src="/playground_assets/buch-vorderseite-schrift-1100w.png"
-        class="ein-orden-fr-eine-gute-tat1-image"
-      />
-    </div>
-    <app-footer rootClassName="footer-root-class-name4"></app-footer>
-  </div>
-</template>
-
-<script>
-import AppNavbar from '../components/navbar'
-import AppFooter from '../components/footer'
-
-export default {
-  name: 'EinOrdenFrEineGuteTat1',
-  components: {
-    AppNavbar,
-    AppFooter,
-  },
-
-  data() {
-    return {
-      raw41ge: ' ',
-    }
-  },
-
-  metaInfo: {
-    title: 'Ein-Orden-fr-eine-gute-Tat1 - Open Visor',
-    meta: [
-      {
-        property: 'og:title',
-        content: 'Ein-Orden-fr-eine-gute-Tat1 - Open Visor',
-      },
-    ],
-  },
-}
-</script>
-
-<style scoped>
-.ein-orden-fr-eine-gute-tat1-container {
-  width: 100%;
-  display: flex;
-  overflow: auto;
-  min-height: 100vh;
-  overflow-x: hidden;
-  align-items: center;
-  flex-direction: column;
-  background-size: cover;
-  background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
-}
-.ein-orden-fr-eine-gute-tat1-heading {
-  color: rgb(255, 255, 255);
-  font-size: 64px;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 600;
-}
-.ein-orden-fr-eine-gute-tat1-caption {
-  color: rgb(255, 255, 255);
-  font-size: 20px;
-  font-family: Poppins;
-  line-height: 30px;
-}
-.ein-orden-fr-eine-gute-tat1-container1 {
-  flex: 0 0 auto;
-  width: 1080px;
-  display: flex;
-  margin-top: var(--dl-space-space-twounits);
-  align-items: center;
-  padding-top: var(--dl-space-space-twounits);
-  padding-left: var(--dl-space-space-twounits);
-  padding-right: var(--dl-space-space-twounits);
-  flex-direction: column;
-  padding-bottom: var(--dl-space-space-twounits);
-  justify-content: center;
-  background-color: rgba(41, 41, 41, 0.8);
-}
-.ein-orden-fr-eine-gute-tat1-text04 {
-  color: rgb(255, 255, 255);
-}
-.ein-orden-fr-eine-gute-tat1-text05 {
-  font-style: italic;
-}
-.ein-orden-fr-eine-gute-tat1-text06 {
-  font-style: italic;
-}
-.ein-orden-fr-eine-gute-tat1-text07 {
-  font-style: italic;
-}
-.ein-orden-fr-eine-gute-tat1-text08 {
-  font-style: italic;
-}
-.ein-orden-fr-eine-gute-tat1-link {
-  color: #ffff00;
-  font-style: normal;
-  font-weight: 500;
-  text-decoration: underline;
-}
-.ein-orden-fr-eine-gute-tat1-image {
-  width: 100%;
-  height: 100%;
-  margin-top: var(--dl-space-space-twounits);
-  object-fit: cover;
-}
-@media(max-width: 991px) {
-  .ein-orden-fr-eine-gute-tat1-heading {
-    text-align: left;
-  }
-  .ein-orden-fr-eine-gute-tat1-caption {
-    text-align: left;
-  }
-}
-@media(max-width: 767px) {
-  .ein-orden-fr-eine-gute-tat1-heading {
-    font-size: 40px;
-  }
-  .ein-orden-fr-eine-gute-tat1-caption {
-    color: rgb(255, 255, 255);
-    font-size: 16px;
-    font-family: Poppins;
-    line-height: 24px;
-  }
-}
-@media(max-width: 479px) {
-  .ein-orden-fr-eine-gute-tat1-heading {
-    max-width: 280px;
-  }
-}
-</style>
diff --git a/src/views/home.vue b/src/views/home.vue
index 0e8c848..bd26005 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home-container">
-    <app-navbar rootClassName="navbar-root-class-name"></app-navbar>
-    <h1 class="home-heading">
+    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
+    <h1 class="site-title">
       <span>Open Visor</span>
       <br />
     </h1>
@@ -9,74 +9,89 @@
       <span>Mit Offenem Visier</span>
       <br />
     </span>
-    <section class="home-section">
+    <section class="home-kommende-veranstaltungen">
       <header class="home-header">
-        <span class="home-section1 section-head">Kommende Veranstaltungen</span>
+        <h2 class="home-section section-head">Kommende Veranstaltungen</h2>
       </header>
-      <div class="home-container1">
-        <div class="home-dotted-line"></div>
-        <letzte-gelegenheit-run1 Datum="April 2023"></letzte-gelegenheit-run1>
-        <div class="home-dotted-line1"></div>
-        <letzte-gelegenheit-run2
-          Datum="Mai 2023"
-          Standort="TBD"
-          rootClassName="letzte-gelegenheit-run2-root-class-name"
-        ></letzte-gelegenheit-run2>
-        <div class="home-dotted-line2"></div>
+      <div class="home-veranstaltungen-liste">
+        <div class="home-letzte-gelegenheit-run1">
+          <h3 class="home-heading1">Letzte Gelegenheit Run 1 (Schweiz)</h3>
+          <p class="home-description">
+            1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr
+          </p>
+          <p class="home-description1">
+            Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen
+          </p>
+          <router-link to="/letzte-gelegenheit" class="home-navlink">
+            <div class="home-explore-more">
+              <p class="home-text4">Mehr -&gt;</p>
+            </div>
+          </router-link>
+        </div>
+        <div class="home-letzte-gelegenheit-run2">
+          <h3 class="home-heading2">Letzte Gelegenheit Run 2 (Deutschland)</h3>
+          <p class="home-description2">
+            15. April 2023, 10:00 Uhr bis 16. April 2023, 14:00 Uhr
+          </p>
+          <p class="home-description3">coming soon</p>
+          <router-link to="/letzte-gelegenheit" class="home-navlink1">
+            <div class="home-explore-more1">
+              <p class="home-text5">Mehr -&gt;</p>
+            </div>
+          </router-link>
+        </div>
       </div>
     </section>
-    <section class="home-section2">
+    <section class="home-larps">
       <header class="home-header1">
-        <span class="home-section3 section-head">LARPs</span>
+        <h2 class="home-section1 section-head">LARPs</h2>
       </header>
       <main class="home-cards">
-        <letzte-gelegenheit
-          rootClassName="letzte-gelegenheit-root-class-name"
-        ></letzte-gelegenheit>
-        <ssse-trume rootClassName="ssse-trume-root-class-name"></ssse-trume>
+        <zusammenfassung-letzte-gelegenheit
+          rootClassName="zusammenfassung-letzte-gelegenheit-root-class-name"
+        ></zusammenfassung-letzte-gelegenheit>
+        <zusammenfassung-suesse-traeume
+          rootClassName="zusammenfassung-suesse-traeume-root-class-name"
+        ></zusammenfassung-suesse-traeume>
       </main>
     </section>
-    <section class="home-section4">
+    <section class="home-kurzgeschichten">
       <header class="home-header2">
-        <span class="home-section5 section-head">
+        <h2 class="home-section2 section-head">
           <span>Kurzgeschichten</span>
           <br />
-        </span>
+        </h2>
       </header>
       <main class="home-cards1">
-        <ein-orden-fr-eine-gute-tat
-          rootClassName="ein-orden-fr-eine-gute-tat-root-class-name"
-        ></ein-orden-fr-eine-gute-tat>
-        <app-rosenteufel
-          rootClassName="rosenteufel-root-class-name"
-        ></app-rosenteufel>
+        <zusammenfassung-ein-orden-fuer-eine-gute-tat
+          rootClassName="zusammenfassung-ein-orden-fuer-eine-gute-tat-root-class-name"
+        ></zusammenfassung-ein-orden-fuer-eine-gute-tat>
+        <zusammenfassung-rosenteufel
+          rootClassName="zusammenfassung-rosenteufel-root-class-name"
+        ></zusammenfassung-rosenteufel>
       </main>
     </section>
-    <app-footer></app-footer>
+    <app-kontakt></app-kontakt>
   </div>
 </template>
 
 <script>
-import AppNavbar from '../components/navbar'
-import LetzteGelegenheitRun1 from '../components/letzte-gelegenheit-run1'
-import LetzteGelegenheitRun2 from '../components/letzte-gelegenheit-run2'
-import LetzteGelegenheit from '../components/letzte-gelegenheit'
-import SsseTrume from '../components/ssse-trume'
-import EinOrdenFrEineGuteTat from '../components/ein-orden-fr-eine-gute-tat'
-import AppRosenteufel from '../components/rosenteufel'
-import AppFooter from '../components/footer'
+import AppNavigation from '../components/navigation'
+import ZusammenfassungLetzteGelegenheit from '../components/zusammenfassung-letzte-gelegenheit'
+import ZusammenfassungSuesseTraeume from '../components/zusammenfassung-suesse-traeume'
+import ZusammenfassungEinOrdenFuerEineGuteTat from '../components/zusammenfassung-ein-orden-fuer-eine-gute-tat'
+import ZusammenfassungRosenteufel from '../components/zusammenfassung-rosenteufel'
+import AppKontakt from '../components/kontakt'
 
 export default {
   name: 'Home',
   components: {
-    AppNavbar,
-    LetzteGelegenheitRun1,
-    LetzteGelegenheitRun2,
-    LetzteGelegenheit,
-    SsseTrume,
-    EinOrdenFrEineGuteTat,
-    AppRosenteufel,
-    AppFooter,
+    AppNavigation,
+    ZusammenfassungLetzteGelegenheit,
+    ZusammenfassungSuesseTraeume,
+    ZusammenfassungEinOrdenFuerEineGuteTat,
+    ZusammenfassungRosenteufel,
+    AppKontakt,
   },
   metaInfo: {
     title: 'Open Visor',
@@ -102,20 +117,13 @@ export default {
   background-size: cover;
   background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
 }
-.home-heading {
-  color: rgb(255, 255, 255);
-  font-size: 64px;
-  font-style: normal;
-  font-family: Fira Sans;
-  font-weight: 500;
-}
 .home-caption {
   color: rgb(255, 255, 255);
   font-size: 20px;
   font-family: Fira Sans;
   line-height: 30px;
 }
-.home-section {
+.home-kommende-veranstaltungen {
   gap: var(--dl-space-space-halfunit);
   flex: 1;
   width: 100%;
@@ -143,59 +151,159 @@ export default {
   padding-bottom: var(--dl-space-space-oneandhalfunits);
   justify-content: center;
 }
-.home-section1 {
+.home-section {
   color: #ffffff;
   font-size: 36px;
 }
-.home-container1 {
+.home-veranstaltungen-liste {
   flex: 0 0 auto;
-  width: auto;
+  width: 99%;
   display: flex;
+  max-width: 1080px;
   align-items: flex-start;
   flex-direction: column;
   background-color: rgba(41, 41, 41, 0.8);
 }
-.home-dotted-line {
-  gap: var(--dl-space-space-fiveunits);
-  flex: 1;
-  width: 100%;
-  border: 2px dashed rgba(120, 120, 120, 0.4);
-  display: flex;
-  align-items: center;
-  border-color: rgba(200, 200, 200, 0.8);
-  border-width: 0px;
-  flex-direction: column;
-  justify-content: center;
-  border-top-width: 3px;
-}
-.home-dotted-line1 {
-  gap: var(--dl-space-space-fiveunits);
-  flex: 1;
-  width: 100%;
-  border: 2px dashed rgba(120, 120, 120, 0.4);
-  display: flex;
-  align-items: center;
-  border-color: rgba(200, 200, 200, 0.8);
-  border-width: 0px;
-  flex-direction: column;
-  justify-content: center;
-  border-top-width: 3px;
-}
-.home-dotted-line2 {
-  gap: var(--dl-space-space-fiveunits);
-  flex: 1;
+.home-letzte-gelegenheit-run1 {
+  gap: var(--dl-space-space-unit);
+  flex: 0 0 auto;
   width: 100%;
   display: flex;
+  position: relative;
+  align-self: flex-start;
   align-items: center;
   border-color: rgba(200, 200, 200, 0.8);
   border-style: dashed;
   border-width: 0px;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   border-top-width: 3px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 3px;
 }
-.home-section2 {
-  gap: var(--dl-space-space-fiveunits);
+.home-heading1 {
+  color: rgb(255, 255, 255);
+  width: 34%;
+  font-size: 24px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-unit);
+}
+.home-description {
+  color: #ffffff;
+  width: 24%;
+  height: auto;
+  font-family: Poppins;
+  line-height: 28px;
+}
+.home-description1 {
+  color: #ffffff;
+  width: 28%;
+  font-family: Poppins;
+  line-height: 28px;
+}
+.home-navlink {
+  display: contents;
+}
+.home-explore-more {
+  gap: var(--dl-space-space-oneandhalfunits);
+  width: 60px;
+  cursor: pointer;
+  display: flex;
+  transition: 0.3s;
+  align-items: center;
+  border-color: #FFFF00;
+  margin-right: var(--dl-space-space-unit);
+  flex-direction: column;
+  padding-bottom: var(--dl-space-space-halfunit);
+  justify-content: center;
+  text-decoration: none;
+  border-bottom-width: 1px;
+}
+.home-explore-more:hover {
+  opacity: 0.5;
+}
+.home-text4 {
+  color: #FFFF00;
+  width: auto;
+  height: auto;
+  align-self: center;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+}
+.home-letzte-gelegenheit-run2 {
+  gap: var(--dl-space-space-unit);
+  flex: 0 0 auto;
+  width: 100%;
+  display: flex;
+  position: relative;
+  align-self: flex-start;
+  align-items: center;
+  border-color: rgba(200, 200, 200, 0.8);
+  border-style: dashed;
+  border-width: 0px;
+  justify-content: flex-start;
+  border-top-width: 0px;
+  border-bottom-width: 3px;
+}
+.home-heading2 {
+  color: rgb(255, 255, 255);
+  width: 34%;
+  height: auto;
+  font-size: 24px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-unit);
+}
+.home-description2 {
+  color: rgb(255, 255, 255);
+  width: 24%;
+  height: auto;
+  font-family: Poppins;
+  line-height: 28px;
+}
+.home-description3 {
+  color: rgb(255, 255, 255);
+  width: 28%;
+  font-family: Poppins;
+  line-height: 28px;
+  margin-right: 0px;
+}
+.home-navlink1 {
+  display: contents;
+}
+.home-explore-more1 {
+  gap: var(--dl-space-space-oneandhalfunits);
+  width: 60px;
+  cursor: pointer;
+  display: flex;
+  transition: 0.3s;
+  align-items: center;
+  border-color: #ffff00;
+  margin-right: var(--dl-space-space-unit);
+  flex-direction: column;
+  padding-bottom: var(--dl-space-space-halfunit);
+  justify-content: center;
+  text-decoration: none;
+  border-bottom-width: 1px;
+}
+.home-explore-more1:hover {
+  opacity: 0.5;
+}
+.home-text5 {
+  color: #ffff00;
+  width: 60px;
+  height: auto;
+  align-self: center;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+}
+.home-larps {
+  gap: var(--dl-space-space-twounits);
   flex: 1;
   width: 100%;
   height: auto;
@@ -217,7 +325,7 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
-.home-section3 {
+.home-section1 {
   color: rgb(255, 255, 255);
   font-size: 36px;
   text-transform: capitalize;
@@ -231,8 +339,8 @@ export default {
   flex-direction: row;
   justify-content: center;
 }
-.home-section4 {
-  gap: var(--dl-space-space-fiveunits);
+.home-kurzgeschichten {
+  gap: var(--dl-space-space-twounits);
   flex: 1;
   width: 100%;
   display: flex;
@@ -255,7 +363,7 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
-.home-section5 {
+.home-section2 {
   color: #ffffff;
   font-size: 36px;
   text-transform: uppercase;
@@ -270,40 +378,99 @@ export default {
   justify-content: center;
 }
 @media(max-width: 991px) {
-  .home-heading {
-    text-align: left;
-  }
   .home-caption {
     text-align: left;
   }
-  .home-dotted-line {
-    display: none;
+  .home-veranstaltungen-liste {
+    width: 99%;
   }
-  .home-dotted-line1 {
-    display: none;
+  .home-letzte-gelegenheit-run1 {
+    padding-top: var(--dl-space-space-unit);
+    flex-direction: column;
+    padding-bottom: var(--dl-space-space-unit);
   }
-  .home-dotted-line2 {
-    display: none;
+  .home-heading1 {
+    font-size: 24px;
+    text-align: center;
+  }
+  .home-letzte-gelegenheit-run2 {
+    padding-top: var(--dl-space-space-unit);
+    flex-direction: column;
+    padding-bottom: var(--dl-space-space-unit);
+  }
+  .home-description3 {
+    text-align: center;
   }
   .home-cards {
     gap: var(--dl-space-space-halfunit);
+    flex-direction: column;
   }
   .home-cards1 {
     gap: var(--dl-space-space-halfunit);
+    flex-direction: column;
   }
 }
 @media(max-width: 767px) {
-  .home-heading {
-    font-size: 40px;
-  }
   .home-caption {
     color: rgb(255, 255, 255);
     font-size: 16px;
     font-family: Poppins;
     line-height: 24px;
   }
+  .home-kommende-veranstaltungen {
+    width: auto;
+    border-color: transparent;
+  }
+  .home-veranstaltungen-liste {
+    flex-wrap: wrap;
+  }
+  .home-letzte-gelegenheit-run1 {
+    flex: 1;
+    width: auto;
+    flex-wrap: wrap;
+    align-self: center;
+    padding-top: var(--dl-space-space-unit);
+    flex-direction: column;
+    padding-bottom: var(--dl-space-space-unit);
+  }
+  .home-heading1 {
+    width: auto;
+    height: auto;
+    font-size: 28px;
+    text-align: center;
+  }
+  .home-description {
+    width: 200px;
+    height: auto;
+  }
+  .home-description1 {
+    width: 260px;
+    text-align: center;
+  }
+  .home-letzte-gelegenheit-run2 {
+    flex: auto;
+    width: auto;
+    flex-wrap: wrap;
+    align-self: center;
+    padding-top: var(--dl-space-space-unit);
+    flex-direction: column;
+    padding-bottom: var(--dl-space-space-unit);
+  }
+  .home-heading2 {
+    height: auto;
+    font-size: 28px;
+    text-align: center;
+  }
+  .home-description2 {
+    height: auto;
+    text-align: left;
+  }
+  .home-description3 {
+    text-align: center;
+  }
   .home-cards {
     gap: var(--dl-space-space-oneandhalfunits);
+    flex-wrap: wrap;
     flex-direction: column;
   }
   .home-cards1 {
@@ -312,8 +479,38 @@ export default {
   }
 }
 @media(max-width: 479px) {
-  .home-heading {
-    max-width: 280px;
+  .home-header {
+    width: auto;
+    height: auto;
+    max-width: auto;
+    padding-top: 0px;
+  }
+  .home-section {
+    height: auto;
+    line-height: 36px;
+  }
+  .home-veranstaltungen-liste {
+    width: 90%;
+  }
+  .home-letzte-gelegenheit-run1 {
+    width: 100%;
+    z-index: 50;
+    align-self: flex-start;
+  }
+  .home-letzte-gelegenheit-run2 {
+    width: 100%;
+    z-index: 50;
+    align-self: center;
+  }
+  .home-heading2 {
+    width: auto;
+    margin-left: 0px;
+  }
+  .home-larps {
+    gap: var(--dl-space-space-twounits);
+  }
+  .home-kurzgeschichten {
+    gap: var(--dl-space-space-twounits);
   }
 }
 </style>
diff --git a/src/views/larp-konzept1.vue b/src/views/larpkonzept.vue
similarity index 75%
rename from src/views/larp-konzept1.vue
rename to src/views/larpkonzept.vue
index b39fcc8..2bf59f8 100644
--- a/src/views/larp-konzept1.vue
+++ b/src/views/larpkonzept.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="larp-konzept1-container">
-    <app-navbar rootClassName="navbar-root-class-name"></app-navbar>
-    <h1 class="larp-konzept1-heading">
+  <div class="larpkonzept-container">
+    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
+    <h1 class="larpkonzept-heading">
       <span>Open Visor Larpkonzept</span>
       <br />
     </h1>
-    <span class="larp-konzept1-caption">
+    <span class="larpkonzept-caption">
       <span>
         Für eine sichere Durchführung von intensiven, emotionalen und
         kontrastreichen Nordic LARPs
       </span>
       <br />
     </span>
-    <div class="larp-konzept1-container1">
-      <p class="larp-konzept1-description">
-        <span class="larp-konzept1-text04">
+    <div class="larpkonzept-container1">
+      <p class="larpkonzept-description">
+        <span class="larpkonzept-text04">
           Kurze Begriffserklärung für Larp-Neulinge
         </span>
-        <br class="larp-konzept1-text05" />
+        <br class="larpkonzept-text05" />
         <span>
           LARP steht für Live Action Roleplay. Hierbei schlüpft man in die Rolle
           eines fiktiven Menschen für die Dauer einer Veranstaltung. Immer wenn
@@ -32,10 +32,10 @@
           dass man die Immersion durch OT Ansagen nicht stört. Zu diesen kommen
           wir im Kapitel “Spielintensitäts Steigerung- und Verringerrung”.
         </span>
-        <br class="larp-konzept1-text07" />
-        <br class="larp-konzept1-text08" />
-        <span class="larp-konzept1-text09">DKWDDK</span>
-        <br class="larp-konzept1-text10" />
+        <br class="larpkonzept-text07" />
+        <br class="larpkonzept-text08" />
+        <span class="larpkonzept-text09">DKWDDK</span>
+        <br class="larpkonzept-text10" />
         <span>
           Grundsätzlich gilt, &quot;Du kannst was Du darstellen kannst&quot;. D.h.
           man zeigt in echt was man kann und sagt nicht &quot;ich tue gerade
@@ -47,10 +47,10 @@
           aufrechtzuerhalten, sodass man sich besser in die Charaktere einfühlen
           kann.
         </span>
-        <br class="larp-konzept1-text12" />
-        <br class="larp-konzept1-text13" />
-        <span class="larp-konzept1-text14">Play to Lose</span>
-        <br class="larp-konzept1-text15" />
+        <br class="larpkonzept-text12" />
+        <br class="larpkonzept-text13" />
+        <span class="larpkonzept-text14">Play to Lose</span>
+        <br class="larpkonzept-text15" />
         <span>
           Play to Lose heisst für eine bessere Geschichte oder besseres Spiel für
           die Beteiligten auf einen Erfolg des eigenen Charakters zu verzichten.
@@ -59,7 +59,7 @@
           hat. Es geht bei “Letzte Gelegenheit” darum, kollaborativ eine spannende
           Geschichte zu erzählen.
         </span>
-        <br class="larp-konzept1-text17" />
+        <br class="larpkonzept-text17" />
         <span>
           Das Gegenteil von Play to Lose ist Play to Win, also wenn man versucht
           einen möglichst siegreichen Charakter zu spielen. Das ist an sich nicht
@@ -70,10 +70,10 @@
           Immersion der Beteiligten bricht. Powergaming ist bei “Letzte
           Gelegenheit” verboten.
         </span>
-        <br class="larp-konzept1-text19" />
-        <br class="larp-konzept1-text20" />
-        <span class="larp-konzept1-text21">Play to Lift</span>
-        <br class="larp-konzept1-text22" />
+        <br class="larpkonzept-text19" />
+        <br class="larpkonzept-text20" />
+        <span class="larpkonzept-text21">Play to Lift</span>
+        <br class="larpkonzept-text22" />
         <span>
           Play to Lift heisst seinen Mitspielern beim Ausspielen ihres Charakters
           zu unterstützen. Grundsätzlich gilt DKWDDK, doch es gibt auch Spiel
@@ -91,12 +91,12 @@
           Funkgeräte, also müssen wir uns da gegenseitig helfen, die Kompetenzen
           dazu glaubwürdig darzustellen.
         </span>
-        <br class="larp-konzept1-text24" />
-        <br class="larp-konzept1-text25" />
-        <span class="larp-konzept1-text26">
+        <br class="larpkonzept-text24" />
+        <br class="larpkonzept-text25" />
+        <span class="larpkonzept-text26">
           Vorgeschriebene Charaktere und Beziehungen
         </span>
-        <br class="larp-konzept1-text27" />
+        <br class="larpkonzept-text27" />
         <span>
           Wir werden Charaktere schreiben die dicht miteinander vernetzt sind.
           Dies hat zur Konsequenz, dass eher weniger Spielerplätze verfügbar sind,
@@ -107,12 +107,12 @@
           aber sicherstellen, dass sicher jeder Spieler andere Spieler hat, die
           man anspielen kann.
         </span>
-        <br class="larp-konzept1-text29" />
-        <br class="larp-konzept1-text30" />
-        <span class="larp-konzept1-text31">
+        <br class="larpkonzept-text29" />
+        <br class="larpkonzept-text30" />
+        <span class="larpkonzept-text31">
           Spielintensitäts Steigerung- und Verringerrung
         </span>
-        <br class="larp-konzept1-text32" />
+        <br class="larpkonzept-text32" />
         <span>
           Wie an vielen Nordic Larps gibt es oft OT-Signale um seinem gegenüber zu
           vermitteln, dass man die Spielintensität verringern oder steigern
@@ -129,17 +129,17 @@
           einer Intensitätssteigerung sein. Es kann also sein, dass das
           Steigerungssignal ignoriert wird.
         </span>
-        <br class="larp-konzept1-text34" />
-        <br class="larp-konzept1-text35" />
+        <br class="larpkonzept-text34" />
+        <br class="larpkonzept-text35" />
         <span>
           Zu guter Letzt benutzen wir am “Letzte Gelegenheit” auch die
-          <span v-html="rawtndy"></span>
+          <span v-html="rawyca8"></span>
         </span>
         <a
           href="https://en.wikipedia.org/wiki/OK_gesture"
           target="_blank"
           rel="noreferrer noopener"
-          class="larp-konzept1-link"
+          class="larpkonzept-link"
         >
           OK-Hand
         </a>
@@ -150,14 +150,14 @@
           schlecht). Nur wenn der Daumen nach oben zeigt, soll man die
           Spielintensität beibehalten, ansonsten soll man sie verringern, um
           sicherzustellen, dass es der Person wieder besser geht.
-          <span v-html="rawjhdi"></span>
+          <span v-html="rawxyrj"></span>
         </span>
-        <br class="larp-konzept1-text38" />
-        <br class="larp-konzept1-text39" />
-        <span class="larp-konzept1-text40">
+        <br class="larpkonzept-text38" />
+        <br class="larpkonzept-text39" />
+        <span class="larpkonzept-text40">
           Workshops vor und Feedback nach dem Spiel
         </span>
-        <br class="larp-konzept1-text41" />
+        <br class="larpkonzept-text41" />
         <span>
           Wir werden vor und nach dem Spiel Workshops durchführen um die
           Spielenden ins Spiel ein- und wieder auszuführen. Wenn man intensives
@@ -172,37 +172,37 @@
           und können das Feedback dann später wenn der Stress abgeklungen ist in
           Ruhe anschauen.
         </span>
-        <br class="larp-konzept1-text43" />
+        <br class="larpkonzept-text43" />
       </p>
     </div>
-    <app-footer rootClassName="footer-root-class-name2"></app-footer>
+    <app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
   </div>
 </template>
 
 <script>
-import AppNavbar from '../components/navbar'
-import AppFooter from '../components/footer'
+import AppNavigation from '../components/navigation'
+import AppKontakt from '../components/kontakt'
 
 export default {
-  name: 'LarpKonzept1',
+  name: 'Larpkonzept',
   components: {
-    AppNavbar,
-    AppFooter,
+    AppNavigation,
+    AppKontakt,
   },
 
   data() {
     return {
-      rawtndy: ' ',
-      rawjhdi: ' ',
+      rawyca8: ' ',
+      rawxyrj: ' ',
     }
   },
 
   metaInfo: {
-    title: 'LarpKonzept1 - Open Visor',
+    title: 'Larpkonzept - Open Visor',
     meta: [
       {
         property: 'og:title',
-        content: 'LarpKonzept1 - Open Visor',
+        content: 'Larpkonzept - Open Visor',
       },
     ],
   },
@@ -210,7 +210,7 @@ export default {
 </script>
 
 <style scoped>
-.larp-konzept1-container {
+.larpkonzept-container {
   width: 100%;
   display: flex;
   z-index: 100;
@@ -224,149 +224,147 @@ export default {
   background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
   background-position: top left;
 }
-.larp-konzept1-heading {
+.larpkonzept-heading {
   color: rgb(255, 255, 255);
   font-size: 64px;
   font-style: normal;
+  text-align: center;
   font-family: Poppins;
   font-weight: 600;
+  margin-bottom: 6px;
 }
-.larp-konzept1-caption {
+.larpkonzept-caption {
   color: rgb(255, 255, 255);
   font-size: 20px;
+  max-width: 90%;
+  text-align: center;
   font-family: Poppins;
   line-height: 30px;
 }
-.larp-konzept1-container1 {
+.larpkonzept-container1 {
   flex: 0 0 auto;
-  width: 1080px;
+  width: 90%;
   height: auto;
   display: flex;
+  max-width: 1080px;
   align-items: flex-start;
   flex-direction: column;
 }
-.larp-konzept1-description {
+.larpkonzept-description {
   color: rgb(255, 255, 255);
   width: auto;
-  font-size: 20px;
+  font-size: 18px;
   align-self: center;
   margin-top: var(--dl-space-space-twounits);
   font-family: Poppins;
   line-height: 28px;
   padding-top: var(--dl-space-space-oneandhalfunits);
   padding-left: var(--dl-space-space-oneandhalfunits);
+  border-radius: 20px;
   padding-right: var(--dl-space-space-oneandhalfunits);
   padding-bottom: var(--dl-space-space-oneandhalfunits);
   background-color: rgba(41, 41, 41, 0.8);
 }
-.larp-konzept1-text04 {
+.larpkonzept-text04 {
   font-weight: 700;
 }
-.larp-konzept1-text05 {
+.larpkonzept-text05 {
   font-weight: 700;
 }
-.larp-konzept1-text07 {
+.larpkonzept-text07 {
   font-weight: 700;
 }
-.larp-konzept1-text08 {
+.larpkonzept-text08 {
   font-weight: 700;
 }
-.larp-konzept1-text09 {
+.larpkonzept-text09 {
   font-weight: 700;
 }
-.larp-konzept1-text10 {
+.larpkonzept-text10 {
   font-weight: 700;
 }
-.larp-konzept1-text12 {
+.larpkonzept-text12 {
   font-weight: 700;
 }
-.larp-konzept1-text13 {
+.larpkonzept-text13 {
   font-weight: 700;
 }
-.larp-konzept1-text14 {
+.larpkonzept-text14 {
   font-weight: 700;
 }
-.larp-konzept1-text15 {
+.larpkonzept-text15 {
   font-weight: 700;
 }
-.larp-konzept1-text17 {
+.larpkonzept-text17 {
   font-weight: 700;
 }
-.larp-konzept1-text19 {
+.larpkonzept-text19 {
   font-weight: 700;
 }
-.larp-konzept1-text20 {
+.larpkonzept-text20 {
   font-weight: 700;
 }
-.larp-konzept1-text21 {
+.larpkonzept-text21 {
   font-weight: 700;
 }
-.larp-konzept1-text22 {
+.larpkonzept-text22 {
   font-weight: 700;
 }
-.larp-konzept1-text24 {
+.larpkonzept-text24 {
   font-weight: 700;
 }
-.larp-konzept1-text25 {
+.larpkonzept-text25 {
   font-weight: 700;
 }
-.larp-konzept1-text26 {
+.larpkonzept-text26 {
   font-weight: 700;
 }
-.larp-konzept1-text27 {
+.larpkonzept-text27 {
   font-weight: 700;
 }
-.larp-konzept1-text29 {
+.larpkonzept-text29 {
   font-weight: 700;
 }
-.larp-konzept1-text30 {
+.larpkonzept-text30 {
   font-weight: 700;
 }
-.larp-konzept1-text31 {
+.larpkonzept-text31 {
   font-weight: 700;
 }
-.larp-konzept1-text32 {
+.larpkonzept-text32 {
   font-weight: 700;
 }
-.larp-konzept1-text34 {
+.larpkonzept-text34 {
   font-weight: 700;
 }
-.larp-konzept1-text35 {
+.larpkonzept-text35 {
   font-weight: 700;
 }
-.larp-konzept1-link {
+.larpkonzept-link {
   font-style: normal;
   font-weight: 500;
   text-decoration: underline;
 }
-.larp-konzept1-text38 {
+.larpkonzept-text38 {
   font-weight: 700;
 }
-.larp-konzept1-text39 {
+.larpkonzept-text39 {
   font-weight: 700;
 }
-.larp-konzept1-text40 {
+.larpkonzept-text40 {
   font-weight: 700;
 }
-.larp-konzept1-text41 {
+.larpkonzept-text41 {
   font-weight: 700;
 }
-.larp-konzept1-text43 {
+.larpkonzept-text43 {
   font-weight: 700;
 }
-@media(max-width: 991px) {
-  .larp-konzept1-heading {
-    text-align: left;
-  }
-  .larp-konzept1-caption {
-    text-align: left;
-  }
-}
 @media(max-width: 767px) {
-  .larp-konzept1-heading {
+  .larpkonzept-heading {
     font-size: 40px;
   }
-  .larp-konzept1-caption {
+  .larpkonzept-caption {
     color: rgb(255, 255, 255);
     font-size: 16px;
     font-family: Poppins;
@@ -374,7 +372,7 @@ export default {
   }
 }
 @media(max-width: 479px) {
-  .larp-konzept1-heading {
+  .larpkonzept-heading {
     max-width: 280px;
   }
 }
diff --git a/src/views/letzte-gelegenheit1.vue b/src/views/letzte-gelegenheit.vue
similarity index 61%
rename from src/views/letzte-gelegenheit1.vue
rename to src/views/letzte-gelegenheit.vue
index abc29ca..fbcc2c5 100644
--- a/src/views/letzte-gelegenheit1.vue
+++ b/src/views/letzte-gelegenheit.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="letzte-gelegenheit1-container">
-    <app-navbar rootClassName="navbar-root-class-name"></app-navbar>
-    <h1 class="letzte-gelegenheit1-heading">
+  <div class="letzte-gelegenheit-container">
+    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
+    <h1 class="letzte-gelegenheit-heading">
       <span>Letzte Gelegenheit</span>
       <br />
     </h1>
-    <span class="letzte-gelegenheit1-caption">
+    <span class="letzte-gelegenheit-caption">
       <span>Haben Häftlinge Platz im Bunker?</span>
       <br />
     </span>
-    <div class="letzte-gelegenheit1-container1">
-      <p class="letzte-gelegenheit1-description">
-        <span class="letzte-gelegenheit1-text004">Setting</span>
+    <div class="letzte-gelegenheit-container1">
+      <p class="letzte-gelegenheit-description">
+        <span class="letzte-gelegenheit-text004">Setting</span>
         <br />
         <span>
           Das Nordic LARP “Letzte Gelegenheit” spielt in der heutigen Zeit in
@@ -25,19 +25,19 @@
         </span>
         <br />
         <br />
-        <span class="letzte-gelegenheit1-text009">
+        <span class="letzte-gelegenheit-text009">
           Was will dieses Larp bewirken
         </span>
         <br />
         <span>
            ·
-          <span v-html="rawupb0"></span>
+          <span v-html="raw165c"></span>
         </span>
         <span>Gemeinsam eine Geschichte erleben und entwickeln</span>
         <br />
         <span>
            ·
-          <span v-html="rawptol"></span>
+          <span v-html="rawrgfo"></span>
         </span>
         <span>
           Intensive Momente und Emotionen ermöglichen, die in Erinnerung bleiben.
@@ -45,7 +45,7 @@
         <br />
         <span>
            ·
-          <span v-html="rawj0s2"></span>
+          <span v-html="rawz9bj"></span>
         </span>
         <span>
           Persönliche Auseinandersetzungen der Spieler mit nicht alltäglichen
@@ -54,7 +54,7 @@
         <br />
         <span>
            ·
-          <span v-html="rawf03l"></span>
+          <span v-html="rawv8eb"></span>
         </span>
         <span>
           Interne Charakterentwicklung oder -verfestigung durch externe Faktoren.
@@ -62,13 +62,13 @@
         <br />
         <span>
            ·
-          <span v-html="rawjpgf"></span>
+          <span v-html="rawbeku"></span>
         </span>
         <span>Dilemmata mit sich selbst und mit anderen.</span>
         <br />
         <span>
            ·
-          <span v-html="rawecua"></span>
+          <span v-html="rawi9rt"></span>
         </span>
         <span>
           Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern Variation
@@ -76,7 +76,7 @@
         </span>
         <br />
         <br />
-        <span class="letzte-gelegenheit1-text030">Wie will es das bewirken</span>
+        <span class="letzte-gelegenheit-text030">Wie will es das bewirken</span>
         <br />
         <span>
            · Mit Feindschaften und Freundschaften durch Vergangenheit, Ziel-,
@@ -101,42 +101,21 @@
         </span>
         <br />
         <br />
-        <span class="letzte-gelegenheit1-text041">
-          Kurze Begriffserklärung für Larp-Neulinge
-        </span>
-        <br />
-        <span>
-          LARP steht für Live Action Roleplay. Hierbei schlüpft man in die Rolle
-          eines fiktiven Menschen für die Dauer einer Veranstaltung. Immer wenn
-          man die Rolle des Charakters übernimmt, ist man In-Time (IT). Ansonsten
-          ist man Out-Time (OT). Hierbei ist wichtig für die Trennung, dass man
-          vor und nach der Veranstaltung (OT) wieder sich selbst ist und vom
-          Charakter am besten in der dritten Person (er/sie/*) redet. Auch wenn
-          man während der Veranstaltung mal etwas ausserhalb des Charakters
-          macht/sagt ist man OT. Manche Leute zeigen das, in dem man mit den Armen
-          ein Kreuz vor der Brust macht oder mit den flachen Händen ein “T”
-          darstellt. Falls möglich, versucht man OT Signale aber so zu senden,
-          dass man die Immersion durch OT Ansagen nicht stört. Zu diesen kommen
-          wir im Kapitel “Spielintensitäts Steigerungs- und
-          Verringerrungssignale”.
-        </span>
-        <br />
-        <br />
-        <span class="letzte-gelegenheit1-text046">Was bespielt wird</span>
+        <span class="letzte-gelegenheit-text041">Was bespielt wird</span>
         <br />
         <span>
           Angst, Hass, Liebe, Eifersucht, Intrige, Loyalität, Verrat, Geheimnisse
           lüften, Mord, Diebstahl, Machtkampf, Rache/Vergebung, Wahnsinn,
           Gerechtigkeit, Gruppe vs. Individuum, Flucht in
-          Drogenkonsum/-missbrauch, Diskriminierung von Kriminellen . . .
+          Drogenkonsum/-missbrauch, Diskriminierung von Kriminellen...
         </span>
         <br />
         <br />
-        <span class="letzte-gelegenheit1-text051">Was nicht bespielt wird</span>
+        <span class="letzte-gelegenheit-text046">Was nicht bespielt wird</span>
         <br />
         <span>
           Sexismus und
-          <span v-html="rawx0d8"></span>
+          <span v-html="raws8w2"></span>
         </span>
         <span>
           Rassismus (stattdessen werden kulturelle Differenzen vergrössert)
@@ -144,7 +123,16 @@
         <span>.</span>
         <br />
         <br />
-        <span class="letzte-gelegenheit1-text058">Preise</span>
+        <span class="letzte-gelegenheit-text053">Konzept</span>
+        <br />
+        <span>
+          Wir werden das Open Visor Larpkonzept verwenden. Dieses wird am Anfang
+          der Veranstaltung auch nochmals für alle zusammengefasst und einzelne
+          zentrale Aspekte in Workshops aufgenommen.
+        </span>
+        <br />
+        <br />
+        <span class="letzte-gelegenheit-text058">Preise</span>
         <br />
         <span>
           Das gesamte Budget wird in das LARP investiert. Schäden, deren
@@ -154,24 +142,24 @@
         <br />
         <span>
            ·
-          <span v-html="rawvfbd"></span>
+          <span v-html="rawlt4k"></span>
         </span>
         <span>Solidaritätsticket: 20.- CHF</span>
         <br />
         <span>
            ·
-          <span v-html="rawg6xe"></span>
+          <span v-html="rawd3jf"></span>
         </span>
         <span>Normalticket: 40.- CHF</span>
         <br />
         <span>
            ·
-          <span v-html="rawolu7"></span>
+          <span v-html="rawtfmn"></span>
         </span>
         <span>Sponsorticket: 60.- CHF</span>
         <br />
         <br />
-        <span class="letzte-gelegenheit1-text072">OT-Bereich</span>
+        <span class="letzte-gelegenheit-text072">OT-Bereich</span>
         <br />
         <span>
           Es wird ein Zimmer geben, in dem man sich OT aufhalten kann und bei
@@ -187,8 +175,8 @@
         </span>
         <br />
         <br />
-        <span class="letzte-gelegenheit1-text077">Verpflegung</span>
-        <br class="letzte-gelegenheit1-text078" />
+        <span class="letzte-gelegenheit-text077">Verpflegung</span>
+        <br class="letzte-gelegenheit-text078" />
         <span>
           IT hat es nur das Essen, das einem bei der Ressourcenknappheit IT
           verteilt wird. Manche Charaktere tauschen ihre Essensration allenfalls
@@ -200,41 +188,41 @@
           Möglichkeit im OT Bereich Snacks zu essen (Früchte, geschnittenes
           Gemüse, Brötchen, Käse, Süssigkeiten, Trockenwürste, Wasserkocher mit
           French Press, Kaffeepulver und Teebeuteln).
-          <span v-html="rawpw0g"></span>
+          <span v-html="raw8myh"></span>
         </span>
-        <br class="letzte-gelegenheit1-text080" />
+        <br class="letzte-gelegenheit-text080" />
         <span>
            ·
-          <span v-html="rawdjsx"></span>
+          <span v-html="rawm3qh"></span>
         </span>
         <span>Samstag OT Mittagessen (vor Time-In)</span>
-        <br class="letzte-gelegenheit1-text083" />
+        <br class="letzte-gelegenheit-text083" />
         <span>
            ·
-          <span v-html="rawu3fc"></span>
+          <span v-html="rawgdhf"></span>
         </span>
         <span>
           Samstag IT Abendessen (gefriergetrocknetes IT Essen &quot;Meals Ready to
           Eat” und anderes lange haltbares Essen)
         </span>
-        <br class="letzte-gelegenheit1-text086" />
+        <br class="letzte-gelegenheit-text086" />
         <span>
            ·
-          <span v-html="rawnabo"></span>
+          <span v-html="rawpsh0"></span>
         </span>
         <span>
           Sonntag IT Frühstück (gefriergetrocknetes IT Essen &quot;Meals Ready to
           Eat&quot;, z.B. Porridge und anderes lange haltbares Essen)
         </span>
-        <br class="letzte-gelegenheit1-text089" />
+        <br class="letzte-gelegenheit-text089" />
         <span>
            ·
-          <span v-html="rawl9kx"></span>
+          <span v-html="raw8asv"></span>
         </span>
         <span>Sonntag OT Mittagessen (nach Time-Out)</span>
-        <br class="letzte-gelegenheit1-text092" />
+        <br class="letzte-gelegenheit-text092" />
         <br />
-        <span class="letzte-gelegenheit1-text094">Ausrüstung</span>
+        <span class="letzte-gelegenheit-text094">Ausrüstung</span>
         <br />
         <span>
           Die Wärter werden ein Hemd für ihre Körpergrösse erhalten, falls
@@ -272,25 +260,9 @@
           Mitspielern vor der Veranstaltung am besten bei der OT-Ansprache
           mitteilen.
         </span>
-        <br class="letzte-gelegenheit1-text117" />
-        <br class="letzte-gelegenheit1-text118" />
-        <span class="letzte-gelegenheit1-text119">Konzept</span>
-        <br class="letzte-gelegenheit1-text120" />
-        <span class="letzte-gelegenheit1-text121">
-          Wir werden das
-          <span v-html="raw5v2a"></span>
-        </span>
-        <router-link to="/larp-konzept1" class="letzte-gelegenheit1-navlink">
-          Open Visor Larpkonzept
-        </router-link>
-        <span class="letzte-gelegenheit1-text122">
-          verwenden. Dieses wird am Anfang der Veranstaltung auch nochmals für
-          alle zusammengefasst und einzelne zentrale Aspekte in Workshops
-          aufgenommen.
-        </span>
-        <br class="letzte-gelegenheit1-text123" />
-        <br class="letzte-gelegenheit1-text124" />
-        <span class="letzte-gelegenheit1-text125">Standort Run 1</span>
+        <br class="letzte-gelegenheit-text117" />
+        <br class="letzte-gelegenheit-text118" />
+        <span class="letzte-gelegenheit-text119">Standort Run 1</span>
         <br />
         <span>Zivilschutzanlage</span>
         <br />
@@ -300,69 +272,68 @@
         <br />
         <span>
           Parkplatz:
-          <span v-html="raweoxb"></span>
+          <span v-html="rawwiyo"></span>
         </span>
-        <span class="letzte-gelegenheit1-text134">
+        <span class="letzte-gelegenheit-text128">
           https://goo.gl/maps/KgqAwRdw8pJSdmjTA
         </span>
         <br />
         <br />
-        <span class="letzte-gelegenheit1-text137">Standort Run 2</span>
+        <span class="letzte-gelegenheit-text131">Standort Run 2</span>
         <br />
         <span>TBA</span>
         <br />
         <br />
       </p>
-      <div class="letzte-gelegenheit1-container2">
-        <p class="letzte-gelegenheit1-description1">Ablauf</p>
+      <div class="letzte-gelegenheit-container2">
+        <p class="letzte-gelegenheit-description1">Ablauf</p>
       </div>
-      <div class="letzte-gelegenheit1-get-started button">
-        <span class="letzte-gelegenheit1-text142">Anmeldung</span>
+      <div class="letzte-gelegenheit-get-started button">
+        <span class="letzte-gelegenheit-text136">Anmeldung</span>
       </div>
     </div>
-    <app-footer rootClassName="footer-root-class-name2"></app-footer>
+    <app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
   </div>
 </template>
 
 <script>
-import AppNavbar from '../components/navbar'
-import AppFooter from '../components/footer'
+import AppNavigation from '../components/navigation'
+import AppKontakt from '../components/kontakt'
 
 export default {
-  name: 'LetzteGelegenheit1',
+  name: 'LetzteGelegenheit',
   components: {
-    AppNavbar,
-    AppFooter,
+    AppNavigation,
+    AppKontakt,
   },
 
   data() {
     return {
-      rawupb0: ' ',
-      rawptol: ' ',
-      rawj0s2: ' ',
-      rawf03l: ' ',
-      rawjpgf: ' ',
-      rawecua: ' ',
-      rawx0d8: ' ',
-      rawvfbd: ' ',
-      rawg6xe: ' ',
-      rawolu7: ' ',
-      rawpw0g: ' ',
-      rawdjsx: ' ',
-      rawu3fc: ' ',
-      rawnabo: ' ',
-      rawl9kx: ' ',
-      raw5v2a: ' ',
-      raweoxb: ' ',
+      raw165c: ' ',
+      rawrgfo: ' ',
+      rawz9bj: ' ',
+      rawv8eb: ' ',
+      rawbeku: ' ',
+      rawi9rt: ' ',
+      raws8w2: ' ',
+      rawlt4k: ' ',
+      rawd3jf: ' ',
+      rawtfmn: ' ',
+      raw8myh: ' ',
+      rawm3qh: ' ',
+      rawgdhf: ' ',
+      rawpsh0: ' ',
+      raw8asv: ' ',
+      rawwiyo: ' ',
     }
   },
 
   metaInfo: {
-    title: 'Letzte-Gelegenheit1 - Open Visor',
+    title: 'Letzte-Gelegenheit - Open Visor',
     meta: [
       {
         property: 'og:title',
-        content: 'Letzte-Gelegenheit1 - Open Visor',
+        content: 'Letzte-Gelegenheit - Open Visor',
       },
     ],
   },
@@ -370,7 +341,7 @@ export default {
 </script>
 
 <style scoped>
-.letzte-gelegenheit1-container {
+.letzte-gelegenheit-container {
   width: 100%;
   display: flex;
   z-index: 100;
@@ -384,20 +355,20 @@ export default {
   background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
   background-position: top left;
 }
-.letzte-gelegenheit1-heading {
+.letzte-gelegenheit-heading {
   color: rgb(255, 255, 255);
   font-size: 64px;
   font-style: normal;
   font-family: Poppins;
   font-weight: 600;
 }
-.letzte-gelegenheit1-caption {
+.letzte-gelegenheit-caption {
   color: rgb(255, 255, 255);
   font-size: 20px;
   font-family: Poppins;
   line-height: 30px;
 }
-.letzte-gelegenheit1-container1 {
+.letzte-gelegenheit-container1 {
   flex: 0 0 auto;
   width: 1080px;
   height: auto;
@@ -405,118 +376,69 @@ export default {
   align-items: flex-start;
   flex-direction: column;
 }
-.letzte-gelegenheit1-description {
+.letzte-gelegenheit-description {
   color: rgb(255, 255, 255);
-  width: auto;
+  width: 90%;
   padding: var(--dl-space-space-twounits);
-  font-size: 20px;
+  font-size: 18px;
+  max-width: 1080px;
   align-self: center;
   margin-top: var(--dl-space-space-twounits);
   font-family: Poppins;
   line-height: 28px;
   padding-top: var(--dl-space-space-oneandhalfunits);
   padding-left: var(--dl-space-space-oneandhalfunits);
+  border-radius: 20px;
   padding-right: var(--dl-space-space-oneandhalfunits);
   padding-bottom: var(--dl-space-space-oneandhalfunits);
   background-color: rgba(41, 41, 41, 0.8);
 }
-.letzte-gelegenheit1-text004 {
+.letzte-gelegenheit-text004 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text009 {
+.letzte-gelegenheit-text009 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text030 {
+.letzte-gelegenheit-text030 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text041 {
+.letzte-gelegenheit-text041 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text046 {
+.letzte-gelegenheit-text046 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text051 {
+.letzte-gelegenheit-text058 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text058 {
+.letzte-gelegenheit-text072 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text072 {
+.letzte-gelegenheit-text077 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text077 {
+.letzte-gelegenheit-text094 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text078 {
+.letzte-gelegenheit-text119 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-text080 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text083 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text086 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text089 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text092 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text094 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text117 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text118 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text119 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text120 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text121 {
-  font-style: normal;
-  font-weight: 400;
-}
-.letzte-gelegenheit1-navlink {
-  font-weight: 500;
-  text-decoration: underline;
-}
-.letzte-gelegenheit1-text122 {
-  font-style: normal;
-  font-weight: 400;
-}
-.letzte-gelegenheit1-text123 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text124 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text125 {
-  font-weight: 700;
-}
-.letzte-gelegenheit1-text134 {
+.letzte-gelegenheit-text128 {
   font-style: normal;
   font-weight: 500;
   text-decoration: underline;
 }
-.letzte-gelegenheit1-text137 {
+.letzte-gelegenheit-text131 {
   font-weight: 700;
 }
-.letzte-gelegenheit1-container2 {
+.letzte-gelegenheit-container2 {
   flex: 0 0 auto;
   width: 200px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
 }
-.letzte-gelegenheit1-description1 {
+.letzte-gelegenheit-description1 {
   color: rgb(194, 198, 204);
   width: auto;
   align-self: center;
@@ -524,11 +446,11 @@ export default {
   font-weight: 700;
   line-height: 28px;
 }
-.letzte-gelegenheit1-get-started {
+.letzte-gelegenheit-get-started {
   display: flex;
   background-color: #80FF44;
 }
-.letzte-gelegenheit1-text142 {
+.letzte-gelegenheit-text136 {
   color: rgb(12, 16, 12);
   font-size: 16px;
   font-style: normal;
@@ -537,34 +459,114 @@ export default {
   line-height: 24px;
 }
 @media(max-width: 991px) {
-  .letzte-gelegenheit1-heading {
+  .letzte-gelegenheit-heading {
     text-align: left;
   }
-  .letzte-gelegenheit1-caption {
+  .letzte-gelegenheit-caption {
     text-align: left;
   }
-  .letzte-gelegenheit1-get-started {
+  .letzte-gelegenheit-get-started {
     flex: 1;
   }
 }
 @media(max-width: 767px) {
-  .letzte-gelegenheit1-heading {
+  .letzte-gelegenheit-heading {
     font-size: 40px;
   }
-  .letzte-gelegenheit1-caption {
+  .letzte-gelegenheit-caption {
     color: rgb(255, 255, 255);
     font-size: 16px;
     font-family: Poppins;
     line-height: 24px;
   }
-  .letzte-gelegenheit1-get-started {
+  .letzte-gelegenheit-container1 {
+    width: 90%;
+    max-width: 1080px;
+  }
+  .letzte-gelegenheit-description {
+    width: auto;
+    max-width: auto;
+  }
+  .letzte-gelegenheit-get-started {
     padding-top: var(--dl-space-space-unit);
     padding-bottom: var(--dl-space-space-unit);
   }
 }
 @media(max-width: 479px) {
-  .letzte-gelegenheit1-heading {
+  .letzte-gelegenheit-heading {
     max-width: 280px;
   }
+  .letzte-gelegenheit-description {
+    color: rgb(255, 255, 255);
+    font-size: 20px;
+    font-family: Poppins;
+    line-height: 28px;
+    background-color: rgba(41, 41, 41, 0.8);
+  }
+  .letzte-gelegenheit-text004 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text009 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text030 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text041 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text046 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text053 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text058 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text072 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text077 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text078 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text080 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text083 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text086 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text089 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text092 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text094 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text117 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text118 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text119 {
+    font-weight: 700;
+  }
+  .letzte-gelegenheit-text128 {
+    font-style: normal;
+    font-weight: 500;
+    text-decoration: underline;
+  }
+  .letzte-gelegenheit-text131 {
+    font-weight: 700;
+  }
 }
 </style>
diff --git a/src/views/rosenteufel1.vue b/src/views/rosenteufel.vue
similarity index 91%
rename from src/views/rosenteufel1.vue
rename to src/views/rosenteufel.vue
index bb03665..57a1253 100644
--- a/src/views/rosenteufel1.vue
+++ b/src/views/rosenteufel.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="rosenteufel1-container">
-    <app-navbar rootClassName="navbar-root-class-name"></app-navbar>
-    <h1 class="rosenteufel1-heading">Rosenteufel</h1>
-    <span class="rosenteufel1-caption">
+  <div class="rosenteufel-container">
+    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
+    <h1 class="rosenteufel-heading">Rosenteufel</h1>
+    <span class="rosenteufel-caption">
       <span>Kurzgeschichte</span>
       <br />
     </span>
-    <div class="rosenteufel1-container1">
-      <span class="rosenteufel1-text002">
-        <span class="rosenteufel1-text003">
+    <div class="rosenteufel-container1">
+      <span class="rosenteufel-text002">
+        <span class="rosenteufel-text003">
           Ich erzähl euch ein Gschicht von wahr, so wahr wie ihr danach nicht
           gwollt. Ein Gschicht die erzähl als einzger überlebend: Mein Gschicht. S
           wart im letzten Jahr...
@@ -285,37 +285,37 @@
           zuher. Sie starrten; auch kalt und hilflos wie Kind. Ich schritt nach
           vorn: In die Händ des Toten seh, weiss Ros. Ins Gesicht des Toten blick.
           Beulen zierten’s. Hässliche Beulen. Der Teufel aber wart woanders...
-          <span v-html="rawju54"></span>
+          <span v-html="rawp1z0"></span>
         </span>
       </span>
     </div>
-    <app-footer rootClassName="footer-root-class-name1"></app-footer>
+    <app-kontakt rootClassName="kontakt-root-class-name1"></app-kontakt>
   </div>
 </template>
 
 <script>
-import AppNavbar from '../components/navbar'
-import AppFooter from '../components/footer'
+import AppNavigation from '../components/navigation'
+import AppKontakt from '../components/kontakt'
 
 export default {
-  name: 'Rosenteufel1',
+  name: 'Rosenteufel',
   components: {
-    AppNavbar,
-    AppFooter,
+    AppNavigation,
+    AppKontakt,
   },
 
   data() {
     return {
-      rawju54: ' ',
+      rawp1z0: ' ',
     }
   },
 
   metaInfo: {
-    title: 'Rosenteufel1 - Open Visor',
+    title: 'Rosenteufel - Open Visor',
     meta: [
       {
         property: 'og:title',
-        content: 'Rosenteufel1 - Open Visor',
+        content: 'Rosenteufel - Open Visor',
       },
     ],
   },
@@ -323,7 +323,7 @@ export default {
 </script>
 
 <style scoped>
-.rosenteufel1-container {
+.rosenteufel-container {
   width: 100%;
   display: flex;
   overflow: auto;
@@ -335,7 +335,7 @@ export default {
   background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
   background-position: bottom right;
 }
-.rosenteufel1-heading {
+.rosenteufel-heading {
   color: rgb(255, 255, 255);
   font-size: 64px;
   align-self: center;
@@ -343,49 +343,49 @@ export default {
   font-family: Poppins;
   font-weight: 600;
 }
-.rosenteufel1-caption {
+.rosenteufel-caption {
   color: rgb(255, 255, 255);
   font-size: 20px;
   align-self: center;
   font-family: Poppins;
   line-height: 30px;
 }
-.rosenteufel1-container1 {
+.rosenteufel-container1 {
   flex: 0 0 auto;
-  width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.rosenteufel1-text002 {
+.rosenteufel-text002 {
   color: rgb(255, 255, 255);
-  width: 100%;
-  font-size: 20px;
+  width: 90%;
+  font-size: 18px;
   max-width: 1080px;
   margin-top: var(--dl-space-space-twounits);
   padding-top: var(--dl-space-space-twounits);
   padding-left: var(--dl-space-space-twounits);
+  border-radius: 20px;
   padding-right: var(--dl-space-space-twounits);
   padding-bottom: var(--dl-space-space-twounits);
   background-color: rgba(41, 41, 41, 0.8);
 }
-.rosenteufel1-text003 {
+.rosenteufel-text003 {
   font-style: italic;
 }
 @media(max-width: 991px) {
-  .rosenteufel1-heading {
+  .rosenteufel-heading {
     text-align: left;
   }
-  .rosenteufel1-caption {
+  .rosenteufel-caption {
     text-align: left;
   }
 }
 @media(max-width: 767px) {
-  .rosenteufel1-heading {
+  .rosenteufel-heading {
     font-size: 40px;
   }
-  .rosenteufel1-caption {
+  .rosenteufel-caption {
     color: rgb(255, 255, 255);
     font-size: 16px;
     font-family: Poppins;
@@ -393,8 +393,15 @@ export default {
   }
 }
 @media(max-width: 479px) {
-  .rosenteufel1-heading {
+  .rosenteufel-heading {
     max-width: 280px;
   }
+  .rosenteufel-container1 {
+    width: 90%;
+  }
+  .rosenteufel-text002 {
+    width: 90%;
+    max-width: 1080px;
+  }
 }
 </style>
diff --git a/src/views/ssse-trume1.vue b/src/views/ssse-trume.vue
similarity index 72%
rename from src/views/ssse-trume1.vue
rename to src/views/ssse-trume.vue
index 2e29318..6b036ce 100644
--- a/src/views/ssse-trume1.vue
+++ b/src/views/ssse-trume.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="ssse-trume1-container">
-    <app-navbar rootClassName="navbar-root-class-name"></app-navbar>
-    <h1 class="ssse-trume1-heading">
+  <div class="ssse-trume-container">
+    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
+    <h1 class="ssse-trume-heading">
       <span>Süsse Träume</span>
       <br />
     </h1>
-    <span class="ssse-trume1-caption">
+    <span class="ssse-trume-caption">
       <span>Fantasy Mini-LARP</span>
       <br />
     </span>
-    <p class="ssse-trume1-description">
+    <p class="ssse-trume-description">
       <span>
         &quot;Weisst du, wer du bist? Was du bereust, befürchtest, vergessen
         möchtest? Was du erreichen möchtest und was dir alles recht ist um dies zu
@@ -27,26 +27,26 @@
       </span>
       <br />
     </p>
-    <app-footer rootClassName="footer-root-class-name"></app-footer>
+    <app-kontakt rootClassName="kontakt-root-class-name"></app-kontakt>
   </div>
 </template>
 
 <script>
-import AppNavbar from '../components/navbar'
-import AppFooter from '../components/footer'
+import AppNavigation from '../components/navigation'
+import AppKontakt from '../components/kontakt'
 
 export default {
-  name: 'SsseTrume1',
+  name: 'SsseTrume',
   components: {
-    AppNavbar,
-    AppFooter,
+    AppNavigation,
+    AppKontakt,
   },
   metaInfo: {
-    title: 'Ssse-Trume1 - Open Visor',
+    title: 'Ssse-Trume - Open Visor',
     meta: [
       {
         property: 'og:title',
-        content: 'Ssse-Trume1 - Open Visor',
+        content: 'Ssse-Trume - Open Visor',
       },
     ],
   },
@@ -54,7 +54,7 @@ export default {
 </script>
 
 <style scoped>
-.ssse-trume1-container {
+.ssse-trume-container {
   width: 100%;
   display: flex;
   overflow: auto;
@@ -65,23 +65,24 @@ export default {
   background-size: cover;
   background-image: url("/playground_assets/forest-background-luca-dross-1500w.jpg");
 }
-.ssse-trume1-heading {
+.ssse-trume-heading {
   color: rgb(255, 255, 255);
   font-size: 64px;
   font-style: normal;
   font-family: Poppins;
   font-weight: 600;
 }
-.ssse-trume1-caption {
+.ssse-trume-caption {
   color: rgb(255, 255, 255);
   font-size: 20px;
   font-family: Poppins;
   line-height: 30px;
 }
-.ssse-trume1-description {
+.ssse-trume-description {
   color: rgb(255, 255, 255);
-  width: 1080px;
-  font-size: 20px;
+  width: 90%;
+  font-size: 18px;
+  max-width: 1080px;
   align-self: center;
   font-style: normal;
   margin-top: var(--dl-space-space-twounits);
@@ -90,23 +91,21 @@ export default {
   line-height: 28px;
   padding-top: var(--dl-space-space-oneandhalfunits);
   padding-left: var(--dl-space-space-oneandhalfunits);
+  border-radius: 20px;
   padding-right: var(--dl-space-space-oneandhalfunits);
   padding-bottom: var(--dl-space-space-oneandhalfunits);
   background-color: rgba(41, 41, 41, 0.8);
 }
 @media(max-width: 991px) {
-  .ssse-trume1-heading {
-    text-align: left;
-  }
-  .ssse-trume1-caption {
+  .ssse-trume-caption {
     text-align: left;
   }
 }
 @media(max-width: 767px) {
-  .ssse-trume1-heading {
+  .ssse-trume-heading {
     font-size: 40px;
   }
-  .ssse-trume1-caption {
+  .ssse-trume-caption {
     color: rgb(255, 255, 255);
     font-size: 16px;
     font-family: Poppins;
@@ -114,8 +113,9 @@ export default {
   }
 }
 @media(max-width: 479px) {
-  .ssse-trume1-heading {
-    max-width: 280px;
+  .ssse-trume-heading {
+    max-width: auto;
+    text-align: center;
   }
 }
 </style>
