2026-06-05 23:49:39 +02:00
4 changed files with 222 additions and 99 deletions
--- 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,6 +233,7 @@ $gridItems = [
        <span class="lage-feature-desc"><?= htmlspecialchars($t('loc.center_desc'), ENT_QUOTES) ?></span>
      </li>
    </ul>
+  </div>

  <div class="lage-map-wrapper">
    <iframe
@@ -243,7 +245,6 @@ $gridItems = [
      <?= /* address HTML is XSS-safe — composed of trusted translations */ $t('loc.address_val') ?>
    </p>
  </div>
-  </div>
 </section>

 <section class="contact-section" id="kontakt" aria-label="<?= htmlspecialchars($t('contact.aria'), ENT_QUOTES) ?>">
@@ -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>
--- 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>

--- 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,
--- 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);