The banners are based on the var banner of desktop-de-14.

Acceptance Criteria

Control and Variant

• Two options are added to the payment interval radio button group in both the control and the variant banner:
  • quartely ("vierteljährlich") sets the value 3
  • semi-yearly ("halbjährlich") sets the value 6.
• Two payment interval options are displayed per row. The last row contains a single option.

Variant only

Viewport width of 1580px and above

Banner text

• there is a break after the first part of the headline ("Liebe Leserinnen und Leser,").
• a padding of 1.2em is added to the blue text box.
• the triangular pointer on the left is repositioned to level out the changed padding.
• the line height is increased to 1.5em.
• the sentence "Das Herzstück..." is not displayed.

Progress bar

• the height of the progress bar is increased to 2.2em.
• the font size of elements inside the progress bar is increased to 1.2em.

Form

• the font size of the form labels is increased to 1.2em.
• the spacing between button groups is increased to 1em.
• the form width is increased to 24em.
• the font size of the form labels is increased to 1.2em.
• the top padding of radio button groups is increased to 1em.
• the height of radio button labels is increased to 35px.
• the top and button padding of the submit button is increased to 0.4em.

Other

• the font-size of the close button is increased to 35px.
• the close button is repositioned to level out the increased font size.
• the font size of the footer line is increased to 1em.

Viewport width of 1900px and above

Banner text

• the sentence "Das Herzstück..." is displayed.

Layout changes in 1580+ pixels

Notes
Depending on the outcome of viewport size data analysis, there might be changes to the breakpoint settings.