Add scroll to top left behavior

default.conf

@@ -0,0 +1,54 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        # Added try_files to ensure that one can link or type a specific URI
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Added charset utf-8; to ensure UTF-8 is supported
+    charset utf-8;
+
+    # TODO: Add custom error pages (for now they're commented out)
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    #error_page   500 502 503 504  /50x.html;
+    #location = /50x.html {
+    #    root   /usr/share/nginx/html;
+    #}
+
+    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+    #
+    #location ~ \.php$ {
+    #    proxy_pass   http://127.0.0.1;
+    #}
+
+    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+    #
+    #location ~ \.php$ {
+    #    root           html;
+    #    fastcgi_pass   127.0.0.1:9000;
+    #    fastcgi_index  index.php;
+    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+    #    include        fastcgi_params;
+    #}
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}

src/router.js

@@ -6,37 +6,36 @@ import KlonOderLeid from './views/kurzgeschichten/klon-oder-leid'
 import Games from './views/games'
 import HuhnRammtHuhn from './views/kurzgeschichten/huhn-rammt-huhn'
 import HeiligerSteinkrieg from './views/kurzgeschichten/heiliger-steinkrieg'
-import DieLegendeVomWolfDesSdens from './views/kurzfilme/die-legende-vom-wolf-des-sdens'
+import DieLegendeVomWolfDesSuedens from './views/kurzfilme/die-legende-vom-wolf-des-suedens'
 import FunktioniertLARPAuchOnline from './views/blog/funktioniert-larp-auch-online'
-import VersetztesBedrfnis from './views/kurzgeschichten/versetztes-bedrfnis'
+import VersetztesBeduerfnis from './views/kurzgeschichten/versetztes-beduerfnis'
 import Assemblatron from './views/games/assemblatron'
 import EinsamesSchaf from './views/kurzgeschichten/einsames-schaf'
-import WiesoItrasByEinSoSimplesWieGrandiosesPPIst from './views/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist'
+import WiesoItrasByEinSoSimplesWieGrandiosesPenAndPenIst from './views/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist'
-import DieLsungGegenLeid from './views/kurzgeschichten/die-lsung-gegen-leid'
+import DieLoesungGegenLeid from './views/kurzgeschichten/die-loesung-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 GetraeumtesGlueck from './views/kurzgeschichten/getraeumtes-glueck'
 import Blog from './views/blog'
-import WasUnterscheidetHimmelVonHlle from './views/kurzgeschichten/was-unterscheidet-himmel-von-hlle'
+import WasUnterscheidetHimmelVonHoelle from './views/kurzgeschichten/was-unterscheidet-himmel-von-hoelle'
-import ConundrumSchattenBerOstmerkopa from './views/larps/conundrum-schatten-ber-ostmerkopa'
+import ConundrumSchattenUeberOstmerkopa from './views/larps/conundrum-schatten-ueber-ostmerkopa'
 import MurphysLARP from './views/games/murphys-larp'
 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 LebenStattUeberleben from './views/kurzgeschichten/leben-statt-ueberleben'
 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'
 import WieManEinGutesOnlineLARPMachtUndWieNicht from './views/blog/wie-man-ein-gutes-online-larp-macht-und-wie-nicht'
-import Page from './views/page'
+import LARPs from './views/larps'
-import LARPs from './views/lar-ps'
 import IchWillKeinHammerSein from './views/kurzgeschichten/ich-will-kein-hammer-sein'
 import Kurzfilme from './views/kurzfilme'
-import SsseTrume from './views/larps/ssse-trume'
+import SuesseTraeume from './views/larps/suesse-traeume'
-import BerUns from './views/ber-uns'
+import UeberUns from './views/ueber-uns'
 import Larpkonzept from './views/larpkonzept'
-import EinOrdenFrEineGuteTat from './views/kurzgeschichten/ein-orden-fr-eine-gute-tat'
+import EinOrdenFrEineGuteTat from './views/kurzgeschichten/ein-orden-fuer-eine-gute-tat'
 import LetzteGelegenheit from './views/larps/letzte-gelegenheit'
 import Rosenteufel from './views/kurzgeschichten/rosenteufel'
 import Home from './views/home'
@@ -49,192 +48,187 @@ export default new Router({
   mode: 'history',
   routes: [
     {
-      name: 'Klon-oder-Leid',
+      name: 'klon-oder-leid',
       path: '/kurzgeschichten/klon-oder-leid',
       component: KlonOderLeid,
     },
     {
-      name: 'Games',
+      name: 'games',
       path: '/games',
       component: Games,
     },
     {
-      name: 'Huhn-rammt-Huhn',
+      name: 'huhn-rammt-huhn',
       path: '/kurzgeschichten/huhn-rammt-huhn',
       component: HuhnRammtHuhn,
     },
     {
-      name: 'Heiliger-Steinkrieg',
+      name: 'heiliger-steinkrieg',
       path: '/kurzgeschichten/heiliger-steinkrieg',
       component: HeiligerSteinkrieg,
     },
     {
-      name: 'Die-Legende-vom-Wolf-des-Sdens',
+      name: 'die-legende-vom-wolf-des-suedens',
       path: '/kurzfilme/wolf-des-suedens',
-      component: DieLegendeVomWolfDesSdens,
+      component: DieLegendeVomWolfDesSuedens,
     },
     {
-      name: 'Funktioniert-LARP-auch-online',
+      name: 'funktioniert-larp-auch-online',
       path: '/blog/funktioniert-larp-auch-online',
       component: FunktioniertLARPAuchOnline,
     },
     {
-      name: 'Versetztes-Bedrfnis',
+      name: 'versetztes-beduerfnis',
       path: '/kurzgeschichten/versetztes-beduerfnis',
-      component: VersetztesBedrfnis,
+      component: VersetztesBeduerfnis,
     },
     {
-      name: 'Assemblatron',
+      name: 'assemblatron',
       path: '/games/assemblatron',
       component: Assemblatron,
     },
     {
-      name: 'Einsames-Schaf',
+      name: 'einsames-schaf',
       path: '/kurzgeschichten/einsames-schaf',
       component: EinsamesSchaf,
     },
     {
-      name: 'Wieso-Itras-By-ein-so-simples-wie-grandioses-PP-ist',
+      name: 'wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist',
       path: '/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist',
-      component: WiesoItrasByEinSoSimplesWieGrandiosesPPIst,
+      component: WiesoItrasByEinSoSimplesWieGrandiosesPenAndPenIst,
     },
     {
-      name: 'Die-Lsung-gegen-Leid',
+      name: 'die-loesung-gegen-leid',
       path: '/kurzgeschichten/die-loesung-gegen-leid',
-      component: DieLsungGegenLeid,
+      component: DieLoesungGegenLeid,
     },
     {
-      name: 'Gefangener-Gorilla',
+      name: 'gefangener-gorilla',
       path: '/kurzgeschichten/gefangener-gorilla',
       component: GefangenerGorilla,
     },
     {
-      name: 'Them-or-Us',
+      name: 'them-or-us',
       path: '/kurzgeschichten/them-or-us',
       component: ThemOrUs,
     },
     {
-      name: 'Getrumtes-Glck',
+      name: 'getraeumtes-glueck',
       path: '/kurzgeschichten/getraeumtes-glueck',
-      component: GetrumtesGlck,
+      component: GetraeumtesGlueck,
     },
     {
-      name: 'Blog',
+      name: 'blog',
       path: '/blog',
       component: Blog,
     },
     {
-      name: 'Was-unterscheidet-Himmel-von-Hlle',
+      name: 'was-unterscheidet-himmel-von-hoelle',
       path: '/kurzgeschichten/was-unterscheidet-himmel-von-hoelle',
-      component: WasUnterscheidetHimmelVonHlle,
+      component: WasUnterscheidetHimmelVonHoelle,
     },
     {
-      name: 'Conundrum-Schatten-ber-Ostmerkopa',
+      name: 'conundrum-schatten-ueber-ostmerkopa',
       path: '/larps/conundrum-schatten-ueber-ostmerkopa',
-      component: ConundrumSchattenBerOstmerkopa,
+      component: ConundrumSchattenUeberOstmerkopa,
     },
     {
-      name: 'Murphys-LARP',
+      name: 'murphys-larp',
       path: '/games/murphys-larp',
       component: MurphysLARP,
     },
     {
-      name: 'Lasst-mich-Ruhen',
+      name: 'lasst-mich-ruhen',
       path: '/kurzgeschichten/lasst-mich-ruhen',
       component: LasstMichRuhen,
     },
     {
-      name: 'Kurzgeschichten',
+      name: 'kurzgeschichten',
       path: '/kurzgeschichten',
       component: Kurzgeschichten,
     },
     {
-      name: 'Infinite-Deaths',
+      name: 'infinite-deaths',
       path: '/kurzgeschichten/infinite-deaths',
       component: InfiniteDeaths,
     },
     {
-      name: 'Leben-statt-berleben',
+      name: 'leben-statt-ueberleben',
       path: '/kurzgeschichten/leben-statt-ueberleben',
-      component: LebenStattBerleben,
+      component: LebenStattUeberleben,
     },
     {
-      name: 'Wie-Tales-Inside-eine-einmalige-Immersion-erreicht',
+      name: 'wie-tales-inside-eine-einmalige-immersion-erreicht',
       path: '/blog/wie-tales-inside-eine-einmalige-immersion-erreicht',
       component: WieTalesInsideEineEinmaligeImmersionErreicht,
     },
     {
-      name: 'Superkraft-im-Starbucks',
+      name: 'superkraft-im-starbucks',
       path: '/kurzgeschichten/superkraft-im-starbucks',
       component: SuperkraftImStarbucks,
     },
     {
-      name: 'Unwichtigster-Mensch',
+      name: 'unwichtigster-mensch',
       path: '/kurzgeschichten/unwichtigster-mensch',
       component: UnwichtigsterMensch,
     },
     {
-      name: 'Teilung-zweier-Welten',
+      name: 'teilung-zweier-welten',
       path: '/kurzgeschichten/teilung-zweier-welten',
       component: TeilungZweierWelten,
     },
     {
-      name: 'Wie-man-ein-gutes-Online-LARP-macht-und-wie-nicht',
+      name: 'wie-man-ein-gutes-online-larp-macht-und-wie-nicht',
       path: '/blog/wie-man-ein-gutes-online-larp-macht-und-wie-nicht',
       component: WieManEinGutesOnlineLARPMachtUndWieNicht,
     },
     {
-      name: 'Page',
+      name: 'larps',
-      path: '/page',
-      component: Page,
-    },
-    {
-      name: 'LARPs',
       path: '/larps',
       component: LARPs,
     },
     {
-      name: 'Ich-will-kein-Hammer-sein',
+      name: 'ich-will-kein-hammer-sein',
       path: '/kurzgeschichten/ich-will-kein-hammer-sein',
       component: IchWillKeinHammerSein,
     },
     {
-      name: 'Kurzfilme',
+      name: 'kurzfilme',
       path: '/kurzfilme',
       component: Kurzfilme,
     },
     {
-      name: 'Ssse-Trume',
+      name: 'suesse-traeume',
       path: '/larps/suesse-traeume',
-      component: SsseTrume,
+      component: SuesseTraeume,
     },
     {
-      name: 'ber-uns',
+      name: 'ueber-uns',
       path: '/ueber-uns',
-      component: BerUns,
+      component: UeberUns,
     },
     {
-      name: 'Larpkonzept',
+      name: 'larpkonzept',
       path: '/larpkonzept',
       component: Larpkonzept,
     },
     {
-      name: 'Ein-Orden-fr-eine-gute-Tat',
+      name: 'ein-orden-fuer-eine-gute-tat',
       path: '/kurzgeschichten/ein-orden-fuer-eine-gute-tat',
       component: EinOrdenFrEineGuteTat,
     },
     {
-      name: 'Letzte-Gelegenheit',
+      name: 'letzte-gelegenheit',
       path: '/larps/letzte-gelegenheit',
       component: LetzteGelegenheit,
     },
     {
-      name: 'Rosenteufel',
+      name: 'rosenteufel',
       path: '/kurzgeschichten/rosenteufel',
       component: Rosenteufel,
     },
     {
-      name: 'Home',
+      name: 'home',
       path: '/',
       component: Home,
     },
@@ -245,4 +239,8 @@ export default new Router({
       fallback: true,
     },
   ],
+  scrollBehavior(to, from, savedPosition) {
+    // Scroll to top left on route change
+    return { x: 0, y: 0 };
+  },
 })

src/views/blog.vue

@@ -54,7 +54,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/blog/funktioniert-larp-auch-online.vue

@@ -66,7 +66,7 @@ export default {
   overflow: auto;
   box-shadow: 5px 5px 10px 0px #d4d4d4;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/blog/wie-man-ein-gutes-online-larp-macht-und-wie-nicht.vue

@@ -69,7 +69,7 @@ export default {
   overflow: auto;
   box-shadow: 5px 5px 10px 0px #d4d4d4;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/blog/wie-tales-inside-eine-einmalige-immersion-erreicht.vue

@@ -1015,11 +1015,8 @@
           rel="noreferrer noopener"
           class="wie-tales-inside-eine-einmalige-immersion-erreicht-link2"
         >
-          Fotofän
+          Fotofänger
         </a>
-        <span class="wie-tales-inside-eine-einmalige-immersion-erreicht-text168">
-          ger
-        </span>
         <span>
           ,
           <span v-html="rawk18f"></span>
@@ -1030,11 +1027,8 @@
           rel="noreferrer noopener"
           class="wie-tales-inside-eine-einmalige-immersion-erreicht-link3"
         >
-          Hagen H
+          Hagen Hoppe
         </a>
-        <span class="wie-tales-inside-eine-einmalige-immersion-erreicht-text170">
-          oppe
-        </span>
         <span>
           und
           <span v-html="rawybzr"></span>
@@ -1051,7 +1045,7 @@
         <br />
         <br />
         <span>
-          Ein grosses Lob an die Erschaffer vom Tales Inside: Armin Sass und
+          Ein grosses Lob an die Erschaffer vom Tales Inside: Armin Saß und
           Jorina Havet. Sie haben mit dem Tales Inside eine Messlatte fürs LARP
           gesetzt wie wir sie uns zuvor nur erträumen konnten.
         </span>
@@ -1151,7 +1145,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/blog/wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist-container">
+  <div class="wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist-container">
     <app-navigation rootClassName="navigation-root-class-name45"></app-navigation>
     <h1 class="page-title">
       Wieso Itras By ein so simples wie grandioses P&amp;P ist
@@ -19,7 +19,7 @@
       href="https://web.archive.org/web/20220819114007/https://mitoffenemvisier.com/rollenspiel/wieso-itras-by-ein-so-simples-wie-grandioses-pnp-ist/"
       target="_blank"
       rel="noreferrer noopener"
-      class="wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist-download-button button"
+      class="wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist-download-button button"
     >
       <span class="button-text">Artikel auf archive.org lesen</span>
     </a>
@@ -32,7 +32,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'WiesoItrasByEinSoSimplesWieGrandiosesPPIst',
+  name: 'WiesoItrasByEinSoSimplesWieGrandiosesPenAndPenIst',
   props: {},
   components: {
     AppNavigation,
@@ -62,21 +62,21 @@ export default {
 </script>
 
 <style scoped>
-.wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist-container {
+.wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist-container {
   width: 100%;
   display: flex;
   z-index: 100;
   overflow: auto;
   box-shadow: 5px 5px 10px 0px #d4d4d4;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* 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;
 }
-.wieso-itras-by-ein-so-simples-wie-grandioses-pp-ist-download-button {
+.wieso-itras-by-ein-so-simples-wie-grandioses-pen-and-paper-ist-download-button {
   text-decoration: none;
 }
 </style>

src/views/games.vue

@@ -61,7 +61,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/games/assemblatron.vue

@@ -76,7 +76,7 @@ export default {
   overflow: auto;
   box-shadow: 5px 5px 10px 0px #d4d4d4;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/games/murphys-larp.vue

@@ -92,7 +92,7 @@ export default {
   overflow: auto;
   box-shadow: 5px 5px 10px 0px #d4d4d4;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/home.vue

@@ -113,7 +113,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzfilme.vue

@@ -61,7 +61,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="die-legende-vom-wolf-des-sdens-container">
+  <div class="die-legende-vom-wolf-des-suedens-container">
     <app-navigation rootClassName="navigation-root-class-name41"></app-navigation>
     <h1 class="page-title">
       <span>Die Legende vom Wolf des Südens</span>
@@ -11,7 +11,7 @@
     </span>
     <iframe
       src="https://www.youtube.com/embed/gaaC1lg-qYU?si=9lNTQKMdJcN-wBTy"
-      class="die-legende-vom-wolf-des-sdens-trailer-video embedded-video"
+      class="die-legende-vom-wolf-des-suedens-trailer-video embedded-video"
     ></iframe>
     <div class="text-body">
       <span>
@@ -43,7 +43,7 @@
       href="https://visuation.ch/films/wolf-des-s%C3%BCdens"
       target="_blank"
       rel="noreferrer noopener"
-      class="die-legende-vom-wolf-des-sdens-download-button button"
+      class="die-legende-vom-wolf-des-suedens-download-button button"
     >
       <span class="button-text">offizielle Seite des Trailers</span>
     </a>
@@ -56,7 +56,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'DieLegendeVomWolfDesSdens',
+  name: 'DieLegendeVomWolfDesSuedens',
   props: {},
   components: {
     AppNavigation,
@@ -85,24 +85,24 @@ export default {
 </script>
 
 <style scoped>
-.die-legende-vom-wolf-des-sdens-container {
+.die-legende-vom-wolf-des-suedens-container {
   width: 100%;
   display: flex;
   z-index: 100;
   overflow: auto;
   box-shadow: 5px 5px 10px 0px #d4d4d4;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* 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;
 }
-.die-legende-vom-wolf-des-sdens-trailer-video {
+.die-legende-vom-wolf-des-suedens-trailer-video {
   margin-bottom: 0px;
 }
-.die-legende-vom-wolf-des-sdens-download-button {
+.die-legende-vom-wolf-des-suedens-download-button {
   text-decoration: none;
 }
 </style>

src/views/kurzgeschichten.vue

@@ -7,11 +7,28 @@
       <br />
     </span>
     <div class="text-body">
+      <span>
         <span>
           Hermann nutzt Kurzgeschichten um Ideen, die er spannend findet, kompakt
           erzählerisch zusammenzufassen. Künftig möchte Hermann ähnliche Ideen
           zusätzlich als Kurzfilme umsetzen, wenn das Filmformat dafür geeignet ist.
         </span>
+        <br />
+        <br />
+        <span>
+          Weitere Kurzgeschichten von Fabio Geisser, einem Freund von Hermann, sind zu finden auf dessen Webseite:
+        </span>
+        <a
+            href="https://geschichtenfabio.ch"
+            target="_blank"
+            rel="noreferrer noopener"
+            class="card-link"
+            style="text-align:center;
+            text-decoration:underline;"
+          >
+            https://geschichtenfabio.ch
+        </a>
+      </span>
     </div>
     <div class="kurzgeschichten-container1 card-container">
       <summary-shortstories
@@ -63,7 +80,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/die-loesung-gegen-leid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="die-lsung-gegen-leid-container">
+  <div class="die-loesung-gegen-leid-container">
     <app-navigation rootClassName="navigation-root-class-name22"></app-navigation>
     <h1 class="page-title">Die Lösung gegen Leid</h1>
     <span class="page-subtitle">
@@ -10,7 +10,7 @@
       href="https://drive.google.com/file/d/16XqhRQzP0uIwtT15Lt9q7qSodAbu4dIS/view?usp=sharing"
       target="_blank"
       rel="noreferrer noopener"
-      class="die-lsung-gegen-leid-download-button button"
+      class="die-loesung-gegen-leid-download-button button"
     >
       <span class="button-text">Als PDF</span>
     </a>
@@ -118,7 +118,7 @@
         src="/kurzgeschichten/openvisor_kurzgeschichte_zeichnung_die_loesung_gegen_leid-1200w.webp"
         class="shortstory-image"
       />
-      <p class="die-lsung-gegen-leid-text56 shortstory-paragraph">
+      <p class="die-loesung-gegen-leid-text56 shortstory-paragraph">
         Zeichnung von Lorena Zdanewitz.
       </p>
     </div>
@@ -131,7 +131,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'DieLsungGegenLeid',
+  name: 'DieLoesungGegenLeid',
   props: {},
   components: {
     AppNavigation,
@@ -160,27 +160,27 @@ export default {
 </script>
 
 <style scoped>
-.die-lsung-gegen-leid-container {
+.die-loesung-gegen-leid-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* 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;
 }
-.die-lsung-gegen-leid-download-button {
+.die-loesung-gegen-leid-download-button {
   text-decoration: none;
 }
-.die-lsung-gegen-leid-text56 {
+.die-loesung-gegen-leid-text56 {
   font-style: italic;
   text-align: center;
 }
 @media(max-width: 991px) {
-  .die-lsung-gegen-leid-text56 {
+  .die-loesung-gegen-leid-text56 {
     font-style: italic;
   }
 }

src/views/kurzgeschichten/ein-orden-fuer-eine-gute-tat.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ein-orden-fr-eine-gute-tat-container">
+  <div class="ein-orden-fuer-eine-gute-tat-container">
     <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
     <h1 class="page-title">
       <span>Ein Orden für eine gute Tat</span>
@@ -9,17 +9,17 @@
       <span>Eine moralische Kurzgeschichte für Kinder, Dezember 2020</span>
       <br />
     </span>
-    <div class="ein-orden-fr-eine-gute-tat-container1">
+    <div class="ein-orden-fuer-eine-gute-tat-container1">
       <a
         href="https://drive.google.com/file/d/10oT5Mr9dZuApIKR_C7K765kU4pA9cg-m/view?usp=sharing"
         target="_blank"
         rel="noreferrer noopener"
-        class="ein-orden-fr-eine-gute-tat-download-button button"
+        class="ein-orden-fuer-eine-gute-tat-download-button button"
       >
         <span class="button-text">Als PDF</span>
       </a>
     </div>
-    <div class="ein-orden-fr-eine-gute-tat-text-container text-body">
+    <div class="ein-orden-fuer-eine-gute-tat-text-container text-body">
       <span>
         <span>
           &quot;Ein brauner Schneehase besucht ein ein Rothörnchen und ein
@@ -80,25 +80,25 @@ export default {
 </script>
 
 <style scoped>
-.ein-orden-fr-eine-gute-tat-container {
+.ein-orden-fuer-eine-gute-tat-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;
   background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ein-orden-fr-eine-gute-tat-container1 {
+.ein-orden-fuer-eine-gute-tat-container1 {
   display: flex;
   position: relative;
 }
-.ein-orden-fr-eine-gute-tat-download-button {
+.ein-orden-fuer-eine-gute-tat-download-button {
   text-decoration: none;
 }
-.ein-orden-fr-eine-gute-tat-text-container {
+.ein-orden-fuer-eine-gute-tat-text-container {
   width: 90%;
   max-width: 1080px;
   align-items: flex-end;
@@ -106,7 +106,7 @@ export default {
   justify-content: center;
 }
 @media(max-width: 991px) {
-  .ein-orden-fr-eine-gute-tat-text-container {
+  .ein-orden-fuer-eine-gute-tat-text-container {
     width: 90%;
   }
 }

src/views/kurzgeschichten/einsames-schaf.vue

@@ -116,7 +116,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/gefangener-gorilla.vue

@@ -143,7 +143,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/getraeumtes-glueck.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="getrumtes-glck-container">
+  <div class="getraeumtes-glueck-container">
     <app-navigation rootClassName="navigation-root-class-name37"></app-navigation>
     <h1 class="page-title">Geträumtes Glück</h1>
     <span class="page-subtitle">
@@ -10,7 +10,7 @@
       href="https://drive.google.com/file/d/1uSdNFezdhoXgtXFo-pKTFC0FBw2jFuvN/view?usp=sharing"
       target="_blank"
       rel="noreferrer noopener"
-      class="getrumtes-glck-download-button button"
+      class="getraeumtes-glueck-download-button button"
     >
       <span class="button-text">Als PDF</span>
     </a>
@@ -115,7 +115,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'GetrumtesGlck',
+  name: 'GetraeumtesGlueck',
   props: {},
   components: {
     AppNavigation,
@@ -144,19 +144,19 @@ export default {
 </script>
 
 <style scoped>
-.getrumtes-glck-container {
+.getraeumtes-glueck-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* 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;
 }
-.getrumtes-glck-download-button {
+.getraeumtes-glueck-download-button {
   text-decoration: none;
 }
 </style>

src/views/kurzgeschichten/heiliger-steinkrieg.vue

@@ -76,7 +76,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/huhn-rammt-huhn.vue

@@ -82,7 +82,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/ich-will-kein-hammer-sein.vue

@@ -94,7 +94,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/infinite-deaths.vue

@@ -107,7 +107,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/klon-oder-leid.vue

@@ -157,7 +157,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/lasst-mich-ruhen.vue

@@ -105,7 +105,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/leben-statt-ueberleben.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="leben-statt-berleben-container">
+  <div class="leben-statt-ueberleben-container">
     <app-navigation rootClassName="navigation-root-class-name26"></app-navigation>
     <h1 class="page-title">Leben statt Überleben</h1>
     <span class="page-subtitle">
@@ -10,7 +10,7 @@
       href="https://drive.google.com/file/d/1li9O8iGqL6mOgagHtzH4tKe6WZW8xt0J/view?usp=sharing"
       target="_blank"
       rel="noreferrer noopener"
-      class="leben-statt-berleben-download-button button"
+      class="leben-statt-ueberleben-download-button button"
     >
       <span class="button-text">Als PDF</span>
     </a>
@@ -95,7 +95,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'LebenStattBerleben',
+  name: 'LebenStattUeberleben',
   props: {},
   components: {
     AppNavigation,
@@ -124,19 +124,19 @@ export default {
 </script>
 
 <style scoped>
-.leben-statt-berleben-container {
+.leben-statt-ueberleben-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* 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;
 }
-.leben-statt-berleben-download-button {
+.leben-statt-ueberleben-download-button {
   text-decoration: none;
 }
 </style>

src/views/kurzgeschichten/rosenteufel.vue

@@ -352,7 +352,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/superkraft-im-starbucks.vue

@@ -117,7 +117,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/teilung-zweier-welten.vue

@@ -99,7 +99,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/them-or-us.vue

@@ -113,7 +113,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/unwichtigster-mensch.vue

@@ -117,7 +117,7 @@ export default {
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/kurzgeschichten/versetztes-beduerfnis.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="versetztes-bedrfnis-container">
+  <div class="versetztes-beduerfnis-container">
     <app-navigation rootClassName="navigation-root-class-name27"></app-navigation>
     <h1 class="page-title">Versetztes Bedürfnis</h1>
     <span class="page-subtitle">
@@ -10,7 +10,7 @@
       href="https://drive.google.com/file/d/1yCXpaWPRsyVCODBB32YTT_hN60fpcpdx/view?usp=sharing"
       target="_blank"
       rel="noreferrer noopener"
-      class="versetztes-bedrfnis-download-button button"
+      class="versetztes-beduerfnis-download-button button"
     >
       <span class="button-text">Als PDF</span>
     </a>
@@ -49,7 +49,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'VersetztesBedrfnis',
+  name: 'VersetztesBeduerfnis',
   props: {},
   components: {
     AppNavigation,
@@ -78,19 +78,19 @@ export default {
 </script>
 
 <style scoped>
-.versetztes-bedrfnis-container {
+.versetztes-beduerfnis-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* 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;
 }
-.versetztes-bedrfnis-download-button {
+.versetztes-beduerfnis-download-button {
   text-decoration: none;
 }
 </style>

src/views/kurzgeschichten/was-unterscheidet-himmel-von-hoelle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="was-unterscheidet-himmel-von-hlle-container">
+  <div class="was-unterscheidet-himmel-von-hoelle-container">
     <app-navigation rootClassName="navigation-root-class-name24"></app-navigation>
     <h1 class="page-title">Was unterscheidet Himmel von Hölle?</h1>
     <span class="page-subtitle">
@@ -10,7 +10,7 @@
       href="https://drive.google.com/file/d/1vCD8vRj1FgZwoHBqq1a0bhMsIDO4zwY2/view?usp=sharing"
       target="_blank"
       rel="noreferrer noopener"
-      class="was-unterscheidet-himmel-von-hlle-download-button button"
+      class="was-unterscheidet-himmel-von-hoelle-download-button button"
     >
       <span class="button-text">Als PDF</span>
     </a>
@@ -54,7 +54,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'WasUnterscheidetHimmelVonHlle',
+  name: 'WasUnterscheidetHimmelVonHoelle',
   props: {},
   components: {
     AppNavigation,
@@ -83,19 +83,19 @@ export default {
 </script>
 
 <style scoped>
-.was-unterscheidet-himmel-von-hlle-container {
+.was-unterscheidet-himmel-von-hoelle-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* 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;
 }
-.was-unterscheidet-himmel-von-hlle-download-button {
+.was-unterscheidet-himmel-von-hoelle-download-button {
   text-decoration: none;
 }
 </style>

src/views/larpkonzept.vue

@@ -65,7 +65,7 @@ export default {
   overflow: auto;
   box-shadow: 5px 5px 10px 0px #d4d4d4;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/larps.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lar-ps-container">
+  <div class="larps-container">
     <app-navigation rootClassName="navigation-root-class-name16"></app-navigation>
     <h1 class="page-title">LARPs</h1>
     <div class="text-body">
@@ -67,12 +67,12 @@ export default {
 </script>
 
 <style scoped>
-.lar-ps-container {
+.larps-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/larps/conundrum-schatten-ueber-ostmerkopa.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="conundrum-schatten-ber-ostmerkopa-container">
+  <div class="conundrum-schatten-ueber-ostmerkopa-container">
     <app-navigation rootClassName="navigation-root-class-name40"></app-navigation>
     <span class="page-title">Conundrum: Schatten über Ostmerkopa</span>
     <span class="page-subtitle">
@@ -19,9 +19,9 @@
       href="https://notgreatnotterrible.de"
       target="_blank"
       rel="noreferrer noopener"
-      class="conundrum-schatten-ber-ostmerkopa-link"
+      class="conundrum-schatten-ueber-ostmerkopa-link"
     >
-      <div class="conundrum-schatten-ber-ostmerkopa-plot button">
+      <div class="conundrum-schatten-ueber-ostmerkopa-plot button">
         <span class="button-text">
           <span>Infos (Not Great Not Terrible Webseite)</span>
           <br />
@@ -37,7 +37,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'ConundrumSchattenBerOstmerkopa',
+  name: 'ConundrumSchattenUeberOstmerkopa',
   props: {},
   components: {
     AppNavigation,
@@ -66,21 +66,21 @@ export default {
 </script>
 
 <style scoped>
-.conundrum-schatten-ber-ostmerkopa-container {
+.conundrum-schatten-ueber-ostmerkopa-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;
   background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.conundrum-schatten-ber-ostmerkopa-link {
+.conundrum-schatten-ueber-ostmerkopa-link {
   display: contents;
 }
-.conundrum-schatten-ber-ostmerkopa-plot {
+.conundrum-schatten-ueber-ostmerkopa-plot {
   text-decoration: none;
 }
 </style>

src/views/larps/letzte-gelegenheit.vue

@@ -779,7 +779,7 @@ export default {
   overflow: auto;
   box-shadow: 5px 5px 10px 0px #d4d4d4;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;

src/views/larps/suesse-traeume.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ssse-trume-container">
+  <div class="suesse-traeume-container">
     <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
     <span class="page-title">Süsse Träume</span>
     <span class="page-subtitle">
@@ -48,15 +48,15 @@
         <br />
       </p>
     </div>
-    <div class="ssse-trume-container2">
+    <div class="suesse-traeume-container2">
       <a
         href="https://www.dropbox.com/s/vnpc477fo6bxz1g/OpenVisor_Suesse_Traueme_1_Plot.pdf?dl=0"
         target="_blank"
         rel="noreferrer noopener"
-        class="ssse-trume-link"
+        class="suesse-traeume-link"
       >
-        <div class="ssse-trume-plot button">
+        <div class="suesse-traeume-plot button">
-          <span class="ssse-trume-plot1">
+          <span class="suesse-traeume-plot1">
             <span>Plot</span>
             <br />
           </span>
@@ -66,20 +66,20 @@
         href="https://www.dropbox.com/s/wwigmb6qrv62cvx/OpenVisor_Suesse_Traueme_1_Plot_Hintergrund.pdf?dl=0"
         target="_blank"
         rel="noreferrer noopener"
-        class="ssse-trume-link1"
+        class="suesse-traeume-link1"
       >
-        <div class="ssse-trume-hintergrund button">
+        <div class="suesse-traeume-hintergrund button">
-          <span class="ssse-trume-hintergrund1">Hintergrund</span>
+          <span class="suesse-traeume-hintergrund1">Hintergrund</span>
         </div>
       </a>
       <a
         href="https://www.dropbox.com/s/2y3tc1yziynll94/OpenVisor_Suesse_Traueme_1_Infos_SC.pdf?dl=0"
         target="_blank"
         rel="noreferrer noopener"
-        class="ssse-trume-link2"
+        class="suesse-traeume-link2"
       >
-        <div class="ssse-trume-infos-sc button">
+        <div class="suesse-traeume-infos-sc button">
-          <span class="ssse-trume-infos-sc1">
+          <span class="suesse-traeume-infos-sc1">
             <span>Infos SC</span>
             <br />
           </span>
@@ -89,27 +89,27 @@
         href="https://www.dropbox.com/s/rqpjnkinbnhr8fy/OpenVisor_Suesse_Traueme_2_Anklageschrift.pdf?dl=0"
         target="_blank"
         rel="noreferrer noopener"
-        class="ssse-trume-link3"
+        class="suesse-traeume-link3"
       >
-        <div class="ssse-trume-anklageschrift button">
+        <div class="suesse-traeume-anklageschrift button">
-          <span class="ssse-trume-anklageschrift1">Anklageschrift</span>
+          <span class="suesse-traeume-anklageschrift1">Anklageschrift</span>
         </div>
       </a>
       <a
         href="https://www.dropbox.com/s/vkw2f9sys5d46yw/OpenVisor_Suesse_Traueme_2_Gerichtsordnung.pdf?dl=0"
         target="_blank"
         rel="noreferrer noopener"
-        class="ssse-trume-link4"
+        class="suesse-traeume-link4"
       >
-        <div class="ssse-trume-gerichtsordnung button">
+        <div class="suesse-traeume-gerichtsordnung button">
-          <span class="ssse-trume-gerichtsordnung1">Gerichtsordnung</span>
+          <span class="suesse-traeume-gerichtsordnung1">Gerichtsordnung</span>
         </div>
       </a>
     </div>
     <h1 class="character-title section-head">Süsse Träume Run 1 Fotos</h1>
-    <span class="ssse-trume-credits">63 Fotos von Claudia Chiodi</span>
+    <span class="suesse-traeume-credits">63 Fotos von Claudia Chiodi</span>
-    <div class="ssse-trume-container3">
+    <div class="suesse-traeume-container3">
-      <div class="ssse-trume-container4">
+      <div class="suesse-traeume-container4">
         <DangerousHTML
           html="<script src='https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js' async></script>
   <div class='pa-carousel-widget' style='width:100%; height:480px;'
@@ -185,9 +185,9 @@
       </div>
     </div>
     <h1 class="character-title section-head">Süsse Träume Run 2 Fotos</h1>
-    <span class="ssse-trume-credits1">67 Fotos von Claudia Chiodi</span>
+    <span class="suesse-traeume-credits1">67 Fotos von Claudia Chiodi</span>
-    <div class="ssse-trume-container5">
+    <div class="suesse-traeume-container5">
-      <div class="ssse-trume-container6">
+      <div class="suesse-traeume-container6">
         <DangerousHTML
           html="<script src='https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js' async></script>
   <div class='pa-carousel-widget' style='width:100%; height:480px;'
@@ -278,7 +278,7 @@ import AppNavigation from '../../components/navigation'
 import AppKontakt from '../../components/kontakt'
 
 export default {
-  name: 'SsseTrume',
+  name: 'SuesseTraeume',
   props: {},
   components: {
     AppNavigation,
@@ -308,18 +308,18 @@ export default {
 </script>
 
 <style scoped>
-.ssse-trume-container {
+.suesse-traeume-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;
   background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ssse-trume-container2 {
+.suesse-traeume-container2 {
   gap: var(--dl-space-space-twounits);
   flex: 0 0 auto;
   width: 100%;
@@ -329,13 +329,13 @@ export default {
   align-items: center;
   justify-content: center;
 }
-.ssse-trume-link {
+.suesse-traeume-link {
   display: contents;
 }
-.ssse-trume-plot {
+.suesse-traeume-plot {
   width: 200px;
 }
-.ssse-trume-plot1 {
+.suesse-traeume-plot1 {
   color: rgb(12, 16, 12);
   font-size: 20px;
   font-style: normal;
@@ -343,13 +343,13 @@ export default {
   font-weight: 500;
   line-height: 24px;
 }
-.ssse-trume-link1 {
+.suesse-traeume-link1 {
   display: contents;
 }
-.ssse-trume-hintergrund {
+.suesse-traeume-hintergrund {
   width: 200px;
 }
-.ssse-trume-hintergrund1 {
+.suesse-traeume-hintergrund1 {
   color: rgb(12, 16, 12);
   font-size: 20px;
   font-style: normal;
@@ -357,13 +357,13 @@ export default {
   font-weight: 500;
   line-height: 24px;
 }
-.ssse-trume-link2 {
+.suesse-traeume-link2 {
   display: contents;
 }
-.ssse-trume-infos-sc {
+.suesse-traeume-infos-sc {
   width: 200px;
 }
-.ssse-trume-infos-sc1 {
+.suesse-traeume-infos-sc1 {
   color: rgb(12, 16, 12);
   font-size: 20px;
   font-style: normal;
@@ -371,13 +371,13 @@ export default {
   font-weight: 500;
   line-height: 24px;
 }
-.ssse-trume-link3 {
+.suesse-traeume-link3 {
   display: contents;
 }
-.ssse-trume-anklageschrift {
+.suesse-traeume-anklageschrift {
   width: 200px;
 }
-.ssse-trume-anklageschrift1 {
+.suesse-traeume-anklageschrift1 {
   color: rgb(12, 16, 12);
   font-size: 20px;
   font-style: normal;
@@ -385,13 +385,13 @@ export default {
   font-weight: 500;
   line-height: 24px;
 }
-.ssse-trume-link4 {
+.suesse-traeume-link4 {
   display: contents;
 }
-.ssse-trume-gerichtsordnung {
+.suesse-traeume-gerichtsordnung {
   width: 200px;
 }
-.ssse-trume-gerichtsordnung1 {
+.suesse-traeume-gerichtsordnung1 {
   color: rgb(12, 16, 12);
   font-size: 20px;
   font-style: normal;
@@ -399,7 +399,7 @@ export default {
   font-weight: 500;
   line-height: 24px;
 }
-.ssse-trume-credits {
+.suesse-traeume-credits {
   color: rgb(255, 255, 255);
   font-size: 20px;
   text-align: center;
@@ -407,13 +407,13 @@ export default {
   line-height: 30px;
   margin-bottom: var(--dl-space-space-twounits);
 }
-.ssse-trume-container3 {
+.suesse-traeume-container3 {
   width: 100%;
 }
-.ssse-trume-container4 {
+.suesse-traeume-container4 {
   display: contents;
 }
-.ssse-trume-credits1 {
+.suesse-traeume-credits1 {
   color: rgb(255, 255, 255);
   font-size: 20px;
   text-align: center;
@@ -421,18 +421,18 @@ export default {
   line-height: 30px;
   margin-bottom: var(--dl-space-space-twounits);
 }
-.ssse-trume-container5 {
+.suesse-traeume-container5 {
   width: 100%;
 }
-.ssse-trume-container6 {
+.suesse-traeume-container6 {
   display: contents;
 }
 @media(max-width: 767px) {
-  .ssse-trume-credits {
+  .suesse-traeume-credits {
     font-size: 16px;
     line-height: 24px;
   }
-  .ssse-trume-credits1 {
+  .suesse-traeume-credits1 {
     font-size: 16px;
     line-height: 24px;
   }

src/views/not-found.vue

@@ -1,58 +1,80 @@
 <template>
-  <div class="not-found-container">
+  <div class="page-container">
-    <h3>OOPS! PAGE NOT FOUND</h3>
+    <app-navigation rootClassName="navigation-root-class-name39"></app-navigation>
-    <div class="not-found-container1"><h1 class="not-found-text1">404</h1></div>
+    <img
-    <div class="not-found-container2">
+      alt="OpenVisor"
-      <h2 class="not-found-text2">
+      src="/openvisor_logo_only_text_compressed-200h.png"
-        WE ARE SORRY, BUT THE PAGE YOU REQUESTED WAS NOT FOUND
+      class="page-image"
-      </h2>
+    />
+    <span class="page-subtitle">404 (Seite nicht gefunden)</span>
+    <div class="text-body">
+      <span>
+        Die URL führt zu keiner aktiven Seite. Bitte benutze das Menü um zu einer
+        Seite Deiner Wahl zu gelangen.
+      </span>
     </div>
+    <app-kontakt></app-kontakt>
   </div>
 </template>
 
 <script>
+import AppNavigation from '../components/navigation'
+import AppKontakt from '../components/kontakt'
+
 export default {
-  name: 'NotFound',
+  name: '404 (Seite nicht gefunden)',
+  props: {},
+  components: {
+    AppNavigation,
+    AppKontakt,
+  },
   metaInfo: {
-    title: '404 - Not Found',
+    title: 'OpenVisor - 404 (Seite nicht gefunden)',
+    meta: [
+      {
+        name: 'description',
+        content: 'Die URL führt zu keiner aktiven Seite.',
+      },
+      {
+        property: 'og:title',
+        content: 'OpenVisor - 404 (Seite nicht gefunden)',
+      },
+      {
+        property: 'og:description',
+        content: 'Die URL führt zu keiner aktiven Seite.',
+      },
+      {
+        name: 'robots',
+        content: 'noindex',
+      },
+    ],
   },
 }
 </script>
 
 <style scoped>
-.not-found-container {
+.page-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
-  justify-content: center;
+  background-size: cover;
+  background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.not-found-container1 {
+.page-image {
-  display: flex;
+  width: 640px;
-  position: relative;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
 }
-.not-found-text1 {
+@media(max-width: 991px) {
-  color: rgb(38, 38, 38);
+  .page-image {
-  font-size: 252px;
+    width: 420px;
-  margin-top: -20px;
-  font-weight: 900;
-  margin-bottom: -20px;
-  letter-spacing: -20px;
   }
-.not-found-container2 {
-  width: 421px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
 }
-.not-found-text2 {
+@media(max-width: 767px) {
-  text-align: center;
+  .page-image {
-  font-weight: 400;
+    margin-top: var(--dl-space-space-unit);
+  }
 }
 </style>

src/views/page.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="page-container">
-    <app-navigation rootClassName="navigation-root-class-name39"></app-navigation>
-    <img
-      alt="OpenVisor"
-      src="/openvisor_logo_only_text_compressed-200h.png"
-      class="page-image"
-    />
-    <span class="page-subtitle">404 (Seite nicht gefunden)</span>
-    <div class="text-body">
-      <span>
-        Die URL führt zu keiner aktiven Seite. Bitte benutze das Menü um zu einer
-        Seite Deiner Wahl zu gelangen.
-      </span>
-    </div>
-    <app-kontakt></app-kontakt>
-  </div>
-</template>
-
-<script>
-import AppNavigation from '../components/navigation'
-import AppKontakt from '../components/kontakt'
-
-export default {
-  name: 'Page',
-  props: {},
-  components: {
-    AppNavigation,
-    AppKontakt,
-  },
-  metaInfo: {
-    title: 'OpenVisor - 404 (Seite nicht gefunden)',
-    meta: [
-      {
-        name: 'description',
-        content: 'Die URL führt zu keiner aktiven Seite.',
-      },
-      {
-        property: 'og:title',
-        content: 'OpenVisor - 404 (Seite nicht gefunden)',
-      },
-      {
-        property: 'og:description',
-        content: 'Die URL führt zu keiner aktiven Seite.',
-      },
-      {
-        name: 'robots',
-        content: 'noindex',
-      },
-    ],
-  },
-}
-</script>
-
-<style scoped>
-.page-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");
-}
-.page-image {
-  width: 640px;
-}
-@media(max-width: 991px) {
-  .page-image {
-    width: 420px;
-  }
-}
-@media(max-width: 767px) {
-  .page-image {
-    margin-top: var(--dl-space-space-unit);
-  }
-}
-</style>

src/views/ueber-uns.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ber-uns-container">
+  <div class="ueber-uns-container">
     <app-navigation rootClassName="navigation-root-class-name10"></app-navigation>
     <h1 class="page-title">
       <span>Über uns</span>
@@ -34,7 +34,7 @@
       href="https://docs.google.com/spreadsheets/d/1fWIJHFUjcbE5a04M3eIBmRVvBI2bYcDbsys3mc5r7h0/edit?usp=sharing"
       target="_blank"
       rel="noreferrer noopener"
-      class="ber-uns-link button"
+      class="ueber-uns-link button"
     >
       <span class="button-text">Hermanns Larperfahrung</span>
     </a>
@@ -47,7 +47,7 @@ import AppNavigation from '../components/navigation'
 import AppKontakt from '../components/kontakt'
 
 export default {
-  name: 'BerUns',
+  name: 'UeberUns',
   props: {},
   components: {
     AppNavigation,
@@ -70,18 +70,18 @@ export default {
 </script>
 
 <style scoped>
-.ber-uns-container {
+.ueber-uns-container {
   width: 100%;
   display: flex;
   overflow: auto;
   min-height: 100vh;
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
   align-items: center;
   flex-direction: column;
   background-size: cover;
   background-image: url("/forest-background-luca-dross-1500w.jpg");
 }
-.ber-uns-link {
+.ueber-uns-link {
   display: flex;
   flex-direction: row;
   text-decoration: none;