From 9a14803d26db7346736609e8a4bf8948d8618be0 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@kies-media.de>
Date: Thu, 4 Jun 2026 18:03:50 +0000
Subject: [PATCH] fix(ui): 10 regression fixes from new design pass

- Nav: always visible glass background (no more transparent-on-top)
- Logo: remove text span, kill link underline completely
- Masonry: fix HTML class drift (gallery-grid -> masonry-grid)
- Gallery captions: rename to grid-item-label (hover-only)
- Honeypot: rename to hp-field (was rendered visible!)
- Hero: stronger gradient + text-shadow on h1/tag/meta
- LAGE features: cards with pin icon, no more bulleted list
- Map: full-viewport-width break-out from .lage-section
- Contact form: border-radius, focus glow, custom select arrow,
  working .form-submit button style
- Light text: unified --text-muted-on-dark token (replaces 4 magic
  white-XX% variants + --stone on .fact-label)
- A11y test: update honeypot class assertion
---
 app/views/home/index.php         |  29 ++--
 app/views/layouts/main.php       |   5 +-
 public/css/haus-schleusingen.css | 285 ++++++++++++++++++++++---------
 tests/Views/HomeViewA11yTest.php |   2 +-
 4 files changed, 222 insertions(+), 99 deletions(-)

diff --git a/app/views/home/index.php b/app/views/home/index.php
index 2dabdcf..41fbff9 100644
--- a/app/views/home/index.php
+++ b/app/views/home/index.php
@@ -31,6 +31,7 @@ $gridItems = [
 ?>
 <header class="hero" id="hero">
   <img src="/bilder/Außenansicht-2.webp" alt="" class="hero-bg" id="heroBg" loading="eager" decoding="async" fetchpriority="high">
+  <div class="hero-overlay" aria-hidden="true"></div>
   <div class="hero-content" id="heroContent">
     <span class="hero-tag"><?= htmlspecialchars($t('hero.tag'), ENT_QUOTES) ?></span>
     <h1 class="hero-h1">
@@ -86,13 +87,13 @@ $gridItems = [
     <span class="section-eyebrow"><?= htmlspecialchars($t('gallery.eyebrow'), ENT_QUOTES) ?></span>
     <h2><?= htmlspecialchars($t('gallery.h2'), ENT_QUOTES) ?></h2>
   </div>
-  <div class="gallery-grid">
+  <div class="masonry-grid">
     <?php foreach ($gridItems as $item): ?>
-      <button type="button" class="grid-item <?= htmlspecialchars($item['class'], ENT_QUOTES) ?>"
+      <button type="button" class="grid-item"
               data-img="<?= htmlspecialchars($item['img'], ENT_QUOTES) ?>"
               aria-label="<?= htmlspecialchars($t($item['key']) . $t('gallery.zoom'), ENT_QUOTES) ?>">
         <img src="/<?= htmlspecialchars($item['img'], ENT_QUOTES) ?>" alt="<?= htmlspecialchars($t($item['alt']), ENT_QUOTES) ?>" loading="lazy" decoding="async">
-        <span class="grid-caption"><?= htmlspecialchars($t($item['key']), ENT_QUOTES) ?></span>
+        <span class="grid-item-label"><?= htmlspecialchars($t($item['key']), ENT_QUOTES) ?></span>
       </button>
     <?php endforeach; ?>
   </div>
@@ -232,17 +233,17 @@ $gridItems = [
         <span class="lage-feature-desc"><?= htmlspecialchars($t('loc.center_desc'), ENT_QUOTES) ?></span>
       </li>
     </ul>
+  </div>
 
-    <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"
-        loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
-      <p class="lage-address">
-        <strong><?= htmlspecialchars($t('loc.address'), ENT_QUOTES) ?>:</strong><br>
-        <?= /* address HTML is XSS-safe — composed of trusted translations */ $t('loc.address_val') ?>
-      </p>
-    </div>
+  <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"
+      loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    <p class="lage-address">
+      <strong><?= htmlspecialchars($t('loc.address'), ENT_QUOTES) ?>:</strong><br>
+      <?= /* address HTML is XSS-safe — composed of trusted translations */ $t('loc.address_val') ?>
+    </p>
   </div>
 </section>
 
@@ -273,7 +274,7 @@ $gridItems = [
   <form class="contact-form" method="post" action="/#kontakt" novalidate>
     <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token'] ?? '', ENT_QUOTES) ?>">
     <input type="hidden" name="form_time" value="<?= htmlspecialchars((string) time(), ENT_QUOTES) ?>">
-    <div class="form-hp" aria-hidden="true">
+    <div class="hp-field" aria-hidden="true">
       <label for="website-hp"><?= htmlspecialchars($t('contact.hp_label'), ENT_QUOTES) ?></label>
       <input type="text" id="website-hp" name="website" tabindex="-1" autocomplete="off">
     </div>
diff --git a/app/views/layouts/main.php b/app/views/layouts/main.php
index d32dff8..cf38dfd 100644
--- a/app/views/layouts/main.php
+++ b/app/views/layouts/main.php
@@ -87,11 +87,10 @@ $navItems = [
   <body>
     <a class="skip-link" href="#main"><?= htmlspecialchars($t('nav.skip'), ENT_QUOTES) ?></a>
 
-    <nav id="navbar" class="scrolled" aria-label="<?= htmlspecialchars($t('nav.main'), ENT_QUOTES) ?>">
+    <nav id="navbar" aria-label="<?= htmlspecialchars($t('nav.main'), ENT_QUOTES) ?>">
       <div class="nav-logo">
-        <a href="<?= htmlspecialchars($homeUrl) ?>">
+        <a href="<?= htmlspecialchars($homeUrl) ?>" aria-label="<?= htmlspecialchars($siteName, ENT_QUOTES) ?>">
           <span class="logo-icon" aria-hidden="true">🏠</span>
-          <span class="logo-text"><?= htmlspecialchars($siteName) ?></span>
         </a>
       </div>
 
diff --git a/public/css/haus-schleusingen.css b/public/css/haus-schleusingen.css
index 4267f58..345ba86 100755
--- a/public/css/haus-schleusingen.css
+++ b/public/css/haus-schleusingen.css
@@ -50,12 +50,22 @@ a:focus-visible {
   --cream: #f5f0e8;
   --warm: #e8dfd0;
   --stone: #7a7062;
+  --stone-strong: #5a5043;
   --dark: #1c1a17;
   --charcoal: #2e2b26;
   --accent: #8b6914;
   --accent-light: #c49a2a;
   --accent-strong: #5a450d;
   --white: #fdfcfa;
+
+  /* Text variants — keep light text consistent across dark backgrounds */
+  --text-muted: #6e6557;
+  --text-muted-on-dark: rgb(245 240 232 / 82%);
+  --text-faint-on-dark: rgb(245 240 232 / 65%);
+
+  /* Nav: always visible, glass effect on top of hero */
+  --nav-bg: rgb(253 252 250 / 92%);
+  --nav-border: rgb(232 223 208 / 70%);
 }
 
 *,
@@ -77,7 +87,7 @@ body {
   overflow-x: hidden;
 }
 
-/* NAV */
+/* NAV — always visible, glass effect over hero */
 nav {
   position: fixed;
   top: 0;
@@ -87,38 +97,54 @@ nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.25rem 3rem;
-  background: transparent;
+  padding: 0.95rem 3rem;
+  background: var(--nav-bg);
+  backdrop-filter: saturate(180%) blur(14px);
+  backdrop-filter: saturate(180%) blur(14px);
+  border-bottom: 1px solid var(--nav-border);
   transition:
-    background 0.4s,
-    padding 0.4s;
+    padding 0.3s ease,
+    box-shadow 0.3s ease;
+  box-shadow: 0 1px 12px rgb(28 26 23 / 4%);
 }
 
 nav.scrolled {
-  background: var(--white);
-  backdrop-filter: none;
-  padding: 0.85rem 3rem;
-  border-bottom: 1px solid var(--warm);
-  box-shadow: 0 1px 8px rgb(0 0 0 / 6%);
+  padding: 0.65rem 3rem;
+  box-shadow: 0 2px 16px rgb(28 26 23 / 8%);
 }
 
-.nav-logo {
+.nav-logo a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: var(--dark);
   font-family: "Cormorant Garamond", serif;
   font-size: 1.15rem;
   font-weight: 600;
   letter-spacing: 0.04em;
-  color: var(--white);
-  transition: color 0.4s;
 }
 
-nav.scrolled .nav-logo {
-  color: var(--dark);
+.nav-logo a:hover {
+  color: var(--accent);
+}
+
+.logo-icon {
+  font-size: 1.4rem;
+  line-height: 1;
+}
+
+/* Hide logo text everywhere — logo icon is the only brand mark */
+.logo-text {
+  display: none !important;
 }
 
 .nav-links {
   display: flex;
   gap: 2.5rem;
   list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .nav-links a {
@@ -127,16 +153,11 @@ nav.scrolled .nav-logo {
   letter-spacing: 0.1em;
   text-transform: uppercase;
   text-decoration: none;
-  color: rgb(255 255 255 / 85%);
+  color: var(--stone-strong);
   transition: color 0.3s;
 }
 
-nav.scrolled .nav-links a {
-  color: var(--stone);
-}
-
-.nav-links a:hover,
-nav.scrolled .nav-links a:hover {
+.nav-links a:hover {
   color: var(--accent);
 }
 
@@ -157,12 +178,14 @@ nav.scrolled .nav-links a:hover {
     background 0.3s,
     transform 0.2s,
     box-shadow 0.3s;
+  text-decoration: none;
 }
 
 .nav-cta:hover {
   background: var(--accent-light);
   transform: translateY(-2px);
   box-shadow: 0 4px 20px rgb(139 105 20 / 50%);
+  color: var(--white);
 }
 
 /* HAMBURGER */
@@ -178,6 +201,7 @@ nav.scrolled .nav-links a:hover {
   align-items: center;
   justify-content: center;
   padding: 0;
+  color: var(--dark);
 }
 
 .nav-hamburger span,
@@ -186,12 +210,11 @@ nav.scrolled .nav-links a:hover {
   display: block;
   width: 22px;
   height: 2px;
-  background: var(--white);
+  background: var(--dark);
   border-radius: 1px;
   transition:
     transform 0.3s ease,
-    opacity 0.3s ease,
-    background 0.4s;
+    opacity 0.3s ease;
   position: absolute;
   left: 50%;
   top: 50%;
@@ -210,12 +233,6 @@ nav.scrolled .nav-links a:hover {
   transform: translate(-50%, calc(-50% + 7px));
 }
 
-nav.scrolled .nav-hamburger span,
-nav.scrolled .nav-hamburger span::before,
-nav.scrolled .nav-hamburger span::after {
-  background: var(--dark);
-}
-
 .nav-hamburger.active span {
   background: transparent;
   transform: translate(-50%, -50%);
@@ -275,12 +292,15 @@ nav.scrolled .nav-hamburger span::after {
 .hero-overlay {
   position: absolute;
   inset: 0;
+  z-index: 1;
   background: linear-gradient(
     to top,
-    rgb(28 26 23 / 85%) 0%,
-    rgb(28 26 23 / 30%) 50%,
-    rgb(28 26 23 / 10%) 100%
+    rgb(20 18 15 / 92%) 0%,
+    rgb(20 18 15 / 60%) 30%,
+    rgb(20 18 15 / 35%) 60%,
+    rgb(20 18 15 / 20%) 100%
   );
+  pointer-events: none;
 }
 
 .hero-content {
@@ -310,6 +330,7 @@ nav.scrolled .nav-hamburger span::after {
   text-transform: uppercase;
   color: var(--accent-light);
   margin-bottom: 1.25rem;
+  text-shadow: 0 1px 8px rgb(0 0 0 / 40%);
 }
 
 .hero-tag::before {
@@ -327,6 +348,9 @@ nav.scrolled .nav-hamburger span::after {
   color: var(--white);
   letter-spacing: -0.01em;
   margin-bottom: 1.5rem;
+  text-shadow:
+    0 2px 24px rgb(0 0 0 / 50%),
+    0 1px 3px rgb(0 0 0 / 30%);
 }
 
 .hero h1 em {
@@ -339,8 +363,9 @@ nav.scrolled .nav-hamburger span::after {
   gap: 2.5rem;
   align-items: center;
   font-size: 0.82rem;
-  color: rgb(255 255 255 / 88%);
+  color: var(--text-muted-on-dark);
   letter-spacing: 0.05em;
+  text-shadow: 0 1px 6px rgb(0 0 0 / 40%);
 }
 
 .hero-meta strong {
@@ -422,7 +447,7 @@ nav.scrolled .nav-hamburger span::after {
   font-size: 0.72rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--stone);
+  color: var(--text-muted-on-dark);
 }
 
 /* INTRO */
@@ -577,7 +602,7 @@ nav.scrolled .nav-hamburger span::after {
   font-size: 0.72rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: rgb(255 255 255 / 90%);
+  color: var(--text-muted-on-dark);
   border-radius: 0 0 3px 3px;
   transform: translateY(6px);
   opacity: 0;
@@ -813,7 +838,7 @@ nav.scrolled .nav-hamburger span::after {
   font-size: 0.72rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
-  color: rgb(255 255 255 / 70%);
+  color: var(--text-muted-on-dark);
   margin-bottom: 1rem;
 }
 
@@ -822,7 +847,7 @@ nav.scrolled .nav-hamburger span::after {
   font-size: 0.72rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
-  color: rgb(255 255 255 / 70%);
+  color: var(--text-muted-on-dark);
   margin-bottom: 0.8rem;
 }
 
@@ -839,12 +864,12 @@ nav.scrolled .nav-hamburger span::after {
 .price-card .price-unit {
   display: block;
   font-size: 0.78rem;
-  color: rgb(255 255 255 / 75%);
+  color: var(--text-muted-on-dark);
 }
 
 .price-card.highlight .price-label,
 .price-card.highlight .price-unit {
-  color: rgb(255 255 255 / 85%);
+  color: var(--text-muted-on-dark);
 }
 
 .pricing-section .rent-notes {
@@ -858,7 +883,7 @@ nav.scrolled .nav-hamburger span::after {
   font-size: 0.78rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: rgb(255 255 255 / 70%);
+  color: var(--text-muted-on-dark);
 }
 
 .pricing-section .rent-notes dd {
@@ -890,7 +915,7 @@ nav.scrolled .nav-hamburger span::after {
 
 /* LAGE */
 .lage-section {
-  padding: 6rem 3rem;
+  padding: 6rem 3rem 0;
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -905,58 +930,81 @@ nav.scrolled .nav-hamburger span::after {
 
 .lage-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1px;
-  background: var(--warm);
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  margin-bottom: 4rem;
 }
 
-.lage-item {
+.lage-features {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: contents;
+}
+
+.lage-features > li {
   background: var(--white);
   padding: 2rem;
   display: flex;
-  gap: 1.25rem;
-  align-items: flex-start;
-  transition: background 0.3s;
+  flex-direction: column;
+  gap: 0.5rem;
+  border: 1px solid var(--warm);
+  border-radius: 2px;
+  transition:
+    background 0.3s,
+    transform 0.3s,
+    box-shadow 0.3s;
 }
 
-.lage-item:hover {
+.lage-features > li::before {
+  content: "";
+  display: block;
+  width: 32px;
+  height: 32px;
+  background: var(--accent);
+  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/></svg>")
+    center/contain no-repeat;
+  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/></svg>")
+    center/contain no-repeat;
+  margin-bottom: 0.5rem;
+}
+
+.lage-features > li:hover {
   background: var(--cream);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 24px rgb(28 26 23 / 8%);
 }
 
-.lage-icon {
-  width: 40px;
-  height: 40px;
-  flex-shrink: 0;
-  background: var(--cream);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.1rem;
-  color: var(--accent);
+.lage-feature-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--dark);
+  letter-spacing: 0.01em;
 }
 
-.lage-title {
-  font-size: 0.9rem;
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.lage-desc {
-  font-size: 0.82rem;
-  color: var(--stone);
+.lage-feature-desc {
+  font-size: 0.88rem;
+  color: var(--text-muted);
   line-height: 1.6;
 }
 
 .lage-map-wrapper {
-  margin-top: 3rem;
-  border: 1px solid var(--warm);
+  position: relative;
+  left: 50%;
+  right: 50%;
+  width: 100vw;
+  margin: 0 -50vw;
+  border-top: 1px solid var(--warm);
+  border-bottom: 1px solid var(--warm);
+  background: var(--white);
   overflow: hidden;
 }
 
 .lage-map-wrapper iframe {
   display: block;
   width: 100%;
-  height: 450px;
+  height: 480px;
+  border: 0;
   filter: grayscale(30%) contrast(1.05);
   transition: filter 0.4s ease;
 }
@@ -965,10 +1013,34 @@ nav.scrolled .nav-hamburger span::after {
   filter: grayscale(0%) contrast(1);
 }
 
+.lage-address {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1.5rem 3rem;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.lage-address strong {
+  color: var(--dark);
+  font-weight: 600;
+}
+
 @media (width <= 900px) {
+  .lage-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
   .lage-map-wrapper iframe {
     height: 320px;
   }
+
+  .lage-address {
+    padding: 1.25rem 1.5rem;
+  }
 }
 
 /* CONTACT */
@@ -1035,44 +1107,76 @@ nav.scrolled .nav-hamburger span::after {
   font-size: 0.88rem;
   background: var(--white);
   border: 1px solid var(--warm);
-  padding: 0.75rem 1rem;
+  border-radius: 2px;
+  padding: 0.85rem 1rem;
   color: var(--dark);
   outline: none;
-  transition: border-color 0.2s;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
   resize: none;
 }
 
+.form-field input:hover,
+.form-field textarea:hover,
+.form-field select:hover {
+  border-color: var(--stone);
+}
+
 .form-field input:focus,
 .form-field textarea:focus,
 .form-field select:focus {
   border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgb(139 105 20 / 12%);
+}
+
+.form-field select {
+  appearance: none;
+  appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237a7062' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  padding-right: 2.5rem;
+  cursor: pointer;
 }
 
 .form-field.full {
   grid-column: span 2;
 }
 
-.btn-submit {
+.btn-submit,
+.form-submit {
   font-family: "DM Sans", sans-serif;
   font-size: 0.78rem;
-  font-weight: 500;
+  font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   background: var(--accent);
   color: var(--white);
   border: none;
+  border-radius: 2px;
   width: 100%;
-  padding: 1.1rem;
+  padding: 1.15rem;
   cursor: pointer;
   margin-top: 0.5rem;
+  box-shadow: 0 2px 12px rgb(139 105 20 / 25%);
   transition:
     background 0.3s,
-    transform 0.2s;
+    transform 0.2s,
+    box-shadow 0.3s;
 }
 
-.btn-submit:hover {
+.btn-submit:hover,
+.form-submit:hover {
   background: var(--accent-light);
   transform: translateY(-1px);
+  box-shadow: 0 4px 20px rgb(139 105 20 / 40%);
+}
+
+.btn-submit:active,
+.form-submit:active {
+  transform: translateY(0);
 }
 
 .form-errors {
@@ -1124,6 +1228,25 @@ nav.scrolled .nav-hamburger span::after {
   color: var(--stone);
 }
 
+.contact-direct {
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.contact-direct a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.2s;
+}
+
+.contact-direct a:hover {
+  color: var(--accent-light);
+  text-decoration: underline;
+}
+
 .contact-details {
   text-align: center;
   margin-top: 2rem;
@@ -1400,7 +1523,7 @@ footer {
   font-size: 0.78rem;
   font-weight: 500;
   letter-spacing: 0.04em;
-  color: rgb(255 255 255 / 90%);
+  color: var(--text-muted-on-dark);
   background: transparent;
   transition:
     background 0.2s,
diff --git a/tests/Views/HomeViewA11yTest.php b/tests/Views/HomeViewA11yTest.php
index 60ef0b7..0262e8e 100644
--- a/tests/Views/HomeViewA11yTest.php
+++ b/tests/Views/HomeViewA11yTest.php
@@ -138,7 +138,7 @@ final class HomeViewA11yTest extends TestCase
     {
         $html = $this->renderHomeView(formErrors: [], formFieldErrors: [], formSuccess: false);
 
-        self::assertStringContainsString('class="form-hp"', $html);
+        self::assertStringContainsString('class="hp-field"', $html);
         self::assertStringContainsString('aria-hidden="true"', $html);
         self::assertStringContainsString('tabindex="-1"', $html);
         self::assertStringContainsString('autocomplete="off"', $html);