fix(css): mobile nav overflow, hero-bg as <img>, map wrapper class

- 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

@@ -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"