Add "Blog" category; Add blog post; Update characters images from PNG to WEBP files

src/components/info-box.vue

@@ -32,7 +32,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawdrn9"></span>
+                  <span v-html="rawxz9a"></span>
                 </span>
                 <span>
                   Intensive Momente und Emotionen ermöglichen, die in Erinnerung
@@ -42,7 +42,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawew4j"></span>
+                  <span v-html="raw2sai"></span>
                 </span>
                 <span>
                   Persönliche Auseinandersetzungen der Spieler mit nicht
@@ -53,7 +53,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawmfzi"></span>
+                  <span v-html="rawthil"></span>
                 </span>
                 <span>
                   Interne Charakterentwicklung oder -verfestigung durch externe
@@ -63,14 +63,14 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="raw3blz"></span>
+                  <span v-html="rawayhd"></span>
                 </span>
                 <span>Dilemmata mit sich selbst und mit anderen.</span>
                 <br />
                 <br />
                 <span>
                    ·
-                  <span v-html="rawbmgg"></span>
+                  <span v-html="raw2a59"></span>
                 </span>
                 <span>
                   Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern
@@ -254,7 +254,7 @@
                 <br />
                 <span>
                   Wir werden das
-                  <span v-html="raw34my"></span>
+                  <span v-html="raww0gx"></span>
                 </span>
                 <router-link to="/larpkonzept" class="info-box-navlink">
                   Open Visor Larpkonzept
@@ -518,7 +518,7 @@
                 <br />
                 <span>
                   Parkplatz:
-                  <span v-html="rawdj7p"></span>
+                  <span v-html="rawc83p"></span>
                 </span>
                 <a
                   href="https://goo.gl/maps/KgqAwRdw8pJSdmjTA"
@@ -1387,7 +1387,8 @@ export default {
   props: {
     imageSrc: {
       type: String,
-      default: '/letzte-gelegenheit/zsa_weisslingen-1100w.png',
+      default:
+        'https://play.teleporthq.io/static/svg/placeholders/no-image.svg',
     },
     text2: {
       type: String,
@@ -1458,13 +1459,13 @@ export default {
   },
   data() {
     return {
-      rawdrn9: ' ',
+      rawxz9a: ' ',
-      rawew4j: ' ',
+      raw2sai: ' ',
-      rawmfzi: ' ',
+      rawthil: ' ',
-      raw3blz: ' ',
+      rawayhd: ' ',
-      rawbmgg: ' ',
+      raw2a59: ' ',
-      raw34my: ' ',
+      raww0gx: ' ',
-      rawdj7p: ' ',
+      rawc83p: ' ',
     }
   },
 }

src/components/kontakt.vue

@@ -127,6 +127,8 @@ export default {
 
 
 
+
+
 
 
 

src/components/navigation.vue

@@ -516,10 +516,51 @@
               </router-link>
             </ul>
           </div>
+          <div data-thq="thq-dropdown" class="navigation-blog-dropdown list-item">
+            <div
+              data-thq="thq-dropdown-toggle"
+              class="desktop-menu-dropdown-toggle"
+            >
+              <router-link
+                to="/blog"
+                class="navigation-blog desktop-menu-dropdown-header nav-link"
+              >
+                Blog
+              </router-link>
+              <div
+                data-thq="thq-dropdown-arrow"
+                class="desktop-menu-arrow-container"
+              >
+                <svg viewBox="0 0 1024 1024" class="desktop-menu-arrow">
+                  <path d="M426 726v-428l214 214z"></path>
+                </svg>
+              </div>
+            </div>
+            <ul
+              data-thq="thq-dropdown-list"
+              class="navigation-dropdown-list4 desktop-menu-dropdown-list"
+            >
+              <router-link to="/games/assemblatron">
+                <li
+                  data-thq="thq-dropdown"
+                  class="navigation-tales-inside-dropdown desktop-menu-list-item list-item"
+                >
+                  <div
+                    data-thq="thq-dropdown-toggle"
+                    class="desktop-menu-dropdown-element desktop-menu-dropdown-toggle navigation-dropdown-toggle30"
+                  >
+                    <span class="desktop-menu-dropdown-option">
+                      Wie Tales Inside eine einmalige Immersion erreicht
+                    </span>
+                  </div>
+                </li>
+              </router-link>
+            </ul>
+          </div>
         </nav>
       </div>
       <div data-thq="thq-burger-menu" class="navigation-burger-menu">
-        <svg viewBox="0 0 1024 1024" class="navigation-icon08">
+        <svg viewBox="0 0 1024 1024" class="navigation-icon10">
           <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>
@@ -533,7 +574,7 @@
         >
           <div class="navigation-nav-top">
             <div data-thq="thq-close-menu" class="navigation-menu-close">
-              <svg viewBox="0 0 1024 1024" class="navigation-icon10">
+              <svg viewBox="0 0 1024 1024" class="navigation-icon12">
                 <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>
@@ -585,7 +626,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle30"
+                      class="navigation-dropdown-toggle32"
                     >
                       <span class="navigation-suesse-traeume1 nav-link">
                         {{ suesseTraeume }}
@@ -600,7 +641,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle31"
+                      class="navigation-dropdown-toggle33"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ letzteGelegenheit }}
@@ -615,7 +656,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle32"
+                      class="navigation-dropdown-toggle34"
                     >
                       <span
                         class="navigation-conundrum-schatten-ueber-ostmerkopa1 nav-link"
@@ -673,7 +714,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle35"
+                      class="navigation-dropdown-toggle37"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ murphysLarp }}
@@ -770,7 +811,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle40"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle42"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ rosenteufel }}
@@ -785,7 +826,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle41"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle43"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ einsamesSchaf }}
@@ -800,7 +841,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle42"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle44"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ gefangenerGorilla }}
@@ -815,7 +856,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle43"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle45"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ lasstMichRuhen }}
@@ -830,7 +871,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle44"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle46"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ dieLoesungGegenLeid }}
@@ -845,7 +886,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle45"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle47"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ infiniteDeathsEnglish }}Die Lösung Gegen Leid
@@ -860,7 +901,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle46"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle48"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ versetztesBeduerfnis }}Die Lösung Gegen Leid
@@ -877,7 +918,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle47"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle49"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ wasUnterscheidetHimmelVonHoelle }}Die Lösung Gegen Leid
@@ -892,7 +933,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle48"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle50"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ lebenStattUeberleben }}Die Lösung Gegen Leid
@@ -907,7 +948,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle49"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle51"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ getraeumtesGlueck }}Ein Orden für eine gute Tat
@@ -922,7 +963,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="navigation-dropdown-toggle50 mobile-menu-dropdown-element mobile-menu-dropdown-toggle"
+                      class="navigation-dropdown-toggle52 mobile-menu-dropdown-element mobile-menu-dropdown-toggle"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ klonOderLeid }}Lasst mich Ruhen!
@@ -937,7 +978,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle51"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle53"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ ichWillKeinHammerSein }}Lasst mich Ruhen!
@@ -952,7 +993,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle52"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle54"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ teilungZweierWelten }}Lasst mich Ruhen!
@@ -967,7 +1008,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle53"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle55"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ huhnRammtHuhn }}Lasst mich Ruhen!
@@ -982,7 +1023,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle54"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle56"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ heiligerSteinkrieg }}Lasst mich Ruhen!
@@ -997,7 +1038,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle55"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle57"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ unwichtigsterMensch }}Lasst mich Ruhen!
@@ -1012,7 +1053,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle56"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle58"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ superkraftImStarbucks }}Lasst mich Ruhen!
@@ -1027,7 +1068,7 @@
                   >
                     <div
                       data-thq="thq-dropdown-toggle"
-                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle57"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle navigation-dropdown-toggle59"
                     >
                       <span class="mobile-menu-dropdown-option nav-link">
                         {{ themOrUsEnglish }}Lasst mich Ruhen!
@@ -1037,6 +1078,49 @@
                 </router-link>
               </ul>
             </div>
+            <div data-thq="thq-dropdown" class="mobile-menu-dropdown list-item">
+              <div
+                data-thq="thq-dropdown-toggle"
+                class="mobile-menu-dropdown-toggle"
+              >
+                <router-link
+                  to="/blog"
+                  class="navigation-blog1 mobile-menu-dropdown-header nav-link"
+                >
+                  Blog
+                </router-link>
+                <div
+                  data-thq="thq-dropdown-arrow"
+                  class="mobile-menu-dropdown-arrow-container"
+                >
+                  <svg viewBox="0 0 1024 1024" class="mobile-menu-dropdown-arrow">
+                    <path d="M426 726v-428l214 214z"></path>
+                  </svg>
+                </div>
+              </div>
+              <ul
+                data-thq="thq-dropdown-list"
+                class="navigation-blog-dropdown-list dropdown-list"
+              >
+                <router-link
+                  to="/blog/wie-tales-inside-eine-einmalige-immersion-erreicht"
+                >
+                  <li
+                    data-thq="thq-dropdown"
+                    class="navigation-tales-inside1 mobile-menu-list-item list-item"
+                  >
+                    <div
+                      data-thq="thq-dropdown-toggle"
+                      class="mobile-menu-dropdown-element mobile-menu-dropdown-toggle"
+                    >
+                      <span class="mobile-menu-dropdown-option nav-link">
+                        Wie Tales Inside eine einmalige Immersion erreicht
+                      </span>
+                    </div>
+                  </li>
+                </router-link>
+              </ul>
+            </div>
           </nav>
         </div>
       </div>
@@ -1207,7 +1291,7 @@ export default {
   display: flex;
 }
 .navigation-nav {
-  gap: 38px;
+  gap: 26px;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -1305,12 +1389,32 @@ export default {
   color: #fff;
   background-color: #595959;
 }
+.navigation-blog-dropdown {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  border-radius: var(--dl-radius-radius-radius2);
+}
+.navigation-blog {
+  text-decoration: none;
+}
+.navigation-dropdown-list4 {
+  display: none;
+}
+.navigation-tales-inside-dropdown {
+  text-decoration: none;
+}
+.navigation-dropdown-toggle30:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
 .navigation-burger-menu {
   display: none;
   align-items: center;
   justify-content: center;
 }
-.navigation-icon08 {
+.navigation-icon10 {
   fill: #ffffff;
   width: 36px;
   cursor: pointer;
@@ -1320,7 +1424,7 @@ export default {
   border-radius: 18px;
   background-color: rgba(100, 100, 100, 0.4);
 }
-.navigation-icon08:hover {
+.navigation-icon10:hover {
   opacity: 0.5;
 }
 .navigation-mobile-menu {
@@ -1352,7 +1456,7 @@ export default {
 .navigation-menu-close {
   display: flex;
 }
-.navigation-icon10 {
+.navigation-icon12 {
   fill: #ffffff;
   width: 30px;
   cursor: pointer;
@@ -1361,7 +1465,7 @@ export default {
   transition: 0.3s;
   margin-left: -30px;
 }
-.navigation-icon10:hover {
+.navigation-icon12:hover {
   opacity: 0.5;
 }
 .navigation-larps1 {
@@ -1370,51 +1474,6 @@ export default {
 .navigation-larps-dropdown-list {
   display: none;
 }
-.navigation-dropdown-toggle30 {
-  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-toggle30:hover {
-  fill: #fff;
-  color: #fff;
-  background-color: #595959;
-}
-.navigation-suesse-traeume1 {
-  width: 100%;
-  cursor: pointer;
-  display: flex;
-  font-size: 14px;
-  font-style: normal;
-  font-family: Poppins;
-  font-weight: 400;
-}
-.navigation-dropdown-toggle31 {
-  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-toggle31:hover {
-  fill: #fff;
-  color: #fff;
-  background-color: #595959;
-}
 .navigation-dropdown-toggle32 {
   fill: #595959;
   color: #595959;
@@ -1433,6 +1492,51 @@ export default {
   color: #fff;
   background-color: #595959;
 }
+.navigation-suesse-traeume1 {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-style: normal;
+  font-family: Poppins;
+  font-weight: 400;
+}
+.navigation-dropdown-toggle33 {
+  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-toggle33:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-dropdown-toggle34 {
+  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-toggle34:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
 .navigation-conundrum-schatten-ueber-ostmerkopa1 {
   width: 100%;
   cursor: pointer;
@@ -1451,7 +1555,7 @@ export default {
 .navigation-assemblatron1 {
   text-decoration: none;
 }
-.navigation-dropdown-toggle35 {
+.navigation-dropdown-toggle37 {
   fill: #595959;
   color: #595959;
   width: 100%;
@@ -1464,7 +1568,7 @@ export default {
   padding-right: var(--dl-space-space-unit);
   padding-bottom: var(--dl-space-space-halfunit);
 }
-.navigation-dropdown-toggle35:hover {
+.navigation-dropdown-toggle37:hover {
   fill: #fff;
   color: #fff;
   background-color: #595959;
@@ -1484,16 +1588,6 @@ export default {
 .navigation-kurzgeschichten-dropdown-list {
   display: none;
 }
-.navigation-dropdown-toggle40:hover {
-  fill: #fff;
-  color: #fff;
-  background-color: #595959;
-}
-.navigation-dropdown-toggle41:hover {
-  fill: #fff;
-  color: #fff;
-  background-color: #595959;
-}
 .navigation-dropdown-toggle42:hover {
   fill: #fff;
   color: #fff;
@@ -1534,9 +1628,6 @@ export default {
   color: #fff;
   background-color: #595959;
 }
-.navigation-dropdown-toggle50 {
-  position: relative;
-}
 .navigation-dropdown-toggle50:hover {
   fill: #fff;
   color: #fff;
@@ -1547,6 +1638,9 @@ export default {
   color: #fff;
   background-color: #595959;
 }
+.navigation-dropdown-toggle52 {
+  position: relative;
+}
 .navigation-dropdown-toggle52:hover {
   fill: #fff;
   color: #fff;
@@ -1577,6 +1671,25 @@ export default {
   color: #fff;
   background-color: #595959;
 }
+.navigation-dropdown-toggle58:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-dropdown-toggle59:hover {
+  fill: #fff;
+  color: #fff;
+  background-color: #595959;
+}
+.navigation-blog1 {
+  text-decoration: none;
+}
+.navigation-blog-dropdown-list {
+  display: none;
+}
+.navigation-tales-inside1 {
+  text-decoration: none;
+}
 .navigation-root-class-name {
   max-width: 1200px;
 }
@@ -1696,6 +1809,12 @@ export default {
 .navigation-root-class-name42 {
   max-width: 1200px;
 }
+.navigation-root-class-name43 {
+  max-width: 1200px;
+}
+.navigation-root-class-name44 {
+  max-width: 1200px;
+}
 @media(max-width: 991px) {
   .navigation-navbar-interactive {
     padding-bottom: var(--dl-space-space-twounits);

src/components/summary-blog.vue

@@ -0,0 +1,55 @@
+<template>
+  <main
+    class="summary-blog-summary-blog card-rows-container"
+    v-bind:class="rootClassName"
+  >
+    <div class="card-row">
+      <section class="character-teaser-container">
+        <h1 class="card-heading">{{ header }}</h1>
+        <p class="card-text">{{ description }}</p>
+        <router-link
+          to="/blog/wie-tales-inside-eine-einmalige-immersion-erreicht"
+        >
+          <div class="summary-blog-button more-link">
+            <p class="card-link">{{ lesen }}</p>
+          </div>
+        </router-link>
+      </section>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'SummaryBlog',
+  props: {
+    header: {
+      type: String,
+      default: 'Wie Tales Inside eine einmalige Immersion erreicht',
+    },
+    description: {
+      type: String,
+      default:
+        'Bei der Planung eigener LARPs möchte ich dieselbe Immersion erreichen, wie ich das am LARP Tales Inside erlebt habe. Um herauszufinden, was eben diese Immersion ausmacht habe ich 10 Tales Inside Teilnehmenden Fragen zu ihren Erlebnissen gestellt. Die Früchte dieser Arbeit stelle ich hier vor.',
+    },
+    lesen: {
+      type: String,
+      default: 'Lesen ->',
+    },
+    rootClassName: String,
+  },
+}
+</script>
+
+<style scoped>
+.summary-blog-summary-blog {
+  position: relative;
+}
+.summary-blog-button {
+  text-decoration: none;
+}
+.summary-blog-button:hover {
+  opacity: 0.5;
+}
+
+</style>

src/components/summary-shortstories.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="card-rows-container">
+  <main class="card-rows-container" v-bind:class="rootClassName">
     <div class="card-row">
       <div class="character-teaser-container">
         <h3 class="card-heading">Ein Orden für eine gute Tat</h3>

src/components/veranstaltungen-liste.vue

@@ -17,7 +17,7 @@
         <div>
           <p class="event-section event-done">
             13. Mai 2023, 10:00 Uhr bis
-            <span v-html="rawvn37"></span>
+            <span v-html="raw2zcg"></span>
           </p>
           <p class="event-section event-done">14. Mai 2023, 14:00 Uhr</p>
         </div>
@@ -31,7 +31,7 @@
         <div>
           <p class="event-section event-done">
             1. Juli 2023, 10:00 Uhr bis
-            <span v-html="raw423x"></span>
+            <span v-html="raw020g"></span>
           </p>
           <p class="event-section event-done">2. Juli 2023, 14:00 Uhr</p>
         </div>
@@ -56,7 +56,7 @@
         <div>
           <p class="event-section event-done">
             25. Mai 2024, 10:00 Uhr bis
-            <span v-html="rawfc42"></span>
+            <span v-html="rawofhf"></span>
           </p>
           <p class="event-section event-done">26. Mai 2024, 14:00 Uhr</p>
         </div>
@@ -153,9 +153,9 @@ export default {
   },
   data() {
     return {
-      rawvn37: ' ',
+      raw2zcg: ' ',
-      raw423x: ' ',
+      raw020g: ' ',
-      rawfc42: ' ',
+      rawofhf: ' ',
     }
   },
 }

src/router.js

@@ -14,6 +14,7 @@ import DieLsungGegenLeid from './views/kurzgeschichten/die-lsung-gegen-leid'
 import GefangenerGorilla from './views/kurzgeschichten/gefangener-gorilla'
 import ThemOrUs from './views/kurzgeschichten/them-or-us'
 import GetrumtesGlck from './views/kurzgeschichten/getrumtes-glck'
+import Blog from './views/blog'
 import WasUnterscheidetHimmelVonHlle from './views/kurzgeschichten/was-unterscheidet-himmel-von-hlle'
 import ConundrumSchattenBerOstmerkopa from './views/larps/conundrum-schatten-ber-ostmerkopa'
 import MurphysLARP from './views/games/murphys-larp'
@@ -21,6 +22,7 @@ import LasstMichRuhen from './views/kurzgeschichten/lasst-mich-ruhen'
 import Kurzgeschichten from './views/kurzgeschichten'
 import InfiniteDeaths from './views/kurzgeschichten/infinite-deaths'
 import LebenStattBerleben from './views/kurzgeschichten/leben-statt-berleben'
+import WieTalesInsideEineEinmaligeImmersionErreicht from './views/blog/wie-tales-inside-eine-einmalige-immersion-erreicht'
 import SuperkraftImStarbucks from './views/kurzgeschichten/superkraft-im-starbucks'
 import UnwichtigsterMensch from './views/kurzgeschichten/unwichtigster-mensch'
 import TeilungZweierWelten from './views/kurzgeschichten/teilung-zweier-welten'
@@ -103,6 +105,11 @@ export default new Router({
       path: '/kurzgeschichten/getraeumtes-glueck',
       component: GetrumtesGlck,
     },
+    {
+      name: 'Blog',
+      path: '/blog',
+      component: Blog,
+    },
     {
       name: 'Was-unterscheidet-Himmel-von-Hlle',
       path: '/kurzgeschichten/was-unterscheidet-himmel-von-hoelle',
@@ -138,6 +145,11 @@ export default new Router({
       path: '/kurzgeschichten/leben-statt-ueberleben',
       component: LebenStattBerleben,
     },
+    {
+      name: 'Wie-Tales-Inside-eine-einmalige-Immersion-erreicht',
+      path: '/blog/wie-tales-inside-eine-einmalige-immersion-erreicht',
+      component: WieTalesInsideEineEinmaligeImmersionErreicht,
+    },
     {
       name: 'Superkraft-im-Starbucks',
       path: '/kurzgeschichten/superkraft-im-starbucks',

src/views/blog.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="blog-container">
+    <app-navigation rootClassName="navigation-root-class-name43"></app-navigation>
+    <h1 class="page-title">Blog</h1>
+    <div class="text-body">
+      <span>
+        In diesem Blog sammle ich Recherchen und Erfahrungsberichte zu allerlei
+        Rollenspielen.
+      </span>
+    </div>
+    <div class="card-container"><summary-blog></summary-blog></div>
+    <app-kontakt rootClassName="kontakt-root-class-name31"></app-kontakt>
+  </div>
+</template>
+
+<script>
+import AppNavigation from '../components/navigation'
+import SummaryBlog from '../components/summary-blog'
+import AppKontakt from '../components/kontakt'
+
+export default {
+  name: 'Blog',
+  props: {},
+  components: {
+    AppNavigation,
+    SummaryBlog,
+    AppKontakt,
+  },
+  metaInfo: {
+    title: 'OpenVisor - Blog',
+    meta: [
+      {
+        name: 'description',
+        content:
+          'In diesem Blog sammle ich Recherchen und Erfahrungsberichte zu allerlei Rollenspielen.',
+      },
+      {
+        property: 'og:title',
+        content: 'OpenVisor - Blog',
+      },
+      {
+        property: 'og:description',
+        content:
+          'In diesem Blog sammle ich Recherchen und Erfahrungsberichte zu allerlei Rollenspielen.',
+      },
+    ],
+  },
+}
+</script>
+
+<style scoped>
+.blog-container {
+  width: 100%;
+  display: flex;
+  overflow: auto;
+  min-height: 100vh;
+  overflow-x: hidden;
+  align-items: center;
+  flex-direction: column;
+  background-size: cover;
+  background-image: url("/forest-background-luca-dross-1500w.jpg");
+  background-position: bottom right;
+}
+</style>

src/views/home.vue

@@ -24,8 +24,8 @@
     </section>
     <section class="card-container">
       <router-link to="/games">
-        <h2 class="home-titel-games section-head">
+        <h2 class="section-head uppercase">
-          <span>GAMES</span>
+          <span>Games</span>
           <br />
         </h2>
       </router-link>
@@ -33,8 +33,8 @@
     </section>
     <section class="card-container">
       <router-link to="/kurzfilme">
-        <h2 class="home-titel-kurzfilme section-head">
+        <h2 class="section-head uppercase">
-          <span>KURZFILME</span>
+          <span>Kurzfilme</span>
           <br />
         </h2>
       </router-link>
@@ -44,13 +44,22 @@
     </section>
     <section class="card-container">
       <router-link to="/kurzgeschichten">
-        <h2 class="home-titel-kurzgeschichten uppercase section-head">
+        <h2 class="uppercase section-head">
           <span>Kurzgeschichten</span>
           <br />
         </h2>
       </router-link>
       <summary-shortstories></summary-shortstories>
     </section>
+    <section class="card-container">
+      <router-link to="/games">
+        <h2 class="section-head uppercase">
+          <span>Blog</span>
+          <br />
+        </h2>
+      </router-link>
+      <summary-blog rootClassName="summary-blog-root-class-name"></summary-blog>
+    </section>
     <app-kontakt></app-kontakt>
   </div>
 </template>
@@ -62,6 +71,7 @@ import SummaryLarps from '../components/summary-larps'
 import SummaryGames from '../components/summary-games'
 import SummaryShortfilms from '../components/summary-shortfilms'
 import SummaryShortstories from '../components/summary-shortstories'
+import SummaryBlog from '../components/summary-blog'
 import AppKontakt from '../components/kontakt'
 
 export default {
@@ -74,6 +84,7 @@ export default {
     SummaryGames,
     SummaryShortfilms,
     SummaryShortstories,
+    SummaryBlog,
     AppKontakt,
   },
   metaInfo: {
@@ -134,15 +145,6 @@ export default {
 .home-titel-larps {
   text-decoration: none;
 }
-.home-titel-games {
-  text-decoration: none;
-}
-.home-titel-kurzfilme {
-  text-decoration: none;
-}
-.home-titel-kurzgeschichten {
-  text-decoration: none;
-}
 @media(max-width: 991px) {
   .home-image {
     width: 420px;

src/views/kurzfilme/die-legende-vom-wolf-des-sdens.vue

@@ -45,7 +45,7 @@
       rel="noreferrer noopener"
       class="die-legende-vom-wolf-des-sdens-download-button button"
     >
-      <span class="button-text">offizielle Seite zum Projekt</span>
+      <span class="button-text">offizielle Seite des Trailers</span>
     </a>
     <app-kontakt rootClassName="kontakt-root-class-name29"></app-kontakt>
   </div>

src/views/kurzgeschichten/rosenteufel.vue

@@ -79,7 +79,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="raw4ubi"></span>
+          <span v-html="raw5wrj"></span>
         </span>
         <span>Geziefer dort treibt...”</span>
         <br />
@@ -247,7 +247,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="rawkigv"></span>
+          <span v-html="raw1wmo"></span>
         </span>
         <span>
           noch immer weiss und nass. Dieses Mal der Knecht nicht wagte zu fragen
@@ -298,7 +298,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="rawe85u"></span>
+          <span v-html="raw4znz"></span>
         </span>
       </span>
     </div>
@@ -319,9 +319,9 @@ export default {
   },
   data() {
     return {
-      raw4ubi: ' ',
+      raw5wrj: ' ',
-      rawkigv: ' ',
+      raw1wmo: ' ',
-      rawe85u: ' ',
+      raw4znz: ' ',
     }
   },
   metaInfo: {

src/views/larps/letzte-gelegenheit.vue

@@ -91,7 +91,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="rawpfun"></span>
+          <span v-html="rawne65"></span>
         </span>
         <span>Spiel startet.</span>
         <br />
@@ -114,12 +114,12 @@
       </p>
     </div>
     <h2 class="uppercase character-group section-head">Gefängnispersonal</h2>
-    <div class="character-row">
+    <div class="letzte-gelegenheit-character-teaser-row1 character-row">
       <section class="character-teaser-container">
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/fortier-200h.png"
+            src="/letzte-gelegenheit/charaktere/fortier-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -127,7 +127,7 @@
             <span class="character-function">
               <span>
                 Leitung der Justizvollzugsanstalt
-                <span v-html="rawff7c"></span>
+                <span v-html="rawdinl"></span>
               </span>
               <br />
             </span>
@@ -206,7 +206,7 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/jankovic-200h.png"
+            src="/letzte-gelegenheit/charaktere/jankovic-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -256,7 +256,7 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/krueger-200h.png"
+            src="/letzte-gelegenheit/charaktere/krueger-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -312,7 +312,7 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/schmidt-200h.png"
+            src="/letzte-gelegenheit/charaktere/schmidt-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -351,7 +351,7 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/hagiro-200h.png"
+            src="/letzte-gelegenheit/charaktere/hagiro-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -436,7 +436,7 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/jenatsch-200h.png"
+            src="/letzte-gelegenheit/charaktere/jenatsch-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -471,7 +471,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="rawpej1"></span>
+            <span v-html="raw5wzy"></span>
           </span>
           <span>Ab und zu spielt Jenatsch Karten mit Collins und Krüger.</span>
           <br />
@@ -491,7 +491,7 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/collins-200h.png"
+            src="/letzte-gelegenheit/charaktere/collins-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -532,13 +532,13 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/lindbeck-200h.png"
+            src="/letzte-gelegenheit/charaktere/lindbeck-200h.webp"
             class="character-image"
           />
           <div class="character-description">
             <h2 class="character-name">
               Lindbeck
-              <span v-html="raw4a8v"></span>
+              <span v-html="rawda2n"></span>
             </h2>
             <span class="character-function">
               <span>Häftling</span>
@@ -584,7 +584,7 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/sartre-200h.png"
+            src="/letzte-gelegenheit/charaktere/sartre-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -623,7 +623,7 @@
         <div class="character-header">
           <img
             alt="Symbolbild"
-            src="/letzte-gelegenheit/charaktere/pavone-200h.png"
+            src="/letzte-gelegenheit/charaktere/pavone-200h.webp"
             class="character-image"
           />
           <div class="character-description">
@@ -668,10 +668,10 @@
         <span>
           Konzipiert und organisiert wurde und wird das gesamte LARP von Hermann.
           Bei Runs 3, 4, 5 und 6 haben Robin Plötzwich und Annabelle Bitzmann beim
-          Aufbau und als Spielleitung geholfen und Sydney Mikosch bei Run 4 bei
+          Auf- und Abbau und als Spielleitung geholfen und Sydney Mikosch bei Run
-          der Verpflegung. Weitere Helfende haben selbst zusätzliche Funksprüche
+          4 bei der Verpflegung. Weitere Helfende haben selbst zusätzliche
-          für den Militärfunk geschrieben und/oder vertont. Diese sind hier (noch)
+          Funksprüche für den Militärfunk geschrieben und/oder vertont. Diese sind
-          nicht gelistet um die Immersion während dem Spiel zu wahren.
+          hier (noch) nicht gelistet um die Immersion während dem Spiel zu wahren.
         </span>
         <br />
         <br />
@@ -710,7 +710,7 @@
         <br />
         <span>
           -
-          <span v-html="rawn3xc"></span>
+          <span v-html="rawhzeh"></span>
         </span>
         <span>Phil U.</span>
         <br />
@@ -737,11 +737,11 @@ export default {
   },
   data() {
     return {
-      rawpfun: ' ',
+      rawne65: ' ',
-      rawff7c: ' ',
+      rawdinl: ' ',
-      rawpej1: ' ',
+      raw5wzy: ' ',
-      raw4a8v: ' ',
+      rawda2n: ' ',
-      rawn3xc: ' ',
+      rawhzeh: ' ',
     }
   },
   metaInfo: {
@@ -818,6 +818,9 @@ export default {
 .letzte-gelegenheit-charaktere-container {
   width: 95%;
 }
+.letzte-gelegenheit-character-teaser-row1 {
+  position: relative;
+}
 .letzte-gelegenheit-jenatsch {
   position: relative;
 }