diff --git a/aiur.config.js b/aiur.config.js
index 20eec57..8acae5d 100644
--- a/aiur.config.js
+++ b/aiur.config.js
@@ -35,6 +35,7 @@ module.exports = {
         privacy: "./lib/views/privacy/privacy.md",
         site_notice: "./lib/views/site_notice/site_notice.md",
         trainings_overview: "./lib/views/trainings_overview/trainings_overview.md",
+        trainings_dates: "./lib/views/trainings_dates/trainings_dates.md",
         trainings_detail: "./lib/views/trainings_detail/trainings_detail.md",
         trainings_detail_isaqb: "./lib/views/trainings_detail/trainings_detail_isaqb.md",
         trainings_detail_power: "./lib/views/trainings_detail/trainings_detail_power.md",
diff --git a/lib/assets/images/illustrations/avatar-dummy.svg b/lib/assets/images/illustrations/avatar-dummy.svg
new file mode 100644
index 0000000..2d76a85
--- /dev/null
+++ b/lib/assets/images/illustrations/avatar-dummy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 110 110" id="Wall-E--Streamline-Kameleon.svg"><desc>Wall E Streamline Icon: https://streamlinehq.com</desc><path fill="#2ae78b" d="M55 110c30.3757 0 55 -24.6243 55 -55S85.3757 0 55 0 0 24.6243 0 55s24.6243 55 55 55Z" stroke-width="1"></path><path fill="#d4a263" d="M35 74.5c0 1.105 0.895 2 2 2h36c1.105 0 2 -0.895 2 -2V49c0 -1.105 -0.895 -2 -2 -2H37c-1.105 0 -2 0.895 -2 2v25.5Z" stroke-width="1"></path><path fill="#edbc7c" d="M55 47H37c-1.104 0 -2 0.896 -2 2v25.5c0 1.104 0.896 2 2 2h18V47Z" stroke-width="1"></path><path fill="#fff" d="M37 47c-1.105 0 -2 0.895 -2 2v7h40v-7c0 -1.105 -0.895 -2 -2 -2H37Z" stroke-width="1"></path><path fill="#e2e4e5" d="M73 47H55v9h20v-7c0 -1.104 -0.896 -2 -2 -2Z" stroke-width="1"></path><path fill="#d4a263" d="M56 27h-2l-3 20h8l-3 -20Z" stroke-width="1"></path><path fill="#edbc7c" d="m54 27 -3 20h4V27h-1Z" stroke-width="1"></path><path fill="#818284" d="m56.34 25.481 0.345 -2.031c0.165 0.033 2.824 0.566 14.779 2.959 4.989 0.999 8.359 6.057 7.361 11.046C77.949 41.827 74.082 45 69.629 45c-5.305 0 -15.619 -5.799 -13.289 -19.519Z" stroke-width="1"></path><path fill="#fff" d="M58.315 25.8159c0.215 0.043 8.863 1.775 12.76 2.555 3.897 0.78 6.593 4.692 5.792 8.692 -0.703 3.51 -3.786 5.937 -7.234 5.937 -4.121 0 -13.431 -4.741 -11.318 -17.184Z" stroke-width="1"></path><path fill="#818284" d="m53.66 25.481 -0.345 -2.031c-0.165 0.033 -2.824 0.566 -14.779 2.959 -4.989 0.999 -8.359 6.057 -7.361 11.046 0.876 4.372 4.743 7.545 9.196 7.545 5.305 0 15.619 -5.799 13.289 -19.519Z" stroke-width="1"></path><path fill="#fff" d="M51.685 25.8159c-0.215 0.043 -8.863 1.775 -12.76 2.555 -3.897 0.78 -6.593 4.692 -5.792 8.692 0.703 3.51 3.786 5.937 7.234 5.937 4.121 0 13.431 -4.741 11.318 -17.184Z" stroke-width="1"></path><path fill="#8e6134" d="M51 66H39v4h12v-4Z" stroke-width="1"></path><path fill="#4ac3af" d="M69 49h-6v5h6v-5Z" stroke-width="1"></path><path fill="#3e3e3f" d="M75 85c0 1.105 0.895 2 2 2h8c1.105 0 2 -0.895 2 -2V65c0 -1.105 -0.895 -2 -2 -2h-8c-1.105 0 -2 0.895 -2 2v20Z" stroke-width="1"></path><path fill="#5b5c5f" d="M87 65H75v4h12v-4Z" stroke-width="1"></path><path fill="#5b5c5f" d="M87 73H75v4h12v-4Z" stroke-width="1"></path><path fill="#5b5c5f" d="M87 81H75v4h12v-4Z" stroke-width="1"></path><path fill="#3e3e3f" d="M23 85c0 1.105 0.895 2 2 2h8c1.105 0 2 -0.895 2 -2V65c0 -1.105 -0.895 -2 -2 -2h-8c-1.105 0 -2 0.895 -2 2v20Z" stroke-width="1"></path><path fill="#5b5c5f" d="M35 65H23v4h12v-4Z" stroke-width="1"></path><path fill="#5b5c5f" d="M35 73H23v4h12v-4Z" stroke-width="1"></path><path fill="#5b5c5f" d="M35 81H23v4h12v-4Z" stroke-width="1"></path><path fill="#df2c2c" d="M67.375 70.25c1.4497 0 2.625 -1.1753 2.625 -2.625S68.8247 65 67.375 65s-2.625 1.1753 -2.625 2.625 1.1753 2.625 2.625 2.625Z" stroke-width="1"></path><path fill="#3e3e3f" d="M64.979 38.574c3.0276 0 5.482 -2.4544 5.482 -5.482s-2.4544 -5.482 -5.482 -5.482 -5.482 2.4544 -5.482 5.482 2.4544 5.482 5.482 5.482Z" stroke-width="1"></path><path fill="#fff" d="M65.238 34.258c0.9731 0 1.762 -0.7889 1.762 -1.762s-0.7889 -1.762 -1.762 -1.762 -1.762 0.7889 -1.762 1.762 0.7889 1.762 1.762 1.762Z" stroke-width="1"></path><path fill="#3e3e3f" d="M45.021 38.574c3.0276 0 5.482 -2.4544 5.482 -5.482s-2.4544 -5.482 -5.482 -5.482 -5.482 2.4544 -5.482 5.482 2.4544 5.482 5.482 5.482Z" stroke-width="1"></path><path fill="#fff" d="M44.762 34.258c0.9731 0 1.762 -0.7889 1.762 -1.762s-0.7889 -1.762 -1.762 -1.762S43 31.5229 43 32.496s0.7889 1.762 1.762 1.762Z" stroke-width="1"></path></svg>
\ No newline at end of file
diff --git a/lib/assets/stylesheets/application.scss b/lib/assets/stylesheets/application.scss
index 73c2aea..ae36a55 100644
--- a/lib/assets/stylesheets/application.scss
+++ b/lib/assets/stylesheets/application.scss
@@ -2,6 +2,7 @@
 Fundamental Stylings
 */
 
+@import "../../fundamentals/spacers";
 @import "../../fundamentals/helpers";
 @import "../../fundamentals/colors";
 @import "../../fundamentals/typography";
@@ -9,7 +10,6 @@ Fundamental Stylings
 @import "../../fundamentals/animations";
 @import "../../fundamentals/breakpoints";
 @import "../../fundamentals/shadows";
-@import "../../fundamentals/spacers";
 @import "https://pretix.eu/socreatory/widget/v1.css";
 
 /*
@@ -26,6 +26,7 @@ Application specific code
 @import "../../components/buttons/buttons";
 @import "../../components/cards/cards";
 @import "../../components/customer_logo/customer_logo";
+@import "../../components/event-stripe/event-stripe";
 @import "../../components/feature/feature";
 @import "../../components/filter/filter";
 @import "../../components/footer/footer";
diff --git a/lib/blueprints/container-layouts/container/_container.scss b/lib/blueprints/container-layouts/container/_container.scss
index e8b8560..12cd1a9 100644
--- a/lib/blueprints/container-layouts/container/_container.scss
+++ b/lib/blueprints/container-layouts/container/_container.scss
@@ -13,7 +13,7 @@
   padding: 0 $spacer-xs;
 
   > * + * {
-    margin-top: $spacer-base;
+    margin-top: $spacer-md;
   }
 
   > * {
@@ -69,6 +69,27 @@
   padding-bottom: $spacer-base;
 }
 
+.container--2-col,
+%container--2-col {
+  @include for-tablet-landscape-up {
+    display: grid;
+    grid-template-areas: "left right";
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    gap: $spacer-base;
+
+    > div {
+      margin-top: 0;
+    }
+  }
+
+  width: 100%;
+
+  > * + * {
+    margin-top: $spacer-base;
+  }
+}
+
 // Deprecated Class TODO Replace everywhere
 .container__fullwidth {
   @include for-tablet-landscape-up {
diff --git a/lib/components/buttons/_buttons.scss b/lib/components/buttons/_buttons.scss
index 482be12..c4017bb 100644
--- a/lib/components/buttons/_buttons.scss
+++ b/lib/components/buttons/_buttons.scss
@@ -27,7 +27,7 @@
   @extend %base-button;
 
   width: auto;
-  padding: $spacer-sm $spacer-md;
+  padding: $spacer-xs $spacer-sm;
 
   font-size: $font-size-sm;
   color: $brand-text;
diff --git a/lib/components/cards/_cards.scss b/lib/components/cards/_cards.scss
index 8969377..5c1df7c 100644
--- a/lib/components/cards/_cards.scss
+++ b/lib/components/cards/_cards.scss
@@ -1,7 +1,7 @@
 .cards {
   @include for-tablet-landscape-up {
     grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
+    gap: $spacer-md;
   }
 
   @include for-desktop-xl-up {
@@ -11,7 +11,7 @@
   display: grid;
   grid-auto-rows: auto;
   grid-template-columns: 1fr;
-  gap: $spacer-md;
+  gap: $spacer-xs;
   align-content: stretch;
 
   width: 100%;
@@ -29,19 +29,18 @@
 
 .card {
   position: relative;
-
-  display: grid;
-  grid-row: span 3;
-  gap: 0;
-
   background-color: $brand-white-1;
-
   transition: all 250ms ease;
 }
 
-.card__link {
+.card__title {
+  margin-bottom: $spacer-2xs;
   font-size: $font-size-lg;
+  line-height: $heading-line-height-sm;
   hyphens: auto;
+}
+
+.card__link {
   color: $brand-text;
   text-decoration: none;
 }
@@ -91,15 +90,9 @@
   border-left: 10px solid $brand-tertiary;
 }
 
-.card__title {
-  margin-bottom: $spacer-2xs;
-  font-size: $font-size-xl;
-  line-height: $heading-line-height-sm;
-  hyphens: auto;
-}
-
 .card__text {
   font-size: $font-size-md;
+  line-height: $heading-line-height-sm;
 }
 
 .card__label {
diff --git a/lib/components/event-stripe/_event-stripe.scss b/lib/components/event-stripe/_event-stripe.scss
new file mode 100644
index 0000000..9df209e
--- /dev/null
+++ b/lib/components/event-stripe/_event-stripe.scss
@@ -0,0 +1,110 @@
+.trainings-section {
+  @extend %container;
+  @extend %container--xl;
+  @extend %container-vertical-spacing-xl;
+}
+
+.event-stripe__list {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  gap: $spacer-xs;
+
+  width: 100%;
+  margin-bottom: $spacer-md;
+  padding-left: 0;
+
+  list-style-type: none;
+}
+
+.event-stripe {
+  position: relative;
+
+  display: grid;
+  grid-column-gap: $spacer-xs;
+  grid-template-columns: $spacer-lg auto;
+  grid-template-rows: auto;
+
+  width: 100%;
+  padding: $spacer-xs $spacer-sm;
+
+  background-color: $brand-white-1;
+  border-left: 5px solid $brand-secondary;
+
+  transition: all 250ms ease;
+
+  > * {
+    margin-bottom: 0;
+  }
+
+  .avatar {
+    grid-column: 1;
+    grid-row: 2/4;
+    align-self: center;
+
+    width: $spacer-lg;
+    height: $spacer-lg;
+  }
+}
+
+.event-stripe--isaqb {
+  border-left: 5px solid $brand-primary;
+}
+
+.event-stripe--power {
+  border-left: 5px solid $brand-tertiary;
+}
+
+.event-stripe__title {
+  display: block;
+  grid-column: 1/3;
+  grid-row: 1;
+
+  margin-bottom: $spacer-2xs;
+
+  font-size: $font-size-base;
+  line-height: $heading-line-height-sm;
+  hyphens: auto;
+
+  a {
+    color: $brand-text;
+    text-decoration: none;
+
+    &::after {
+      content: "";
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-thickness: $spacer-3xs;
+      text-underline-offset: $spacer-3xs;
+    }
+  }
+}
+
+.event-stripe__location {
+  display: block;
+  grid-column: 2;
+  grid-row: 2;
+
+  font-size: $font-size-md;
+  line-height: $heading-line-height-sm;
+}
+
+.event-stripe__date {
+  @extend %heading-font-bold;
+
+  grid-column: 2;
+  grid-row: 2;
+
+  margin-top: $spacer-2xs;
+
+  font-size: $font-size-md;
+  line-height: $heading-line-height-sm;
+}
diff --git a/lib/components/header/_header.scss b/lib/components/header/_header.scss
index 3b1ee8d..1f4533f 100644
--- a/lib/components/header/_header.scss
+++ b/lib/components/header/_header.scss
@@ -1,10 +1,5 @@
 //TODO: Refactor
 .header {
-  @include for-tablet-landscape-up {
-    margin-bottom: $spacer-xl;
-  }
-
-  margin-bottom: $spacer-sm;
   padding: $spacer-lg 0 $spacer-lg 0;
 
   > * + * {
@@ -81,10 +76,6 @@
   margin-right: $spacer-base * 0.7;
 }
 
-.header-color--normal {
-  background-color: $brand-background;
-}
-
 .header-color--highlighted-1 {
   background-color: $brand-primary-light;
 }
diff --git a/lib/components/header/header.md b/lib/components/header/header.md
index d70b730..6efcd9c 100644
--- a/lib/components/header/header.md
+++ b/lib/components/header/header.md
@@ -66,7 +66,7 @@ ISAQB Training Header
 ## Header mit Image
 
 ```html
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -85,7 +85,7 @@ ISAQB Training Header
 ## Header Simpel
 
 ```html
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -103,7 +103,7 @@ ISAQB Training Header
 ## Breadcrumb Header
 
 ```html
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/fundamentals/_helpers.scss b/lib/fundamentals/_helpers.scss
index aea944e..977e30d 100644
--- a/lib/fundamentals/_helpers.scss
+++ b/lib/fundamentals/_helpers.scss
@@ -16,3 +16,16 @@
   clip-path: inset(50%);
   border: 0;
 }
+
+/* stylelint-disable declaration-no-important */
+.m-t-lg {
+  margin-top: $spacer-lg !important;
+}
+
+.m-t-xl {
+  margin-top: $spacer-xl !important;
+}
+
+.m-t-2xl {
+  margin-top: $spacer-2xl !important;
+}
diff --git a/lib/views/about/about.md b/lib/views/about/about.md
index 4ab9172..81d9824 100644
--- a/lib/views/about/about.md
+++ b/lib/views/about/about.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/contact/contact.md b/lib/views/contact/contact.md
index 68e8551..7f05cdd 100644
--- a/lib/views/contact/contact.md
+++ b/lib/views/contact/contact.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md b/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md
index 46c01fd..05332f5 100644
--- a/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md
+++ b/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md
@@ -39,7 +39,7 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
     </nav>
 </scroll-nav>
 
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/customer-pages/customer-profile-page/customer-profile-page.md b/lib/views/customer-pages/customer-profile-page/customer-profile-page.md
index ae20f60..af0ca24 100644
--- a/lib/views/customer-pages/customer-profile-page/customer-profile-page.md
+++ b/lib/views/customer-pages/customer-profile-page/customer-profile-page.md
@@ -34,7 +34,7 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
     </nav>
 </scroll-nav>
 
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -46,7 +46,7 @@ See [All available alert styles](https://styleguide.socreatory.com/molecules/ale
 </header>
 
 <main class="customer-profile-page">
-    <section class="container container--md container--centered">
+    <section class="container container--md container--centered container-vertical-spacing-xl">
         <div class="alert alert--info">
             <p class="alert__text"><strong>Erfolg!</strong> Vielen Dank.</p>
             <button class="alert__btn" type="button">
diff --git a/lib/views/customer-pages/customer-trainings-page/customer-trainings-page.md b/lib/views/customer-pages/customer-trainings-page/customer-trainings-page.md
index 674a126..929fe0d 100644
--- a/lib/views/customer-pages/customer-trainings-page/customer-trainings-page.md
+++ b/lib/views/customer-pages/customer-trainings-page/customer-trainings-page.md
@@ -35,7 +35,7 @@ description: Customer Trainings Page
     </nav>
 </scroll-nav>
 
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/home/home.md b/lib/views/home/home.md
index da9b195..993adad 100644
--- a/lib/views/home/home.md
+++ b/lib/views/home/home.md
@@ -73,7 +73,8 @@ description: Homepage
                 <div class="card__body card__body--isaqb">
                     <div class="card__body__top">
                         <h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
-                        <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.
+                        <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
+                            sisit.
                         </p>
                         <div class="pills">
                             <div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20
@@ -94,7 +95,6 @@ description: Homepage
                         </div>
                     </div>
                 </div>
-                </div>
             </li>
             <li class="card card--power">
                 <div class="card__body card__body--power">
@@ -134,7 +134,8 @@ description: Homepage
                 <div class="card__body card__body--isaqb">
                     <div class="card__body__top">
                         <h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
-                        <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.
+                        <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
+                            sisit.
                         </p>
                         <div class="pills">
                             <div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20
@@ -155,7 +156,6 @@ description: Homepage
                         </div>
                     </div>
                 </div>
-                </div>
             </li>
             <li class="card card--power">
                 <div class="card__body card__body--power">
@@ -192,11 +192,76 @@ description: Homepage
                 </div>
             </li>
         </ul>
-        <a href="#" class="btn btn-type--primary">Alle Schulungen</a>
-    </section>
-
-    <section class="container container--xl container-vertical-spacing-2xl">
-        <div class="teaser">
+        <a href="#" class="btn btn--cta">Alle Schulungen</a>
+        <div class="container--2-col m-t-lg">
+            <div class="event-stripe__wrapper">
+                <h2 class="section__title--normal">Early Birds</h2>
+                <ul class="event-stripe__list">
+                    <li class="event-stripe event-stripe--isaqb">
+                        <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                        <div class="event-stripe__date">
+                            <time datetime="2024-03-12">12.</time> -
+                            <time datetime="2024-03-14">14.3.2024</time>
+                        </div>
+                        <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                        <span class=" event-stripe__location"></span>In Wursthausen mit Hans Wurst</span>
+                    </li>
+                    <li class="event-stripe">
+                        <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                        <div class="event-stripe__date">
+                            <time datetime="2024-03-12">12.</time> -
+                            <time datetime="2024-03-14">14.3.2024</time>
+                        </div>
+                        <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                        <span class="event-stripe__location"></span>Wursthotel Wurststr.100 40000 Wursthausen</span>
+                    </li>
+                    <li class="event-stripe event-stripe--power">
+                        <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                        <div class="event-stripe__date">
+                            <time datetime="2024-03-12">12.</time> -
+                            <time datetime="2024-03-14">14.3.2024</time>
+                        </div>
+                        <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                        <span class="event-stripe__location"></span>Wursthotel Wurststr.100 40000 Wursthausen</span>
+                    </li>
+                </ul>
+                <a href="#" class="btn btn--cta">Alle Early Birds</a>
+            </div>
+            <div class="event-stripe__wrapper">
+                <h2 class="section__title--normal">Nächste Termine</h2>
+                <ul class="event-stripe__list">
+                    <li class="event-stripe event-stripe--isaqb">
+                        <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                        <div class="event-stripe__date">
+                            <time datetime="2024-03-12">12.</time> -
+                            <time datetime="2024-03-14">14.3.2024</time>
+                        </div>
+                        <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                        <span class="event-stripe__location"></span>Wursthotel Wurststr.100 40000 Wursthausen</span>
+                    </li>
+                    <li class="event-stripe">
+                        <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                        <div class="event-stripe__date">
+                            <time datetime="2024-03-12">12.</time> -
+                            <time datetime="2024-03-14">14.3.2024</time>
+                        </div>
+                        <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                        <span class="event-stripe__location"></span>Wursthotel Wurststr.100 40000 Wursthausen</span>
+                    </li>
+                    <li class="event-stripe event-stripe--power">
+                        <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                        <div class="event-stripe__date">
+                            <time datetime="2024-03-12">12.</time> -
+                            <time datetime="2024-03-14">14.3.2024</time>
+                        </div>
+                        <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                        <span class="event-stripe__location"></span>Wursthotel Wurststr.100 40000 Wursthausen</span>
+                    </li>
+                </ul>
+                <a href="#" class="btn btn--cta">Alle Early Birds</a>
+            </div>
+        </div>
+        <div class="teaser m-t-2xl">
             <div class="teaser__column">
                 <h2 class="section__title--normal">Deine Trainer:innen</h2>
                 <p class="teaser__text">
@@ -313,7 +378,6 @@ description: Homepage
             </div>
         </section>
     </div>
-
 </main>
 
 <footer>
@@ -351,6 +415,7 @@ description: Homepage
                         <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
                         <input class="form__input" type="email" name="email" id="text8475487" />
                     </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
                 </form>
             </div>
         </div>
@@ -362,4 +427,4 @@ description: Homepage
         </div>
     </div>
 </footer>
-```
\ No newline at end of file
+```
diff --git a/lib/views/isaqb/isaqb.md b/lib/views/isaqb/isaqb.md
index 5c1d870..93a564a 100644
--- a/lib/views/isaqb/isaqb.md
+++ b/lib/views/isaqb/isaqb.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/login_page/login_page.md b/lib/views/login_page/login_page.md
index f96dcfe..efeefa3 100644
--- a/lib/views/login_page/login_page.md
+++ b/lib/views/login_page/login_page.md
@@ -31,7 +31,7 @@ description: This view shows how the login page should look like
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/login_page_success/login_page_success.md b/lib/views/login_page_success/login_page_success.md
index c936df9..0f6dbfb 100644
--- a/lib/views/login_page_success/login_page_success.md
+++ b/lib/views/login_page_success/login_page_success.md
@@ -31,7 +31,7 @@ description: This view shows how the login page should look like after sending t
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/module_kit/module_kit.md b/lib/views/module_kit/module_kit.md
index 7307f92..4a0f5c0 100644
--- a/lib/views/module_kit/module_kit.md
+++ b/lib/views/module_kit/module_kit.md
@@ -36,7 +36,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/news/news.md b/lib/views/news/news.md
index 840ea33..00d5e4b 100644
--- a/lib/views/news/news.md
+++ b/lib/views/news/news.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/news/news_detail.md b/lib/views/news/news_detail.md
index bb05df0..077a922 100644
--- a/lib/views/news/news_detail.md
+++ b/lib/views/news/news_detail.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal header__news">
+<header class="header  header__news">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/prices/prices.md b/lib/views/prices/prices.md
index 8c98f0d..c05a20b 100644
--- a/lib/views/prices/prices.md
+++ b/lib/views/prices/prices.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/privacy/privacy.md b/lib/views/privacy/privacy.md
index b0f8fa7..f347828 100644
--- a/lib/views/privacy/privacy.md
+++ b/lib/views/privacy/privacy.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/site_notice/site_notice.md b/lib/views/site_notice/site_notice.md
index 0700ab9..23f92b9 100644
--- a/lib/views/site_notice/site_notice.md
+++ b/lib/views/site_notice/site_notice.md
@@ -31,7 +31,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
diff --git a/lib/views/trainer/trainer_detail.md b/lib/views/trainer/trainer_detail.md
index c615e36..98d1f40 100644
--- a/lib/views/trainer/trainer_detail.md
+++ b/lib/views/trainer/trainer_detail.md
@@ -36,7 +36,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -223,7 +223,8 @@ description: Description
     <div class="footer__top">
         <div class="footer__top__content">
             <div class="footer__top__content__right">
-                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
+                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg"
+                    alt="Software Creators Academy Logo" />
                 <div class="footer__linkarea">
                     <ul class="footer__links">
                         <li class="footer__link"><a href="#">Trainings</a></li>
@@ -241,16 +242,19 @@ description: Description
             </div>
             <div class="footer__top__content__left">
                 <h2>Newsletter</h2>
-                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen</p>
+                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als
+                    erste(r) von neuen Angeboten und Themen</p>
                 <form class="form" action="#" method="post" target="_blank">
                     <div class="form__field">
-                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
+                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr
+                                title="required">*</abbr></label>
                         <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
                     </div>
                     <div class="form__field">
                         <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
                         <input class="form__input" type="email" name="email" id="text8475487" />
                     </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
                 </form>
             </div>
         </div>
diff --git a/lib/views/trainer/trainer_overview.md b/lib/views/trainer/trainer_overview.md
index b31abe6..01fc285 100644
--- a/lib/views/trainer/trainer_overview.md
+++ b/lib/views/trainer/trainer_overview.md
@@ -36,7 +36,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -279,13 +279,14 @@ description: Description
                 <p class="profile__focus">Fokus</p>
             </li>
         </ul>
-    </section>]
+    </section>
 </main>
 <footer>
     <div class="footer__top">
         <div class="footer__top__content">
             <div class="footer__top__content__right">
-                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
+                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg"
+                    alt="Software Creators Academy Logo" />
                 <div class="footer__linkarea">
                     <ul class="footer__links">
                         <li class="footer__link"><a href="#">Trainings</a></li>
@@ -303,16 +304,19 @@ description: Description
             </div>
             <div class="footer__top__content__left">
                 <h2>Newsletter</h2>
-                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen</p>
+                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als
+                    erste(r) von neuen Angeboten und Themen</p>
                 <form class="form" action="#" method="post" target="_blank">
                     <div class="form__field">
-                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
+                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr
+                                title="required">*</abbr></label>
                         <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
                     </div>
                     <div class="form__field">
                         <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
                         <input class="form__input" type="email" name="email" id="text8475487" />
                     </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
                 </form>
             </div>
         </div>
diff --git a/lib/views/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md b/lib/views/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md
index eddcab6..abb9fa4 100644
--- a/lib/views/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md
+++ b/lib/views/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md
@@ -33,7 +33,7 @@ description: Backend-View for Trainers shows details of a specific training
     </nav>
 </scroll-nav>
 
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -86,31 +86,37 @@ description: Backend-View for Trainers shows details of a specific training
 <footer>
     <div class="footer__top">
         <div class="footer__top__content">
-            <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
-            <h2>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen.</h2>
-            <form class="form" action="#" method="post" target="_blank">
-                <div class="form__field">
-                    <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
-                    <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
+            <div class="footer__top__content__right">
+                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
+                <div class="footer__linkarea">
+                    <ul class="footer__links">
+                        <li class="footer__link"><a href="#">Trainings</a></li>
+                        <li class="footer__link"><a href="#">Trainer:innen</a></li>
+                        <li class="footer__link"><a href="#">Modulbaukasten</a></li>
+                        <li class="footer__link"><a href="#">News</a></li>
+                    </ul>
+                    <ul class="footer__links">
+                        <li class="footer__link"><a href="#">Impressum</a></li>
+                        <li class="footer__link"><a href="#">Datenschutz</a></li>
+                        <li class="footer__link"><a href="#">AGB</a></li>
+                        <li class="footer__link"><a href="#">Kontakt</a></li>
+                    </ul>
                 </div>
-                <div class="form__field">
-                    <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
-                    <input class="form__input" type="email" name="email" id="text8475487" />
-                </div>
-            </form>
-            <div class="footer__linkarea">
-                <ul class="footer__links">
-                    <li class="footer__link"><a href="#">Trainings</a></li>
-                    <li class="footer__link"><a href="#">Trainer:innen</a></li>
-                    <li class="footer__link"><a href="#">Modulbaukasten</a></li>
-                    <li class="footer__link"><a href="#">News</a></li>
-                </ul>
-                <ul class="footer__links">
-                    <li class="footer__link"><a href="#">Impressum</a></li>
-                    <li class="footer__link"><a href="#">Datenschutz</a></li>
-                    <li class="footer__link"><a href="#">AGB</a></li>
-                    <li class="footer__link"><a href="#">Kontakt</a></li>
-                </ul>
+            </div>
+            <div class="footer__top__content__left">
+                <h2>Newsletter</h2>
+                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen</p>
+                <form class="form" action="#" method="post" target="_blank">
+                    <div class="form__field">
+                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
+                        <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
+                    </div>
+                    <div class="form__field">
+                        <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
+                        <input class="form__input" type="email" name="email" id="text8475487" />
+                    </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
+                </form>
             </div>
         </div>
     </div>
diff --git a/lib/views/trainer_pages/trainer_trainings_overview_page/trainer_trainings_overview_page.md b/lib/views/trainer_pages/trainer_trainings_overview_page/trainer_trainings_overview_page.md
index 46a7e43..9e6421b 100644
--- a/lib/views/trainer_pages/trainer_trainings_overview_page/trainer_trainings_overview_page.md
+++ b/lib/views/trainer_pages/trainer_trainings_overview_page/trainer_trainings_overview_page.md
@@ -38,7 +38,7 @@ description: Backend-View for Trainers shows a list of all training a trainer is
     </nav>
 </scroll-nav>
 
-<header class="header--breadcrumb header-color--normal">
+<header class="header--breadcrumb ">
     <div class="container container--xl">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -127,6 +127,7 @@ description: Backend-View for Trainers shows a list of all training a trainer is
                         <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
                         <input class="form__input" type="email" name="email" id="text8475487" />
                     </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
                 </form>
             </div>
         </div>
@@ -138,4 +139,4 @@ description: Backend-View for Trainers shows a list of all training a trainer is
         </div>
     </div>
 </footer>
-```
\ No newline at end of file
+```
diff --git a/lib/views/trainings_dates/trainings_dates.md b/lib/views/trainings_dates/trainings_dates.md
new file mode 100644
index 0000000..fba5533
--- /dev/null
+++ b/lib/views/trainings_dates/trainings_dates.md
@@ -0,0 +1,136 @@
+title: Training Dates Overview
+description: Description
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<scroll-nav>
+    <nav class="navbar-wrapper">
+        <div class="announcement">
+            <p class="announcement__text">🔥 It‘s H.O.T. <a class="announcement__link"
+                    href="/de/topics/data-mesh-workshop/">Get
+                    ice cream for free</a></p>
+        </div>
+        <div class="navbar">
+            <a href="#" class="navbar__brand-link">
+                <img class="navbar__logo" src="/snippet/images/logos/soc_logo.svg"
+                    alt="Software Creators Academy Logo" />
+            </a>
+            <a href="#" class="navigation-login">Login</a>
+            <input type="checkbox" id="navbar__checkbox" />
+            <div class="navigation-main">
+                <ul role="list" aria-label="Seitennavigation" class="navbar__items">
+                    <li><a href="#" class="navbar__item">Trainings</a></li>
+                    <li><a href="#" class="navbar__item">Trainer:innen</a></li>
+                    <li><a href="#" class="navbar__item">Preise</a></li>
+                    <li><a href="#" class="navbar__item">iSAQB</a></li>
+                </ul>
+                <ul class="navigation-meta" role="list" aria-label="Verfügbare Sprachen">
+                    <li><a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln"
+                            class="navigation-meta__item">DE</a></li>
+                    <li><a lang="en" href="#" title="Switch to English" aria-label="Switch to English"
+                            aria-current="true" class="navigation-meta__item">EN</a></li>
+                </ul>
+            </div>
+            <label class="navbar__burger" for="navbar__checkbox"></label>
+        </div>
+    </nav>
+</scroll-nav>
+
+<header class="header ">
+    <div class="container__fullwidth">
+        <div class="breadcrumb">
+            <ul class="breadcrumb__list">
+                <li class="breadcrumb__item"><a href="#">Home</a></li>
+                <li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span>
+                    Early Bird Angebote</li>
+            </ul>
+        </div>
+    </div>
+    <div class="container__centered">
+        <img class="header__image" src="/snippet/images/illustrations/Schulunguebersicht.png" alt="">
+        <h1 class="header__heading header__heading--centered">Unsere Early Bird Angebote</h1>
+    </div>
+</header>
+
+<main>
+    <section class="container container--md container-vertical-spacing-xl">
+        <ul class="event-stripe__list">
+            <li class="event-stripe event-stripe--isaqb">
+                <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                <div class="event-stripe__date">
+                    <time datetime="2024-03-12">12.</time> -
+                    <time datetime="2024-03-14">14.3.2024</time>
+                </div>
+                <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                <span class=" event-stripe__location"></span>In Wursthausen mit Hans Wurst</span>
+            </li>
+            <li class="event-stripe">
+                <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                <div class="event-stripe__date">
+                    <time datetime="2024-03-12">12.</time> -
+                    <time datetime="2024-03-14">14.3.2024</time>
+                </div>
+                <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                <span class="event-stripe__location"></span>Wursthotel Wurststr.100 40000 Wursthausen</span>
+            </li>
+            <li class="event-stripe event-stripe--power">
+                <h3 class="event-stripe__title"><a href="#">Ein tolles Training</a></h3>
+                <div class="event-stripe__date">
+                    <time datetime="2024-03-12">12.</time> -
+                    <time datetime="2024-03-14">14.3.2024</time>
+                </div>
+                <img class="avatar" src="/snippet/images/illustrations/avatar-dummy.svg" />
+                <span class="event-stripe__location"></span>Wursthotel Wurststr.100 40000 Wursthausen</span>
+            </li>
+        </ul>
+    </section>
+</main>
+
+<footer>
+    <div class="footer__top">
+        <div class="footer__top__content">
+            <div class="footer__top__content__right">
+                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg"
+                    alt="Software Creators Academy Logo" />
+                <div class="footer__linkarea">
+                    <ul class="footer__links">
+                        <li class="footer__link"><a href="#">Trainings</a></li>
+                        <li class="footer__link"><a href="#">Trainer:innen</a></li>
+                        <li class="footer__link"><a href="#">Modulbaukasten</a></li>
+                        <li class="footer__link"><a href="#">News</a></li>
+                    </ul>
+                    <ul class="footer__links">
+                        <li class="footer__link"><a href="#">Impressum</a></li>
+                        <li class="footer__link"><a href="#">Datenschutz</a></li>
+                        <li class="footer__link"><a href="#">AGB</a></li>
+                        <li class="footer__link"><a href="#">Kontakt</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer__top__content__left">
+                <h2>Newsletter</h2>
+                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als
+                    erste(r) von neuen Angeboten und Themen</p>
+                <form class="form" action="#" method="post" target="_blank">
+                    <div class="form__field">
+                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr
+                                title="required">*</abbr></label>
+                        <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
+                    </div>
+                    <div class="form__field">
+                        <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
+                        <input class="form__input" type="email" name="email" id="text8475487" />
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    <div class="footer__bottom">
+        <div class="footer__bottom__content">
+            <span class="footer__company">socreatory — The Software Creators’ Academy</span>
+            <span class="footer__copyright">©2023</span>
+        </div>
+    </div>
+</footer>
+
+```
diff --git a/lib/views/trainings_detail/trainings_detail.md b/lib/views/trainings_detail/trainings_detail.md
index ce5e031..cb3ca37 100644
--- a/lib/views/trainings_detail/trainings_detail.md
+++ b/lib/views/trainings_detail/trainings_detail.md
@@ -6,11 +6,13 @@ description: Show Training Detail
 <scroll-nav>
     <nav class="navbar-wrapper">
         <div class="announcement">
-            <p class="announcement__text">🔥 It‘s H.O.T. <a class="announcement__link" href="/de/topics/data-mesh-workshop/">Get ice cream for free</a></p>
+            <p class="announcement__text">🔥 It‘s H.O.T. <a class="announcement__link"
+                    href="/de/topics/data-mesh-workshop/">Get ice cream for free</a></p>
         </div>
         <div class="navbar">
             <a href="#" class="navbar__brand-link">
-                <img class="navbar__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
+                <img class="navbar__logo" src="/snippet/images/logos/soc_logo.svg"
+                    alt="Software Creators Academy Logo" />
             </a>
             <a href="#" class="navigation-login">Login</a>
             <input type="checkbox" id="navbar__checkbox" />
@@ -22,8 +24,10 @@ description: Show Training Detail
                     <li><a href="#" class="navbar__item">iSAQB</a></li>
                 </ul>
                 <ul class="navigation-meta" role="list" aria-label="Verfügbare Sprachen">
-                    <li><a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln" class="navigation-meta__item">DE</a></li>
-                    <li><a lang="en" href="#" title="Switch to English" aria-label="Switch to English" aria-current="true" class="navigation-meta__item">EN</a></li>
+                    <li><a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln"
+                            class="navigation-meta__item">DE</a></li>
+                    <li><a lang="en" href="#" title="Switch to English" aria-label="Switch to English"
+                            aria-current="true" class="navigation-meta__item">EN</a></li>
                 </ul>
             </div>
             <label class="navbar__burger" for="navbar__checkbox"></label>
@@ -36,8 +40,10 @@ description: Show Training Detail
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
                 <li class="breadcrumb__item"><a href="#">Home</a></li>
-                <li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> <a href="#">Schulungen</a></li>
-                <li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> JavaScript</li>
+                <li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span> <a
+                        href="#">Schulungen</a></li>
+                <li class="breadcrumb__item"><span class="breadcrumb__arrow" aria-label="Pfeil nach rechts">›</span>
+                    JavaScript</li>
             </ul>
         </div>
         <h1 class="header__heading">JavaScript verstehen und anwenden</h1>
@@ -45,260 +51,374 @@ description: Show Training Detail
     </div>
 </header>
 
-<main>
-    <div class="container__fullwidth">
-        <div class="layout-main-with-sidebar">
-            <div class="layout-main-with-sidebar__main">
-                <a href="#booking" class="btn btn-type--secondary  btn-anchor">Termine und Buchung</a>
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Beschreibung</h2>
-                    <h3 class="heading">Evolution und Verbesserung von Software&shy;architekturen – systematisch und nachhaltig</h3>
-                    <div class="article markdown">
-                        <p>
-                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam doloribus laborum nisi non, <a href="#">lorem ipsum</a> cupiditate quo accusantium doloremque saepe quidem
-                            illum!
-                        </p>
-                        <img class="article__image" src="https://www.innoq.com/de/trainings/blockchain-verteilter-konsens/lars-hupel.jpg" alt="Dr. Lars Hupel im Einsatz" />
-                        <p>
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum aliquid, <strong>lorem ipsum</strong> reiciendis error fugit dicta tempora necessitatibus maiores nesciunt
-                            et, porro ipsa incidunt <em>lorem ipsum</em> asperiores perspiciatis, dolor explicabo quia aliquam eos nam.
-                        </p>
-                    </div>
-                </section>
+<main class="container container--xl container-vertical-spacing-xl">
+    <div class="layout-main-with-sidebar">
+        <div class="layout-main-with-sidebar__main">
+            <a href="#booking" class="btn btn-type--secondary  btn-anchor">Termine und Buchung</a>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Beschreibung</h2>
+                <h3 class="heading">Evolution und Verbesserung von Software&shy;architekturen – systematisch und
+                    nachhaltig</h3>
+                <div class="article markdown">
+                    <p>
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam doloribus laborum nisi
+                        non, <a href="#">lorem ipsum</a> cupiditate quo accusantium doloremque saepe quidem
+                        illum!
+                    </p>
+                    <img class="article__image"
+                        src="https://www.innoq.com/de/trainings/blockchain-verteilter-konsens/lars-hupel.jpg"
+                        alt="Dr. Lars Hupel im Einsatz" />
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum aliquid, <strong>lorem
+                            ipsum</strong> reiciendis error fugit dicta tempora necessitatibus maiores nesciunt
+                        et, porro ipsa incidunt <em>lorem ipsum</em> asperiores perspiciatis, dolor explicabo quia
+                        aliquam eos nam.
+                    </p>
+                </div>
+            </section>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Agenda</h2>
-                    <div class="article markdown">
-                        <ul>
-                            <li>Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, atque?</li>
-                            <li>
-                                Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod
-                                veniam, numquam architecto voluptate.
-                            </li>
-                            <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></li>
-                        </ul>
-                        <ol>
-                            <li>Lorem, ipsum dolor</li>
-                            <li>Lorem reiciendis error fugit</li>
-                            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
-                        </ol>
-                    </div>
-                </section>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Agenda</h2>
+                <div class="article markdown">
+                    <ul>
+                        <li>Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
+                            atque?</li>
+                        <li>
+                            Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                            Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod
+                            veniam, numquam architecto voluptate.
+                        </li>
+                        <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></li>
+                    </ul>
+                    <ol>
+                        <li>Lorem, ipsum dolor</li>
+                        <li>Lorem reiciendis error fugit</li>
+                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
+                    </ol>
+                </div>
+            </section>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Teilnehmer:innen Bewertung</h2>
-                    <div class="stars" style="--rating: 3.5;" aria-label="Die Bewertung dieses Trainings beträgt 4 von möglichen 5."></div>
-                    <p class="stars__rating">(14 Bewertungen)</p>
-                    <p><strong>92%</strong> aller Teilnehmer:innen würden dieses Training weiterempfehlen</p>
-                </section>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Teilnehmer:innen Bewertung</h2>
+                <div class="stars" style="--rating: 3.5;"
+                    aria-label="Die Bewertung dieses Trainings beträgt 4 von möglichen 5."></div>
+                <p class="stars__rating">(14 Bewertungen)</p>
+                <p><strong>92%</strong> aller Teilnehmer:innen würden dieses Training weiterempfehlen</p>
+            </section>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Ihr Nutzen</h2>
-                    <div class="texttable markdown">
-                        <p class="texttable__cell">
-                            Die Kenntnis flexibler Architektur&shy;modelle ist essenziell bei Moderni&shy;sierung&shy;svor&shy;haben gewachsener Systeme als auch beim Design neuer Systeme auf der
-                            »grünen Wiese«
-                        </p>
-                        <p class="texttable__cell">»Full-Stack«-&shy;Architektur&shy;kompetenz: vom iterativen Entwerfen bis zur konti&shy;nuier&shy;lichen Auslieferung</p>
-                        <p class="texttable__cell">Anwendbar in allen Auf&shy;gabenfeldern der Softwarearchitektur unabhängig von Technologien und Sprachen</p>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Ihr Nutzen</h2>
+                <div class="texttable markdown">
+                    <p class="texttable__cell">
+                        Die Kenntnis flexibler Architektur&shy;modelle ist essenziell bei
+                        Moderni&shy;sierung&shy;svor&shy;haben gewachsener Systeme als auch beim Design neuer
+                        Systeme auf der
+                        »grünen Wiese«
+                    </p>
+                    <p class="texttable__cell">»Full-Stack«-&shy;Architektur&shy;kompetenz: vom iterativen Entwerfen
+                        bis zur konti&shy;nuier&shy;lichen Auslieferung</p>
+                    <p class="texttable__cell">Anwendbar in allen Auf&shy;gabenfeldern der Softwarearchitektur
+                        unabhängig von Technologien und Sprachen</p>
+                </div>
+            </section>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Zielgruppe</h2>
+                <div class="section__1col markdown">
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis, magnam corrupti, enim,
+                        ratione id quisquam quas explicabo magni maxime commodi facilis? Illum, in ipsa?
+                        Ipsum dolorem dolor pariatur provident esse?
+                    </p>
+                </div>
+            </section>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Lernziele</h2>
+                <div class="texttable markdown">
+                    <p class="texttable__cell">Motivation: Schnelle IT als Wettbewerbsfaktor</p>
+                    <p class="texttable__cell">Gesetz von Conway: Software-Architekturen und Organisation</p>
+                    <p class="texttable__cell">Microservices und Self-contained Systems</p>
+                    <p class="texttable__cell">Domain-driven Design für Modularisierung: Bounded Context und Context
+                        Maps</p>
+                    <p class="texttable__cell">Selbstorganisation und Architektur: Mikro- und Makro-Architekturen
+                    </p>
+                    <p class="texttable__cell">Kommunikation: REST und Messaging</p>
+                    <p class="texttable__cell">Event-driven Front-End-Integration</p>
+                    <p class="texttable__cell">Datenreplikation</p>
+                    <p class="texttable__cell">Verteilte Sicherheitsmechanismen</p>
+                    <p class="texttable__cell">Moderne Infrastrukturen mit IaaS, PaaS und Container</p>
+                    <p class="texttable__cell">Continuous Delivery, Delivery Pipelines und Software-Architektur</p>
+                    <p class="texttable__cell">Metriken und Logging</p>
+                    <p class="texttable__cell">Ausblick: Konsistenzmodelle und Resilience</p>
+                </div>
+            </section>
+
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Ihre Trainer:innen</h2>
+                <div class="img-text">
+                    <div class="img-text__figure">
+                        <a href="#"><img class="img-text__image"
+                                src="/snippet/images/profiles/Oliver_Zeigermann.jpg" /></a>
                     </div>
-                </section>
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Zielgruppe</h2>
-                    <div class="section__1col markdown">
+                    <div class="img-text__content">
+                        <h3 class="img-text__heading"><a href="#" class="heading__link">Kim Nena Duggen</a></h3>
+                        <p class="profile__company">embarc</p>
+                        <p class="profile__role">Rolle</p>
+                        <div class="spacer__md"></div>
+
                         <p>
-                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis, magnam corrupti, enim, ratione id quisquam quas explicabo magni maxime commodi facilis? Illum, in ipsa?
-                            Ipsum dolorem dolor pariatur provident esse?
+                            Kim Nena Duggen ist als Organisationsentwicklerin im Bereich New Work,
+                            Selbstorganisation und (IT-)Strategie in ihrem Element. Erfahrungen im Prozessmanagement
+                            und ihr
+                            Einsatz als Trainerin im Bereich EAM, RE, Soft Skills, New Work sind ihr Fundament.
                         </p>
                     </div>
-                </section>
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Lernziele</h2>
-                    <div class="texttable markdown">
-                        <p class="texttable__cell">Motivation: Schnelle IT als Wettbewerbsfaktor</p>
-                        <p class="texttable__cell">Gesetz von Conway: Software-Architekturen und Organisation</p>
-                        <p class="texttable__cell">Microservices und Self-contained Systems</p>
-                        <p class="texttable__cell">Domain-driven Design für Modularisierung: Bounded Context und Context Maps</p>
-                        <p class="texttable__cell">Selbstorganisation und Architektur: Mikro- und Makro-Architekturen</p>
-                        <p class="texttable__cell">Kommunikation: REST und Messaging</p>
-                        <p class="texttable__cell">Event-driven Front-End-Integration</p>
-                        <p class="texttable__cell">Datenreplikation</p>
-                        <p class="texttable__cell">Verteilte Sicherheitsmechanismen</p>
-                        <p class="texttable__cell">Moderne Infrastrukturen mit IaaS, PaaS und Container</p>
-                        <p class="texttable__cell">Continuous Delivery, Delivery Pipelines und Software-Architektur</p>
-                        <p class="texttable__cell">Metriken und Logging</p>
-                        <p class="texttable__cell">Ausblick: Konsistenzmodelle und Resilience</p>
-                    </div>
-                </section>
+                </div>
+            </section>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Ihre Trainer:innen</h2>
-                    <div class="img-text">
-                        <div class="img-text__figure">
-                            <a href="#"><img class="img-text__image" src="/snippet/images/profiles/Oliver_Zeigermann.jpg" /></a>
-                        </div>
-                        <div class="img-text__content">
-                            <h3 class="img-text__heading"><a href="#" class="heading__link">Kim Nena Duggen</a></h3>
-                            <p class="profile__company">embarc</p>
-                            <p class="profile__role">Rolle</p>
-                            <div class="spacer__md"></div>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Unsere Kund:innen sagen</h2>
+                <div class="quote">
+                    <blockquote class="quote__blockquote">»Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                        Nostrum possimus corrupti amet.«</blockquote>
+                    <div class="quote__name">Alexander Trapp</div>
+                    <div class="quote__role">Developer IoT & Cloud bei GIB mbH</div>
+                </div>
+            </section>
 
-                            <p>
-                                Kim Nena Duggen ist als Organisationsentwicklerin im Bereich New Work, Selbstorganisation und (IT-)Strategie in ihrem Element. Erfahrungen im Prozessmanagement und ihr
-                                Einsatz als Trainerin im Bereich EAM, RE, Soft Skills, New Work sind ihr Fundament.
-                            </p>
-                        </div>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Fachinfos und Bücher</h2>
+                <div class="img-text">
+                    <div class="img-text__figure">
+                        <img class="img-text__image"
+                            src="https://images-na.ssl-images-amazon.com/images/I/41C55Z7cezL.jpg" />
                     </div>
-                </section>
-
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Unsere Kund:innen sagen</h2>
-                    <div class="quote">
-                        <blockquote class="quote__blockquote">»Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum possimus corrupti amet.«</blockquote>
-                        <div class="quote__name">Alexander Trapp</div>
-                        <div class="quote__role">Developer IoT & Cloud bei GIB mbH</div>
+                    <div class="img-text__content">
+                        <h3 class="img-text__heading">Vorgehensmuster für Softwarearchitektur</h3>
+                        <p>
+                            Grundlage für das Seminar ist das Buch »Vorgehensmuster für Softwarearchitektur:
+                            Kombinierbare Praktiken in Zeiten von Agile und Lean« (Hanser Verlag, 2019) Ihres
+                            Trainers Stefan Toth. Das Buch ist für jeden Teilnehmer im Seminarpreis enthalten
+                            (Gebundene Ausgabe und eBook).
+                        </p>
                     </div>
-                </section>
-
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Fachinfos und Bücher</h2>
-                    <div class="img-text">
-                        <div class="img-text__figure">
-                            <img class="img-text__image" src="https://images-na.ssl-images-amazon.com/images/I/41C55Z7cezL.jpg" />
-                        </div>
-                        <div class="img-text__content">
-                            <h3 class="img-text__heading">Vorgehensmuster für Softwarearchitektur</h3>
-                            <p>
-                                Grundlage für das Seminar ist das Buch »Vorgehensmuster für Softwarearchitektur: Kombinierbare Praktiken in Zeiten von Agile und Lean« (Hanser Verlag, 2019) Ihres
-                                Trainers Stefan Toth. Das Buch ist für jeden Teilnehmer im Seminarpreis enthalten (Gebundene Ausgabe und eBook).
-                            </p>
+                </div>
+            </section>
+        </div>
+        <div id="booking" class="layout-main-with-sidebar__sidebar sidebar">
+            <div class="layout-main-with-sidebar__sidebar">
+                <h3>Termine</h3>
+                <!-- Pretix Widget -->
+                <div class="pretix-widget-wrapper" event="https://pretix.eu/socreatory/adoc/">
+                    <div class="pretix-widget pretix-widget-mobile">
+                        <div data-v-b329ee4c="" tabindex="-1" class="resize-observer"><object aria-hidden="true"
+                                tabindex="-1" type="text/html" data="about:blank"></object></div>
+                        <div class="pretix-widget-loading" style="display: none;">
+                            <svg width="128" height="128" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"
+                                    class="pretix-widget-primary-color"></path>
+                            </svg>
                         </div>
-                    </div>
-                </section>
-            </div>
-            <div id="booking" class="layout-main-with-sidebar__sidebar sidebar">
-                <div class="layout-main-with-sidebar__sidebar">
-                    <h3>Termine</h3>
-                    <!-- Pretix Widget -->
-                    <div class="pretix-widget-wrapper" event="https://pretix.eu/socreatory/adoc/">
-                        <div class="pretix-widget pretix-widget-mobile">
-                            <div data-v-b329ee4c="" tabindex="-1" class="resize-observer"><object aria-hidden="true" tabindex="-1" type="text/html" data="about:blank"></object></div>
-                            <div class="pretix-widget-loading" style="display: none;">
-                                <svg width="128" height="128" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"
-                                        class="pretix-widget-primary-color"
-                                    ></path>
-                                </svg>
-                            </div>
-                            <!---->
-                            <!---->
-                            <div class="pretix-widget-event-list">
-                                <!---->
-                                <!---->
-                                <!----><a class="pretix-widget-event-list-entry pretix-widget-event-availability-green pretix-widget-event-availability-ok">
-                                    <div class="pretix-widget-event-list-entry-name">ADOC - Stefan Zörner</div>
-                                    <div class="pretix-widget-event-list-entry-date">26.–27. Juli 2021 09:30</div>
-                                    <div class="pretix-widget-event-list-entry-location">Online</div>
-                                    <div class="pretix-widget-event-list-entry-availability"><span>Jetzt buchen</span></div> </a
-                                ><a class="pretix-widget-event-list-entry pretix-widget-event-availability-green pretix-widget-event-availability-ok">
-                                    <div class="pretix-widget-event-list-entry-name">ADOC</div>
-                                    <div class="pretix-widget-event-list-entry-date">3.–4. November 2021 09:30</div>
-                                    <div class="pretix-widget-event-list-entry-location">Online</div>
-                                    <div class="pretix-widget-event-list-entry-availability"><span>Jetzt buchen</span></div>
-                                </a>
-                            </div>
+                        <!---->
+                        <!---->
+                        <div class="pretix-widget-event-list">
                             <!---->
                             <!---->
-                            <div class="pretix-widget-clear"></div>
-                            <div class="pretix-widget-attribution"><a href="https://pretix.eu" target="_blank" rel="noopener">Event-Ticketing-Software von pretix</a></div>
+                            <!----><a
+                                class="pretix-widget-event-list-entry pretix-widget-event-availability-green pretix-widget-event-availability-ok">
+                                <div class="pretix-widget-event-list-entry-name">ADOC - Stefan Zörner</div>
+                                <div class="pretix-widget-event-list-entry-date">26.–27. Juli 2021 09:30</div>
+                                <div class="pretix-widget-event-list-entry-location">Online</div>
+                                <div class="pretix-widget-event-list-entry-availability"><span>Jetzt buchen</span>
+                                </div>
+                            </a><a
+                                class="pretix-widget-event-list-entry pretix-widget-event-availability-green pretix-widget-event-availability-ok">
+                                <div class="pretix-widget-event-list-entry-name">ADOC</div>
+                                <div class="pretix-widget-event-list-entry-date">3.–4. November 2021 09:30</div>
+                                <div class="pretix-widget-event-list-entry-location">Online</div>
+                                <div class="pretix-widget-event-list-entry-availability"><span>Jetzt buchen</span>
+                                </div>
+                            </a>
                         </div>
+                        <!---->
+                        <!---->
+                        <div class="pretix-widget-clear"></div>
+                        <div class="pretix-widget-attribution"><a href="https://pretix.eu" target="_blank"
+                                rel="noopener">Event-Ticketing-Software von pretix</a></div>
                     </div>
                 </div>
-                <div class="layout-main-with-sidebar__sidebar">
-                    <h3>Inhouse Training</h3>
-                    <p>Du kannst diese Training auch als inhouse-Training exklusiv bei Dir buchen. Bitte nutze dafür unser Anfrage-Formular.</p>
-                    <a href="#" class="btn btn-type--secondary ">Jetzt anfragen</a>
-                </div>
+            </div>
+            <div class="layout-main-with-sidebar__sidebar">
+                <h3>Inhouse Training</h3>
+                <p>Du kannst diese Training auch als inhouse-Training exklusiv bei Dir buchen. Bitte nutze dafür
+                    unser Anfrage-Formular.</p>
+                <a href="#" class="btn btn-type--secondary ">Jetzt anfragen</a>
             </div>
         </div>
     </div>
 </main>
-<aside>
-    <div class="container__fullwidth">
-        <h2 class="section__title--small"><span aria-hidden>-- </span>Relevante weitere Schulungen</h2>
-        <ul class="cards">
-            <li class="card">
-                <div class="card__body">
-                    <div class="card__body__top">
-                        <h3 class="card__title"><a href="#" class="card__link">Card Title</a></h3>
-                        <p class="card__text">Card Text Lorem, ipsum dolor.</p>
+<aside class="container container--xl container-vertical-spacing-xl">
+    <h2 class="section__title--small"><span aria-hidden>-- </span>Relevante weitere Schulungen</h2>
+    <ul class="cards">
+        <li class="card card--isaqb">
+            <div class="card__body card__body--isaqb">
+                <div class="card__body__top">
+                    <h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
+                    <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
+                        sisit.
+                    </p>
+                    <div class="pills">
+                        <div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20
+                        </div>
+                        <div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—
+                        </div>
+                        <div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10
+                        </div>
                     </div>
-                    <div class="card__body__bottom"></div>
                 </div>
-                <div class="card__footer">
-                    <p class="card__price">ab 1.750 €</p>
+                <div class="card__body__bottom">
+                    <div>
+                        <p class="card__price">2.100 €</p>
+                    </div>
+                    <div>
+                        <p class="card__label">iSAQB® Modul ARC</p>
+                    </div>
                 </div>
-                <p class="card__appendix">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
-            </li>
-            <li class="card">
-                <div class="card__body">
-                    <div class="card__body__top">
-                        <h3 class="card__title"><a href="#" class="card__link">Card Title</a></h3>
-                        <p class="card__text">Card Text Lorem, ipsum dolor.</p>
+            </div>
+        </li>
+        <li class="card card--power">
+            <div class="card__body card__body--power">
+                <div class="card__body__top">
+                    <h3 class="card__title"><a href="#" class="card__link">Leichtgewichtige
+                            Architekturdokumentation</a>
+                    </h3>
+                    <p class="card__text">Softwarearchitekturen festhalten und kommunizieren</p>
+                </div>
+                <div class="card__body__bottom">
+                    <div>
+                        <p class="card__price">700 €</p>
+                    </div>
+                    <div>
+                        <p class="card__label">Powerworkshop</p>
                     </div>
-                    <div class="card__body__bottom"></div>
                 </div>
-                <div class="card__footer">
-                    <p class="card__price">ab 1.750 €</p>
+            </div>
+        </li>
+        <li class="card">
+            <div class="card__body">
+                <div class="card__body__top">
+                    <h3 class="card__title"><a href="#" class="card__link">Evolution und Verbesserung von
+                            Softwarearchitekturen</a></h3>
+                    <p class="card__text">Mit Domain-driven Design, Event Storming und ML Design Canvas
+                        AI-Produkte
+                        entwerfen.</p>
                 </div>
-                <p class="card__appendix">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
-            </li>
-            <li class="card">
-                <div class="card__body">
-                    <div class="card__body__top">
-                        <h3 class="card__title"><a href="#" class="card__link">Card Title</a></h3>
-                        <p class="card__text">Card Text Lorem, ipsum dolor.</p>
+                <div class="card__body__bottom">
+                    <div>
+                        <p class="card__price">2.100 €</p>
                     </div>
-                    <div class="card__body__bottom"></div>
                 </div>
-                <div class="card__footer">
-                    <p class="card__price">ab 1.750 €</p>
+            </div>
+        </li>
+        <li class="card card--isaqb">
+            <div class="card__body card__body--isaqb">
+                <div class="card__body__top">
+                    <h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
+                    <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
+                        sisit.
+                    </p>
+                    <div class="pills">
+                        <div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20
+                        </div>
+                        <div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—
+                        </div>
+                        <div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10
+                        </div>
+                    </div>
                 </div>
-                <p class="card__appendix">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
-            </li>
-        </ul>
-    </div>
+                <div class="card__body__bottom">
+                    <div>
+                        <p class="card__price">2.100 €</p>
+                    </div>
+                    <div>
+                        <p class="card__label">iSAQB® Modul ARC</p>
+                    </div>
+                </div>
+            </div>
+        </li>
+        <li class="card card--power">
+            <div class="card__body card__body--power">
+                <div class="card__body__top">
+                    <h3 class="card__title"><a href="#" class="card__link">Leichtgewichtige
+                            Architekturdokumentation</a>
+                    </h3>
+                    <p class="card__text">Softwarearchitekturen festhalten und kommunizieren</p>
+                </div>
+                <div class="card__body__bottom">
+                    <div>
+                        <p class="card__price">700 €</p>
+                    </div>
+                    <div>
+                        <p class="card__label">Powerworkshop</p>
+                    </div>
+                </div>
+            </div>
+        </li>
+        <li class="card">
+            <div class="card__body">
+                <div class="card__body__top">
+                    <h3 class="card__title"><a href="#" class="card__link">Evolution und Verbesserung von
+                            Softwarearchitekturen</a></h3>
+                    <p class="card__text">Mit Domain-driven Design, Event Storming und ML Design Canvas
+                        AI-Produkte
+                        entwerfen.</p>
+                </div>
+                <div class="card__body__bottom">
+                    <div>
+                        <p class="card__price">2.100 €</p>
+                    </div>
+                </div>
+            </div>
+        </li>
+    </ul>
 </aside>
-
 <footer>
     <div class="footer__top">
         <div class="footer__top__content">
-            <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
-            <h2>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen.</h2>
-            <form class="form" action="#" method="post" target="_blank">
-                <div class="form__field">
-                    <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
-                    <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
+            <div class="footer__top__content__right">
+                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg"
+                    alt="Software Creators Academy Logo" />
+                <div class="footer__linkarea">
+                    <ul class="footer__links">
+                        <li class="footer__link"><a href="#">Trainings</a></li>
+                        <li class="footer__link"><a href="#">Trainer:innen</a></li>
+                        <li class="footer__link"><a href="#">Modulbaukasten</a></li>
+                        <li class="footer__link"><a href="#">News</a></li>
+                    </ul>
+                    <ul class="footer__links">
+                        <li class="footer__link"><a href="#">Impressum</a></li>
+                        <li class="footer__link"><a href="#">Datenschutz</a></li>
+                        <li class="footer__link"><a href="#">AGB</a></li>
+                        <li class="footer__link"><a href="#">Kontakt</a></li>
+                    </ul>
                 </div>
-                <div class="form__field">
-                    <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
-                    <input class="form__input" type="email" name="email" id="text8475487" />
-                </div>
-            </form>
-            <div class="footer__linkarea">
-                <ul class="footer__links">
-                    <li class="footer__link"><a href="#">Trainings</a></li>
-                    <li class="footer__link"><a href="#">Trainer:innen</a></li>
-                    <li class="footer__link"><a href="#">Modulbaukasten</a></li>
-                    <li class="footer__link"><a href="#">News</a></li>
-                </ul>
-                <ul class="footer__links">
-                    <li class="footer__link"><a href="#">Impressum</a></li>
-                    <li class="footer__link"><a href="#">Datenschutz</a></li>
-                    <li class="footer__link"><a href="#">AGB</a></li>
-                    <li class="footer__link"><a href="#">Kontakt</a></li>
-                </ul>
+            </div>
+            <div class="footer__top__content__left">
+                <h2>Newsletter</h2>
+                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als
+                    erste(r) von neuen Angeboten und Themen</p>
+                <form class="form" action="#" method="post" target="_blank">
+                    <div class="form__field">
+                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr
+                                title="required">*</abbr></label>
+                        <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
+                    </div>
+                    <div class="form__field">
+                        <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
+                        <input class="form__input" type="email" name="email" id="text8475487" />
+                    </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
+                </form>
             </div>
         </div>
     </div>
diff --git a/lib/views/trainings_detail/trainings_detail_isaqb.md b/lib/views/trainings_detail/trainings_detail_isaqb.md
index 78552f8..69ddc26 100644
--- a/lib/views/trainings_detail/trainings_detail_isaqb.md
+++ b/lib/views/trainings_detail/trainings_detail_isaqb.md
@@ -68,146 +68,209 @@ description: Show Training Detail iSAQB
     </div>
 </header>
 
-<main>
-    <div class="container__fullwidth">
-        <div class="layout-main-with-sidebar">
-            <div class="layout-main-with-sidebar__main">
-                <a href="#booking" class="btn btn-type--secondary  btn-anchor">Termine und Buchung</a>
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Beschreibung</h2>
-                    <h3 class="heading">Evolution und Verbesserung von Software&shy;architekturen – systematisch und
-                        nachhaltig</h3>
-                    <div class="article markdown">
-                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam doloribus laborum nisi non,
-                            <a href="#">lorem ipsum</a> cupiditate quo accusantium doloremque saepe quidem illum!
-                        </p>
-                        <img class="article__image"
-                            src="https://www.innoq.com/de/trainings/blockchain-verteilter-konsens/lars-hupel.jpg"
-                            alt="Dr. Lars Hupel im Einsatz" />
-                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum aliquid, <strong>lorem
-                                ipsum</strong> reiciendis error fugit dicta tempora necessitatibus maiores nesciunt et,
-                            porro ipsa incidunt <em>lorem ipsum</em> asperiores perspiciatis, dolor explicabo quia
-                            aliquam eos nam.</p>
-                        <ul>
-                            <li>Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
-                                atque?</li>
-                            <li>Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                                Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod veniam,
-                                numquam architecto voluptate.</li>
-                            <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></li>
-                        </ul>
-                        <ol>
-                            <li>Lorem, ipsum dolor</li>
-                            <li>Lorem reiciendis error fugit</li>
-                            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
-                        </ol>
-                    </div>
-                </section>
+<main class="container container--xl container-vertical-spacing-xl">
+    <div class="layout-main-with-sidebar">
+        <div class="layout-main-with-sidebar__main">
+            <a href="#booking" class="btn btn-type--secondary  btn-anchor">Termine und Buchung</a>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Beschreibung</h2>
+                <h3 class="heading">Evolution und Verbesserung von Software&shy;architekturen – systematisch und
+                    nachhaltig</h3>
+                <div class="article markdown">
+                    <p>
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam doloribus laborum nisi
+                        non, <a href="#">lorem ipsum</a> cupiditate quo accusantium doloremque saepe quidem
+                        illum!
+                    </p>
+                    <img class="article__image"
+                        src="https://www.innoq.com/de/trainings/blockchain-verteilter-konsens/lars-hupel.jpg"
+                        alt="Dr. Lars Hupel im Einsatz" />
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum aliquid, <strong>lorem
+                            ipsum</strong> reiciendis error fugit dicta tempora necessitatibus maiores nesciunt
+                        et, porro ipsa incidunt <em>lorem ipsum</em> asperiores perspiciatis, dolor explicabo quia
+                        aliquam eos nam.
+                    </p>
+                </div>
+            </section>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Teilnehmer:innen Bewertung</h2>
-                    <div class="stars" style="--rating: 3.5;"
-                        aria-label="Die Bewertung dieses Trainings beträgt 3,5 von möglichen 5."></div>
-                    <p class="stars__rating">(14 Bewertungen)</p>
-                    <p><strong>92%</strong> aller Teilnehmer:innen würden dieses Training weiterempfehlen</p>
-                </section>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Agenda</h2>
+                <div class="article markdown">
+                    <ul>
+                        <li>Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
+                            atque?</li>
+                        <li>
+                            Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                            Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod
+                            veniam, numquam architecto voluptate.
+                        </li>
+                        <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></li>
+                    </ul>
+                    <ol>
+                        <li>Lorem, ipsum dolor</li>
+                        <li>Lorem reiciendis error fugit</li>
+                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
+                    </ol>
+                </div>
+            </section>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Ihr Nutzen</h2>
-                    <div class="texttable markdown">
-                        <p class="texttable__cell">Die Kenntnis flexibler Architektur&shy;modelle ist essenziell bei
-                            Moderni&shy;sierungs&shy;vorhaben gewachsener Systeme als auch beim Design neuer Systeme auf
-                            der »grünen Wiese«</p>
-                        <p class="texttable__cell">»Full-Stack«-&shy;Architektur&shy;kompetenz: vom iterativen Entwerfen
-                            bis zur kontinuierlichen Auslieferung</p>
-                        <p class="texttable__cell">Anwendbar in allen Aufgabenfeldern der Softwarearchitektur unabhängig
-                            von Technologien und Sprachen</p>
-                    </div>
-                </section>
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Zielgruppe</h2>
-                    <div class="section__1col markdown">
-                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis, magnam corrupti, enim,
-                            ratione id quisquam quas explicabo magni maxime commodi facilis? Illum, in ipsa? Ipsum
-                            dolorem dolor pariatur provident esse?</p>
-                    </div>
-                </section>
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Lernziele</h2>
-                    <div class="texttable markdown">
-                        <p class="texttable__cell">Legacy und Technische Schulden</p>
-                        <p class="texttable__cell">Praxistaugliche Analysemethoden kennen und anwenden können</p>
-                        <p class="texttable__cell">Szenario- und Metrik-basierte Bewertung</p>
-                        <p class="texttable__cell">Maßnahmen an Architekturzielen ausrichten</p>
-                        <p class="texttable__cell">Fitness Functions und evolutionäre Architektur</p>
-                    </div>
-                </section>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Teilnehmer:innen Bewertung</h2>
+                <div class="stars" style="--rating: 3.5;"
+                    aria-label="Die Bewertung dieses Trainings beträgt 4 von möglichen 5."></div>
+                <p class="stars__rating">(14 Bewertungen)</p>
+                <p><strong>92%</strong> aller Teilnehmer:innen würden dieses Training weiterempfehlen</p>
+            </section>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Ihre Trainer:innen</h2>
-                    <div class="img-text">
-                        <div class="img-text__figure">
-                            <a href="#"><img class="img-text__image"
-                                    src="/snippet/images/profiles/Oliver_Zeigermann.jpg" /></a>
-                        </div>
-                        <div class="img-text__content">
-                            <h3 class="img-text__heading"><a href="#" class="heading__link">Kim Nena Duggen</a></h3>
-                            <p class="profile__company">embarc</p>
-                            <p class="profile__role">Rolle</p>
-                            <div class="spacer__md"></div>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Ihr Nutzen</h2>
+                <div class="texttable markdown">
+                    <p class="texttable__cell">
+                        Die Kenntnis flexibler Architektur&shy;modelle ist essenziell bei
+                        Moderni&shy;sierung&shy;svor&shy;haben gewachsener Systeme als auch beim Design neuer
+                        Systeme auf der
+                        »grünen Wiese«
+                    </p>
+                    <p class="texttable__cell">»Full-Stack«-&shy;Architektur&shy;kompetenz: vom iterativen Entwerfen
+                        bis zur konti&shy;nuier&shy;lichen Auslieferung</p>
+                    <p class="texttable__cell">Anwendbar in allen Auf&shy;gabenfeldern der Softwarearchitektur
+                        unabhängig von Technologien und Sprachen</p>
+                </div>
+            </section>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Zielgruppe</h2>
+                <div class="section__1col markdown">
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis, magnam corrupti, enim,
+                        ratione id quisquam quas explicabo magni maxime commodi facilis? Illum, in ipsa?
+                        Ipsum dolorem dolor pariatur provident esse?
+                    </p>
+                </div>
+            </section>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Lernziele</h2>
+                <div class="texttable markdown">
+                    <p class="texttable__cell">Motivation: Schnelle IT als Wettbewerbsfaktor</p>
+                    <p class="texttable__cell">Gesetz von Conway: Software-Architekturen und Organisation</p>
+                    <p class="texttable__cell">Microservices und Self-contained Systems</p>
+                    <p class="texttable__cell">Domain-driven Design für Modularisierung: Bounded Context und Context
+                        Maps</p>
+                    <p class="texttable__cell">Selbstorganisation und Architektur: Mikro- und Makro-Architekturen
+                    </p>
+                    <p class="texttable__cell">Kommunikation: REST und Messaging</p>
+                    <p class="texttable__cell">Event-driven Front-End-Integration</p>
+                    <p class="texttable__cell">Datenreplikation</p>
+                    <p class="texttable__cell">Verteilte Sicherheitsmechanismen</p>
+                    <p class="texttable__cell">Moderne Infrastrukturen mit IaaS, PaaS und Container</p>
+                    <p class="texttable__cell">Continuous Delivery, Delivery Pipelines und Software-Architektur</p>
+                    <p class="texttable__cell">Metriken und Logging</p>
+                    <p class="texttable__cell">Ausblick: Konsistenzmodelle und Resilience</p>
+                </div>
+            </section>
 
-                            <p>Kim Nena Duggen ist als Organisationsentwicklerin im Bereich New Work, Selbstorganisation
-                                und (IT-)Strategie in ihrem Element. Erfahrungen im Prozessmanagement und ihr Einsatz
-                                als Trainerin im Bereich EAM, RE, Soft Skills, New Work sind ihr Fundament.</p>
-                        </div>
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Ihre Trainer:innen</h2>
+                <div class="img-text">
+                    <div class="img-text__figure">
+                        <a href="#"><img class="img-text__image"
+                                src="/snippet/images/profiles/Oliver_Zeigermann.jpg" /></a>
                     </div>
-                </section>
+                    <div class="img-text__content">
+                        <h3 class="img-text__heading"><a href="#" class="heading__link">Kim Nena Duggen</a></h3>
+                        <p class="profile__company">embarc</p>
+                        <p class="profile__role">Rolle</p>
+                        <div class="spacer__md"></div>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Unsere Kund:innen sagen</h2>
-                    <div class="quote">
-                        <blockquote class="quote__blockquote">»Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                            Nostrum possimus corrupti amet.«</blockquote>
-                        <div class="quote__name">Alexander Trapp</div>
-                        <div class="quote__role">Developer IoT & Cloud bei GIB mbH</div>
+                        <p>
+                            Kim Nena Duggen ist als Organisationsentwicklerin im Bereich New Work,
+                            Selbstorganisation und (IT-)Strategie in ihrem Element. Erfahrungen im Prozessmanagement
+                            und ihr
+                            Einsatz als Trainerin im Bereich EAM, RE, Soft Skills, New Work sind ihr Fundament.
+                        </p>
                     </div>
-                </section>
+                </div>
+            </section>
+
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Unsere Kund:innen sagen</h2>
+                <div class="quote">
+                    <blockquote class="quote__blockquote">»Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                        Nostrum possimus corrupti amet.«</blockquote>
+                    <div class="quote__name">Alexander Trapp</div>
+                    <div class="quote__role">Developer IoT & Cloud bei GIB mbH</div>
+                </div>
+            </section>
 
-                <section class="section">
-                    <h2 class="section__title--small"><span aria-hidden>-- </span>Fachinfos und Bücher</h2>
-                    <div class="img-text">
-                        <div class="img-text__figure">
-                            <img class="img-text__image"
-                                src="https://www.innoq.com/de/staff/gernot-starke/Requirements-Skills-V1.png" />
+            <section class="section">
+                <h2 class="section__title--small"><span aria-hidden>-- </span>Fachinfos und Bücher</h2>
+                <div class="img-text">
+                    <div class="img-text__figure">
+                        <img class="img-text__image"
+                            src="https://images-na.ssl-images-amazon.com/images/I/41C55Z7cezL.jpg" />
+                    </div>
+                    <div class="img-text__content">
+                        <h3 class="img-text__heading">Vorgehensmuster für Softwarearchitektur</h3>
+                        <p>
+                            Grundlage für das Seminar ist das Buch »Vorgehensmuster für Softwarearchitektur:
+                            Kombinierbare Praktiken in Zeiten von Agile und Lean« (Hanser Verlag, 2019) Ihres
+                            Trainers Stefan Toth. Das Buch ist für jeden Teilnehmer im Seminarpreis enthalten
+                            (Gebundene Ausgabe und eBook).
+                        </p>
+                    </div>
+                </div>
+            </section>
+        </div>
+        <div id="booking" class="layout-main-with-sidebar__sidebar sidebar">
+            <div class="layout-main-with-sidebar__sidebar">
+                <h3>Termine</h3>
+                <!-- Pretix Widget -->
+                <div class="pretix-widget-wrapper" event="https://pretix.eu/socreatory/adoc/">
+                    <div class="pretix-widget pretix-widget-mobile">
+                        <div data-v-b329ee4c="" tabindex="-1" class="resize-observer"><object aria-hidden="true"
+                                tabindex="-1" type="text/html" data="about:blank"></object></div>
+                        <div class="pretix-widget-loading" style="display: none;">
+                            <svg width="128" height="128" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"
+                                    class="pretix-widget-primary-color"></path>
+                            </svg>
                         </div>
-                        <div class="img-text__content">
-                            <h3 class="img-text__heading">Vorgehensmuster für Softwarearchitektur</h3>
-                            <p>Grundlage für das Seminar ist das Buch »Vorgehensmuster für Softwarearchitektur:
-                                Kombinierbare Praktiken in Zeiten von Agile und Lean« (Hanser Verlag, 2019) Ihres
-                                Trainers Stefan Toth. Das Buch ist für jeden Teilnehmer im Seminarpreis enthalten
-                                (Gebundene Ausgabe und eBook).</p>
+                        <!---->
+                        <!---->
+                        <div class="pretix-widget-event-list">
+                            <!---->
+                            <!---->
+                            <!----><a
+                                class="pretix-widget-event-list-entry pretix-widget-event-availability-green pretix-widget-event-availability-ok">
+                                <div class="pretix-widget-event-list-entry-name">ADOC - Stefan Zörner</div>
+                                <div class="pretix-widget-event-list-entry-date">26.–27. Juli 2021 09:30</div>
+                                <div class="pretix-widget-event-list-entry-location">Online</div>
+                                <div class="pretix-widget-event-list-entry-availability"><span>Jetzt buchen</span>
+                                </div>
+                            </a><a
+                                class="pretix-widget-event-list-entry pretix-widget-event-availability-green pretix-widget-event-availability-ok">
+                                <div class="pretix-widget-event-list-entry-name">ADOC</div>
+                                <div class="pretix-widget-event-list-entry-date">3.–4. November 2021 09:30</div>
+                                <div class="pretix-widget-event-list-entry-location">Online</div>
+                                <div class="pretix-widget-event-list-entry-availability"><span>Jetzt buchen</span>
+                                </div>
+                            </a>
                         </div>
+                        <!---->
+                        <!---->
+                        <div class="pretix-widget-clear"></div>
+                        <div class="pretix-widget-attribution"><a href="https://pretix.eu" target="_blank"
+                                rel="noopener">Event-Ticketing-Software von pretix</a></div>
                     </div>
-                </section>
-            </div>
-
-            <div id="booking" class="layout-main-with-sidebar__sidebar">
-                <div>
-                    <h3>Online-Termine</h3>
-                    <pretix-widget event="https://pretix.eu/socreatory/adoc--online/" style="list"></pretix-widget>
-                    <h3>Vor-Ort-Termine</h3>
-                    <pretix-widget event="https://pretix.eu/socreatory/adoc--praesenz/" style="list"></pretix-widget>
-                    <p><a href="https://pretix.eu/socreatory/" class="link-attribution"
-                            target="_blank">Event-Ticketing-Software von pretix</a></p>
-                </div>
-
-                <div>
-                    <h3>Inhouse Schulung</h3>
-                    <p>Du kannst dieses Training auch als inhouse-Training exklusiv bei Dir buchen. Bitte nutze dafür
-                        unser Anfrage-Formular.</p>
-                    <a href="#" class="btn btn-type--secondary ">Jetzt anfragen</a>
                 </div>
             </div>
+            <div class="layout-main-with-sidebar__sidebar">
+                <h3>Inhouse Training</h3>
+                <p>Du kannst diese Training auch als inhouse-Training exklusiv bei Dir buchen. Bitte nutze dafür
+                    unser Anfrage-Formular.</p>
+                <a href="#" class="btn btn-type--secondary ">Jetzt anfragen</a>
+            </div>
         </div>
     </div>
 </main>
@@ -218,7 +281,8 @@ description: Show Training Detail iSAQB
             <div class="card__body card__body--isaqb">
                 <div class="card__body__top">
                     <h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
-                    <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.
+                    <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
+                        sisit.
                     </p>
                     <div class="pills">
                         <div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20
@@ -238,7 +302,6 @@ description: Show Training Detail iSAQB
                     </div>
                 </div>
             </div>
-            </div>
         </li>
         <li class="card card--power">
             <div class="card__body card__body--power">
@@ -278,7 +341,8 @@ description: Show Training Detail iSAQB
             <div class="card__body card__body--isaqb">
                 <div class="card__body__top">
                     <h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
-                    <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.
+                    <p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
+                        sisit.
                     </p>
                     <div class="pills">
                         <div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20
@@ -298,7 +362,6 @@ description: Show Training Detail iSAQB
                     </div>
                 </div>
             </div>
-            </div>
         </li>
         <li class="card card--power">
             <div class="card__body card__body--power">
@@ -371,6 +434,7 @@ description: Show Training Detail iSAQB
                         <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
                         <input class="form__input" type="email" name="email" id="text8475487" />
                     </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
                 </form>
             </div>
         </div>
@@ -383,4 +447,4 @@ description: Show Training Detail iSAQB
     </div>
 </footer>
 
-```
\ No newline at end of file
+```
diff --git a/lib/views/trainings_detail/trainings_detail_power.md b/lib/views/trainings_detail/trainings_detail_power.md
index 9d32dc0..ca8927d 100644
--- a/lib/views/trainings_detail/trainings_detail_power.md
+++ b/lib/views/trainings_detail/trainings_detail_power.md
@@ -64,8 +64,7 @@ description: Show Training Detail Powerworkshop
     </div>
 </header>
 
-<main>
-    <div class="container__fullwidth">
+<main class="container container--xl container-vertical-spacing-xl">
         <div class="layout-main-with-sidebar">
             <div class="layout-main-with-sidebar__main">
                 <div class="offer-box">
@@ -213,7 +212,6 @@ description: Show Training Detail Powerworkshop
                 </div>
             </div>
         </div>
-    </div>
 </main>
 <aside class="container container--xl container-vertical-spacing-xl">
     <h2 class="section__title--small"><span aria-hidden>-- </span>Relevante weitere Schulungen</h2>
@@ -376,6 +374,7 @@ description: Show Training Detail Powerworkshop
                         <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
                         <input class="form__input" type="email" name="email" id="text8475487" />
                     </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
                 </form>
             </div>
         </div>
@@ -388,4 +387,4 @@ description: Show Training Detail Powerworkshop
     </div>
 </footer>
 
-```
\ No newline at end of file
+```
diff --git a/lib/views/trainings_overview/trainings_overview.md b/lib/views/trainings_overview/trainings_overview.md
index 5ba44a1..4633bd6 100644
--- a/lib/views/trainings_overview/trainings_overview.md
+++ b/lib/views/trainings_overview/trainings_overview.md
@@ -36,7 +36,7 @@ description: Description
     </nav>
 </scroll-nav>
 
-<header class="header header-color--normal">
+<header class="header ">
     <div class="container__fullwidth">
         <div class="breadcrumb">
             <ul class="breadcrumb__list">
@@ -241,7 +241,8 @@ description: Description
     <div class="footer__top">
         <div class="footer__top__content">
             <div class="footer__top__content__right">
-                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg" alt="Software Creators Academy Logo" />
+                <img class="footer__logo" src="/snippet/images/logos/soc_logo.svg"
+                    alt="Software Creators Academy Logo" />
                 <div class="footer__linkarea">
                     <ul class="footer__links">
                         <li class="footer__link"><a href="#">Trainings</a></li>
@@ -259,16 +260,19 @@ description: Description
             </div>
             <div class="footer__top__content__left">
                 <h2>Newsletter</h2>
-                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als erste(r) von neuen Angeboten und Themen</p>
+                <p>Frische Architektur direkt in deinem Postfach. Melde dich jetzt an und erfahre alle zwei Monate als
+                    erste(r) von neuen Angeboten und Themen</p>
                 <form class="form" action="#" method="post" target="_blank">
                     <div class="form__field">
-                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr title="required">*</abbr></label>
+                        <label class="form__label" for="cr_form-input--text8475472">Wie heißt Du? <abbr
+                                title="required">*</abbr></label>
                         <input class="form__input" type="text" name="1121423" id="cr_form-input--text8475472" />
                     </div>
                     <div class="form__field">
                         <label class="form__label" for="text8475487">E-Mail <abbr title="required">*</abbr></label>
                         <input class="form__input" type="email" name="email" id="text8475487" />
                     </div>
+                    <button class="btn btn-type--primary">Anmelden</button>
                 </form>
             </div>
         </div>