Fix contact footer

src/components/kontakt.vue

@@ -1,14 +1,14 @@
 <template>
-  <footer class="footer-footer" v-bind:class="rootClassName">
-    <div class="footer-kontakt">
-      <span class="footer-kontakt1">{{ Text }}</span>
-      <a href="mailto:info@openvisor.ch?subject=" class="footer-email">
+  <footer class="kontakt-footer" v-bind:class="rootClassName">
+    <div class="kontakt-kontakt">
+      <span class="kontakt-kontakt1">{{ Text }}</span>
+      <a href="mailto:info@openvisor.ch?subject=" class="kontakt-email">
         {{ Text1 }}
       </a>
     </div>
     <iframe
       src="https://dashboard.mailerlite.com/forms/582593/98301649820321679/share"
-      class="footer-newsletter-form"
+      class="kontakt-newsletter-form"
     ></iframe>
   </footer>
 </template>
@@ -31,9 +31,8 @@ export default {
 </script>
 
 <style scoped>
-.footer-footer {
-  gap: var(--dl-space-space-unit);
-  flex: 1;
+.kontakt-footer {
+  gap: 20%;
   width: 100%;
   display: flex;
   position: relative;
@@ -42,16 +41,24 @@ export default {
   padding-left: var(--dl-space-space-oneandhalfunits);
   margin-bottom: 10%;
   padding-right: var(--dl-space-space-oneandhalfunits);
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
 }
-.footer-kontakt {
+.kontakt-kontakt {
+  flex: 0 0 auto;
+  width: 200px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.kontakt-kontakt1 {
   color: #ffffff;
   font-size: 36px;
+  align-self: center;
   text-align: center;
   text-transform: uppercase;
 }
-.footer-kontakt1 {
+.kontakt-email {
   color: #ffff00;
   font-size: 18px;
   align-self: center;
@@ -59,6 +66,11 @@ export default {
   font-weight: 300;
   text-decoration: underline;
 }
+.kontakt-newsletter-form {
+  width: 320px;
+  height: 360px;
+  margin-bottom: var(--dl-space-space-twounits);
+}