app/views/home/index.php

@@ -233,7 +233,7 @@ $gridItems = [
       </li>
     </ul>
 
-    <div class="lage-map">
+    <div class="lage-map-wrapper">
       <iframe
         title="<?= htmlspecialchars($t('loc.map_title'), ENT_QUOTES) ?>"
         src="https://www.openstreetmap.org/export/embed.html?bbox=10.7535%2C50.5095%2C10.7705%2C50.5185&amp;layer=mapnik&amp;marker=50.5140%2C10.7620"

public/css/haus-schleusingen.css

@@ -192,6 +192,8 @@ nav.scrolled .nav-links a:hover {
     opacity 0.3s ease,
     background 0.4s;
   position: absolute;
+  left: 50%;
+  top: 50%;
 }
 
 .nav-hamburger span::before,
@@ -200,11 +202,11 @@ nav.scrolled .nav-links a:hover {
 }
 
 .nav-hamburger span::before {
-  transform: translateY(-7px);
+  transform: translate(-50%, calc(-50% - 7px));
 }
 
 .nav-hamburger span::after {
-  transform: translateY(7px);
+  transform: translate(-50%, calc(-50% + 7px));
 }
 
 nav.scrolled .nav-hamburger span,
@@ -215,15 +217,16 @@ nav.scrolled .nav-hamburger span::after {
 
 .nav-hamburger.active span {
   background: transparent;
+  transform: translate(-50%, -50%);
 }
 
 .nav-hamburger.active span::before {
-  transform: rotate(45deg);
+  transform: translate(-50%, -50%) rotate(45deg);
   background: var(--dark);
 }
 
 .nav-hamburger.active span::after {
-  transform: rotate(-45deg);
+  transform: translate(-50%, -50%) rotate(-45deg);
   background: var(--dark);
 }
 
@@ -255,10 +258,13 @@ nav.scrolled .nav-hamburger span::after {
 .hero-bg {
   position: absolute;
   inset: 0;
-  background-size: cover;
-  background-position: center 20%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 20%;
   transform: scale(1.05);
   transition: transform 8s ease-out;
+  z-index: 0;
 }
 
 .hero-bg.loaded {
@@ -1187,12 +1193,13 @@ footer {
 
 /* RESPONSIVE */
 @media (width <= 900px) {
-  nav {
+  nav,
+  nav.scrolled {
     padding: 1rem 1.5rem;
   }
 
-  nav.scrolled {
-    padding: 0.75rem 1.5rem;
+  .nav-cta {
+    display: none;
   }
 
   .nav-links {