added mobile version

dist/index.html

@@ -23,7 +23,7 @@
         <div class="top-bar-left">
             <ul class="menu align-center-middle vertical responsive-menu hide-for-medium" data-toggle="main-menu">
                 <span class="menu-closer"></span>
-                <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

@@ -4864,6 +4864,9 @@ html.is-reveal-open {
 
 #info-image-container {
   position: relative; }
+  @media print, screen and (max-width: 49.99875em) {
+    #info-image-container img:not(.circler) {
+      width: 100%; } }
   #info-image-container img.circler {
     position: absolute;
     height: 12%;
@@ -4871,32 +4874,32 @@ html.is-reveal-open {
     cursor: pointer; }
     #info-image-container img.circler.godi {
       top: 1.5%;
-      left: 46%; }
+      left: 51%; }
     #info-image-container img.circler.fingerfood {
-      left: 9%;
+      left: 5%;
       top: 12.5%;
-      width: 32%;
+      width: 38%;
       height: 20%; }
     #info-image-container img.circler.foto {
-      left: 48%;
+      left: 55%;
       top: 32%;
-      width: 32%; }
+      width: 33%; }
     #info-image-container img.circler.sekt {
-      left: 9%;
+      left: 7%;
       top: 46.5%;
-      width: 32%; }
+      width: 35%; }
     #info-image-container img.circler.essen {
-      left: 48%;
+      left: 55%;
       top: 60%;
       width: 32%; }
     #info-image-container img.circler.spiel {
-      left: 11%;
+      left: 8%;
       top: 72.5%;
-      width: 30%; }
+      width: 34%; }
     #info-image-container img.circler.dance {
-      left: 48%;
+      left: 55%;
       top: 86%;
-      width: 29%; }
+      width: 32%; }
   #info-image-container[data-state='godi'] .godi {
     opacity: 0.7; }
   #info-image-container[data-state='fingerfood'] .fingerfood {
@@ -4919,6 +4922,30 @@ html.is-reveal-open {
     padding-top: 0; }
   .anchor p:last-child {
     margin-bottom: 0; }
+  .anchor.show-in-dialog {
+    position: fixed; }
+
+#modal {
+  display: none; }
+  #modal.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; }
+    #modal.show .anchor {
+      margin: 10%;
+      width: 80%;
+      max-height: 80%;
+      overflow: auto;
+      padding: 2rem 3rem;
+      background: #d7c9ac; }
 
 @font-face {
   font-family: "WinterSunrise";
@@ -4974,10 +5001,13 @@ a.hidden-link, a.hidden-link:hover {
 h1 {
   font-family: WinterSunrise, serif;
   font-size: 3rem; }
-  @media print, screen and (min-width: 50em) {
+  @media print, screen and (min-width: 64em) {
     h1 {
       font-size: 4.5rem; } }
 
+#home-img-container.hide-for-medium #start-text-img-overlay {
+  display: none; }
+
 #home-img-container #home-img {
   width: 100%;
   height: 100%;
@@ -5018,7 +5048,22 @@ img.full-screen-width {
 
 .site-content {
   padding: 2rem 0.625rem; }
-  @media print, screen and (min-width: 50em) {
+  @media print, screen and (min-width: 64em) {
     .site-content {
       padding: 3rem 2rem; } }
 
+.fill-height {
+  height: calc(100vh - 5rem); }
+  @media print, screen and (max-width: 49.99875em) {
+    .fill-height {
+      height: calc(100vh - 3rem); } }
+
+@media print, screen and (min-width: 50em) {
+  .fill-height-medium-up {
+    height: calc(100vh - 5rem); } }
+
+.img-column {
+  max-width: 40%; }
+  .img-column img {
+    object-fit: cover; }
+