changes

frontend/src/lib/components/Footer.svelte

@@ -73,6 +73,8 @@
     .footer {
         margin-top: 80px;
         display: flex;
+        position: relative;
+        z-index: 1000;
         flex-direction: column;
         align-items: flex-end;
         color: @font-color-secondary;

frontend/src/lib/components/Menu/Header.svelte

@@ -10,7 +10,7 @@
         <img src="/media/Logo Quer.svg" alt="Logo Quer" />
     </div>
     <button class="menu" on:click="{() => (active = !active)}">
-        <div>MENÜ</div>
+        <div class="text">MENÜ</div>
         {#if opened}
             <img src="/media/ei close.svg" alt="Logo" />
         {:else}
@@ -55,8 +55,14 @@
             align-items: center;
             gap: 4px;
             font-weight: bold;
+            .text {
+                display: none;
+            }
             @media @tablet {
                 gap: 10px;
+                .text {
+                    display: block;
+                }
             }
         }
     }

frontend/src/lib/components/widgets/Worldcard/card.svelte

@@ -128,9 +128,12 @@
                                     color: @font-color !important;
                                 }
                                 .long {
-                                    display: none;
+                                    max-width: 0px;
+                                    overflow: hidden;
+                                    background-color: @bg-color-secondary;
+                                    color: @font-color-secondary;
+                                    transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in;
                                     white-space: nowrap;
-                                    padding-left: 15px;
                                 }
                                 &:hover {
                                     width: 500px;
@@ -139,7 +142,8 @@
                                     background-color: white;
 
                                     .long {
-                                        display: initial;
+                                        padding-left: 15px;
+                                        max-width: fit-content;
                                         background-color: @bg-color;
                                         color: @font-color;
                                     }

frontend/src/lib/components/widgets/Worldcard/selectbox.svelte

@@ -26,7 +26,7 @@
         height: 30px;
         border-radius: 15px;
         font-size: 0.7rem;
-        transition: width 0.5s ease-in-out;
+        transition: width 0.5s ease-in;
         background-color: transparent;
         border: 2px solid @bg-color;
         .abbriviation {

frontend/src/lib/components/widgets/extendableBox.svelte

@@ -84,7 +84,8 @@
             .content {
                 max-height: 1000px;
                 overflow: hidden;
-                transition: max-height 1s ease-in-out;
+                transition: max-height 1s ease-in;
+
                 &.closed {
                     max-height: 0px;
                 }

frontend/src/lib/components/widgets/iconCycleBox.svelte

@@ -48,7 +48,7 @@
                 background-color: @bg-color;
                 color: @font-color;
             }
-            width: 150px;
+            width: 140px;
             height: 150px;
             .content {
                 display: flex;