From c737312adadd05d72dc5e063382a55f5f8c56638 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@kies-media.de>
Date: Thu, 4 Jun 2026 16:39:05 +0000
Subject: [PATCH] fix(css): mobile nav overflow, hero-bg as <img>, map wrapper
 class
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- mobile (≤900px): hide .nav-cta (was overflowing viewport by 65px)
- .nav-hamburger span: center inside button via left:50%; top:50%
- .nav-hamburger.active states: add translate(-50%,-50%) so the X
  lines stay centered after rotation
- .hero-bg: switch from background-* to object-fit/object-position
  (was an <img> but CSS targeted background-image → 1024px wide
  hero-bg broke mobile layout)
- responsive: also override nav.scrolled padding on mobile
  (specificity 0,1,1 > 0,0,1 → 3rem padding stayed in effect,
  pushing the hamburger off-screen with width:0 on scroll)
- home/index.php: rename lage-map → lage-map-wrapper so the
  existing .lage-map-wrapper CSS (border, margin-top: 3rem,
  overflow: hidden, full-width 450px iframe) actually applies
---
 app/views/home/index.php         |  2 +-
 public/css/haus-schleusingen.css | 25 ++++++++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/views/home/index.php b/app/views/home/index.php
index 87b6670..2dabdcf 100644
--- a/app/views/home/index.php
+++ b/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"
diff --git a/public/css/haus-schleusingen.css b/public/css/haus-schleusingen.css
index 9f039fa..02e8f32 100755
--- a/public/css/haus-schleusingen.css
+++ b/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 {