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).
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
- 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.
