Merge pull request 'fix(css): constrain gallery heading and pricing/contact sections to main container width' (#82 ) from feature/gallery-and-section-containers into main

Reviewed-on: #82
fix(ui): make vertical floor-plan tabs visually obvious as interactive controls
2026-06-14 16:50:01 +02:00 · 2026-06-14 14:44:04 +00:00 · 2026-06-14 14:23:24 +00:00 · 2026-06-14 14:19:20 +00:00 · 2026-06-14 10:37:31 +00:00
2 changed files with 198 additions and 17 deletions
--- a/app/views/home/index.php
+++ b/app/views/home/index.php
@@ -153,6 +153,7 @@ $gridItems = [
        <summary class="floor-header">
          <span class="floor-title"><?= htmlspecialchars($t($floor['titleKey']), ENT_QUOTES) ?></span>
          <span class="floor-area"><?= htmlspecialchars($t($floor['areaKey']), ENT_QUOTES) ?></span>
+          <span class="floor-icon" aria-hidden="true">+</span>
        </summary>
        <div class="floor-body">
          <img src="/<?= htmlspecialchars($floorImageMap[$floor['id']] ?? 'bilder/grundrisse/EG.png', ENT_QUOTES) ?>"
--- a/public/css/haus-schleusingen.css
+++ b/public/css/haus-schleusingen.css
@@ -548,6 +548,12 @@ nav.scrolled {
  margin: 0 auto;
 }

+.gallery-section .section-head {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 5rem 1.5rem 2.5rem;
+}
+
 .gallery-header h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
@@ -636,6 +642,10 @@ nav.scrolled {
  .gallery-header {
    padding: 3rem 1.5rem 2rem;
  }
+
+  .gallery-section .section-head {
+    padding: 3rem 1rem 2rem;
+  }
 }

@media (width <= 480px) {
@@ -660,26 +670,63 @@ nav.scrolled {
  color: var(--charcoal);
 }

-.floor-accordion {
-  border-top: 1px solid var(--warm);
+.floors-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: -0.75rem;
 }

 .floor-item {
-  border-bottom: 1px solid var(--warm);
+  border: 1px solid var(--warm);
+  border-radius: 4px;
+  background: var(--white);
  overflow: hidden;
+  position: relative;
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
+}
+
+.floor-item:hover {
+  border-color: var(--stone);
+}
+
+.floor-item.open {
+  border-color: var(--accent);
+  box-shadow: 0 4px 20px rgb(28 26 23 / 6%);
+}
+
+.floor-item.open::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--accent);
 }

 .floor-header {
  display: flex;
-  justify-content: space-between;
  align-items: center;
-  padding: 1.5rem 0;
+  gap: 1rem;
+  padding: 1.25rem 1.5rem;
  cursor: pointer;
-  transition: color 0.2s;
+  list-style: none;
+  transition: background 0.2s ease;
 }

-.floor-header:hover .floor-title {
-  color: var(--accent);
+.floor-header::-webkit-details-marker {
+  display: none;
+}
+
+.floor-header::marker {
+  content: "";
+}
+
+.floor-header:hover {
+  background: var(--cream);
 }

 .floor-title {
@@ -689,41 +736,60 @@ nav.scrolled {
  transition: color 0.2s;
 }

-.floor-size {
+.floor-header:hover .floor-title {
+  color: var(--accent);
+}
+
+.floor-area {
+  margin-left: auto;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--stone);
  display: flex;
  align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }

 .floor-icon {
-  width: 24px;
-  height: 24px;
-  border: 1px solid var(--warm);
+  width: 32px;
+  height: 32px;
+  border: 1.5px solid var(--warm);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
-  font-size: 0.8rem;
+  font-size: 1.15rem;
+  font-weight: 300;
+  line-height: 1;
  color: var(--stone);
+  background: var(--white);
+  flex-shrink: 0;
  transition:
-    transform 0.3s,
-    border-color 0.3s;
+    transform 0.3s ease,
+    border-color 0.25s ease,
+    color 0.25s ease,
+    background 0.25s ease;
+}
+
+.floor-header:hover .floor-icon {
+  border-color: var(--accent);
+  color: var(--accent);
 }

 .floor-item.open .floor-icon {
  transform: rotate(45deg);
  border-color: var(--accent);
  color: var(--accent);
+  background: var(--cream);
 }

 .floor-body {
  display: none;
-  padding: 0 0 1.5rem;
+  padding: 0 1.5rem 1.5rem;
  max-width: 100%;
  overflow: hidden;
+  border-top: 1px solid var(--warm);
+  margin-top: -1px;
 }

 .floor-rooms-grid {
@@ -789,6 +855,8 @@ nav.scrolled {
 .pricing-section {
  background: var(--dark);
  padding: 6rem 3rem;
+  max-width: 1200px;
+  margin: 0 auto;
 }

 .pricing-inner {
@@ -1044,6 +1112,8 @@ nav.scrolled {
 .contact-section {
  background: var(--cream);
  padding: 6rem 3rem;
+  max-width: 1200px;
+  margin: 0 auto;
 }

 .contact-inner {
@@ -1664,3 +1734,113 @@ nav:not(.scrolled) .locale-switcher__trigger:focus-visible {
  outline: 2px solid #b91c1c;
  outline-offset: 2px;
 }
+
+/* LEGAL PAGES (Impressum, Datenschutz) */
+.legal-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 6rem 3rem;
+  color: var(--dark);
+}
+
+.legal-page .section-eyebrow {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.legal-page h1 {
+  font-family: "Cormorant Garamond", serif;
+  font-size: clamp(2rem, 3.5vw, 3rem);
+  font-weight: 300;
+  line-height: 1.2;
+  margin-bottom: 2.5rem;
+  color: var(--charcoal);
+}
+
+.legal-page h2 {
+  font-family: "DM Sans", sans-serif;
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--charcoal);
+  margin: 2rem 0 0.75rem;
+}
+
+.legal-page h3 {
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--stone-strong);
+  margin: 1.5rem 0 0.5rem;
+}
+
+.legal-page p,
+.legal-page address,
+.legal-page li {
+  font-size: 0.95rem;
+  line-height: 1.85;
+  color: var(--stone-strong);
+}
+
+.legal-page address {
+  font-style: normal;
+  margin-bottom: 1rem;
+}
+
+.legal-page ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+  margin: 0.5rem 0 1.25rem;
+}
+
+.legal-page ul li {
+  margin-bottom: 0.25rem;
+}
+
+.legal-page a {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid rgb(139 105 20 / 25%);
+  transition:
+    border-color 0.2s,
+    color 0.2s;
+}
+
+.legal-page a:hover {
+  color: var(--accent-strong);
+  border-bottom-color: var(--accent-strong);
+}
+
+.legal-divider {
+  border: none;
+  border-top: 1px solid var(--warm);
+  margin: 2.5rem 0;
+}
+
+.legal-back {
+  display: inline-block;
+  margin-top: 2.5rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--accent);
+  border-bottom: 1px solid var(--accent);
+  padding-bottom: 2px;
+  transition:
+    color 0.2s,
+    border-color 0.2s;
+}
+
+.legal-back:hover {
+  color: var(--accent-strong);
+  border-bottom-color: var(--accent-strong);
+}
+
+@media (width <= 768px) {
+  .legal-page {
+    padding: 4rem 1.5rem;
+  }
+}
Author	SHA1	Message	Date
greggy	5fb6abe09f	Merge pull request 'fix(css): constrain gallery heading and pricing/contact sections to main container width' (#82 ) from feature/gallery-and-section-containers into main All checks were successful Lint / PHP Syntax Check (push) Successful in 57s Details PHPUnit / PHP Unit Tests (push) Successful in 1m8s Details Lint / HTML Lint (htmlhint) (push) Successful in 1m37s Details Lint / CSS Lint (stylelint) (push) Successful in 1m43s Details Reviewed-on: #82	2026-06-14 16:50:01 +02:00
hermes	7913596836	fix(ui): make vertical floor-plan tabs visually obvious as interactive controls All checks were successful Deploy Feature Branch to Test (haus.test.kies-media.de) / Deploy to Test Environment (push) Successful in 45s Details Lint / PHP Syntax Check (push) Successful in 1m0s Details PHPUnit / PHP Unit Tests (push) Successful in 36s Details Lint / PHP Syntax Check (pull_request) Successful in 27s Details Lint / HTML Lint (htmlhint) (push) Successful in 1m40s Details Lint / CSS Lint (stylelint) (push) Successful in 1m45s Details PHPUnit / PHP Unit Tests (pull_request) Successful in 41s Details Lint / CSS Lint (stylelint) (pull_request) Successful in 1m14s Details Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m15s Details The floor-accordion was rendering as a stack of plain text rows separated by 1px hairline dividers with no visual affordance indicating they were clickable tabs. CSS for .floor-icon (a 24px circle with a '+' that rotates 45° to '×' on open) already existed, but the corresponding <span class="floor-icon"> element had never been added to the template — the affordance was completely invisible. Changes: 1. Template (app/views/home/index.php): add <span class="floor-icon" aria-hidden="true">+</span> inside the <summary>, enabling the existing rotation/size CSS to take effect. 2. CSS (public/css/haus-schleusingen.css): a. Restyle .floor-item from a thin divider to a real card (1px --warm border, 4px radius, --white background) with a 0.75rem gap between items via flexbox column on .floors-accordion. b. .floor-header: hover background in --cream, focus-visible outline, list-style markers suppressed, padding tightened to 1.25rem 1.5rem. c. .floor-icon: enlarged from 24px to 32px, thicker 1.5px border, font-size 1.15rem so the '+' is clearly legible, white background that goes cream on hover/open. d. .floor-item.open: --accent border, subtle box-shadow (0 4px 20px 6% black), and a 3px-wide ::before accent stripe on the left edge — the canonical 'active tab' indicator. e. .floor-icon rotation on open (45°) now also flips border-color and background to --accent / --cream, plus hover state for the closed icon. f. Renamed dead-code class .floor-size → .floor-area to match the template (refactor mismatch left over from the i18n work). g. Renamed dead-code class .floor-accordion → .floors-accordion to match the template. Measured on 1265px viewport: - 4 items, 4 icons (one per tab) - Each item: 1104x74, white bg, 4px radius, --warm border - Icon: 32x32 at x=1128 (right edge), white bg, '+' glyph - Open state (item[1]): border → --accent, left 3px accent stripe, icon rotates 45° to '×', subtle box-shadow Sweep targets for visual confirmation: - Closed: white card + warm border + '+' icon, hover lifts background to cream and icon border to accent. - Open: accent border + left stripe + '×' icon + soft shadow, body expands below to show the floor-plan image and room list. - Switching tabs: clicking another header collapses the current open one (existing JS accordion behaviour).	2026-06-14 14:44:04 +00:00
hermes	f75ad996ae	style(css): reformat legal-page transitions to satisfy prettier All checks were successful Deploy Feature Branch to Test (haus.test.kies-media.de) / Deploy to Test Environment (push) Successful in 45s Details Lint / PHP Syntax Check (push) Successful in 1m1s Details PHPUnit / PHP Unit Tests (push) Successful in 36s Details Lint / PHP Syntax Check (pull_request) Successful in 29s Details Lint / HTML Lint (htmlhint) (push) Successful in 1m38s Details Lint / CSS Lint (stylelint) (push) Successful in 1m43s Details PHPUnit / PHP Unit Tests (pull_request) Successful in 41s Details Lint / CSS Lint (stylelint) (pull_request) Successful in 1m12s Details Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m24s Details Prettier (running in the CI stylelint step) wants multi-property transition values to be split across lines. Pure formatting fix — no semantic change.	2026-06-14 14:23:24 +00:00
hermes	0df9c11bd1	fix(css): constrain legal pages (impressum, datenschutz) to main container width Some checks failed Deploy Feature Branch to Test (haus.test.kies-media.de) / Deploy to Test Environment (push) Successful in 46s Details Lint / PHP Syntax Check (push) Successful in 1m2s Details PHPUnit / PHP Unit Tests (push) Successful in 37s Details Lint / PHP Syntax Check (pull_request) Successful in 29s Details Lint / HTML Lint (htmlhint) (push) Successful in 1m37s Details Lint / CSS Lint (stylelint) (push) Failing after 1m44s Details PHPUnit / PHP Unit Tests (pull_request) Successful in 42s Details Lint / CSS Lint (stylelint) (pull_request) Failing after 1m13s Details Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m16s Details The .legal-page <main> element had no CSS rules at all, so the Impressum and Datenschutz text was rendering flush against the left edge of the viewport (x=0, width=1265 at 1280px viewport). Both view files share the .legal-page class, so a single CSS rule fixes both. Added a complete legal-page stylesheet (max-width 1200px, margin auto, 6rem 3rem padding, matching .floors-section / .lage-section / .pricing-section / .contact-section), plus minimal typography for h1/h2/h3, body text, lists, links, the .legal-divider <hr>, the .legal-back link, and a 768px mobile padding adjustment. Measured on 1265px viewport: - main.legal-page: 32.5/1200 (was 0/1265) - h1 content area: 80.5/1104 inside the 3rem horizontal padding	2026-06-14 14:19:20 +00:00
hermes	dfe2178da8	fix(css): constrain gallery heading and pricing/contact sections to main container width All checks were successful Deploy Feature Branch to Test (haus.test.kies-media.de) / Deploy to Test Environment (push) Successful in 46s Details Lint / PHP Syntax Check (push) Successful in 1m2s Details PHPUnit / PHP Unit Tests (push) Successful in 36s Details Lint / PHP Syntax Check (pull_request) Successful in 27s Details Lint / HTML Lint (htmlhint) (push) Successful in 1m39s Details Lint / CSS Lint (stylelint) (push) Successful in 1m44s Details PHPUnit / PHP Unit Tests (pull_request) Successful in 40s Details Lint / CSS Lint (stylelint) (pull_request) Successful in 1m14s Details Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m14s Details - Gallery .section-head now uses the same 1400px container + 1.5rem horizontal padding as .masonry-grid, so 'PHOTO GALLERY' / 'A look inside' align flush with the leftmost image edge (24px gutter) instead of sitting at the very left of the page. - .pricing-section and .contact-section are now constrained to max-width: 1200px and centered (matching .floors-section and .lage-section), so the 'Mietkonditionen' (dark) and 'Kontakt' (cream) blocks no longer span the full viewport. - Mobile: matching padding adjustment for the new .section-head rule at width <= 768px.	2026-06-14 10:37:31 +00:00