Menü leiste endgültig fürs Handy

style.css

@@ -11,19 +11,19 @@
 body {
   margin: 0;
   font-family: "Orbitron";
+  background-color: white;
 }
 
 .header-container {
   position: relative;
   width: 100%;
-  overflow: hidden;
+  
 }
 
 .header-image {
   width: 100%;
-  height: 100%;
+  height: 70%;
   object-fit: cover;
-  object-position: 50% 5%;
 }
 
 .container {
@@ -46,7 +46,7 @@ body {
   color: white;
   text-decoration: none;
   margin-left: 0px;
-  font-size: 50px;
+  font-size: 6vw;
 }
 
 .menu-link {
@@ -62,7 +62,7 @@ body {
 .headline {
   text-align: center;
   color: rgb(0, 0, 0);
-  font-size: 40px;
+  font-size: 5vw;
   text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
 }
 
@@ -71,9 +71,53 @@ body {
   cursor: pointer;
 }
 
+.hamburger-icon {
+  width: 30px;
+  height: 3px;
+  background-color: white;
+  margin: 6px 0;
+}
+
 .menu-links {
   display: flex;
   align-items: center;
+  justify-content: flex-end; /* Rechts ausrichten */
+}
+
+.menu-links.show {
+  display: flex;
+}
+
+.menu {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #333; /* Hintergrundfarbe des Menüs */
+  z-index: 1000;
+}
+
+.menu-link-mobile {
+  color: white;
+  padding: 20px;
+  text-align: center;
+  text-decoration: none;
+  display: block;
+  font-size: 250%;
+  margin: 10px; /* Abstand zwischen den Links hinzufügen */
+}
+
+.mobile-menu {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  z-index: 1000;
 }
 
 @media screen and (max-width: 768px) {
@@ -81,25 +125,27 @@ body {
     display: block; /* Bei kleinen Bildschirmen anzeigen */
   }
 
-  .menu-links {
-    display: none; /* Bei kleinen Bildschirmen ausblenden */
-    flex-direction: column;
-    position: absolute;
-    top: 80px; /* Passen Sie dies an, um die Position anzupassen */
-    left: 0;
-    background-color: #333; /* Hintergrundfarbe des Menüs */
-    width: 100%;
+  .hamburger-icon {
+    display: block;
   }
 
-  .menu-link {
-    padding: 10px;
-    text-align: center;
-    color: white;
-    text-decoration: none;
+  .menu-links {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 80px;
+    right: 0; /* Rechts ausrichten */
+    background-color: #333;
+    width: 100%;
+    justify-content: flex-start; /* Links oben ausrichten */
   }
 
   .menu-links.show {
-    display: flex; /* Bei Klick auf das Symbol anzeigen */
+    display: flex;
+  }
+
+  .mobile-menu.show {
+    display: block;
+    background-color: rgb(104, 0, 0);
   }
 }
-