8 Commits

Author SHA1 Message Date
0dc4f66124 Merge pull request 'fix(issue-80): show all 13 house images + 3D floor plans' (#81) from fix/issue-80-show-all-images into main
All checks were successful
Lint / PHP Syntax Check (push) Successful in 58s
PHPUnit / PHP Unit Tests (push) Successful in 1m7s
Lint / HTML Lint (htmlhint) (push) Successful in 1m37s
Lint / CSS Lint (stylelint) (push) Successful in 1m42s
Reviewed-on: #81
2026-06-14 18:35:38 +02:00
Hermes
d34fc00078 fix(issue-80): full-width floor plan images + styled room list + restored + icon
All checks were successful
Lint / PHP Syntax Check (push) Successful in 58s
PHPUnit / PHP Unit Tests (push) Successful in 1m8s
Lint / PHP Syntax Check (pull_request) Successful in 29s
Lint / HTML Lint (htmlhint) (push) Successful in 1m39s
Lint / CSS Lint (stylelint) (push) Successful in 1m43s
PHPUnit / PHP Unit Tests (pull_request) Successful in 36s
Lint / CSS Lint (stylelint) (pull_request) Successful in 1m11s
Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m5s
2026-06-14 15:38:35 +00:00
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
PHPUnit / PHP Unit Tests (push) Successful in 1m8s
Lint / HTML Lint (htmlhint) (push) Successful in 1m37s
Lint / CSS Lint (stylelint) (push) Successful in 1m43s
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
Lint / PHP Syntax Check (push) Successful in 1m0s
PHPUnit / PHP Unit Tests (push) Successful in 36s
Lint / PHP Syntax Check (pull_request) Successful in 27s
Lint / HTML Lint (htmlhint) (push) Successful in 1m40s
Lint / CSS Lint (stylelint) (push) Successful in 1m45s
PHPUnit / PHP Unit Tests (pull_request) Successful in 41s
Lint / CSS Lint (stylelint) (pull_request) Successful in 1m14s
Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m15s
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
Lint / PHP Syntax Check (push) Successful in 1m1s
PHPUnit / PHP Unit Tests (push) Successful in 36s
Lint / PHP Syntax Check (pull_request) Successful in 29s
Lint / HTML Lint (htmlhint) (push) Successful in 1m38s
Lint / CSS Lint (stylelint) (push) Successful in 1m43s
PHPUnit / PHP Unit Tests (pull_request) Successful in 41s
Lint / CSS Lint (stylelint) (pull_request) Successful in 1m12s
Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m24s
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
Lint / PHP Syntax Check (push) Successful in 1m2s
PHPUnit / PHP Unit Tests (push) Successful in 37s
Lint / PHP Syntax Check (pull_request) Successful in 29s
Lint / HTML Lint (htmlhint) (push) Successful in 1m37s
Lint / CSS Lint (stylelint) (push) Failing after 1m44s
PHPUnit / PHP Unit Tests (pull_request) Successful in 42s
Lint / CSS Lint (stylelint) (pull_request) Failing after 1m13s
Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m16s
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
Lint / PHP Syntax Check (push) Successful in 1m2s
PHPUnit / PHP Unit Tests (push) Successful in 36s
Lint / PHP Syntax Check (pull_request) Successful in 27s
Lint / HTML Lint (htmlhint) (push) Successful in 1m39s
Lint / CSS Lint (stylelint) (push) Successful in 1m44s
PHPUnit / PHP Unit Tests (pull_request) Successful in 40s
Lint / CSS Lint (stylelint) (pull_request) Successful in 1m14s
Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m14s
- 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
Hermes
db83e09a3a fix(issue-80): show all 13 house images + 3D floor plans
All checks were successful
Lint / PHP Syntax Check (push) Successful in 57s
PHPUnit / PHP Unit Tests (push) Successful in 1m7s
Lint / HTML Lint (htmlhint) (push) Successful in 1m38s
Lint / CSS Lint (stylelint) (push) Successful in 1m42s
Lint / PHP Syntax Check (pull_request) Successful in 58s
PHPUnit / PHP Unit Tests (pull_request) Successful in 1m3s
Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m36s
Lint / CSS Lint (stylelint) (pull_request) Successful in 1m41s
2026-06-05 22:28:04 +00:00
7 changed files with 485 additions and 31 deletions

View File

@@ -69,6 +69,10 @@ return [
'gallery.kid1' => 'Kinderzimmer 1 · 21,7 m²',
'gallery.kid2' => 'Kinderzimmer 2 · 15,7 m²',
'gallery.kid_detail' => 'Kinderzimmer Detail',
'gallery.kid_extra' => 'Kinderzimmer · Spielbereich',
'gallery.bath2' => 'Badezimmer · 6,4 m²',
'gallery.bath3' => 'Badezimmer · 5,8 m²',
'gallery.bath4' => 'Badezimmer · Wellness',
'gallery.guest' => 'Gästezimmer · 11,5 m²',
'gallery.area1' => 'Wohnbereich',
'gallery.area2' => 'Wohnbereich Detail',
@@ -80,9 +84,11 @@ return [
'gallery.alt.kid1' => 'Kinderzimmer 1 mit 21,7 m²',
'gallery.alt.kid2' => 'Kinderzimmer 2 mit 15,7 m²',
'gallery.alt.kid_detail' => 'Detailansicht Kinderzimmer',
'gallery.alt.kid_extra' => 'Spielbereich im Kinderzimmer',
'gallery.alt.guest' => 'Gästezimmer mit 11,5 m²',
'gallery.alt.bath2' => 'Zweites Badezimmer im Haus',
'gallery.alt.bath3' => 'Drittes Badezimmer im Haus',
'gallery.alt.bath4' => 'Viertes Badezimmer im Haus',
'gallery.alt.exterior' => 'Außenansicht des Einfamilienhauses',
// ─── Floor plans (Grundriss) ────────────────────────────────────────
@@ -120,6 +126,10 @@ return [
'floors.alt.og1' => 'Grundriss 1. Obergeschoss',
'floors.alt.og2' => 'Grundriss 2. Obergeschoss',
'floors.alt.attic' => 'Grundriss Dachboden',
'floors.alt.eg_3d' => '3D-Ansicht Erdgeschoss',
'floors.alt.og1_3d' => '3D-Ansicht 1. Obergeschoss',
'floors.alt.og2_3d' => '3D-Ansicht 2. Obergeschoss',
'floors.alt.attic_2' => 'Alternative Ansicht Dachboden',
// ─── Rent (Miete) ────────────────────────────────────────────────────
'rent.eyebrow' => 'Mietkonditionen',

View File

@@ -59,6 +59,10 @@ return [
'gallery.kid1' => 'Child\'s room 1 · 21.7 m²',
'gallery.kid2' => 'Child\'s room 2 · 15.7 m²',
'gallery.kid_detail' => 'Child\'s room detail',
'gallery.kid_extra' => 'Child\'s room · play area',
'gallery.bath2' => 'Bathroom · 6.4 m²',
'gallery.bath3' => 'Bathroom · 5.8 m²',
'gallery.bath4' => 'Bathroom · wellness',
'gallery.guest' => 'Guest room · 11.5 m²',
'gallery.area1' => 'Living area',
'gallery.area2' => 'Living area detail',
@@ -70,9 +74,11 @@ return [
'gallery.alt.kid1' => 'Child\'s room 1 with 21.7 m²',
'gallery.alt.kid2' => 'Child\'s room 2 with 15.7 m²',
'gallery.alt.kid_detail' => 'Child\'s room detail view',
'gallery.alt.kid_extra' => 'Play area in the child\'s room',
'gallery.alt.guest' => 'Guest room with 11.5 m²',
'gallery.alt.bath2' => 'Second bathroom in the house',
'gallery.alt.bath3' => 'Third bathroom in the house',
'gallery.alt.bath4' => 'Fourth bathroom in the house',
'gallery.alt.exterior' => 'Exterior view of the detached house',
'floors.eyebrow' => 'Layout',
@@ -109,6 +115,10 @@ return [
'floors.alt.og1' => 'Floor plan 1st upper floor',
'floors.alt.og2' => 'Floor plan 2nd upper floor',
'floors.alt.attic' => 'Floor plan attic',
'floors.alt.eg_3d' => '3D view ground floor',
'floors.alt.og1_3d' => '3D view 1st upper floor',
'floors.alt.og2_3d' => '3D view 2nd upper floor',
'floors.alt.attic_2' => 'Alternative view of the attic',
'rent.eyebrow' => 'Rental terms',
'rent.aria' => 'Rental terms',

View File

@@ -59,6 +59,10 @@ return [
'gallery.kid1' => 'Детская 1 · 21,7 м²',
'gallery.kid2' => 'Детская 2 · 15,7 м²',
'gallery.kid_detail' => 'Деталь детской',
'gallery.kid_extra' => 'Детская · игровая зона',
'gallery.bath2' => 'Ванная · 6,4 м²',
'gallery.bath3' => 'Ванная · 5,8 м²',
'gallery.bath4' => 'Ванная · велнес',
'gallery.guest' => 'Гостевая комната · 11,5 м²',
'gallery.area1' => 'Жилая зона',
'gallery.area2' => 'Деталь жилой зоны',
@@ -70,9 +74,11 @@ return [
'gallery.alt.kid1' => 'Детская комната 1 — 21,7 м²',
'gallery.alt.kid2' => 'Детская комната 2 — 15,7 м²',
'gallery.alt.kid_detail' => 'Детальный вид детской комнаты',
'gallery.alt.kid_extra' => 'Игровая зона в детской комнате',
'gallery.alt.guest' => 'Гостевая комната 11,5 м²',
'gallery.alt.bath2' => 'Вторая ванная комната в доме',
'gallery.alt.bath3' => 'Третья ванная комната в доме',
'gallery.alt.bath4' => 'Четвертая ванная комната в доме',
'gallery.alt.exterior' => 'Внешний вид частного дома',
'floors.eyebrow' => 'Планировка',
@@ -109,6 +115,10 @@ return [
'floors.alt.og1' => 'План второго этажа',
'floors.alt.og2' => 'План третьего этажа',
'floors.alt.attic' => 'План чердака',
'floors.alt.eg_3d' => '3D-вид первого этажа',
'floors.alt.og1_3d' => '3D-вид второго этажа',
'floors.alt.og2_3d' => '3D-вид третьего этажа',
'floors.alt.attic_2' => 'Альтернативный вид чердака',
'rent.eyebrow' => 'Условия аренды',
'rent.aria' => 'Условия аренды',

View File

@@ -59,6 +59,10 @@ return [
'gallery.kid1' => 'Дитяча кімната 1 · 21,7 м²',
'gallery.kid2' => 'Дитяча кімната 2 · 15,7 м²',
'gallery.kid_detail' => 'Деталь дитячої кімнати',
'gallery.kid_extra' => 'Дитяча кімната · ігрова зона',
'gallery.bath2' => 'Ванна кімната · 6,4 м²',
'gallery.bath3' => 'Ванна кімната · 5,8 м²',
'gallery.bath4' => 'Ванна кімната · велнес',
'gallery.guest' => 'Гостьова кімната · 11,5 м²',
'gallery.area1' => 'Житлова зона',
'gallery.area2' => 'Деталь житлової зони',
@@ -70,9 +74,11 @@ return [
'gallery.alt.kid1' => 'Дитяча кімната 1 — 21,7 м²',
'gallery.alt.kid2' => 'Дитяча кімната 2 — 15,7 м²',
'gallery.alt.kid_detail' => 'Детальний вигляд дитячої кімнати',
'gallery.alt.kid_extra' => 'Ігрова зона в дитячій кімнаті',
'gallery.alt.guest' => 'Гостьова кімната 11,5 м²',
'gallery.alt.bath2' => 'Друга ванна кімната в будинку',
'gallery.alt.bath3' => 'Третя ванна кімната в будинку',
'gallery.alt.bath4' => 'Четверта ванна кімната в будинку',
'gallery.alt.exterior' => 'Зовнішній вигляд приватного будинку',
'floors.eyebrow' => 'Планування',
@@ -109,6 +115,10 @@ return [
'floors.alt.og1' => 'План другого поверху',
'floors.alt.og2' => 'План третього поверху',
'floors.alt.attic' => 'План горища',
'floors.alt.eg_3d' => '3D-вигляд першого поверху',
'floors.alt.og1_3d' => '3D-вигляд другого поверху',
'floors.alt.og2_3d' => '3D-вигляд третього поверху',
'floors.alt.attic_2' => 'Альтернативний вигляд горища',
'rent.eyebrow' => 'Умови оренди',
'rent.aria' => 'Умови оренди',

View File

@@ -23,9 +23,13 @@ $gridItems = [
['img' => 'bilder/Küche 1.jpg', 'key' => 'gallery.kitchen', 'alt' => 'gallery.alt.kitchen', 'class' => ''],
['img' => 'bilder/schlafzimmer.png', 'key' => 'gallery.bedroom', 'alt' => 'gallery.alt.bedroom', 'class' => ''],
['img' => 'bilder/Bad.jpg', 'key' => 'gallery.bath', 'alt' => 'gallery.alt.bath', 'class' => ''],
['img' => 'bilder/Bad-2.jpeg', 'key' => 'gallery.bath2', 'alt' => 'gallery.alt.bath2', 'class' => ''],
['img' => 'bilder/Bad-3.jpeg', 'key' => 'gallery.bath3', 'alt' => 'gallery.alt.bath3', 'class' => ''],
['img' => 'bilder/Bad-4.jpeg', 'key' => 'gallery.bath4', 'alt' => 'gallery.alt.bath4', 'class' => ''],
['img' => 'bilder/Kinderzimmer 2.jpg', 'key' => 'gallery.kid1', 'alt' => 'gallery.alt.kid1', 'class' => ''],
['img' => 'bilder/Kinderzimmer 3.jpg', 'key' => 'gallery.kid2', 'alt' => 'gallery.alt.kid2', 'class' => ''],
['img' => 'bilder/kinderzimmer 2 2.webp', 'key' => 'gallery.kid_detail', 'alt' => 'gallery.alt.kid_detail', 'class' => 'span-2 row-1'],
['img' => 'bilder/Kinderzimmer.png', 'key' => 'gallery.kid_extra', 'alt' => 'gallery.alt.kid_extra', 'class' => ''],
['img' => 'bilder/Außenansicht-2.png', 'key' => 'gallery.area3', 'alt' => 'gallery.alt.exterior', 'class' => 'span-2 row-1'],
];
?>
@@ -112,6 +116,13 @@ $gridItems = [
'attic' => 'bilder/grundrisse/Dachboden unten.png',
];
$floorImageMapExtra = [
'eg' => ['img' => 'bilder/grundrisse/EG 3D.png', 'altKey' => 'floors.alt.eg_3d'],
'og1' => ['img' => 'bilder/grundrisse/OG 1 3D.png', 'altKey' => 'floors.alt.og1_3d'],
'og2' => ['img' => 'bilder/grundrisse/OG 2 3D.png', 'altKey' => 'floors.alt.og2_3d'],
'attic' => ['img' => 'bilder/grundrisse/Dachboden unten 2.png', 'altKey' => 'floors.alt.attic_2'],
];
$floors = [
['id' => 'eg', 'titleKey' => 'floors.eg.title', 'areaKey' => 'floors.eg.area', 'altKey' => 'floors.alt.eg',
'rooms' => [
@@ -153,12 +164,26 @@ $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) ?>"
alt="<?= htmlspecialchars($t($floor['altKey']), ENT_QUOTES) ?>"
loading="lazy" decoding="async"
class="floor-plan-img">
<?php
$primaryImg = $floorImageMap[$floor['id']] ?? 'bilder/grundrisse/EG.png';
$extra = $floorImageMapExtra[$floor['id']] ?? null;
$wrapperCls = $extra ? 'floor-plan-multi' : 'floor-plan';
?>
<div class="<?= htmlspecialchars($wrapperCls, ENT_QUOTES) ?>">
<img src="/<?= htmlspecialchars($primaryImg, ENT_QUOTES) ?>"
alt="<?= htmlspecialchars($t($floor['altKey']), ENT_QUOTES) ?>"
loading="lazy" decoding="async"
class="floor-plan-img">
<?php if ($extra !== null): ?>
<img src="/<?= htmlspecialchars($extra['img'], ENT_QUOTES) ?>"
alt="<?= htmlspecialchars($t($extra['altKey']), ENT_QUOTES) ?>"
loading="lazy" decoding="async"
class="floor-plan-img">
<?php endif; ?>
</div>
<ul class="room-list">
<?php foreach ($floor['rooms'] as $room): ?>
<li>

View File

@@ -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 {
@@ -747,7 +813,8 @@ nav.scrolled {
color: var(--stone);
}
.floor-plan {
.floor-plan,
.floor-plan-multi {
margin-top: 1.5rem;
border: 1px solid var(--warm);
background: var(--white);
@@ -755,14 +822,6 @@ nav.scrolled {
max-width: 100%;
}
.floor-plan img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.floor-plan-multi {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -770,7 +829,9 @@ nav.scrolled {
background: var(--warm);
}
.floor-plan-multi img {
.floor-plan img,
.floor-plan-multi img,
img.floor-plan-img {
width: 100%;
max-width: 100%;
height: auto;
@@ -779,6 +840,42 @@ nav.scrolled {
background: var(--white);
}
/* Room list — visible m² per floor */
.room-list {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.5rem;
}
.room-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--cream);
font-size: 0.82rem;
color: var(--charcoal);
}
.room-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.room-size {
flex: 0 0 auto;
font-size: 0.72rem;
color: var(--stone);
letter-spacing: 0.05em;
}
@media (width <= 768px) {
.floor-plan-multi {
grid-template-columns: 1fr;
@@ -789,6 +886,8 @@ nav.scrolled {
.pricing-section {
background: var(--dark);
padding: 6rem 3rem;
max-width: 1200px;
margin: 0 auto;
}
.pricing-inner {
@@ -1044,6 +1143,8 @@ nav.scrolled {
.contact-section {
background: var(--cream);
padding: 6rem 3rem;
max-width: 1200px;
margin: 0 auto;
}
.contact-inner {
@@ -1664,3 +1765,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;
}
}

View File

@@ -0,0 +1,178 @@
<?php
declare(strict_types=1);
namespace Tests\Views;
use PHPUnit\Framework\TestCase;
/**
* Regression test for issue #80: all house images in public/bilder/ must be
* referenced from the home view. Catches drift when new photos are added to
* disk but not yet wired into the gallery or floor-plan map.
*/
final class HomeGalleryInventoryTest extends TestCase
{
private const VIEW_PATH = __DIR__ . '/../../app/views/home/index.php';
private const BILDER_DIR = __DIR__ . '/../../public/bilder';
/** @var list<string> Files that may exist on disk but are intentionally NOT shown on the page. */
private const ALLOWED_UNUSED = [
// Hero / page background uses a .webp variant; the .png in bilder/ is the
// gallery source. Hero-bg is referenced separately in the <header>.
'favicon/',
// -small.* variants are served as thumb hints by JS lazy-load optimization.
'*-small.*',
];
public function testAllBilderFilesAreReferencedInHomeView(): void
{
$view = file_get_contents(self::VIEW_PATH);
self::assertNotFalse($view, 'Could not read home view');
$diskFiles = $this->listBilderFiles();
self::assertNotEmpty($diskFiles, 'No files found in public/bilder/');
// Group files by base name (filename without extension) so the
// .jpg/.png/.jpeg source + auto-generated .webp variant count as ONE image.
$groups = [];
foreach ($diskFiles as $relPath) {
if ($this->isAllowedUnused($relPath)) {
continue;
}
$groups[$this->baseOf($relPath)][] = $relPath;
}
$missing = [];
foreach ($groups as $base => $variants) {
$hit = false;
foreach ($variants as $v) {
// View may reference raw or with leading slash.
if (str_contains($view, $v) || str_contains($view, '/' . ltrim($v, '/'))) {
$hit = true;
break;
}
}
if (!$hit) {
$missing[] = $base . ' (' . implode(', ', $variants) . ')';
}
}
self::assertSame(
[],
$missing,
sprintf(
"These image groups exist in public/bilder/ but are NOT referenced anywhere in the home view:\n - %s\n\nFix: add them to \$gridItems (gallery) or \$floorImageMap / \$floorImageMapExtra (floor plans), and add the matching Locale keys.",
implode("\n - ", $missing),
)
);
}
public function testGalleryContainsAllRequiredImages(): void
{
$view = file_get_contents(self::VIEW_PATH);
self::assertNotFalse($view, 'Could not read home view');
$required = [
// Bathrooms (3 new ones in addition to the existing Bad.jpg)
'bilder/Bad.jpg',
'bilder/Bad-2.jpeg',
'bilder/Bad-3.jpeg',
'bilder/Bad-4.jpeg',
// Kids room extras
'bilder/Kinderzimmer.png',
// Floor plans 2D
'bilder/grundrisse/EG.png',
'bilder/grundrisse/OG 1 2.png',
'bilder/grundrisse/OG 2 grundriss.png',
'bilder/grundrisse/Dachboden unten.png',
// Floor plans 3D / alternate
'bilder/grundrisse/EG 3D.png',
'bilder/grundrisse/OG 1 3D.png',
'bilder/grundrisse/OG 2 3D.png',
'bilder/grundrisse/Dachboden unten 2.png',
];
$missing = array_values(array_filter($required, static fn (string $img) => !str_contains($view, $img)));
self::assertSame(
[],
$missing,
sprintf(
"Required images missing from home view:\n - %s",
implode("\n - ", $missing),
)
);
}
public function testFloorPlanMapsCoverAllFloors(): void
{
$view = file_get_contents(self::VIEW_PATH);
self::assertNotFalse($view, 'Could not read home view');
// Each floor in the $floors array must have an entry in BOTH maps
// (primary 2D + extra 3D/alternate) so the floor body renders both.
foreach (['eg', 'og1', 'og2', 'attic'] as $floorId) {
self::assertStringContainsString(
"'{$floorId}'",
$view,
"Floor '{$floorId}' not declared in home view",
);
}
}
/**
* @return list<string> relative paths (forward-slash, e.g. "grundrisse/EG.png")
*/
private function listBilderFiles(): array
{
$files = [];
$iter = new \RecursiveIteratorIterator(
new \RecursiveDirectoryIterator(self::BILDER_DIR, \FilesystemIterator::SKIP_DOTS),
);
foreach ($iter as $file) {
if (!$file->isFile()) {
continue;
}
$rel = substr($file->getPathname(), strlen(self::BILDER_DIR) + 1);
$rel = str_replace(DIRECTORY_SEPARATOR, '/', $rel);
$files[] = $rel;
}
sort($files);
return $files;
}
private function isAllowedUnused(string $relPath): bool
{
foreach (self::ALLOWED_UNUSED as $pattern) {
if (str_ends_with($pattern, '/')) {
// Directory prefix
if (str_starts_with($relPath, $pattern)) {
return true;
}
} else {
// Glob-style match (only `*` supported, for `-small.*` variants)
$regex = '#^' . str_replace('\\*', '.*', preg_quote($pattern, '#')) . '$#';
if (preg_match($regex, $relPath) === 1) {
return true;
}
}
}
return false;
}
/**
* Base name = path minus extension. So "grundrisse/EG 3D.png" → "grundrisse/EG 3D",
* and "Küche 1.jpg" → "Küche 1". Used to group source + auto-generated variants.
*/
private function baseOf(string $relPath): string
{
$dot = strrpos($relPath, '.');
if ($dot === false || $dot === 0) {
return $relPath;
}
return substr($relPath, 0, $dot);
}
}