added mobile version

src/client/sass/_tagesablauf.scss

@@ -1,9 +1,17 @@
+@import "settings";
+
 $opacityVisible: 0.7;
 $states: godi fingerfood foto sekt essen spiel dance;
 
 #info-image-container {
   position: relative;
 
+  @include breakpoint(small down) {
+    img:not(.circler) {
+      width: 100%;
+    }
+  }
+
   img.circler {
     position: absolute;
     height: 12%;
@@ -14,44 +22,44 @@ $states: godi fingerfood foto sekt essen spiel dance;
     //left: 0;
     &.godi {
       top: 1.5%;
-      left: 46%;
+      left: 51%;
     }
 
     &.fingerfood {
-      left: 9%;
+      left: 5%;
       top: 12.5%;
-      width: 32%;
+      width: 38%;
       height: 20%;
     }
 
     &.foto {
-      left: 48%;
+      left: 55%;
       top: 32%;
-      width: 32%;
+      width: 33%;
     }
 
     &.sekt {
-      left: 9%;
+      left: 7%;
       top: 46.5%;
-      width: 32%;
+      width: 35%;
     }
 
     &.essen {
-      left: 48%;
+      left: 55%;
       top: 60%;
       width: 32%;
     }
 
     &.spiel {
-      left: 11%;
+      left: 8%;
       top: 72.5%;
-      width: 30%;
+      width: 34%;
     }
 
     &.dance {
-      left: 48%;
+      left: 55%;
       top: 86%;
-      width: 29%;
+      width: 32%;
     }
   }
 
@@ -62,14 +70,49 @@ $states: godi fingerfood foto sekt essen spiel dance;
   }
 }
 
-.anchor{
+.anchor {
   display: block;
   //margin-bottom: 2rem;
   padding-top: 1rem;
-  &:first-child{
+
+  &:first-child {
     padding-top: 0;
-  };
+  }
+
   p:last-child {
     margin-bottom: 0;
   }
+
+  &.show-in-dialog {
+    position: fixed;
+
+  }
+}
+
+#modal {
+  display: none;
+
+  &.show {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    background: #0a0a0a40;
+
+    .anchor {
+      margin: 10%;
+      width: 80%;
+      max-height: 80%;
+      overflow: auto;
+      padding: 2rem 3rem;
+      background: $background-color;
+    }
+  }
 }

src/client/sass/index.scss

@@ -83,12 +83,17 @@ a.hidden-link, a.hidden-link:hover {
 h1 {
   font-family: WinterSunrise, serif;
   font-size: 3rem;
-  @include breakpoint(medium) {
+  @include breakpoint(large) {
     font-size: 4.5rem;
   }
 }
 
 #home-img-container {
+
+  &.hide-for-medium #start-text-img-overlay {
+    display: none;
+  }
+
   #home-img {
     width: 100%;
     height: 100%;
@@ -140,7 +145,28 @@ img.full-screen-width {
 
 .site-content {
   padding: 2rem 0.625rem;
-  @include breakpoint(medium) {
+  @include breakpoint(large) {
     padding: 3rem 2rem;
   }
+}
+
+.fill-height {
+  height: calc(100vh - 5rem);
+  @include breakpoint(small only) {
+    height: calc(100vh - 3rem);
+  }
+}
+
+.fill-height-medium-up {
+  @include breakpoint(medium) {
+    height: calc(100vh - 5rem);
+  }
+}
+
+.img-column {
+  max-width: 40%;
+
+  img {
+    object-fit: cover;
+  }
 }