diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
deleted file mode 100644
index 678249df..00000000
--- a/assets/scss/_styles_project.scss
+++ /dev/null
@@ -1,653 +0,0 @@
-@import "./_variables_project.scss";
-
-body {
-  line-height: 1.7em;
-}
-
-.award {
-  width: 250px;
-  transform: rotate(0deg) translate(0,-50pt);
-  align: left;
-}
-
-.td-navbar .navbar-brand svg {
-  transform: scale(1.5);
-  margin-right: 1.5rem;
-}
-
-.td-navbar .navbar-brand .text-uppercase {
-  text-transform: none !important;
-  // font-weight: normal !important;
-}
-
-.navbar-brand > .text-uppercase {
-  font-weight: 700;
-}
-
-.td-content {
-  max-width: 60rem;
-}
-
-.btn {
-  border-radius: 0.2rem;
-
-  &-lg {
-    border-radius: 0.4rem;
-  }
-
-  &-sm {
-    border-radius: 0.2rem;
-  }
-}
-
-.btn-outline-light:hover {
-    background-color: #f1f1f6;
-    border-color: #f1f1f6;
-}
-
-.youtube-video-wrapper {
-  display: block;
-  position: relative;
-  padding-bottom: 56.25%;
-  height: 0;
-  overflow: hidden;
-  width: 100%;
-  background: #000;
-  margin: 3rem 0;
-
-  iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-    background: transparent;
-  }
-
-  img {
-    object-fit: cover;
-    display: block;
-    left: 0;
-    bottom: 0;
-    margin: 0 auto;
-    max-width: 100%;
-    width: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    border: none;
-    height: auto;
-    cursor: pointer;
-    -webkit-transition: 0.4s all;
-    -moz-transition: 0.4s all;
-    transition: 0.4s all;
-  }
-
-  &:hover img {
-    -webkit-filter: brightness(75%);
-  }
-
-  .play {
-    height: 72px;
-    width: 72px;
-    left: 50%;
-    top: 50%;
-    margin-left: -36px;
-    margin-top: -36px;
-    position: absolute;
-    background: url("../images/play.png") no-repeat;
-    z-index: 1;
-    cursor: pointer;
-  }
-
-  .comment {
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, 50px);
-    position: absolute;
-    z-index: 1;
-    cursor: pointer;
-    color: white;
-  }
-}
-
-.ideal-image-slider {
-  max-width: 60rem;
-  margin: 2rem 0;
-}
-
-.slider.small {
-  max-width: 30rem;
-}
-
-.print-only .noprint,
-.noprint .print-only {
-  display: none;
-}
-
-pre {
-  max-width: 100%;
-}
-
-
-@media print {
-  html,
-  body {
-    font-size: 10pt;
-    min-width: 0 !important;
-  }
-
-  .noprint {
-    display: none;
-  }
-
-  .td-main main {
-    max-width: 100% !important;
-    flex: 1 1 0;
-  }
-
-  .td-content {
-    max-width: 100%;
-    // columns: 2;
-    column-gap: 4rem;
-    font-size: 1rem;
-
-    p, ul, ol, .alert {
-        line-height: 1.7em;
-        font-size: 1em;
-    }
-
-    > h1,
-    > h2,
-    > h3,
-    > p,
-    > ul,
-    > ol,
-    > .alert,
-    > .highlight,
-    > .lead,
-    > dl dd,
-    > pre,
-    .footnotes,
-    > blockquote {
-      // column-span: all;
-      max-width: 100%;
-    }
-
-    li {
-      margin-bottom: 0 !important;
-    }
-
-    h2 {
-      font-size: 1.6em;
-      column-span: all;
-      // page-break-before: always;
-    }
-    h3 {
-      font-size: 1.3em;
-    }
-
-    .print-figures {
-      counter-reset: step-figure;
-      margin: 1rem 0;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 0.5rem;
-    }
-
-    figure, .card {
-        // display: block;
-        position: relative;
-        // width: calc(50% - 0.25rem - 2px);
-        vertical-align: top;
-        margin: 0;
-        padding: 0 !important;
-        border: 1px solid black;
-        border-radius: 2mm;
-        overflow: hidden;
-
-        break-inside: avoid;
-        counter-increment: step-figure;
-        figcaption, .card-body {
-            position: relative;
-            margin: 0;
-            padding: 0.2rem 0.5rem !important;
-            border-top: inherit;
-        }
-    }
-
-    // .card {
-    //   padding: 0 !important;
-    //   border: 1px solid black;
-    //   border-radius: 2mm;
-    //   break-inside: avoid;
-    //   overflow: hidden;
-    //
-    //   .card-body {
-    //
-    //   }
-    // }
-
-    .section-index,
-    // "Last changed" row
-    > .text-muted:last-child {
-      display: none;
-    }
-
-    // Uncomment this to print without figures and images
-    // .card, .print-figures, img {
-    //   display: none;
-    // }
-
-    .alert {
-      border-width: 2px;
-      break-inside: avoid;
-    }
-
-    > table {
-        margin: 1rem auto;
-        break-inside: avoid;
-
-        td, thead th {
-            border: 1px solid black;
-            padding: 0.25rem 0.75rem;
-        }
-    }
-  }
-}
-
-@media screen {
-  .print-only {
-    display: none;
-  }
-}
-
-#td-cover-block-0 {
-  background-position: center;
-}
-
-.container {
-  figure {
-    img {
-      max-width: 100%;
-    }
-  }
-}
-
-.homepage-container {
-  font-size: 13pt;
-}
-
-.lead {
-  font-weight: 500;
-}
-
-.donations {
-  background: white;
-  color: #212730;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 1rem 2rem;
-  display: inline-block;
-  margin: 1rem auto;
-}
-
-.accordion .card-header {
-  cursor: pointer;
-  transition: background 0.1s;
-
-  &:hover {
-    background-color: #fff;
-  }
-}
-
-.alert.alert-info,
-.alert.alert-warning,
-.alert.alert-success {
-  border: 0;
-  border-radius: 4px;
-  font-size: 1rem;
-
-  .alert-heading {
-    font-size: 1.2rem;
-  }
-
-  @media print {
-    border-width: 2px;
-    border-style: solid;
-  }
-}
-
-.alert.alert-info {
-  background: #e1f5fe;
-  border-color: #1e88e5;
-
-  .alert-heading {
-    color: #1e88e5;
-  }
-}
-
-.alert.alert-warning {
-  background: #ffe7e4;
-  border-color: #ed6a5a;
-
-  .alert-heading {
-    color: #ed6a5a;
-  }
-}
-
-.alert.alert-success {
-  background: #ccefc6;
-  border-color: #199f67;
-
-  .alert-heading {
-    color: #199f67;
-  }
-}
-
-
-.alert > ul:last-child,
-.alert > p:last-child {
-  margin-bottom: 0;
-}
-
-.nav-item.dropdown .dropdown-menu {
-  margin-top: -1px;
-}
-
-.nav-item.dropdown:hover .dropdown-menu {
-  display: block;
-}
-
-.dropdown-item {
-  padding-left: 1rem;
-
-  &:active,
-  &.active {
-    background: none;
-    font-weight: bold;
-  }
-}
-
-.td-content,
-.content {
-  blockquote {
-    padding: 0.5rem 1.5rem;
-    margin-left: 1rem;
-    border-left: 4px solid #ddd;
-    color: #777;
-  }
-}
-
-.td-sidebar-nav {
-  padding: 1rem;
-  font-family: "Open Sans";
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    ul ul {
-      padding-left: 1.5rem;
-    }
-
-    li {
-      margin-bottom: 2px;
-    }
-  }
-
-  & > ul > li {
-    margin-bottom: 1rem;
-
-    & > a {
-      font-weight: 700;
-      text-transform: uppercase;
-    }
-  }
-
-  a {
-    display: block;
-    color: inherit;
-    border-radius: 3px;
-    padding: 0.25rem 0.75rem;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover {
-      color: inherit;
-      background: #f6f6f6;
-    }
-
-    &.current-page {
-      font-weight: 700;
-      color: $link-color;
-    }
-  }
-}
-
-@media (min-width: 768px) {
-
-  .td-page-meta {
-        top: 4rem;
-      position: sticky;
-  }
-  .td-sidebar-nav {
-    // max-height: calc(100vh - 64px);
-    max-height: none;
-    overflow: initial;
-  }
-
-  .td-sidebar__inner {
-    height: auto;
-    min-height: calc(100vh - 128px);
-  }
-
-  .td-docs .td-main {
-    display: flex;
-
-    .td-sidebar {
-      max-width: 20rem;
-      min-width: 15rem;
-      flex: 1 1 0;
-      margin-right: 2rem;
-    }
-
-    .td-toc {
-    order:2;
-     .td-toc {
-      top: 4rem;
-      position: sticky;
-      border-left: solid;
-      border-left-width: 1pt;
-      border-left-color: rgb(222, 226, 230);
-      max-width: 20rem;
-      min-width: 12rem;
-      flex: 1 1 0;
-      margin-left: 2rem;
-      padding: 1rem;
-      line-height: 1.2;
-
-      #TableOfContents a {
-        color: inherit;
-        &:hover {
-          color: #72A1E5;
-        }
-      }
-
-      li ul {
-        margin-bottom: 0.5em;
-      }
-
-      li li {
-        margin-left: 1.5em;
-        font-size: 0.9em;
-        list-style: inherit;
-        display: list-item;
-      }
-      li ul {
-        list-style: decimal;
-      }
-    }
-    }
-
-    > main {
-      flex: 4 4 0;
-    }
-  }
-}
-
-.feature-icon {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 200px;
-  opacity: 0.06;
-  pointer-events: none;
-}
-
-.feature-cell {
-    display: flex;
-    flex-direction: column;
-}
-
-address {
-    padding-left: 2rem;
-    font-size: 1.1em;
-    line-height: 1.5em;
-    font-weight: 100;
-}
-
-footer {
-    background: $primary;
-    color: white;
-    font-size: 0.8rem;
-    min-height: 0;
-    flex: 0 0 auto;
-    padding: 1rem 0;
-}
-
-.footer-copyright {
-    line-height: 1.5em;
-}
-
-
-.print-qr-link {
-    border: 1px solid black;
-    background: white;
-
-    display: none;
-    @media print {
-        display: flex;
-    }
-    align-items: center;
-    overflow: hidden;
-    padding: 1mm;
-    padding-left: 4mm;
-
-    img {
-        width: 3cm;
-        flex:  0 0 auto;
-    }
-
-    p {
-        flex: 1 1 0;
-        margin: 0;
-        padding: 0;
-        font-size: 11pt;
-        overflow: hidden;
-        word-wrap: break-word;
-    }
-
-    a {
-        color: inherit;
-        display: block;
-        text-decoration: inherit;
-        font-weight: bold;
-        font-family: $font-family-monospace;
-        white-space: wrap;
-        letter-spacing: -0.5pt;
-    }
-}
-
-@page {
-  size: A4 portrait;
-  margin: 0.6in;
-}
-
-.td-default main section.device-types-row {
-    background: #F8F8F8;
-    padding: 0;
-}
-
-.device-type-cell {
-    text-align: center;
-    padding-block: 4rem;
-    display: flex;
-    flex-direction: column;
-
-    .label {
-        order: -2;
-        height: 40px;
-        align-self: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0 1.5rem;
-        border-radius: 1000px;
-        margin-bottom: 1rem;
-        background: #EEE;
-        text-transform: uppercase;
-        letter-spacing: 0.7pt;
-        font-weight: 700;
-        font-size: 80%;
-    }
-
-    h4 {
-        order: -1;
-    }
-
-    &.light {
-        background: #FFF;
-    }
-
-    img {
-        margin-block: 1rem;
-        width: 70%;
-        height: 200px;
-        object-fit: contain;
-        align-self: center;
-    }
-
-    h4 > span {
-        display: block;
-        font-size: 120%;
-        opacity: 0.5;
-        margin-top: 0.2rem;
-    }
-
-    &.construction {
-        .label {
-            background: #ffd600;
-        }
-        img {
-            opacity: 0.3;
-        }
-    }
-
-    &.recommended {
-        .label {
-            background: #0029a7;
-            color: white;
-        }
-    }
-
-    ul {
-        text-align: left;
-        // align-self: center;
-    }
-}
diff --git a/assets/scss/baseline.scss b/assets/scss/baseline.scss
new file mode 100644
index 00000000..0dc378a9
--- /dev/null
+++ b/assets/scss/baseline.scss
@@ -0,0 +1,194 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  line-height: 1.7;
+  font-family: $font-family-base;
+  font-size: 12pt;
+  padding: 0;
+  margin: 0;
+}
+
+.content-grid {
+  --padding-inline: 1rem;
+  --content-max-width: 140ch;
+
+  display: grid;
+  grid-template-columns:
+  [full-width-start] #{"minmax(var(--padding-inline), 1fr)"}
+  [content-start]
+  #{"repeat(12, [col-start] calc(min(100% - (var(--padding-inline) * 2), var(--content-max-width)) / 12 - var(--padding-inline)) [col-end] var(--padding-inline) )"}
+  [content-end]
+  #{"minmax(var(--padding-inline), 1fr) [full-width-end]"};
+}
+
+.content-grid > :not(.full-width),
+.full-width > :not(.full-width) {
+  grid-column: content;
+}
+
+.content-grid > .full-width {
+  grid-column: full-width;
+}
+
+.content-grid .content-grid {
+  display: grid;
+  grid-template-columns: inherit;
+}
+
+a {
+  text-decoration: none;
+
+  &, &:visited {
+    color: $link-color;
+  }
+
+  &:hover {
+    color: lighten($link-color, 20%);
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  line-height: 1.2em;
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+}
+
+h1 {
+  font-size: 2.3rem;
+}
+
+h2 {
+  font-size: 1.9rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4, h5, h6 {
+  font-weight: 700;
+}
+h4 {
+  font-size: 1.3rem;
+}
+
+h5 {
+  font-size: 1.15rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+section {
+  padding-block: 4rem;
+  min-width: 0;
+}
+
+figure {
+  text-align: center;
+  > a > img {
+    max-width: 100%;
+  }
+}
+
+section.arrow {
+  position: relative;
+}
+
+section.arrow::after {
+  --width: 60px;
+  --height: 45px;
+
+  left: 50%;
+  margin-left: #{"calc(-1 * var(--width))"};
+  bottom: #{"calc(-1 * var(--height))"};
+  border-style: solid;
+  border-width: var(--height) var(--width) 0;
+  border-color: $gray transparent transparent transparent;
+  z-index: 3;
+  position: absolute;
+  content: "";
+}
+
+.docs {
+  .docs-footer {
+    font-size: $font-size-small;
+  }
+}
+
+pre {
+  max-width: 100%;
+}
+
+blockquote {
+  padding: 0.5rem 1.5rem;
+  margin-left: 1rem;
+  border-left: 4px solid #ddd;
+  color: #777;
+}
+
+table {
+  border-collapse: collapse;
+  margin-block: 2rem;
+}
+
+td, th {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid $grayish;
+  border-width: 1px 0;
+  vertical-align: top;
+}
+
+th {
+  text-align: left;
+  border-width: 2px 0;
+}
+tr:last-child td {
+  border-bottom-width: 2px;
+}
+
+.table-wide {
+  overflow: auto;
+
+  table {
+    width: 100%;
+    min-width: 60ch;
+  }
+}
+
+.breadcrumb {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  font-size: $font-size-small;
+
+  li {
+    display: inline-block;
+
+    &.active {
+      font-weight: 500;
+    }
+
+    &:not(:last-child)::after {
+      display: inline-block;
+      content: '/';
+      scale: 1.2;
+      opacity: 0.5;
+      margin-inline: 0.5rem;
+    }
+  }
+}
+
+address {
+  padding-left: 2rem;
+  font-size: 1.1em;
+  line-height: 1.5em;
+  font-weight: 100;
+}
diff --git a/assets/scss/features.scss b/assets/scss/features.scss
new file mode 100644
index 00000000..a6319369
--- /dev/null
+++ b/assets/scss/features.scss
@@ -0,0 +1,467 @@
+// Big intro text in a page or article
+
+.lead {
+  font-weight: 500;
+  font-size: 1.15rem;
+}
+
+// Donations IBAN box
+
+.donations {
+  background: white;
+  color: #212730;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 1rem 2rem;
+  display: inline-block;
+  margin: 1rem auto;
+}
+
+// Feature boxes
+
+.feature-cell {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .button {
+    margin-top: auto;
+    align-self: flex-start;
+  }
+
+  h3 {
+    margin-block: 0;
+  }
+
+  .inline-svg {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    translate: -50% -50%;
+    width: 60%;
+    height: auto;
+    opacity: 0.06;
+    pointer-events: none;
+  }
+}
+
+// Buttons
+
+.button {
+   background: rgba(0, 0, 0, 0.02);
+   box-shadow: rgba(0, 0, 0, 0.2) 0 5px;
+   border: 1px solid rgba(0, 0, 0, 0.1);
+   color: $gray;
+
+   &, &:visited {
+     color: $primary;
+   }
+
+   &:hover {
+     background: white;
+     color: $gray;
+   }
+
+  .dark &, .darkish &, .stage & {
+     background: rgba(255, 255, 255, 0.7);
+     box-shadow: rgba(0, 0, 0, 0.6) 0 5px;
+     &, &:visited, &:hover {
+       color: $primary;
+     }
+
+     &:hover {
+       background: white;
+     }
+   }
+
+   text-decoration: none;
+   padding: 0.4em 1.25em 0.3em;
+   border-radius: 0.25rem;
+   transition: all 0.25s ease-out;
+   font-weight: 500;
+
+   &:hover {
+     transform: translateY(-3px);
+   }
+}
+
+.action-buttons {
+  display: flex;
+  gap: 1em;
+}
+
+
+// Alerts
+
+.alert {
+  border: 0;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  padding: 1rem;
+  margin-block: 1rem;
+
+  .alert-heading {
+    margin: 0;
+    margin-block-end: 0.5rem;
+    font-size: 1.15rem;
+    font-weight: 500;
+  }
+
+  @media print {
+    border-width: 2px;
+    border-style: solid;
+  }
+}
+
+.alert-info {
+  background: #e1f5fe;
+  border-color: #1e88e5;
+
+  .alert-heading {
+    color: #1e88e5;
+  }
+}
+
+.alert-warning {
+  background: #ffe7e4;
+  border-color: #ed6a5a;
+
+  .alert-heading {
+    color: #ed6a5a;
+  }
+}
+
+.alert-success {
+  background: #ccefc6;
+  border-color: #199f67;
+
+  .alert-heading {
+    color: #199f67;
+  }
+}
+
+.alert > ul:last-child,
+.alert > p:last-child {
+  margin-bottom: 0;
+}
+
+// Image slider
+
+.ideal-image-slider {
+  max-width: 60rem;
+  margin: 2rem 0;
+}
+
+.slider.small {
+  max-width: 30rem;
+}
+
+// Youtube video embed
+
+.youtube-video-wrapper {
+  display: block;
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  width: 100%;
+  background: #000;
+  margin: 1rem 0;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background: transparent;
+  }
+
+  img {
+    object-fit: cover;
+    display: block;
+    left: 0;
+    bottom: 0;
+    margin: 0 auto;
+    max-width: 100%;
+    width: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: none;
+    height: auto;
+    cursor: pointer;
+    -webkit-transition: 0.4s all;
+    -moz-transition: 0.4s all;
+    transition: 0.4s all;
+  }
+
+  &:hover img {
+    -webkit-filter: brightness(75%);
+  }
+
+  .play {
+    height: 72px;
+    width: 72px;
+    left: 50%;
+    top: 50%;
+    margin-left: -36px;
+    margin-top: -36px;
+    position: absolute;
+    background: url("../images/play.png") no-repeat;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  .comment {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, 50px);
+    position: absolute;
+    z-index: 1;
+    cursor: pointer;
+    color: white;
+    text-align: center;
+  }
+}
+
+// Main stage on home page
+
+.stage {
+  position: relative;
+  overflow: clip;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: $gray;
+    z-index: -1;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: url('/featured-background.jpg');
+    background-position: center;
+    background-size: cover;
+    z-index: -1;
+
+    animation: stage-scroll-effect linear;
+    animation-timeline: view();
+    animation-range: exit -60px;
+  }
+
+  height: 50vh;
+  position: relative;
+  margin: 0;
+
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  gap: 1em;
+
+  > h2 {
+    font-size: #{"min(4.5vw, 4rem)"};
+    font-weight: 300;
+    margin: 0;
+  }
+
+  > p {
+    font-weight: 500;
+    margin: 0;
+    font-size: 1.2rem;
+  }
+
+  // Special banderole on the stage
+  .banderole {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    width: 25ch;
+    padding: 0;
+
+    > img {
+      width: 100%;
+      margin: 0;
+    }
+  }
+}
+
+@keyframes stage-scroll-effect {
+  from {}
+  to {opacity: 0; scale: 1.2; translate: 0 20%;}
+}
+
+// Special device variants page
+
+.device-types-row {
+    background: #F8F8F8;
+    padding: 0;
+}
+
+.device-type-cell {
+    text-align: center;
+    padding-block: 4rem;
+    display: flex;
+    flex-direction: column;
+
+    .label {
+        order: -2;
+        height: 40px;
+        align-self: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 1.5rem;
+        border-radius: 1000px;
+        margin-bottom: 1rem;
+        background: #EEE;
+        text-transform: uppercase;
+        letter-spacing: 0.7pt;
+        font-weight: 700;
+        font-size: 80%;
+    }
+
+    h4 {
+        order: -1;
+    }
+
+    &.light {
+        background: #FFF;
+    }
+
+    img {
+        margin-block: 1rem;
+        width: 70%;
+        height: 200px;
+        object-fit: contain;
+        align-self: center;
+    }
+
+    h4 > span {
+        display: block;
+        font-size: 120%;
+        opacity: 0.5;
+        margin-top: 0.2rem;
+    }
+
+    &.construction {
+        .label {
+            background: #ffd600;
+        }
+        img {
+            opacity: 0.3;
+        }
+    }
+
+    &.recommended {
+        .label {
+            background: #0029a7;
+            color: white;
+        }
+    }
+
+    ul {
+        text-align: left;
+        // align-self: center;
+    }
+
+    .button {
+      margin-top: auto;
+      align-self: center;
+    }
+}
+
+// Resistors
+
+.resistor {
+  font-size: $font-size-small;
+  text-align: center;
+  svg {
+    display: block;
+    margin: 0 auto 0.5rem;
+  }
+}
+
+// Buttons on bottom of blog entry to move around
+
+.blog-pager {
+  margin-block-start: 4rem;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+// Blog entry list
+
+ul.blog-posts,
+ul.section-index {
+  list-style: none;
+  padding: 0;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+
+  > li {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.25rem;
+    padding: 1rem;
+    min-width: 0;
+    overflow: hidden;
+
+    .date {
+      font-size: 1rem;
+      font-weight: 700;
+    }
+
+    h5 {
+      font-size: 1.2rem;
+      font-weight: bold;
+      margin-block-start: 0;
+      margin-block-end: 0;
+    }
+  }
+}
+@media ($media-desktop) {
+
+  ul.blog-posts,
+  ul.section-index {
+    grid-template-columns: 1fr;
+  }
+
+}
+
+ul.blog-posts > li > h5 > a {
+  color: inherit;
+}
+
+// Icons
+
+.inline-svg {
+  display: inline-block;
+  height: 1rem;
+  aspect-ratio: 1;
+  translate: 0 15%;
+
+  svg {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
new file mode 100644
index 00000000..03b91e6b
--- /dev/null
+++ b/assets/scss/layout.scss
@@ -0,0 +1,349 @@
+#header {
+  background: $gray;
+  color: white;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  padding: 0 16px;
+  position: sticky;
+  top: 0;
+  z-index: 10000;
+
+  .site-title {
+    color: inherit;
+    white-space: nowrap;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1.3rem;
+    // text-transform: uppercase;
+  }
+
+  .site-icon {
+    margin-right: 1rem;
+    display: block;
+    padding: 0;
+
+    svg {
+      width: 50px;
+      height: 50px;
+      margin: 0;
+      display: block;
+      align-self: center;
+    }
+  }
+
+  nav.menu {
+    margin-inline-start: auto;
+    display: flex;
+    align-self: stretch;
+    align-items: stretch;
+
+    > ul {
+      list-style: none;
+      display: flex;
+      align-items: stretch;
+      padding: 0;
+      margin: 0;
+
+      > li {
+        position: relative;
+        display: flex;
+        align-items: stretch;
+
+        > a, span {
+          font-weight: 500;
+          align-self: stretch;
+          display: flex;
+          align-items: center;
+          padding: 0 1rem;
+          text-decoration: none;
+          color: inherit;
+          font-weight: 500;
+          font-size: 1.15rem;
+          cursor: pointer;
+        }
+
+        > ul {
+          display: none;
+          position: absolute;
+          right: 0;
+          top: 100%;
+          background: $grayish;
+          margin: 0;
+          padding: 0.5rem 0;
+
+          > li {
+            display: block;
+            white-space: nowrap;
+
+            > a, > span {
+              color: inherit;
+              display: block;
+              text-decoration: none;
+              padding: 0.25rem 2rem 0.25rem 1rem;
+
+              &:hover, &:focus-within {
+                background: rgba(255, 255, 255, 0.1);
+              }
+            }
+          }
+        }
+
+        &:focus-within, &:hover {
+          > ul {
+            display: block;
+          }
+
+          > a, span {
+            background: $grayish;
+          }
+        }
+      }
+    }
+  }
+}
+
+nav.sidebar {
+  padding: 1rem;
+  font-family: "Open Sans";
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    ul ul {
+      padding-left: 1.5rem;
+    }
+
+    li {
+      margin-bottom: 2px;
+    }
+  }
+
+  & > ul > li {
+    margin-bottom: 1rem;
+
+    & > a {
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+  }
+
+  a {
+    display: block;
+    color: inherit;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.75rem;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+
+    &:hover {
+      color: inherit;
+      background: #f6f6f6;
+    }
+
+    &.current-page {
+      font-weight: 700;
+      color: $link-color;
+    }
+  }
+}
+
+aside.toc {
+  padding: 1rem;
+
+  h6 {
+    margin: 0;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 0.25rem 0.75rem;
+    line-height: inherit;
+  }
+
+  ul {
+    padding-left: 3ch;
+    // margin: 0;
+    list-style: decimal;
+  }
+
+  ul ul {
+    padding-left: 0;
+    list-style: decimal;
+    margin-bottom: 0.5em;
+  }
+
+  li li {
+    margin-left: 1.5em;
+    font-size: 0.9em;
+    list-style: inherit;
+    display: list-item;
+  }
+}
+
+footer {
+    background: $primary;
+    color: white;
+    font-size: $font-size-small;
+    min-height: 0;
+    flex: 0 0 auto;
+    padding: 1rem 0;
+}
+
+.footer-copyright {
+    line-height: 1.5em;
+}
+
+#mobile-sidebar-toggle {
+  display: none;
+}
+
+@media ($media-mobile) {
+  #header {
+    position: relative;
+    min-width: 0;
+
+    > nav.menu > ul {
+      flex-wrap: wrap-reverse;
+      > li {
+        position: initial;
+
+        > a, > span {
+          font-size: $font-size-small;
+          white-space: nowrap;
+        }
+
+        > ul {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          bottom: initial;
+        }
+      }
+    }
+  }
+
+  .site-title {
+    display: none;
+  }
+
+  #header nav.menu > ul > li:first-child {
+    display: none;
+  }
+
+  .docs {
+    aside.sidebar {
+      transition: all 0.5s;
+      overflow: auto;
+      position: absolute;
+      width: 100%;
+      background: white;
+      display: none;
+
+      height: #{"calc(100vh - 100px)"};
+      box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    }
+
+    aside.toc {
+      padding: 1rem;
+      h6 {
+        margin: 0;
+      }
+    }
+
+    > main {
+      padding: 1rem;
+    }
+
+    .mobile-sidebar-toggle-label {
+      background: $secondary;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      padding: 0 1rem;
+      height: 40px;
+      display: flex;
+      align-items: center;
+
+      .inline-svg {
+        margin-right: 0.5rem;
+        height: 24px;
+      }
+
+      > :last-child { display: none; }
+    }
+
+    #mobile-sidebar-toggle:checked ~ {
+      .mobile-sidebar-toggle-label {
+        > :last-child { display: initial; }
+        > :first-child { display: none; }
+      }
+
+      aside.sidebar {
+        display: block;
+      }
+    }
+  }
+
+  ul.blog-posts {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media ($media-desktop) {
+  .mobile-sidebar-toggle-label {
+    display: none;
+  }
+
+  .docs {
+    display: grid;
+    grid-column: full-width;
+    grid-template-columns: 20rem 1fr 20rem;
+    grid-template-areas: "left center right";
+    gap: 2rem;
+    position: relative;
+
+    aside.sidebar {
+      grid-area: left;
+    }
+
+    aside.toc {
+      grid-area: right;
+    }
+
+    > main {
+      max-width: 100ch;
+      min-width: 0x;
+      padding-bottom: 4rem;
+    }
+  }
+
+
+  .columns-2 {
+    > :nth-child(2n + 1) { grid-column: col-start 1 / col-end 6; }
+    > :nth-child(2n + 2) { grid-column: col-start 7 / col-end 12; }
+  }
+
+  .columns-3 {
+    > :nth-child(3n + 1) { grid-column: col-start 1 / col-end 4; }
+    > :nth-child(3n + 2) { grid-column: col-start 5 / col-end 8; }
+    > :nth-child(3n + 3) { grid-column: col-start 9 / col-end 12; }
+  }
+}
+
+section.dark {
+  background: $gray;
+  color: white;
+}
+
+section.darkish {
+  background: $grayish;
+  color: white;
+}
+
+.content-grid > section.narrow {
+    grid-column: col-start 3 / col-end 10;
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
new file mode 100644
index 00000000..c3a2c3d6
--- /dev/null
+++ b/assets/scss/main.scss
@@ -0,0 +1,9 @@
+// @import "../vendor/Font-Awesome/scss/fontawesome.scss";
+// @import "../vendor/Font-Awesome/scss/solid.scss";
+// @import "../vendor/Font-Awesome/scss/brands.scss";
+//
+@import "variables.scss";
+@import "baseline.scss";
+@import "layout.scss";
+@import "features.scss";
+@import "print.scss";
diff --git a/assets/scss/print.scss b/assets/scss/print.scss
new file mode 100644
index 00000000..e28ba051
--- /dev/null
+++ b/assets/scss/print.scss
@@ -0,0 +1,180 @@
+@page {
+  size: A4 portrait;
+  margin: 0.6in;
+}
+
+@media screen {
+  .print-only {
+    display: none;
+  }
+}
+
+.print-only .noprint,
+.noprint .print-only {
+  display: none;
+}
+
+
+@media print {
+  html,
+  body {
+    font-size: 10pt;
+    min-width: 0 !important;
+  }
+
+  .noprint {
+    display: none;
+  }
+
+  .td-main main {
+    max-width: 100% !important;
+    flex: 1 1 0;
+  }
+
+  .td-content {
+    max-width: 100%;
+    // columns: 2;
+    column-gap: 4rem;
+    font-size: 1rem;
+
+    p, ul, ol, .alert {
+        line-height: 1.7em;
+        font-size: 1em;
+    }
+
+    > h1,
+    > h2,
+    > h3,
+    > p,
+    > ul,
+    > ol,
+    > .alert,
+    > .highlight,
+    > .lead,
+    > dl dd,
+    > pre,
+    .footnotes,
+    > blockquote {
+      // column-span: all;
+      max-width: 100%;
+    }
+
+    li {
+      margin-bottom: 0 !important;
+    }
+
+    h2 {
+      font-size: 1.6em;
+      column-span: all;
+      // page-break-before: always;
+    }
+    h3 {
+      font-size: 1.3em;
+    }
+
+    .print-figures {
+      counter-reset: step-figure;
+      margin: 1rem 0;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.5rem;
+    }
+
+    figure, .card {
+        // display: block;
+        position: relative;
+        // width: calc(50% - 0.25rem - 2px);
+        vertical-align: top;
+        margin: 0;
+        padding: 0 !important;
+        border: 1px solid black;
+        border-radius: 2mm;
+        overflow: hidden;
+
+        break-inside: avoid;
+        counter-increment: step-figure;
+        figcaption, .card-body {
+            position: relative;
+            margin: 0;
+            padding: 0.2rem 0.5rem !important;
+            border-top: inherit;
+        }
+    }
+
+    // .card {
+    //   padding: 0 !important;
+    //   border: 1px solid black;
+    //   border-radius: 2mm;
+    //   break-inside: avoid;
+    //   overflow: hidden;
+    //
+    //   .card-body {
+    //
+    //   }
+    // }
+
+    .section-index,
+    // "Last changed" row
+    > .text-muted:last-child {
+      display: none;
+    }
+
+    // Uncomment this to print without figures and images
+    // .card, .print-figures, img {
+    //   display: none;
+    // }
+
+    .alert {
+      border-width: 2px;
+      break-inside: avoid;
+    }
+
+    > table {
+        margin: 1rem auto;
+        break-inside: avoid;
+
+        td, thead th {
+            border: 1px solid black;
+            padding: 0.25rem 0.75rem;
+        }
+    }
+  }
+}
+
+.print-qr-link {
+    border: 1px solid black;
+    background: white;
+
+    display: none;
+    @media print {
+        display: flex;
+    }
+    align-items: center;
+    overflow: hidden;
+    padding: 1mm;
+    padding-left: 4mm;
+
+    img {
+        width: 3cm;
+        flex:  0 0 auto;
+    }
+
+    p {
+        flex: 1 1 0;
+        margin: 0;
+        padding: 0;
+        font-size: 11pt;
+        overflow: hidden;
+        word-wrap: break-word;
+    }
+
+    a {
+        color: inherit;
+        display: block;
+        text-decoration: inherit;
+        font-weight: bold;
+        font-family: $font-family-monospace;
+        white-space: wrap;
+        letter-spacing: -0.5pt;
+    }
+}
diff --git a/assets/scss/rtl/_main.scss b/assets/scss/rtl/_main.scss
deleted file mode 100644
index 4391c470..00000000
--- a/assets/scss/rtl/_main.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Empty file to disable docsy's RTL styles which pull in a lot of remote resources.
diff --git a/assets/scss/_variables_project.scss b/assets/scss/variables.scss
similarity index 77%
rename from assets/scss/_variables_project.scss
rename to assets/scss/variables.scss
index ff9ee783..8ecb3ff9 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/variables.scss
@@ -1,28 +1,22 @@
-/*
-
-Add styles or override variables from the theme here.
-
-*/
-
-
 $primary: #212730;
 $primary-light: #3e4a5d;
 $secondary: #f1f1f6;
-
-// $td-sidebar-bg-color: #e9f1ff;
-// $td-sidebar-border-color: #d4e4ff;
-$td-sidebar-bg-color: #FFFFFF;
+$gray: rgb(33, 39, 48);
+$grayish: #403f4c;
 $td-sidebar-border-color: #d4e4ff;
 
-$link-color: #3489DD;
-
-$td-enable-google-fonts: false;
+$link-color: #1565C0;
 
-$font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-sans-serif: "Open Sans", Roboto, sans-serif;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
 
-// $font-size-base: 1.2rem;
+$font-size-small: 0.85rem;
+$font-size-base: 1rem;
 
-$enable-rounded: false;
+$desktop-size: 1024px;
+$media-mobile: screen and (max-width: ($desktop-size - 1px));
+$media-desktop: screen and (min-width: $desktop-size);
 
 // Source: https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
 
diff --git a/config.toml b/config.toml
index 2432e58e..102ae861 100644
--- a/config.toml
+++ b/config.toml
@@ -1,14 +1,7 @@
 baseURL = "/"
 title = "Goldydocs"
-
 enableRobotsTXT = true
-
-# Hugo allows theme composition (and inheritance). The precedence is from left to right.
-theme = ["github.com/google/docsy"]
-
 timeout = 500000 # uh oh
-
-# Will give values to .Lastmod etc.
 enableGitInfo = true
 
 # Language settings
@@ -143,8 +136,6 @@ github_branch = "main"
 [params.ui]
 # Enable to show the side bar menu in its compact state.
 sidebar_menu_compact = false
-#  Set to true to disable breadcrumb navigation.
-breadcrumb_disable = false
 #  Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
 sidebar_search_disable = false
 #  Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top nav bar
diff --git a/content/_index.de.html b/content/_index.de.html
index ccc09302..5adabdc8 100644
--- a/content/_index.de.html
+++ b/content/_index.de.html
@@ -10,176 +10,82 @@
     byline: "Erstellt August 2020"
 ---
 
-{{< blocks/cover title="OpenBikeSensor" image_anchor="top" height="400" >}}
 <!-- mastodon needs exactly this a href for verification. Because it's hard to style let's put it here and hide it. Clickable link below -->
 <div style="display:none"><a href="https://verkehrswende.social/@OpenBikeSensor" rel="me">mastodon</a></div>
 
-<div class="mx-auto">
-
-	<h2 class="display-4 mb-3">Überholabstandsmessung für Radfahrende</h2>
-	<p class="mb-5">Open Innovation, Open Source, Open Data, Open Science</p>
-<div>
-	<a class="btn btn-lg btn-secondary me-3 mb-4" href="https://forum.openbikesensor.org" target="_blank" rel="noopener noreferrer nofollow">
-		<i class="fab fa-discourse me-1"></i> Forum
-	</a>
-
-	<a class="btn btn-lg btn-secondary me-3 mb-4" href="https://matrix.to/#/#openbikesensor:matrix.org" rel="noopener noreferrer nofollow">
-		<img alt="Matrix logo" src="/icons/matrix favicon.svg" width="26pt" style="vertical-align:top" /> Matrix
-	</a>
-
-	<a class="btn btn-lg btn-secondary me-3 mb-4" href="https://github.com/openbikesensor" target="_blank" rel="noopener noreferrer nofollow">
-		<i class="fab fa-github me-1"></i> GitHub
-	</a>
-
-	<a class="btn btn-lg btn-secondary me-3 mb-4" href="{{< relref "/docs" >}}">
-    <i class="fas fa-book-open me-1"></i> Dokumentation
-	</a>
-
-	<a class="btn btn-lg btn-secondary me-3 mb-4" href="#unterstuetzen" rel="noopener noreferrer nofollow">
-		<i class="fas fa-hand-holding-heart me-1"></i> Unterstützen
-	</a>
-
-	<a class="btn btn-lg btn-secondary me-3 mb-4" href="https://verkehrswende.social/@OpenBikeSensor" target="_blank" rel="me noopener noreferrer nofollow">
-		<i class="fab fa-mastodon me-1"></i> Mastodon
-	</a>
-</div>
-</div>
-{{< /blocks/cover >}}
-
-{{% blocks/section color="primary" %}}
-
-<div class="container">
-<div class="row" style="padding: 0">
-{{% blocks/feature icon="fab fa-discourse" title="Fragen und Diskutieren" url="https://forum.openbikesensor.org" url_text="Zum Forum" %}}
-Komm in unser Discourse-Forum, und diskutiere mit den anderen Interessierten
-und Aktiven. Hier findet fast alles einen Platz: Unterstützung bei Problemen,
-Lokalgruppen, Forschungs&shy;projekte, Events, Entwicklungsthemen, und vieles mehr.
-{{% /blocks/feature %}}
-
-{{% blocks/feature icon="fas fa-biking" title="Bauen & Daten sammeln" url="/bauanleitung" url_text="Zur Bauanleitung" %}}
-Bau Dir Deinen eigenen Überholabstandsmesser. Wir unterstützen Dich dabei. Am
-besten schließt Du Dich einer der Sammelbestellungen und einem unserer
-Regio-Teams an.
-{{% /blocks/feature %}}
-
-{{% blocks/feature icon="fab fa-github" title="Weiterentwickeln" url="https://github.com/openbikesensor" url_text="Zu den GitHub-Repositories" %}}
-Was wir erstellen ist quelloffen, auf GitHub veröffentlichen wir den kompletten
-Code. Hier findest Du auch alle Pläne und Anleitungen sowie die Software zur
-Visualisierung der gesammelten Daten.
-{{% /blocks/feature %}}
-</div>
-</div>
-
-{{% /blocks/section %}}
-
-<a name="einleitung" id="einleitung"></a>
-
-{{% blocks/section color="#fff" %}}
-<div class="container">
-
+<section class="stage full-width">
+  <a class="banderole" href="blog/2024/02/01/nachruf/"><img  src="natenom_banderole.png"/></a>
+
+	<p>Der OpenBikeSensor ist ein offenes System zur</p>
+	<h2>Überholabstandsmessung für Radfahrende</h2>
+
+  <div class="action-buttons">
+    <a class="button" href="https://forum.openbikesensor.org" target="_blank" rel="noopener noreferrer nofollow">
+      {{% fa "discourse" %}} Forum
+    </a>
+
+    <a class="button" href="https://matrix.to/#/#openbikesensor:matrix.org" target="_blank" rel="noopener noreferrer nofollow">
+      <img alt="Matrix logo" src="/icons/matrix favicon.svg" width="26pt" style="vertical-align:top" /> Matrix
+    </a>
+
+    <a class="button" href="https://github.com/openbikesensor" target="_blank" rel="noopener noreferrer nofollow">
+      {{% fa "github" %}} GitHub
+    </a>
+
+    <a class="button" href="https://verkehrswende.social/@OpenBikeSensor" target="_blank" rel="me noopener noreferrer nofollow">
+      {{% fa "mastodon" %}} Mastodon
+    </a>
+  </div>
+</section>
+
+<section class="columns-3 dark full-width content-grid">
+  {{% blocks/feature icon="discourse" title="Fragen und Diskutieren" url="https://forum.openbikesensor.org" url_text="Zum Forum" %}}
+  Komm in unser Discourse-Forum, und diskutiere mit den anderen Interessierten
+  und Aktiven. Hier findet fast alles einen Platz: Unterstützung bei Problemen,
+  Lokalgruppen, Forschungs&shy;projekte, Events, Entwicklungsthemen, und vieles mehr.
+  {{% /blocks/feature %}}
+
+  {{% blocks/feature icon="person-biking" title="Bauen & Daten sammeln" url="/bauanleitung" url_text="Zur Bauanleitung" %}}
+  Bau Dir Deinen eigenen Überholabstandsmesser. Wir unterstützen Dich dabei. Am
+  besten schließt Du Dich einer der Sammelbestellungen und einem unserer
+  Regio-Teams an.
+  {{% /blocks/feature %}}
+
+  {{% blocks/feature icon="github" title="Weiterentwickeln" url="https://github.com/openbikesensor" url_text="Zu den GitHub-Repositories" %}}
+  Was wir erstellen ist quelloffen, auf GitHub veröffentlichen wir den kompletten
+  Code. Hier findest Du auch alle Pläne und Anleitungen sowie die Software zur
+  Visualisierung der gesammelten Daten.
+  {{% /blocks/feature %}}
+</section>
+
+<section>
 <h2>OpenBikeSensor – OpenCitizenScience</h2>
 
-Wir sind eine Gruppe von aktiven Alltagsradler:innen und möchten Radfahren sicherer und populärer machen. Überall!
-
-Wie oft passiert es uns, dass uns ein Auto beinahe vom Sattel holt? Was wir alle kennen, überprüfen wir nun wissenschaftlich. Dazu haben wir einen Sensor entwickelt, der den Abstand misst und Überholmanöver Geodaten zuordnet. Wo ist es sicher? Wo nicht? Welche Uhrzeit? Welche Strecken? Der Sensor soll helfen, das zu erkennen und zu belegen.
-
-{{< yt id=Ym3BeUaSrWo thumbnail="/thumbnails/Ym3BeUaSrWo.jpg" >}}
-
-</div>
-{{% /blocks/section %}}
-
-{{% blocks/section color="secondary" %}}
-<div class="container">
-{{% md %}}
-
-## Teil der Lösung
-
-Unser Ziel ist, Schwachstellen und Verbesserungspotenzial in der Verkehrsinfrastruktur aufzuzeigen und diese in Kooperation mit Stadtplaner:innen zu beheben. Zudem wollen wir die gesellschaftliche Wirkung von Kampagnen wie beispielsweise <a href="https://twitter.com/search?q=%23AnderthalbMeter&src=typed_query&f=live" target="_blank" rel="noopener noreferrer nofollow">#AnderthalbMeter</a> (in Städten) messen. Um statistisch verlässliche Open Data zu erhalten, ist es wichtig, dass möglichst viele Alltagsradler:innen mit unseren Sensoren offene Daten erfassen. Mit den von allen gesammelten Daten wiederum lassen sich individuelle Auswertungen vornehmen; von Initiativen, Kommunen und von Euch (Open Citizen Science).
-
-Zentrales Hilfsmittel und Namensgeber des OpenBikeSensors ist unser Überholabstandsmesser, ein kleines technisches Gerät am Fahrrad. Während der Fahrt misst es den Abstand nach links und rechts (minus Lenkerbreite) und zeichnet die Fahrt via GPS auf. Überholmanöver kann die:der Radler:in per Taste am Lenker bestätigen. Nicht aufgezeichnet werden Fahrzeug- oder Personendaten der Überholenden. Uns geht es hauptsächlich um die Seitenabstände zu anderen Verkehrsteilnehmer:innen.
-
-Wir wünschen uns, dass unser Sensor von vielen genutzt und weiterentwickelt wird. Die <a href="{{< relref "/docs/classic/build-instructions">}}">Anleitung zum Selberbauen und Montieren</a> ist für alle als Open Source verfügbar – hier auf unserer Website und <a href="https://github.com/openbikesensor" target="_blank" rel="noopener noreferrer nofollow">quelloffen via GitHub</a>. Wir entwickeln für die offenen Daten zudem <a href="{{< relref "#visualisierung">}}">Visualisierungskonzepte</a> (inklusive Visualisierungssoftware) und werten die Ergebnisse gemeinsam mit Forschungspartner:innen aus.
+<p>Wir sind eine Gruppe von aktiven Alltagsradler:innen und möchten Radfahren sicherer und populärer machen. Überall!</p>
 
-Uns geht es jedoch nicht nur um die Technik. Ergänzend entwickeln wir gemeinsam mit zivilgesellschaftlichen Organisationen und Kommunen regionale Aktionen, Kampagnen und Verkehrskonzepte. Wir gestalten Gesellschaft und leisten so einen Beitrag für mehr Lebensqualität in den Städten und auf dem Land.
+<p>Wie oft passiert es uns, dass uns ein Auto beinahe vom Sattel holt? Was wir alle kennen, überprüfen wir nun wissenschaftlich. Dazu haben wir einen Sensor entwickelt, der den Abstand misst und Überholmanöver Geodaten zuordnet. Wo ist es sicher? Wo nicht? Welche Uhrzeit? Welche Strecken? Der Sensor soll helfen, das zu erkennen und zu belegen.</p>
+</section>
 
+<div class="full-width content-grid columns-2">
 
-Es wäre toll, wenn schon bald viele mitmachen, und wir so zusammen Bewegung in die Sache bringen.
-
-Klingt interessant? <a href="{{< relref "/community" >}}">Hier kannst Du Teil der Community werden.</a>
-{{% /md %}}
-
-
-</div>
-{{% /blocks/section %}}
-
-<a name= id="visualisierung" id="visualisierung"></a>
-
-{{% blocks/section color="#000" %}}
-<div class="container">
-
-<h2>Visualisierung</h2>
-{{% md %}}
-Ein wichtiger Bestandteil des Projektes ist die Auswertbarkeit der gesammelten Daten. Daher arbeiten wir fleißig daran, die in den jeweiligen "Tracks" gespeicherten Werte zu extrahieren und visuell aufzubereiten.
-
-Hier zeigen wir nur ein Beispiel einer Auswertung von einigen Überholvorgängen in Stuttgart. Es handelt sich dabei um einen erfahrenen Radfahrer, der routiniert und selbstbewusst im Straßenverkehr unterwegs ist. Natürlich wurde auch er sehr oft mit weniger als 1,5&thinsp;m Abstand überholt. Der Überholabstandsmesser erfasste sogar Messwerte unter 50&thinsp;cm.
-
-{{< imgproc visualisierung Resize "800x" />}}
-
-Ein anderes Beispiel zeigt einen einzelnen Überholvorgang, von dem auch eine Videoaufzeichnung vorhanden war. Wir blenden dazu einige GPS-Informationen ein, sowie den gemessenen Seitenabstand im jeweiligen Moment des Videos. Die Gefahrensituation für den:die Radfahrer:in wird dadurch nachempfindbar.
+{{< yt id=Ym3BeUaSrWo thumbnail="/thumbnails/Ym3BeUaSrWo.jpg" >}}
 
 {{< yt id=izUD16ffs_Q thumbnail="/thumbnails/izUD16ffs_Q.jpg" >}}
 
-Wer noch Ideen zur Visualisierung, Automatisierung, Programmierung, Auswertung, etc. hat oder einfach am Projekt interessiert ist und mitgestalten will, ist herzlich <a href="{{< relref "/community" >}}">in die Community</a> eingeladen.
-
-{{% /md %}}
 </div>
-{{% /blocks/section %}}
 
-<a id="unterstuetzen" name="unterstuetzen"></a>
+<section>
+<h2>Teil der Lösung</h2>
 
-{{% blocks/section color="primary" %}}
-<div class="container">
+<p>Unser Ziel ist, Schwachstellen und Verbesserungspotenzial in der Verkehrsinfrastruktur aufzuzeigen und diese in Kooperation mit Stadtplaner:innen zu beheben. Zudem wollen wir die gesellschaftliche Wirkung von Kampagnen wie beispielsweise <a href="https://twitter.com/search?q=%23AnderthalbMeter&src=typed_query&f=live" target="_blank" rel="noopener noreferrer nofollow">#AnderthalbMeter</a> (in Städten) messen. Um statistisch verlässliche Open Data zu erhalten, ist es wichtig, dass möglichst viele Alltagsradler:innen mit unseren Sensoren offene Daten erfassen. Mit den von allen gesammelten Daten wiederum lassen sich individuelle Auswertungen vornehmen; von Initiativen, Kommunen und von Euch (Open Citizen Science).</p>
 
-<h2 style="color: #fff;">Sei treibende Kraft</h2>
+<p>Zentrales Hilfsmittel und Namensgeber des OpenBikeSensors ist unser Überholabstandsmesser, ein kleines technisches Gerät am Fahrrad. Während der Fahrt misst es den Abstand nach links und rechts (minus Lenkerbreite) und zeichnet die Fahrt via GPS auf. Überholmanöver kann die:der Radler:in per Taste am Lenker bestätigen. Nicht aufgezeichnet werden Fahrzeug- oder Personendaten der Überholenden. Uns geht es hauptsächlich um die Seitenabstände zu anderen Verkehrsteilnehmer:innen.</p>
 
-{{% md %}}
+<p>Wir wünschen uns, dass unser Sensor von vielen genutzt und weiterentwickelt wird. Die <a href="{{< relref "/docs/classic/build-instructions">}}">Anleitung zum Selberbauen und Montieren</a> ist für alle als Open Source verfügbar – hier auf unserer Website und <a href="https://github.com/openbikesensor" target="_blank" rel="noopener noreferrer nofollow">quelloffen via GitHub</a>. Wir entwickeln für die offenen Daten zudem <a href="{{< relref "#visualisierung">}}">Visualisierungskonzepte</a> (inklusive Visualisierungssoftware) und werten die Ergebnisse gemeinsam mit Forschungspartner:innen aus.</p>
 
-Es gibt viele Arten, wie Du das OpenCitizenScience-Projekt OpenBikeSensor unterstützen kannst, auch wenn Du nicht selbst aktiv werden möchtest.
+<p>Uns geht es jedoch nicht nur um die Technik. Ergänzend entwickeln wir gemeinsam mit zivilgesellschaftlichen Organisationen und Kommunen regionale Aktionen, Kampagnen und Verkehrskonzepte. Wir gestalten Gesellschaft und leisten so einen Beitrag für mehr Lebensqualität in den Städten und auf dem Land.</p>
 
-### Weitersagen heißt Unterstützen
-
-Erzähle Freund:innen, Verwandten, Kolleg:innen und Geschäftspartner:innen von uns.
-
-Folge uns via Twitter <a href="https://twitter.com/openbikesensor" target="_blank" rel="noopener noreferrer nofollow">@OpenBikeSensor</a> und werde Teil unserer Twitterei.
-
-### Spenden – jeder Beitrag zählt
-
-Die Arbeit rund um den OpenBikeSensor ist sehr zeitaufwändig und kostspielig.
-Der [OpenBikeSensor e. V.]({{< relref "verein" >}}) nimmt gern Spenden
-entgegen, die in die Arbeit der Community fließen und künftige Projekte
-unterstützen.
-
-Bis 200&thinsp;€ reicht der Kontoauszug, um Spenden steuerlich absetzen zu können.
-Dafür unbedingt den Verwendungszweck so ausfüllen
-
-<pre class="donations">
-IBAN: DE40 4306 0967 1294 8595 00 (GLS)
-Kontoinhaber: OpenBikeSensor e. V.
-Verwendungszweck: Spende OpenBikeSensor
-</pre>
-
-Hier ein paar Beispiele, was wir mit Euren Spenden alles erreichen können:
-
-- Wir kaufen mit Mengenrabatt und reduzierten Versandkosten neue Hardware und Bauteile ein. Diese bringen wir Euch dann zu Workshops mit, welche wir veranstalten.
-- Wir stellen Bausätze zusammen, damit Interessierte keine 6-8 Wochen auf Teile aus China warten müssen, sondern zügig loslegen können.
-- Wir bauen Geräte, die wir für Aktionszeiträume an Engagierte ausleihen. Die Koordination übernehmen unsere Regio-Teams.
-- Unsere Entwickler:innen können Hardware für Verbesserungen und Erweiterungen bestellen, ohne das Geld selbst vorschießen zu müssen.
-- Wir finanzieren die IT-Infrastruktur für Ko-Kreation und Kollaboration unseres Netzwerks.
-
-Die Ausgaben des Vereins werden transparent gegenüber der Community kommuniziert und mit allen abgestimmt. Mehr dazu findest Du
-auf den Unterseiten [des Vereins]({{< relref "verein" >}}).
-
-{{% /md %}}
-</div>
-{{% /blocks/section %}}
+<p>Es wäre toll, wenn schon bald viele mitmachen, und wir so zusammen Bewegung in die Sache bringen.</p>
 
+<p>Klingt interessant? <a href="{{< relref "/community" >}}">Hier kannst Du Teil der Community werden.</a></p>
+</section>
diff --git a/content/blog/2024-02-01-nachruf-natenom/index.de.md b/content/blog/2024-02-01-nachruf-natenom/index.de.md
index b0c52d53..47853af2 100644
--- a/content/blog/2024-02-01-nachruf-natenom/index.de.md
+++ b/content/blog/2024-02-01-nachruf-natenom/index.de.md
@@ -4,6 +4,10 @@ date: '2024-02-01'
 linkTitle: Nachruf Natenom
 description: >
   Wir trauern um Natenom, den engagierten Fahrradaktivisten aus Pforzheim
+resources:
+- src: natenom_nachruf_scale.jpg
+  params:
+    byline: "Example"
 
 ---
 
diff --git a/content/community/_index.de.md b/content/community/_index.de.md
index eb2f3542..8c57c7c7 100644
--- a/content/community/_index.de.md
+++ b/content/community/_index.de.md
@@ -10,10 +10,7 @@ aliases:
 - /project
 ---
 
-<section class="row td-box td-box--1 position-relative td-box--gradient td-box--height-auto">
-<div class="container">
-<div class="container text-center td-arrow-down">
-<span class="h4 mb-0">
+<section class="dark full-width content-grid arrow">
 
 # Werde Teil der OpenBikeSensor-Community
 
@@ -21,40 +18,33 @@ Der OpenBikeSensor ist ein offenes Projekt an dem alle teilnehmen können. Hilf
 mit, den Sensor weiterzuentwickeln, auszuprobieren, Daten zu sammeln und
 auszuwerten. So kannst du mitmachen:
 
-</span>
-</div>
-</div>
 </section>
 
-{{% blocks/section color="dark" %}}
-<div class="container">
-<div class="row p-0">
+<section class="darkish full-width content-grid columns-3">
 
-{{% blocks/feature icon="fab fa-discourse" title="Fragen und Diskutieren" url="https://forum.openbikesensor.org" url_text="Zum Forum" %}}
+{{% blocks/feature icon="discourse" title="Fragen und Diskutieren" url="https://forum.openbikesensor.org" url_text="Zum Forum" %}}
 Komm in unser Discourse-Forum, und diskutiere mit den anderen Interessierten
 und Aktiven. Hier findet fast alles einen Platz: Unterstützung bei Problemen,
 Lokalgruppen, Forschungs&shy;projekte, Events, Entwicklungsthemen, und vieles mehr.
 {{% /blocks/feature %}}
 
-{{% blocks/feature icon="fab fa-github" title="Weiterentwickeln" url="https://github.com/openbikesensor" url_text="Zu den GitHub-Repositories" %}}
+{{% blocks/feature icon="github" title="Weiterentwickeln" url="https://github.com/openbikesensor" url_text="Zu den GitHub-Repositories" %}}
 Was wir erstellen ist quelloffen, auf GitHub veröffentlichen wir den kompletten
 Code. Hier findest Du auch alle Pläne und Anleitungen sowie die Software zur
 Visualisierung der gesammelten Daten.
 {{% /blocks/feature %}}
 
-{{% blocks/feature icon="fa fa-video" title="Austauschen" url="#treffen" url_text="So nimmst du teil" %}}
+{{% blocks/feature icon="video" title="Austauschen" url="#treffen" url_text="So nimmst du teil" %}}
 Fast wöchentlich tauschen wir uns zu aktuellen Themen und zum Fortschritt der
 Entwicklung aus. Neulinge und Interessierte sind hier herzlich willkommen, so
 können wir einander gut kennen lernen und gemeinsam das Projekt voranbringen.
 {{% /blocks/feature %}}
 
-</div>
-</div>
-{{% /blocks/section %}}
+</section>
 
-<div class="container my-5">
-<div class="row p-0">
-<div class="col-md-6">
+<section class="full-width content-grid columns-2">
+
+<div>
 
 ### Offene Treffen per Videochat {#treffen}
 
@@ -70,7 +60,7 @@ Auch wenn sich das aufgrund der Sicherheitsmaßnahmen nicht so anfühlt -- du
 bist herzlich zu diesen Treffen eingeladen, Neulinge sind immer willkommen!
 
 </div>
-<div class="col-md-6">
+<div>
 
 ### Das Forum
 
@@ -79,7 +69,7 @@ Für langlebige Kommunikation verwenden wir in der Community
 noch gut zu finden, und Besucher können auch ohne Anmeldung mitlesen.
 
 ### Matrix
-Echtzeitkommunikation findet [in unserem Matrix-Space](https://matrix.to/#/#openbikesensor:matrix.org) statt - Das ist ein föderiertes Netzwerk, 
+Echtzeitkommunikation findet [in unserem Matrix-Space](https://matrix.to/#/#openbikesensor:matrix.org) statt - Das ist ein föderiertes Netzwerk,
 das sehr nutzerfreundliche Chatclients bietet - wenn du Slack und Konsorten bedienen
 kannst, kannst auch einen Matrix Client bedienen.
 
@@ -88,5 +78,4 @@ blättern willst, kannst du uns im Forum ansprechen - noch kann man dort
 'rein schauen.
 
 </div>
-</div>
-</div>
+</section>
diff --git a/content/device.de.md b/content/device.de.md
index 1d152508..7d213bbe 100644
--- a/content/device.de.md
+++ b/content/device.de.md
@@ -6,10 +6,7 @@ menu:
     parent: device
 ---
 
-<section class="row td-box td-box--1 position-relative">
-<div class="containter">
-
-<div class="container text-center td-arrow-down">
+<section class="full-width content-grid dark arrow">
 
 # Das Messgerät
 
@@ -18,34 +15,30 @@ aufzeichnet. Dieses Gerät haben wir als quelloffenes Design entwickelt, sodass
 du, wenn du magst, dir selbst eines bauen kannst und darfst! Hier siehst du alle
 Varianten.
 
-</div>
-</div>
 </section>
 
-<section class="td-box td-box--height-auto device-types-row">
-<div class="container">
-<div class="row p-0">
+<section class="full-width content-grid columns-3 device-types-row">
 
-{{% device-type-cell 
-    variant="Lite" 
-    image_file="images/obs-lite.svg" 
-    class="construction" 
-    label="In Entwicklung" 
-    link_text="Entwicklung verfolgen" 
+{{% device-type-cell
+    variant="Lite"
+    image_file="images/obs-lite.svg"
+    class="construction"
+    label="In Entwicklung"
+    link_text="Entwicklung verfolgen"
     link="#" %}}
 - klein und leicht
 - minimaler Bauaufwand
-- wird mit Android-Handy und App kombiniert 
+- wird mit Android-Handy und App kombiniert
 - sehr kostengünstig
 - wetterfest
 {{% /device-type-cell %}}
 
-{{% device-type-cell 
-    variant="Classic" 
-    image_file="images/obs-classic.svg" 
-    class="light recommended" 
-    label="Jetzt verfügbar" 
-    link_text="Zur Bauanleitung" 
+{{% device-type-cell
+    variant="Classic"
+    image_file="images/obs-classic.svg"
+    class="light recommended"
+    label="Jetzt verfügbar"
+    link_text="Zur Bauanleitung"
     link="/bauanleitung" %}}
 - robust und erprobt
 - voller Funktionsumfang ohne Handy
@@ -54,19 +47,17 @@ Varianten.
 - erweiterbar
 {{% /device-type-cell %}}
 
-{{% device-type-cell 
-    variant="Pro" 
+{{% device-type-cell
+    variant="Pro"
     image_file="images/obs-pro.svg"
-    class="construction" 
-    label="In Entwicklung" 
-    link_text="Entwicklung verfolgen" 
+    class="construction"
+    label="In Entwicklung"
+    link_text="Entwicklung verfolgen"
     link="https://forum.openbikesensor.org/t/automatisiert-bestueckbare-hardware/1263" %}}
 - voller Funktionsumfang ohne Handy
 - bestückt bestellbar
 - wetterfest
 {{% /device-type-cell %}}
 
-</div>
-</div>
 </section>
 
diff --git a/content/docs/classic/about/_index.de.md b/content/docs/classic/about/_index.de.md
index b07986b3..c1814b42 100644
--- a/content/docs/classic/about/_index.de.md
+++ b/content/docs/classic/about/_index.de.md
@@ -24,12 +24,12 @@ zum Gehäuse und Hilfen beim Beschaffen der Teile.
 * [Die Hauptplatine]({{< relref "pcb" >}}) wurde speziell für den
   OpenBikeSensor entworfen und kann als Spezialanfertigung bei einem
   Platinenhersteller anhand der bereitgestellten Designdateien bestellt
-  werden. 
+  werden.
 * [Die Bauanleitung]({{< relref "../build-instructions" >}}) beschreibt, wie die
   Bauteile auf der Hauptplatine installiert und das ganze ins Gehäuse
   eingesetzt werden.
- 
-### Muss ich den OpenBikeSensor selbst bauen?
+
+## Muss ich den OpenBikeSensor selbst bauen?
 
 Ja! Es gibt den OpenBikeSensor nicht als fertiges Gerät zu kaufen. Stattdessen
 baust du ihn dir selbst zusammen.
@@ -38,7 +38,7 @@ Du brauchst auch keine Angst zu haben, damit loszulegen -- selbst wenn nicht
 immer sofort offensichtlich ist, wie alles funktioniert, so ist es trotzdem
 auch für Anfänger:innen möglich, erfolgreich einen Sensor anhand dieser
 Anleitungen zu bauen. Und wenn das mal nicht klappt, gibt es genug Leute, die
-dir gern weiterhelfen, und ihr Wissen teilen. 
+dir gern weiterhelfen, und ihr Wissen teilen.
 
 Vielleicht kannst du dich auch mit einigen Anderen in deiner Gegend
 zusammentun. Schau in [der Community]({{< relref "community" >}}) vorbei oder
@@ -54,13 +54,13 @@ der [Community]({{< relref "/community" >}}) organsiert.
 {{< imgproc construction-kit Resize 600x >}}
 OpenBikeSensor Classic Bausatz (alte Version)
 {{< /imgproc >}}
- 
-### Hinweis für den Bau großer Stückzahlen
+
+## Hinweis für den Bau großer Stückzahlen
 
 Leider hatten wir in der Vergangenheit immer wieder Probleme damit, dass die aus
 China gelieferten fertigen Module nicht, oder nur teilweise den Spezifikationen
 entsprachen. Auch die Abmaße von Teilen ändern sich manchmal, z.B. bekamen wir
-vom Lieferanten plötzlich größere Displays als üblich. 
+vom Lieferanten plötzlich größere Displays als üblich.
 
 Wenn du mehrere Geräte vom Typ *OpenBikeSensor Classic* herstellen möchtest,
 empfiehlt es sich daher, zunächst einen Probelauf zu machen. So stellst du
@@ -75,7 +75,7 @@ einfache Änderung am Gehäuse, um auch mit den neuen Teilen kompatibel zu
 werden. Der:die nächste freut sich!
 
 
-### Alternativen
+## Alternativen
 
 Aufgrund der Vielfalt in dem Projekt und der unterschiedlichen Anforderungen
 der Beteiligten gibt es auch eine Vielzahl Varianten für fast jedes Teil. Der
diff --git a/content/docs/classic/build-instructions/_index.de.md b/content/docs/classic/build-instructions/_index.de.md
index 644b6532..8f30f0bb 100644
--- a/content/docs/classic/build-instructions/_index.de.md
+++ b/content/docs/classic/build-instructions/_index.de.md
@@ -9,7 +9,7 @@ aliases:
 description: >
     Sobald der Bausatz für den OpenBikeSensor Classic zusammengestellt ist,
     kann anhand dieser Anleitung der Bau begonnen werden. Der Zusammenbau
-    besteht aus einer Menge Lötarbeit, sowie dem Test der Elektronik und 
+    besteht aus einer Menge Lötarbeit, sowie dem Test der Elektronik und
     dem Einbau in das Gehäuse.
 ---
 
@@ -209,12 +209,16 @@ sich mit 1.0.0 geändert haben.
 Ordne zunächst alle Widerstände richtig zu, indem du die Farbcodes abliest oder
 mit einem Multimeter misst:
 
+<div class="table-wide">
+
 | Bauteil         | Wert           | Farbcode 4 Ringe                             | Farbcode 5 Ringe                                   | SMD Code   |
-| -----------     | -------------: | :------------------------------------------- | :----------------------------------------------    | ------     |
-| **R1, R2**      | 1,2&thinsp;kΩ  | {{< resistor  "brown,red,red,gold" >}}       | {{< resistor "brown,red,black,brown,brown" >}}     | 122 / 1201 |
-| **R3**          | 10&thinsp;kΩ   | {{< resistor  "brown,black,orange,gold" >}}  | {{< resistor "brown,black,black,red,brown" >}}     | 103 / 1002 |
-| **R4**          | 150&thinsp;kΩ  | {{< resistor  "brown,green,yellow,gold" >}}  | {{< resistor "brown,green,black,orange,brown" >}}  | 154 / 1503 |
-| **R5**          | 300&thinsp;kΩ  | {{< resistor  "orange,black,yellow,gold" >}} | {{< resistor "orange,black,black,orange,brown" >}} | 304 / 3003 |
+| -----------     | -------------: | :------------------------------------------: | :------------------------------------------------: | ------     |
+| **R1, R2**      | 1,2&nbsp;kΩ    | {{< resistor  "brown,red,red,gold" >}}       | {{< resistor "brown,red,black,brown,brown" >}}     | 122 / 1201 |
+| **R3**          | 10&nbsp;kΩ     | {{< resistor  "brown,black,orange,gold" >}}  | {{< resistor "brown,black,black,red,brown" >}}     | 103 / 1002 |
+| **R4**          | 150&nbsp;kΩ    | {{< resistor  "brown,green,yellow,gold" >}}  | {{< resistor "brown,green,black,orange,brown" >}}  | 154 / 1503 |
+| **R5**          | 300&nbsp;kΩ    | {{< resistor  "orange,black,yellow,gold" >}} | {{< resistor "orange,black,black,orange,brown" >}} | 304 / 3003 |
+
+</div>
 
 Nachdem du alle Widerstände zugeordnet hast, platziere sie an den dafür
 vorgesehenen Stellen auf der Vorderseite der Hautplatine. Stecke die Beinchen
@@ -464,14 +468,18 @@ Nach den Sensorboards kann das Adafruit Spannungsreglermodul verbaut werden.
 - Kürze die mitgelieferte Pinleiste auf drei Pins.
 - Stecke die Pinleiste von der Bestückungsseite auf das Board des Spannungsreglers.
 - Stecke den Spannungsregler von unten auf die OpenBikeSensor Platine, so dass
-  folgende Verbindungen entstehen (keine Sorge: das Ada board liefert auch 3.3v, hatte aber nicht genug Platz für die Nachkommastelle):
-  
-  | 3V3 Ada | OBS   |
-  |---------|-------|
-  | VIN     | VDC   |
-  | 3V      | 3.3V  |
-  | GND     | GND   |
-  
+  folgende Verbindungen entstehen (keine Sorge: das Adafruit-Modul liefert auch 3.3V, hatte aber nicht genug Platz für die Nachkommastelle):
+
+<center>
+
+| Adafruit-Board   |   | OpenBikeSensor Platine   |
+| ---------------: | - | :----------------------- |
+| VIN              | = | VDC                      |
+| 3V               | = | 3.3V                     |
+| GND              | = | GND                      |
+
+</center>
+
 - Klebe etwas Isolierband über die Lötstellen des Ultraschall boards unter das 3.3V
   board
 - Verlöte die Pins auf beiden Seiten, wie immer erst einen Pin, Orientierung nachjustieren
@@ -538,8 +546,6 @@ Verlöte erst dann die restlichen Pins und kürze sie.
     des Moduls zeigt in Richtung der Buchsenleiste für den ESP32.
 {{</ imgproc >}}
 
----
-
 {{% alert title="Glückwunsch!" color="success" %}}
 Mit diesem Schritt ist die Hauptplatine des OpenBikeSensors fertig bestückt.
 
@@ -580,7 +586,7 @@ Insbesondere der mittlere Pin ist hierbei kritisch, er muss dieselbe Länge wie
 wird aber bei zu hoher Temperatur herausgedrückt.
 
 Verdrille nun beide Kabel auf voller Länge zu einem und führe dann die zwei Crimps in
-das Steckergehäuse ein. Die Verdrillung wird sich wieder ein wenig lockern, 
+das Steckergehäuse ein. Die Verdrillung wird sich wieder ein wenig lockern,
 aber sollte wie ein Kabel wirken und keine große Schlaufe mehr bilden.
 
 {{< imgproc "v00.03.12/12_Switch/DSC08041.JPG" Fit "500x500" >}}
@@ -997,7 +1003,7 @@ hilft dir vielleicht eine der Anleitung auf der [Fehlersuche-Seite]({{< relref
   - Bei Bedarf Unreinheiten des Gehäuses (vom 3D-Druck) entfernen, wenn das PCB
     daran hängen bleibt.
   - Mit 3 Stück M3x6 oder M3x8 im Gehäuse verschrauben.
-  - Nun kann der ESP wieder aufgesteckt werden. Dabei die Richtung der 
+  - Nun kann der ESP wieder aufgesteckt werden. Dabei die Richtung der
     USB-Markierung mit Mikro-USB-Buchse dem ESP32 abgleichen,
     und sicherstellen, dass die Pins nicht um ein oder zwei Löcher verrutscht
     eingesteckt werden.
diff --git a/content/docs/classic/parts/_index.de.md b/content/docs/classic/parts/_index.de.md
index 9f4cec9b..20565098 100644
--- a/content/docs/classic/parts/_index.de.md
+++ b/content/docs/classic/parts/_index.de.md
@@ -1,13 +1,14 @@
 ---
 title: Bauteile
 weight: 20
+notoc: true
 aliases:
 - /bauteile
 - /bauteile/v00.03.12
 - /docs/hardware/v00.03.12/parts
 description: >
     Diese Seite listet alle Bauteile auf, die bestellt oder hergestellt werden
-    müssen, um einen OpenBikeSensor Classic zusammenzubauen.  
+    müssen, um einen OpenBikeSensor Classic zusammenzubauen.
 
 ---
 
@@ -21,6 +22,7 @@ Wenn du gerade bestellst, kannst du `@gluap` im Forum kontaktieren, um bei der T
 
 ## Bauteile
 
+<div class="table-wide">
 <table class="table">
 <thead>
 <tr>
@@ -68,7 +70,7 @@ Wenn du gerade bestellst, kannst du `@gluap` im Forum kontaktieren, um bei der T
   <td rowspan="2" class="align-middle">1</td>
   <td>Alternative A "Rotes Modul" Buck-Boost Modul for LiPo, 3.3V (Spannungsregler). Eines der verlinkten Module reicht.</td>
   <td>
-    <span style="color: red; font-face: bold;">Derzeit ist kein zuverlässiger Händler für dieses Modul bekannt. Module mit Beschriftung `A1731i` auf dem sechsbeinigen Bauteil **funktionieren NICHT**.</span> 
+    <span style="color: red; font-face: bold;">Derzeit ist kein zuverlässiger Händler für dieses Modul bekannt. Module mit Beschriftung `A1731i` auf dem sechsbeinigen Bauteil **funktionieren NICHT**.</span>
   </td>
 </tr>
 <tr>
@@ -96,7 +98,7 @@ Wenn du gerade bestellst, kannst du `@gluap` im Forum kontaktieren, um bei der T
   <td>
     <a href="https://www.amazon.de/gp/product/B008RDCC26/ref=ox_sc_saved_image_6?smid=A3JWKAKR8XB7XF&psc=1">amazon.de</a>
     <br/>
-    <a href="https://www.google.com/search?q=sandisk+ultra+16gb&tbm=shop">google Suche</a> 
+    <a href="https://www.google.com/search?q=sandisk+ultra+16gb&tbm=shop">google Suche</a>
   </td>
 </tr>
 <tr>
@@ -108,7 +110,7 @@ Wenn du gerade bestellst, kannst du `@gluap` im Forum kontaktieren, um bei der T
     <a href="https://de.aliexpress.com/item/1005001825455846.html">aliexpress.com 2</a>
     <br/>
     <a href="https://de.aliexpress.com/item/32582974860.html">aliexpress.com 3</a>
-    <br/> 
+    <br/>
     <a href="https://de.aliexpress.com/item/4000781171314.html">aliexpress.com 4</a>
   </td>
 </tr>
@@ -377,6 +379,7 @@ Wenn du gerade bestellst, kannst du `@gluap` im Forum kontaktieren, um bei der T
 
 </tbody>
 </table>
+</div>
 
 
 {{< include-markdown-partial "parts-tools.md" >}}
diff --git a/content/docs/firmware/_index.de.md b/content/docs/firmware/_index.de.md
index 51d6c22c..24f707ef 100644
--- a/content/docs/firmware/_index.de.md
+++ b/content/docs/firmware/_index.de.md
@@ -52,12 +52,16 @@ GGF musst du zunächst das "Flashtool" (über die OpenBikeSensor Oberfläche) in
 Danach kannst du, wenn dein OpenBikeSensor in einem internetfähigen WLAN eingebucht
 ist über das Wlan-Menü deines OpenBikeSensors Firmwareupdates anstoßen.
 
-## Bauen und Flashen der Firmware aus dem GitHub-Repository
+## Firmware aus Quelltext kompilieren
 
-### mit VisualStudio Code und PlatformIO
+Du kannst die Firmware auch selbst bauen und flashen, wenn du dir den Quelltext
+aus dem GitHub-Repository herunterlädst.
 
-Zunächst [VS Code](https://code.visualstudio.com/) und darin die Erweiterung [PlatformIO](https://platformio.org/)
-installieren. 
-
-Danach den gewünschten Stand der OBS-Firmware aus dem [github-Repository](https://github.com/openbikesensor/OpenBikeSensorFirmware) klonen und das Verzeichnis in VS Code öffnen. Dann mit dem Upload-Befehl (Pfeil nach rechts in der Fußzeile von VS Code) oder per `pio run -t upload` in der PlatformIO CLI auf den ESP32 flashen.
+Zunächst musst du [VS Code](https://code.visualstudio.com/) und darin die
+Erweiterung [PlatformIO](https://platformio.org/) installieren. Clone dann den
+gewünschten Stand der OBS-Firmware aus dem
+[github-Repository](https://github.com/openbikesensor/OpenBikeSensorFirmware)
+und öffne das Verzeichnis in VS Code. Dann kannst du mit dem Upload-Befehl
+(Pfeil nach rechts in der Fußzeile von VS Code) oder per `pio run -t upload` in
+der PlatformIO CLI die Firmware kompilieren und auf den ESP32 flashen.
 
diff --git a/content/docs/firmware/flash-python.md b/content/docs/firmware/flash-python.md
index 57d696b7..0e989d32 100644
--- a/content/docs/firmware/flash-python.md
+++ b/content/docs/firmware/flash-python.md
@@ -1,6 +1,8 @@
 ---
 title: Flashen mit platformio
 weight: 10
+description: >
+  xx
 ---
 
 Hast du `git` und `python3` installiert, kannst du mit folgenden Kommandos die OpenBikeSensor Firmware bauen und flashen.
diff --git a/content/docs/user-guide/mounting/index.de.md b/content/docs/user-guide/mounting/index.de.md
index f67c2b32..9ca30844 100644
--- a/content/docs/user-guide/mounting/index.de.md
+++ b/content/docs/user-guide/mounting/index.de.md
@@ -4,6 +4,9 @@ title: Montage des Sensors am Fahrrad
 weight: 15
 aliases:
 - /montage
+description: >
+  Es gibt einige Optionen den OpenBikeSensor am Fahrrad anzubringen. Hier
+  erfährst du, wie sie aussehen, und worauf du achten solltest.
 ---
 
 {{% alert title="Hinweis" color="info" %}}
diff --git a/content/docs/user-guide/quickstart.de.md b/content/docs/user-guide/quickstart.de.md
index fda7f4c0..af31d528 100644
--- a/content/docs/user-guide/quickstart.de.md
+++ b/content/docs/user-guide/quickstart.de.md
@@ -4,9 +4,11 @@ linkTitle: Schnellstart
 weight: 10
 aliases:
 - /start
+description: >
+  So bereitest du deinen neuen OpenBikeSensor auf die erste Fahrt vor.
 ---
 
-Diese Anleitung geht davon aus, dass du einen funktionierenden 
+Diese Anleitung geht davon aus, dass du einen funktionierenden
 [OpenBikeSensor Classic]({{< ref "/docs/classic" >}}) hast.
 
 Sobald du einen OpenBikeSensor hast, solltest du ein paar Dinge damit tun:
@@ -40,8 +42,8 @@ Um sicherzugehen, dass dein Gerät voll funktionsfähig ist, führe vor
 der ersten Montage und danach regelmäßig (z.B. jedes Mal nach dem Aufladen
 des Akkus oder wöchentlich) folgenden Test durch:
 
-Halte dein Gerät im Freien eingeschaltet mit der linken Seite zum Himmel und 
-der rechten Seite nach unten in die Luft. Nachdem die Haltezeit für den 
+Halte dein Gerät im Freien eingeschaltet mit der linken Seite zum Himmel und
+der rechten Seite nach unten in die Luft. Nachdem die Haltezeit für den
 linksseitigen Messwert abgelaufen ist, sollte kein Messwert mehr angezeigt.
 Hast du noch keinen GPS-Empfang und möchtest nicht warten, bis das GPS Empfang
 hat, kannst du durch kurzes Drücken auf den Knopf am Display in die Messansicht
diff --git a/content/map.de.md b/content/map.de.md
deleted file mode 100644
index 0f5fe91b..00000000
--- a/content/map.de.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Karte der Initiativen
-menu:
-  main:
-    parent: project
-    weight: 40
-aliases:
-- /map
----
-
-<div style="height: 80px;"></div>
-
-<div class="container" style="height: 80px;">
-
-# Karte
-
-</div>
-
-<div class="container content mb-5">
-
-In vielen Regionen gibt es schon OpenBikeSensoren! Suchst du Gleichgesinnte oder Ansprechpartner in deiner Gegend? Die Karte hilft dir dabei. Möchtest du selbst oder deine Initiative noch auf der Karte auftauchen? [Im Forum](https://forum.openbikesensor.org/t/karte-der-lokalinitiativen-und-nutzer/389) erfährst du, wie!
-
-</div>
-
-<div class="container" style="height: calc(100vh - 270px - 80px);">
-    <iframe src="https://umap.openstreetmap.fr/en/map/openbikesensor-initiativen_702977#6/51.207/14.941" width="100%" height="100%">
-    </iframe>
-</div>
diff --git a/content/map.en.md b/content/map.en.md
deleted file mode 100644
index d4f28898..00000000
--- a/content/map.en.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Map
-menu:
-  main:
-    weight: 25
-aliases:
-- en/map
----
-
-<div style="height: 80px;"></div>
-
-<div class="container" style="height: 80px;">
-
-# Map
-
-</div>
-
-<div class="container content mb-5">
-
-There are many places where you can find OpenBikeSensors! Are you looking for like-minded people or contacts in your 
-area? This map will help you find them. Do you or your group want to appear on the map? Find out how 
-[in the forum](https://forum.openbikesensor.org/t/karte-der-lokalinitiativen-und-nutzer/389)!
-</div>
-
-<div class="container" style="height: calc(100vh - 270px - 80px);">
-    <iframe src="https://umap.openstreetmap.fr/en/map/openbikesensor-initiativen_702977#6/51.207/14.941" width="100%" height="100%">
-    </iframe>
-</div>
diff --git a/content/map.md b/content/map.md
new file mode 100644
index 00000000..12f5aa51
--- /dev/null
+++ b/content/map.md
@@ -0,0 +1,22 @@
+---
+title: Karte der Initiativen
+menu:
+  main:
+    parent: project
+    weight: 40
+aliases:
+- /map
+---
+
+# Karte
+
+In vielen Regionen gibt es schon OpenBikeSensoren! Suchst du Gleichgesinnte
+oder Ansprechpartner in deiner Gegend? Die Karte hilft dir dabei. Möchtest du
+selbst oder deine Initiative noch auf der Karte auftauchen? [Im
+Forum](https://forum.openbikesensor.org/t/karte-der-lokalinitiativen-und-nutzer/389)
+erfährst du, wie!
+
+<div class="container full-width" style="height: calc(100vh - 160px);">
+    <iframe src="https://umap.openstreetmap.fr/en/map/openbikesensor-initiativen_702977#6/51.207/14.941" width="100%" height="100%">
+    </iframe>
+</div>
diff --git a/content/verein.de.md b/content/verein.de.md
index bcef7577..786864a8 100644
--- a/content/verein.de.md
+++ b/content/verein.de.md
@@ -8,16 +8,10 @@ aliases:
 - /ev
 ---
 
-<section class="row td-box td-box--1 position-relative">
-<div class="container text-center td-arrow-down">
+<section>
 
 # OpenBikeSensor e. V.
 
-</div>
-</section>
-
-<section class="container content">
-
 Im Dezember 2021 haben wir gemeinsam einen Verein gegründet, um uns künftig die
 Arbeit zu erleichtern. Der Verein trägt den Namen *OpenBikeSensor e. V.* und ist
 beim Amtsgericht Stuttgart im Vereinsregister eingetragen.
@@ -35,7 +29,7 @@ können, um vor allem Einzelpersonen leichter mit Sensoren ausstatten zu können
 Möglicherweise kann der Verein auch Fördergelder beantragen bzw. erhalten und
 für den Vereinszweck aufwenden.
 
-### Vereinszweck
+## Vereinszweck
 
 Der Vereinszweck ist in der [Satzung](/docs/Satzung.pdf) festgelegt und lautet:
 
@@ -51,7 +45,7 @@ Der Vereinszweck ist in der [Satzung](/docs/Satzung.pdf) festgelegt und lautet:
 >
 > -- *Quelle: [Gründungssatzung des Vereins OpenBikeSensor](/docs/Satzung.pdf)*
 
-### Mitgliedschaft
+## Mitgliedschaft
 
 Eine Mitgliedschaft im Verein ist ausdrücklich **keine Voraussetzung für die
 Mitarbeit** am Projekt. Die Community besteht nach wie vor unabhängig vom Verein
@@ -73,4 +67,31 @@ für Mitglieder sind auf dem Beitrittsformular (siehe oben) beschrieben.
 Zur Kontaktaufnahme mit dem Vorstand kann die E-Mail-Adresse aus dem
 [Impressum]({{< relref "contact" >}}) genutzt werden.
 
+<a name="spenden" id="spenden"></a>
+
+## Spenden
+
+Die Arbeit rund um den OpenBikeSensor ist sehr zeitaufwändig und kostspielig.
+Der OpenBikeSensor e. V. nimmt gern Spenden entgegen, die in die Arbeit der
+Community fließen und künftige Projekte unterstützen.
+
+Bis 200&thinsp;€ reicht der Kontoauszug, um Spenden steuerlich absetzen zu
+können. Dafür unbedingt den Verwendungszweck so ausfüllen.
+
+<pre class="donations">
+IBAN: DE40 4306 0967 1294 8595 00 (GLS)
+Kontoinhaber: OpenBikeSensor e. V.
+Verwendungszweck: Spende OpenBikeSensor
+</pre>
+
+Hier ein paar Beispiele, was wir mit Euren Spenden alles erreichen können:
+
+- Wir kaufen mit Mengenrabatt und reduzierten Versandkosten neue Hardware und Bauteile ein. Diese bringen wir Euch dann zu Workshops mit, welche wir veranstalten.
+- Wir stellen Bausätze zusammen, damit Interessierte keine 6-8 Wochen auf Teile aus China warten müssen, sondern zügig loslegen können.
+- Wir bauen Geräte, die wir für Aktionszeiträume an Engagierte ausleihen. Die Koordination übernehmen unsere Regio-Teams.
+- Unsere Entwickler:innen können Hardware für Verbesserungen und Erweiterungen bestellen, ohne das Geld selbst vorschießen zu müssen.
+- Wir finanzieren die IT-Infrastruktur für Ko-Kreation und Kollaboration unseres Netzwerks.
+
+Die Ausgaben des Vereins werden transparent gegenüber der Community kommuniziert und mit allen abgestimmt.
+
 </section>
diff --git a/fontawesome-download.sh b/fontawesome-download.sh
new file mode 100755
index 00000000..cf27c0c0
--- /dev/null
+++ b/fontawesome-download.sh
@@ -0,0 +1,12 @@
+#!/bin/sh
+set -ex
+icons="brands/discourse brands/github brands/mastodon solid/video solid/person-biking solid/arrow-right solid/arrow-left solid/lightbulb solid/bars solid/xmark"
+
+dest=fontawesome
+url=https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs
+
+mkdir -p "${dest}"
+for path in $icons; do
+  name=$(basename ${path})
+  wget -O "${dest}/${name}.svg" "${url}/${path}.svg"
+done
diff --git a/fontawesome/arrow-left.svg b/fontawesome/arrow-left.svg
new file mode 100644
index 00000000..c6233a44
--- /dev/null
+++ b/fontawesome/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/arrow-right.svg b/fontawesome/arrow-right.svg
new file mode 100644
index 00000000..947f2a3a
--- /dev/null
+++ b/fontawesome/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/bars.svg b/fontawesome/bars.svg
new file mode 100644
index 00000000..02dd6bcf
--- /dev/null
+++ b/fontawesome/bars.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/discourse.svg b/fontawesome/discourse.svg
new file mode 100644
index 00000000..c41b1083
--- /dev/null
+++ b/fontawesome/discourse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/github.svg b/fontawesome/github.svg
new file mode 100644
index 00000000..eda7c3f4
--- /dev/null
+++ b/fontawesome/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/lightbulb.svg b/fontawesome/lightbulb.svg
new file mode 100644
index 00000000..696fa4e0
--- /dev/null
+++ b/fontawesome/lightbulb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/mastodon.svg b/fontawesome/mastodon.svg
new file mode 100644
index 00000000..bb36bf3c
--- /dev/null
+++ b/fontawesome/mastodon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/person-biking.svg b/fontawesome/person-biking.svg
new file mode 100644
index 00000000..c7c493c3
--- /dev/null
+++ b/fontawesome/person-biking.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M400 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm27.2 64l-61.8-48.8c-17.3-13.6-41.7-13.8-59.1-.3l-83.1 64.2c-30.7 23.8-28.5 70.8 4.3 91.6L288 305.1V416c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-10.7-5.3-20.7-14.2-26.6L295 232.9l60.3-48.5L396 217c5.7 4.5 12.7 7 20 7h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H427.2zM56 384a72 72 0 1 1 144 0A72 72 0 1 1 56 384zm200 0A128 128 0 1 0 0 384a128 128 0 1 0 256 0zm184 0a72 72 0 1 1 144 0 72 72 0 1 1 -144 0zm200 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/video.svg b/fontawesome/video.svg
new file mode 100644
index 00000000..b1a6c1fa
--- /dev/null
+++ b/fontawesome/video.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>
\ No newline at end of file
diff --git a/fontawesome/xmark.svg b/fontawesome/xmark.svg
new file mode 100644
index 00000000..a1c48211
--- /dev/null
+++ b/fontawesome/xmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
\ No newline at end of file
diff --git a/go.mod b/go.mod
index 3f271ef7..a86a9b9f 100644
--- a/go.mod
+++ b/go.mod
@@ -1,5 +1,3 @@
 module github.com/openbikesensor/openbikesensor.github.io
 
 go 1.21
-
-require github.com/google/docsy v0.8.0 // indirect
diff --git a/go.sum b/go.sum
index e3bb394d..e69de29b 100644
--- a/go.sum
+++ b/go.sum
@@ -1,4 +0,0 @@
-github.com/FortAwesome/Font-Awesome v0.0.0-20230327165841-0698449d50f2/go.mod h1:IUgezN/MFpCDIlFezw3L8j83oeiIuYoj28Miwr/KUYo=
-github.com/google/docsy v0.8.0 h1:RgHyKRTo8YwScMThrf01Ky2yCGpUS1hpkspwNv6szT4=
-github.com/google/docsy v0.8.0/go.mod h1:FqTNN2T7pWEGW8dc+v5hQ5VF29W5uaL00PQ1LdVw5F8=
-github.com/twbs/bootstrap v5.2.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
diff --git a/i18n/de.toml b/i18n/de.toml
index 9aa6abcc..8646e747 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -1,8 +1,5 @@
 [page_not_translated]
 other = "Diese Seite gibt es noch nicht auf Deutsch, aber vielleicht sprichst Du ja..."
 
-[footer_all_rights_reserved]
-other = "– veröffentlicht unter LGPL-3.0"
-
 [print_entire_section]
 other = "Kapitel drucken"
diff --git a/i18n/en.toml b/i18n/en.toml
index dace4648..932b4806 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -1,6 +1,2 @@
 [page_not_translated]
 other = "This page is not yet available in English. You might be able to read it in..."
-
-
-[footer_all_rights_reserved]
-other = "– published under terms of LGPL-3.0"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 00000000..8270014d
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body class="content-grid">
+    {{ partial "navbar.html" . }}
+
+    {{ block "main" . }}{{ end }}
+    {{ partial "footer.html" . }}
+
+    {{ partial "scripts.html" . }}
+  </body>
+</html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 00000000..8362338e
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,3 @@
+{{ define "main" -}}
+{{ .Content -}}
+{{ end }}
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
new file mode 100644
index 00000000..8270014d
--- /dev/null
+++ b/layouts/blog/baseof.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body class="content-grid">
+    {{ partial "navbar.html" . }}
+
+    {{ block "main" . }}{{ end }}
+    {{ partial "footer.html" . }}
+
+    {{ partial "scripts.html" . }}
+  </body>
+</html>
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
new file mode 100644
index 00000000..548c5c06
--- /dev/null
+++ b/layouts/blog/list.html
@@ -0,0 +1,21 @@
+{{ define "main" }}
+
+<section>
+<h1>Blog</h1>
+
+<ul class="blog-posts">
+{{ range .Pages -}}
+  <li>
+      <div class="date">{{ .Date.Format ($.Param "time_format_blog") }}</div>
+      <h5>
+        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+      </h5>
+
+      <p>{{ .Summary }}</p>
+      <a href="{{ .RelPermalink }}">{{ T "ui_read_more"}}</a>
+  </li>
+{{ end -}}
+</ul>
+</section>
+
+{{ end -}}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
new file mode 100644
index 00000000..313078ed
--- /dev/null
+++ b/layouts/blog/single.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+
+<section class="narrow">
+	<h1>{{ .Title }}</h1>
+	{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
+	<div class="td-byline mb-4">
+		{{ with .Params.author }}{{ T "post_byline_by" }} <b>{{ . | markdownify }}</b> |{{ end}}
+		<time datetime="{{  $.Date.Format "2006-01-02" }}" class="text-muted">{{ $.Date.Format $.Site.Params.time_format_blog  }}</time>
+	</div>
+	{{ .Content }}
+
+	{{ partial "pager.html" . }}
+</section>
+
+{{ end }}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 5403cd85..cc70de8e 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -3,27 +3,28 @@
   <head>
     {{ partial "head.html" . }}
   </head>
-  <body class="td-{{ .Kind }}">
-    <header>
-      {{ partial "navbar.html" . }}
-    </header>
-    <div class="container-fluid td-docs td-outer">
-      <div class="td-main">
-        <div class="td-sidebar d-print-none">
-          {{ partial "sidebar.html" . }}
-        </div>
-        <div class="d-none d-xl-block td-toc d-print-none">
-          {{ partial "page-meta-links.html" . }}
-          {{ partial "toc.html" . }}
-        </div>
-        <main role="main">
-          {{ partial "version-banner.html" . }}
-          {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
+  <body>
+    {{ partial "navbar.html" . }}
+
+    <div class="docs">
+      <input type="checkbox" id="mobile-sidebar-toggle" />
+      <label for="mobile-sidebar-toggle" class="mobile-sidebar-toggle-label">
+        <span>{{ partial "fa.html" "bars" }} Seitenmenü anzeigen</span>
+        <span>{{ partial "fa.html" "xmark" }} Seitenmenü ausblenden</span>
+      </label>
+
+      <aside class="sidebar">
+        {{ partial "sidebar.html" . }}
+      </aside>
+      {{ partial "toc.html" . }}
+
+      <main role="main">
+          {{ partial "breadcrumb.html" . }}
           {{ block "main" . }}{{ end }}
-        </main>
-      </div>
-      {{ partial "footer.html" . }}
+      </main>
     </div>
+    {{ partial "footer.html" . }}
+
     {{ partial "scripts.html" . }}
   </body>
 </html>
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index 3cf49f4d..0c60432d 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -1,25 +1,12 @@
 {{ define "main" }}
-<div class="td-content">
-	<h1>{{ .Title }}</h1>
-    
-    {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
 
-	{{ .Content }}
-    
-    {{ partial "section-index.html" . }}
+<h1>{{ .Title }}</h1>
 
-    <div class="text-muted mt-5 pt-3 border-top">
-        {{ partial "page-meta-lastmod.html" . }} 
+{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
 
-        <br />
+{{ .Content }}
 
-        Du möchtest etwas zu dieser Seite beitragen? Eine Anleitung findest du <a href="https://forum.openbikesensor.org/t/mitwirken-an-der-website-dokumentation-so-gehts/115">im Forum</a>.
+{{ partial "section-index.html" . }}
 
-        <br />
-
-        {{ with .CurrentSection.AlternativeOutputFormats.Get "print" }}
-            <a id="print" href="{{ .Permalink | safeURL }}">Druckansicht dieses Kapitels</a>
-        {{ end }}
-    </div>
-</div>
+{{ partial "docs-footer.html" . }}
 {{ end }}
diff --git a/layouts/docs/parts.html b/layouts/docs/parts.html
deleted file mode 100644
index d0c42550..00000000
--- a/layouts/docs/parts.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{{ define "main" }}
-
-{{ partial "parts-notes.md" . | markdownify }}
-
-{{ .Render "content" }}
-
-<div class="td-content">
-	<h1>{{ .Title }}</h1>
-    {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
-	{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) }}
-        {{ partial "reading-time.html" . }}
-    {{ end }}       
-	{{ .Content }}
-	{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
-		{{ partial "feedback.html" .Site.Params.ui.feedback }}
-		<br />
-	{{ end }}
-	{{ if (.Site.Params.DisqusShortname) }}
-		<br />
-		{{ partial "disqus-comment.html" . }}
-	{{ end }}
-	<div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>
-</div>
-
-{{ end }}
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
new file mode 100644
index 00000000..0c60432d
--- /dev/null
+++ b/layouts/docs/single.html
@@ -0,0 +1,12 @@
+{{ define "main" }}
+
+<h1>{{ .Title }}</h1>
+
+{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
+
+{{ .Content }}
+
+{{ partial "section-index.html" . }}
+
+{{ partial "docs-footer.html" . }}
+{{ end }}
diff --git a/layouts/faq/li.html b/layouts/faq/li.html
index d9ccc39b..df8531bf 100644
--- a/layouts/faq/li.html
+++ b/layouts/faq/li.html
@@ -10,7 +10,7 @@ <h2 class="display-2 text-center my-5 fw-light">{{ .Title }}</h2>
 {{ else }}
 
   <div class="card card-body mb-4">
-    <a href="{{ .Permalink }}">
+    <a href="{{ .RelPermalink }}">
     <h4 class="card-title">
       {{ .Title }}
     </h4>
diff --git a/layouts/faq/list.html b/layouts/faq/list.html
index 2aa998a9..52c5b42a 100644
--- a/layouts/faq/list.html
+++ b/layouts/faq/list.html
@@ -1,8 +1,6 @@
 {{ define "main" }}
 
-<div style="height: 120px"></div>
-
-<div class="container">
+<section>
 
 {{ .Content }}
 
@@ -10,5 +8,6 @@
   {{ .Render "li" }}
 {{ end }}
 
-</div>
+</section>
+
 {{ end }}
diff --git a/layouts/faq/single.html b/layouts/faq/single.html
index efcbfb69..cea58c01 100644
--- a/layouts/faq/single.html
+++ b/layouts/faq/single.html
@@ -1,23 +1,18 @@
 {{ define "main" }}
 
-<div style="height: 120px"></div>
+<section>
 
-<div class="container">
-
-<p class="mb-4">
+<p>
   <a href="{{ ref . "/faq" }}">
-    <i class="fa fa-arrow-left"></i>
+    {{ partial "fa.html" "arrow-left" }}
     Zurück zur FAQ
   </a>
 </p>
 
-<h1 class="display-4 font-weight-light mb-4">
-  {{ .Title }}
-</h1>
+<h1>{{ .Title }}</h1>
+
+{{ .Content }}
 
-<div class="card card-body">
-  {{ .Content }}
-</div>
+</section>
 
-</div>
 {{ end }}
diff --git a/layouts/home.html b/layouts/home.html
new file mode 100644
index 00000000..9569b16b
--- /dev/null
+++ b/layouts/home.html
@@ -0,0 +1,5 @@
+{{ define "main" }}
+{{ with .Content }}
+{{ . }}
+{{ end }}
+{{ end }}
diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
new file mode 100644
index 00000000..92e00791
--- /dev/null
+++ b/layouts/partials/breadcrumb.html
@@ -0,0 +1,28 @@
+{{ $isSingle := true -}}
+{{ with .Parent -}}
+  {{ $isSingle = .IsHome -}}
+{{ end -}}
+<nav aria-label="breadcrumb" class="breadcrumbs">
+  <ol class="breadcrumb">
+    {{- template "breadcrumbnav" (dict "p1" . "p2" .) }}
+  </ol>
+</nav>
+
+{{- define "breadcrumbnav" -}}
+  {{ if .p1.Parent -}}
+    {{ if not .p1.Parent.IsHome -}}
+      {{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 )  -}}
+    {{ end -}}
+  {{ else if not .p1.IsHome -}}
+    {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 )  -}}
+  {{ end -}}
+  {{ $isActive :=  eq .p1 .p2 }}
+  <li class="breadcrumb-item{{ if $isActive }} active{{ end }}"
+      {{- if $isActive }} aria-current="page"{{ end }}>
+    {{ if $isActive -}}
+      {{ .p1.LinkTitle -}}
+    {{ else -}}
+      <a href="{{ .p1.RelPermalink }}">{{ .p1.LinkTitle }}</a>
+    {{- end -}}
+  </li>
+{{- end -}}
diff --git a/layouts/partials/docs-footer.html b/layouts/partials/docs-footer.html
new file mode 100644
index 00000000..d2577563
--- /dev/null
+++ b/layouts/partials/docs-footer.html
@@ -0,0 +1,15 @@
+{{ if and .GitInfo .Site.Params.github_repo -}}
+<div class="docs-footer">
+  Zuletzt geändert am
+  {{ with .GitInfo }}
+  <a href="{{ $.Site.Params.github_repo }}/commit/{{ .Hash }}">
+  {{ end }}
+  {{ $.Lastmod.Format $.Site.Params.time_format_default -}}.
+  {{ if .GitInfo }}
+  </a>
+  {{ end }}
+
+  Du möchtest etwas zu dieser Seite beitragen? Eine Anleitung findest
+  du <a href="https://forum.openbikesensor.org/t/mitwirken-an-der-website-dokumentation-so-gehts/115">im Forum</a>.
+</div>
+{{ end -}}
diff --git a/layouts/partials/fa.html b/layouts/partials/fa.html
new file mode 100644
index 00000000..879eb377
--- /dev/null
+++ b/layouts/partials/fa.html
@@ -0,0 +1,6 @@
+<span class="inline-svg">
+{{- $fname:=print "fontawesome/" . ".svg" -}}
+{{- $path:="<path" -}}
+{{- $fill:="<path fill=\"currentColor\"" -}}
+{{ replace (readFile $fname) $path $fill | safeHTML }}
+</span>
diff --git a/layouts/partials/favicons.html b/layouts/partials/favicons.html
new file mode 100644
index 00000000..69e7f053
--- /dev/null
+++ b/layouts/partials/favicons.html
@@ -0,0 +1,12 @@
+
+<!-- Favicons as generated by http://cthedot.de/icongen -->
+<link rel="shortcut icon" href="{{ "favicons/favicon.ico" | relURL }}" >
+<link rel="apple-touch-icon" href="{{ "favicons/apple-touch-icon-180x180.png" | relURL }}" sizes="180x180">
+<link rel="icon" type="image/png" href="{{ "favicons/favicon-16x16.png" | relURL }}" sizes="16x16">
+<link rel="icon" type="image/png" href="{{ "favicons/favicon-32x32.png" | relURL }}" sizes="32x32">
+<link rel="icon" type="image/png" href="{{ "favicons/android-36x36.png" | relURL }}" sizes="36x36">
+<link rel="icon" type="image/png" href="{{ "favicons/android-48x48.png" | relURL }}" sizes="48x48">
+<link rel="icon" type="image/png" href="{{ "favicons/android-72x72.png" | relURL }}" sizes="72x72">
+<link rel="icon" type="image/png" href="{{ "favicons/android-96x96.png" | relURL }}" sizes="96x96">
+<link rel="icon" type="image/png" href="{{ "favicons/android-144x144.png" | relURL }}" sizes="144x144">
+<link rel="icon" type="image/png" href="{{ "favicons/android-192x192.png" | relURL }}" sizes="192x192">
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 1cfdaf52..35d6f004 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,16 +1,6 @@
-<footer class="row d-print-none">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-6">
-          <div class="footer-copyright">
-        {{ with .Site.Params.copyright }}
-            &copy; {{ now.Year}} {{ . }} {{ T "footer_all_rights_reserved" }}
-        {{ end }}
-          </div>
-      </div>
-      <div class="col-md-6 text-md-right">
-        <a class="text-white" href="{{ ref . (dict "path" "contact" "lang" "de") }}">Kontakt / Impressum</a>
-      </div>
-    </div>
-  </div>
+<footer class="full-width content-grid">
+  <ul class="footer-items">
+    <li>&copy; {{ now.Year }} OpenBikeSensor Contributors – veröffentlicht unter LGPL-3.0</li>
+    <li><a class="text-white" href="{{ ref . (dict "path" "contact" "lang" "de") }}">Kontakt / Impressum</a></li>
+  </ul>
 </footer>
diff --git a/layouts/partials/head-css.html b/layouts/partials/head-css.html
new file mode 100644
index 00000000..d2178317
--- /dev/null
+++ b/layouts/partials/head-css.html
@@ -0,0 +1,11 @@
+
+{{ $scssMain := "scss/main.scss"}}
+{{ if not hugo.IsProduction }}
+{{/* Note the missing postCSS. This makes it snappier to develop in Chrome, but makes it look sub-optimal in other browsers. */}}
+{{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" true) }}
+<link href="{{ $css.RelPermalink }}" rel="stylesheet">
+{{ else }}
+{{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" false) | postCSS | minify | fingerprint }}
+<link rel="preload" href="{{ $css.RelPermalink }}" as="style">
+<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.integrity }}">
+{{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c8d4c5db..96b4d469 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -4,7 +4,7 @@
 {{- $outputFormat := partial "outputformat.html" . -}}
 
 {{ range .AlternativeOutputFormats -}}
-<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
+<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .RelPermalink | safeURL }}">
 {{ end -}}
 
 {{ if and hugo.IsProduction (ne $outputFormat "print") -}}
diff --git a/layouts/partials/hooks/head-end.html b/layouts/partials/hooks/head-end.html
index 0b0858d9..1e97b3fa 100644
--- a/layouts/partials/hooks/head-end.html
+++ b/layouts/partials/hooks/head-end.html
@@ -1,20 +1,20 @@
 {{ $js := resources.Get "js/slider/ideal-image-slider.min.js" }}
-<script src="{{ $js.Permalink }}"></script>
+<script src="{{ $js.RelPermalink }}"></script>
 
 {{ $js := resources.Get "js/slider/iis-bullet-nav.js"  }}
-<script src="{{ $js.Permalink }}"></script>
+<script src="{{ $js.RelPermalink }}"></script>
 
 {{ $js := resources.Get "js/slider/iis-captions.js"   }}
-<script src="{{ $js.Permalink }}"></script>
+<script src="{{ $js.RelPermalink }}"></script>
 
 {{ $js := resources.Get "js/obs.js" | js.Build  }}
-<script src="{{ $js.Permalink }}"></script>
+<script src="{{ $js.RelPermalink }}"></script>
 
 {{ $css := resources.Get "css/slider/ideal-image-slider.css" }}
-<link rel="stylesheet" href="{{ $css.Permalink }}">
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
 
 {{ $css := resources.Get "css/slider/themes/default.css" }}
-<link rel="stylesheet" href="{{ $css.Permalink }}">
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
 
 
 
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 6bd95f93..95abf221 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,37 +1,41 @@
 {{ $currentPage := . }}
-{{ $large := (eq .Section "docs") }}
-<nav class="js-navbar-scroll navbar navbar-expand navbar-dark flex-column flex-md-row td-navbar">
-    {{ if not $large }}<div class="container">{{ end }}
-        <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
-		<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span><span class="text-uppercase font-weight-bold">{{ .Site.Title }}</span>
-	</a>
-	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
-		<ul class="navbar-nav mt-2 mt-lg-0">
-			{{ $p := . }}
-			{{ range .Site.Menus.main }}
-      <li class="nav-item mr-4 mb-2 mb-lg-0{{ if .HasChildren }} dropdown{{ end }}">
-				{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
-				{{ with .Page }}
-				{{ $active = or $active ( $.IsDescendant .)  }}
-				{{ end }}
-				{{ $url := urls.Parse .URL }}
-				{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
+<header id="header" class="full-width">
+  <a class="site-icon" href="{{ .Site.Home.RelPermalink }}">
+    {{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
+  </a>
+  <a class="site-title" href="{{ .Site.Home.RelPermalink }}">
+    {{ .Site.Title }}
+  </a>
 
-        {{ if .HasChildren }}
-        <a {{ if .Identifier }}id="{{ .Identifier }}"{{ end }} class="nav-link dropdown-toggle {{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }} role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
-    <ul class="dropdown-menu">
-                    {{ range .Children }}
-                        <li class="dropdown-item {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
-                            <a href="{{ .URL }}">{{ .Name }}</a>
-                        </li>
-                    {{ end }}
-                </ul>
+  <nav class="menu">
+    <ul>
+      {{ $p := . }}
+      {{ range .Site.Menus.main }}
+      <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
+        {{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
+        {{ with .Page }}
+        {{ $active = or $active ( $.IsDescendant .)  }}
+        {{ end }}
+        {{ $url := urls.Parse .URL }}
+        {{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
+
+        {{ if .Page }}
+          <a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{end }}" >{{ .Name }}</a>
         {{ else }}
-				  <a {{ if .Identifier }}id="{{ .Identifier }}"{{ end }} class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
+          <span tabindex="0">{{ .Name }}</span>
+        {{ end }}
+
+        {{ if .HasChildren }}
+          <ul class="dropdown-menu">
+            {{ range .Children }}
+              <li class="dropdown-item {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
+                <a href="{{ .URL }}">{{ .Name }}</a>
+              </li>
+            {{ end }}
+          </ul>
         {{ end }}
-			</li>
-			{{ end }}
-		</ul>
-	</div>
-    {{ if not $large }}</div>{{ end }}
-</nav>
+      </li>
+      {{ end }}
+    </ul>
+  </nav>
+</header>
diff --git a/layouts/partials/outputformat.html b/layouts/partials/outputformat.html
new file mode 100644
index 00000000..bd83f965
--- /dev/null
+++ b/layouts/partials/outputformat.html
@@ -0,0 +1,12 @@
+{{/* Return the current page outputformat */}}
+{{ $alts := newScratch }}
+{{ $format := "unknown" }}
+{{ range .AlternativeOutputFormats }}
+    {{ $alts.Set .Name true }}
+{{ end }}
+{{ range .OutputFormats }}
+    {{ if not ($alts.Get .Name) }}
+        {{ $format = .Name }}
+    {{ end }}
+{{ end }}
+{{ return $format }}
diff --git a/layouts/partials/page-meta-links.html b/layouts/partials/page-meta-links.html
deleted file mode 100644
index 46abba5d..00000000
--- a/layouts/partials/page-meta-links.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{{ if .File }}
-  {{ $pathFormatted := replace .File.Path "\\" "/" }}
-  {{ $gh_repo := ($.Param "github_repo") }}
-  {{ $gh_subdir := ($.Param "github_subdir") }}
-  {{ $gh_project_repo := ($.Param "github_project_repo") }}
-  {{ $gh_branch := (default "master" ($.Param "github_branch")) }}
-  <div class="td-page-meta ms-2 pb-1 pt-2 mb-0">
-  {{ if $gh_repo }}
-    {{ $gh_repo_path := printf "%s/content/%s" $gh_branch $pathFormatted }}
-    {{ $editURL := printf "%s/edit/%s" $gh_repo $gh_repo_path }}
-    {{ $createURL := printf "%s/edit/%s" $gh_repo $gh_repo_path }}
-    {{ $issuesURL := printf "%s/issues/new?title=%s" $gh_repo (htmlEscape $.Title )}}
-    {{ $newPageStub := resources.Get "stubs/new-page-template.md" }}
-    {{ $newPageQS := querify "value" $newPageStub.Content "filename" "change-me.md" | safeURL }}
-    {{ $newPageURL := printf "%s/new/%s?%s"  $gh_repo $gh_repo_path $newPageQS }}
-  <a href="{{ $editURL }}" class="td-page-meta--edit" target="_blank" rel="noopener" title="edit"><i class="fa-solid fa-pen-to-square fa-fw"></i></a>
-  <a href="{{ $issuesURL }}" class="td-page-meta--issue" target="_blank" rel="noopener" title="post issue"><i class="fa-solid fa-list-check fa-fw"></i></a>
-
-    {{ if $gh_project_repo }}
-      {{ $project_issueURL := printf "%s/issues/new" $gh_project_repo }}
-      <a href="{{ $project_issueURL }}" target="_blank"><i class="fas fa-tasks fa-fw"></i> {{ T "post_create_project_issue" }}</a>
-    {{ end }}
-
-  {{ end }}
-  {{ with .CurrentSection.AlternativeOutputFormats.Get "print" }}
-    <a id="print" href="{{ .Permalink | safeURL }}"><i class="fa fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
-  {{ end }}
-  </div>
-{{ end }}
diff --git a/layouts/partials/pager.html b/layouts/partials/pager.html
new file mode 100644
index 00000000..b571222a
--- /dev/null
+++ b/layouts/partials/pager.html
@@ -0,0 +1,9 @@
+<div class="blog-pager">
+{{if .PrevInSection}}
+  <a class="button" href="{{.PrevInSection.RelPermalink}}"><span class="me-1">←</span> Voriger Post</a>
+{{ end }}
+
+{{if .NextInSection}}
+  <a class="button" href="{{.NextInSection.RelPermalink}}">Nächster Post →</a>
+{{ end }}
+</div>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 1a49fd94..f172e68c 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,7 +1,6 @@
 {{ $jsJquery := resources.Get "js/jquery-3.5.1.min.js" }}
 {{ $jsPopper := resources.Get "js/popper.min.js" }}
-{{ $jsBootstrap := resources.Get "js/bootstrap.min.js" }}
-{{ $jsVendor := (slice $jsJquery $jsPopper $jsBootstrap) | resources.Concat "js/vendor.js" }}
+{{ $jsVendor := slice $jsJquery $jsPopper | resources.Concat "js/vendor.js" }}
 
 {{ if .Site.IsServer }}
 <script src="{{ $jsVendor.RelPermalink }}"></script>
@@ -9,21 +8,3 @@
 {{ $jsVendor := $jsVendor | fingerprint }}
 <script src="{{ $jsVendor.RelPermalink }}" integrity="{{ $jsVendor.Data.Integrity }}" crossorigin="anonymous"></script>
 {{ end }}
-
-{{ $jsBase := resources.Get "js/base.js" }}
-{{ $jsAnchor := resources.Get "js/anchor.js" }}
-{{ if .Site.Params.offlineSearch }}
-{{ $jsSearch = resources.Get "js/offline-search.js" }}
-{{ end }}
-{{ $js := (slice $jsBase $jsAnchor) | resources.Concat "js/main.js" }}
-{{ if .Site.IsServer }}
-<script src="{{ $js.RelPermalink }}"></script>
-{{ else }}
-{{ $js := $js | minify | fingerprint }}
-<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
-{{ end }}
-{{ if .Site.Params.prism_syntax_highlighting }}
-<!-- scripts for prism -->
-<script src='{{ "/js/prism.js" | relURL }}'></script>
-{{ end }}
-{{ partial "hooks/body-end.html" . }}
diff --git a/layouts/partials/section-index.html b/layouts/partials/section-index.html
new file mode 100644
index 00000000..07ae82ca
--- /dev/null
+++ b/layouts/partials/section-index.html
@@ -0,0 +1,26 @@
+{{ $parent := .Page -}}
+{{ $pages := (where .Site.Pages "Section" .Section).ByWeight -}}
+{{ $pages = (where $pages "Type" "!=" "search") }}
+{{ $pages = (where $pages ".Params.hide_summary" "!=" true) -}}
+{{ $pages = (where $pages ".Parent" "!=" nil) -}}
+{{ if .Parent.File -}}
+    {{ $pages = (where $pages "Parent.File.UniqueID" "==" $parent.File.UniqueID) -}}
+{{ end -}}
+
+<ul class="section-index">
+  {{ if gt (len $pages) 0 -}}
+  {{ range $pages -}}
+  {{ $manualLink := cond (isset .Params "manuallink") .Params.manualLink ( cond (isset .Params "manuallinkrelref") (relref . .Params.manualLinkRelref) .RelPermalink) -}}
+  <li>
+    <h5>
+      <a href="{{ $manualLink }}"{{ with .Params.manualLinkTitle }} title="{{ . }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }}>{{- .Title -}}</a>
+    </h5>
+    {{ if .Description }}
+      <p>{{ .Description | markdownify -}}</p>
+    {{ else if .Summary }}
+      <p>{{ .Summary -}}</p>
+    {{ end }}
+  </li>
+  {{ end -}}
+  {{ end -}}
+</ul>
diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
deleted file mode 100644
index 3d3c1c30..00000000
--- a/layouts/partials/sidebar-tree.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div id="td-sidebar-menu" class="td-sidebar__inner">
-    <div id="content-mobile">
-        <form class="td-sidebar__search d-flex align-items-center">
-            {{ partial "search-input.html" . }}
-            <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
-            </button>
-        </form>
-    </div>
-    <div id="content-desktop"></div>
-
-    <nav class="collapse td-sidebar-nav" id="td-section-nav">
-        {{ if  (gt (len .Site.Home.Translations) 0) }}
-            <div class="nav-item dropdown d-block d-lg-none">
-                {{ partial "navbar-lang-selector.html" . }}
-            </div>
-        {{ end }}
-
-        {{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection }}
-
-        {{ template "section-tree-nav-section" (dict "page" . "section" $navRoot "depth" 0)  }}
-    </nav>
-</div>
-
-{{ define "section-tree-nav-section" }}
-
-    {{ $section := .section }}
-    {{ $currentPage := .page }}
-    {{ $depth := .depth }}
-    {{ $sid := $section.RelPermalink | anchorize }}
-
-    {{ $pages := where (union $section.Pages $section.Sections).ByWeight ".Params.toc_hide" "!=" true }}
-    {{ $pages := $pages | first 50 }}
-
-    <ul>
-        {{ range $pages }}
-            {{ $active := eq . $currentPage }}
-
-            <li>
-                <a  href="{{ .RelPermalink }}"
-                    class="{{ if $active}} current-page{{ end }}">
-                    {{ .LinkTitle }}
-                </a>
-
-                {{ if and (not .IsPage) (or (eq $currentPage .) ($currentPage.IsDescendant .) (lt $depth 1)) }}
-                    {{ template "section-tree-nav-section" (dict "page" $currentPage "section" . "depth" (add $depth 1)) }}
-                {{ end }}
-            </li>
-        {{ end }}
-    </ul>
-{{ end }}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
new file mode 100644
index 00000000..ca59a815
--- /dev/null
+++ b/layouts/partials/sidebar.html
@@ -0,0 +1,31 @@
+<nav class="sidebar">
+    {{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection }}
+    {{ template "section-tree-nav-section" (dict "page" . "section" $navRoot "depth" 0)  }}
+</nav>
+
+{{ define "section-tree-nav-section" }}
+    {{ $section := .section }}
+    {{ $currentPage := .page }}
+    {{ $depth := .depth }}
+    {{ $sid := $section.RelPermalink | anchorize }}
+
+    {{ $pages := where (union $section.Pages $section.Sections).ByWeight ".Params.toc_hide" "!=" true }}
+    {{ $pages := $pages | first 50 }}
+
+    <ul>
+        {{ range $pages }}
+            {{ $active := eq . $currentPage }}
+
+            <li>
+                <a  href="{{ .RelPermalink }}"
+                    class="{{ if $active}} current-page{{ end }}">
+                    {{ .LinkTitle }}
+                </a>
+
+                {{ if and (not .IsPage) (or (eq $currentPage .) ($currentPage.IsDescendant .) (lt $depth 1)) }}
+                    {{ template "section-tree-nav-section" (dict "page" $currentPage "section" . "depth" (add $depth 1)) }}
+                {{ end }}
+            </li>
+        {{ end }}
+    </ul>
+{{ end }}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
new file mode 100644
index 00000000..35806d78
--- /dev/null
+++ b/layouts/partials/toc.html
@@ -0,0 +1,10 @@
+{{ if not .Params.notoc -}}
+  {{ with .TableOfContents -}}
+    {{ if ne . `<nav id="TableOfContents"></nav>` -}}
+      <aside class="toc">
+        <h6>Auf dieser Seite</h6>
+        {{ . }}
+      </aside>
+    {{ end -}}
+  {{ end -}}
+{{ end -}}
diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html
new file mode 100644
index 00000000..c93ff3f1
--- /dev/null
+++ b/layouts/shortcodes/alert.html
@@ -0,0 +1,10 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $color := .Get "color" | default "primary" }}
+<div class="alert alert-{{ $color }}" role="alert">
+{{ with .Get "title" }}<h5 class="alert-heading">{{ . | safeHTML }}</h5>{{ end }}
+{{ if eq .Page.File.Ext "md" }}
+    {{ .Inner | markdownify }}
+{{ else }}
+    {{ .Inner | htmlUnescape | safeHTML }}
+{{ end }}
+</div>
diff --git a/layouts/shortcodes/blocks/cover.html b/layouts/shortcodes/blocks/cover.html
index aabb7062..392ae696 100644
--- a/layouts/shortcodes/blocks/cover.html
+++ b/layouts/shortcodes/blocks/cover.html
@@ -15,18 +15,19 @@
 <link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)">
 <style>
 #{{ $blockID }} {
-    background-image: url({{ $promo_image_small.RelPermalink }}); 
+    background-image: url({{ $promo_image_small.RelPermalink }});
 }
 @media only screen and (min-width: 1200px) {
     #{{ $blockID }} {
-        background-image: url({{ $promo_image_big.RelPermalink }}); 
+        background-image: url({{ $promo_image_big.RelPermalink }});
     }
 }
 </style>
 {{ end }}
+
 <section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height }} js-td-cover td-overlay td-overlay--dark -bg-{{ $col_id }}">
+  <a class="award" href="blog/2024/02/01/nachruf/"><img  src="natenom_banderole.png"/></a>
   <div class="container td-overlay__inner">
-   <div class="position-absolute top-0 start-0"><a href="blog/2024/02/01/nachruf/"><img class="award" src="natenom_banderole.png"/></a></div>
     <div class="row">
       <div class="col-12">
         <div class="text-center">
diff --git a/layouts/shortcodes/blocks/feature.html b/layouts/shortcodes/blocks/feature.html
index cffec75b..5e96e3fe 100644
--- a/layouts/shortcodes/blocks/feature.html
+++ b/layouts/shortcodes/blocks/feature.html
@@ -1,10 +1,8 @@
-{{ $icon := .Get "icon" | default "fa-lightbulb" }}
+{{ $icon := .Get "icon" | default "lightbulb" }}
 {{ $url_text := .Get "url_text" }}
-<div class="col-lg-4 col-md-6 mb-5 mb-lg-0 position-relative feature-cell">
-  <i class="feature-icon {{ if not (or (hasPrefix $icon "fas ") (hasPrefix $icon "fab ")) }}fas {{ end }}{{ $icon }}"></i>
-  <h4 class="h3">
-    {{ .Get "title" | markdownify }}
-  </h4>
-  <p class="mb-0">{{ .Inner }}</p>
-  {{ with .Get "url" }}<p class="mt-auto"><a href="{{ . }}" class="btn btn-outline-light">{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} <i class="fa fa-arrow-right ms-2"></i></a></p>{{ end }}
+<div class="feature-cell">
+  {{ partial "fa.html" $icon }}
+  <h3>{{ .Get "title" | markdownify }}</h3>
+  <p>{{ .Inner }}</p>
+  {{ with .Get "url" }}<a href="{{ . }}" class="button">{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} <i class="fa fa-arrow-right ms-2"></i></a>{{ end }}
 </div>
diff --git a/layouts/shortcodes/device-type-cell.html b/layouts/shortcodes/device-type-cell.html
index 93092a3a..64406d9b 100644
--- a/layouts/shortcodes/device-type-cell.html
+++ b/layouts/shortcodes/device-type-cell.html
@@ -1,16 +1,14 @@
 {{ $image_file := .Get "image_file" }}
 {{ $image := resources.Get $image_file }}
 
-<div class="col-lg-4 col-md-6 mb-5 mb-lg-0 position-relative device-type-cell {{ .Get "class" }}">
+<div class="device-type-cell {{ .Get "class" }}">
   <h4 class="h3">
       OpenBikeSensor <span>{{ .Get "variant" }}</span>
   </h4>
   <span class="label">{{ .Get "label" }}</span>
   <img src="{{ $image.RelPermalink }}" />
   {{ .Inner | markdownify }}
-  <p class="mt-auto">
-      <a href="{{ .Get "link" }}" class="btn btn-outline-dark">
-          {{ .Get "link_text" }} <i class="fa fa-arrow-right ml-2"></i>
-      </a>
-  </p>
+  <a href="{{ .Get "link" }}" class="button">
+    {{ .Get "link_text" }} {{ partial "fa.html" "arrow-right" }}
+  </a>
 </div>
diff --git a/layouts/shortcodes/fa.html b/layouts/shortcodes/fa.html
new file mode 100644
index 00000000..7025b8b7
--- /dev/null
+++ b/layouts/shortcodes/fa.html
@@ -0,0 +1,6 @@
+<span class="inline-svg" >
+{{- $fname:=print "fontawesome/" ( .Get 0 ) ".svg" -}}
+{{- $path:="<path" -}}
+{{- $fill:="<path fill=\"currentColor\"" -}}
+{{ replace (readFile $fname) $path $fill | safeHTML }}
+</span>
diff --git a/layouts/shortcodes/imgproc.html b/layouts/shortcodes/imgproc.html
index 789ee444..e61998ef 100644
--- a/layouts/shortcodes/imgproc.html
+++ b/layouts/shortcodes/imgproc.html
@@ -24,13 +24,13 @@
 {{ end }}
 {{ $image := .Scratch.Get "image" }}
 
-<div class="card rounded p-2 td-post-card mb-4 mt-4" style="max-width: {{ add $image.Width 10 }}px">
+<figure>
   <a href="{{ $original.RelPermalink }}" target="_blank">
-    <img class="card-img-top img-fluid" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
+    <img src="{{ $image.RelPermalink }}" />
   </a>
-	{{ with .Inner }}
-	<div class="card-body px-0 pt-2 pb-0">
-		<p class="card-text">{{ . }}{{ with $image.Params.byline }}<small class="text-muted"><br/>{{ . | html }}</small>{{ end }}</p>
-	</div>
-	{{ end }}
-</div>
+
+  <figcaption>
+    {{ .Inner }}
+    {{ with $image.Params.byline }}<div class="byline">{{ . | html }}</div>{{ end }}
+  </figcaption>
+</figure>
diff --git a/layouts/shortcodes/pageinfo.html b/layouts/shortcodes/pageinfo.html
new file mode 100644
index 00000000..303f8c5f
--- /dev/null
+++ b/layouts/shortcodes/pageinfo.html
@@ -0,0 +1,5 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $color := .Get "color" | default "primary" }}
+<div class="pageinfo pageinfo-{{ $color }}">
+{{ .Inner }}
+</div>
diff --git a/layouts/shortcodes/print-qr-link.html b/layouts/shortcodes/print-qr-link.html
index 72cf5077..984c08a9 100644
--- a/layouts/shortcodes/print-qr-link.html
+++ b/layouts/shortcodes/print-qr-link.html
@@ -13,7 +13,7 @@
                     Diese Seite gibt es auch online unter
                     <a href="https://openbikesensor.org{{ . }}">https://openbikesensor.org{{ . }}</a>
                 </p>
-                <img src="{{ $img.Permalink }}" />
+                <img src="{{ $img.RelPermalink }}" />
             </div>
         {{ end }}
     {{ end }}
diff --git a/layouts/shortcodes/resistor.html b/layouts/shortcodes/resistor.html
index 9ba95b9b..fddf7412 100644
--- a/layouts/shortcodes/resistor.html
+++ b/layouts/shortcodes/resistor.html
@@ -8,7 +8,7 @@
 
 {{ $bg := cond $hasFive "#8bd2ff" "#ffc482" }}
 
-<div style="font-size: 10pt">
+<div class="resistor">
 <svg
    width="90"
    height="30"
diff --git a/layouts/shortcodes/slider-image.html b/layouts/shortcodes/slider-image.html
index 05b7bd69..5d7caec9 100644
--- a/layouts/shortcodes/slider-image.html
+++ b/layouts/shortcodes/slider-image.html
@@ -2,12 +2,12 @@
 {{- $thumbnail := $src.Resize "1000x q75" -}}
 {{- $alt := .Get "alt" -}}
 {{- $noprint := .Get "noprint" -}}
-<a href="{{ $src.Permalink }}" target="_blank" class="noprint">
-  <img data-src="{{ $thumbnail.Permalink }}" src="{{ $thumbnail.Permalink }}" title="{{ $alt }}" alt="{{ $alt }}">
+<a href="{{ $src.RelPermalink }}" target="_blank" class="noprint">
+  <img data-src="{{ $thumbnail.RelPermalink }}" src="{{ $thumbnail.RelPermalink }}" title="{{ $alt }}" alt="{{ $alt }}">
 </a>
 {{ if not $noprint }}
 <figure class="print-only">
-  <img src="{{ $src.Permalink }}" />
+  <img src="{{ $src.RelPermalink }}" />
   <figcaption>
     {{ $alt }}
   </figcaption>
diff --git a/layouts/shortcodes/yt.html b/layouts/shortcodes/yt.html
index 8293b93f..30680786 100644
--- a/layouts/shortcodes/yt.html
+++ b/layouts/shortcodes/yt.html
@@ -1,9 +1,9 @@
 {{ $Thumbnail := resources.Get (.Get  "thumbnail") }}
 <a class="youtube-video-wrapper" data-video-id="{{.Get "id"}}" href="https://www.youtube.com/watch?v={{ .Get "id" }}" target="_blank">
   <div class="play"></div>
-  <div class="comment">Play content from youtube.com</div>
+  <div class="comment">Video von youtube.com abspielen</div>
 	{{- if $Thumbnail -}}
-  <img src="{{ $Thumbnail.Permalink }}" alt="YouTube Thumbnail" class="thumbnail" />
+  <img src="{{ $Thumbnail.RelPermalink }}" alt="YouTube Thumbnail" class="thumbnail" />
 	{{- else -}}
   <img src="//img.youtube.com/vi/{{.Get "id"}}/0.jpg" alt="YouTube Thumbnail" class="thumbnail" />
 	{{- end -}}
diff --git a/content/featured-background.jpg b/static/featured-background.jpg
similarity index 100%
rename from content/featured-background.jpg
rename to static/featured-background.jpg