From 1c258b455050e148ef398fcc146b77bf630332bf Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Mon, 24 Oct 2022 10:28:00 +0200
Subject: [PATCH] fix(update): update components & clean

---
 .stylelintrc                                  |  20 +-
 src/components/atoms/Headline.vue             |  19 +-
 src/components/base/ContentContainer.vue      | 174 +++++++++++++
 src/components/base/ContentHeadline.vue       | 107 ++++++++
 ...DefaultContainer.vue => LostContainer.vue} |   8 +-
 src/components/layouts/Modal.vue              |   8 +-
 src/components/layouts/ScrollContainer.vue    | 123 +++++++++
 src/components/layouts/TwoColumnContainer.vue |   8 +-
 .../{ContentArticle.vue => Content.vue}       |  23 +-
 .../{ArticleText.vue => FullText.vue}         |  18 +-
 src/components/organisms/SinglePicture.vue    |   8 +-
 src/components/organisms/SingleVideo.vue      |   8 +-
 src/components/organisms/StagePicture.vue     |  59 ++++-
 src/components/organisms/StageVideo.vue       |  12 +-
 .../organisms/TestScrollContainerA.vue        | 233 ++++++++++++++++++
 .../{ArticleTextImage.vue => TextImage.vue}   |  30 ++-
 src/components/page/Footer.vue                |   8 +-
 src/components/page/Header.vue                |   8 +-
 src/components/page/InfoLayer.vue             |   8 +-
 src/content/de/index.json                     |  17 +-
 src/content/de/p/kontakt.json                 |   2 +-
 src/content/de/p/nutzungsbedingungen.json     |   4 +-
 src/content/de/p/projekte/index.json          |   6 +-
 src/content/de/p/projekte/projekt-1.json      |   2 +-
 src/content/de/p/projekte/projekt-2.json      |   2 +-
 src/content/de/p/rechtliche-hinweise.json     |   4 +-
 src/content/de/p/ueber-uns.json               |   2 +-
 src/content/en/index.json                     |  17 +-
 src/content/en/p/about.json                   |   2 +-
 src/content/en/p/contact.json                 |   2 +-
 src/content/en/p/legals.json                  |   4 +-
 src/content/en/p/projects/index.json          |   6 +-
 src/content/en/p/projects/project-1.json      |   2 +-
 src/content/en/p/projects/project-2.json      |   2 +-
 src/content/en/p/terms.json                   |   4 +-
 src/extends/Components.vue                    |   4 +-
 src/extends/Content.vue                       |  19 +-
 src/layouts/default.vue                       |  45 ++--
 src/layouts/error.vue                         |   2 +-
 src/service/scroll.js                         |   2 +-
 src/utils/dom.js                              |  10 +
 41 files changed, 877 insertions(+), 165 deletions(-)
 create mode 100644 src/components/base/ContentContainer.vue
 create mode 100644 src/components/base/ContentHeadline.vue
 rename src/components/layouts/{DefaultContainer.vue => LostContainer.vue} (88%)
 create mode 100644 src/components/layouts/ScrollContainer.vue
 rename src/components/molecules/{ContentArticle.vue => Content.vue} (63%)
 rename src/components/organisms/{ArticleText.vue => FullText.vue} (55%)
 create mode 100644 src/components/organisms/TestScrollContainerA.vue
 rename src/components/organisms/{ArticleTextImage.vue => TextImage.vue} (71%)
 create mode 100644 src/utils/dom.js

diff --git a/.stylelintrc b/.stylelintrc
index c7f40f13a..730c20048 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -26,6 +26,7 @@
     "max-empty-lines": null,
     "selector-class-pattern": null,
     "selector-id-pattern": null,
+    "no-descending-specificity": null,
     "value-keyword-case": [
       "lower",
       {
@@ -41,6 +42,23 @@
           "vw"
         ]
       }
-    ]
+    ],
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": [
+          "global",
+          "deep"
+        ]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": [
+          "v-deep"
+        ]
+      }
+    ],
   }
 }
diff --git a/src/components/atoms/Headline.vue b/src/components/atoms/Headline.vue
index 711d9c146..9dfa20f71 100644
--- a/src/components/atoms/Headline.vue
+++ b/src/components/atoms/Headline.vue
@@ -1,9 +1,5 @@
 <template>
-  <component
-    :is="tag"
-    class="atom-headline"
-    :class="styleClasses"
-  >
+  <base-content-headline class="atom-headline">
     <slot>
       <span
         v-if="$slots.overline || overline"
@@ -33,11 +29,13 @@
         </slot>
       </span>
     </slot>
-  </component>
+  </base-content-headline>
 </template>
 
 <script>
+import BaseContentHeadline from '@/components/base/ContentHeadline';
 export default {
+  components: { BaseContentHeadline },
   props: {
     tag: {
       type: String,
@@ -55,13 +53,6 @@ export default {
       type: String,
       default: 'Lorem Subline'
     }
-  },
-  computed: {
-    styleClasses () {
-      const classes = {};
-      classes[`headline--${this.tag}`] = true;
-      return classes;
-    }
   }
 };
 </script>
@@ -81,7 +72,7 @@ export default {
     /* empty */
   }
 
-  &.headline--h2 {
+  &h2 {
     & .overline {
       font-size: calc(12 / 375 * 100vw);
 
diff --git a/src/components/base/ContentContainer.vue b/src/components/base/ContentContainer.vue
new file mode 100644
index 000000000..1a016c6c2
--- /dev/null
+++ b/src/components/base/ContentContainer.vue
@@ -0,0 +1,174 @@
+<template>
+  <component
+    :is="currentTag"
+    v-bind="$attrs"
+    :data-debug="debug"
+    v-on="$listeners"
+  >
+    <slot name="before" />
+    <header v-if="$slots.header || $scopedSlots.header">
+      <slot name="header" />
+    </header>
+    <slot />
+    <footer v-if="$slots.footer || $scopedSlots.footer">
+      <slot name="footer" />
+    </footer>
+    <slot name="after" />
+    <pre
+      v-if="debug"
+      class="structure-debug"
+      :data-debug-parent-level="parentLevel"
+      :data-debug-level="currentLevel"
+      :data-debug-tag="currentTag"
+    />
+  </component>
+</template>
+
+<script>
+
+export default {
+
+  provide () {
+    return {
+      parentLevel: this.currentLevel
+    };
+  },
+
+  inject: {
+    parentLevel: {
+      from: 'parentLevel',
+      default: 0
+    }
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    tags: {
+      type: Array,
+      default () {
+        return ['article', 'section'];
+      }
+    }
+  },
+  data () {
+    return {
+      debug: false
+    };
+  },
+
+  computed: {
+
+    currentLevel () {
+      return this.parentLevel + 1;
+    },
+
+    currentTag () {
+      return ['div', 'main', 'div'][this.parentLevel] || this.tags[this.currentLevel % this.tags.length];
+    }
+  },
+
+  mounted () {
+    this.debug = 'debug-structure' in this.$route.query;
+  }
+
+};
+</script>
+
+<style lang="postcss" scoped>
+[data-debug] {
+  --color-structure-1-bg: #ff8360ff;
+  --color-structure-1-fb: #333;
+  --color-structure-2-bg: #e8e288ff;
+  --color-structure-2-fb: #333;
+  --color-structure-3-bg: #7dce82ff;
+  --color-structure-3-fb: #333;
+  --color-structure-4-bg: #ce5374;
+  --color-structure-4-fb: #333;
+  --color-structure-5-bg: #dbbbf5;
+  --color-structure-5-fb: #333;
+
+  position: relative;
+
+  & .structure-debug {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    box-sizing: border-box;
+    margin: 0;
+    pointer-events: none;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 10000;
+      box-sizing: border-box;
+      pointer-events: none;
+      content: "";
+      border: solid var(--tag-color-bg) 4px;
+    }
+
+    &::after {
+      position: absolute;
+      z-index: 10000;
+      padding: 0.8em 0.4em;
+      font-family: monospace;
+      font-size: 11px;
+      font-weight: bold;
+      color: var(--tag-color-fg);
+      pointer-events: none;
+      content: attr(data-debug-tag) " - pLevel: " attr(data-debug-parent-level) " - Level: " attr(data-debug-level);
+      background: var(--tag-color-bg);
+    }
+  }
+
+}
+
+.structure-debug[data-debug-tag="article"] {
+  --tag-color-fg: var(--color-structure-2-fg);
+  --tag-color-bg: var(--color-structure-2-bg);
+
+  &::after {
+    top: 0;
+    right: 0;
+  }
+}
+
+.structure-debug[data-debug-tag="section"] {
+  --tag-color-fg: var(--color-structure-3-fg);
+  --tag-color-bg: var(--color-structure-3-bg);
+
+  &::after {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.structure-debug[data-debug-tag="main"] {
+  --tag-color-fg: var(--color-structure-1-fg);
+  --tag-color-bg: var(--color-structure-1-bg);
+
+  &::after {
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.structure-debug[data-debug-tag="div"] {
+  --tag-color-fg: var(--color-structure-5-fg);
+  --tag-color-bg: var(--color-structure-5-bg);
+
+  &::after {
+    top: 0;
+    left: 0;
+  }
+}
+
+</style>
diff --git a/src/components/base/ContentHeadline.vue b/src/components/base/ContentHeadline.vue
new file mode 100644
index 000000000..943629a1c
--- /dev/null
+++ b/src/components/base/ContentHeadline.vue
@@ -0,0 +1,107 @@
+<template>
+  <component
+    :is="tag || `h${contextLevel}`"
+    v-font="font"
+    v-bind="$attrs"
+    :data-debug="debug"
+    v-on="$listeners"
+  >
+    <slot />
+    <pre v-if="debug" :data-debug-context-level="contextLevel" />
+  </component>
+</template>
+
+<script>
+
+export default {
+
+  inject: {
+    parentLevel: {
+      from: 'parentLevel',
+      default: 1
+    }
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    tag: {
+      type: String,
+      default: null
+    },
+    font: {
+      type: [Object, Array],
+      default () {
+        return [];
+      }
+    }
+  },
+
+  data () {
+    return { debug: false };
+  },
+
+  computed: {
+    contextLevel () {
+      return getMax((this.parentLevel - (this.parentLevel % 2)) / 2);
+    }
+  },
+
+  mounted () {
+    this.debug = 'debug-headline' in this.$route.query;
+  }
+
+};
+
+function getMax (number) {
+  return Math.max(1, Math.min(number, 6));
+}
+
+</script>
+
+<style lang="postcss" scoped>
+* {
+  margin: 0;
+}
+
+[data-debug] {
+  position: relative;
+
+  & pre {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    margin: 0;
+    font-family: monospace;
+    font-weight: normal;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-sizing: border-box;
+      pointer-events: none;
+      content: "";
+      border: dotted #333 2px;
+    }
+
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      z-index: 10000;
+      padding: 5px;
+      font-size: 13px;
+      color: white;
+      letter-spacing: 0.1em;
+      content: "H" attr(data-debug-context-level);
+      background: #333;
+    }
+  }
+}
+</style>
diff --git a/src/components/layouts/DefaultContainer.vue b/src/components/layouts/LostContainer.vue
similarity index 88%
rename from src/components/layouts/DefaultContainer.vue
rename to src/components/layouts/LostContainer.vue
index 44f67cee9..573f63fb2 100644
--- a/src/components/layouts/DefaultContainer.vue
+++ b/src/components/layouts/LostContainer.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="tag"
-    class="layouts-default-container"
+    class="layouts-lost-container"
   >
     <slot name="background" />
     <slot name="container">
@@ -32,13 +32,9 @@ export default {
 </script>
 
 <style lang="postcss">
-.layouts-default-container {
+.layouts-lost-container {
   margin: 40px 0;
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   & .lost-flex-container {
     display: flex;
 
diff --git a/src/components/layouts/Modal.vue b/src/components/layouts/Modal.vue
index 3162a1776..55f150f44 100644
--- a/src/components/layouts/Modal.vue
+++ b/src/components/layouts/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="modal-toggle">
-    <layout-default-container
+    <layout-lost-container
       v-show="opened"
       class="layout-modal"
       :class="styleClasses"
@@ -21,17 +21,17 @@
           </div>
         </div>
       </template>
-    </layout-default-container>
+    </layout-lost-container>
   </transition>
 </template>
 
 <script>
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
 
 import svgIconClose from '@/assets/svg/icons/menu-close.svg?vue-template';
 
 export default {
-  components: { LayoutDefaultContainer, svgIconClose },
+  components: { LayoutLostContainer, svgIconClose },
   props: {
     options: {
       type: Object,
diff --git a/src/components/layouts/ScrollContainer.vue b/src/components/layouts/ScrollContainer.vue
new file mode 100644
index 000000000..c7515450c
--- /dev/null
+++ b/src/components/layouts/ScrollContainer.vue
@@ -0,0 +1,123 @@
+<template>
+  <div
+    ref="scrollContainer"
+    class="scroll-container"
+    :style="style"
+  >
+    <slot name="before" />
+    <div>
+      <div>
+        <slot v-bind="{progress}">
+          <div class="example-container">
+            Container ({{ progress }})
+          </div>
+        </slot>
+      </div>
+    </div>
+    <slot name="after" />
+  </div>
+</template>
+
+<script>
+import { ipoint, calc } from '@js-basics/vector';
+import { getElBounds, getScrollPosition } from '@/utils/dom';
+
+export default {
+  props: {
+    rows: {
+      type: Number,
+      default: 3
+    }
+  },
+  data () {
+    return {
+      subscriptions: [],
+      progress: ipoint(0, 0),
+      offset: ipoint(0, 0),
+      bounds: {
+        position: ipoint(0, 0),
+        dimension: ipoint(0, 0)
+      }
+    };
+  },
+  computed: {
+    style () {
+      return {
+        '--rows': this.rows,
+        ...this.progress.toCSSVars('progress')
+      };
+    }
+  },
+
+  watch: {
+    progress () {
+      this.$emit('progress', this.progress);
+    }
+  },
+
+  async mounted () {
+    const [
+      { resizeObserver },
+      { scrollObserver }
+    ] = await Promise.all([
+      import('@/service/window'),
+      import('@/service/scroll')
+    ]);
+    this.subscriptions = [
+      resizeObserver.subscribe(this.onResize.bind(this)),
+      scrollObserver.subscribe(this.onScroll.bind(this))
+    ];
+  },
+
+  destroyed () {
+    this.subscriptions.forEach(subscribe => subscribe.unsubscribe());
+  },
+
+  methods: {
+
+    onResize () {
+      this.bounds = getElBounds(this.$el);
+      this.offset = calc(() => this.bounds.position + getScrollPosition());
+    },
+
+    onScroll (position) {
+      const currentPosition = calc(() => Math.max(position - this.offset, 0));
+      this.progress = calc(() => Math.min(currentPosition / (this.bounds.dimension - (this.bounds.dimension / this.rows)), 1));
+    }
+
+  }
+};
+
+</script>
+
+<style lang="postcss">
+.scroll-container {
+  position: relative;
+
+  & > div {
+    height: calc(var(--rows) * 100vh);
+
+    & > div {
+      position: sticky;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: calc(100% / var(--rows));
+    }
+  }
+}
+
+.example-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: em(48);
+}
+
+</style>
diff --git a/src/components/layouts/TwoColumnContainer.vue b/src/components/layouts/TwoColumnContainer.vue
index f7d5f6aff..35895d107 100644
--- a/src/components/layouts/TwoColumnContainer.vue
+++ b/src/components/layouts/TwoColumnContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout-default-container
+  <layout-lost-container
     class="layout-two-column-container"
     :class="styleClasses"
     :visible="options.visible"
@@ -17,16 +17,16 @@
         </div>
       </div>
     </template>
-  </layout-default-container>
+  </layout-lost-container>
 </template>
 
 <script>
 
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
 
 export default {
 
-  components: { LayoutDefaultContainer },
+  components: { LayoutLostContainer },
 
   props: {
 
diff --git a/src/components/molecules/ContentArticle.vue b/src/components/molecules/Content.vue
similarity index 63%
rename from src/components/molecules/ContentArticle.vue
rename to src/components/molecules/Content.vue
index 727cb5a16..e32736ed0 100644
--- a/src/components/molecules/ContentArticle.vue
+++ b/src/components/molecules/Content.vue
@@ -1,24 +1,29 @@
 <template>
-  <article class="molecule-article">
-    <header v-if="headline">
+  <base-content-container class="molecule-article">
+    <template #header>
       <atom-headline
+        v-if="headline"
         v-bind="headline"
-        tag="h2"
       />
-    </header>
-    <slot>
-      <atom-rich-text :content="content" />
-    </slot>
-  </article>
+    </template>
+    <template #default>
+      <slot>
+        <atom-rich-text :content="content" />
+      </slot>
+    </template>
+  </base-content-container>
 </template>
 
 <script>
+import BaseContentContainer from '../base/ContentContainer';
 import AtomHeadline from '@/components/atoms/Headline';
 import AtomRichText from '@/components/atoms/RichText';
 
 export default {
   components: {
-    AtomHeadline, AtomRichText
+    AtomHeadline,
+    AtomRichText,
+    BaseContentContainer
   },
 
   props: {
diff --git a/src/components/organisms/ArticleText.vue b/src/components/organisms/FullText.vue
similarity index 55%
rename from src/components/organisms/ArticleText.vue
rename to src/components/organisms/FullText.vue
index 4ee27554a..b36cfefd4 100644
--- a/src/components/organisms/ArticleText.vue
+++ b/src/components/organisms/FullText.vue
@@ -1,20 +1,18 @@
 <template>
-  <layout-default-container
-    class="organism-text"
-  >
-    <molecule-content-article v-bind="article" />
-  </layout-default-container>
+  <layout-lost-container class="organism-full-text">
+    <molecule-content v-bind="article" />
+  </layout-lost-container>
 </template>
 
 <script>
 
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
-import MoleculeContentArticle from '@/components/molecules/ContentArticle';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
+import MoleculeContent from '@/components/molecules/Content';
 
 export default {
   components: {
-    LayoutDefaultContainer,
-    MoleculeContentArticle
+    LayoutLostContainer,
+    MoleculeContent
   },
 
   props: {
@@ -36,7 +34,7 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.organism-text {
+.organism-full-text {
   /* empty */
 }
 </style>
diff --git a/src/components/organisms/SinglePicture.vue b/src/components/organisms/SinglePicture.vue
index 5dcb7dfe1..a2ee89f15 100644
--- a/src/components/organisms/SinglePicture.vue
+++ b/src/components/organisms/SinglePicture.vue
@@ -1,20 +1,20 @@
 <template>
-  <layout-default-container
+  <layout-lost-container
     class="organism-picture"
   >
     <template #container>
       <speedkit-picture v-bind="picture" />
     </template>
-  </layout-default-container>
+  </layout-lost-container>
 </template>
 
 <script>
 import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
 
 export default {
   components: {
-    LayoutDefaultContainer,
+    LayoutLostContainer,
     SpeedkitPicture
   },
 
diff --git a/src/components/organisms/SingleVideo.vue b/src/components/organisms/SingleVideo.vue
index eca2681ca..04ce4f0f2 100644
--- a/src/components/organisms/SingleVideo.vue
+++ b/src/components/organisms/SingleVideo.vue
@@ -1,19 +1,19 @@
 <template>
-  <layout-default-container
+  <layout-lost-container
     class="organism-single-video"
   >
     <template slot="container">
       <atom-responsive-video v-bind="video" />
     </template>
-  </layout-default-container>
+  </layout-lost-container>
 </template>
 
 <script>
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
 import AtomResponsiveVideo from '@/components/atoms/ResponsiveVideo';
 
 export default {
-  components: { LayoutDefaultContainer, AtomResponsiveVideo },
+  components: { LayoutLostContainer, AtomResponsiveVideo },
   props: {
 
     video: {
diff --git a/src/components/organisms/StagePicture.vue b/src/components/organisms/StagePicture.vue
index c3e8fdcde..a55e3cf78 100644
--- a/src/components/organisms/StagePicture.vue
+++ b/src/components/organisms/StagePicture.vue
@@ -1,23 +1,30 @@
 <template>
-  <layout-default-container
+  <base-content-container
     class="organism-stage-picture"
   >
-    <template slot="background">
-      <speedkit-picture
-        v-bind="picture"
-      />
-    </template>
-  </layout-default-container>
+    <speedkit-picture
+      v-bind="picture"
+    />
+    <layout-lost-container>
+      <base-content-headline class="headline">
+        {{ headline }}
+      </base-content-headline>
+    </layout-lost-container>
+  </base-content-container>
 </template>
 
 <script>
 import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
+import BaseContentHeadline from '@/components/base/ContentHeadline';
+import BaseContentContainer from '@/components/base/ContentContainer';
 
 export default {
   components: {
-    LayoutDefaultContainer,
-    SpeedkitPicture
+    LayoutLostContainer,
+    SpeedkitPicture,
+    BaseContentHeadline,
+    BaseContentContainer
   },
 
   props: {
@@ -31,7 +38,39 @@ export default {
           ]
         };
       }
+    },
+    headline: {
+      type: String,
+      default: 'Stage Picture'
     }
   }
 };
 </script>
+
+<style lang="postcss" scoped>
+.organism-stage-picture {
+  position: relative;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.layouts-lost-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: em(20) 0;
+  padding-top: em(60);
+  margin: 0;
+  color: white;
+  text-align: center;
+  background: rgb(0 0 0);
+  background: linear-gradient(0deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 0%) 50%);
+}
+
+.headline {
+  lost-column: 12/12;
+  margin: 0;
+}
+</style>
diff --git a/src/components/organisms/StageVideo.vue b/src/components/organisms/StageVideo.vue
index 192898407..937f3cbd7 100644
--- a/src/components/organisms/StageVideo.vue
+++ b/src/components/organisms/StageVideo.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout-default-container
+  <layout-lost-container
     class="organism-stage-video"
   >
     <template slot="background">
@@ -8,16 +8,16 @@
         v-bind="video"
       />
     </template>
-  </layout-default-container>
+  </layout-lost-container>
 </template>
 
 <script>
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
 import AtomResponsiveVideo from '@/components/atoms/ResponsiveVideo';
 
 export default {
   components: {
-    LayoutDefaultContainer,
+    LayoutLostContainer,
     AtomResponsiveVideo
   },
 
@@ -53,6 +53,10 @@ export default {
 
 <style lang="postcss" scoped>
 .organism-stage-video {
+  &:first-child {
+    margin-top: 0;
+  }
+
   position: relative;
   width: 100%;
 }
diff --git a/src/components/organisms/TestScrollContainerA.vue b/src/components/organisms/TestScrollContainerA.vue
new file mode 100644
index 000000000..0e6e2b950
--- /dev/null
+++ b/src/components/organisms/TestScrollContainerA.vue
@@ -0,0 +1,233 @@
+<template>
+  <scroll-container v-bind="$attrs" :rows="3" v-on="$listeners" @progress="onProgress">
+    <template #default="{progress}">
+      <div class="test test-1">
+        <h3>Headline 1</h3>
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+      </div>
+      <div class="test test-2">
+        <h3>Headline 2</h3>
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+      </div>
+      <div class="test test-3">
+        <h3>Headline 3</h3>
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+      </div>
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 1026.3 72.1"
+        xml:space="preserve"
+      >
+        <path
+          d="M0.6,48l13.5-1.3c0.8,4.5,2.5,7.9,4.9,10s5.8,3.2,10.1,3.2
+ c4.5,0,7.8-0.9,10.1-2.8c2.3-1.9,3.4-4.1,3.4-6.6c0-1.6-0.5-3-1.4-4.1c-1-1.1-2.6-2.1-5-3c-1.6-0.6-5.3-1.6-11.1-3
+ c-7.4-1.8-12.7-4.1-15.7-6.8C5.2,29.7,3,25.1,3,19.7c0-3.5,1-6.8,3-9.8c2-3,4.8-5.4,8.6-7c3.7-1.6,8.2-2.4,13.5-2.4
+ c8.6,0,15.1,1.9,19.5,5.7s6.6,8.8,6.9,15.1l-13.9,0.6c-0.6-3.5-1.9-6.1-3.8-7.6c-2-1.5-4.9-2.3-8.8-2.3c-4,0-7.2,0.8-9.5,2.5
+ c-1.5,1.1-2.2,2.5-2.2,4.3c0,1.6,0.7,3,2.1,4.2c1.8,1.5,6,3,12.8,4.6s11.7,3.2,15,4.9s5.8,4,7.6,7s2.7,6.6,2.7,10.9
+ c0,3.9-1.1,7.6-3.3,11.1c-2.2,3.4-5.3,6-9.3,7.7c-4,1.7-9,2.5-15,2.5c-8.7,0-15.4-2-20-6C4.2,61.6,1.5,55.7,0.6,48z"
+        />
+        <path
+          d="M85.6,70.4L61.1,1.7h15l17.4,50.9l16.8-50.9h14.7l-24.6,68.7H85.6z"
+        />
+        <path
+          d="M164.1,45.1V33.5H194v27.4c-2.9,2.8-7.1,5.3-12.6,7.4
+ c-5.5,2.1-11.1,3.2-16.8,3.2c-7.2,0-13.5-1.5-18.8-4.5s-9.4-7.3-12-12.9c-2.7-5.6-4-11.7-4-18.3c0-7.2,1.5-13.5,4.5-19.1
+ s7.4-9.8,13.2-12.8c4.4-2.3,9.9-3.4,16.5-3.4c8.5,0,15.2,1.8,20,5.4c4.8,3.6,7.9,8.5,9.3,14.8l-13.8,2.6c-1-3.4-2.8-6-5.5-8
+ s-6-2.9-10-2.9c-6.1,0-10.9,1.9-14.5,5.8c-3.6,3.8-5.4,9.5-5.4,17.1c0,8.2,1.8,14.3,5.4,18.4c3.6,4.1,8.4,6.1,14.2,6.1
+ c2.9,0,5.8-0.6,8.7-1.7c2.9-1.1,5.4-2.5,7.5-4.1v-8.7H164.1z"
+        />
+        <path
+          d="M233.5,70.4V1.7h22.3c8.4,0,13.9,0.3,16.5,1c3.9,1,7.2,3.3,9.9,6.7
+ s4,7.9,4,13.4c0,4.2-0.8,7.8-2.3,10.6s-3.5,5.1-5.8,6.8s-4.8,2.7-7.2,3.3c-3.3,0.7-8.1,1-14.4,1h-9v25.9H233.5z M247.4,13.3v19.5
+ h7.6c5.5,0,9.1-0.4,11-1.1s3.3-1.8,4.3-3.4s1.6-3.3,1.6-5.3c0-2.5-0.7-4.6-2.2-6.2s-3.3-2.6-5.6-3c-1.7-0.3-5-0.5-10-0.5H247.4z"
+        />
+        <path
+          d="M352.4,70.4h-15.1l-6-15.6h-27.5l-5.7,15.6h-14.7l26.8-68.7h14.7
+ L352.4,70.4z M326.8,43.2l-9.5-25.5l-9.3,25.5H326.8z"
+        />
+        <path d="M368.1,70.4V13.3h-20.4V1.7h54.6v11.6h-20.3v57.1H368.1z" />
+        <path
+          d="M411.3,70.4V1.7h13.9v27h27.2v-27h13.9v68.7h-13.9v-30h-27.2v30
+ H411.3z"
+        />
+        <path
+          d="M565.6,70.4h-15.1l-6-15.6h-27.5l-5.7,15.6h-14.7l26.8-68.7h14.7
+ L565.6,70.4z M540.1,43.2l-9.5-25.5l-9.3,25.5H540.1z"
+        />
+        <path
+          d="M573.1,70.4V1.7h13.5l28.1,45.9V1.7h12.9v68.7h-13.9L586,25.6v44.8
+ H573.1z"
+        />
+        <path d="M641.9,70.4V1.7h13.9v68.7H641.9z" />
+        <path
+          d="M668.8,70.4V1.7h20.8L702,48.5l12.3-46.9h20.8v68.7h-12.9V16.3
+ l-13.6,54.1h-13.4l-13.6-54.1v54.1H668.8z"
+        />
+        <path
+          d="M810.9,70.4h-15.1l-6-15.6h-27.5l-5.7,15.6H742l26.8-68.7h14.7
+ L810.9,70.4z M785.4,43.2l-9.5-25.5l-9.3,25.5H785.4z"
+        />
+        <path d="M826.6,70.4V13.3h-20.4V1.7h54.6v11.6h-20.3v57.1H826.6z" />
+        <path d="M869.4,70.4V1.7h13.9v68.7H869.4z" />
+        <path
+          d="M893.7,36.5c0-7,1-12.9,3.1-17.6c1.6-3.5,3.7-6.6,6.4-9.4
+ s5.7-4.8,8.9-6.2c4.3-1.8,9.2-2.7,14.8-2.7c10.1,0,18.2,3.1,24.3,9.4s9.1,15,9.1,26.2c0,11.1-3,19.8-9,26s-14.1,9.4-24.2,9.4
+ c-10.2,0-18.3-3.1-24.4-9.4S893.7,47.4,893.7,36.5z M908,36c0,7.8,1.8,13.7,5.4,17.7s8.2,6,13.7,6s10.1-2,13.6-6s5.3-10,5.3-17.9
+ c0-7.9-1.7-13.8-5.2-17.6s-8-5.8-13.8-5.8s-10.3,2-13.8,5.9S908,28.1,908,36z"
+        />
+        <path
+          d="M971.3,70.4V1.7h13.5l28.1,45.9V1.7h12.9v68.7h-13.9l-27.7-44.8
+ v44.8H971.3z"
+        />
+      </svg>
+      <div :style="{'--progress-y': progress.y}" class="progress" />
+    </template>
+  </scroll-container>
+</template>
+
+<script>
+import anime from 'animejs';
+import ScrollContainer from '@/components/layouts/ScrollContainer';
+
+export default {
+
+  components: { ScrollContainer },
+
+  data () {
+    return {
+      timeline: null,
+      paths: []
+    };
+  },
+
+  destroyed () {
+    typeof this.timeline?.destroy === 'function' && this.timeline?.destroy();
+  },
+
+  mounted () {
+    this.paths = Array.from(this.$el.querySelectorAll('path'));
+
+    // const path = this.$refs.svg.querySelector('path');
+    //
+
+    const timeline = this.timeline = anime.timeline({
+      autoplay: false,
+      easing: 'linear'
+    });
+
+    timeline.add({
+      targets: this.$el.querySelectorAll('.test-2'),
+      duration: 600,
+      opacity: [0, 1]
+    });
+
+    timeline.add({
+      targets: this.$el.querySelectorAll('.test-3'),
+      duration: 600,
+      opacity: [0, 1]
+    });
+  },
+
+  methods: {
+    onProgress (value) {
+      this.animateSvgPath(value.y, 0.9);
+      const duration = Math.round(this.timeline.duration * value.y);
+      this.timeline.seek(duration);
+    },
+
+    animateSvgPath (progress, offset = 1) {
+      this.paths.forEach((path) => {
+        const totalLength = path.getTotalLength();
+        path.style.strokeDasharray = totalLength;
+        path.style.strokeDashoffset = totalLength - totalLength * (Math.min(progress / offset, 1));
+      });
+    }
+  }
+
+};
+
+</script>
+
+<style lang="postcss" scoped>
+.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(var(--progress-y) * 100%);
+  height: 1em;
+  background: black;
+
+}
+
+.test {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #333;
+
+  &.test-1 {
+    background: #ffffba;
+  }
+
+  &.test-2 {
+    background: #bae1ff;
+  }
+
+  &.test-3 {
+    background: #ffb3ba;
+  }
+
+  &:not(:first-child) {
+    opacity: 0;
+  }
+
+  & h3 {
+    font-size: em(48);
+  }
+
+  & p {
+    font-size: em(32);
+    text-align: center;
+  }
+
+  & .progress {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1em;
+
+    &::before {
+      display: block;
+      width: calc(var(--progress-y) * 100%);
+      height: 100%;
+      content: "";
+      background: black;
+    }
+  }
+}
+
+svg {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  & path {
+    fill: none;
+    stroke: black;
+    stroke-dashoffset: var(--progress-y);
+  }
+}
+
+</style>
diff --git a/src/components/organisms/ArticleTextImage.vue b/src/components/organisms/TextImage.vue
similarity index 71%
rename from src/components/organisms/ArticleTextImage.vue
rename to src/components/organisms/TextImage.vue
index 715a5811a..96e023bdb 100644
--- a/src/components/organisms/ArticleTextImage.vue
+++ b/src/components/organisms/TextImage.vue
@@ -1,27 +1,31 @@
 <template>
-  <layout-two-column-container
-    class="organism-text-image"
-    :mirror="mirror"
-  >
-    <template #left>
-      <speedkit-picture v-bind="picture" />
-    </template>
-    <template #right>
-      <molecule-content-article v-bind="{headline: {overline, headline, subline}, content}" />
-    </template>
-  </layout-two-column-container>
+  <base-content-container>
+    <layout-two-column-container
+      class="organism-text-image"
+      :mirror="mirror"
+    >
+      <template #left>
+        <speedkit-picture v-bind="picture" />
+      </template>
+      <template #right>
+        <molecule-content v-bind="{headline: {overline, headline, subline}, content}" />
+      </template>
+    </layout-two-column-container>
+  </base-content-container>
 </template>
 
 <script>
 
 import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
+import BaseContentContainer from '@/components/base/ContentContainer';
 import LayoutTwoColumnContainer from '@/components/layouts/TwoColumnContainer';
-import MoleculeContentArticle from '@/components/molecules/ContentArticle';
+import MoleculeContent from '@/components/molecules/Content';
 
 export default {
   components: {
+    BaseContentContainer,
     LayoutTwoColumnContainer,
-    MoleculeContentArticle,
+    MoleculeContent,
     SpeedkitPicture
   },
 
diff --git a/src/components/page/Footer.vue b/src/components/page/Footer.vue
index 8b15494a9..af2a0445c 100755
--- a/src/components/page/Footer.vue
+++ b/src/components/page/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout-default-container
+  <layout-lost-container
     class="page-footer"
     tag="footer"
   >
@@ -9,16 +9,16 @@
         type="page-footer"
       />
     </nav>
-  </layout-default-container>
+  </layout-lost-container>
 </template>
 
 <script>
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
 import LinkList from '~/components/molecules/LinkList';
 
 export default {
   components: {
-    LayoutDefaultContainer,
+    LayoutLostContainer,
     LinkList
   },
   props: {
diff --git a/src/components/page/Header.vue b/src/components/page/Header.vue
index 9af71858d..ac3a844b2 100755
--- a/src/components/page/Header.vue
+++ b/src/components/page/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout-default-container
+  <layout-lost-container
     class="page-header"
     :class="styleClasses"
     tag="header"
@@ -11,14 +11,14 @@
         </atom-link-to>
       </div>
     </template>
-  </layout-default-container>
+  </layout-lost-container>
 </template>
 
 <script>
-import LayoutDefaultContainer from '@/components/layouts/DefaultContainer';
+import LayoutLostContainer from '@/components/layouts/LostContainer';
 import AtomLinkTo from '@/components/atoms/LinkTo';
 export default {
-  components: { LayoutDefaultContainer, AtomLinkTo },
+  components: { LayoutLostContainer, AtomLinkTo },
   props: {
     sticky: {
       type: Boolean,
diff --git a/src/components/page/InfoLayer.vue b/src/components/page/InfoLayer.vue
index a3db3a157..592dae9eb 100644
--- a/src/components/page/InfoLayer.vue
+++ b/src/components/page/InfoLayer.vue
@@ -11,11 +11,11 @@
         <li id="nuxt-speedkit-message-unsupported-browser">
           outdated browser
         </li>
-        <li id="nuxt-speedkit-message-outdated-device">
-          outdated device
+        <li id="nuxt-speedkit-message-reduced-bandwidth">
+          reduced-bandwidth
         </li>
-        <li id="nuxt-speedkit-message-slow-connection">
-          slow connection
+        <li id="nuxt-speedkit-message-weak-hardware">
+          weak hardware
         </li>
       </ul>
       <div class="buttons">
diff --git a/src/content/de/index.json b/src/content/de/index.json
index c6b6129cb..87b47220a 100644
--- a/src/content/de/index.json
+++ b/src/content/de/index.json
@@ -30,11 +30,12 @@
               }
             }
           ]
-        }
+        },
+        "headline": "gp-vue-boilerplate"
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
@@ -45,7 +46,7 @@
       }
     },
     {
-      "component": "ArticleTextImage",
+      "component": "TextImage",
       "data": {
         "picture": {
           "title": "Text Image",
@@ -66,9 +67,7 @@
             }
           ]
         },
-        "article": {
-          "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
-        }
+        "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
       }
     },
     {
@@ -76,11 +75,9 @@
       "data": {}
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
-        "article": {
-          "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
-        }
+        "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
       }
     },
     {
diff --git a/src/content/de/p/kontakt.json b/src/content/de/p/kontakt.json
index 1e94c920a..4765f4781 100644
--- a/src/content/de/p/kontakt.json
+++ b/src/content/de/p/kontakt.json
@@ -10,7 +10,7 @@
   "title": "Kontakt",
   "components": [
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
diff --git a/src/content/de/p/nutzungsbedingungen.json b/src/content/de/p/nutzungsbedingungen.json
index ac9b58c18..f74c305c0 100644
--- a/src/content/de/p/nutzungsbedingungen.json
+++ b/src/content/de/p/nutzungsbedingungen.json
@@ -95,7 +95,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
@@ -106,7 +106,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": null,
diff --git a/src/content/de/p/projekte/index.json b/src/content/de/p/projekte/index.json
index d361f7b8f..fbf5dc09c 100644
--- a/src/content/de/p/projekte/index.json
+++ b/src/content/de/p/projekte/index.json
@@ -10,7 +10,7 @@
   "title": "Projekte",
   "components": [
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
@@ -23,7 +23,7 @@
       }
     },
     {
-      "component": "ArticleTextImage",
+      "component": "TextImage",
       "data": {
         "options": {
           "mirror": true
@@ -54,7 +54,7 @@
       }
     },
     {
-      "component": "ArticleTextImage",
+      "component": "TextImage",
       "data": {
         "overline": null,
         "headline": "Projekt 2",
diff --git a/src/content/de/p/projekte/projekt-1.json b/src/content/de/p/projekte/projekt-1.json
index b72c4f152..4bd093d8e 100644
--- a/src/content/de/p/projekte/projekt-1.json
+++ b/src/content/de/p/projekte/projekt-1.json
@@ -36,7 +36,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
diff --git a/src/content/de/p/projekte/projekt-2.json b/src/content/de/p/projekte/projekt-2.json
index 6bf1d347d..7cfbba826 100644
--- a/src/content/de/p/projekte/projekt-2.json
+++ b/src/content/de/p/projekte/projekt-2.json
@@ -36,7 +36,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
diff --git a/src/content/de/p/rechtliche-hinweise.json b/src/content/de/p/rechtliche-hinweise.json
index d9a394f12..1e9dddb00 100644
--- a/src/content/de/p/rechtliche-hinweise.json
+++ b/src/content/de/p/rechtliche-hinweise.json
@@ -95,7 +95,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
@@ -106,7 +106,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": null,
diff --git a/src/content/de/p/ueber-uns.json b/src/content/de/p/ueber-uns.json
index aac4f4429..ba3e222f6 100644
--- a/src/content/de/p/ueber-uns.json
+++ b/src/content/de/p/ueber-uns.json
@@ -22,7 +22,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
diff --git a/src/content/en/index.json b/src/content/en/index.json
index c6b6129cb..87b47220a 100644
--- a/src/content/en/index.json
+++ b/src/content/en/index.json
@@ -30,11 +30,12 @@
               }
             }
           ]
-        }
+        },
+        "headline": "gp-vue-boilerplate"
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
@@ -45,7 +46,7 @@
       }
     },
     {
-      "component": "ArticleTextImage",
+      "component": "TextImage",
       "data": {
         "picture": {
           "title": "Text Image",
@@ -66,9 +67,7 @@
             }
           ]
         },
-        "article": {
-          "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
-        }
+        "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
       }
     },
     {
@@ -76,11 +75,9 @@
       "data": {}
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
-        "article": {
-          "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
-        }
+        "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
       }
     },
     {
diff --git a/src/content/en/p/about.json b/src/content/en/p/about.json
index b40b2b8c2..6b5c152ef 100644
--- a/src/content/en/p/about.json
+++ b/src/content/en/p/about.json
@@ -22,7 +22,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "content": "<p>Laboriosam, blanditiis non ducimus tortor. Voluptate reprehenderit placerat voluptates itaque cillum sociosqu, mauris rem nesciunt ipsam aliqua, pharetra odit animi distinctio! Aut, orci euismod? Malesuada, tempore sit corporis nostrud posuere? Repellat hac eiusmod tellus. Ut bibendum? Convallis cillum aliquam, voluptatum.</p><p>Excepteur condimentum ac voluptate ea fugit nihil alias molestias ullamco architecto ipsam, sequi magnis cillum, etiam. Assumenda eveniet! Adipisicing architecto quibusdam primis hymenaeos ultrices! Quas doloribus libero? Class! Occaecati rerum arcu, blanditiis illum elementum curabitur adipiscing! Elementum hendrerit morbi excepteur.</p>"
diff --git a/src/content/en/p/contact.json b/src/content/en/p/contact.json
index 1e94c920a..4765f4781 100644
--- a/src/content/en/p/contact.json
+++ b/src/content/en/p/contact.json
@@ -10,7 +10,7 @@
   "title": "Kontakt",
   "components": [
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
diff --git a/src/content/en/p/legals.json b/src/content/en/p/legals.json
index c4ec367d1..f0481449b 100644
--- a/src/content/en/p/legals.json
+++ b/src/content/en/p/legals.json
@@ -95,7 +95,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
@@ -106,7 +106,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": null,
diff --git a/src/content/en/p/projects/index.json b/src/content/en/p/projects/index.json
index 193ffab2d..9af0138f7 100644
--- a/src/content/en/p/projects/index.json
+++ b/src/content/en/p/projects/index.json
@@ -10,7 +10,7 @@
   "title": "Projects",
   "components": [
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
@@ -23,7 +23,7 @@
       }
     },
     {
-      "component": "ArticleTextImage",
+      "component": "TextImage",
       "data": {
         "options": {
           "mirror": true
@@ -54,7 +54,7 @@
       }
     },
     {
-      "component": "ArticleTextImage",
+      "component": "TextImage",
       "data": {
         "overline": null,
         "headline": "Project 2",
diff --git a/src/content/en/p/projects/project-1.json b/src/content/en/p/projects/project-1.json
index a53ee69a0..1dedd3ab2 100644
--- a/src/content/en/p/projects/project-1.json
+++ b/src/content/en/p/projects/project-1.json
@@ -36,7 +36,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
diff --git a/src/content/en/p/projects/project-2.json b/src/content/en/p/projects/project-2.json
index e0d612ac4..8b2e8272e 100644
--- a/src/content/en/p/projects/project-2.json
+++ b/src/content/en/p/projects/project-2.json
@@ -36,7 +36,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
diff --git a/src/content/en/p/terms.json b/src/content/en/p/terms.json
index bda523fd9..83b740b03 100644
--- a/src/content/en/p/terms.json
+++ b/src/content/en/p/terms.json
@@ -95,7 +95,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": {
@@ -106,7 +106,7 @@
       }
     },
     {
-      "component": "ArticleText",
+      "component": "FullText",
       "data": {
         "article": {
           "headline": null,
diff --git a/src/extends/Components.vue b/src/extends/Components.vue
index 3162a1a7a..3912d9db2 100644
--- a/src/extends/Components.vue
+++ b/src/extends/Components.vue
@@ -6,8 +6,8 @@ export default {
   components: {
     StagePicture: speedkitHydrate(() => import('@/components/organisms/StagePicture')),
     StageVideo: speedkitHydrate(() => import('@/components/organisms/StageVideo')),
-    ArticleText: speedkitHydrate(() => import('@/components/organisms/ArticleText')),
-    ArticleTextImage: speedkitHydrate(() => import('@/components/organisms/ArticleTextImage')),
+    FullText: speedkitHydrate(() => import('@/components/organisms/FullText')),
+    TextImage: speedkitHydrate(() => import('@/components/organisms/TextImage')),
     SinglePicture: speedkitHydrate(() => import('@/components/organisms/SinglePicture')),
     SingleVideo: speedkitHydrate(() => import('@/components/organisms/SingleVideo'))
   }
diff --git a/src/extends/Content.vue b/src/extends/Content.vue
index e7d4910f2..212b45240 100644
--- a/src/extends/Content.vue
+++ b/src/extends/Content.vue
@@ -1,21 +1,30 @@
 
 <template>
-  <div class="content">
+  <base-content-container class="content">
     <component
       :is="item.component"
-      v-for="(item, index) in components"
+      v-for="(item, index) in components.slice(0,1)"
       :key="index"
       v-bind="item.data"
-      :critical="index < 1"
+      critical
     />
-  </div>
+    <base-content-container>
+      <component
+        :is="item.component"
+        v-for="(item, index) in components.slice(1)"
+        :key="index"
+        v-bind="item.data"
+      />
+    </base-content-container>
+  </base-content-container>
 </template>
 
 <script>
 import ComponentsExtend from './Components';
+import BaseContentContainer from '@/components/base/ContentContainer';
 export default {
-  // scrollToTop: true,
 
+  components: { BaseContentContainer },
   extends: ComponentsExtend,
 
   async asyncData ({ $content, store, app, error, route }) {
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index edc6e69e4..c4a9e0a9c 100755
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,24 +1,28 @@
 <template>
-  <div>
-    <page-header
-      v-bind="layoutComponents.pageHeader"
-      sticky
-    />
-    <page-menu
-      ref="pageMenu"
-      v-bind="layoutComponents.pageMenu"
-      :opened="!preventMenuOpened"
-    />
-    <page-menu-button
-      v-bind="layoutComponents.pageMenuButton"
-      @click.native="onClickMenuButton"
-    />
-    <main>
+  <base-content-container>
+    <template #before>
+      <page-header
+        v-bind="layoutComponents.pageHeader"
+        sticky
+      />
+    </template>
+    <template #default>
+      <page-menu
+        ref="pageMenu"
+        v-bind="layoutComponents.pageMenu"
+        :opened="!preventMenuOpened"
+      />
+      <page-menu-button
+        v-bind="layoutComponents.pageMenuButton"
+        @click.native="onClickMenuButton"
+      />
       <nuxt />
-    </main>
-    <page-footer v-bind="layoutComponents.pageFooter" />
-    <page-info-layer critical />
-  </div>
+    </template>
+    <template #after>
+      <page-footer v-bind="layoutComponents.pageFooter" />
+    </template>
+    <!-- <page-info-layer critical /> -->
+  </base-content-container>
 </template>
 
 <script>
@@ -29,6 +33,7 @@ import speedkitHydrate from 'nuxt-speedkit/hydrate';
 import PageInfoLayer from '@/components/page/InfoLayer';
 
 import PageMenuButton from '@/components/page/MenuButton';
+import BaseContentContainer from '@/components/base/ContentContainer';
 
 import layoutData from '@/content/layout.json';
 
@@ -37,10 +42,12 @@ const DATA_ATTR_PREVENT_SCROLLING = 'data-prevent-scrolling'; ;
 export default {
 
   components: {
+    BaseContentContainer,
     PageMenuButton,
     PageMenu: hydrateOnInteraction(() => import('@/components/page/Menu'), {
       event: 'hydrate'
     }),
+    // eslint-disable-next-line vue/no-unused-components
     PageInfoLayer,
     PageHeader: speedkitHydrate(() => import(/* webpackMode: "eager" */'@/components/page/Header')),
     PageFooter: speedkitHydrate(() => import('@/components/page/Footer'))
diff --git a/src/layouts/error.vue b/src/layouts/error.vue
index e18634840..6dec2ee50 100644
--- a/src/layouts/error.vue
+++ b/src/layouts/error.vue
@@ -47,7 +47,7 @@ export default {
           }
         },
         {
-          component: 'ArticleText',
+          component: 'Text',
           data: {
             article: {
               headline: {
diff --git a/src/service/scroll.js b/src/service/scroll.js
index 3850f3880..f20834078 100644
--- a/src/service/scroll.js
+++ b/src/service/scroll.js
@@ -8,7 +8,7 @@ export const scrollObserver = getScrollObserver();
 
 export function getScrollObserver (el = global) {
   if (!observer.has(el)) {
-    observer.set(el, fromEvent(el, 'scroll'));
+    observer.set(el, fromEvent(el, 'scroll', { passive: true }));
   }
   return observer.get(el)
     .pipe(
diff --git a/src/utils/dom.js b/src/utils/dom.js
new file mode 100644
index 000000000..63663c30a
--- /dev/null
+++ b/src/utils/dom.js
@@ -0,0 +1,10 @@
+import { ipoint } from '@js-basics/vector';
+
+export const getScrollPosition = () => ipoint(global.scrollX, global.scrollY);
+export const getElBounds = (el) => {
+  const { top, left, width, height } = el.getBoundingClientRect();
+  return {
+    position: ipoint(left, top),
+    dimension: ipoint(width, height)
+  };
+};