From 79a70f12ffa2ae2f4bf75236f641fa2100dbd732 Mon Sep 17 00:00:00 2001
From: OpenVisor <info@openvisor.ch>
Date: Fri, 26 Apr 2024 21:57:09 +0200
Subject: [PATCH] Attempt to fix mobile menu

---
 src/components/info-box.vue              |   28 +-
 src/components/navbar-interactive.vue    | 1110 ++++++++++++++++++++++
 src/components/navigation.vue            |   86 +-
 src/components/row1.vue                  |    4 +-
 src/components/row5.vue                  |    4 +-
 src/components/veranstaltungen-liste.vue |   24 +-
 src/router.js                            |   12 +-
 src/style.css                            |    1 -
 src/views/ein-orden-fr-eine-gute-tat.vue |   49 +-
 src/views/home.vue                       |    2 +-
 src/views/larpkonzept.vue                |    7 +-
 src/views/letzte-gelegenheit.vue         |   12 +-
 src/views/rosenteufel.vue                |   12 +-
 13 files changed, 1238 insertions(+), 113 deletions(-)
 create mode 100644 src/components/navbar-interactive.vue

diff --git a/src/components/info-box.vue b/src/components/info-box.vue
index 09e8680..b5a0e1e 100644
--- a/src/components/info-box.vue
+++ b/src/components/info-box.vue
@@ -32,7 +32,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="raw77vo"></span>
+                  <span v-html="rawnpvn"></span>
                 </span>
                 <span>
                   Intensive Momente und Emotionen ermöglichen, die in Erinnerung
@@ -42,7 +42,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawvlyz"></span>
+                  <span v-html="rawe9wp"></span>
                 </span>
                 <span>
                   Persönliche Auseinandersetzungen der Spieler mit nicht
@@ -53,7 +53,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawed5o"></span>
+                  <span v-html="raw5e4n"></span>
                 </span>
                 <span>
                   Interne Charakterentwicklung oder -verfestigung durch externe
@@ -63,14 +63,14 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawxy9z"></span>
+                  <span v-html="rawpf7y"></span>
                 </span>
                 <span>Dilemmata mit sich selbst und mit anderen.</span>
                 <br />
                 <br />
                 <span>
                    ·
-                  <span v-html="rawrkzg"></span>
+                  <span v-html="raww60b"></span>
                 </span>
                 <span>
                   Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern
@@ -254,7 +254,7 @@
                 <br />
                 <span>
                   Wir werden das
-                  <span v-html="rawvdw5"></span>
+                  <span v-html="rawmw5k"></span>
                 </span>
                 <router-link to="/larpkonzept" class="info-box-navlink">
                   Open Visor Larpkonzept
@@ -518,7 +518,7 @@
                 <br />
                 <span>
                   Parkplatz:
-                  <span v-html="raw77rr"></span>
+                  <span v-html="raw2kz5"></span>
                 </span>
                 <a
                   href="https://goo.gl/maps/KgqAwRdw8pJSdmjTA"
@@ -1458,13 +1458,13 @@ export default {
   },
   data() {
     return {
-      raw77vo: ' ',
-      rawvlyz: ' ',
-      rawed5o: ' ',
-      rawxy9z: ' ',
-      rawrkzg: ' ',
-      rawvdw5: ' ',
-      raw77rr: ' ',
+      rawnpvn: ' ',
+      rawe9wp: ' ',
+      raw5e4n: ' ',
+      rawpf7y: ' ',
+      raww60b: ' ',
+      rawmw5k: ' ',
+      raw2kz5: ' ',
     }
   },
 }
diff --git a/src/components/navbar-interactive.vue b/src/components/navbar-interactive.vue
new file mode 100644
index 0000000..0385a98
--- /dev/null
+++ b/src/components/navbar-interactive.vue
@@ -0,0 +1,1110 @@
+<template>
+  <div class="navbar-interactive-container">
+    <header data-thq="thq-navbar" class="navbar-interactive-navbar-interactive">
+      <router-link to="/" class="navbar-interactive-navlink">
+        <img :alt="Logo_alt" :src="Logo_src" class="navbar-interactive-logo" />
+      </router-link>
+      <div
+        data-thq="thq-navbar-nav"
+        data-role="Nav"
+        class="navbar-interactive-desktop-menu"
+      >
+        <nav
+          data-thq="thq-navbar-nav-links"
+          data-role="Nav"
+          class="navbar-interactive-nav"
+        >
+          <router-link to="/" class="navbar-interactive-home nav-link">
+            {{ Home }}
+          </router-link>
+          <router-link
+            to="/ueber-uns"
+            class="navbar-interactive-ueber-uns nav-link"
+          >
+            {{ UeberUns }}
+          </router-link>
+          <router-link
+            to="/larpkonzept"
+            class="navbar-interactive-larpkonzept nav-link"
+          >
+            {{ Larpkonzept }}
+          </router-link>
+          <div
+            data-thq="thq-dropdown"
+            class="navbar-interactive-larps-dropdown list-item"
+          >
+            <div
+              data-thq="thq-dropdown-toggle"
+              class="navbar-interactive-dropdown-toggle"
+            >
+              <span class="navbar-interactive-larps nav-link">{{ Larps }}</span>
+              <div
+                data-thq="thq-dropdown-arrow"
+                class="navbar-interactive-dropdown-arrow"
+              >
+                <svg viewBox="0 0 1024 1024" class="navbar-interactive-icon">
+                  <path d="M426 726v-428l214 214z"></path>
+                </svg>
+              </div>
+            </div>
+            <ul
+              data-thq="thq-dropdown-list"
+              class="navbar-interactive-dropdown-list"
+            >
+              <router-link to="/letzte-gelegenheit">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navbar-interactive-dropdown list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navbar-interactive-dropdown-toggle01"
+                  >
+                    <span class="navbar-interactive-letzte-gelegenheit">
+                      {{ LetzteGelegenheit }}
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+              <router-link to="/suesse-traeume">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navbar-interactive-dropdown1 list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navbar-interactive-dropdown-toggle02"
+                  >
+                    <span class="navbar-interactive-suesse-traeume">
+                      {{ SuesseTraeume }}
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+            </ul>
+          </div>
+          <div
+            data-thq="thq-dropdown"
+            class="navbar-interactive-kurzgeschichten-dropdown list-item"
+          >
+            <div
+              data-thq="thq-dropdown-toggle"
+              class="navbar-interactive-dropdown-toggle03"
+            >
+              <span class="navbar-interactive-kurzgeschichten nav-link">
+                {{ Kurzgeschichten }}
+              </span>
+              <div
+                data-thq="thq-dropdown-arrow"
+                class="navbar-interactive-dropdown-arrow1"
+              >
+                <svg viewBox="0 0 1024 1024" class="navbar-interactive-icon02">
+                  <path d="M426 726v-428l214 214z"></path>
+                </svg>
+              </div>
+            </div>
+            <ul
+              data-thq="thq-dropdown-list"
+              class="navbar-interactive-dropdown-list1"
+            >
+              <router-link to="/ein-orden-fuer-eine-gute-tat">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navbar-interactive-dropdown2 list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navbar-interactive-dropdown-toggle04"
+                  >
+                    <span class="navbar-interactive-ein-orden-fuer-eine-gute-tat">
+                      {{ EinOrdenFuerEineGuteTat }}
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+              <router-link to="/rosenteufel">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navbar-interactive-dropdown3 list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navbar-interactive-dropdown-toggle05"
+                  >
+                    <span class="navbar-interactive-rosenteufel">
+                      {{ Rosenteufel }}
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div data-thq="thq-burger-menu" class="navbar-interactive-burger-menu">
+        <svg viewBox="0 0 1024 1024" class="navbar-interactive-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="navbar-interactive-mobile-menu">
+        <div
+          data-thq="thq-mobile-menu-nav"
+          data-role="Nav"
+          class="navbar-interactive-nav1"
+        >
+          <div class="navbar-interactive-nav-top">
+            <div data-thq="thq-close-menu" class="navbar-interactive-menu-close">
+              <svg viewBox="0 0 1024 1024" class="navbar-interactive-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="navbar-interactive-nav-body"
+          >
+            <router-link to="/" class="navbar-interactive-home1 nav-link">
+              {{ Home1 }}
+            </router-link>
+            <router-link
+              to="/ueber-uns"
+              class="navbar-interactive-ueber-uns1 nav-link"
+            >
+              {{ UeberUns1 }}
+            </router-link>
+            <router-link
+              to="/larpkonzept"
+              class="navbar-interactive-larpkonzept1 nav-link"
+            >
+              {{ Larpkonzept1 }}
+            </router-link>
+            <div
+              data-thq="thq-dropdown"
+              class="navbar-interactive-larps-dropdown1 list-item"
+            >
+              <div
+                data-thq="thq-dropdown-toggle"
+                class="navbar-interactive-dropdown-toggle06"
+              >
+                <span class="navbar-interactive-larps1 nav-link">
+                  {{ Larps1 }}
+                </span>
+                <div
+                  data-thq="thq-dropdown-arrow"
+                  class="navbar-interactive-dropdown-arrow2"
+                >
+                  <svg viewBox="0 0 1024 1024" class="navbar-interactive-icon08">
+                    <path d="M426 726v-428l214 214z"></path>
+                  </svg>
+                </div>
+              </div>
+              <ul
+                data-thq="thq-dropdown-list"
+                class="navbar-interactive-larps-dropdown-list"
+              >
+                <router-link to="/letzte-gelegenheit">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navbar-interactive-letzte-gelegenheit-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navbar-interactive-dropdown-toggle07"
+                    >
+                      <span
+                        class="navbar-interactive-letzte-gelegenheit1 nav-link"
+                      >
+                        {{ LetzteGelegenheit1 }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+                <router-link to="/suesse-traeume">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navbar-interactive-suesse-traeume-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navbar-interactive-dropdown-toggle08"
+                    >
+                      <span class="navbar-interactive-suesse-traeume1 nav-link">
+                        {{ SuesseTraeume1 }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+              </ul>
+            </div>
+            <div
+              data-thq="thq-dropdown"
+              class="navbar-interactive-kurzgeschichten-dropdown1 list-item"
+            >
+              <div
+                data-thq="thq-dropdown-toggle"
+                class="navbar-interactive-dropdown-toggle09"
+              >
+                <span class="navbar-interactive-kurzgeschichten1 nav-link">
+                  {{ Kurzgeschichten1 }}
+                </span>
+                <div
+                  data-thq="thq-dropdown-arrow"
+                  class="navbar-interactive-dropdown-arrow3"
+                >
+                  <svg viewBox="0 0 1024 1024" class="navbar-interactive-icon10">
+                    <path d="M426 726v-428l214 214z"></path>
+                  </svg>
+                </div>
+              </div>
+              <ul
+                data-thq="thq-dropdown-list"
+                class="navbar-interactive-kurzgeschichten-dropdown-list"
+              >
+                <router-link to="/ein-orden-fuer-eine-gute-tat">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navbar-interactive-ein-orden-fuer-eine-gute-tat-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navbar-interactive-dropdown-toggle10"
+                    >
+                      <span
+                        class="navbar-interactive-ein-orden-fuer-eine-gute-tat1 nav-link"
+                      >
+                        {{ EinOrdenFuerEineGuteTat1 }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+                <router-link to="/rosenteufel">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navbar-interactive-rosenteufel-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navbar-interactive-dropdown-toggle11"
+                    >
+                      <span class="navbar-interactive-rosenteufel1 nav-link">
+                        {{ Rosenteufel1 }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+              </ul>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </header>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NavbarInteractive',
+  props: {
+    SuesseTraeume: {
+      type: String,
+      default: 'Süsse Träume',
+    },
+    Rosenteufel: {
+      type: String,
+      default: 'Rosenteufel',
+    },
+    UeberUns: {
+      type: String,
+      default: 'Über uns',
+    },
+    Larps1: {
+      type: String,
+      default: 'Larps',
+    },
+    Logo_src: {
+      type: String,
+      default: '/logo_mitoffenemvisier_bw_png-min-200h.png',
+    },
+    EinOrdenFuerEineGuteTat1: {
+      type: String,
+      default: 'Ein Orden für eine gute Tat',
+    },
+    Home: {
+      type: String,
+      default: 'Home',
+    },
+    Rosenteufel1: {
+      type: String,
+      default: 'Rosenteufel',
+    },
+    Kurzgeschichten: {
+      type: String,
+      default: 'Kurzgeschichten',
+    },
+    Logo_alt: {
+      type: String,
+      default: 'image',
+    },
+    Home1: {
+      type: String,
+      default: 'Home',
+    },
+    LetzteGelegenheit: {
+      type: String,
+      default: 'Letzte Gelegenheit',
+    },
+    Larpkonzept: {
+      type: String,
+      default: 'Larpkonzept',
+    },
+    EinOrdenFuerEineGuteTat: {
+      type: String,
+      default: 'Ein Orden für eine gute Tat',
+    },
+    Larps: {
+      type: String,
+      default: 'Larps',
+    },
+    UeberUns1: {
+      type: String,
+      default: 'Über uns',
+    },
+    LetzteGelegenheit1: {
+      type: String,
+      default: 'Letzte Gelegenheit',
+    },
+    Kurzgeschichten1: {
+      type: String,
+      default: 'Kurzgeschichten',
+    },
+    Larpkonzept1: {
+      type: String,
+      default: 'Larpkonzept',
+    },
+    SuesseTraeume1: {
+      type: String,
+      default: 'Süsse Träume',
+    },
+  },
+}
+</script>
+
+<style scoped>
+.navbar-interactive-container {
+  display: flex;
+  position: relative;
+}
+.navbar-interactive-navbar-interactive {
+  width: 100%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  padding-top: var(--dl-space-space-twounits);
+  padding-left: var(--dl-space-space-oneandhalfunits);
+  padding-right: var(--dl-space-space-threeunits);
+  padding-bottom: var(--dl-space-space-twounits);
+  justify-content: space-between;
+}
+.navbar-interactive-navlink {
+  display: contents;
+}
+.navbar-interactive-logo {
+  width: 100px;
+  object-fit: cover;
+  transition: 0.3s;
+  text-decoration: none;
+}
+
+.navbar-interactive-desktop-menu {
+  display: flex;
+}
+.navbar-interactive-nav {
+  gap: var(--dl-space-space-fourunits);
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.navbar-interactive-home {
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.15;
+  text-decoration: none;
+}
+.navbar-interactive-ueber-uns {
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.15;
+  text-decoration: none;
+}
+.navbar-interactive-larpkonzept {
+  color: #ffffff;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  text-decoration: none;
+}
+.navbar-interactive-larps-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-larps {
+  color: #ffffff;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navbar-interactive-dropdown-arrow {
+  transition: 0.3s;
+}
+.navbar-interactive-icon {
+  fill: #ffffff;
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navbar-interactive-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;
+}
+.navbar-interactive-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-dropdown-toggle01:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navbar-interactive-letzte-gelegenheit {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navbar-interactive-dropdown1 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-dropdown-toggle02:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navbar-interactive-suesse-traeume {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navbar-interactive-kurzgeschichten-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-kurzgeschichten {
+  color: #ffffff;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navbar-interactive-dropdown-arrow1 {
+  transition: 0.3s;
+}
+.navbar-interactive-icon02 {
+  fill: #ffffff;
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navbar-interactive-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;
+}
+.navbar-interactive-dropdown2 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-dropdown-toggle04:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navbar-interactive-ein-orden-fuer-eine-gute-tat {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navbar-interactive-dropdown3 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-dropdown-toggle05:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navbar-interactive-rosenteufel {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navbar-interactive-burger-menu {
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+.navbar-interactive-icon04 {
+  fill: #ffffff;
+  width: 36px;
+  cursor: pointer;
+  height: 36px;
+  padding: 6px;
+  transition: 0.3s;
+  border-radius: 18px;
+  background-color: rgba(100, 100, 100, 0.4);
+}
+.navbar-interactive-icon04:hover {
+  opacity: 0.5;
+}
+.navbar-interactive-mobile-menu {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  display: none;
+  padding: 32px;
+  z-index: 100;
+  position: absolute;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: rgba(0,0,0,0.8);
+  transition-duration: 0.5;
+}
+.navbar-interactive-nav1 {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.navbar-interactive-nav-top {
+  width: auto;
+  display: flex;
+  align-items: flex-end;
+  margin-left: 90%;
+  justify-content: flex-end;
+}
+.navbar-interactive-menu-close {
+  display: flex;
+}
+.navbar-interactive-icon06 {
+  fill: #ffffff;
+  width: 30px;
+  cursor: pointer;
+  height: 30px;
+  margin-top: 30px;
+  transition: 0.3s;
+  margin-left: -30px;
+}
+.navbar-interactive-icon06:hover {
+  opacity: 0.5;
+}
+.navbar-interactive-nav-body {
+  flex: 0 0 auto;
+  display: flex;
+  margin-top: -30px;
+  align-items: flex-start;
+  margin-left: 30px;
+  flex-direction: column;
+}
+.navbar-interactive-home1 {
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-bottom: var(--dl-space-space-unit);
+  text-decoration: none;
+}
+.navbar-interactive-ueber-uns1 {
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-bottom: var(--dl-space-space-unit);
+  text-decoration: none;
+}
+.navbar-interactive-larpkonzept1 {
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-bottom: var(--dl-space-space-unit);
+  text-decoration: none;
+}
+.navbar-interactive-larps-dropdown1 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-larps1 {
+  font-size: 14px;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navbar-interactive-dropdown-arrow2 {
+  transition: 0.3s;
+}
+.navbar-interactive-icon08 {
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navbar-interactive-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;
+}
+.navbar-interactive-letzte-gelegenheit-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-dropdown-toggle07:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navbar-interactive-letzte-gelegenheit1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navbar-interactive-suesse-traeume-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-dropdown-toggle08:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navbar-interactive-suesse-traeume1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navbar-interactive-kurzgeschichten-dropdown1 {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-kurzgeschichten1 {
+  font-size: 14px;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navbar-interactive-dropdown-arrow3 {
+  transition: 0.3s;
+}
+.navbar-interactive-icon10 {
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navbar-interactive-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;
+}
+.navbar-interactive-ein-orden-fuer-eine-gute-tat-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-dropdown-toggle10:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navbar-interactive-ein-orden-fuer-eine-gute-tat1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navbar-interactive-rosenteufel-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
+}
+.navbar-interactive-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);
+}
+.navbar-interactive-dropdown-toggle11:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navbar-interactive-rosenteufel1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+@media(max-width: 991px) {
+  .navbar-interactive-desktop-menu {
+    display: none;
+  }
+  .navbar-interactive-nav {
+    gap: var(--dl-space-space-twounits);
+    justify-content: center;
+  }
+  .navbar-interactive-burger-menu {
+    display: flex;
+  }
+}
+@media(max-width: 767px) {
+  .navbar-interactive-navbar-interactive {
+    padding-left: TwoUnits;
+    padding-right: var(--dl-space-space-twounits);
+  }
+  .navbar-interactive-dropdown-list {
+    display: none;
+  }
+  .navbar-interactive-dropdown-list1 {
+    display: none;
+  }
+  .navbar-interactive-home1 {
+    color: #ffffff;
+  }
+  .navbar-interactive-ueber-uns1 {
+    color: #ffffff;
+  }
+  .navbar-interactive-larpkonzept1 {
+    color: #ffffff;
+  }
+  .navbar-interactive-larps1 {
+    color: #ffffff;
+    font-size: 16px;
+  }
+  .navbar-interactive-icon08 {
+    fill: #ffffff;
+  }
+  .navbar-interactive-larps-dropdown-list {
+    display: none;
+    border-color: #000000;
+    background-color: rgb(41, 41, 41);
+  }
+  .navbar-interactive-letzte-gelegenheit1 {
+    color: #ffffff;
+  }
+  .navbar-interactive-suesse-traeume1 {
+    color: #ffffff;
+  }
+  .navbar-interactive-kurzgeschichten1 {
+    color: #ffffff;
+    font-size: 16px;
+  }
+  .navbar-interactive-icon10 {
+    fill: #ffffff;
+  }
+  .navbar-interactive-kurzgeschichten-dropdown-list {
+    display: none;
+    border-color: #000000;
+    background-color: rgb(41, 41, 41);
+  }
+  .navbar-interactive-ein-orden-fuer-eine-gute-tat1 {
+    color: #ffffff;
+  }
+  .navbar-interactive-rosenteufel1 {
+    color: #ffffff;
+  }
+}
+@media(max-width: 479px) {
+  .navbar-interactive-navbar-interactive {
+    padding: var(--dl-space-space-unit);
+  }
+  .navbar-interactive-icon08 {
+    fill: #ffffff;
+  }
+  .navbar-interactive-icon10 {
+    fill: #ffffff;
+  }
+}
+</style>
diff --git a/src/components/navigation.vue b/src/components/navigation.vue
index 46f1766..d8c2305 100644
--- a/src/components/navigation.vue
+++ b/src/components/navigation.vue
@@ -17,6 +17,9 @@
           <router-link to="/" class="navigation-home nav-link">
             {{ Home }}
           </router-link>
+          <router-link to="/ueber-uns" class="navigation-ueber-uns nav-link">
+            {{ UeberUns }}
+          </router-link>
           <router-link to="/larpkonzept" class="navigation-larpkonzept nav-link">
             {{ Larpkonzept }}
           </router-link>
@@ -151,6 +154,9 @@
             <router-link to="/" class="navigation-home1 nav-link">
               {{ Home }}
             </router-link>
+            <router-link to="/ueber-uns" class="navigation-ueber-uns1 nav-link">
+              {{ UeberUns }}
+            </router-link>
             <router-link
               to="/larpkonzept"
               class="navigation-larpkonzept1 nav-link"
@@ -300,6 +306,10 @@ export default {
       type: String,
       default: 'Larps',
     },
+    UeberUns: {
+      type: String,
+      default: 'Über uns',
+    },
     EinOrdenFuerEineGuteTat: {
       type: String,
       default: 'Ein Orden für eine gute Tat',
@@ -317,10 +327,6 @@ export default {
       default: 'Rosenteufel',
     },
     rootClassName: String,
-    image_alt: {
-      type: String,
-      default: 'image',
-    },
   },
 }
 </script>
@@ -328,28 +334,16 @@ export default {
 <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-twounits);
-  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-oneandhalfunits);
+  padding-top: var(--dl-space-space-fourunits);
+  padding-left: var(--dl-space-space-threeunits);
   padding-right: var(--dl-space-space-threeunits);
-  padding-bottom: var(--dl-space-space-twounits);
+  padding-bottom: var(--dl-space-space-fourunits);
   justify-content: space-between;
 }
 .navigation-navlink {
@@ -378,6 +372,12 @@ export default {
   line-height: 1.15;
   text-decoration: none;
 }
+.navigation-ueber-uns {
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.15;
+  text-decoration: none;
+}
 .navigation-larpkonzept {
   color: #ffffff;
   font-style: normal;
@@ -654,15 +654,14 @@ export default {
   left: 0px;
   width: 100%;
   height: 100vh;
-  display: flex;
+  display: none;
   padding: 32px;
   z-index: 100;
-  position: fixed;
-  transform: translateY(-100%);
-  transition: 0.5s;
+  position: absolute;
   flex-direction: column;
   justify-content: space-between;
   background-color: rgba(0,0,0,0.8);
+  transition-duration: 0.5;
 }
 .navigation-nav1 {
   display: flex;
@@ -706,6 +705,13 @@ export default {
   margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
+.navigation-ueber-uns1 {
+  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;
@@ -957,9 +963,6 @@ export default {
   font-family: Poppins;
   font-weight: 400;
 }
-.navigation-root-class-name {
-  max-width: 1200px;
-}
 
 
 
@@ -980,35 +983,35 @@ export default {
 .navigation-root-class-name10 {
   max-width: 1200px;
 }
+
 @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);
+    padding-bottom: var(--dl-space-space-twounits);
   }
   .navigation-desktop-menu {
     display: none;
   }
+  .navigation-nav {
+    gap: var(--dl-space-space-twounits);
+    justify-content: center;
+  }
+  .navigation-burger-menu {
+    display: flex;
+  }
+}
+@media(max-width: 767px) {
   .navigation-dropdown-list {
     display: none;
   }
   .navigation-dropdown-list1 {
     display: none;
   }
-  .navigation-burger-menu {
-    display: flex;
-  }
   .navigation-home1 {
     color: #ffffff;
   }
+  .navigation-ueber-uns1 {
+    color: #ffffff;
+  }
   .navigation-larpkonzept1 {
     color: #ffffff;
   }
@@ -1053,9 +1056,6 @@ export default {
   .navigation-navbar-interactive {
     padding: var(--dl-space-space-unit);
   }
-  .navigation-mobile-menu {
-    padding: 16px;
-  }
   .navigation-icon08 {
     fill: #ffffff;
   }
diff --git a/src/components/row1.vue b/src/components/row1.vue
index 1a4ceb1..128d57c 100644
--- a/src/components/row1.vue
+++ b/src/components/row1.vue
@@ -8,7 +8,7 @@
           <h1 class="row1-header1">
             <span>
               Leitung der Justizvollzugsanstalt
-              <span v-html="rawlz4n"></span>
+              <span v-html="raw0cwz"></span>
             </span>
             <br />
           </h1>
@@ -125,7 +125,7 @@ export default {
   },
   data() {
     return {
-      rawlz4n: ' ',
+      raw0cwz: ' ',
     }
   },
 }
diff --git a/src/components/row5.vue b/src/components/row5.vue
index a458eba..285f359 100644
--- a/src/components/row5.vue
+++ b/src/components/row5.vue
@@ -75,7 +75,7 @@
           Tabellen und Graphen auf Notizzettel. Die Wärter mussten Jenatsch schon
           mehrmals dafür bestrafen, als Jenatsch diese trotz Warnungen überall
           wieder liegen liess.
-          <span v-html="rawa889"></span>
+          <span v-html="rawizt7"></span>
         </span>
         <span>Ab und zu spielt Jenatsch Karten mit Collins und Krüger.</span>
         <br />
@@ -122,7 +122,7 @@ export default {
   },
   data() {
     return {
-      rawa889: ' ',
+      rawizt7: ' ',
     }
   },
 }
diff --git a/src/components/veranstaltungen-liste.vue b/src/components/veranstaltungen-liste.vue
index 76c25cf..cc90814 100644
--- a/src/components/veranstaltungen-liste.vue
+++ b/src/components/veranstaltungen-liste.vue
@@ -70,6 +70,10 @@
 export default {
   name: 'VeranstaltungenListe',
   props: {
+    Standort5: {
+      type: String,
+      default: 'Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen',
+    },
     Run1: {
       type: String,
       default: 'Run 1 (Schweiz)',
@@ -86,6 +90,10 @@ export default {
       type: String,
       default: '1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr',
     },
+    Run6: {
+      type: String,
+      default: 'Run  6 (Schweiz)',
+    },
     rootClassName: String,
     Run2: {
       type: String,
@@ -95,22 +103,14 @@ export default {
       type: String,
       default: 'Run  3 (Deutschland)',
     },
-    Run5: {
-      type: String,
-      default: 'Run  5 (Schweiz)',
-    },
-    Run6: {
-      type: String,
-      default: 'Run  6 (Schweiz)',
-    },
-    Standort5: {
-      type: String,
-      default: 'Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen',
-    },
     Standort6: {
       type: String,
       default: 'Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen',
     },
+    Run5: {
+      type: String,
+      default: 'Run  5 (Schweiz)',
+    },
   },
 }
 </script>
diff --git a/src/router.js b/src/router.js
index a0dd28d..c99879a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,12 +3,12 @@ import Router from 'vue-router'
 import Meta from 'vue-meta'
 
 import SsseTrume from './views/ssse-trume'
+import BerUns from './views/ber-uns'
 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 BerUns from './views/ber-uns'
 import NotFound from './views/not-found'
 import './style.css'
 
@@ -22,6 +22,11 @@ export default new Router({
       path: '/suesse-traeume',
       component: SsseTrume,
     },
+    {
+      name: 'ber-uns',
+      path: '/ueber-uns',
+      component: BerUns,
+    },
     {
       name: 'Larpkonzept',
       path: '/larpkonzept',
@@ -47,11 +52,6 @@ export default new Router({
       path: '/',
       component: Home,
     },
-    {
-      name: 'ber-uns',
-      path: '/ueber-uns',
-      component: BerUns,
-    },
     {
       name: '404 - Not Found',
       path: '**',
diff --git a/src/style.css b/src/style.css
index 9c3261f..383f5d6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -77,7 +77,6 @@
 }
 .teleport-show {
   display: flex !important;
-  transform: translateY(0%) !important;
 }
 .nav-link {
   color: #fff;
diff --git a/src/views/ein-orden-fr-eine-gute-tat.vue b/src/views/ein-orden-fr-eine-gute-tat.vue
index 1da0101..c017d4b 100644
--- a/src/views/ein-orden-fr-eine-gute-tat.vue
+++ b/src/views/ein-orden-fr-eine-gute-tat.vue
@@ -27,9 +27,11 @@
         </span>
         <br />
         <br />
-        <span> · 28 Seiten</span>
-        <br />
-        <span> · 14 Illustrationen</span>
+        <span class="ein-orden-fr-eine-gute-tat-text11"> · 28 Seiten</span>
+        <br class="ein-orden-fr-eine-gute-tat-text12" />
+        <span class="ein-orden-fr-eine-gute-tat-text13">
+           · 14 Illustrationen
+        </span>
         <br />
       </span>
       <a
@@ -38,7 +40,7 @@
         rel="noreferrer noopener"
       >
         <div class="button">
-          <span class="ein-orden-fr-eine-gute-tat-anmeldung">
+          <span class="button-text">
             <span>PDF Download</span>
             <br />
           </span>
@@ -124,23 +126,9 @@ export default {
 .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-anmeldung {
-  color: rgb(12, 16, 12);
-  font-size: 16px;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 500;
-  line-height: 24px;
-}
 .ein-orden-fr-eine-gute-tat-image {
   width: 100%;
   height: 100%;
@@ -157,6 +145,31 @@ export default {
   .ein-orden-fr-eine-gute-tat-beschreibung {
     width: 90%;
   }
+  .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: normal;
+    font-weight: 400;
+  }
+  .ein-orden-fr-eine-gute-tat-text11 {
+    font-weight: 500;
+  }
+  .ein-orden-fr-eine-gute-tat-text12 {
+    font-weight: 500;
+  }
+  .ein-orden-fr-eine-gute-tat-text13 {
+    font-weight: 500;
+  }
 }
 @media(max-width: 767px) {
   .ein-orden-fr-eine-gute-tat-heading {
diff --git a/src/views/home.vue b/src/views/home.vue
index 85a66fb..c2e4353 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="home-container">
-    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
+    <app-navigation rootClassName="navigation-root-class-name11"></app-navigation>
     <h1 class="home-heading site-title">
       <span>OpenVisor</span>
       <br />
diff --git a/src/views/larpkonzept.vue b/src/views/larpkonzept.vue
index e67a577..f981f1f 100644
--- a/src/views/larpkonzept.vue
+++ b/src/views/larpkonzept.vue
@@ -16,9 +16,9 @@
       href="https://docs.google.com/presentation/d/1vgGPkM1BdSP3smg-d_qFOz0lCks8BZ_P6cLRgP1mDWY/edit?usp=sharing"
       target="_blank"
       rel="noreferrer noopener"
-      class="larpkonzept-link button"
+      class="button"
     >
-      zum Larpkonzept
+      <span class="button-text">zum Larpkonzept</span>
     </a>
     <app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
   </div>
@@ -88,9 +88,6 @@ export default {
   font-family: Poppins;
   line-height: 30px;
 }
-.larpkonzept-link {
-  text-decoration: none;
-}
 @media(max-width: 767px) {
   .larpkonzept-heading {
     font-size: 40px;
diff --git a/src/views/letzte-gelegenheit.vue b/src/views/letzte-gelegenheit.vue
index 4bec2c9..d5b1d90 100644
--- a/src/views/letzte-gelegenheit.vue
+++ b/src/views/letzte-gelegenheit.vue
@@ -58,7 +58,9 @@
         rel="noreferrer noopener"
         class="letzte-gelegenheit-link"
       >
-        <div class="button"><span class="button-text">Design-Dokument</span></div>
+        <div class="button">
+          <span class="button-text">Infos (Design-Dokument)</span>
+        </div>
       </a>
       <a
         href="https://forms.gle/YL6fFSHqY43TsV4B7"
@@ -87,7 +89,7 @@
           Geschlecht definiert die spielende Person. Es wird ein paar
           Nichtspielercharaktere geben die von Helfern bespielt werden, zum
           Beispiel Häftling Summers, der/die mit euch ins
-          <span v-html="raw9spr"></span>
+          <span v-html="rawgheo"></span>
         </span>
         <span>Spiel startet.</span>
         <br />
@@ -147,7 +149,7 @@ export default {
   },
   data() {
     return {
-      raw9spr: ' ',
+      rawgheo: ' ',
     }
   },
   metaInfo: {
@@ -248,6 +250,7 @@ export default {
   width: 100%;
   display: flex;
   align-items: center;
+  flex-direction: row;
   justify-content: center;
 }
 .letzte-gelegenheit-link {
@@ -273,6 +276,9 @@ export default {
   .letzte-gelegenheit-veranstaltungen-kapitel {
     border-color: transparent;
   }
+  .letzte-gelegenheit-buttons {
+    flex-direction: column;
+  }
 }
 @media(max-width: 479px) {
   .letzte-gelegenheit-title {
diff --git a/src/views/rosenteufel.vue b/src/views/rosenteufel.vue
index 4f69c49..bdbed79 100644
--- a/src/views/rosenteufel.vue
+++ b/src/views/rosenteufel.vue
@@ -68,7 +68,7 @@
           Aber... Edler, bei Gotts Gnad, ich wärt kein gut Christ Euch ohne Warn
           lass schreiten. Seit Geschehnem ist hie kein einzger entlang. Wer weiss
           was
-          <span v-html="raw2u6f"></span>
+          <span v-html="rawyo4w"></span>
         </span>
         <span>Geziefer dort treibt...”</span>
         <br />
@@ -236,7 +236,7 @@
           nicht sauber gefragt und der Knecht viel zu blass als ihm vorzukommen.
           Letztlich doch die Augen sich schlossen. Doch wachten nur noch Ritter
           und Knecht. Des Ritters Petz Kling noch immer rot; des Knechts Haut
-          <span v-html="rawlr1a"></span>
+          <span v-html="rawa4a4"></span>
         </span>
         <span>
           noch immer weiss und nass. Dieses Mal der Knecht nicht wagte zu fragen
@@ -287,7 +287,7 @@
           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="rawqyby"></span>
+          <span v-html="rawg5f7"></span>
         </span>
       </span>
     </div>
@@ -307,9 +307,9 @@ export default {
   },
   data() {
     return {
-      raw2u6f: ' ',
-      rawlr1a: ' ',
-      rawqyby: ' ',
+      rawyo4w: ' ',
+      rawa4a4: ' ',
+      rawg5f7: ' ',
     }
   },
   metaInfo: {