fixes

private/scss/modules/_contact.scss

@@ -2,6 +2,9 @@
   display: table;
   height: 100%;
   width: 100%;
+  @media screen and (max-width: $medium_breakpoint) {
+    display: block;
+  }
 }
 
 .contact__frame {
@@ -13,6 +16,7 @@
   vertical-align: bottom;
   position: relative;
   @media screen and (max-width: $medium_breakpoint) {
+    display: block;
     padding-top: em(300px);
   }
   @media screen and (max-width: $small_breakpoint) {
@@ -41,6 +45,7 @@
   color: $white;
   position: relative;
   z-index: 100;
+  max-width: 100%;
 }
 
 .contact__content__main {

private/scss/modules/plugins/_section_title.scss

@@ -21,4 +21,7 @@
   br {
     display: none;
   }
+  @media screen and (max-width: $medium_breakpoint) {
+    font-size: em(150px);
+  }
 }

private/scss/modules/plugins/_slider.scss

@@ -40,6 +40,14 @@
           @include disable_slider_navigation();
         }
       }
+      .slider__text__item__email.data_id_#{$i} {
+        transform: none;
+        pointer-events: all;
+        opacity: 1;
+        & ~ .slider__text__item__email {
+          transform: translateX(200%);
+        }
+      }
     }
     &[data-last="#{$i}"] {
       .text_slider__container {
@@ -60,83 +68,77 @@
 .slider__content {
   width: 100%;
   position: relative;
-  min-height: em(400px);
-  padding: em(90px) 0 em(80px);
-  text-align: right;
   vertical-align: top;
-  @media screen and (max-width: $medium_breakpoint) {
-    padding: em(300px) 0 0;
-  }
+  font-size: 0;
+  white-space: nowrap;
 }
 
 .slider__navigation {
   position: absolute;
   top: 0;
   right: 0;
-  width: em(90px);
-  height: em(90px);
-  line-height: em(75px);
+  width: 90px;
+  height: 90px;
+  line-height: 75px;
   text-align: center;
   font-size: 0;
   transform: none;
   opacity: 1;
-  text-indent: em(15px);
+  text-indent: 15px;
   direction: rtl;
   transition: opacity 0.2s ease-in-out;
+  z-index: 10;
   svg {
     fill: $green;
     transition: fill 0.2s ease-in-out, transform 0.2s ease-in-out;
     display: inline-block;
-    width: em(35px);
-    height: em(35px);
+    width: 35px;
+    height: 35px;
     vertical-align: middle;
   }
   html.no-touchevents &:hover {
     svg {
       fill: darken($green, 10);
-      transform: translateX(em(5px));
+      transform: translateX(5px);
     }
   }
   @media screen and (max-width: $medium_breakpoint) {
-    width: em(65px);
-    height: em(65px);
+    width: 65px;
+    height: 65px;
     background: $white;
-    line-height: em(65px);
+    line-height: 65px;
     text-indent: 0;
-    top: em(300px);
-    margin-top: em(-65px);
     svg {
-      width: em(25px);
-      height: em(25px);
+      width: 25px;
+      height: 25px;
     }
   }
 }
 
 .slider__navigation--prev {
-  right: em(90px);
+  right: 90px;
   direction: ltr;
   &:hover {
     svg {
-      transform: translateX(em(-5px));
+      transform: translateX(-5px);
     }
   }
   @media screen and (max-width: $medium_breakpoint) {
-    right: em(65px);
+    right: 65px;
   }
 }
 
 .slider__images__frame {
-  position: absolute;
   overflow: hidden;
-  top: 0;
-  left: 0;
-  right: em(180px);
-  padding-bottom: 56%;
-  max-height: 100%;
+  //right: em(180px);
+  width: calc(100% - 180px);
+  display: inline-block;
   z-index: -1;
+  padding-bottom: 50%;
+  position: relative;
   @media screen and (max-width: $medium_breakpoint) {
-    right: 10%;
-    bottom: em(200px);
+    width: 90%;
+    padding-bottom: 70%;
   }
 }
 
@@ -173,14 +175,27 @@
   text-align: left;
   font-size: 0;
   white-space: nowrap;
-  overflow: hidden;
-  padding-bottom: em(50px);
+  margin-left: -42%;
+  left: 180px;
   @media screen and (max-width: $medium_breakpoint) {
+    padding-top: 40%;
+    margin-left: -80%;
+    left: 0;
     width: 90%;
   }
 }
 
 .slider__texts__frame {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  padding: 90px 0 0 0;
+  @media screen and (max-width: $medium_breakpoint) {
+    padding: 65px 0 0 0;
+  }
+}
+
+.slider__texts__main {
   width: 100%;
   background: $green;
 }
@@ -271,11 +286,13 @@
   position: absolute;
   bottom: -30px;
   left: 20%;
-  transform: none;
-  transition: transform 0.2s ease-in-out;
+  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
   box-shadow: 0 0 30px rgba($black, 0.1);
   text-align: center;
   line-height: 69px;
+  transform: translateX(-200%);
+  pointer-events: none;
+  opacity: 0;
   svg {
     display: inline-block;
     fill: $green;
@@ -285,6 +302,6 @@
     margin-top: -2px;
   }
   &:hover {
-    transform: scale(1.1);
+    transform: scale(1.05) !important;
   }
 }

src/project/templates/project/plugins/content/slider.html

@@ -13,24 +13,38 @@
         </div>
         <div class="slider__texts reveal reveal_animation data_delay_2">
             <div class="slider__texts__frame">
-                <div class="slider__texts__content">
-                    {% for plugin in instance.child_plugin_instances %}
-                        <div class="slider__text__item data_id_{{ forloop.counter0 }}">
-                            {% render_plugin plugin %}
-                        </div>
-                    {% endfor %}
+                <div class="slider__texts__main">
+                    <div class="slider__texts__content">
+                        {% for plugin in instance.child_plugin_instances %}
+                            <div class="slider__text__item data_id_{{ forloop.counter0 }}">
+                                {% render_plugin plugin %}
+                            </div>
+                        {% endfor %}
+                    </div>
                 </div>
+
+                {% if instance.child_plugin_instances|length > 1 %}
+                    <a href="#"
+                       class="slider__navigation slider__navigation--next">
+                        {% include 'project/assets/arrow-right.svg' %}
+                        {% trans 'Nächster Slide' %}
+                    </a>
+                    <a href="#"
+                       class="slider__navigation slider__navigation--prev">
+                        {% include 'project/assets/arrow-left.svg' %}
+                        {% trans 'Vorheriger Slide' %}
+                    </a>
+                {% endif %}
             </div>
+
+            {% for plugin in instance.child_plugin_instances %}
+                {% if plugin.email %}
+                    <a href="mailto:{{ plugin.email }}"
+                       class="slider__text__item__email data_id_{{ forloop.counter0 }}">
+                        {% include 'project/assets/mail.svg' %}
+                    </a>
+                {% endif %}
+            {% endfor %}
         </div>
     </div>
-    {% if instance.child_plugin_instances|length > 1 %}
-        <a href="#" class="slider__navigation slider__navigation--next reveal reveal_animation data_delay_5">
-            {% include 'project/assets/arrow-right.svg' %}
-            {% trans 'Nächster Slide' %}
-        </a>
-        <a href="#" class="slider__navigation slider__navigation--prev reveal reveal_animation data_delay_4">
-            {% include 'project/assets/arrow-left.svg' %}
-            {% trans 'Vorheriger Slide' %}
-        </a>
-    {% endif %}
 </div>

src/project/templates/project/plugins/content/slider_item.html

@@ -16,9 +16,4 @@
             {% endfor %}
         </ul>
     {% endif %}
-    {% if instance.email %}
-        <a href="mailto:{{ instance.email }}" class="slider__text__item__email">
-            {% include 'project/assets/mail.svg' %}
-        </a>
-    {% endif %}
 </div>