diff --git a/public/index.html b/public/index.html
index 8472556..62c9bf6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,6 +27,10 @@
 
       }
     </style>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/animate.css@4.1.1/animate.css"
+    />
     <link
       rel="shortcut icon"
       href="/openvisor.ico"
diff --git a/public/letzte-gelegenheit/charaktere/rodriguez-200h.png b/public/letzte-gelegenheit/charaktere/rodriguez-200h.png
index 090bd8f..3bf78b6 100644
Binary files a/public/letzte-gelegenheit/charaktere/rodriguez-200h.png and b/public/letzte-gelegenheit/charaktere/rodriguez-200h.png differ
diff --git a/src/components/info-box.vue b/src/components/info-box.vue
index 58bf1c4..13425a5 100644
--- a/src/components/info-box.vue
+++ b/src/components/info-box.vue
@@ -32,7 +32,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawi6bt"></span>
+                  <span v-html="rawdv0c"></span>
                 </span>
                 <span>
                   Intensive Momente und Emotionen ermöglichen, die in Erinnerung
@@ -42,7 +42,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawg2y8"></span>
+                  <span v-html="rawyhf3"></span>
                 </span>
                 <span>
                   Persönliche Auseinandersetzungen der Spieler mit nicht
@@ -53,7 +53,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawtdyz"></span>
+                  <span v-html="rawsj7r"></span>
                 </span>
                 <span>
                   Interne Charakterentwicklung oder -verfestigung durch externe
@@ -63,14 +63,14 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="raw571k"></span>
+                  <span v-html="rawi67z"></span>
                 </span>
                 <span>Dilemmata mit sich selbst und mit anderen.</span>
                 <br />
                 <br />
                 <span>
                    ·
-                  <span v-html="rawddum"></span>
+                  <span v-html="rawt9z6"></span>
                 </span>
                 <span>
                   Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern
@@ -134,7 +134,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text041">{{ Text }}</span>
+          <span class="info-box-text041">{{ text }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow02">
             <svg viewBox="0 0 1024 1024" class="info-box-icon04">
               <path d="M426 726v-428l214 214z"></path>
@@ -228,7 +228,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text090">{{ Text1 }}</span>
+          <span class="info-box-text090">{{ text1 }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow04">
             <svg viewBox="0 0 1024 1024" class="info-box-icon08">
               <path d="M426 726v-428l214 214z"></path>
@@ -254,7 +254,7 @@
                 <br />
                 <span>
                   Wir werden das
-                  <span v-html="rawnc0d"></span>
+                  <span v-html="rawr3jo"></span>
                 </span>
                 <router-link to="/larpkonzept" class="info-box-navlink">
                   Open Visor Larpkonzept
@@ -441,7 +441,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text144">{{ Text2 }}</span>
+          <span class="info-box-text144">{{ text2 }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow08">
             <svg viewBox="0 0 1024 1024" class="info-box-icon16">
               <path d="M426 726v-428l214 214z"></path>
@@ -518,7 +518,7 @@
                 <br />
                 <span>
                   Parkplatz:
-                  <span v-html="rawmm0g"></span>
+                  <span v-html="rawbals"></span>
                 </span>
                 <a
                   href="https://goo.gl/maps/KgqAwRdw8pJSdmjTA"
@@ -531,7 +531,7 @@
               </span>
             </div>
           </li>
-          <img :alt="image_alt" :src="image_src" class="info-box-image" />
+          <img :alt="imageAlt" :src="imageSrc" class="info-box-image" />
         </ul>
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
@@ -603,7 +603,7 @@
       </div>
     </div>
     <div class="info-box-spielangebot text-body">
-      <h2 class="section-head">{{ Spielangebote }}</h2>
+      <h2 class="section-head">{{ spielangebote }}</h2>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
           <span class="info-box-text192">
@@ -622,14 +622,14 @@
               data-thq="thq-dropdown-toggle"
               class="info-box-dropdown-toggle25"
             >
-              <span class="larp-text">{{ SettingText }}</span>
+              <span class="larp-text">{{ settingText }}</span>
             </div>
           </li>
         </ul>
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text196">{{ Text3 }}</span>
+          <span class="info-box-text196">{{ text3 }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow13">
             <svg viewBox="0 0 1024 1024" class="info-box-icon26">
               <path d="M426 726v-428l214 214z"></path>
@@ -693,7 +693,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text210">{{ Elektrik }}</span>
+          <span class="info-box-text210">{{ elektrik }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow14">
             <svg viewBox="0 0 1024 1024" class="info-box-icon28">
               <path d="M426 726v-428l214 214z"></path>
@@ -728,7 +728,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text214">{{ Reinigung }}</span>
+          <span class="info-box-text214">{{ reinigung }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow15">
             <svg viewBox="0 0 1024 1024" class="info-box-icon30">
               <path d="M426 726v-428l214 214z"></path>
@@ -744,14 +744,14 @@
               data-thq="thq-dropdown-toggle"
               class="info-box-dropdown-toggle31"
             >
-              <span class="larp-text">{{ text1 }}</span>
+              <span class="larp-text">{{ text11 }}</span>
             </div>
           </li>
         </ul>
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text216">{{ Text6 }}</span>
+          <span class="info-box-text216">{{ text6 }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow16">
             <svg viewBox="0 0 1024 1024" class="info-box-icon32">
               <path d="M426 726v-428l214 214z"></path>
@@ -890,7 +890,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text243">{{ Gefaengnisakten }}</span>
+          <span class="info-box-text243">{{ gefaengnisakten }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow19">
             <svg viewBox="0 0 1024 1024" class="info-box-icon38">
               <path d="M426 726v-428l214 214z"></path>
@@ -934,7 +934,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text249">{{ Ressourcenmangel }}</span>
+          <span class="info-box-text249">{{ ressourcenmangel }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow20">
             <svg viewBox="0 0 1024 1024" class="info-box-icon40">
               <path d="M426 726v-428l214 214z"></path>
@@ -984,7 +984,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text255">{{ Text9 }}</span>
+          <span class="info-box-text255">{{ text9 }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow21">
             <svg viewBox="0 0 1024 1024" class="info-box-icon42">
               <path d="M426 726v-428l214 214z"></path>
@@ -1028,7 +1028,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text262">{{ Text10 }}</span>
+          <span class="info-box-text262">{{ text10 }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow22">
             <svg viewBox="0 0 1024 1024" class="info-box-icon44">
               <path d="M426 726v-428l214 214z"></path>
@@ -1075,7 +1075,7 @@
       </div>
       <div data-thq="thq-dropdown" class="larp-chapter list-item">
         <div data-thq="thq-dropdown-toggle" class="larp-toggle">
-          <span class="info-box-text268">{{ Ablauf }}</span>
+          <span class="info-box-text268">{{ ablauf }}</span>
           <div data-thq="thq-dropdown-arrow" class="info-box-dropdown-arrow23">
             <svg viewBox="0 0 1024 1024" class="info-box-icon46">
               <path d="M426 726v-428l214 214z"></path>
@@ -1385,72 +1385,72 @@
 export default {
   name: 'InfoBox',
   props: {
-    image_src: {
+    imageSrc: {
       type: String,
       default: '/letzte-gelegenheit/zsa_weisslingen-1100w.png',
     },
-    Text2: {
+    text2: {
       type: String,
       default: '9. Preise',
     },
-    image_alt: {
+    imageAlt: {
       type: String,
       default: 'image',
     },
-    Text1: {
+    text1: {
       type: String,
       default: '5. Spielkonzept',
     },
-    Text: {
+    text: {
       type: String,
       default: '3. Was bespielt wird',
     },
-    Text10: {
+    text10: {
       type: String,
       default: '23. Tod',
     },
-    Text3: {
+    text3: {
       type: String,
       default: '14. Waffen',
     },
-    Text9: {
+    text9: {
       type: String,
       default: '22. Zeitgefühl',
     },
-    Text6: {
+    text6: {
       type: String,
       default: '17. Lüftung',
     },
-    Gefaengnisakten: {
+    gefaengnisakten: {
       type: String,
       default: '20. Gefängnisakten',
     },
-    Ablauf: {
+    ablauf: {
       type: String,
       default: '24. Ablauf',
     },
-    Ressourcenmangel: {
+    ressourcenmangel: {
       type: String,
       default: '21. Ressourcenmangel & Lager',
     },
-    Reinigung: {
+    reinigung: {
       type: String,
       default: '16. Reinigung',
     },
-    SettingText: {
+    settingText: {
       type: String,
       default:
         'Das Nordic LARP “Letzte Gelegenheit” spielt in der heutigen Zeit in einer alternativen Realität: Vor 9 Tagen fiel plötzlich der Strom aus und dichte Nebelschwaden überzogen einige Städte. Sirenen führten die Menschen in Bunker. Radios, die noch funktionierten, meldeten die sofortige Mobilisierung der Milizarmee und des Zivilschutzes. Was genau passierte, ist noch immer ungeklärt. In der Zivilschutzanlage der Justizvollzugsanstalt Schwarzbach versucht man den Alltag beizubehalten, doch langsam gehen die Ressourcen aus und die Lage verschärft sich.',
     },
-    Elektrik: {
+    elektrik: {
       type: String,
       default: '15. Elektrik',
     },
-    Spielangebote: {
+    spielangebote: {
       type: String,
       default: 'Spielangebote',
     },
-    text1: {
+    text11: {
       type: String,
       default:
         'Der Bunker wird regelmässig gereinigt. Damit möchte man den Bunker sauber halten, damit die Lebenskonditionen besser sind, die Hygiene gut halten, um Krankheiten zu verhindern und die Häftlinge zu beschäftigen, um sie von schlechten Ideen abzulenken. Vor allem aus letzterem Punkt kann ein Häftling gut mal dazu verdonnert werden, dieselbe Stelle zu reinigen, die der Häftling erst gerade vor einer Stunde reinigte.',
@@ -1458,13 +1458,13 @@ export default {
   },
   data() {
     return {
-      rawi6bt: ' ',
-      rawg2y8: ' ',
-      rawtdyz: ' ',
-      raw571k: ' ',
-      rawddum: ' ',
-      rawnc0d: ' ',
-      rawmm0g: ' ',
+      rawdv0c: ' ',
+      rawyhf3: ' ',
+      rawsj7r: ' ',
+      rawi67z: ' ',
+      rawt9z6: ' ',
+      rawr3jo: ' ',
+      rawbals: ' ',
     }
   },
 }
diff --git a/src/components/kontakt.vue b/src/components/kontakt.vue
index 066b552..fd88397 100644
--- a/src/components/kontakt.vue
+++ b/src/components/kontakt.vue
@@ -1,21 +1,21 @@
 <template>
   <footer class="kontakt-footer" v-bind:class="rootClassName">
     <div class="kontakt-kontakt">
-      <span class="kontakt-kontakt1">{{ Impressum }}</span>
+      <span class="kontakt-kontakt1">{{ impressum }}</span>
       <a href="mailto:info@openvisor.ch?subject=" class="normal-text">
-        {{ Name }}
+        {{ name }}
       </a>
       <a href="mailto:info@openvisor.ch?subject=" class="normal-text">
-        {{ Adresse }}
+        {{ adresse }}
       </a>
       <a href="mailto:info@openvisor.ch?subject=" class="normal-text">
-        {{ Ort }}
+        {{ ort }}
       </a>
       <a href="mailto:info@openvisor.ch?subject=" class="normal-text">
-        {{ Land }}
+        {{ land }}
       </a>
       <a href="mailto:info@openvisor.ch?subject=" class="kontakt-email">
-        {{ Email }}
+        {{ email }}
       </a>
     </div>
     <iframe
@@ -29,28 +29,28 @@
 export default {
   name: 'Kontakt',
   props: {
-    Impressum: {
+    impressum: {
       type: String,
       default: 'Impressum',
     },
-    Land: {
+    land: {
       type: String,
       default: 'Schweiz',
     },
     rootClassName: String,
-    Email: {
+    email: {
       type: String,
       default: 'info@openvisor.ch',
     },
-    Adresse: {
+    adresse: {
       type: String,
       default: 'Mülihalde 21',
     },
-    Ort: {
+    ort: {
       type: String,
       default: '8484 Weisslingen',
     },
-    Name: {
+    name: {
       type: String,
       default: 'Hermann Eichhorn',
     },
@@ -104,6 +104,7 @@ export default {
 
 
 
+
 @media(max-width: 767px) {
   .kontakt-footer {
     flex-direction: column;
diff --git a/src/components/navigation.vue b/src/components/navigation.vue
index a7215e7..282efee 100644
--- a/src/components/navigation.vue
+++ b/src/components/navigation.vue
@@ -2,7 +2,7 @@
   <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="OpenVisor Logo" :src="OpenvisorLogo" class="navigation-logo" />
+        <img alt="OpenVisor Logo" :src="openvisorLogo" class="navigation-logo" />
       </router-link>
       <div
         data-thq="thq-navbar-nav"
@@ -14,14 +14,14 @@
           data-role="Nav"
           class="navigation-nav"
         >
-          <router-link to="/" class="navigation-home nav-link">
-            {{ Home }}
+          <router-link to="/" class="desktop-menu-text nav-link">
+            {{ home }}
           </router-link>
-          <router-link to="/ueber-uns" class="navigation-ueber-uns nav-link">
-            {{ UeberUns }}
+          <router-link to="/ueber-uns" class="desktop-menu-text nav-link">
+            {{ ueberUns }}
           </router-link>
-          <router-link to="/larpkonzept" class="navigation-larpkonzept nav-link">
-            {{ Larpkonzept }}
+          <router-link to="/larpkonzept" class="desktop-menu-text nav-link">
+            {{ larpkonzept }}
           </router-link>
           <div
             data-thq="thq-dropdown"
@@ -31,7 +31,7 @@
               data-thq="thq-dropdown-toggle"
               class="navigation-dropdown-toggle"
             >
-              <span class="navigation-larps nav-link">{{ Larps }}</span>
+              <span class="navigation-larps nav-link">{{ larps }}</span>
               <div
                 data-thq="thq-dropdown-arrow"
                 class="navigation-dropdown-arrow"
@@ -48,8 +48,8 @@
                     data-thq="thq-dropdown-toggle"
                     class="navigation-dropdown-toggle01"
                   >
-                    <span class="navigation-letzte-gelegenheit">
-                      {{ LetzteGelegenheit }}
+                    <span class="desktop-menu-dropdown-text">
+                      {{ letzteGelegenheit }}
                     </span>
                   </div>
                 </li>
@@ -63,8 +63,46 @@
                     data-thq="thq-dropdown-toggle"
                     class="navigation-dropdown-toggle02"
                   >
-                    <span class="navigation-suesse-traeume">
-                      {{ SuesseTraeume }}
+                    <span class="desktop-menu-dropdown-text">
+                      {{ suesseTraeume }}
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+            </ul>
+          </div>
+          <div
+            data-thq="thq-dropdown"
+            class="navigation-drama-games-dropdown list-item"
+          >
+            <div
+              data-thq="thq-dropdown-toggle"
+              class="navigation-dropdown-toggle03"
+            >
+              <span class="navigation-drama-games nav-link">
+                {{ dramaGames }}
+              </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="/larpkonzept1">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navigation-dropdown2 list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="navigation-dropdown-toggle04"
+                  >
+                    <span class="desktop-menu-dropdown-text">
+                      {{ murphysLarp }}
                     </span>
                   </div>
                 </li>
@@ -77,32 +115,32 @@
           >
             <div
               data-thq="thq-dropdown-toggle"
-              class="navigation-dropdown-toggle03"
+              class="navigation-dropdown-toggle05"
             >
               <span class="navigation-kurzgeschichten nav-link">
-                {{ Kurzgeschichten }}
+                {{ kurzgeschichten }}
               </span>
               <div
                 data-thq="thq-dropdown-arrow"
-                class="navigation-dropdown-arrow1"
+                class="navigation-dropdown-arrow2"
               >
-                <svg viewBox="0 0 1024 1024" class="navigation-icon02">
+                <svg viewBox="0 0 1024 1024" class="navigation-icon04">
                   <path d="M426 726v-428l214 214z"></path>
                 </svg>
               </div>
             </div>
-            <ul data-thq="thq-dropdown-list" class="navigation-dropdown-list1">
+            <ul data-thq="thq-dropdown-list" class="navigation-dropdown-list2">
               <router-link to="/ein-orden-fuer-eine-gute-tat">
                 <li
                   data-thq="thq-dropdown"
-                  class="navigation-dropdown2 list-item"
+                  class="navigation-dropdown3 list-item"
                 >
                   <div
                     data-thq="thq-dropdown-toggle"
-                    class="navigation-dropdown-toggle04"
+                    class="navigation-dropdown-toggle06"
                   >
-                    <span class="navigation-ein-orden-fuer-eine-gute-tat">
-                      {{ EinOrdenFuerEineGuteTat }}
+                    <span class="desktop-menu-dropdown-text">
+                      {{ einOrdenFuerEineGuteTat }}
                     </span>
                   </div>
                 </li>
@@ -110,25 +148,27 @@
               <router-link to="/rosenteufel">
                 <li
                   data-thq="thq-dropdown"
-                  class="navigation-dropdown3 list-item"
+                  class="navigation-dropdown4 list-item"
                 >
                   <div
                     data-thq="thq-dropdown-toggle"
-                    class="navigation-dropdown-toggle05"
+                    class="navigation-dropdown-toggle07"
                   >
-                    <span class="navigation-rosenteufel">{{ Rosenteufel }}</span>
+                    <span class="desktop-menu-dropdown-text">
+                      {{ rosenteufel }}
+                    </span>
                   </div>
                 </li>
               </router-link>
             </ul>
           </div>
-          <a href="https://shop.openvisor.ch" class="navigation-shop nav-link">
-            {{ Shop }}
+          <a href="https://shop.openvisor.ch" class="desktop-menu-text nav-link">
+            {{ shop }}
           </a>
         </nav>
       </div>
       <div data-thq="thq-burger-menu" class="navigation-burger-menu">
-        <svg viewBox="0 0 1024 1024" class="navigation-icon04">
+        <svg viewBox="0 0 1024 1024" class="navigation-icon06">
           <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>
@@ -142,7 +182,7 @@
         >
           <div class="navigation-nav-top">
             <div data-thq="thq-close-menu" class="navigation-menu-close">
-              <svg viewBox="0 0 1024 1024" class="navigation-icon06">
+              <svg viewBox="0 0 1024 1024" class="navigation-icon08">
                 <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>
@@ -154,32 +194,26 @@
             data-role="Nav"
             class="navigation-nav-body"
           >
-            <router-link to="/" class="navigation-home1 nav-link">
-              {{ Home }}
+            <router-link to="/" class="mobile-menu-text nav-link">
+              {{ home }}
             </router-link>
-            <router-link to="/ueber-uns" class="navigation-ueber-uns1 nav-link">
-              {{ UeberUns }}
+            <router-link to="/ueber-uns" class="mobile-menu-text nav-link">
+              {{ ueberUns }}
             </router-link>
-            <router-link
-              to="/larpkonzept"
-              class="navigation-larpkonzept1 nav-link"
-            >
-              {{ Larpkonzept }}
+            <router-link to="/larpkonzept" class="mobile-menu-text nav-link">
+              {{ larpkonzept }}
             </router-link>
-            <div
-              data-thq="thq-dropdown"
-              class="navigation-larps-dropdown1 list-item"
-            >
+            <div data-thq="thq-dropdown" class="list-item mobile-menu-dropdown">
               <div
                 data-thq="thq-dropdown-toggle"
-                class="navigation-dropdown-toggle06"
+                class="navigation-dropdown-toggle08"
               >
-                <span class="navigation-larps1 nav-link">{{ Larps }}</span>
+                <span class="navigation-larps1 nav-link">{{ larps }}</span>
                 <div
                   data-thq="thq-dropdown-arrow"
-                  class="navigation-dropdown-arrow2"
+                  class="navigation-dropdown-arrow3"
                 >
-                  <svg viewBox="0 0 1024 1024" class="navigation-icon08">
+                  <svg viewBox="0 0 1024 1024" class="navigation-icon10">
                     <path d="M426 726v-428l214 214z"></path>
                   </svg>
                 </div>
@@ -195,10 +229,10 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle07"
+                      class="navigation-dropdown-toggle09"
                     >
-                      <span class="navigation-letzte-gelegenheit1 nav-link">
-                        {{ LetzteGelegenheit }}
+                      <span class="mobile-menu-dropdown-text nav-link">
+                        {{ letzteGelegenheit }}
                       </span>
                     </div>
                   </li>
@@ -210,32 +244,65 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle08"
+                      class="navigation-dropdown-toggle10"
                     >
                       <span class="navigation-suesse-traeume1 nav-link">
-                        {{ SuesseTraeume }}
+                        {{ suesseTraeume }}
                       </span>
                     </div>
                   </li>
                 </router-link>
               </ul>
             </div>
-            <div
-              data-thq="thq-dropdown"
-              class="navigation-kurzgeschichten-dropdown1 list-item"
-            >
+            <div data-thq="thq-dropdown" class="list-item mobile-menu-dropdown">
               <div
                 data-thq="thq-dropdown-toggle"
-                class="navigation-dropdown-toggle09"
+                class="navigation-dropdown-toggle11"
+              >
+                <span class="navigation-larps2 nav-link">{{ dramaGames }}</span>
+                <div
+                  data-thq="thq-dropdown-arrow"
+                  class="navigation-dropdown-arrow4"
+                >
+                  <svg viewBox="0 0 1024 1024" class="navigation-icon12">
+                    <path d="M426 726v-428l214 214z"></path>
+                  </svg>
+                </div>
+              </div>
+              <ul
+                data-thq="thq-dropdown-list"
+                class="navigation-drama-games-dropdown-list"
+              >
+                <router-link to="/larpkonzept1">
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navigation-murphys-larp-dropdown list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="navigation-dropdown-toggle12"
+                    >
+                      <span class="mobile-menu-dropdown-text nav-link">
+                        {{ murphysLarp }}
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+              </ul>
+            </div>
+            <div data-thq="thq-dropdown" class="list-item mobile-menu-dropdown">
+              <div
+                data-thq="thq-dropdown-toggle"
+                class="navigation-dropdown-toggle13"
               >
                 <span class="navigation-kurzgeschichten1 nav-link">
-                  {{ Kurzgeschichten }}
+                  {{ kurzgeschichten }}
                 </span>
                 <div
                   data-thq="thq-dropdown-arrow"
-                  class="navigation-dropdown-arrow3"
+                  class="navigation-dropdown-arrow5"
                 >
-                  <svg viewBox="0 0 1024 1024" class="navigation-icon10">
+                  <svg viewBox="0 0 1024 1024" class="navigation-icon14">
                     <path d="M426 726v-428l214 214z"></path>
                   </svg>
                 </div>
@@ -251,12 +318,10 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle10"
+                      class="navigation-dropdown-toggle14"
                     >
-                      <span
-                        class="navigation-ein-orden-fuer-eine-gute-tat1 nav-link"
-                      >
-                        {{ EinOrdenFuerEineGuteTat }}
+                      <span class="mobile-menu-dropdown-text nav-link">
+                        {{ einOrdenFuerEineGuteTat }}
                       </span>
                     </div>
                   </li>
@@ -268,18 +333,18 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle11"
+                      class="navigation-dropdown-toggle15"
                     >
-                      <span class="navigation-rosenteufel1 nav-link">
-                        {{ Rosenteufel }}
+                      <span class="mobile-menu-dropdown-text nav-link">
+                        {{ rosenteufel }}
                       </span>
                     </div>
                   </li>
                 </router-link>
               </ul>
             </div>
-            <a href="https://shop.openvisor.ch" class="navigation-shop1 nav-link">
-              {{ Shop1 }}
+            <a href="https://shop.openvisor.ch" class="mobile-menu-text nav-link">
+              {{ shop }}Shop
             </a>
           </nav>
         </div>
@@ -292,56 +357,56 @@
 export default {
   name: 'Navigation',
   props: {
-    Shop1: {
+    dramaGames: {
       type: String,
-      default: 'Shop',
+      default: 'Drama Games',
     },
-    LetzteGelegenheit1: {
+    murphysLarp: {
       type: String,
-      default: 'Letzte Gelegenheit',
+      default: "Murphy's LARP",
     },
-    OpenvisorLogo: {
+    openvisorLogo: {
       type: String,
       default: '/logo_mitoffenemvisier_bw_png-min-200h.png',
     },
-    Kurzgeschichten: {
+    kurzgeschichten: {
       type: String,
       default: 'Kurzgeschichten',
     },
-    LetzteGelegenheit: {
+    letzteGelegenheit: {
       type: String,
       default: 'Letzte Gelegenheit',
     },
-    Home: {
+    home: {
       type: String,
       default: 'Home',
     },
-    Larps: {
+    larps: {
       type: String,
       default: 'Larps',
     },
-    UeberUns: {
+    ueberUns: {
       type: String,
       default: 'Über uns',
     },
-    EinOrdenFuerEineGuteTat: {
+    einOrdenFuerEineGuteTat: {
       type: String,
       default: 'Ein Orden für eine gute Tat',
     },
-    SuesseTraeume: {
+    suesseTraeume: {
       type: String,
       default: 'Süsse Träume',
     },
-    Larpkonzept: {
+    larpkonzept: {
       type: String,
       default: 'Larpkonzept',
     },
-    Rosenteufel: {
+    rosenteufel: {
       type: String,
       default: 'Rosenteufel',
     },
     rootClassName: String,
-    Shop: {
+    shop: {
       type: String,
       default: 'Shop',
     },
@@ -360,8 +425,8 @@ export default {
   position: relative;
   align-items: center;
   padding-top: var(--dl-space-space-fourunits);
-  padding-left: var(--dl-space-space-threeunits);
-  padding-right: var(--dl-space-space-threeunits);
+  padding-left: var(--dl-space-space-twounits);
+  padding-right: var(--dl-space-space-twounits);
   padding-bottom: var(--dl-space-space-fourunits);
   justify-content: space-between;
 }
@@ -379,31 +444,12 @@ export default {
   display: flex;
 }
 .navigation-nav {
-  gap: var(--dl-space-space-fourunits);
+  gap: var(--dl-space-space-twounits);
   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-ueber-uns {
-  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;
@@ -484,15 +530,6 @@ export default {
   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;
@@ -518,16 +555,7 @@ export default {
   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 {
+.navigation-drama-games-dropdown {
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -545,7 +573,7 @@ export default {
   padding-right: 0px;
   padding-bottom: var(--dl-space-space-halfunit);
 }
-.navigation-kurzgeschichten {
+.navigation-drama-games {
   color: #ffffff;
   font-style: normal;
   text-align: center;
@@ -607,14 +635,60 @@ export default {
   color: #fff;
   background-color: #595959;
 }
-.navigation-ein-orden-fuer-eine-gute-tat {
-  width: 100%;
+.navigation-kurzgeschichten-dropdown {
   cursor: pointer;
-  display: flex;
-  font-size: 14px;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navigation-dropdown-toggle05 {
+  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: 400;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navigation-dropdown-arrow2 {
+  transition: 0.3s;
+}
+.navigation-icon04 {
+  fill: #ffffff;
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navigation-dropdown-list2 {
+  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-dropdown3 {
   cursor: pointer;
@@ -623,7 +697,7 @@ export default {
   border-radius: var(--dl-radius-radius-radius2);
   text-decoration: none;
 }
-.navigation-dropdown-toggle05 {
+.navigation-dropdown-toggle06 {
   fill: #595959;
   color: #595959;
   width: 100%;
@@ -636,33 +710,42 @@ export default {
   padding-right: var(--dl-space-space-unit);
   padding-bottom: var(--dl-space-space-halfunit);
 }
-.navigation-dropdown-toggle05:hover {
+.navigation-dropdown-toggle06:hover {
   fill: #fff;
   color: #fff;
   background-color: #595959;
 }
-.navigation-rosenteufel {
-  width: 100%;
+.navigation-dropdown4 {
   cursor: pointer;
-  display: flex;
-  font-size: 14px;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 400;
-}
-.navigation-shop {
-  color: #ffffff;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 500;
+  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-burger-menu {
   display: none;
   align-items: center;
   justify-content: center;
 }
-.navigation-icon04 {
+.navigation-icon06 {
   fill: #ffffff;
   width: 36px;
   cursor: pointer;
@@ -672,7 +755,7 @@ export default {
   border-radius: 18px;
   background-color: rgba(100, 100, 100, 0.4);
 }
-.navigation-icon04:hover {
+.navigation-icon06:hover {
   opacity: 0.5;
 }
 .navigation-mobile-menu {
@@ -704,7 +787,7 @@ export default {
 .navigation-menu-close {
   display: flex;
 }
-.navigation-icon06 {
+.navigation-icon08 {
   fill: #ffffff;
   width: 30px;
   cursor: pointer;
@@ -713,7 +796,7 @@ export default {
   transition: 0.3s;
   margin-left: -30px;
 }
-.navigation-icon06:hover {
+.navigation-icon08:hover {
   opacity: 0.5;
 }
 .navigation-nav-body {
@@ -724,34 +807,7 @@ export default {
   margin-left: 30px;
   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-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;
-  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 {
+.navigation-dropdown-toggle08 {
   fill: #595959;
   color: #595959;
   width: 100%;
@@ -772,10 +828,10 @@ export default {
   margin-right: 4px;
   vertical-align: middle;
 }
-.navigation-dropdown-arrow2 {
+.navigation-dropdown-arrow3 {
   transition: 0.3s;
 }
-.navigation-icon08 {
+.navigation-icon10 {
   width: 18px;
   height: 18px;
   margin-top: auto;
@@ -806,7 +862,7 @@ export default {
   border-radius: var(--dl-radius-radius-radius2);
   text-decoration: none;
 }
-.navigation-dropdown-toggle07 {
+.navigation-dropdown-toggle09 {
   fill: #595959;
   color: #595959;
   width: 100%;
@@ -819,20 +875,11 @@ export default {
   padding-right: var(--dl-space-space-unit);
   padding-bottom: var(--dl-space-space-halfunit);
 }
-.navigation-dropdown-toggle07:hover {
+.navigation-dropdown-toggle09: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;
@@ -840,7 +887,7 @@ export default {
   border-radius: var(--dl-radius-radius-radius2);
   text-decoration: none;
 }
-.navigation-dropdown-toggle08 {
+.navigation-dropdown-toggle10 {
   fill: #595959;
   color: #595959;
   width: 100%;
@@ -853,7 +900,7 @@ export default {
   padding-right: var(--dl-space-space-unit);
   padding-bottom: var(--dl-space-space-halfunit);
 }
-.navigation-dropdown-toggle08:hover {
+.navigation-dropdown-toggle10:hover {
   fill: #fff;
   color: #fff;
   background-color: #595959;
@@ -867,13 +914,80 @@ export default {
   font-family: Poppins;
   font-weight: 400;
 }
-.navigation-kurzgeschichten-dropdown1 {
+.navigation-dropdown-toggle11 {
+  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-larps2 {
+  font-size: 14px;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.navigation-dropdown-arrow4 {
+  transition: 0.3s;
+}
+.navigation-icon12 {
+  width: 18px;
+  height: 18px;
+  margin-top: auto;
+  transition: 0.3s;
+  margin-bottom: auto;
+}
+.navigation-drama-games-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-murphys-larp-dropdown {
   cursor: pointer;
   display: inline-block;
   position: relative;
   border-radius: var(--dl-radius-radius-radius2);
+  text-decoration: none;
 }
-.navigation-dropdown-toggle09 {
+.navigation-dropdown-toggle12 {
+  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-toggle12:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-dropdown-toggle13 {
   fill: #595959;
   color: #595959;
   width: 100%;
@@ -894,10 +1008,10 @@ export default {
   margin-right: 4px;
   vertical-align: middle;
 }
-.navigation-dropdown-arrow3 {
+.navigation-dropdown-arrow5 {
   transition: 0.3s;
 }
-.navigation-icon10 {
+.navigation-icon14 {
   width: 18px;
   height: 18px;
   margin-top: auto;
@@ -928,7 +1042,7 @@ export default {
   border-radius: var(--dl-radius-radius-radius2);
   text-decoration: none;
 }
-.navigation-dropdown-toggle10 {
+.navigation-dropdown-toggle14 {
   fill: #595959;
   color: #595959;
   width: 100%;
@@ -941,20 +1055,11 @@ export default {
   padding-right: var(--dl-space-space-unit);
   padding-bottom: var(--dl-space-space-halfunit);
 }
-.navigation-dropdown-toggle10:hover {
+.navigation-dropdown-toggle14: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;
@@ -962,7 +1067,7 @@ export default {
   border-radius: var(--dl-radius-radius-radius2);
   text-decoration: none;
 }
-.navigation-dropdown-toggle11 {
+.navigation-dropdown-toggle15 {
   fill: #595959;
   color: #595959;
   width: 100%;
@@ -975,27 +1080,11 @@ export default {
   padding-right: var(--dl-space-space-unit);
   padding-bottom: var(--dl-space-space-halfunit);
 }
-.navigation-dropdown-toggle11:hover {
+.navigation-dropdown-toggle15: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;
-}
-.navigation-shop1 {
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 500;
-  margin-bottom: var(--dl-space-space-unit);
-  text-decoration: none;
-}
 .navigation-root-class-name {
   max-width: 1200px;
 }
@@ -1022,6 +1111,9 @@ export default {
 .navigation-root-class-name11 {
   max-width: 1200px;
 }
+.navigation-root-class-name12 {
+  max-width: 1200px;
+}
 @media(max-width: 991px) {
   .navigation-navbar-interactive {
     padding-bottom: var(--dl-space-space-twounits);
@@ -1044,20 +1136,14 @@ export default {
   .navigation-dropdown-list1 {
     display: none;
   }
-  .navigation-home1 {
-    color: #ffffff;
-  }
-  .navigation-ueber-uns1 {
-    color: #ffffff;
-  }
-  .navigation-larpkonzept1 {
-    color: #ffffff;
+  .navigation-dropdown-list2 {
+    display: none;
   }
   .navigation-larps1 {
     color: #ffffff;
     font-size: 16px;
   }
-  .navigation-icon08 {
+  .navigation-icon10 {
     fill: #ffffff;
   }
   .navigation-larps-dropdown-list {
@@ -1065,17 +1151,26 @@ export default {
     border-color: #000000;
     background-color: rgb(41, 41, 41);
   }
-  .navigation-letzte-gelegenheit1 {
-    color: #ffffff;
-  }
   .navigation-suesse-traeume1 {
     color: #ffffff;
   }
+  .navigation-larps2 {
+    color: #ffffff;
+    font-size: 16px;
+  }
+  .navigation-icon12 {
+    fill: #ffffff;
+  }
+  .navigation-drama-games-dropdown-list {
+    display: none;
+    border-color: #000000;
+    background-color: rgb(41, 41, 41);
+  }
   .navigation-kurzgeschichten1 {
     color: #ffffff;
     font-size: 16px;
   }
-  .navigation-icon10 {
+  .navigation-icon14 {
     fill: #ffffff;
   }
   .navigation-kurzgeschichten-dropdown-list {
@@ -1083,24 +1178,18 @@ export default {
     border-color: #000000;
     background-color: rgb(41, 41, 41);
   }
-  .navigation-ein-orden-fuer-eine-gute-tat1 {
-    color: #ffffff;
-  }
-  .navigation-rosenteufel1 {
-    color: #ffffff;
-  }
-  .navigation-shop1 {
-    color: #ffffff;
-  }
 }
 @media(max-width: 479px) {
   .navigation-navbar-interactive {
     padding: var(--dl-space-space-unit);
   }
-  .navigation-icon08 {
+  .navigation-icon10 {
     fill: #ffffff;
   }
-  .navigation-icon10 {
+  .navigation-icon12 {
+    fill: #ffffff;
+  }
+  .navigation-icon14 {
     fill: #ffffff;
   }
 }
diff --git a/src/components/row1.vue b/src/components/row1.vue
index 0c24c4e..d5a5f73 100644
--- a/src/components/row1.vue
+++ b/src/components/row1.vue
@@ -8,11 +8,11 @@
           class="row1-image"
         />
         <div class="character-description">
-          <h1 class="row1-header">{{ Fortier }}</h1>
+          <h1 class="row1-header">{{ fortier }}</h1>
           <h1 class="row1-header1">
             <span>
               Leitung der Justizvollzugsanstalt
-              <span v-html="raw7hii"></span>
+              <span v-html="raw9zut"></span>
             </span>
             <br />
           </h1>
@@ -23,7 +23,7 @@
         <span>OT-Trigger:  Tod</span>
         <br />
       </p>
-      <p class="row1-themes">{{ FortierThemes }}</p>
+      <p class="row1-themes">{{ fortierThemes }}</p>
       <p class="row1-description">
         <span>
           Fortier (gesprochen &quot;Fortjeeh&quot;) übernahm vor 3 Jahren das
@@ -65,7 +65,7 @@
         <span>OT-Trigger:  Kindertod</span>
         <br />
       </p>
-      <p class="row1-themes1">{{ BellucciThemes }}</p>
+      <p class="row1-themes1">{{ bellucciThemes }}</p>
       <p class="row1-description1">
         <span>
           Dr. Bellucci (gesprochen &quot;Beluhtschi&quot;) wurde vor 2 Jahren
@@ -90,22 +90,22 @@
 export default {
   name: 'Row1',
   props: {
-    FortierThemes: {
+    fortierThemes: {
       type: String,
       default: 'Themes: Macht, Gewissensbisse, Ängste',
     },
-    BellucciThemes: {
+    bellucciThemes: {
       type: String,
       default: 'Themes: Trauma, Manipulation, Suche, Schuld',
     },
-    Fortier: {
+    fortier: {
       type: String,
       default: 'Fortier',
     },
   },
   data() {
     return {
-      raw7hii: ' ',
+      raw9zut: ' ',
     }
   },
 }
diff --git a/src/components/row2.vue b/src/components/row2.vue
index 51550ea..bcc7fa0 100644
--- a/src/components/row2.vue
+++ b/src/components/row2.vue
@@ -8,8 +8,8 @@
           class="row2-image"
         />
         <div class="character-description">
-          <h1 class="row2-header">{{ Jankovic }}</h1>
-          <h1 class="row2-header1">{{ JankovicJob }}</h1>
+          <h1 class="row2-header">{{ jankovic }}</h1>
+          <h1 class="row2-header1">{{ jankovicJob }}</h1>
         </div>
         <div></div>
       </div>
@@ -56,8 +56,8 @@
           class="row2-image1"
         />
         <div class="character-description">
-          <h1 class="row2-header2">{{ Krueger }}</h1>
-          <h1 class="row2-header3">{{ KruegerJob }}</h1>
+          <h1 class="row2-header2">{{ krueger }}</h1>
+          <h1 class="row2-header3">{{ kruegerJob }}</h1>
         </div>
         <div></div>
       </div>
@@ -103,19 +103,19 @@
 export default {
   name: 'Row2',
   props: {
-    KruegerJob: {
+    kruegerJob: {
       type: String,
       default: 'Wärter/in & Bunkerelektrik',
     },
-    Jankovic: {
+    jankovic: {
       type: String,
       default: 'Dr. Jankovic',
     },
-    Krueger: {
+    krueger: {
       type: String,
       default: 'Krüger',
     },
-    JankovicJob: {
+    jankovicJob: {
       type: String,
       default: 'Arzt/Ärztin',
     },
diff --git a/src/components/row3.vue b/src/components/row3.vue
index 32f0d32..abc990b 100644
--- a/src/components/row3.vue
+++ b/src/components/row3.vue
@@ -8,7 +8,7 @@
           class="row3-image"
         />
         <div class="character-description">
-          <h1 class="row3-header">{{ Schmidt }}</h1>
+          <h1 class="row3-header">{{ schmidt }}</h1>
           <h1 class="row3-header1">
             <span>Wärter/in &amp; Zeugwart</span>
             <br />
@@ -24,8 +24,8 @@
         <span>Themes: Paranoia, Macht, Ängste, Verlust, Hass</span>
         <br />
       </p>
-      <span class="character-summary">{{ SchmidtAbsatz1 }}</span>
-      <span class="character-summary">{{ SchmidtAbsatz2 }}</span>
+      <span class="character-summary">{{ schmidtAbsatz1 }}</span>
+      <span class="character-summary">{{ schmidtAbsatz2 }}</span>
     </section>
     <section class="card">
       <div class="character-header">
@@ -35,7 +35,7 @@
           class="row3-image1"
         />
         <div class="character-description">
-          <h1 class="row3-header2">{{ Hagiro }}</h1>
+          <h1 class="row3-header2">{{ hagiro }}</h1>
           <h1 class="row3-header3">
             <span>dienstälteste/r Wärter/in</span>
             <br />
@@ -52,8 +52,8 @@
         <span>Themes: Gerechtigkeit, Gewalt, Druck, Hass</span>
         <br />
       </p>
-      <span class="character-summary">{{ HagiroAbsatz1 }}</span>
-      <span class="character-summary">{{ HagiroAbsatz2 }}</span>
+      <span class="character-summary">{{ hagiroAbsatz1 }}</span>
+      <span class="character-summary">{{ hagiroAbsatz2 }}</span>
     </section>
   </div>
 </template>
@@ -62,31 +62,31 @@
 export default {
   name: 'Row3',
   props: {
-    HagiroAbsatz2: {
+    hagiroAbsatz2: {
       type: String,
       default:
         'Hagiro ist bekannt für einen konsequenten Gerechtigkeitssinn und für einen Raucherhusten. Hagiro ist streng zu den Häftlingen und freundlich zu den anderen.',
     },
-    HagiroAbsatz1: {
+    hagiroAbsatz1: {
       type: String,
       default:
         'Hagiro ist mit 7 Jahren Dienst am längsten im Gefängnis Schwarzbach. Hagiro setzt die Massnahmen von Fortier rigoros durch, zögert aber auch nicht die Meinung zu äussern, wenn Hagiro etwas missfällt. Hagiro hilft im Bunker Fortier bei der Aktenverwaltung und hat Häftling Lindbeck dafür als Unterstützung.',
     },
-    SchmidtAbsatz2: {
+    schmidtAbsatz2: {
       type: String,
       default:
         'Schmidt ist bekannt dafür, unangenehme Fragen zu stellen und geht eher grob mit den Häftlingen um. Dafür hat niemand die Aufgaben des Zeugwarts besser im Griff als Schmidt.',
     },
-    SchmidtAbsatz1: {
+    schmidtAbsatz1: {
       type: String,
       default:
         'Wärter Schmidt arbeitet seit 3 Jahren im Gefängnis Schwarzbach. Schmidt kam ziemlich zeitgleich mit Fortier zu der Stelle. Schmidt ist Zeugwart und damit verantwortlich für die Lagerung und Wartung der Materialien, Werkzeuge, Geräte und Waffen des Gefängnisses. Schmidt nutzt die Häftlinge um diese zu warten und zu reinigen. Wenn Krüger mit Häftlingen etwas an der Elektrik arbeiten möchte braucht Krüger die Werkzeuge von Schmidt.',
     },
-    Schmidt: {
+    schmidt: {
       type: String,
       default: 'Schmidt',
     },
-    Hagiro: {
+    hagiro: {
       type: String,
       default: 'Hagiro',
     },
diff --git a/src/components/row4.vue b/src/components/row4.vue
index 5c0820a..01647a0 100644
--- a/src/components/row4.vue
+++ b/src/components/row4.vue
@@ -8,7 +8,7 @@
           class="row4-image"
         />
         <div class="character-description">
-          <h1 class="row4-header">{{ Rodriguez }}</h1>
+          <h1 class="row4-header">{{ rodriguez }}</h1>
           <h1 class="row4-header1">
             <span>Häftling</span>
             <br />
@@ -24,9 +24,9 @@
         <span>Themes: Unterdrückung, Sehnsucht, Suche, Gewissensbisse</span>
         <br />
       </p>
-      <span class="character-summary">{{ RodriguezAbsatz1 }}</span>
-      <span class="character-summary">{{ RodriguezAbsatz2 }}</span>
-      <span class="character-summary">{{ RodriguezAbsatz3 }}</span>
+      <span class="character-summary">{{ rodriguezAbsatz1 }}</span>
+      <span class="character-summary">{{ rodriguezAbsatz2 }}</span>
+      <span class="character-summary">{{ rodriguezAbsatz3 }}</span>
     </section>
     <section class="row4-jenatsch card">
       <div class="character-header">
@@ -36,7 +36,7 @@
           class="row4-image1"
         />
         <div class="character-description">
-          <h1 class="row4-header2">{{ Jenatsch }}</h1>
+          <h1 class="row4-header2">{{ jenatsch }}</h1>
           <h1 class="row4-header3">
             <span>Häftling</span>
             <br />
@@ -66,7 +66,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="rawsu46"></span>
+          <span v-html="raw8w1m"></span>
         </span>
         <span>Ab und zu spielt Jenatsch Karten mit Collins und Krüger.</span>
         <br />
@@ -86,26 +86,26 @@
 export default {
   name: 'Row4',
   props: {
-    RodriguezAbsatz3: {
+    rodriguezAbsatz3: {
       type: String,
       default:
         'Rodriguez ist bekannt für eine raue aber zuvorkommende Art. Wegen dem Mord vor drei Jahren verlor Rodriguez aber bei den meisten das Vertrauen.',
     },
-    RodriguezAbsatz2: {
+    rodriguezAbsatz2: {
       type: String,
       default:
         'Rodriguez war vor dem Gefängnis Handwerker/in und arbeitete auch 3 Jahre in der Gefängnisschreinerei. Rodriguez ist daher besonders geeignet, mechanische Apparaturen zu reparieren.',
     },
-    Jenatsch: {
+    jenatsch: {
       type: String,
       default: 'Prof. Dr. Jenatsch',
     },
-    Rodriguez: {
+    rodriguez: {
       type: String,
       default: 'Rodriguez',
     },
     rootClassName: String,
-    RodriguezAbsatz1: {
+    rodriguezAbsatz1: {
       type: String,
       default:
         'Rodriguez (gesprochen "Rodrigess") sitzt bereits seit 6 Jahren im Gefängnis Schwarzbach und damit von den anwesenden Häftlingen am längsten. Eigentlich hätte Rodriguez letztes Jahr entlassen werden sollen, doch vor 2 Jahren brachte Rodriguez den Häftling Sadowski (gesprochen "Sadofski") um, indem Rodriguez die medizinischen Instrumente von Jankovic manipulierte. Deswegen sitzte Rodriguez 3 Jahre lang in Isolationshaft bis die Sirenen losheulten.',
@@ -113,7 +113,7 @@ export default {
   },
   data() {
     return {
-      rawsu46: ' ',
+      raw8w1m: ' ',
     }
   },
 }
diff --git a/src/components/row5.vue b/src/components/row5.vue
index 44ed399..f24b1e4 100644
--- a/src/components/row5.vue
+++ b/src/components/row5.vue
@@ -8,7 +8,7 @@
           class="row5-image"
         />
         <div class="character-description">
-          <h1 class="row5-header">{{ Collins }}</h1>
+          <h1 class="row5-header">{{ collins }}</h1>
           <h1 class="row5-header1">
             <span>Häftling</span>
             <br />
@@ -25,8 +25,8 @@
         <span>Themes: Ungerechtigkeit, Pflicht, Gewissensbisse, Familie</span>
         <br />
       </p>
-      <span class="character-summary">{{ CollinsAbsatz1 }}</span>
-      <span class="character-summary">{{ CollinsAbsatz2 }}</span>
+      <span class="character-summary">{{ collinsAbsatz1 }}</span>
+      <span class="character-summary">{{ collinsAbsatz2 }}</span>
     </section>
     <section class="card">
       <div class="character-header">
@@ -36,7 +36,7 @@
           class="row5-image1"
         />
         <div class="character-description">
-          <h1 class="row5-header2">{{ Lindbeck }}</h1>
+          <h1 class="row5-header2">{{ lindbeck }}</h1>
           <h1 class="row5-header3">
             <span>Häftling</span>
             <br />
@@ -80,21 +80,21 @@
 export default {
   name: 'Row5',
   props: {
-    Lindbeck: {
+    lindbeck: {
       type: String,
       default: 'Lindbeck ',
     },
     rootClassName: String,
-    Collins: {
+    collins: {
       type: String,
       default: 'Collins',
     },
-    CollinsAbsatz1: {
+    collinsAbsatz1: {
       type: String,
       default:
         'Collins ist seit 5 Jahren im Gefängnis. Bevor alle im Bunker waren hörte man selten was von Collins. Collins war nicht jemand, der Krawall machte. Doch seit sie im Bunker sind, hat Collins immer wieder Ärger mit den Wärtern. Collins bezweifelt, dass es Zufall ist, dass Collins die meisten anstrengenden Aufgaben übernehmen muss. Collins war nach eigenen Berechnungen schon mindestens fünf mal länger an der Lüftungskurbel als alle anderen.',
     },
-    CollinsAbsatz2: {
+    collinsAbsatz2: {
       type: String,
       default:
         'Collins ist bekannt für eine reservierte Art und eine kurze Lunte wenn Collins provoziert wird. Ansonsten schluckt Collins die Unannehmlichkeiten im Bunker runter und spielt Karten mit Krüger und Prof. Dr. Jenatsch.',
diff --git a/src/components/row6.vue b/src/components/row6.vue
index bb1af49..8665e2c 100644
--- a/src/components/row6.vue
+++ b/src/components/row6.vue
@@ -8,7 +8,7 @@
           class="row6-image"
         />
         <div class="character-description">
-          <h1 class="row6-header">{{ Sartre }}</h1>
+          <h1 class="row6-header">{{ sartre }}</h1>
           <h1 class="row6-header1">
             <span>Gruppenführer/in</span>
             <br />
@@ -24,9 +24,9 @@
         <span>Themes: Familie, Sucht, Scham, Schutz</span>
         <br />
       </p>
-      <span class="character-summary">{{ SartreAbsatz1 }}</span>
-      <span class="character-summary">{{ SartreAbsatz2 }}</span>
-      <span class="row6-text08 character-summary">{{ SartreAbsatz3 }}</span>
+      <span class="character-summary">{{ sartreAbsatz1 }}</span>
+      <span class="character-summary">{{ sartreAbsatz2 }}</span>
+      <span class="row6-text08 character-summary">{{ sartreAbsatz3 }}</span>
     </section>
     <section class="card">
       <div class="character-header">
@@ -55,9 +55,9 @@
         <span>Themes: Ängste, Gewissensbisse, Verzweiflung</span>
         <br />
       </p>
-      <span class="character-summary">{{ PavoneAbsatz1 }}</span>
-      <span class="character-summary">{{ PavoneAbsatz2 }}</span>
-      <span class="row6-text19 character-summary">{{ PavoneAbsatz3 }}</span>
+      <span class="character-summary">{{ pavoneAbsatz1 }}</span>
+      <span class="character-summary">{{ pavoneAbsatz2 }}</span>
+      <span class="row6-text19 character-summary">{{ pavoneAbsatz3 }}</span>
     </section>
   </div>
 </template>
@@ -66,37 +66,37 @@
 export default {
   name: 'Row6',
   props: {
-    SartreAbsatz2: {
+    sartreAbsatz2: {
       type: String,
       default:
         'Sartre ist bekannt dafür, eine besorgte Mimik zu haben. Sartres Redensweise ist trotzdem befehlerisch.',
     },
-    SartreAbsatz1: {
+    sartreAbsatz1: {
       type: String,
       default:
         'Wm (Wachtmeister [militärische Ränge sind Geschlechtsneutral], das ist ein Unteroffiziersrang) Sartre kam mit Pavone in den Bunker. Sartre leitet Pavone an und integriert sich und Pavone auch bei dem Rest der Bunkerbesatzung. Sartre bespricht sich gelegentlich mit Fortier.',
     },
-    PavoneAbsatz3: {
+    pavoneAbsatz3: {
       type: String,
       default:
         '(Nur ein paar Charaktere wissen mehr zu diesem Charakter, entsprechend steht hier wenig.)',
     },
-    SartreAbsatz3: {
+    sartreAbsatz3: {
       type: String,
       default:
         '(Nur ein paar Charaktere wissen mehr zu diesem Charakter, entsprechend steht hier wenig.)',
     },
-    PavoneAbsatz1: {
+    pavoneAbsatz1: {
       type: String,
       default:
         'Sdt (Soldat [militärische Ränge sind Geschlechtsneutral]) Pavone brachte das militärische Funkgerät in den Bunker, das Pavone mit Sartre bedient. Pavone bittet immer wieder Häftlinge um bei der Bedienung des Funkgeräts zu helfen.',
     },
-    PavoneAbsatz2: {
+    pavoneAbsatz2: {
       type: String,
       default:
         'Pavone wirkt unruhig, hat aber eine freundliche Art und bestechenden Charme.',
     },
-    Sartre: {
+    sartre: {
       type: String,
       default: 'Wm Sartre',
     },
diff --git a/src/components/veranstaltungen-liste.vue b/src/components/veranstaltungen-liste.vue
index 81af8fd..53eaa3c 100644
--- a/src/components/veranstaltungen-liste.vue
+++ b/src/components/veranstaltungen-liste.vue
@@ -4,50 +4,50 @@
     v-bind:class="rootClassName"
   >
     <div class="event-entry veranstaltungen-liste-letzte-gelegenheit-run1">
-      <h3 class="event-title event-done">{{ Run1 }}</h3>
-      <p class="event-date event-done">{{ Datum1 }}</p>
-      <p class="event-done event-location">{{ Standort1 }}</p>
+      <h3 class="event-title event-done">{{ run1 }}</h3>
+      <p class="event-date event-done">{{ datum1 }}</p>
+      <p class="event-done event-location">{{ standort1 }}</p>
       <p class="event-location event-done-green">
         durchgeführt mit 15 Teilnehmenden
       </p>
     </div>
     <div class="veranstaltungen-liste-letzte-gelegenheit-run2 event-entry">
-      <h3 class="event-title event-done">{{ Run2 }}</h3>
-      <p class="event-date event-done">{{ Datum2 }}</p>
-      <p class="event-done event-location">{{ Standort2 }}</p>
+      <h3 class="event-title event-done">{{ run2 }}</h3>
+      <p class="event-date event-done">{{ datum2 }}</p>
+      <p class="event-done event-location">{{ standort2 }}</p>
       <p class="event-location event-done-green">
         durchgeführt mit 15 Teilnehmenden
       </p>
     </div>
     <div class="veranstaltungen-liste-letzte-gelegenheit-run3 event-entry">
-      <h3 class="event-title event-done">{{ Run3 }}</h3>
-      <p class="event-date event-done">{{ Datum3 }}</p>
-      <p class="event-done event-location">{{ Standort3 }}</p>
+      <h3 class="event-title event-done">{{ run3 }}</h3>
+      <p class="event-date event-done">{{ datum3 }}</p>
+      <p class="event-done event-location">{{ standort3 }}</p>
       <p class="event-location event-done-green">
         durchgeführt mit 15 Teilnehmenden
       </p>
     </div>
     <div class="veranstaltungen-liste-letzte-gelegenheit-run4 event-entry">
-      <h3 class="event-title event-done">{{ Run4 }}</h3>
-      <p class="event-date event-done">{{ Datum4 }}</p>
-      <p class="event-done event-location">{{ Standort4 }}</p>
+      <h3 class="event-title event-done">{{ run4 }}</h3>
+      <p class="event-date event-done">{{ datum4 }}</p>
+      <p class="event-done event-location">{{ standort4 }}</p>
       <p class="event-location event-done-green">
         durchgeführt mit 15 Teilnehmenden
       </p>
     </div>
     <div class="event-entry veranstaltungen-liste-letzte-gelegenheit-run5">
-      <h3 class="event-title">{{ Run5 }}</h3>
-      <p class="event-date">{{ Datum5 }}</p>
-      <p class="event-location">{{ Standort5 }}</p>
+      <h3 class="event-title">{{ run5 }}</h3>
+      <p class="event-date">{{ datum5 }}</p>
+      <p class="event-location">{{ standort5 }}</p>
       <div class="veranstaltungen-liste-plaetze04">
         <p class="event-red event-location">0 von 15 freie Plätze</p>
         <p class="event-green event-location">3 Personen auf Warteliste</p>
       </div>
     </div>
     <div class="veranstaltungen-liste-letzte-gelegenheit-run6 event-entry">
-      <h3 class="event-title">{{ Run6 }}</h3>
-      <p class="event-date">{{ Datum6 }}</p>
-      <p class="event-location">{{ Standort6 }}</p>
+      <h3 class="event-title">{{ run6 }}</h3>
+      <p class="event-date">{{ datum6 }}</p>
+      <p class="event-location">{{ standort6 }}</p>
       <div class="veranstaltungen-liste-plaetze07">
         <p class="event-red event-location">0 von 15 freie Plätze</p>
         <p class="event-green event-location">7 Personen auf Warteliste</p>
@@ -60,76 +60,76 @@
 export default {
   name: 'VeranstaltungenListe',
   props: {
-    Standort5: {
+    standort5: {
       type: String,
       default: 'Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen',
     },
-    Run1: {
+    run1: {
       type: String,
       default: 'Run 1 (Schweiz)',
     },
-    Run4: {
+    run4: {
       type: String,
       default: 'Run  4 (Deutschland)',
     },
-    Standort1: {
+    standort1: {
       type: String,
       default: 'Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen',
     },
-    Datum3: {
+    datum3: {
       type: String,
       default: '1. Juli 2023, 10:00 Uhr bis 2. Juli 2023, 14:00 Uhr',
     },
-    Datum2: {
+    datum2: {
       type: String,
       default: '13. Mai 2023, 10:00 Uhr bis 14. Mai 2023, 14:00 Uhr',
     },
-    Datum1: {
+    datum1: {
       type: String,
       default: '1. April 2023, 10:00 Uhr bis 2. April 2023, 14:00 Uhr',
     },
-    Run6: {
+    run6: {
       type: String,
       default: 'Run  6 (Schweiz)',
     },
     rootClassName: String,
-    Run2: {
+    run2: {
       type: String,
       default: 'Run  2 (Deutschland)',
     },
-    Run3: {
+    run3: {
       type: String,
       default: 'Run  3 (Deutschland)',
     },
-    Datum4: {
+    datum4: {
       type: String,
       default: '26.08.2023, 10:00 Uhr bis 27.08.2023, 14:00 Uhr',
     },
-    Datum6: {
+    datum6: {
       type: String,
       default: '01.06.2024, 10:00 Uhr bis 02.06.2024, 14:00 Uhr',
     },
-    Standort6: {
+    standort6: {
       type: String,
       default: 'Zivilschutzanlage Sonnenblock Chilegass 8, 8484 Weisslingen',
     },
-    Datum5: {
+    datum5: {
       type: String,
       default: '25.05.2024, 10:00 Uhr bis 26.05.2024, 14:00 Uhr',
     },
-    Standort2: {
+    standort2: {
       type: String,
       default: 'Waldritter e.V. (im Raumschiff) Ewaldstrasse 20, 45699 Herten',
     },
-    Run5: {
+    run5: {
       type: String,
       default: 'Run  5 (Schweiz)',
     },
-    Standort4: {
+    standort4: {
       type: String,
       default: 'Waldritter e.V. (im Raumschiff) Ewaldstrasse 20, 45699 Herten',
     },
-    Standort3: {
+    standort3: {
       type: String,
       default: 'Waldritter e.V. (im Raumschiff) Ewaldstrasse 20, 45699 Herten',
     },
diff --git a/src/router.js b/src/router.js
index c99879a..f4a01e2 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Meta from 'vue-meta'
 
+import MurphysLARP from './views/murphys-larp'
 import SsseTrume from './views/ssse-trume'
 import BerUns from './views/ber-uns'
 import Larpkonzept from './views/larpkonzept'
@@ -17,6 +18,11 @@ Vue.use(Meta)
 export default new Router({
   mode: 'history',
   routes: [
+    {
+      name: 'Murphys-LARP',
+      path: '/larpkonzept1',
+      component: MurphysLARP,
+    },
     {
       name: 'Ssse-Trume',
       path: '/suesse-traeume',
diff --git a/src/style.css b/src/style.css
index e6b2e2f..dc7912f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -114,6 +114,7 @@
 }
 .section-head {
   color: #ffffff;
+  font-size: 36px;
   align-self: center;
   font-style: normal;
   text-align: center;
@@ -313,7 +314,7 @@
   align-self: center;
   margin-top: var(--dl-space-space-sixunits);
 }
-.home-row {
+.card-row {
   gap: var(--dl-space-space-twounits);
   width: 100%;
   display: flex;
@@ -344,17 +345,11 @@
   font-family: Poppins;
   line-height: 28px;
 }
-.site-heading {
-  color: rgb(255, 255, 255);
-  font-size: 64px;
-  align-self: center;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 500;
-}
+
 .site-subtitle {
   color: rgb(255, 255, 255);
   font-size: 20px;
+  max-width: 90%;
   font-family: Poppins;
   line-height: 30px;
 }
@@ -383,6 +378,7 @@
   font-size: 20px;
   align-self: center;
   font-style: normal;
+  text-align: center;
   font-family: Poppins;
   font-weight: 500;
   line-height: 24px;
@@ -402,6 +398,115 @@
 .event-yellow {
   color: #ffff00;
 }
+.desktop-menu-dropdown-text {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: "Poppins";
+  font-weight: 400;
+}
+.mobile-menu-dropdown-text {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.mobile-menu-text {
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 500;
+  margin-bottom: var(--dl-space-space-unit);
+  text-decoration: none;
+}
+.desktop-menu-text {
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.15;
+  text-decoration: none;
+}
+.page-title {
+  color: #ffffff;
+  font-size: 64px;
+  font-style: normal;
+  text-align: center;
+  font-family: Poppins;
+  font-weight: 500;
+  padding-left: 12px;
+  margin-bottom: var(--dl-space-space-halfunit);
+  padding-right: 12px;
+}
+.page-heading {
+  text-transform: capitalize;
+}
+.card-heading {
+  color: #ffffff;
+  font-size: 24px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 600;
+  line-height: 36px;
+}
+.card-text {
+  color: #ffffff;
+  font-size: 18px;
+  font-family: Poppins;
+  line-height: 28px;
+}
+.card-link {
+  color: #ffff00;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+}
+.card-container {
+  gap: var(--dl-space-space-twounits);
+  flex: 1;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding-top: var(--dl-space-space-sixunits);
+  padding-left: var(--dl-space-space-oneandhalfunits);
+  padding-right: var(--dl-space-space-oneandhalfunits);
+  flex-direction: column;
+  justify-content: center;
+}
+.page-subtitle {
+  color: #ffffff;
+  font-size: 20px;
+  max-width: 90%;
+  text-align: center;
+  font-family: Poppins;
+  line-height: 30px;
+}
+.buttons {
+  gap: 8%;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+.buttons-container {
+  gap: 48px;
+  width: 90%;
+  display: flex;
+  max-width: 1200px;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+.mobile-menu-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+  margin-bottom: 12px;
+}
 .Heading {
   font-size: 32px;
   font-family: Inter;
@@ -428,21 +533,18 @@
   .character-title {
     font-size: 32px;
   }
-  .home-row {
+  .card-row {
     gap: var(--dl-space-space-halfunit);
     flex-direction: column;
   }
-  .site-heading {
-    text-align: left;
-  }
   .site-subtitle {
     text-align: left;
   }
+  .buttons-container {
+    flex-direction: column;
+  }
 }
 @media(max-width: 767px) {
-  .nav-link {
-    color: black;
-  }
   .round-borders {
     width: 90%;
   }
@@ -463,7 +565,7 @@
   .character-title {
     color: rgb(255, 255, 255);
   }
-  .home-row {
+  .card-row {
     gap: var(--dl-space-space-oneandhalfunits);
     flex-wrap: wrap;
     flex-direction: column;
@@ -474,15 +576,25 @@
     font-family: Poppins;
     line-height: 28px;
   }
-  .site-heading {
-    font-size: 40px;
-  }
   .site-subtitle {
     color: rgb(255, 255, 255);
     font-size: 16px;
     font-family: Poppins;
     line-height: 24px;
   }
+  .mobile-menu-text {
+    color: #ffffff;
+  }
+  .page-title {
+    font-size: 40px;
+  }
+  .page-subtitle {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  .buttons {
+    flex-direction: column;
+  }
 }
 @media(max-width: 479px) {
   .section-head {
@@ -494,8 +606,10 @@
     font-family: Poppins;
     line-height: 28px;
   }
-  .site-heading {
+  .page-title {
     max-width: 280px;
-    font-style: normal;
+  }
+  .card-container {
+    gap: var(--dl-space-space-twounits);
   }
 }
diff --git a/src/views/ber-uns.vue b/src/views/ber-uns.vue
index d26535b..3d44cf8 100644
--- a/src/views/ber-uns.vue
+++ b/src/views/ber-uns.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="ber-uns-container">
     <app-navigation rootClassName="navigation-root-class-name10"></app-navigation>
-    <h1 class="ber-uns-heading site-title">
+    <h1 class="page-title">
       <span>Über uns</span>
       <br />
     </h1>
-    <div class="ber-uns-container1 text-body">
+    <div class="text-body">
       <span>
         <span>
           Bis jetzt ist Hermann das einzige offizielle Mitglied vom OpenVisor
@@ -39,6 +39,7 @@ import AppKontakt from '../components/kontakt'
 
 export default {
   name: 'BerUns',
+  props: {},
   components: {
     AppNavigation,
     AppKontakt,
@@ -71,13 +72,6 @@ export default {
   background-size: cover;
   background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ber-uns-heading {
-  font-size: 64px;
-}
-.ber-uns-container1 {
-  align-items: center;
-  justify-content: center;
-}
 .ber-uns-link {
   display: flex;
   flex-direction: row;
diff --git a/src/views/ein-orden-fr-eine-gute-tat.vue b/src/views/ein-orden-fr-eine-gute-tat.vue
index d6c5fe7..2291765 100644
--- a/src/views/ein-orden-fr-eine-gute-tat.vue
+++ b/src/views/ein-orden-fr-eine-gute-tat.vue
@@ -1,11 +1,11 @@
 <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">
+    <h1 class="page-title">
       <span>Ein Orden für eine gute Tat</span>
       <br />
     </h1>
-    <span class="ein-orden-fr-eine-gute-tat-caption">
+    <span class="page-subtitle">
       <span>Eine moralische Kurzgeschichte für Kinder</span>
       <br />
     </span>
@@ -304,6 +304,7 @@ import AppKontakt from '../components/kontakt'
 
 export default {
   name: 'EinOrdenFrEineGuteTat',
+  props: {},
   components: {
     AppNavigation,
     DangerousHTML,
@@ -343,21 +344,6 @@ export default {
   background-size: cover;
   background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ein-orden-fr-eine-gute-tat-heading {
-  color: rgb(255, 255, 255);
-  font-size: 64px;
-  font-style: normal;
-  text-align: center;
-  font-family: Poppins;
-  font-weight: 500;
-  margin-bottom: 12px;
-}
-.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;
@@ -373,32 +359,8 @@ export default {
   display: contents;
 }
 @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;
-    margin-bottom: 6px;
-  }
-  .ein-orden-fr-eine-gute-tat-caption {
-    color: rgb(255, 255, 255);
-    font-size: 16px;
-    font-family: Poppins;
-    line-height: 24px;
-  }
-}
-@media(max-width: 479px) {
-  .ein-orden-fr-eine-gute-tat-heading {
-    max-width: 70%;
-  }
-}
 </style>
diff --git a/src/views/home.vue b/src/views/home.vue
index bfb8469..11bda62 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -14,12 +14,12 @@
         rootClassName="veranstaltungen-liste-root-class-name"
       ></veranstaltungen-liste>
     </section>
-    <section class="home-larps-kapitel">
-      <h2 class="home-larps-titel section-head">LARPs</h2>
-      <main class="home-row">
+    <section class="card-container">
+      <h2 class="page-heading section-head">LARPs</h2>
+      <main class="card-row">
         <section class="card">
-          <h1 class="home-header">Letzte Gelegenheit</h1>
-          <p class="home-description">
+          <h1 class="card-heading">Letzte Gelegenheit</h1>
+          <p class="card-text">
             Das Nordic LARP “Letzte Gelegenheit” spielt in der heutigen Zeit in
             einer alternativen Realität: Vor 10 Tagen fiel plötzlich der Strom aus
             und dichte Nebelschwaden überzogen einige Städte. Sirenen führten die
@@ -31,12 +31,12 @@
             verschärft sich.
           </p>
           <router-link to="/letzte-gelegenheit">
-            <div class="home-button"><p class="home-text">Mehr -&gt;</p></div>
+            <div class="home-button"><p class="card-link">Mehr -&gt;</p></div>
           </router-link>
         </section>
         <div class="card">
-          <h1 class="home-header1">Süsse Träume</h1>
-          <p class="home-description1">
+          <h1 class="card-heading">Süsse Träume</h1>
+          <p class="card-text">
             <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
@@ -53,20 +53,20 @@
             </span>
           </p>
           <router-link to="/suesse-traeume">
-            <div class="home-button1"><p class="home-text05">Mehr -&gt;</p></div>
+            <div class="home-button1"><p class="card-link">Mehr -&gt;</p></div>
           </router-link>
         </div>
       </main>
     </section>
-    <section class="home-kurzgeschichten-kapitel">
-      <h2 class="home-kurzgeschichten-titel section-head">
+    <section class="card-container">
+      <h2 class="section-head">
         <span>Kurzgeschichten</span>
         <br />
       </h2>
-      <main class="home-row">
+      <main class="card-row">
         <div class="card">
-          <h1 class="home-header2">Ein Orden für eine gute Tat</h1>
-          <p class="home-description2">
+          <h1 class="card-heading">Ein Orden für eine gute Tat</h1>
+          <p class="card-text">
             &quot;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
@@ -77,12 +77,12 @@
             Fragestellung bilden.
           </p>
           <router-link to="/ein-orden-fuer-eine-gute-tat">
-            <div class="home-button2"><p class="home-text08">Lesen -&gt;</p></div>
+            <div class="home-button2"><p class="card-link">Lesen -&gt;</p></div>
           </router-link>
         </div>
         <div class="card">
-          <h1 class="home-header3">Rosenteufel</h1>
-          <p class="home-description3">
+          <h1 class="card-heading">Rosenteufel</h1>
+          <p class="card-text">
             <span>
               &quot;Ich erzähl euch ein Gschicht von wahr, so wahr wie ihr danach
               nicht gwollt. Ein Gschicht dieerzähl als einzger überlebend: Mein
@@ -98,7 +98,7 @@
             </span>
           </p>
           <router-link to="/rosenteufel">
-            <div class="home-button3"><p class="home-text13">Lesen -&gt;</p></div>
+            <div class="home-button3"><p class="card-link">Lesen -&gt;</p></div>
           </router-link>
         </div>
       </main>
@@ -114,6 +114,7 @@ import AppKontakt from '../components/kontakt'
 
 export default {
   name: 'Home',
+  props: {},
   components: {
     AppNavigation,
     VeranstaltungenListe,
@@ -180,38 +181,6 @@ export default {
   padding-left: 12px;
   padding-right: 12px;
 }
-.home-larps-kapitel {
-  gap: var(--dl-space-space-twounits);
-  flex: 1;
-  width: 100%;
-  height: auto;
-  display: flex;
-  align-items: center;
-  padding-top: var(--dl-space-space-sixunits);
-  padding-left: var(--dl-space-space-oneandhalfunits);
-  padding-right: var(--dl-space-space-oneandhalfunits);
-  flex-direction: column;
-  justify-content: center;
-}
-.home-larps-titel {
-  color: rgb(255, 255, 255);
-  font-size: 36px;
-  text-transform: capitalize;
-}
-.home-header {
-  color: rgb(255, 255, 255);
-  font-size: 24px;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 600;
-  line-height: 36px;
-}
-.home-description {
-  color: rgb(255, 255, 255);
-  font-size: 18px;
-  font-family: Poppins;
-  line-height: 28px;
-}
 .home-button {
   gap: var(--dl-space-space-oneandhalfunits);
   cursor: pointer;
@@ -228,26 +197,6 @@ export default {
 .home-button:hover {
   opacity: 0.5;
 }
-.home-text {
-  color: #ffff00;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-}
-.home-header1 {
-  color: rgb(255, 255, 255);
-  font-size: 24px;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 600;
-  line-height: 36px;
-}
-.home-description1 {
-  color: rgb(255, 255, 255);
-  font-size: 18px;
-  font-family: Poppins;
-  line-height: 28px;
-}
 .home-button1 {
   gap: var(--dl-space-space-oneandhalfunits);
   cursor: pointer;
@@ -264,43 +213,6 @@ export default {
 .home-button1:hover {
   opacity: 0.5;
 }
-.home-text05 {
-  color: #FFFF00;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-}
-.home-kurzgeschichten-kapitel {
-  gap: var(--dl-space-space-twounits);
-  flex: 1;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding-top: var(--dl-space-space-sixunits);
-  padding-left: var(--dl-space-space-oneandhalfunits);
-  padding-right: var(--dl-space-space-oneandhalfunits);
-  flex-direction: column;
-  justify-content: center;
-}
-.home-kurzgeschichten-titel {
-  color: rgb(255, 255, 255);
-  font-size: 36px;
-  text-transform: uppercase;
-}
-.home-header2 {
-  color: rgb(255, 255, 255);
-  font-size: 24px;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 600;
-  line-height: 36px;
-}
-.home-description2 {
-  color: #ffffff;
-  font-size: 18px;
-  font-family: Poppins;
-  line-height: 28px;
-}
 .home-button2 {
   gap: var(--dl-space-space-oneandhalfunits);
   cursor: pointer;
@@ -317,26 +229,6 @@ export default {
 .home-button2:hover {
   opacity: 0.5;
 }
-.home-text08 {
-  color: #ffff00;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-}
-.home-header3 {
-  color: rgb(255, 255, 255);
-  font-size: 24px;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 600;
-  line-height: 36px;
-}
-.home-description3 {
-  color: rgb(255, 255, 255);
-  font-size: 18px;
-  font-family: Poppins;
-  line-height: 28px;
-}
 .home-button3 {
   gap: var(--dl-space-space-oneandhalfunits);
   cursor: pointer;
@@ -353,12 +245,6 @@ export default {
 .home-button3:hover {
   opacity: 0.5;
 }
-.home-text13 {
-  color: #ffff00;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-}
 @media(max-width: 991px) {
   .home-image {
     width: 420px;
@@ -384,11 +270,5 @@ export default {
     height: auto;
     line-height: 36px;
   }
-  .home-larps-kapitel {
-    gap: var(--dl-space-space-twounits);
-  }
-  .home-kurzgeschichten-kapitel {
-    gap: var(--dl-space-space-twounits);
-  }
 }
 </style>
diff --git a/src/views/larpkonzept.vue b/src/views/larpkonzept.vue
index f981f1f..acde424 100644
--- a/src/views/larpkonzept.vue
+++ b/src/views/larpkonzept.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="larpkonzept-container">
     <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
-    <h1 class="larpkonzept-heading">
+    <h1 class="page-title">
       <span>Larpkonzept</span>
       <br />
     </h1>
-    <span class="larpkonzept-caption">
+    <span class="page-subtitle">
       <span>
         Für eine sichere Durchführung von intensiven, emotionalen und
         kontrastreichen LARPs
@@ -30,6 +30,7 @@ import AppKontakt from '../components/kontakt'
 
 export default {
   name: 'Larpkonzept',
+  props: {},
   components: {
     AppNavigation,
     AppKontakt,
@@ -71,37 +72,4 @@ export default {
   background-image: url("/forest-background-luca-dross-1500w.jpg");
   background-position: top left;
 }
-.larpkonzept-heading {
-  color: rgb(255, 255, 255);
-  font-size: 64px;
-  font-style: normal;
-  text-align: center;
-  font-family: Poppins;
-  font-weight: 500;
-  margin-bottom: 6px;
-}
-.larpkonzept-caption {
-  color: rgb(255, 255, 255);
-  font-size: 20px;
-  max-width: 90%;
-  text-align: center;
-  font-family: Poppins;
-  line-height: 30px;
-}
-@media(max-width: 767px) {
-  .larpkonzept-heading {
-    font-size: 40px;
-  }
-  .larpkonzept-caption {
-    color: rgb(255, 255, 255);
-    font-size: 16px;
-    font-family: Poppins;
-    line-height: 24px;
-  }
-}
-@media(max-width: 479px) {
-  .larpkonzept-heading {
-    max-width: 280px;
-  }
-}
 </style>
diff --git a/src/views/letzte-gelegenheit.vue b/src/views/letzte-gelegenheit.vue
index 7d73169..731cf96 100644
--- a/src/views/letzte-gelegenheit.vue
+++ b/src/views/letzte-gelegenheit.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="letzte-gelegenheit-container">
     <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
-    <h1 class="letzte-gelegenheit-title">
+    <h1 class="page-title">
       <span>Letzte Gelegenheit</span>
       <br />
     </h1>
-    <span class="letzte-gelegenheit-subtitle">
+    <span class="page-subtitle">
       <span>Haben Häftlinge Platz im Bunker?</span>
       <br />
     </span>
@@ -45,44 +45,49 @@
       </header>
       <veranstaltungen-liste></veranstaltungen-liste>
     </section>
-    <div class="letzte-gelegenheit-buttons">
-      <a
-        href="https://docs.google.com/document/d/1i-cVj809RqJtO-VaXjUsPew67gtylkIzL_3qc6mI_kE/edit?usp=sharing"
-        target="_blank"
-        rel="noreferrer noopener"
-        class="letzte-gelegenheit-link"
-      >
-        <div class="button">
-          <span class="button-text">Infos Deutschland</span>
+    <div class="buttons buttons-container">
+      <div class="letzte-gelegenheit-buttons-left buttons">
+        <a
+          href="https://docs.google.com/document/d/1i-cVj809RqJtO-VaXjUsPew67gtylkIzL_3qc6mI_kE/edit?usp=sharing"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <div class="button">
+            <span class="button-text">Infos Deutschland</span>
+          </div>
+        </a>
+        <div class="letzte-gelegenheit-container2">
+          <a
+            href="https://docs.google.com/document/d/1K8iooPzdVv76UZY8lRtZfj2axTbuK-Z9me2cYAm87bc/edit?usp=sharing"
+            target="_blank"
+            rel="noreferrer noopener"
+            class="letzte-gelegenheit-link1"
+          >
+            <div class="button">
+              <span class="button-text">Infos Schweiz</span>
+            </div>
+          </a>
         </div>
-      </a>
-      <a
-        href="https://docs.google.com/document/d/1K8iooPzdVv76UZY8lRtZfj2axTbuK-Z9me2cYAm87bc/edit?usp=sharing"
-        target="_blank"
-        rel="noreferrer noopener"
-        class="letzte-gelegenheit-link1"
-      >
-        <div class="button"><span class="button-text">Infos Schweiz</span></div>
-      </a>
-      <a
-        href="https://forms.gle/VgXHX43xujJr5Uud9"
-        target="_blank"
-        rel="noreferrer noopener"
-        class="letzte-gelegenheit-link2"
-      >
-        <div class="button"><span class="button-text">Anmeldung</span></div>
-      </a>
-      <a
-        href="https://discord.gg/eKFCrEZaQ5"
-        target="_blank"
-        rel="noreferrer noopener"
-        class="letzte-gelegenheit-link3"
-      >
-        <div class="button"><span class="button-text">Discord</span></div>
-      </a>
+      </div>
+      <div class="letzte-gelegenheit-buttons-right buttons">
+        <a
+          href="https://forms.gle/VgXHX43xujJr5Uud9"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <div class="button"><span class="button-text">Anmeldung</span></div>
+        </a>
+        <a
+          href="https://discord.gg/eKFCrEZaQ5"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <div class="button"><span class="button-text">Discord</span></div>
+        </a>
+      </div>
     </div>
     <h2 class="character-title section-head">Charaktere</h2>
-    <div class="letzte-gelegenheit-container2 text-body">
+    <div class="letzte-gelegenheit-container3 text-body">
       <p>
         <span>
           Die Charaktere sind so geschrieben und verknüpft um intensives,
@@ -91,7 +96,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="rawlja6"></span>
+          <span v-html="rawnpwj"></span>
         </span>
         <span>Spiel startet.</span>
         <br />
@@ -123,7 +128,7 @@
     <h2 class="character-group section-head">Militär</h2>
     <app-row6></app-row6>
     <h2 class="character-title section-head">Unterstützung</h2>
-    <div class="letzte-gelegenheit-container3 text-body">
+    <div class="letzte-gelegenheit-container4 text-body">
       <p>
         <span>
           Konzipiert und organisiert wurde und wird das gesamte LARP von Hermann.
@@ -167,7 +172,7 @@
         <br />
         <span>
           -
-          <span v-html="raw2r97"></span>
+          <span v-html="rawue69"></span>
         </span>
         <span>Phil U.</span>
         <br />
@@ -192,6 +197,7 @@ import AppKontakt from '../components/kontakt'
 
 export default {
   name: 'LetzteGelegenheit',
+  props: {},
   components: {
     AppNavigation,
     VeranstaltungenListe,
@@ -205,8 +211,8 @@ export default {
   },
   data() {
     return {
-      rawlja6: ' ',
-      raw2r97: ' ',
+      rawnpwj: ' ',
+      rawue69: ' ',
     }
   },
   metaInfo: {
@@ -251,23 +257,6 @@ export default {
   background-image: url("/forest-background-luca-dross-1500w.jpg");
   background-position: top left;
 }
-.letzte-gelegenheit-title {
-  color: rgb(255, 255, 255);
-  font-size: 64px;
-  font-style: normal;
-  text-align: center;
-  font-family: Poppins;
-  font-weight: 500;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-.letzte-gelegenheit-subtitle {
-  color: rgb(255, 255, 255);
-  font-size: 20px;
-  text-align: center;
-  font-family: Poppins;
-  line-height: 30px;
-}
 .letzte-gelegenheit-teaser {
   width: 640px;
   height: 360px;
@@ -303,41 +292,36 @@ export default {
   color: rgb(255, 255, 255);
   font-size: 36px;
 }
-.letzte-gelegenheit-buttons {
-  gap: 10%;
-  width: 100%;
-  display: flex;
-  max-width: 1200px;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
+.letzte-gelegenheit-buttons-left {
+  width: 45%;
 }
-.letzte-gelegenheit-link {
-  display: contents;
+.letzte-gelegenheit-container2 {
+  flex: 0 0 auto;
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 .letzte-gelegenheit-link1 {
   display: contents;
 }
-.letzte-gelegenheit-link2 {
-  display: contents;
-}
-.letzte-gelegenheit-link3 {
-  display: contents;
-}
-.letzte-gelegenheit-container2 {
-  width: 95%;
+.letzte-gelegenheit-buttons-right {
+  gap: 10%;
+  width: 33.3%;
 }
 .letzte-gelegenheit-container3 {
   width: 95%;
 }
+.letzte-gelegenheit-container4 {
+  width: 95%;
+}
+@media(max-width: 991px) {
+  .letzte-gelegenheit-buttons-right {
+    margin-top: -8%;
+  }
+}
 @media(max-width: 767px) {
-  .letzte-gelegenheit-title {
-    font-size: 40px;
-  }
-  .letzte-gelegenheit-subtitle {
-    font-size: 16px;
-    line-height: 24px;
-  }
   .letzte-gelegenheit-teaser {
     width: 480px;
     height: 270px;
@@ -345,9 +329,6 @@ export default {
   .letzte-gelegenheit-veranstaltungen-kapitel {
     border-color: transparent;
   }
-  .letzte-gelegenheit-buttons {
-    flex-direction: column;
-  }
 }
 @media(max-width: 479px) {
   .letzte-gelegenheit-teaser {
diff --git a/src/views/murphys-larp.vue b/src/views/murphys-larp.vue
new file mode 100644
index 0000000..6245a31
--- /dev/null
+++ b/src/views/murphys-larp.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="murphys-larp-container">
+    <app-navigation rootClassName="navigation-root-class-name12"></app-navigation>
+    <h1 class="page-title">
+      <span>Murphy&apos;s LARP</span>
+      <br />
+    </h1>
+    <span class="page-subtitle">
+      <span>Post Card Drama Game</span>
+      <br />
+    </span>
+    <div class="text-body">
+      <span>
+        <span class="murphys-larp-text04">・</span>
+        <span class="murphys-larp-text05">
+          Post Card Drama Game ab 4 Personen, die schon LARP gemacht haben, ca.
+          30min inkl. Erklärung.
+        </span>
+        <br />
+        <span>・</span>
+        <span class="murphys-larp-text08">
+          Spielziel ist zuerst etwas Slapstick/Fun und danach wholesome
+          Verständnis/Empathie Förderung.
+        </span>
+        <br />
+        <span>・</span>
+        <span class="murphys-larp-text11">
+          Erstellt von Hermann, inspiriert durch ein Gespräch mit Nils und
+          playtested mit tollen Menschen.
+        </span>
+        <br />
+        <br />
+        <span>
+          Alles was nur schiefgehen konnte, ging bei einem LARP schief. Ihr spielt
+          die frustrierte Orga/SL (Organisation/Spielleitung) die sich über die
+          “doofen” SC (Spielercharaktere) auslässt und die frustrierten SC, die
+          sich über die “doofe” SL auslassen.
+        </span>
+        <br />
+      </span>
+    </div>
+    <a
+      href="https://docs.google.com/document/d/1UWThYUOZUtHy3A89CeKnJ7KdkxyWW5DppVP4PiAECJ4/edit?usp=sharing"
+      target="_blank"
+      rel="noreferrer noopener"
+      class="murphys-larp-link button"
+    >
+      <span class="button-text">Download</span>
+    </a>
+    <app-kontakt rootClassName="kontakt-root-class-name5"></app-kontakt>
+  </div>
+</template>
+
+<script>
+import AppNavigation from '../components/navigation'
+import AppKontakt from '../components/kontakt'
+
+export default {
+  name: 'MurphysLARP',
+  props: {},
+  components: {
+    AppNavigation,
+    AppKontakt,
+  },
+  metaInfo: {
+    title: 'OpenVisor - Larpkonzept',
+    meta: [
+      {
+        name: 'description',
+        content:
+          'Für eine sichere Durchführung von intensiven, emotionalen und kontrastreichen LARPs.',
+      },
+      {
+        property: 'og:title',
+        content: 'OpenVisor - Larpkonzept',
+      },
+      {
+        property: 'og:description',
+        content:
+          'Für eine sichere Durchführung von intensiven, emotionalen und kontrastreichen LARPs.',
+      },
+    ],
+  },
+}
+</script>
+
+<style scoped>
+.murphys-larp-container {
+  width: 100%;
+  display: flex;
+  z-index: 100;
+  overflow: auto;
+  box-shadow: 5px 5px 10px 0px #d4d4d4;
+  min-height: 100vh;
+  overflow-x: hidden;
+  align-items: center;
+  flex-direction: column;
+  background-size: cover;
+  background-image: url("/forest-background-luca-dross-1500w.jpg");
+  background-position: top left;
+}
+.murphys-larp-link {
+  text-decoration: none;
+}
+@media(max-width: 767px) {
+  .murphys-larp-text04 {
+    color: rgb(255, 255, 255);
+    font-size: 16px;
+    font-family: Poppins;
+    line-height: 24px;
+  }
+  .murphys-larp-text05 {
+    color: rgb(255, 255, 255);
+    font-size: 16px;
+    font-family: Poppins;
+    line-height: 24px;
+  }
+  .murphys-larp-text08 {
+    color: rgb(255, 255, 255);
+    font-size: 16px;
+    font-family: Poppins;
+    line-height: 24px;
+  }
+  .murphys-larp-text11 {
+    color: rgb(255, 255, 255);
+    font-size: 16px;
+    font-family: Poppins;
+    line-height: 24px;
+  }
+}
+@media(max-width: 479px) {
+  .murphys-larp-text05 {
+    color: #ffffff;
+    font-size: 16px;
+    font-family: Poppins;
+    line-height: 24px;
+  }
+  .murphys-larp-text08 {
+    color: #ffffff;
+    font-size: 16px;
+    font-family: Poppins;
+    line-height: 24px;
+  }
+  .murphys-larp-text11 {
+    color: #ffffff;
+    font-size: 16px;
+    font-family: Poppins;
+    line-height: 24px;
+  }
+}
+</style>
diff --git a/src/views/rosenteufel.vue b/src/views/rosenteufel.vue
index 2163bf3..e1428d1 100644
--- a/src/views/rosenteufel.vue
+++ b/src/views/rosenteufel.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="rosenteufel-container">
     <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
-    <h1 class="site-heading">Rosenteufel</h1>
-    <span class="site-subtitle">
+    <h1 class="page-title">Rosenteufel</h1>
+    <span class="page-subtitle">
       <span>Kurzgeschichte</span>
       <br />
     </span>
@@ -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="rawt6gy"></span>
+          <span v-html="rawu623"></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="raw5ol6"></span>
+          <span v-html="rawvx3z"></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="rawss0o"></span>
+          <span v-html="rawvifc"></span>
         </span>
       </span>
     </div>
@@ -301,15 +301,16 @@ import AppKontakt from '../components/kontakt'
 
 export default {
   name: 'Rosenteufel',
+  props: {},
   components: {
     AppNavigation,
     AppKontakt,
   },
   data() {
     return {
-      rawt6gy: ' ',
-      raw5ol6: ' ',
-      rawss0o: ' ',
+      rawu623: ' ',
+      rawvx3z: ' ',
+      rawvifc: ' ',
     }
   },
   metaInfo: {
diff --git a/src/views/ssse-trume.vue b/src/views/ssse-trume.vue
index 250b915..fcd4513 100644
--- a/src/views/ssse-trume.vue
+++ b/src/views/ssse-trume.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="ssse-trume-container">
     <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
-    <span class="site-heading">SüsseTräume</span>
-    <span class="site-subtitle">
+    <span class="page-title">Süsse Träume</span>
+    <span class="page-subtitle">
       <span>Fantasy Mini-LARP</span>
       <br />
     </span>
-    <div class="ssse-trume-container1 text-body">
+    <div class="text-body">
       <p>
         <span>
           &quot;Weisst du, wer du bist? Was du bereust, befürchtest, vergessen
@@ -257,6 +257,7 @@ import AppKontakt from '../components/kontakt'
 
 export default {
   name: 'SsseTrume',
+  props: {},
   components: {
     AppNavigation,
     DangerousHTML,
@@ -296,10 +297,6 @@ export default {
   background-size: cover;
   background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ssse-trume-container1 {
-  align-items: center;
-  justify-content: center;
-}
 .ssse-trume-container2 {
   gap: var(--dl-space-space-twounits);
   flex: 0 0 auto;