From dfe2178da83fbdfc6f11f299e1be720fdfc6d123 Mon Sep 17 00:00:00 2001 From: hermes Date: Sun, 14 Jun 2026 10:37:31 +0000 Subject: [PATCH 1/4] fix(css): constrain gallery heading and pricing/contact sections to main container width - 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. --- public/css/haus-schleusingen.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/public/css/haus-schleusingen.css b/public/css/haus-schleusingen.css index 5bf345a..182b103 100755 --- 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) { @@ -789,6 +799,8 @@ nav.scrolled { .pricing-section { background: var(--dark); padding: 6rem 3rem; + max-width: 1200px; + margin: 0 auto; } .pricing-inner { @@ -1044,6 +1056,8 @@ nav.scrolled { .contact-section { background: var(--cream); padding: 6rem 3rem; + max-width: 1200px; + margin: 0 auto; } .contact-inner { From 0df9c11bd175023f9fa7c61b68af571d09da2067 Mon Sep 17 00:00:00 2001 From: hermes Date: Sun, 14 Jun 2026 14:19:20 +0000 Subject: [PATCH 2/4] fix(css): constrain legal pages (impressum, datenschutz) to main container width The .legal-page
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
, 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 --- public/css/haus-schleusingen.css | 106 +++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) diff --git a/public/css/haus-schleusingen.css b/public/css/haus-schleusingen.css index 182b103..6a9e8d9 100755 --- a/public/css/haus-schleusingen.css +++ b/public/css/haus-schleusingen.css @@ -1678,3 +1678,109 @@ 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; + } +} From f75ad996ae271486da6ed2094496958edcb657fd Mon Sep 17 00:00:00 2001 From: hermes Date: Sun, 14 Jun 2026 14:23:24 +0000 Subject: [PATCH 3/4] style(css): reformat legal-page transitions to satisfy prettier MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Prettier (running in the CI stylelint step) wants multi-property transition values to be split across lines. Pure formatting fix — no semantic change. --- public/css/haus-schleusingen.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/public/css/haus-schleusingen.css b/public/css/haus-schleusingen.css index 6a9e8d9..3b72bfb 100755 --- a/public/css/haus-schleusingen.css +++ b/public/css/haus-schleusingen.css @@ -1747,7 +1747,9 @@ nav:not(.scrolled) .locale-switcher__trigger:focus-visible { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgb(139 105 20 / 25%); - transition: border-color 0.2s, color 0.2s; + transition: + border-color 0.2s, + color 0.2s; } .legal-page a:hover { @@ -1771,7 +1773,9 @@ nav:not(.scrolled) .locale-switcher__trigger:focus-visible { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; - transition: color 0.2s, border-color 0.2s; + transition: + color 0.2s, + border-color 0.2s; } .legal-back:hover { From 79135968369e2659ff82cdb30e169dc110856122 Mon Sep 17 00:00:00 2001 From: hermes Date: Sun, 14 Jun 2026 14:44:04 +0000 Subject: [PATCH 4/4] fix(ui): make vertical floor-plan tabs visually obvious as interactive controls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 element had never been added to the template — the affordance was completely invisible. Changes: 1. Template (app/views/home/index.php): add inside the , 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). --- app/views/home/index.php | 1 + public/css/haus-schleusingen.css | 90 ++++++++++++++++++++++++++------ 2 files changed, 74 insertions(+), 17 deletions(-) diff --git a/app/views/home/index.php b/app/views/home/index.php index 9bee39d..8232904 100644 --- a/app/views/home/index.php +++ b/app/views/home/index.php @@ -153,6 +153,7 @@ $gridItems = [ +