final version?

src/client/sass/_navbar.scss

@@ -4,7 +4,7 @@
   background: white;
   padding: 0;
 
-  .grid-container{
+  .grid-container {
     padding: 0;
   }
 
@@ -13,47 +13,81 @@
     display: flex;
 
     li {
+
       flex: 1;
       text-align: center;
-      height: 5rem;
-      padding-top: 0.9rem;
+      height: 3rem;
+      padding-top: 0.5rem;
       padding-bottom: 0.5rem;
 
-      @include breakpoint(large){
-        padding-top: 0.5rem;
+      &:first-child {
+        flex: initial;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+      }
+
+
+      @include breakpoint(large) {
+        height: 4rem;
       }
 
       a {
         color: black;
         font-family: "Bahnschrift", Helvetica, Arial, serif;
-        font-size: 1.4rem;
-        @include breakpoint(large){
-          font-size: 2rem;
+        font-size: 1.3rem;
+        padding: 0.3rem;
+        @include breakpoint(large) {
+          padding: 0.7rem 1rem;
+          font-size: 1.7rem;
         }
       }
 
       &.active {
-        background: $background-color;
+        background: white;
 
         > a {
-          background: $background-color;
+          background: transparent;
         }
       }
+
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        //background: red;
+        background-image: url("../img/einkreiser.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        display: none;
+        cursor: pointer;
+      }
+
+      &.active::after {
+        display: initial;
+        opacity: 0.7;
+      }
     }
 
     .logo-img {
-      height: 3rem;
-      @include breakpoint(large){
-        height: 4rem;
+      cursor: pointer;
+      height: 2rem;
+      @include breakpoint(large) {
+        height: 3rem;
       }
     }
 
-    &.responsive-menu{
+    &.responsive-menu {
       position: absolute;
-      right:0;
+      right: 0;
       z-index: 1;
       box-shadow: 0 0 5px $background-color;
-      .menu-closer{
+
+      .menu-closer {
         z-index: -1;
         position: fixed;
         top: 0;
@@ -70,23 +104,27 @@
   }
 }
 
-$menuIconHeight : 2rem;
-.title-bar{
+$menuIconHeight: 2rem;
+.title-bar {
   background: $background-color;
   text-align: right;
   //justify-content: flex-end;
   display: block;
-  .menu-icon{
+
+  .menu-icon {
     width: $menuIconHeight;
     height: $menuIconHeight;
     outline: none;
-    &::after{
+
+    &::after {
       background: #fefefe;
       height: #{($menuIconHeight/9)};
       box-shadow: 0 #{($menuIconHeight/3)} 0 #fefefe, 0 #{($menuIconHeight*2/3)} 0 #fefefe;
     }
   }
-  .logo-img{
+
+  .logo-img {
+    cursor: pointer;
     float: left;
     height: $menuIconHeight;
   }

src/client/sass/_tagesablauf.scss

@@ -85,7 +85,12 @@ $states: godi fingerfood foto sekt essen spiel dance;
 
   &.show-in-dialog {
     position: fixed;
-
+  }
+  &:last-child{
+    height: calc(100vh - 8rem - 1px);
+    @include breakpoint(medium down) {
+      height: calc(100vh - 7rem - 1px);
+    }
   }
 }
 
@@ -113,6 +118,7 @@ $states: godi fingerfood foto sekt essen spiel dance;
       overflow: auto;
       padding: 2rem 1rem;
       background: $background-color;
+      height: initial;
     }
   }
 }

src/client/sass/index.scss

@@ -15,6 +15,13 @@
   src: url("../img/WinterSunrise.ttf");
 }
 
+@mixin fullHeight{
+  height: calc(100vh - 4rem);
+  @include breakpoint(medium down) {
+    height: calc(100vh - 3rem);
+  }
+}
+
 .width-100 {
   width: 100%;
 }
@@ -39,10 +46,7 @@ body {
   height: 100%;
 
   #main-content-container {
-    height: calc(100% - 5rem);
-    @include breakpoint(small only) {
-      height: calc(100% - 3rem);
-    }
+    @include fullHeight;
     position: relative;
     overflow: auto;
 
@@ -103,10 +107,7 @@ h1 {
 
     img {
       width: 100%;
-      height: calc(100% - 5rem);
-      @include breakpoint(small only) {
-        height: calc(100% - 3rem);
-      }
+      @include fullHeight;
       object-fit: cover;
     }
 
@@ -151,15 +152,15 @@ img.full-screen-width {
 }
 
 .fill-height {
-  height: calc(100vh - 5rem);
-  @include breakpoint(small only) {
-    height: calc(100vh - 3rem);
-  }
+  @include fullHeight;
 }
 
 .fill-height-medium-up {
   @include breakpoint(medium) {
-    height: calc(100vh - 5rem);
+    height: calc(100vh - 3rem);
+    @include breakpoint(large){
+      height: calc(100vh - 4rem);
+    }
   }
 }
 
@@ -169,4 +170,16 @@ img.full-screen-width {
   img {
     object-fit: cover;
   }
+}
+
+.padding-bottom-0 {
+  padding-bottom: 0;
+}
+
+.hide-scrollbar{
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar{
+    display: none;
+  }
 }