final version?

dist/index.html

@@ -31,7 +31,7 @@
             </ul>
             <ul class="menu align-center-middle medium-horizontal hide-for-small-only">
                 <li><img class="logo-img" src="/img/logo.png" alt="J&S"></li>
-                <li class="active" data-site="home" data-img="1"><a>Home</a></li>
+                <li class="active" data-site="home" data-img-show-always="1"><a>Home</a></li>
                 <li data-site="tagesablauf"><a>Tagesablauf</a></li>
                 <li data-site="unterkunft"><a>Unterkunft</a></li>
                 <li data-site="geschenke"><a>Geschenke</a></li>

dist/main.css

@@ -4770,28 +4770,51 @@ html.is-reveal-open {
     .top-bar .menu li {
       flex: 1;
       text-align: center;
-      height: 5rem;
-      padding-top: 0.9rem;
-      padding-bottom: 0.5rem; }
+      height: 3rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      position: relative; }
+      .top-bar .menu li:first-child {
+        flex: initial;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem; }
       @media print, screen and (min-width: 64em) {
         .top-bar .menu li {
-          padding-top: 0.5rem; } }
+          height: 4rem; } }
       .top-bar .menu li a {
         color: black;
         font-family: "Bahnschrift", Helvetica, Arial, serif;
-        font-size: 1.4rem; }
+        font-size: 1.3rem;
+        padding: 0.3rem; }
         @media print, screen and (min-width: 64em) {
           .top-bar .menu li a {
-            font-size: 2rem; } }
+            padding: 0.7rem 1rem;
+            font-size: 1.7rem; } }
       .top-bar .menu li.active {
-        background: #d7c9ac; }
+        background: white; }
         .top-bar .menu li.active > a {
-          background: #d7c9ac; }
+          background: transparent; }
+      .top-bar .menu li::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: url(/img/einkreiser.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        display: none;
+        cursor: pointer; }
+      .top-bar .menu li.active::after {
+        display: initial;
+        opacity: 0.7; }
     .top-bar .menu .logo-img {
-      height: 3rem; }
+      cursor: pointer;
+      height: 2rem; }
       @media print, screen and (min-width: 64em) {
         .top-bar .menu .logo-img {
-          height: 4rem; } }
+          height: 3rem; } }
     .top-bar .menu.responsive-menu {
       position: absolute;
       right: 0;
@@ -4821,6 +4844,7 @@ html.is-reveal-open {
       height: 0.22222rem;
       box-shadow: 0 0.66667rem 0 #fefefe, 0 1.33333rem 0 #fefefe; }
   .title-bar .logo-img {
+    cursor: pointer;
     float: left;
     height: 2rem; }
 
@@ -4935,6 +4959,11 @@ html.is-reveal-open {
     margin-bottom: 0; }
   .anchor.show-in-dialog {
     position: fixed; }
+  .anchor:last-child {
+    height: calc(100vh - 8rem - 1px); }
+    @media print, screen and (max-width: 63.99875em) {
+      .anchor:last-child {
+        height: calc(100vh - 7rem - 1px); } }
 
 #modal {
   display: none; }
@@ -4956,7 +4985,8 @@ html.is-reveal-open {
       max-height: 80%;
       overflow: auto;
       padding: 2rem 1rem;
-      background: #d7c9ac; }
+      background: #d7c9ac;
+      height: initial; }
 
 @font-face {
   font-family: "WinterSunrise";
@@ -4981,12 +5011,12 @@ body {
   width: 100%;
   height: 100%; }
   body #main-content-container {
-    height: calc(100% - 5rem);
+    height: calc(100vh - 4rem);
     position: relative;
     overflow: auto; }
-    @media print, screen and (max-width: 49.99875em) {
+    @media print, screen and (max-width: 63.99875em) {
       body #main-content-container {
-        height: calc(100% - 3rem); } }
+        height: calc(100vh - 3rem); } }
     body #main-content-container #scroll-container {
       min-height: 100%;
       background: #d7c9ac; }
@@ -5026,11 +5056,11 @@ h1 {
   position: fixed; }
   #home-img-container #home-img img {
     width: 100%;
-    height: calc(100% - 5rem);
+    height: calc(100vh - 4rem);
     object-fit: cover; }
-    @media print, screen and (max-width: 49.99875em) {
+    @media print, screen and (max-width: 63.99875em) {
       #home-img-container #home-img img {
-        height: calc(100% - 3rem); } }
+        height: calc(100vh - 3rem); } }
   #home-img-container #home-img #start-text-img-overlay {
     position: absolute;
     bottom: 3rem;
@@ -5064,17 +5094,29 @@ img.full-screen-width {
       padding: 3rem 2rem; } }
 
 .fill-height {
-  height: calc(100vh - 5rem); }
-  @media print, screen and (max-width: 49.99875em) {
+  height: calc(100vh - 4rem); }
+  @media print, screen and (max-width: 63.99875em) {
     .fill-height {
       height: calc(100vh - 3rem); } }
 
 @media print, screen and (min-width: 50em) {
   .fill-height-medium-up {
-    height: calc(100vh - 5rem); } }
+    height: calc(100vh - 3rem); } }
+  @media print, screen and (min-width: 50em) and (min-width: 64em) {
+    .fill-height-medium-up {
+      height: calc(100vh - 4rem); } }
 
 .img-column {
   max-width: 40%; }
   .img-column img {
     object-fit: cover; }
 
+.padding-bottom-0 {
+  padding-bottom: 0; }
+
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none; }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none; }
+