story(sbb-teaser-product): initial implementation

[kyubisation]

Feature Description

We want to implement a teaser product component, which is a text, combined with an image, to tease a specific product.

Figma: https://www.figma.com/design/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=434-494616&t=pzZZl0rRvKaUlsS9-0

Closes #2622

Design Spec:

• Should support content and an image
• In Zero to Medium, the image is vertically aligned and on top
• From Large, the image and content are horizontally aligned
  • The image can be start or end aligned horizontally
  • There should be gradient into the image with the background color of the teaser product (gradient 25% - 75%)
• The teaser product can have a footer, which changes the bottom spacing
• Can be negative
• Has no max width (maybe add max-width in storybook) (Check with @mcilurzo)
• The footnote width is limited by the content width
• The element is highlighted on hover like sbb-teaser-hero (Check with @mcilurzo)

Tech Spec:

• Create component sbb-teaser-product, which is a link component similar to sbb-teaser-hero and sbb-teaser-product-static, which allows slotting actual buttons or links
• Should have a slot for the image
• Should have an property imageAlignment: 'after' | 'before' = 'after'
• Should have an unnamed slot for the content (the button in the Figma spec should not be hardcoded and is simply part of a content)
• Should have a slot for the footnote

<sbb-teaser-product href="...">
  <sbb-image slot="image"></sbb-image>
  My content for the teaser product
</sbb-teaser-product>

<sbb-teaser-product href="...">
  <sbb-image slot="image"></sbb-image>
  My content for the teaser product
  <div slot="footnote">
    My footnote
  </div>
</sbb-teaser-product>

Definition of Done

• Component is implemented
• Documentation is provided
• Tests are implemented
• Storybook stories are implemented
• Navigation via keyboard is tested
• Screen reader output is tested
• High-contrast is tested
• Remaining accessibility is tested
• UX approved