tolles design

style.css

@@ -19,10 +19,10 @@ body {
   top: 0px;
   left: 0px;
   width: 100%;
-  height: 7vw;
+  height: 5vw;
   position: fixed;
   background-color: rgb(77, 0, 0);
-  z-index: 0;
+  z-index: 1;
 }
 
 .header-container {
@@ -40,12 +40,13 @@ body {
 }
 
 .container {
+  z-index: 5;
   position: fixed;
   right: 32px;
   left: 10px;
   top: 0px;
   font-family: Orbitron;
-  font-size: 24px;
+  font-size: 25px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -55,8 +56,7 @@ body {
   color: white;
   text-decoration: none;
   margin-left: 0px;
-  font-size: 6vw;
-
+  font-size: 4vw;
 }
 
 .menu-link {
@@ -77,29 +77,44 @@ body {
   text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
 }
 
+/* Stile für die Kontakt-Icons */
+.contact-icons {
+  position: fixed;
+  top:6vw;
+  left: 2%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contact-icon {
+  width: 4vw; /* Neue Breite */
+    height: 3vw; /* Neue Höhe */
+    margin: 10px 0vw;
+}
+
 .mobile-menu-icon {
-  display: none; /* Standardmäßig ausblenden */
+  display: none;
   cursor: pointer;
   position: fixed;
-  top: 0.5vw;
-  right: 20px;
+  top: 1vw;
+  right: 10px;
+  width: 30px;
+  height: 24px;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .hamburger-icon {
-  width: 30px;
+  width: 100%;
   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;
+  justify-content: flex-end;
 }
 
 .menu {
@@ -109,7 +124,7 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #333; /* Hintergrundfarbe des Menüs */
+  background-color: #333;
   z-index: 1000;
 }
 
@@ -120,7 +135,7 @@ body {
   text-decoration: none;
   display: block;
   font-size: 250%;
-  margin: 20px; /* Abstand zwischen den Links hinzufügen */
+  margin: 20px;
 }
 
 .mobile-menu {
@@ -134,43 +149,106 @@ body {
   z-index: 1000;
 }
 
+.mobile-menu.show {
+  display: block;
+  background-color: rgb(104, 0, 0);
+}
+
 .KategorieLink {
   width: 300px;
 }
+.errornothingmobile {
+  display: none; /* Standardmäßig versteckt */
+  position: relative; /* Positioniert relativ zum umgebenden Container */
+  margin-top: 20px; /* Abstand zum oberen Rand des Containers */
+  color: black; /* Schwarze Schriftfarbe */
+  text-align: center; /* Textzentrierung */
+}
+.errornothingpc {
+  position: fixed; /* Absolut relativ zum Container */
+  top: 4vw; /* Anpassen je nach Bedarf */
+  left: 50%;
+  transform: translateX(-50%); /* Horizontale Zentrierung */
+  color: white; /* Schriftfarbe */
+  z-index: 1; /* Höherer Z-Index, um über dem Bild zu bleiben */
+  text-align: center; /* Textzentrierung */
+  font-size: 300%;
+}
+
+
+
+
+.error404img {
+  top: 100px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
 
 @media screen and (max-width: 937px) {
+
+    .ElementListe {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center; /* Zentriert die Elemente */
+    gap: 10px; /* Fügt einen gleichmäßigen Abstand zwischen den Elementen hinzu */
+    padding: 10px; /* Fügt einen Abstand zu den Rändern des Containers hinzu */
+    }
+
+    .KategorieLink {
+    width: 45vw;
+    height: auto;
+    max-width: 50vw; /* Maximale Breite des Bildes */
+    object-fit: cover; /* Bildfüllung */
+    margin-bottom: 10px; /* Abstand zwischen den Bildern */
+    }
   .mobile-menu-icon {
-    display: block; /* Bei kleinen Bildschirmen anzeigen */
+      display: flex;
   }
 
-  .hamburger-icon {
-    display: block;
+  .errornothingpc {
+    display: none;
+  }
+
+  .errornothingmobile {
+    display: block; /* Zeigt das Element auf mobilen Geräten */
+
   }
 
   .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 */
+      display: none;
   }
 
-  .menu-links.show {
-    display: flex;
+  .contact-icons {
+      position: static;
+      top: auto;
+      left: auto;
+      flex-direction: row;
+      justify-content: center;
+      width: 100%;
+      margin-top: 10px;
+      
   }
 
-  .mobile-menu.show {
-    display: block;
-    background-color: rgb(104, 0, 0);
+  .header-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
   }
 
-  .KategorieLink {
-    width: 24%;
+  .contact-icon {
+    width: 5vw;
+    height: 4.2vw;
+      margin: 0 10px;
   }
+
+  .email-icon {
+    filter: invert(100%);
 }
+}
+
 .ElementListe {
   display: block;
-}
+}
+