Martin feedback round 3: dropdown still looked 'fuerchterlich' even
with the official flag-icons. Root cause: 14px vertical padding
around an 18px-tall flag meant the flag occupied only 39% of the
trigger height and was dwarfed by whitespace. Plus a 1px black
box-shadow border made flags look 'boxy', and loading='lazy' caused
empty boxes on the four menu flags the moment the <details> opened.
Changes:
- Flag size 24x18 -> 32x24 (+78% area, ~4:3 matches flag-icons)
- Trigger padding 14px 8px -> 6px (flag now 73% of trigger width,
55% of trigger height, was 46%/39%)
- Drop the artificial 1px black box-shadow outline on flags
- Drop border-radius on flags (real flag-icons look better as
crisp rectangles)
- Drop object-fit: cover (no longer needed for SVG)
- Drop loading='lazy' and decoding='async' (4 small SVGs, must
be ready the moment <details> opens, not flash empty boxes)
- min-height: 44px restored on trigger for WCAG 2.5.5 touch target
- Menu border-radius 8 -> 10px, padding tightened, font-size 0.85
-> 0.9rem for label legibility
- Two-layer box-shadow on menu for subtle elevation
The previous inline flag SVGs were visually broken — most notably the
'en' Union Jack, which was reduced to a single X plus a cross and did
not resemble the real flag at all. The 'de' and 'ru' stripes also had
slight off-by-pixel rounding errors.
Switched to lipis/flag-icons (CC-BY 4.0) shipped as static files under
public/img/flags/. These are the canonical, professionally-designed
flag icons with correct proportions and all the details of the real
flags. Loaded via plain <img> tags (no JS, no external CDN at
runtime, no FOUC, no extra request after the page is cached).
Locale code mapping: en -> gb (per ADR-002, en = en-GB). Unknown
locales fall back to a 1x1 transparent gif so the layout stays
intact.
The original CSS scoped .flag to .locale-switcher__option only, so the
flag SVG inside the <summary> trigger rendered at 0x0 (intrinsic svg
defaults). Add a .locale-switcher .flag rule so the closed trigger
visibly shows a 24x16 flag.
Playwright recheck: trigger 52x44, flag 24x16 (matches previous inline
flags). 141/141 PHPUnit green.
The nav previously showed 4 inline flag buttons (DE/EN/UK/RU) on desktop
and a details-based dropdown on mobile. Martin asked for one dropdown with
a trigger the size of a single flag, and the 4 inline flags to go away.
- LocaleSwitcher: render a single <details class='locale-switcher'>
everywhere; trigger is one flag + tiny caret; menu lists all 4 with labels.
- Drop the 4-inline <ul> and the locale-switcher-mobile duplicate.
- CSS: replace both blocks with one compact dropdown (flag-sized trigger,
44px touch target via padding, scrolled/transparent-nav variants).
- Tests: assert 4 menu options, 5 flag SVGs, single <details> dropdown,
active locale is a <span aria-current>, others are <a> with hreflang.
- 141/141 PHPUnit green.
- mobile (≤900px): hide .nav-cta (was overflowing viewport by 65px)
- .nav-hamburger span: center inside button via left:50%; top:50%
- .nav-hamburger.active states: add translate(-50%,-50%) so the X
lines stay centered after rotation
- .hero-bg: switch from background-* to object-fit/object-position
(was an <img> but CSS targeted background-image → 1024px wide
hero-bg broke mobile layout)
- responsive: also override nav.scrolled padding on mobile
(specificity 0,1,1 > 0,0,1 → 3rem padding stayed in effect,
pushing the hamburger off-screen with width:0 on scroll)
- home/index.php: rename lage-map → lage-map-wrapper so the
existing .lage-map-wrapper CSS (border, margin-top: 3rem,
overflow: hidden, full-width 450px iframe) actually applies
