Add native cookie consent and move hero intro above CTA

- Restore CookieConsent banner behavior with the new dependency
- Reposition the right-panel intro above the Projekt anfragen button
- Add focused tests and update build metadata

backlog/tasks/task-2 - Animate-cookie-banner-transitions.md

@@ -0,0 +1,65 @@
+---
+id: TASK-2
+title: Animate cookie banner transitions
+status: In Progress
+assignee: []
+created_date: '2026-05-06 18:52'
+updated_date: '2026-05-06 19:10'
+labels:
+  - frontend
+  - animation
+dependencies: []
+priority: medium
+---
+
+## Description
+
+<!-- SECTION:DESCRIPTION:BEGIN -->
+Animate the privacy notice transition between the vanilla-cookieconsent banner and the floating cookie button in both directions using the existing Motion dependency, while preserving consent state and accessibility behavior.
+<!-- SECTION:DESCRIPTION:END -->
+
+## Acceptance Criteria
+<!-- AC:BEGIN -->
+- [ ] #1 The banner shrinks animatedly into the round cookie button.
+- [ ] #2 The round cookie button opens animatedly back into the banner.
+- [x] #3 prefers-reduced-motion receives a reduced fade-only variant.
+- [x] #4 The production build completes successfully.
+<!-- AC:END -->
+
+## Implementation Plan
+
+<!-- SECTION:PLAN:BEGIN -->
+1. Inspect existing cookie animation and test setup.
+2. Add a focused failing test for the exported animation helpers/guards where practical.
+3. Implement Motion-based bidirectional banner/FAB transitions with reduced-motion fallback.
+4. Run focused verification and production build.
+5. Check acceptance criteria and report for manual testing.
+<!-- SECTION:PLAN:END -->
+
+## Implementation Notes
+
+<!-- SECTION:NOTES:BEGIN -->
+Implemented Motion-based bidirectional transition in src/lib/cookie-banner-info.ts using a ghost element, transform/opacity animation, and a reduced-motion fade path.
+
+Verified focused cookie animation test passes with node --test tests/cookie-banner-info.test.mjs.
+
+Verified production build passes with pnpm build.
+
+Full node --test tests/*.mjs currently has an unrelated existing failure in tests/landing-content.test.mjs because the current landing content no longer contains the expected phrase "Projektbrief".
+
+Follow-up bugfix: native CookieConsent wrapper could remain briefly visible during the custom open animation, so the temporary ghost and the native modal appeared together. Fixed by suppressing both #cc-main .cm-wrapper and #cc-main .cm during transitions.
+
+Follow-up bugfix: the accept button listener used a one-shot binding, so after reopening the same modal could close with CookieConsent's native fade instead of the custom banner-to-FAB transition. Fixed by binding accept buttons through a WeakSet without once:true and rebinding after show(true).
+
+Verified follow-up with node --test tests/cookie-banner-info.test.mjs and pnpm build.
+
+Follow-up bugfix after manual report: clicking Verstanden could still leave no visible FAB if the Motion close sequence failed or did not resolve. Removed risky borderRadius/padding from the close Motion group, forced the ghost into layout before native modal suppression, and added an idempotent finalizeBannerToFab fallback timer so the FAB is always restored.
+
+Verified with node --test tests/cookie-banner-info.test.mjs and pnpm build.
+
+Rolled back the custom cookie circle and Motion transition work to the stable native CookieConsent behavior requested by the user: banner appears initially and clicking Verstanden lets CookieConsent close it normally. Removed custom FAB, ghost, Motion import, and event interception from src/lib/cookie-banner-info.ts.
+
+Updated the focused cookie test to assert the native CookieConsent close behavior and absence of the custom FAB/Motion code.
+
+Verified rollback with node --test tests/cookie-banner-info.test.mjs and pnpm build.
+<!-- SECTION:NOTES:END -->