/* ========================================================================== CLIENT-REQUESTED DEVIATIONS FROM THE CLAUDE DESIGN HANDOFF ========================================================================== Everything in this file changes something the handoff specified. It is kept separate from buddies.css on purpose: - buddies.css is GENERATED from the four design files. Regenerating it would wipe any edit made there. Nothing in this file is regenerated. - At handover, this file is the complete list of places where the built site intentionally differs from the design, with the reason next to it. Loaded after buddies.css, so these win without !important. THREE MORE DEVIATIONS LIVE OUTSIDE THIS FILE, because they change behaviour or markup rather than styling. Each is documented in its own file: - includes-responsive.php grid minimums, so cards can collapse on a phone - includes-team-fields.php hides the two team-card fields the client has not filled in yet (self-clearing) - assets/js/tweaks.js corrections to the generated modules — the service carousel's unselectable card - assets/js/header.js the mobile drawer's scrim, moved inside the header so it stops covering the drawer ========================================================================== */ /* -------------------------------------------------------------------------- 1. Hero photo (cargo bike) — moved down, away from the headline -------------------------------------------------------------------------- Requested by the client, 2 September 2026. THE PROBLEM The design places this photo at top:48px. The German headline "Hundefriseur & Hundebetreuung" is centred and wide enough that its first line reaches left into the photo. Measured on the dev server with the real webfonts loaded, the photo's right edge overlapped the "H" by: 1300px viewport -61px 1450px viewport -43px 1547px viewport -13px 1920px viewport +115px (no overlap — clears on its own) So it is a real collision from roughly 1241px to about 1600px, and it looks worse in motion because bwFloatB drifts the photo 26px further down. WHY IT WAS INVISIBLE IN TESTING With Chrome's auto-translate on, the headline becomes the shorter English "Dog grooming & dog daycare" and the overlap disappears entirely. Any check of this must be done with translation off. THE FIX Push the photo below the headline's first line. The value scales with the viewport because the headline does too (font-size: clamp(30px,3.6vw,50px)) — a fixed pixel value would drift out of alignment across the range. floor 140px — clears the tightest measured case (1450px) with ~10px of slack for font-loading differences 9.5vw — tracks the headline as it grows cap 200px — stops the photo sliding toward the hero's lower blob on very wide screens Below 1241px this rule does nothing: the design already switches the hero photos to a static flex row, where they cannot overlap anything. -------------------------------------------------------------------------- */ .buddies-fam-home #bw-hero-photos [data-p="3"] { top: clamp(140px, 9.5vw, 200px); } /* -------------------------------------------------------------------------- 2. Anchor targets sit below the sticky header -------------------------------------------------------------------------- anchors.js inserts these for links pointing at /#preise, /#versprechen and friends. Without scroll-margin-top the browser scrolls the anchor to y=0, which parks the section heading underneath the pinned header — the visitor lands on a page that looks like it jumped to the wrong place. Header height plus a little breathing room. The same treatment is applied to the design's own section ids, so an internal link behaves identically to an external one. -------------------------------------------------------------------------- */ .bw-anchor { display: block; height: 0; overflow: hidden; } .bw-anchor, .buddies-page section[id], .buddies-page [id^="bw-"], .buddies-page [id^="friseur-"] { scroll-margin-top: calc(var(--bwh-h, 76px) + 20px); } /* -------------------------------------------------------------------------- 3. Mobile overflow — hardcoded pixel widths -------------------------------------------------------------------------- The design's markup carries fixed inline widths on a handful of in-flow elements — width: 711px on the team intro row, 777px in Preise, 852px on a note under the price table — and a few buttons whose German labels make them wider than a phone. None of them shrink, so at 390px they hang over the right edge and get clipped. Measured at a true 390px viewport on the dev server: eight offenders on the homepage, four on Hundefriseur, one on Hundebetreuung. WIDTH AND HEIGHT COME AS A PAIR — THIS IS THE PART 2.10.0 GOT WRONG Every one of those boxes also carries a fixed inline HEIGHT: the team row is 711x135, the Preise row 777x157, the price note 852x68. Capping the width without releasing the height makes the gold quote bubble inside re-wrap onto more lines than the box has room for, and the text spills out of the bottom onto whatever sits below — the breed search field, the "Preise im Detail lesen" link, the SEO paragraph. Both properties have to be released together. WHY THE OFFENDERS ARE LISTED BY WIDTH INSTEAD OF MATCHED BY A PATTERN A blanket "any element with an inline height loses it" rule is not safe: the design also uses fixed boxes deliberately — the 132x132 icon wells in the home hero, the 104x104 step circles on Hundefriseur, the 704x225 cropped photo in the Schwabing collage, and every absolutely-positioned background blob (500x450, 580x540, 430x420 …). Those must keep their size. The five boxes below are the complete set that is in normal flow, is wider than a phone, and holds text that grows when it wraps. Both spellings are listed because WordPress may re-serialise the style attribute without the space. Nothing here applies above 900px, so the desktop layout is the design's own. -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* General cap. Safe on anything: an element that already fits is unchanged, and an inline max-width still wins, which is why the price note below needs its own rule. #bw-hero-deco and #bw-hero-photos are excluded because they hold the homepage's absolutely-positioned artwork, which is MEANT to bleed past the edge. THE max-content EXCLUSION IS LOAD-BEARING — it fixes a bug this very rule caused. The two marquee tracks (#bw-groomers, #bw-partner-track) are laid out with `width: max-content` precisely because they must be far wider than the screen: the animation slides them by translateX(-50%) of their own width. Capping them to 100% made the team track 342px wide on a phone while its fourteen cards still measured 4344px, so the marquee crawled 171px and snapped back — which is what "the carousel is very slow" actually was. It was not slow; it was travelling a fortieth of the distance. Nothing can escape the viewport this way: both tracks live inside wrappers with overflow:hidden (#bw-track-wrap, #bw-partner-viewport), which is what makes the marquee a marquee rather than a page-widener. */ .buddies-page section [style*="width:"]:not([style*="max-content"]):not(#bw-hero-deco *):not(#bw-hero-photos *) { max-width: 100%; } /* The six fixed-size text boxes: cap the width AND release the height. !important is required here and is not laziness — width and height are INLINE on these elements, and an inline declaration beats any stylesheet rule regardless of specificity. Rewriting the markup instead is what 2.10.0 tried, and rewriting it server-side is what broke the desktop layout. Every declaration below is sealed inside this media query, so it cannot reach a screen wider than 900px. */ .buddies-page [style*="width: 711px"], .buddies-page [style*="width:711px"], /* home · team intro row */ .buddies-page [style*="width: 777px"], .buddies-page [style*="width:777px"], /* home · Preise quote row */ .buddies-page [style*="width: 795px"], .buddies-page [style*="width:795px"], /* home · Buddies Card column */ .buddies-page [style*="width: 931px"], .buddies-page [style*="width:931px"], /* home · hero CTA grid */ .buddies-page [style*="width: 958px"], .buddies-page [style*="width:958px"], /* home · hero eyebrow line */ .buddies-page [style*="width: 852px"], .buddies-page [style*="width:852px"] { /* friseur · price-table note */ width: auto !important; max-width: 100% !important; height: auto !important; } /* Long labels ("Weiterlesen …") push these past the viewport. */ .buddies-page section button { max-width: 100%; white-space: normal; } /* Belt and braces: no image should ever be able to widen the page. The height is left alone for images that set one inline — those are the object-fit crops in the Schwabing collage, and freeing their height would blow the collage apart. */ .buddies-page img { max-width: 100%; } .buddies-page img:not([style*="height:"]) { height: auto; } } /* -------------------------------------------------------------------------- 4. Team carousel — speed on small screens -------------------------------------------------------------------------- Reported from a phone, 5 September 2026: "the cards carousel speed is very slow". THE CAUSE buddies.js sizes the marquee by distance, not by screen: track.style.animation = 'bw-team-marquee ' + Math.round((reps * seq) / 36) + 's linear infinite'; That is a fixed 36 pixels per second at every viewport. On a desktop, where four or five cards are on screen at once, that reads as a gentle drift. On a 390px phone, where barely one card fits, the same 36px/s means waiting about 8.7 seconds for the next groomer to arrive. Same animation, completely different experience. THE FIX Shorten the cycle where the visible window is small, so the perceived pace stays roughly constant: about 99px/s on a phone and 64px/s on a tablet, against the design's 36px/s on desktop, which is untouched. WHY ONLY animation-duration, AND WHY !important The duration is written as part of an inline `animation` shorthand by the script, and rewritten every time the felt-type filter rebuilds the track, so a stylesheet rule needs !important to hold. Overriding the *duration* alone rather than the shorthand is what keeps the two states that must not animate working: when the whole row fits, the script sets `animation: none` and a duration is meaningless; and the reduced-motion rule in buddies.css sets `animation: none !important`, which this cannot undo. TRADE-OFF, RECORDED HONESTLY This is a fixed duration where the script used a computed one. Filtering to very few groomers shortens the track, so the same duration then reads a little slower — around 52px/s in the tightest case. Still far faster than today, and the alternative (recomputing in JS on every rebuild) is a lot more moving parts for a difference nobody would notice. -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .buddies-page [data-team-track] { animation-duration: 34s !important; } } @media (max-width: 700px) { .buddies-page [data-team-track] { animation-duration: 22s !important; } }