Map-Darstellung optimiert: Position im Grid angepasst, Größe 470x470px, mobile Ansicht verbessert

style.css

@@ -390,6 +390,8 @@ body {
     padding: 40px;
     border-radius: 15px;
     text-align: center;
+    max-width: 1000px;
+    margin: 60px auto 0;
 }
 
 .contact-cta h3 {
@@ -439,18 +441,19 @@ body {
 
 /* Map */
 .map-container {
-    margin-top: 60px;
-    border-radius: 0;
+    border-radius: 15px;
     overflow: hidden;
     box-shadow: var(--shadow-lg);
-    width: 100vw;
-    margin-left: calc(-50vw + 50%);
-    margin-right: calc(-50vw + 50%);
+    width: 470px;
+    max-width: 100%;
+    height: 470px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 #map {
     width: 100%;
-    height: 450px;
+    height: 100%;
 }
 
 /* Back to Top Button */
@@ -582,6 +585,14 @@ body {
         grid-template-columns: 1fr;
         gap: 40px;
     }
+    
+    .map-container {
+        width: 100%;
+        max-width: 470px;
+        height: 400px;
+        margin-left: auto;
+        margin-right: auto;
+    }
 }
 
 @media (max-width: 768px) {
@@ -621,6 +632,14 @@ body {
     .about-content {
         grid-template-columns: 1fr;
     }
+    
+    .map-container {
+        width: 100%;
+        max-width: 100%;
+        height: 350px;
+        margin-left: auto;
+        margin-right: auto;
+    }
 }
 
 @media (max-width: 480px) {
@@ -641,4 +660,12 @@ body {
     .portrait {
         max-width: 300px;
     }
+    
+    .map-container {
+        width: 100%;
+        max-width: 100%;
+        height: 300px;
+        margin-left: auto;
+        margin-right: auto;
+    }
 }