/*
 * Bundle global:core
 */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

@font-face {
  font-family: "EdekaHead";
  font-style: normal;
  font-weight: normal;
  src: url("/files/fonts/EDEKAHead/EDEKAHeadWEB-Black.woff2");
}

@font-face {
  font-family: "EdekaText";
  font-style: normal;
  font-weight: normal;
  src: url("/files/fonts/EDEKAText/EDEKATextWeb-Regular.woff2");
}

@font-face {
  font-family: "EdekaTextBold";
  font-style: normal;
  font-weight: normal;
  src: url("/files/fonts/EDEKAText/EDEKATextWeb-Bold.woff2");
}

@font-face {
  font-family: "EdekaTextItalic";
  font-style: italic;
  font-weight: normal;
  src: url("/files/fonts/EDEKAText/EDEKATextWeb-Italic.woff2");
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Additional stylings */
* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
.x-breakpoint-min-mobileWide {
  display: none;
}

.x-breakpoint-min-tablet {
  display: none;
}

.x-breakpoint-min-desktopSmall {
  display: none;
}

.x-breakpoint-min-desktopMid {
  display: none;
}

.x-stop-scroll {
  overflow-y: hidden;
}

html.x-stop-scroll body {
  position: fixed;
  width: 100%;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:button
 */
.a-core-button {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  padding: 11px 30px 9px 30px;
  height: auto;
  min-width: 160px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  transition: color 250ms ease-in-out, background-color 250ms ease-in-out,
    border-color 250ms ease-in-out;
}
.a-core-button.is-small {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 16px;
  padding: 6px;
  min-width: 0;
}
.a-core-button.is-small.is-secondary {
  padding-top: 4px;
  padding-bottom: 4px;
}
.a-core-button.is-primary.has-context-bright {
  color: #ffffff;
  background: #1b66b3;
}
.a-core-button.is-primary.has-context-bright:hover {
  background: #1d5ea3;
}
.a-core-button.is-primary.has-context-dark {
  color: #404245;
  background: #fce531;
}
.a-core-button.is-primary.has-context-dark:hover {
  background: #e8d42b;
}
.a-core-button.is-secondary {
  padding-top: 9px;
  padding-bottom: 7px;
  border: 2px solid;
  background: transparent;
}
.a-core-button.is-secondary.has-context-bright {
  border-color: #404245;
  color: #404245;
}
.a-core-button.is-secondary.has-context-bright:hover {
  border-color: #1b66b3;
  color: #1b66b3;
}
.a-core-button.is-secondary.has-context-dark {
  border-color: #ffffff;
  color: #ffffff;
}
.a-core-button.is-secondary.has-context-dark:hover {
  border-color: #fce531;
  color: #fce531;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:icon-button
 */
.a-core-icon-button {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  padding: 4px 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-transform: uppercase;
  white-space: normal;
  transition: color 250ms ease-in-out, fill 250ms ease-in-out;
}
.a-core-icon-button.is-subtle {
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 14px;
  text-transform: none;
}
.a-core-icon-button.is-subtle > .a-core-icon {
  width: 22px;
  height: 22px;
}
.a-core-icon-button.has-context-bright {
  color: #1b66b3;
  fill: #1b66b3;
}
.a-core-icon-button.has-context-bright:hover {
  color: #404245;
  fill: #404245;
}
.a-core-icon-button.has-context-bright-alternative {
  color: #404245;
  fill: #404245;
}
.a-core-icon-button.has-context-bright-alternative:hover {
  color: #999999;
  fill: #999999;
}
.a-core-icon-button.has-context-dark {
  color: #fce531;
  fill: #fce531;
}
.a-core-icon-button.has-context-dark:hover {
  color: #ffffff;
  fill: #ffffff;
}
.a-core-icon-button.has-context-dark-alternative {
  color: #ffffff;
  fill: #ffffff;
}
.a-core-icon-button.has-context-dark-alternative:hover {
  color: #fce531;
  fill: #fce531;
}
.a-core-icon-button.has-icon-left {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.a-core-icon-button.has-icon-left .a-core-icon {
  margin-right: 4px;
}
.a-core-icon-button.has-icon-right {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.a-core-icon-button.has-icon-right .a-core-icon {
  margin-left: 4px;
}
.a-core-icon-button__inner {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.a-core-icon-button.has-icon-right .a-core-icon-button__inner {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:icon-button-multiline
 */
.a-core-icon-button-multiline {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  text-overflow: unset;
  overflow: visible;
  padding: 4px 32px 4px 0;
  transition: color 250ms ease-in-out, fill 250ms ease-in-out;
}
.a-core-icon-button-multiline.has-context-bright {
  color: #1b66b3;
  fill: #1b66b3;
}
.a-core-icon-button-multiline.has-context-bright:hover {
  color: #404245;
  fill: #404245;
}
.a-core-icon-button-multiline.has-context-bright-alternative {
  color: #404245;
  fill: #404245;
}
.a-core-icon-button-multiline.has-context-bright-alternative:hover {
  color: #999999;
  fill: #999999;
}
.a-core-icon-button-multiline__inner {
  display: inline;
  white-space: normal;
}
.a-core-icon-button-multiline .a-core-icon {
  vertical-align: middle;
  display: inline;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:icon-only-button
 */
.a-core-icon-only-button {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  transition: fill 250ms ease-in-out;
}
.a-core-icon-only-button.has-context-bright {
  color: #1b66b3;
}
.a-core-icon-only-button.has-context-bright:hover {
  color: #1d5ea3;
}
.a-core-icon-only-button.has-context-dark {
  color: #fce531;
}
.a-core-icon-only-button.has-context-dark:hover {
  color: #ffffff;
}
.a-core-icon-only-button > .a-core-icon {
  width: 32px;
  height: 32px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:icon-top-button
 */
.a-core-icon-top-button {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: inline-block;
  text-align: center;
  margin-bottom: 24px;
  transition: color 250ms ease-in-out, fill 250ms ease-in-out;
  color: #1b66b3;
  fill: #1b66b3;
}
.a-core-icon-top-button:hover {
  color: #1d5ea3;
  fill: #1d5ea3;
}
.a-core-icon-top-button__icon {
  display: block;
}
.a-core-icon-top-button__label {
  display: block;
  text-transform: uppercase;
  padding-top: 10px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:copy
 */
.a-core-copy,
.m-core-richtext p,
.m-core-richtext ul li,
.m-core-richtext ol li {
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 20px;
  display: block;
}
.a-core-copy.has-spacing + .a-core-copy.has-spacing,
.m-core-richtext p + .a-core-copy.has-spacing,
.m-core-richtext ul li.has-spacing + .a-core-copy.has-spacing,
.m-core-richtext ol li.has-spacing + .a-core-copy.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + p,
.m-core-richtext p + p,
.m-core-richtext ul li.has-spacing + p,
.m-core-richtext ol li.has-spacing + p,
.m-core-richtext ul .a-core-copy.has-spacing + li.has-spacing,
.m-core-richtext ul p + li.has-spacing,
.m-core-richtext ul li.has-spacing + li.has-spacing,
.m-core-richtext ol .a-core-copy.has-spacing + li.has-spacing,
.m-core-richtext ol p + li.has-spacing,
.m-core-richtext ol li.has-spacing + li.has-spacing,
.a-core-copy.has-spacing + .a-core-listing.has-spacing,
.m-core-richtext p + .a-core-listing.has-spacing,
.m-core-richtext ul li.has-spacing + .a-core-listing.has-spacing,
.m-core-richtext ol li.has-spacing + .a-core-listing.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + ul,
.m-core-richtext p + ul,
.m-core-richtext ul li.has-spacing + ul,
.m-core-richtext ol li.has-spacing + ul,
.m-core-richtext .a-core-copy.has-spacing + ol,
.m-core-richtext p + ol,
.m-core-richtext ul li.has-spacing + ol,
.m-core-richtext ol li.has-spacing + ol {
  margin-top: 16px;
}
.a-core-copy.has-spacing + .a-core-headline.is-main.has-spacing,
.m-core-richtext p + .a-core-headline.is-main.has-spacing,
.m-core-richtext ul li.has-spacing + .a-core-headline.is-main.has-spacing,
.m-core-richtext ol li.has-spacing + .a-core-headline.is-main.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h1,
.m-core-richtext p + h1,
.m-core-richtext ul li.has-spacing + h1,
.m-core-richtext ol li.has-spacing + h1,
.m-core-richtext .a-core-copy.has-spacing + h2.is-main.has-spacing,
.m-core-richtext p + h2.is-main.has-spacing,
.m-core-richtext ul li.has-spacing + h2.is-main.has-spacing,
.m-core-richtext ol li.has-spacing + h2.is-main.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h3.is-main.has-spacing,
.m-core-richtext p + h3.is-main.has-spacing,
.m-core-richtext ul li.has-spacing + h3.is-main.has-spacing,
.m-core-richtext ol li.has-spacing + h3.is-main.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h4.is-main.has-spacing,
.m-core-richtext p + h4.is-main.has-spacing,
.m-core-richtext ul li.has-spacing + h4.is-main.has-spacing,
.m-core-richtext ol li.has-spacing + h4.is-main.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h5.is-main.has-spacing,
.m-core-richtext p + h5.is-main.has-spacing,
.m-core-richtext ul li.has-spacing + h5.is-main.has-spacing,
.m-core-richtext ol li.has-spacing + h5.is-main.has-spacing {
  margin-top: 32px;
}
.a-core-copy.has-spacing + .a-core-headline.is-section.has-spacing,
.m-core-richtext p + .a-core-headline.is-section.has-spacing,
.m-core-richtext ul li.has-spacing + .a-core-headline.is-section.has-spacing,
.m-core-richtext ol li.has-spacing + .a-core-headline.is-section.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h1.is-section.has-spacing,
.m-core-richtext p + h1.is-section.has-spacing,
.m-core-richtext ul li.has-spacing + h1.is-section.has-spacing,
.m-core-richtext ol li.has-spacing + h1.is-section.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h2,
.m-core-richtext p + h2,
.m-core-richtext ul li.has-spacing + h2,
.m-core-richtext ol li.has-spacing + h2,
.m-core-richtext .a-core-copy.has-spacing + h3.is-section.has-spacing,
.m-core-richtext p + h3.is-section.has-spacing,
.m-core-richtext ul li.has-spacing + h3.is-section.has-spacing,
.m-core-richtext ol li.has-spacing + h3.is-section.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h4.is-section.has-spacing,
.m-core-richtext p + h4.is-section.has-spacing,
.m-core-richtext ul li.has-spacing + h4.is-section.has-spacing,
.m-core-richtext ol li.has-spacing + h4.is-section.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h5.is-section.has-spacing,
.m-core-richtext p + h5.is-section.has-spacing,
.m-core-richtext ul li.has-spacing + h5.is-section.has-spacing,
.m-core-richtext ol li.has-spacing + h5.is-section.has-spacing {
  margin-top: 24px;
}
.a-core-copy.has-spacing + .a-core-headline.is-article.has-spacing,
.m-core-richtext p + .a-core-headline.is-article.has-spacing,
.m-core-richtext ul li.has-spacing + .a-core-headline.is-article.has-spacing,
.m-core-richtext ol li.has-spacing + .a-core-headline.is-article.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h1.is-article.has-spacing,
.m-core-richtext p + h1.is-article.has-spacing,
.m-core-richtext ul li.has-spacing + h1.is-article.has-spacing,
.m-core-richtext ol li.has-spacing + h1.is-article.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h2.is-article.has-spacing,
.m-core-richtext p + h2.is-article.has-spacing,
.m-core-richtext ul li.has-spacing + h2.is-article.has-spacing,
.m-core-richtext ol li.has-spacing + h2.is-article.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h3.is-article.has-spacing,
.m-core-richtext p + h3.is-article.has-spacing,
.m-core-richtext ul li.has-spacing + h3.is-article.has-spacing,
.m-core-richtext ol li.has-spacing + h3.is-article.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h4.is-article.has-spacing,
.m-core-richtext p + h4.is-article.has-spacing,
.m-core-richtext ul li.has-spacing + h4.is-article.has-spacing,
.m-core-richtext ol li.has-spacing + h4.is-article.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h5.is-article.has-spacing,
.m-core-richtext p + h5.is-article.has-spacing,
.m-core-richtext ul li.has-spacing + h5.is-article.has-spacing,
.m-core-richtext ol li.has-spacing + h5.is-article.has-spacing {
  margin-top: 16px;
}
.a-core-copy.has-spacing + .a-core-headline.is-category.has-spacing,
.m-core-richtext p + .a-core-headline.is-category.has-spacing,
.m-core-richtext ul li.has-spacing + .a-core-headline.is-category.has-spacing,
.m-core-richtext ol li.has-spacing + .a-core-headline.is-category.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h1.is-category.has-spacing,
.m-core-richtext p + h1.is-category.has-spacing,
.m-core-richtext ul li.has-spacing + h1.is-category.has-spacing,
.m-core-richtext ol li.has-spacing + h1.is-category.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h2.is-category.has-spacing,
.m-core-richtext p + h2.is-category.has-spacing,
.m-core-richtext ul li.has-spacing + h2.is-category.has-spacing,
.m-core-richtext ol li.has-spacing + h2.is-category.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h3,
.m-core-richtext p + h3,
.m-core-richtext ul li.has-spacing + h3,
.m-core-richtext ol li.has-spacing + h3,
.m-core-richtext .a-core-copy.has-spacing + h4.is-category.has-spacing,
.m-core-richtext p + h4.is-category.has-spacing,
.m-core-richtext ul li.has-spacing + h4.is-category.has-spacing,
.m-core-richtext ol li.has-spacing + h4.is-category.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h5.is-category.has-spacing,
.m-core-richtext p + h5.is-category.has-spacing,
.m-core-richtext ul li.has-spacing + h5.is-category.has-spacing,
.m-core-richtext ol li.has-spacing + h5.is-category.has-spacing {
  margin-top: 16px;
}
.a-core-copy.has-spacing + .a-core-headline.is-entry.has-spacing,
.m-core-richtext p + .a-core-headline.is-entry.has-spacing,
.m-core-richtext ul li.has-spacing + .a-core-headline.is-entry.has-spacing,
.m-core-richtext ol li.has-spacing + .a-core-headline.is-entry.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h1.is-entry.has-spacing,
.m-core-richtext p + h1.is-entry.has-spacing,
.m-core-richtext ul li.has-spacing + h1.is-entry.has-spacing,
.m-core-richtext ol li.has-spacing + h1.is-entry.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h2.is-entry.has-spacing,
.m-core-richtext p + h2.is-entry.has-spacing,
.m-core-richtext ul li.has-spacing + h2.is-entry.has-spacing,
.m-core-richtext ol li.has-spacing + h2.is-entry.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h3.is-entry.has-spacing,
.m-core-richtext p + h3.is-entry.has-spacing,
.m-core-richtext ul li.has-spacing + h3.is-entry.has-spacing,
.m-core-richtext ol li.has-spacing + h3.is-entry.has-spacing,
.m-core-richtext .a-core-copy.has-spacing + h4,
.m-core-richtext p + h4,
.m-core-richtext ul li.has-spacing + h4,
.m-core-richtext ol li.has-spacing + h4,
.m-core-richtext .a-core-copy.has-spacing + h5.is-entry.has-spacing,
.m-core-richtext p + h5.is-entry.has-spacing,
.m-core-richtext ul li.has-spacing + h5.is-entry.has-spacing,
.m-core-richtext ol li.has-spacing + h5.is-entry.has-spacing {
  margin-top: 8px;
}
.a-core-copy.has-context-color-dark,
.m-core-richtext p.has-context-color-dark,
.m-core-richtext ul li.has-context-color-dark,
.m-core-richtext ol li.has-context-color-dark {
  color: #ffffff;
}
.a-core-copy.is-highlight,
.m-core-richtext p.is-highlight,
.m-core-richtext ul li.is-highlight,
.m-core-richtext ol li.is-highlight {
  font-family: "EdekaText";
  font-size: 18px;
  line-height: 28px;
}
.a-core-copy.is-longread,
.m-core-richtext p,
.m-core-richtext ul li.is-longread,
.m-core-richtext ol li.is-longread {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 24px;
}
.a-core-copy.is-shy,
.m-core-richtext p.is-shy,
.m-core-richtext ul li.is-shy,
.m-core-richtext ol li.is-shy {
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 18px;
}
.a-core-copy.is-static,
.m-core-richtext p.is-static,
.m-core-richtext ul li.is-static,
.m-core-richtext ol li.is-static {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 24px;
}
.a-core-copy.is-small,
.m-core-richtext p.is-small,
.m-core-richtext ul li.is-small,
.m-core-richtext ol li.is-small {
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 18px;
}
.a-core-copy.is-small-static,
.m-core-richtext p.is-small-static,
.m-core-richtext ul li.is-small-static,
.m-core-richtext ol li.is-small-static {
  font-family: "EdekaText";
  font-size: 12px;
  line-height: 18px;
}
.a-core-copy.is-extra-small,
.m-core-richtext p.is-extra-small,
.m-core-richtext ul li.is-extra-small,
.m-core-richtext ol li.is-extra-small {
  font-family: "EdekaText";
  font-size: 12px;
  line-height: 16px;
}
.a-core-copy u,
.m-core-richtext p u,
.m-core-richtext ul li u,
.m-core-richtext ol li u {
  text-decoration: underline;
}
.a-core-copy strong,
.m-core-richtext p strong,
.m-core-richtext ul li strong,
.m-core-richtext ol li strong,
.a-core-copy em,
.m-core-richtext p em,
.m-core-richtext ul li em,
.m-core-richtext ol li em {
  font-family: "EdekaTextBold";
}
.a-core-copy i,
.m-core-richtext p i,
.m-core-richtext ul li i,
.m-core-richtext ol li i {
  font-style: italic;
}
.a-core-copy a,
.m-core-richtext p a,
.m-core-richtext ul li a,
.m-core-richtext ol li a {
  color: #1b66b3;
}
.a-core-copy a:hover,
.m-core-richtext p a:hover,
.m-core-richtext ul li a:hover,
.m-core-richtext ol li a:hover {
  text-decoration: underline;
  color: #1d5ea3;
}
.a-core-copy.has-context-color-dark a,
.m-core-richtext p.has-context-color-dark a,
.m-core-richtext ul li.has-context-color-dark a,
.m-core-richtext ol li.has-context-color-dark a {
  color: #fce531;
}
.a-core-copy.has-context-color-dark a:hover,
.m-core-richtext p.has-context-color-dark a:hover,
.m-core-richtext ul li.has-context-color-dark a:hover,
.m-core-richtext ol li.has-context-color-dark a:hover {
  text-decoration: underline;
  color: #e8d42b;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:headline
 */
.a-core-headline,
.m-core-richtext h1,
.m-core-richtext h2,
.m-core-richtext h3,
.m-core-richtext h4,
.m-core-richtext h5 {
  display: block;
}
.a-core-headline.is-hero,
.m-core-richtext h1.is-hero,
.m-core-richtext h2.is-hero,
.m-core-richtext h3.is-hero,
.m-core-richtext h4.is-hero,
.m-core-richtext h5.is-hero {
  font-family: "EdekaText";
  font-size: 52px;
  line-height: 52px;
}
.a-core-headline.is-highlight,
.m-core-richtext h1.is-highlight,
.m-core-richtext h2.is-highlight,
.m-core-richtext h3.is-highlight,
.m-core-richtext h4.is-highlight,
.m-core-richtext h5.is-highlight {
  font-family: "EdekaText";
  font-size: 32px;
  line-height: 32px;
}
.a-core-headline.is-main,
.m-core-richtext h1,
.m-core-richtext h2.is-main,
.m-core-richtext h3.is-main,
.m-core-richtext h4.is-main,
.m-core-richtext h5.is-main {
  font-family: "EdekaText";
  font-size: 32px;
  line-height: 32px;
}
.a-core-headline.is-main-static,
.m-core-richtext h1.is-main-static,
.m-core-richtext h2.is-main-static,
.m-core-richtext h3.is-main-static,
.m-core-richtext h4.is-main-static,
.m-core-richtext h5.is-main-static {
  font-family: "EdekaText";
  font-size: 52px;
  line-height: 52px;
}
.a-core-headline.is-section,
.m-core-richtext h1.is-section,
.m-core-richtext h2,
.m-core-richtext h3.is-section,
.m-core-richtext h4.is-section,
.m-core-richtext h5.is-section {
  font-family: "EdekaText";
  font-size: 32px;
  line-height: 32px;
}
.a-core-headline.is-section-static,
.m-core-richtext h1.is-section-static,
.m-core-richtext h2.is-section-static,
.m-core-richtext h3.is-section-static,
.m-core-richtext h4.is-section-static,
.m-core-richtext h5.is-section-static {
  font-family: "EdekaText";
  font-size: 40px;
  line-height: 40px;
}
.a-core-headline.is-article,
.m-core-richtext h1.is-article,
.m-core-richtext h2.is-article,
.m-core-richtext h3.is-article,
.m-core-richtext h4.is-article,
.m-core-richtext h5.is-article {
  font-family: "EdekaText";
  font-size: 24px;
  line-height: 24px;
}
.a-core-headline.is-article-static,
.m-core-richtext h1.is-article-static,
.m-core-richtext h2.is-article-static,
.m-core-richtext h3.is-article-static,
.m-core-richtext h4.is-article-static,
.m-core-richtext h5.is-article-static {
  font-family: "EdekaText";
  font-size: 32px;
  line-height: 32px;
}
.a-core-headline.is-category,
.m-core-richtext h1.is-category,
.m-core-richtext h2.is-category,
.m-core-richtext h3,
.m-core-richtext h4.is-category,
.m-core-richtext h5.is-category {
  font-family: "EdekaText";
  font-size: 20px;
  line-height: 20px;
}
.a-core-headline.is-entry,
.m-core-richtext h1.is-entry,
.m-core-richtext h2.is-entry,
.m-core-richtext h3.is-entry,
.m-core-richtext h4,
.m-core-richtext h5.is-entry {
  font-family: "EdekaText";
  font-size: 18px;
  line-height: 18px;
}
.a-core-headline.is-entry-static,
.m-core-richtext h1.is-entry-static,
.m-core-richtext h2.is-entry-static,
.m-core-richtext h3.is-entry-static,
.m-core-richtext h4.is-entry-static,
.m-core-richtext h5.is-entry-static {
  font-family: "EdekaText";
  font-size: 20px;
  line-height: 20px;
}
.a-core-headline.is-fragment-static,
.m-core-richtext h1.is-fragment-static,
.m-core-richtext h2.is-fragment-static,
.m-core-richtext h3.is-fragment-static,
.m-core-richtext h4.is-fragment-static,
.m-core-richtext h5.is-fragment-static {
  font-family: "EdekaText";
  font-size: 18px;
  line-height: 18px;
}
.a-core-headline.is-main.has-spacing,
.m-core-richtext h1,
.m-core-richtext h2.is-main.has-spacing,
.m-core-richtext h3.is-main.has-spacing,
.m-core-richtext h4.is-main.has-spacing,
.m-core-richtext h5.is-main.has-spacing,
.a-core-headline.is-main-stactic.has-spacing,
.m-core-richtext h1.is-main-stactic.has-spacing,
.m-core-richtext h2.is-main-stactic.has-spacing,
.m-core-richtext h3.is-main-stactic.has-spacing,
.m-core-richtext h4.is-main-stactic.has-spacing,
.m-core-richtext h5.is-main-stactic.has-spacing {
  margin-bottom: 24px;
}
.a-core-headline.is-section.has-spacing,
.m-core-richtext h1.is-section.has-spacing,
.m-core-richtext h2,
.m-core-richtext h3.is-section.has-spacing,
.m-core-richtext h4.is-section.has-spacing,
.m-core-richtext h5.is-section.has-spacing,
.a-core-headline.is-section-static.has-spacing,
.m-core-richtext h1.is-section-static.has-spacing,
.m-core-richtext h2.is-section-static.has-spacing,
.m-core-richtext h3.is-section-static.has-spacing,
.m-core-richtext h4.is-section-static.has-spacing,
.m-core-richtext h5.is-section-static.has-spacing {
  margin-bottom: 16px;
}
.a-core-headline.is-article.has-spacing,
.m-core-richtext h1.is-article.has-spacing,
.m-core-richtext h2.is-article.has-spacing,
.m-core-richtext h3.is-article.has-spacing,
.m-core-richtext h4.is-article.has-spacing,
.m-core-richtext h5.is-article.has-spacing,
.a-core-headline.is-article-static.has-spacing,
.m-core-richtext h1.is-article-static.has-spacing,
.m-core-richtext h2.is-article-static.has-spacing,
.m-core-richtext h3.is-article-static.has-spacing,
.m-core-richtext h4.is-article-static.has-spacing,
.m-core-richtext h5.is-article-static.has-spacing {
  margin-bottom: 8px;
}
.a-core-headline.is-category.has-spacing,
.m-core-richtext h1.is-category.has-spacing,
.m-core-richtext h2.is-category.has-spacing,
.m-core-richtext h3,
.m-core-richtext h4.is-category.has-spacing,
.m-core-richtext h5.is-category.has-spacing {
  margin-bottom: 8px;
}
.a-core-headline.is-entry.has-spacing,
.m-core-richtext h1.is-entry.has-spacing,
.m-core-richtext h2.is-entry.has-spacing,
.m-core-richtext h3.is-entry.has-spacing,
.m-core-richtext h4,
.m-core-richtext h5.is-entry.has-spacing,
.a-core-headline.is-entry-static.has-spacing,
.m-core-richtext h1.is-entry-static.has-spacing,
.m-core-richtext h2.is-entry-static.has-spacing,
.m-core-richtext h3.is-entry-static.has-spacing,
.m-core-richtext h4.is-entry-static.has-spacing,
.m-core-richtext h5.is-entry-static.has-spacing {
  margin-bottom: 4px;
}
.a-core-headline.has-context-color-dark,
.m-core-richtext h1.has-context-color-dark,
.m-core-richtext h2.has-context-color-dark,
.m-core-richtext h3.has-context-color-dark,
.m-core-richtext h4.has-context-color-dark,
.m-core-richtext h5.has-context-color-dark {
  color: #ffffff;
}
.a-core-headline.has-context-color-dark-alternative,
.m-core-richtext h1.has-context-color-dark-alternative,
.m-core-richtext h2.has-context-color-dark-alternative,
.m-core-richtext h3.has-context-color-dark-alternative,
.m-core-richtext h4.has-context-color-dark-alternative,
.m-core-richtext h5.has-context-color-dark-alternative {
  color: #fce531;
}
.a-core-headline.is-emphasized,
.m-core-richtext h1.is-emphasized,
.m-core-richtext h2.is-emphasized,
.m-core-richtext h3.is-emphasized,
.m-core-richtext h4.is-emphasized,
.m-core-richtext h5.is-emphasized {
  text-transform: uppercase;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:icon
 */
.a-core-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:listing
 */
.a-core-listing,
.m-core-richtext ul,
.m-core-richtext ol {
  display: table;
}
.a-core-listing.has-spacing,
.m-core-richtext ul,
.m-core-richtext ol {
  margin-bottom: 16px;
}
.a-core-listing li,
.m-core-richtext ul li,
.m-core-richtext ol li,
.a-core-listing__item,
.m-core-richtext ul li,
.m-core-richtext ol li {
  display: table-row;
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 24px;
}
.a-core-listing li:before,
.m-core-richtext ul li:before,
.m-core-richtext ol li:before,
.a-core-listing__item:before,
.m-core-richtext ul li:before,
.m-core-richtext ol li:before {
  display: table-cell;
}

ul.a-core-listing li:before,
.m-core-richtext ul li:before {
  content: "\2022";
  padding-right: 8px;
}

ol.a-core-listing,
.m-core-richtext ol {
  counter-reset: ol-counter;
}
ol.a-core-listing li,
.m-core-richtext ol li {
  counter-increment: ol-counter;
}
ol.a-core-listing li:before,
.m-core-richtext ol li:before {
  content: counter(ol-counter) ".";
  padding-right: 4px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:m207-section-separator
 */
.a-core-m207-section-separator {
  color: #eaeaea;
}
.a-core-m207-section-separator:not(.has-grid) {
  border-bottom: 1px solid currentColor;
}
.a-core-m207-section-separator.has-grid {
  position: relative;
}
.a-core-m207-section-separator.has-grid.has-background-medium {
  background: #eaeaea;
}
.a-core-m207-section-separator.has-grid .a-core-m207-section-separator__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.a-core-m207-section-separator.has-grid .a-core-m207-section-separator__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.a-core-m207-section-separator.has-grid .a-core-m207-section-separator__col {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.a-core-m207-section-separator.has-grid
  .a-core-m207-section-separator__col:before {
  display: block;
  content: "";
  border-bottom: 1px solid currentColor;
}
.a-core-m207-section-separator.has-spacing {
  padding-top: 48px;
  padding-bottom: 48px;
}
.a-core-m207-section-separator.has-background-medium,
.has-background-medium .a-core-m207-section-separator {
  color: #999999;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:m206-section-spacing
 */
.a-core-m206-section-spacing {
  height: 32px;
}
.a-core-m206-section-spacing.is-negative {
  height: 0 !important;
  margin-bottom: -48px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:circular-icon
 */
.a-core-circular-icon {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
}
.a-core-circular-icon .a-core-icon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
}
.a-core-circular-icon {
  width: 52px;
  height: 52px;
}
.a-core-circular-icon .a-core-icon {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
}
.a-core-circular-icon.is-small {
  width: 44px;
  height: 44px;
}
.a-core-circular-icon.is-small .a-core-icon {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
}
.a-core-circular-icon.is-medium {
  width: 48px;
  height: 48px;
}
.a-core-circular-icon.is-medium .a-core-icon {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
}
.a-core-circular-icon.is-medium-shy {
  width: 24px;
  height: 24px;
}
.a-core-circular-icon.is-medium-shy .a-core-icon {
  width: 22px;
  height: 22px;
  margin-top: -11px;
  margin-left: -11px;
}
.a-core-circular-icon.is-extra-large {
  width: 60px;
  height: 60px;
}
.a-core-circular-icon.is-extra-large .a-core-icon {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
}
.a-core-circular-icon.is-yellow {
  background-color: #fce531;
  color: #343638;
}
.a-core-circular-icon.is-blue {
  background-color: #1b66b3;
  color: #ffffff;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:circular-icon-button
 */
.a-core-circular-icon-button {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.a-core-circular-icon-button__label {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
}
.a-core-circular-icon-button.is-disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}
.a-core-circular-icon-button.has-label-top,
.a-core-circular-icon-button.has-label-right,
.a-core-circular-icon-button.has-label-bottom,
.a-core-circular-icon-button.has-label-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.a-core-circular-icon-button.has-label-right {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.a-core-circular-icon-button.has-label-left {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.a-core-circular-icon-button.has-label-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.a-core-circular-icon-button.has-label-bottom {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.a-core-circular-icon-button.has-label-top .a-core-circular-icon-button__label {
  padding-bottom: 8px;
}
.a-core-circular-icon-button.has-label-right
  .a-core-circular-icon-button__label {
  padding-left: 16px;
}
.a-core-circular-icon-button.has-label-bottom
  .a-core-circular-icon-button__label {
  padding-top: 8px;
}
.a-core-circular-icon-button.has-label-left
  .a-core-circular-icon-button__label {
  padding-right: 16px;
}
.a-core-circular-icon-button:hover > .a-core-circular-icon {
  transition: background-color 250ms ease-in-out;
}
.a-core-circular-icon-button:hover > .a-core-circular-icon.is-yellow {
  background-color: #e8d42b;
}
.a-core-circular-icon-button:hover > .a-core-circular-icon.is-blue {
  background-color: #1d5ea3;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:circular-value
 */
.a-core-circular-value {
  position: relative;
  border-radius: 50%;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
}
.a-core-circular-value .a-core-icon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
}
.a-core-circular-value {
  width: 52px;
  height: 52px;
}
.a-core-circular-value .a-core-icon {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
}
.a-core-circular-value.is-small {
  width: 44px;
  height: 44px;
}
.a-core-circular-value.is-small .a-core-icon {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
}
.a-core-circular-value.is-medium {
  width: 48px;
  height: 48px;
}
.a-core-circular-value.is-medium .a-core-icon {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
}
.a-core-circular-value.is-medium-shy {
  width: 24px;
  height: 24px;
}
.a-core-circular-value.is-medium-shy .a-core-icon {
  width: 22px;
  height: 22px;
  margin-top: -11px;
  margin-left: -11px;
}
.a-core-circular-value.is-extra-large {
  width: 60px;
  height: 60px;
}
.a-core-circular-value.is-extra-large .a-core-icon {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
}
.a-core-circular-value.is-yellow {
  background-color: #fce531;
  color: #343638;
}
.a-core-circular-value.is-blue {
  background-color: #1b66b3;
  color: #ffffff;
}
.a-core-circular-value__primary,
.a-core-circular-value__secondary {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
}
.a-core-circular-value__primary {
  top: 12px;
  font-size: 18px;
}
.a-core-circular-value__secondary {
  top: 31px;
  font-size: 11px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:tag-button
 */
.a-core-tag-button {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  border: 2px solid;
  border-color: #999999;
  display: inline-block;
  color: #404245;
  background-color: #ffffff;
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 18px;
  padding: 4px;
  transition: border-color 250ms ease-in-out, color 250ms ease-in-out;
}
.a-core-tag-button:hover:not(.is-disabled) {
  border-color: #404245;
}
.a-core-tag-button.is-disabled {
  opacity: 0.5;
  cursor: default;
}
.a-core-tag-button__meta {
  display: inline-block;
  width: 44px;
  text-align: center;
  position: relative;
}
.a-core-tag-button__meta .a-core-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:circular-percentage
 */
.a-core-circular-percentage {
  position: relative;
  border-radius: 50%;
}
.a-core-circular-percentage,
.a-core-circular-percentage .a-core-circular-percentage__mask,
.a-core-circular-percentage .a-core-circular-percentage__fill {
  width: 70px;
  height: 70px;
}
.a-core-circular-percentage .a-core-circular-percentage__mask {
  clip: rect(0px, 70px, 70px, 35px);
}
.a-core-circular-percentage .a-core-circular-percentage__fill {
  clip: rect(-1px, 36px, 72px, -1px);
}
.a-core-circular-percentage .a-core-circular-percentage__circle {
  width: 68px;
  height: 68px;
  margin: 1px 0 0 1px;
}
.a-core-circular-percentage .a-core-circular-percentage__inner {
  margin: 2px 0 0 2px;
  width: 66px;
  height: 66px;
}
.a-core-circular-percentage__mask,
.a-core-circular-percentage__fill {
  position: absolute;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: 20;
}
.a-core-circular-percentage.is-1 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-1 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(1.8deg);
  transform: rotate(1.8deg);
}
.a-core-circular-percentage.is-2 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-2 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
}
.a-core-circular-percentage.is-3 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-3 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(5.4deg);
  transform: rotate(5.4deg);
}
.a-core-circular-percentage.is-4 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-4 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
}
.a-core-circular-percentage.is-5 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-5 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(9deg);
  transform: rotate(9deg);
}
.a-core-circular-percentage.is-6 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-6 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
}
.a-core-circular-percentage.is-7 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-7 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(12.6deg);
  transform: rotate(12.6deg);
}
.a-core-circular-percentage.is-8 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-8 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
}
.a-core-circular-percentage.is-9 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-9 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(16.2deg);
  transform: rotate(16.2deg);
}
.a-core-circular-percentage.is-10 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-10 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(18deg);
  transform: rotate(18deg);
}
.a-core-circular-percentage.is-11 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-11 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(19.8deg);
  transform: rotate(19.8deg);
}
.a-core-circular-percentage.is-12 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-12 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
}
.a-core-circular-percentage.is-13 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-13 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(23.4deg);
  transform: rotate(23.4deg);
}
.a-core-circular-percentage.is-14 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-14 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
}
.a-core-circular-percentage.is-15 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-15 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(27deg);
  transform: rotate(27deg);
}
.a-core-circular-percentage.is-16 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-16 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
}
.a-core-circular-percentage.is-17 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-17 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(30.6deg);
  transform: rotate(30.6deg);
}
.a-core-circular-percentage.is-18 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-18 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
}
.a-core-circular-percentage.is-19 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-19 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(34.2deg);
  transform: rotate(34.2deg);
}
.a-core-circular-percentage.is-20 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-20 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(36deg);
  transform: rotate(36deg);
}
.a-core-circular-percentage.is-21 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-21 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(37.8deg);
  transform: rotate(37.8deg);
}
.a-core-circular-percentage.is-22 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-22 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
}
.a-core-circular-percentage.is-23 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-23 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(41.4deg);
  transform: rotate(41.4deg);
}
.a-core-circular-percentage.is-24 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-24 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}
.a-core-circular-percentage.is-25 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-25 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.a-core-circular-percentage.is-26 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-26 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(46.8deg);
  transform: rotate(46.8deg);
}
.a-core-circular-percentage.is-27 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-27 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(48.6deg);
  transform: rotate(48.6deg);
}
.a-core-circular-percentage.is-28 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-28 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
}
.a-core-circular-percentage.is-29 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-29 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(52.2deg);
  transform: rotate(52.2deg);
}
.a-core-circular-percentage.is-30 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-30 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(54deg);
  transform: rotate(54deg);
}
.a-core-circular-percentage.is-31 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-31 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(55.8deg);
  transform: rotate(55.8deg);
}
.a-core-circular-percentage.is-32 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-32 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
}
.a-core-circular-percentage.is-33 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-33 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(59.4deg);
  transform: rotate(59.4deg);
}
.a-core-circular-percentage.is-34 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-34 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
}
.a-core-circular-percentage.is-35 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-35 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(63deg);
  transform: rotate(63deg);
}
.a-core-circular-percentage.is-36 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-36 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
}
.a-core-circular-percentage.is-37 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-37 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(66.6deg);
  transform: rotate(66.6deg);
}
.a-core-circular-percentage.is-38 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-38 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
}
.a-core-circular-percentage.is-39 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-39 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(70.2deg);
  transform: rotate(70.2deg);
}
.a-core-circular-percentage.is-40 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-40 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
}
.a-core-circular-percentage.is-41 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-41 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(73.8deg);
  transform: rotate(73.8deg);
}
.a-core-circular-percentage.is-42 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-42 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(75.6deg);
  transform: rotate(75.6deg);
}
.a-core-circular-percentage.is-43 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-43 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(77.4deg);
  transform: rotate(77.4deg);
}
.a-core-circular-percentage.is-44 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-44 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
}
.a-core-circular-percentage.is-45 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-45 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(81deg);
  transform: rotate(81deg);
}
.a-core-circular-percentage.is-46 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-46 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
}
.a-core-circular-percentage.is-47 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-47 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(84.6deg);
  transform: rotate(84.6deg);
}
.a-core-circular-percentage.is-48 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-48 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
}
.a-core-circular-percentage.is-49 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-49 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(88.2deg);
  transform: rotate(88.2deg);
}
.a-core-circular-percentage.is-50 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-50 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.a-core-circular-percentage.is-51 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-51 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(91.8deg);
  transform: rotate(91.8deg);
}
.a-core-circular-percentage.is-52 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-52 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(93.6deg);
  transform: rotate(93.6deg);
}
.a-core-circular-percentage.is-53 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-53 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(95.4deg);
  transform: rotate(95.4deg);
}
.a-core-circular-percentage.is-54 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-54 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
}
.a-core-circular-percentage.is-55 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-55 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(99deg);
  transform: rotate(99deg);
}
.a-core-circular-percentage.is-56 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-56 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
}
.a-core-circular-percentage.is-57 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-57 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(102.6deg);
  transform: rotate(102.6deg);
}
.a-core-circular-percentage.is-58 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-58 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
}
.a-core-circular-percentage.is-59 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-59 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(106.2deg);
  transform: rotate(106.2deg);
}
.a-core-circular-percentage.is-60 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-60 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
}
.a-core-circular-percentage.is-61 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-61 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(109.8deg);
  transform: rotate(109.8deg);
}
.a-core-circular-percentage.is-62 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-62 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(111.6deg);
  transform: rotate(111.6deg);
}
.a-core-circular-percentage.is-63 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-63 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(113.4deg);
  transform: rotate(113.4deg);
}
.a-core-circular-percentage.is-64 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-64 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
}
.a-core-circular-percentage.is-65 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-65 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(117deg);
  transform: rotate(117deg);
}
.a-core-circular-percentage.is-66 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-66 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.a-core-circular-percentage.is-67 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-67 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(120.6deg);
  transform: rotate(120.6deg);
}
.a-core-circular-percentage.is-68 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-68 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
}
.a-core-circular-percentage.is-69 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-69 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(124.2deg);
  transform: rotate(124.2deg);
}
.a-core-circular-percentage.is-70 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-70 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(126deg);
  transform: rotate(126deg);
}
.a-core-circular-percentage.is-71 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-71 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(127.8deg);
  transform: rotate(127.8deg);
}
.a-core-circular-percentage.is-72 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-72 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
}
.a-core-circular-percentage.is-73 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-73 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(131.4deg);
  transform: rotate(131.4deg);
}
.a-core-circular-percentage.is-74 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-74 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(133.2deg);
  transform: rotate(133.2deg);
}
.a-core-circular-percentage.is-75 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-75 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.a-core-circular-percentage.is-76 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-76 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
}
.a-core-circular-percentage.is-77 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-77 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(138.6deg);
  transform: rotate(138.6deg);
}
.a-core-circular-percentage.is-78 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-78 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
}
.a-core-circular-percentage.is-79 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-79 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(142.2deg);
  transform: rotate(142.2deg);
}
.a-core-circular-percentage.is-80 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-80 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
}
.a-core-circular-percentage.is-81 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-81 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(145.8deg);
  transform: rotate(145.8deg);
}
.a-core-circular-percentage.is-82 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-82 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
}
.a-core-circular-percentage.is-83 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-83 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(149.4deg);
  transform: rotate(149.4deg);
}
.a-core-circular-percentage.is-84 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-84 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(151.2deg);
  transform: rotate(151.2deg);
}
.a-core-circular-percentage.is-85 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-85 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(153deg);
  transform: rotate(153deg);
}
.a-core-circular-percentage.is-86 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-86 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
}
.a-core-circular-percentage.is-87 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-87 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(156.6deg);
  transform: rotate(156.6deg);
}
.a-core-circular-percentage.is-88 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-88 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
}
.a-core-circular-percentage.is-89 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-89 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(160.2deg);
  transform: rotate(160.2deg);
}
.a-core-circular-percentage.is-90 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-90 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(162deg);
  transform: rotate(162deg);
}
.a-core-circular-percentage.is-91 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-91 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(163.8deg);
  transform: rotate(163.8deg);
}
.a-core-circular-percentage.is-92 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-92 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
}
.a-core-circular-percentage.is-93 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-93 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(167.4deg);
  transform: rotate(167.4deg);
}
.a-core-circular-percentage.is-94 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-94 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(169.2deg);
  transform: rotate(169.2deg);
}
.a-core-circular-percentage.is-95 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-95 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(171deg);
  transform: rotate(171deg);
}
.a-core-circular-percentage.is-96 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-96 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}
.a-core-circular-percentage.is-97 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-97 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(174.6deg);
  transform: rotate(174.6deg);
}
.a-core-circular-percentage.is-98 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-98 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
}
.a-core-circular-percentage.is-99 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-99 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(178.2deg);
  transform: rotate(178.2deg);
}
.a-core-circular-percentage.is-100 .a-core-circular-percentage__mask.is-full,
.a-core-circular-percentage.is-100 .a-core-circular-percentage__fill {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.a-core-circular-percentage__fill {
  background-color: #1b66b3;
}
.a-core-circular-percentage__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 50%;
  background: #ffffff;
  text-align: center;
  position: absolute;
  z-index: 30;
  font-size: 11px;
  line-height: 12px;
}
.a-core-circular-percentage__absolute {
  font-family: "EdekaTextBold";
}
.a-core-circular-percentage__relative {
  font-family: "EdekaText";
}
.a-core-circular-percentage__circle {
  position: absolute;
  z-index: 10;
  border: 1px solid #999999;
  border-radius: 50%;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:labeled-icon
 */
.a-core-labeled-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.a-core-labeled-icon > .a-core-icon {
  margin-bottom: 4px;
}
.a-core-labeled-icon.has-context-color-dark {
  color: #ffffff;
}
.a-core-labeled-icon.has-size-s > .a-core-icon {
  width: 32px;
  height: 32px;
}
.a-core-labeled-icon.has-size-m > .a-core-icon {
  width: 32px;
  height: 32px;
}
.a-core-labeled-icon.has-size-l > .a-core-icon {
  width: 32px;
  height: 32px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:link
 */
.a-core-link {
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 20px;
  color: #1b66b3;
}
.a-core-link:hover {
  text-decoration: underline;
  color: #1d5ea3;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:offer-product-badges
 */
.a-core-offer-product-badges {
  margin: -2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}
.a-core-offer-product-badges > .a-core-image {
  display: block;
  margin: 2px;
  height: 25px;
  width: auto;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:offer-days-price-badge
 */
.a-core-offer-days-price-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.a-core-offer-days-price-badge__discount,
.a-core-offer-days-price-badge__top-label,
.a-core-offer-days-price-badge__bottom-label {
  font-family: "EdekaText";
  line-height: 1;
  text-transform: uppercase;
}
.a-core-offer-days-price-badge__discount {
  padding: 3px 12px 2px;
  margin-right: 4px;
  font-size: 45px;
  background-color: #e2251a;
  color: #ffffff;
  border-top-left-radius: 5px;
}
.a-core-offer-days-price-badge__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.a-core-offer-days-price-badge__top-label,
.a-core-offer-days-price-badge__bottom-label {
  font-size: 24px;
  color: #e2251a;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:offer-discount-badge
 */
.a-core-offer-discount-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.a-core-offer-discount-badge__label,
.a-core-offer-discount-badge__discount {
  margin-bottom: 2px;
  font-family: "EdekaText";
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.a-core-offer-discount-badge__label:last-child,
.a-core-offer-discount-badge__discount:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 5px;
}
.a-core-offer-discount-badge__label {
  padding: 5px 4px 3px;
  font-size: 14px;
  background-color: #fce531;
  color: #404245;
}
.a-core-offer-discount-badge__label.has-style-jubilee {
  padding: 6px 4px 4px;
  font-size: 12px;
  background-color: #1b66b3;
  color: #fce531;
}
.a-core-offer-discount-badge__discount {
  padding: 3px 10px 2px;
  font-size: 40px;
  background-color: #e2251a;
  color: #ffffff;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:offer-incentive-badge
 */
.a-core-offer-incentive-badge {
  width: 98px;
  height: 55px;
  background-image: url("/b2c-design/global/core/assets/molecules/m104-single-offer-teaser/incentive.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.a-core-offer-incentive-badge__value {
  position: absolute;
  display: block;
  top: 29px;
  right: 3px;
  width: 32px;
  text-align: center;
  color: #ffffff;
  font-family: EdekaTextBold;
  font-size: 14px;
  line-height: 1;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:offer-price-badge
 */
.a-core-offer-price-badge {
  font-family: "EdekaText";
  line-height: 1;
  text-transform: uppercase;
  font-size: 52px;
  color: #e2251a;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:form-field-checkbox
 */
.a-core-form-field-checkbox {
  position: relative;
  min-height: 32px;
}
.a-core-form-field-checkbox__input {
  position: absolute;
  opacity: 0;
}
.a-core-form-field-checkbox__label {
  display: block;
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 20px;
  padding-left: 40px;
  padding-top: 6px;
}
.a-core-form-field-checkbox__label a {
  color: #1b66b3;
}
.a-core-form-field-checkbox__label a:hover {
  text-decoration: underline;
  color: #1d5ea3;
}
.a-core-form-field-checkbox__label:before,
.a-core-form-field-checkbox__label:after {
  display: block;
  content: "";
  position: absolute;
}
.a-core-form-field-checkbox__label:before {
  width: 28px;
  height: 28px;
  left: 0;
  top: 0;
  border: 2px solid #6696c7;
}
.a-core-form-field-checkbox__label:after {
  width: 16px;
  height: 12px;
  top: 10px;
  left: 8px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2212%22%3E%3Cpolygon%20fill%3D%22%23404245%22%20points%3D%221.41%204.99%200%206.39%205.75%2012%2016%201.36%2014.54%200%205.71%209.17%201.41%204.99%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    -webkit-transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    -webkit-transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
}
.a-core-form-field-checkbox__input:checked
  ~ .a-core-form-field-checkbox__label:before {
  border-color: #1b66b3;
}
.a-core-form-field-checkbox__input:checked
  ~ .a-core-form-field-checkbox__label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.m-core-form-group.is-invalid .a-core-form-field-checkbox__label:before {
  border-color: #e2251a;
}
.a-core-form-field-checkbox__input:hover
  ~ .a-core-form-field-checkbox__label:before {
  border-color: #1b66b3;
}
.a-core-form-field-checkbox__input:focus
  ~ .a-core-form-field-checkbox__label:before {
  border-color: #1b66b3;
  box-shadow: 0 0 2px 0 #1b66b3;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:form-field-label
 */
.a-core-form-field-label {
  display: block;
  font-family: "EdekaText";
  font-size: 18px;
  line-height: 18px;
}
.a-core-form-field-label:not(.is-required):after {
  font-family: "EdekaText";
  font-size: 12px;
  line-height: 16px;
  content: " (optional)";
  vertical-align: middle;
}
.m-core-form-group.is-disabled .a-core-form-field-label {
  opacity: 0.25;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:form-field-text
 */
.a-core-form-field-text {
  position: relative;
}
.a-core-form-field-text__field {
  display: block;
  border: 2px solid;
  border-color: #6696c7;
  color: inherit;
  padding: 13px 16px 13px 16px;
  width: 100%;
  height: 44px;
  line-height: 1em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.a-core-form-field-text__field:not(.is-disabled):focus,
.a-core-form-field-text__field:not(.is-disabled):hover {
  border-color: #1b66b3 !important;
}
.a-core-form-field-text__field:not(.is-disabled):focus {
  box-shadow: 0 0 2px 0 #1b66b3;
  color: inherit !important;
}
.m-core-form-group.is-invalid .a-core-form-field-text__field {
  border-color: #e2251a;
  color: #e2251a;
}
.m-core-form-group.is-valid .a-core-form-field-text__field {
  border-color: #1b66b3;
}
.m-core-form-group.is-disabled .a-core-form-field-text__field {
  opacity: 0.25;
}
.a-core-form-field-text.is-textarea .a-core-form-field-text__field {
  line-height: 1.5em;
  height: 200px;
  resize: none;
}
.a-core-form-field-text__field:-webkit-input-placeholder,
.a-core-form-field-text__field:-moz-placeholder,
.a-core-form-field-text__field:-ms-input-placeholder,
.a-core-form-field-text__field:-moz-placeholder {
  color: #999999;
}
.a-core-form-field-text:not(.is-textarea):after {
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -6px;
  display: block;
  content: "";
  width: 16px;
  height: 12px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2212%22%3E%3Cpolygon%20fill%3D%22%23404245%22%20points%3D%221.41%204.99%200%206.39%205.75%2012%2016%201.36%2014.54%200%205.71%209.17%201.41%204.99%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    -webkit-transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    -webkit-transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
}
.m-core-form-group.is-valid .a-core-form-field-text:not(.is-textarea):after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:form-field-message
 */
.a-core-form-field-message {
  font-family: "EdekaText";
  font-size: 12px;
  line-height: 16px;
  color: #999999;
}
.m-core-form-group.is-invalid .a-core-form-field-message {
  color: #e2251a;
}
.m-core-form-group.is-disabled .a-core-form-field-message {
  opacity: 0.25;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:form-field-counter
 */
.a-core-form-field-counter {
  font-family: "EdekaText";
  font-size: 12px;
  line-height: 16px;
  color: #999999;
}
.m-core-form-group.is-disabled .a-core-form-field-counter {
  opacity: 0.25;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:form-field-radio
 */
.a-core-form-field-radio {
  position: relative;
  min-height: 32px;
}
.a-core-form-field-radio input {
  position: absolute;
  opacity: 0;
}
.a-core-form-field-radio__label {
  display: block;
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 20px;
  padding-left: 42px;
  position: relative;
  padding-top: 6px;
}
.a-core-form-field-radio__label a {
  color: #1b66b3;
}
.a-core-form-field-radio__label a:hover {
  text-decoration: underline;
  color: #1d5ea3;
}
.a-core-form-field-radio__label:before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid #6696c7;
  display: block;
  border-radius: 50%;
  transition: border-color 250ms ease-in-out;
  top: 0;
  left: 0;
}
.m-core-form-group.is-invalid .a-core-form-field-radio__label:before {
  border-color: #e2251a;
}
.m-core-form-group.is-invalid
  .a-core-form-field-radio__label:before__label:before {
  border-color: #e2251a;
}
.a-core-form-field-radio__label:after {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #404245;
  -webkit-transform: scale(0);
  transform: scale(0);
  display: block;
  top: 10px;
  left: 10px;
}
.a-core-form-field-radio input:checked ~ label:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: -webkit-transform 250ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  transition: transform 250ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  transition: transform 250ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    -webkit-transform 250ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
}
.a-core-form-field-radio input:checked ~ label:before {
  border-color: #1b66b3;
}
.a-core-form-field-radio input:hover ~ label:before {
  border-color: #1b66b3;
}
.a-core-form-field-radio input:focus ~ label:before {
  border-color: #1b66b3;
  box-shadow: 0 0 2px 0 #1b66b3;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:form-field-dropdown
 */
.a-core-form-field-dropdown {
  position: relative;
}
.a-core-form-field-dropdown .a-core-icon {
  position: absolute;
  right: 0;
  top: 5px;
  color: #6696c7;
}
.m-core-form-group.is-valid .a-core-form-field-dropdown .a-core-icon {
  color: #1b66b3;
}
.a-core-form-field-dropdown__header {
  cursor: pointer;
  height: 44px;
  padding: 13px 16px 13px 16px;
  position: relative;
  border: 2px solid #6696c7;
}
.m-core-form-group.is-valid .a-core-form-field-dropdown__header {
  border-color: #1b66b3;
}
.a-core-form-field-dropdown__header:before {
  content: attr(data-text);
  line-height: 1em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  display: block;
}
.a-core-form-field-dropdown select {
  position: absolute;
  cursor: pointer;
  height: 44px;
  width: 100%;
  top: 0;
  left: 0;
  outline: none;
  opacity: 0;
  z-index: 10;
}
.a-core-form-field-dropdown select:focus {
  outline: none;
}
.a-core-form-field-dropdown select:hover ~ .a-core-form-field-dropdown__header {
  border-color: #1b66b3;
}
.a-core-form-field-dropdown select:focus ~ .a-core-form-field-dropdown__header {
  border-color: #1b66b3;
  box-shadow: 0 0 2px 0 #1b66b3;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:scroll-to-top
 */
.a-core-scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  z-index: 1000;
}
.a-core-scroll-to-top.is-show {
  -webkit-transform: none;
  transform: none;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:icon-copy
 */
.a-core-icon-copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.a-core-icon-copy > .a-core-icon,
.a-core-icon-copy > .a-core-copy,
.m-core-richtext .a-core-icon-copy > p,
.m-core-richtext ul .a-core-icon-copy > li,
.m-core-richtext ol .a-core-icon-copy > li {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}
.a-core-icon-copy > .a-core-icon {
  margin-right: 8px;
}
.a-core-icon-copy.has-context-color-dark {
  color: #ffffff;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:rectangle-badge
 */
.a-core-rectangle-badge {
  background: rgba(153, 153, 153, 0.3);
  margin-left: 8px;
  padding: 7px;
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
}
.a-core-rectangle-badge.has-context-color-dark {
  color: #ffffff;
}
.a-core-rectangle-badge > span {
  white-space: nowrap;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:nav-link
 */
.a-core-nav-link {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 14px;
  position: relative;
  text-transform: none;
  display: inline-block;
  max-width: 100%;
  transition: color 250ms ease-in-out;
}
.a-core-nav-link:hover {
  color: #1b66b3;
}
html.touchevents .a-core-nav-link:hover {
  color: inherit;
}
.a-core-nav-link.has-context-color-dark {
  color: #ffffff;
}
.a-core-nav-link.has-context-color-dark:hover {
  color: #fce531;
}
html.touchevents .a-core-nav-link.has-context-color-dark:hover {
  color: inherit;
}
.a-core-nav-link > .a-core-icon {
  position: absolute;
  top: 0;
}
.a-core-nav-link.has-icon-left {
  padding-left: 32px;
}
.a-core-nav-link.has-icon-left > .a-core-icon {
  left: 0;
}
.a-core-nav-link.has-icon-right {
  padding-right: 32px;
}
.a-core-nav-link.has-icon-right > .a-core-icon {
  right: 0;
}
.a-core-nav-link {
  padding-top: 9px;
  padding-bottom: 9px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:prg
 */
.a-core-prg__link {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.a-core-prg__form {
  display: none;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:navigation-content-separator
 */
.a-core-navigation-content-separator {
  display: none;
  position: relative;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:atom:navigation-content-image
 */
.a-core-navigation-content-image {
  position: relative;
  overflow: hidden;
  min-height: 175px;
  margin-bottom: 15px;
}
.a-core-navigation-content-image > .a-core-image {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.a-core-navigation-content-image__headline {
  padding: 15px 0;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:expander
 */
.m-core-expander__switch {
  position: absolute;
  bottom: 0;
  opacity: 0;
  display: none;
}

.m-core-expander__expand,
.m-core-expander__collapse {
  padding-top: 16px;
  border-top: 1px solid #eaeaea;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.has-background-medium .m-core-expander__expand,
.has-background-medium .m-core-expander__collapse {
  border-top: 1px solid #999999;
}

.m-core-expander__expand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.m-core-expander__collapse {
  display: none;
}

.m-core-expander__switch:checked ~ .m-core-expander__expand {
  display: none;
}

.m-core-expander__switch:checked ~ .m-core-expander__collapse {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.m-core-expander.is-disabled .m-core-expander__expand,
.m-core-expander.is-disabled .m-core-expander__collapse {
  display: none;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:section-title
 */
.m-core-section-title {
  margin-top: 32px;
  margin-bottom: 32px;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m102-teaser-slider
 */
.m-core-m102-teaser-slider {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.m-core-m102-teaser-slider__container {
  width: 100%;
  max-width: 100%;
}
.m-core-m102-teaser-slider__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.m-core-m102-teaser-slider__slide {
  opacity: 0.25;
  transition: opacity 250ms ease-in-out;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}
.m-core-m102-teaser-slider__slide.is-active {
  opacity: 1;
}
.m-core-m102-teaser-slider__slide.has-size-s {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 75%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-m102-teaser-slider__slide.has-size-m {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 87.5%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-m102-teaser-slider__slide.has-size-xl {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-m102-teaser-slider__offset-before {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 0%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-m102-teaser-slider__offset-after {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 25%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-m102-teaser-slider__offset-before,
.m-core-m102-teaser-slider__offset-after {
  position: absolute;
  padding-left: 0;
  padding-right: 0;
}
.m-core-m102-teaser-slider__prev-button,
.m-core-m102-teaser-slider__next-button {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -32px;
  cursor: pointer;
  display: none;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.m-core-m102-teaser-slider__container.has-swiper-horizontal
  .m-core-m102-teaser-slider__prev-button,
.m-core-m102-teaser-slider__container.has-swiper-horizontal
  .m-core-m102-teaser-slider__next-button {
  display: block;
  opacity: 1;
}
html.touchevents
  .m-core-m102-teaser-slider__container.has-swiper-horizontal
  .m-core-m102-teaser-slider__prev-button,
html.touchevents
  .m-core-m102-teaser-slider__container.has-swiper-horizontal
  .m-core-m102-teaser-slider__next-button {
  display: none;
}
.m-core-m102-teaser-slider__container.has-swiper-horizontal
  .m-core-m102-teaser-slider__prev-button.is-disabled,
.m-core-m102-teaser-slider__container.has-swiper-horizontal
  .m-core-m102-teaser-slider__next-button.is-disabled {
  opacity: 0;
}
.m-core-m102-teaser-slider__prev-button svg,
.m-core-m102-teaser-slider__next-button svg {
  height: 64px;
  width: 64px;
}
.m-core-m102-teaser-slider__prev-button {
  left: 0;
  right: auto;
}
.m-core-m102-teaser-slider__prev-button .a-core-icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m104-single-offer-teaser
 */
.m-core-m104-single-offer-teaser {
  position: relative;
  padding-bottom: 5px;
}
.m-core-m104-single-offer-teaser:before {
  pointer-events: none;
  content: "";
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5px;
  border-style: solid solid none solid;
  border-width: 1px;
  border-color: #eaeaea;
}

.m-core-m104-single-offer-teaser__header,
.m-core-m104-single-offer-teaser__footer {
  background-color: #ffffff;
}

.m-core-m104-single-offer-teaser__header {
  position: relative;
}
.m-core-m104-single-offer-teaser__header:before {
  display: block;
  content: "";
  padding-top: 100%;
}

.m-core-m104-single-offer-teaser__content-wrapper {
  overflow: hidden;
  padding-top: calc(100% + 50px);
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 107px;
  transition-property: padding-top, background-color;
  transition-duration: 500ms, 300ms;
  transition-delay: 0ms, 200ms;
  transition-timing-function: ease-in-out, ease-in-out;
}
.m-core-m104-single-offer-teaser__content-wrapper:after {
  content: "";
  display: none;
  width: 100%;
  height: 35px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 100%
  );
  transition: opacity 300ms ease-in-out;
}

.m-core-m104-single-offer-teaser.is-expandable
  .m-core-m104-single-offer-teaser__content-wrapper:after {
  display: block;
}

.m-core-m104-single-offer-teaser.is-expanded
  .m-core-m104-single-offer-teaser__content-wrapper {
  transition-delay: 100ms, 0ms;
  padding-top: 0;
  background-color: #ffffff;
}
.m-core-m104-single-offer-teaser.is-expanded
  .m-core-m104-single-offer-teaser__content-wrapper:after {
  opacity: 0;
}

.m-core-m104-single-offer-teaser__content {
  padding-top: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-m104-single-offer-teaser__content > .a-core-headline,
.m-core-richtext .m-core-m104-single-offer-teaser__content > h1,
.m-core-richtext .m-core-m104-single-offer-teaser__content > h2,
.m-core-richtext .m-core-m104-single-offer-teaser__content > h3,
.m-core-richtext .m-core-m104-single-offer-teaser__content > h4,
.m-core-richtext .m-core-m104-single-offer-teaser__content > h5 {
  margin-bottom: 4px;
}
.m-core-m104-single-offer-teaser__content > .a-core-copy,
.m-core-richtext .m-core-m104-single-offer-teaser__content > p,
.m-core-richtext ul .m-core-m104-single-offer-teaser__content > li,
.m-core-richtext ol .m-core-m104-single-offer-teaser__content > li {
  color: #999999;
}
.m-core-m104-single-offer-teaser__content:not(
    .has-enforced-default-headline-size
  )
  > .a-core-headline.is-fragment-static,
.m-core-richtext
  .m-core-m104-single-offer-teaser__content:not(
    .has-enforced-default-headline-size
  )
  > h1.is-fragment-static,
.m-core-richtext
  .m-core-m104-single-offer-teaser__content:not(
    .has-enforced-default-headline-size
  )
  > h2.is-fragment-static,
.m-core-richtext
  .m-core-m104-single-offer-teaser__content:not(
    .has-enforced-default-headline-size
  )
  > h3.is-fragment-static,
.m-core-richtext
  .m-core-m104-single-offer-teaser__content:not(
    .has-enforced-default-headline-size
  )
  > h4.is-fragment-static,
.m-core-richtext
  .m-core-m104-single-offer-teaser__content:not(
    .has-enforced-default-headline-size
  )
  > h5.is-fragment-static {
  font-family: "EdekaText";
  font-size: 24px;
  line-height: 24px;
}
.m-core-m104-single-offer-teaser__content:not(.has-enforced-default-copy-size)
  > .a-core-copy.is-extra-small,
.m-core-richtext
  .m-core-m104-single-offer-teaser__content:not(.has-enforced-default-copy-size)
  > p.is-extra-small,
.m-core-richtext
  ul
  .m-core-m104-single-offer-teaser__content:not(.has-enforced-default-copy-size)
  > li.is-extra-small,
.m-core-richtext
  ol
  .m-core-m104-single-offer-teaser__content:not(.has-enforced-default-copy-size)
  > li.is-extra-small {
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 20px;
}

.m-core-m104-single-offer-teaser__footer {
  position: relative;
  z-index: 1;
  height: 330px;
}

.m-core-m104-single-offer-teaser__image-wrapper {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  width: auto;
  height: auto;
  overflow: hidden;
}
.m-core-m104-single-offer-teaser__image-wrapper > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.m-core-m104-single-offer-teaser__image-wrapper > .a-core-image.is-visible {
  opacity: 1;
}

.m-core-m104-single-offer-teaser.has-image-portrait
  .m-core-m104-single-offer-teaser__image-wrapper
  > .a-core-image {
  width: auto;
  height: 100%;
}

.m-core-m104-single-offer-teaser__header > .a-core-offer-discount-badge {
  position: absolute;
  left: 8px;
  top: 0;
}

.m-core-m104-single-offer-teaser__header > .a-core-offer-incentive-badge {
  position: absolute;
  right: 8px;
  top: 8px;
}

.m-core-m104-single-offer-teaser__header > .a-core-offer-product-badges {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
}

.m-core-m104-single-offer-teaser__price,
.m-core-m104-single-offer-teaser__actions {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

.m-core-m104-single-offer-teaser__price {
  top: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 60px;
}

.m-core-m104-single-offer-teaser__expand-button {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 22px;
  padding: 0;
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 80px;
  color: #1b66b3;
  transition: color 250ms ease-in-out;
  display: none;
}
.m-core-m104-single-offer-teaser__expand-button:after {
  display: block;
  content: "";
}
.m-core-m104-single-offer-teaser__expand-button:after,
.m-core-m104-single-offer-teaser__expand-button > .a-core-icon {
  position: absolute;
  top: 50%;
}
.m-core-m104-single-offer-teaser__expand-button:after,
.m-core-m104-single-offer-teaser__expand-button > .a-core-icon {
  left: 50%;
}
.m-core-m104-single-offer-teaser__expand-button:after {
  width: 20px;
  height: 20px;
  margin-top: -11px;
  margin-left: -11px;
  border: 1px solid #eaeaea;
  border-radius: 50%;
  background-color: #ffffff;
}
.m-core-m104-single-offer-teaser__expand-button > .a-core-icon {
  z-index: 1;
  width: 26px;
  height: 26px;
  margin-top: -14px;
  margin-left: -13px;
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
}
.m-core-m104-single-offer-teaser__expand-button:hover {
  color: #343638;
}

.m-core-m104-single-offer-teaser.is-expandable
  .m-core-m104-single-offer-teaser__expand-button {
  display: block;
}

.m-core-m104-single-offer-teaser.is-expanded
  .m-core-m104-single-offer-teaser__expand-button
  > .a-core-icon {
  -webkit-transform: rotate(180deg) translateY(-2px);
  transform: rotate(180deg) translateY(-2px);
}

.m-core-m104-single-offer-teaser__actions {
  z-index: 1;
  bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  height: 90px;
  padding-top: 8px;
}
.m-core-m104-single-offer-teaser__actions:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  width: auto;
  height: 1px;
  background-color: #eaeaea;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m108-offer-recipe-teaser
 */
.m-core-m108-offer-recipe-teaser {
  cursor: pointer;
  position: relative;
  padding-bottom: 5px;
}
.m-core-m108-offer-recipe-teaser:before {
  pointer-events: none;
  content: "";
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5px;
  border-style: solid solid none solid;
  border-width: 1px;
  border-color: #eaeaea;
}

.m-core-m108-offer-recipe-teaser__header,
.m-core-m108-offer-recipe-teaser__content {
  background-color: #ffffff;
}

.m-core-m108-offer-recipe-teaser__header {
  position: relative;
}
.m-core-m108-offer-recipe-teaser__header:before {
  display: block;
  content: "";
  padding-top: 100%;
}

.m-core-m108-offer-recipe-teaser__content {
  height: 330px;
  padding: 8px;
}
.m-core-m108-offer-recipe-teaser__content > .m-core-title-with-icon {
  margin-bottom: 8px;
}
.m-core-m108-offer-recipe-teaser__content > .a-core-copy,
.m-core-richtext .m-core-m108-offer-recipe-teaser__content > p,
.m-core-richtext ul .m-core-m108-offer-recipe-teaser__content > li,
.m-core-richtext ol .m-core-m108-offer-recipe-teaser__content > li {
  color: #999999;
}

.m-core-m108-offer-recipe-teaser__footer {
  position: absolute;
  bottom: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 0 16px 43px 16px;
}

.m-core-m108-offer-recipe-teaser__image-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: hidden;
}
.m-core-m108-offer-recipe-teaser__image-wrapper > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.m-core-m108-offer-recipe-teaser.has-dimmed-image
  .m-core-m108-offer-recipe-teaser__image-wrapper:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  background-color: rgba(0, 0, 0, 0.2);
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:richtext
 */
.m-core-richtext.has-context-color-dark {
  color: #ffffff;
}
.m-core-richtext.has-context-color-dark a,
.m-core-richtext.has-context-color-dark a:hover,
.m-core-richtext.has-context-color-dark a:active {
  color: #fce531;
}

.m-core-richtext hr {
  height: 1px;
  background: #999999;
  border: 0;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:title-with-icon
 */
.m-core-title-with-icon {
  text-align: center;
  border-bottom: 1px solid #eaeaea;
}
.m-core-title-with-icon.has-context-bright {
  color: #404245;
  border-color: #eaeaea;
}
.m-core-title-with-icon.has-context-medium {
  color: #404245;
  border-color: #999999;
}
.m-core-title-with-icon.has-context-dark {
  color: #ffffff;
  border-color: #999999;
}
.m-core-title-with-icon__icon > .a-core-icon {
  width: 48px;
  height: 48px;
}
.m-core-title-with-icon.has-size-s
  .m-core-title-with-icon__content
  > .a-core-headline,
.m-core-title-with-icon.has-size-s
  .m-core-richtext
  .m-core-title-with-icon__content
  > h1,
.m-core-richtext
  .m-core-title-with-icon.has-size-s
  .m-core-title-with-icon__content
  > h1,
.m-core-title-with-icon.has-size-s
  .m-core-richtext
  .m-core-title-with-icon__content
  > h2,
.m-core-richtext
  .m-core-title-with-icon.has-size-s
  .m-core-title-with-icon__content
  > h2,
.m-core-title-with-icon.has-size-s
  .m-core-richtext
  .m-core-title-with-icon__content
  > h3,
.m-core-richtext
  .m-core-title-with-icon.has-size-s
  .m-core-title-with-icon__content
  > h3,
.m-core-title-with-icon.has-size-s
  .m-core-richtext
  .m-core-title-with-icon__content
  > h4,
.m-core-richtext
  .m-core-title-with-icon.has-size-s
  .m-core-title-with-icon__content
  > h4,
.m-core-title-with-icon.has-size-s
  .m-core-richtext
  .m-core-title-with-icon__content
  > h5,
.m-core-richtext
  .m-core-title-with-icon.has-size-s
  .m-core-title-with-icon__content
  > h5 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.m-core-title-with-icon.has-size-m
  .m-core-title-with-icon__content
  > .a-core-headline,
.m-core-title-with-icon.has-size-m
  .m-core-richtext
  .m-core-title-with-icon__content
  > h1,
.m-core-richtext
  .m-core-title-with-icon.has-size-m
  .m-core-title-with-icon__content
  > h1,
.m-core-title-with-icon.has-size-m
  .m-core-richtext
  .m-core-title-with-icon__content
  > h2,
.m-core-richtext
  .m-core-title-with-icon.has-size-m
  .m-core-title-with-icon__content
  > h2,
.m-core-title-with-icon.has-size-m
  .m-core-richtext
  .m-core-title-with-icon__content
  > h3,
.m-core-richtext
  .m-core-title-with-icon.has-size-m
  .m-core-title-with-icon__content
  > h3,
.m-core-title-with-icon.has-size-m
  .m-core-richtext
  .m-core-title-with-icon__content
  > h4,
.m-core-richtext
  .m-core-title-with-icon.has-size-m
  .m-core-title-with-icon__content
  > h4,
.m-core-title-with-icon.has-size-m
  .m-core-richtext
  .m-core-title-with-icon__content
  > h5,
.m-core-richtext
  .m-core-title-with-icon.has-size-m
  .m-core-title-with-icon__content
  > h5 {
  margin-top: 4px;
  margin-bottom: 16px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m309-video-player
 */
.m-core-m309-video-player {
  position: relative;
  padding-bottom: 56.25%;
}
.m-core-m309-video-player__player,
.m-core-m309-video-player__poster,
.m-core-m309-video-player__end-card {
  position: absolute;
}
.m-core-m309-video-player__player,
.m-core-m309-video-player__poster {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.m-core-m309-video-player__poster > .a-core-image {
  display: block;
  width: 100%;
  height: 100%;
}
.m-core-m309-video-player__end-card {
  display: none;
  left: 0;
  top: 0;
  bottom: 50px;
  width: 100%;
  height: auto;
}
.m-core-m309-video-player__play-button {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.m-core-m309-video-player__play-button > .a-core-circular-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.m-core-m309-video-player.has-reached-end-card
  > .m-core-m309-video-player__end-card {
  display: block;
}
.m-core-m309-video-player.is-playing > .m-core-m309-video-player__poster,
.m-core-m309-video-player.has-reached-end-card
  > .m-core-m309-video-player__poster {
  display: none;
}
.m-core-m309-video-player.is-ready .m-core-m309-video-player__play-button {
  display: block;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:media-description
 */
.m-core-media-description {
  margin-top: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:cta-bar
 */
.m-core-cta-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.m-core-cta-bar.is-reversed {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.m-core-cta-bar__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.m-core-cta-bar:not(.is-reversed) .m-core-cta-bar__list:first-child {
  margin-top: 8px;
}
.m-core-cta-bar.is-reversed .m-core-cta-bar__list:last-child {
  margin-top: 16px;
}
.m-core-cta-bar__item {
  margin-right: 8px;
  margin-bottom: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m203-headline-intro
 */
.m-core-m203-headline-intro {
  position: relative;
  padding-top: 24px;
  padding-bottom: 48px;
}
.m-core-m203-headline-intro__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.m-core-m203-headline-intro__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.m-core-m203-headline-intro__wrapper {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-m203-headline-intro__headline {
  font-family: "EdekaText";
  font-size: 32px;
  line-height: 32px;
  margin-bottom: 8px;
}
.m-core-m203-headline-intro__action {
  float: right;
  margin-left: 24px;
  margin-bottom: 24px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m319-sharing
 */
.m-core-m319-sharing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: -16px;
}
.m-core-m319-sharing__item {
  padding: 0 12px;
}
.o-recipes-m320-recipes-toolbar .m-core-m319-sharing__item {
  opacity: 0;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
}
.m-core-m319-sharing__item:nth-last-child(n + 5),
.m-core-m319-sharing__item:nth-last-child(n + 5) ~ .m-core-m319-sharing__item {
  padding-bottom: 16px;
}
html.no-touchevents .m-core-m319-sharing__item.is-whatsapp,
html.no-touchevents .m-core-m319-sharing__item.is-facebook-messenger {
  display: none;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item {
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    -webkit-transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  transition: opacity 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67),
    -webkit-transform 400ms cubic-bezier(0.4, 0.92, 0.38, 1.67);
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(1) {
  transition-delay: 60ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(2) {
  transition-delay: 120ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(3) {
  transition-delay: 180ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(4) {
  transition-delay: 240ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(5) {
  transition-delay: 300ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(6) {
  transition-delay: 360ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(7) {
  transition-delay: 420ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(8) {
  transition-delay: 480ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(9) {
  transition-delay: 540ms;
}
.o-recipes-m320-recipes-toolbar
  .is-visible-in-toolbar
  .m-core-m319-sharing__item:nth-child(10) {
  transition-delay: 600ms;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m110-recipe-teaser
 */
.m-core-m110-recipe-teaser {
  cursor: pointer;
  position: relative;
  padding-bottom: 5px;
}
.m-core-m110-recipe-teaser:before {
  content: "";
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5px;
  border-style: solid solid none solid;
  border-width: 1px;
  border-color: #eaeaea;
}

.m-core-m110-recipe-teaser__image-wrapper {
  position: relative;
  overflow: hidden;
}
.m-core-m110-recipe-teaser__image-wrapper:before {
  display: block;
  content: "";
}
.m-core-m110-recipe-teaser__image-wrapper > .a-core-image {
  display: block;
}
.m-core-m110-recipe-teaser__image-wrapper.has-lazy-loading > .a-core-image {
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.m-core-m110-recipe-teaser__image-wrapper.has-lazy-loading
  > .a-core-image.is-loaded {
  opacity: 1;
}
.m-core-m110-recipe-teaser__image-wrapper > .a-core-image,
.m-core-m110-recipe-teaser__image-wrapper > .a-core-circular-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.m-core-m110-recipe-teaser__preview-wrapper {
  display: block;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.m-core-m110-recipe-teaser__preview-wrapper:before {
  display: block;
  content: "";
  padding-bottom: 56.25%;
}

.m-core-m110-recipe-teaser__preview-player {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.m-core-m110-recipe-teaser.is-playing-preview
  .m-core-m110-recipe-teaser__preview-player {
  visibility: visible;
}

.m-core-m110-recipe-teaser__content-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 8px;
  background-color: #ffffff;
}

.m-core-m110-recipe-teaser__cta {
  position: relative;
  z-index: 3;
}

.m-core-m110-recipe-teaser__meta-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.m-core-m110-recipe-teaser__meta-item {
  width: 70px;
}

.m-core-m110-recipe-teaser > .m-core-m317-save-recipe {
  position: absolute;
  z-index: 3;
  right: 4px;
  top: 4px;
}

.m-core-m110-recipe-teaser.has-size-s
  .m-core-m110-recipe-teaser__image-wrapper:before {
  padding-bottom: 100%;
}

.m-core-m110-recipe-teaser.has-size-s
  .m-core-m110-recipe-teaser__image-wrapper
  > .a-core-image {
  width: 100%;
  height: auto;
}

.m-core-m110-recipe-teaser.has-size-s
  .m-core-m110-recipe-teaser__preview-wrapper {
  width: calc(177.77778%);
}

.m-core-m110-recipe-teaser.has-size-s
  .m-core-m110-recipe-teaser__content-wrapper {
  height: 120px;
}

.m-core-m110-recipe-teaser.has-size-s .m-core-m110-recipe-teaser__meta-list {
  width: 100%;
}

.m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__image-wrapper:before {
  padding-bottom: 100%;
}

.m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__image-wrapper
  > .a-core-image {
  width: auto;
  height: 100%;
}

.m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__preview-wrapper {
  width: calc(177.77778%);
}

.m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__content-wrapper {
  height: 120px;
}

.m-core-m110-recipe-teaser.has-size-m .m-core-m110-recipe-teaser__meta-list {
  width: 100%;
}

.is-shrinked
  .m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__image-wrapper:before {
  padding-bottom: 100%;
}

.is-shrinked
  .m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__image-wrapper
  > .a-core-image {
  width: auto;
  height: 100%;
}

.is-shrinked
  .m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__preview-wrapper {
  width: calc(177.77778%);
}

.is-shrinked
  .m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__content-wrapper {
  height: 120px;
}

.is-shrinked
  .m-core-m110-recipe-teaser.has-size-m
  .m-core-m110-recipe-teaser__meta-list {
  width: 100%;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m106-additional-content-teaser
 */
.m-core-m106-additional-content-teaser {
  cursor: pointer;
  position: relative;
  padding-bottom: 5px;
}
.m-core-m106-additional-content-teaser:before {
  content: "";
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5px;
  border-style: solid solid none solid;
  border-width: 1px;
  border-color: #eaeaea;
}

.m-core-m106-additional-content-teaser__header,
.m-core-m106-additional-content-teaser__content {
  background-color: #ffffff;
}

.m-core-m106-additional-content-teaser__header {
  position: relative;
  overflow: hidden;
  background-color: #404245;
}
.m-core-m106-additional-content-teaser__header:before {
  display: block;
  content: "";
  padding-top: 100%;
}
.m-core-m106-additional-content-teaser__header > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.m-core-m106-additional-content-teaser.has-dimmed-image
  .m-core-m106-additional-content-teaser__header:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  background-color: rgba(0, 0, 0, 0.2);
}

.m-core-m106-additional-content-teaser__content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-m106-additional-content-teaser__content > .a-core-icon-button {
  margin-top: 8px;
}

.m-core-m106-additional-content-teaser__icon {
  position: absolute;
  left: 50%;
  top: 0;
  margin: -40px 0 0 -40px;
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 50%;
}
.m-core-m106-additional-content-teaser__icon:before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background-color: #1b66b3;
}
.m-core-m106-additional-content-teaser__icon > .a-core-icon {
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -16px 0 0 -16px;
  fill: #ffffff;
}

.m-core-m106-additional-content-teaser.has-context-recipes
  .m-core-m106-additional-content-teaser__icon:before {
  fill: #ffffff;
}

.m-core-m106-additional-content-teaser.has-context-recipes
  .m-core-m106-additional-content-teaser__icon:before {
  background-color: #1b66b3;
}

.m-core-m106-additional-content-teaser.has-context-recipes
  .m-core-m106-additional-content-teaser__content {
  height: 120px;
}

.m-core-m106-additional-content-teaser.has-context-offers
  .m-core-m106-additional-content-teaser__icon:before {
  fill: #ffffff;
}

.m-core-m106-additional-content-teaser.has-context-offers
  .m-core-m106-additional-content-teaser__icon:before {
  background-color: #e2251a;
}

.m-core-m106-additional-content-teaser.has-context-offers
  .m-core-m106-additional-content-teaser__content {
  height: 330px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
@-webkit-keyframes ANIMATE_SAVE_RECIPE_ICON {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes ANIMATE_SAVE_RECIPE_ICON {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
 * Module global:core:molecule:m317-save-recipe
 */
.m-core-m317-save-recipe {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 16px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: visible;
}
.m-core-m317-save-recipe__label {
  display: block;
  margin-top: 4px;
  text-transform: uppercase;
}
.m-core-m317-save-recipe.has-animated-icon .a-core-icon {
  -webkit-animation-name: ANIMATE_SAVE_RECIPE_ICON;
  animation-name: ANIMATE_SAVE_RECIPE_ICON;
  -webkit-animation-duration: 350ms;
  animation-duration: 350ms;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.92, 0.38, 1.67);
  animation-timing-function: cubic-bezier(0.4, 0.92, 0.38, 1.67);
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m113-tag-teaser
 */
.m-core-m113-tag-teaser {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  cursor: pointer;
}

.m-core-m113-tag-teaser:before {
  display: block;
  content: "";
  padding-bottom: 100%;
}

.m-core-m113-tag-teaser__image-wrapper,
.m-core-m113-tag-teaser__link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.m-core-m113-tag-teaser__image-wrapper {
  padding: 4px;
}
.m-core-m113-tag-teaser__image-wrapper > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
}

.m-core-m113-tag-teaser.has-dimmed-image
  .m-core-m113-tag-teaser__image-wrapper:after {
  display: block;
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  width: auto;
  height: auto;
  background-color: rgba(0, 0, 0, 0.2);
}

.m-core-m113-tag-teaser__badge {
  position: absolute;
  right: 8px;
  top: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #1b66b3;
  color: white;
}

.m-core-m113-tag-teaser__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #ffffff;
  text-align: center;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:form
 */
/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:form-group
 */
.m-core-form-group > .a-core-form-field-label {
  margin-bottom: 4px;
}

.m-core-form-group__fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.m-core-form-group__fields.has-vertical-orientation {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.m-core-form-group__fields.has-horizontal-orientation {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.m-core-form-group__field {
  margin-bottom: 8px;
}
.m-core-form-group__fields.has-horizontal-orientation
  .m-core-form-group__field {
  padding-right: 20px;
  width: 50%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 1;
  flex: 0 0 1;
}

.m-core-form-group__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.m-core-form-group__footer > .a-core-form-field-counter {
  margin-left: 4px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:form-layout
 */
.m-core-form-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 16px;
}
.m-core-form-layout.has-spacing {
  margin-bottom: 48px;
}
.m-core-form-layout.has-separator {
  border-bottom: 1px solid #999999;
  padding-bottom: 32px;
  margin-bottom: 32px;
}
.m-core-form-layout > .m-core-form-group {
  width: 100%;
}
.m-core-form-layout.is-1-1 > .m-core-form-group {
  width: 50%;
}
.m-core-form-layout.is-3-1 > .m-core-form-group:first-child {
  width: 75%;
}
.m-core-form-layout.is-3-1 > .m-core-form-group:last-child {
  width: 25%;
}
.m-core-form-layout.is-1-3 > .m-core-form-group:first-child {
  width: 25%;
}
.m-core-form-layout.is-1-3 > .m-core-form-group:last-child {
  width: 75%;
}
.m-core-form-layout.is-1-1 > .m-core-form-group:first-child,
.m-core-form-layout.is-3-1 > .m-core-form-group:first-child,
.m-core-form-layout.is-1-3 > .m-core-form-group:first-child {
  padding-right: 10px;
  padding-left: 0 !important;
}
.m-core-form-layout.is-1-1 > .m-core-form-group:last-child,
.m-core-form-layout.is-3-1 > .m-core-form-group:last-child,
.m-core-form-layout.is-1-3 > .m-core-form-group:last-child {
  padding-left: 10px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:form-section
 */
.m-core-form-section {
  display: none;
}
.m-core-form-section.is-fields {
  display: block;
}
.m-core-form.show-success .m-core-form-section.is-fields {
  display: none;
}
.m-core-form.show-success .m-core-form-section.is-success {
  display: block;
}
.m-core-form.show-errors .m-core-form-section.is-fail {
  display: block;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:form-text
 */
.m-core-form-text {
  margin-bottom: 48px;
}
.m-core-form-text.has-separator {
  border-bottom: 1px solid #999999;
  padding-bottom: 32px;
  margin-bottom: 32px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:form-errors
 */
.m-core-form-errors {
  margin-bottom: 48px;
  color: #e2251a;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:form-buttons
 */
.m-core-form-buttons {
  margin-top: 32px;
}
.m-core-form-buttons__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.m-core-form-buttons__item {
  margin-right: 8px;
  margin-bottom: 8px;
  width: 100%;
}
.m-core-form-buttons__item > .a-core-button {
  width: 100%;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:form-buttons-login
 */
.m-core-form-buttons-login__element {
  margin-bottom: 16px;
  text-align: center;
}
.m-core-form-buttons-login__element > .a-core-button {
  width: 100%;
}

.m-core-form-buttons-login__separator {
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: center;
  display: table;
}
.m-core-form-buttons-login__separator:before,
.m-core-form-buttons-login__separator:after {
  content: " ";
  width: 1000px;
  display: table-cell;
  vertical-align: middle;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 48%,
    #999 50%,
    transparent 52%,
    transparent 100%
  );
}
.m-core-form-buttons-login__separator > span {
  display: table-cell;
  padding: 0 20px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:overlay-trigger
 */
.m-core-overlay-trigger {
  display: none;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m115-product-teaser
 */
.m-core-m115-product-teaser {
  position: relative;
  padding-bottom: 5px;
  cursor: pointer;
}
.m-core-m115-product-teaser:before {
  pointer-events: none;
  content: "";
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5px;
  border-style: solid solid none solid;
  border-width: 1px;
  border-color: #eaeaea;
}

.m-core-m115-product-teaser__header,
.m-core-m115-product-teaser__content,
.m-core-m115-product-teaser__footer {
  background-color: #ffffff;
}

.m-core-m115-product-teaser__header {
  position: relative;
}
.m-core-m115-product-teaser__header:before {
  display: block;
  content: "";
  padding-top: 100%;
}

.m-core-m115-product-teaser__content {
  height: 115px;
  padding: 8px;
}

.m-core-m115-product-teaser__image-wrapper {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  width: auto;
  height: auto;
  overflow: hidden;
}
.m-core-m115-product-teaser__image-wrapper > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.m-core-m115-product-teaser__image-wrapper > .a-core-image.is-visible {
  visibility: visible;
}

.m-core-m115-product-teaser.has-image-portrait
  .m-core-m115-product-teaser__image-wrapper
  > .a-core-image {
  width: auto;
  height: 100%;
}

.m-core-m115-product-teaser__footer {
  padding: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:navigation-content-nutrition
 */
.m-core-navigation-content-nutrition {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.m-core-navigation-content-nutrition
  .m-core-navigation-content-nutrition__go-back {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-navigation-content-nutrition
  .m-core-navigation-content-nutrition__container {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-navigation-content-nutrition
  .m-core-navigation-content-nutrition__container:not(:last-child) {
  padding-bottom: 20px;
}
.m-core-navigation-content-nutrition
  .m-core-navigation-content-nutrition__container:not(:first-child) {
  padding-top: 8px;
}
.m-core-navigation-content-nutrition
  .m-core-navigation-content-nutrition__container:not(:first-child):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #999999;
  display: none;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:navigation-content-recipes
 */
.m-core-navigation-content-recipes {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.m-core-navigation-content-recipes .m-core-navigation-content-recipes__go-back {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-navigation-content-recipes .m-core-navigation-content-recipes__image {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-navigation-content-recipes
  .m-core-navigation-content-recipes__image.has-headline
  .a-core-navigation-content-image__headline {
  display: block;
}
.m-core-navigation-content-recipes
  .m-core-navigation-content-recipes__magazine {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  margin-bottom: 16px;
}
.m-core-navigation-content-recipes
  .m-core-navigation-content-recipes__magazine
  .m-core-navigation-section__headline {
  display: none;
}
.m-core-navigation-content-recipes
  .m-core-navigation-content-recipes__search-cookbook {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-navigation-content-recipes
  .m-core-navigation-content-recipes__search-cookbook
  > .m-core-navigation-section:not(:last-child) {
  margin-bottom: 32px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:navigation-content-retailer-offers
 */
.m-core-navigation-content-retailer-offers {
  height: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.m-core-navigation-content-retailer-offers
  .m-core-navigation-content-retailer-offers__store {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-navigation-content-retailer-offers
  .m-core-navigation-content-retailer-offers__image {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-navigation-content-retailer-offers
  .m-core-navigation-content-retailer-offers__offers {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:navigation-section
 */
.m-core-navigation-section__headline,
.m-core-navigation-section__copy,
.m-core-navigation-section__buttons {
  margin-bottom: 16px;
}

.m-core-navigation-section__headline + .m-core-navigation-section__copy {
  margin-top: -4px;
}

.m-core-navigation-section__copy {
  display: none;
}

.m-core-navigation-section__buttons .a-core-button {
  width: 100%;
}

.m-core-navigation-section__link {
  margin-bottom: 4px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:navigation-section-store
 */
.m-core-navigation-section-store__headline,
.m-core-navigation-section-store__copy {
  margin-bottom: 16px;
}

.m-core-navigation-section-store__headline {
  display: none;
}
.m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__headline {
  display: block;
}
.m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__headline
  > .a-core-headline,
.m-core-navigation-section-store.has-store-info
  .m-core-richtext
  .m-core-navigation-section-store__headline
  > h1,
.m-core-richtext
  .m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__headline
  > h1,
.m-core-navigation-section-store.has-store-info
  .m-core-richtext
  .m-core-navigation-section-store__headline
  > h2,
.m-core-richtext
  .m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__headline
  > h2,
.m-core-navigation-section-store.has-store-info
  .m-core-richtext
  .m-core-navigation-section-store__headline
  > h3,
.m-core-richtext
  .m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__headline
  > h3,
.m-core-navigation-section-store.has-store-info
  .m-core-richtext
  .m-core-navigation-section-store__headline
  > h4,
.m-core-richtext
  .m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__headline
  > h4,
.m-core-navigation-section-store.has-store-info
  .m-core-richtext
  .m-core-navigation-section-store__headline
  > h5,
.m-core-richtext
  .m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__headline
  > h5 {
  line-height: 120%;
  display: inline;
}

.m-core-navigation-section-store__copy {
  display: none;
}
.m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__copy {
  display: none;
}

.m-core-navigation-section-store__change-store {
  margin-left: 16px;
  transition: color 250ms ease-in-out;
}
.m-core-navigation-section-store__change-store > .a-core-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: baseline;
}
.m-core-navigation-section-store__change-store:hover {
  color: #fce531 !important;
}

.m-core-navigation-section-store__store-information {
  position: relative;
  padding-top: 24px;
  padding-bottom: 8px;
  display: none;
}
.m-core-navigation-section-store.has-store-info
  .m-core-navigation-section-store__store-information {
  display: block;
}
.m-core-navigation-section-store__store-information:before {
  content: "";
  width: 200%;
  position: absolute;
  top: 0;
  left: -50%;
  height: 100%;
  z-index: -1;
  background: #343638;
}

.m-core-navigation-section-store__store-information-switch {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
  opacity: 0;
}
.m-core-navigation-section-store__store-information-switch:checked
  ~ .m-core-navigation-section-store__store-information-trigger
  .a-core-icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.m-core-navigation-section-store__store-information-switch:checked
  ~ .m-core-navigation-section-store__store-information-inner {
  max-height: 400px;
}

.m-core-navigation-section-store__store-information-trigger {
  position: absolute;
  top: 27px;
  right: 0;
  width: 100%;
  text-align: right;
}
.m-core-navigation-section-store__store-information-trigger .a-core-icon {
  transition: -webkit-transform 150ms ease-out;
  transition: transform 150ms ease-out;
  transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  color: white;
}
.m-core-navigation-section-store__store-information-trigger.m-core-navigation-section-store__store-information-trigger {
  position: absolute;
  padding-left: 0;
}
.m-core-navigation-section-store__store-information-trigger.m-core-navigation-section-store__store-information-trigger:before {
  display: none;
}

.m-core-navigation-section-store__store-information-inner {
  max-height: 50px;
  transition: max-height 250ms ease-in-out;
  overflow: hidden;
  padding-right: 35px;
}

.m-core-navigation-section-store__store-information-item {
  margin-bottom: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.m-core-navigation-section-store__store-information-item
  > .a-core-rectangle-badge {
  margin-left: 16px;
}
.m-core-navigation-section-store__store-information-item > .a-core-icon-copy {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.m-core-navigation-section-store__store-information-item
  .a-core-copy.has-context-color-dark
  a,
.m-core-navigation-section-store__store-information-item
  .m-core-richtext
  p.has-context-color-dark
  a,
.m-core-richtext
  .m-core-navigation-section-store__store-information-item
  p.has-context-color-dark
  a,
.m-core-navigation-section-store__store-information-item
  .m-core-richtext
  ul
  li.has-context-color-dark
  a,
.m-core-richtext
  ul
  .m-core-navigation-section-store__store-information-item
  li.has-context-color-dark
  a,
.m-core-navigation-section-store__store-information-item
  .m-core-richtext
  ol
  li.has-context-color-dark
  a,
.m-core-richtext
  ol
  .m-core-navigation-section-store__store-information-item
  li.has-context-color-dark
  a {
  color: #ffffff;
}
.m-core-navigation-section-store__store-information-item
  .a-core-copy.has-context-color-dark
  a:hover,
.m-core-navigation-section-store__store-information-item
  .m-core-richtext
  p.has-context-color-dark
  a:hover,
.m-core-richtext
  .m-core-navigation-section-store__store-information-item
  p.has-context-color-dark
  a:hover,
.m-core-navigation-section-store__store-information-item
  .m-core-richtext
  ul
  li.has-context-color-dark
  a:hover,
.m-core-richtext
  ul
  .m-core-navigation-section-store__store-information-item
  li.has-context-color-dark
  a:hover,
.m-core-navigation-section-store__store-information-item
  .m-core-richtext
  ol
  li.has-context-color-dark
  a:hover,
.m-core-richtext
  ol
  .m-core-navigation-section-store__store-information-item
  li.has-context-color-dark
  a:hover {
  color: #fce531;
  text-decoration: none;
}

.m-core-navigation-section-store__link {
  margin-bottom: 4px;
}

.m-core-navigation-section-store__buttons-mobile {
  margin-top: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.m-core-navigation-section-store__buttons-mobile > .a-core-button {
  width: 50%;
  padding-right: 10px;
  padding-left: 10px;
  min-width: 0;
}
.m-core-navigation-section-store__buttons-mobile > .a-core-button:first-child {
  margin-right: 16px;
}

.m-core-navigation-section-store__buttons {
  margin-top: 24px;
  display: none;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:navigation-section-wide
 */

.m-core-navigation-section-wide__headline {
  width: 100%;
}

.m-core-navigation-section-wide__headline {
  margin-bottom: 8px;
}

.m-core-navigation-section-wide__copy {
  margin-bottom: 16px;
}

.m-core-navigation-section-wide__copy {
  display: none;
}

.m-core-navigation-section-wide__buttons {
  margin-bottom: 16px;
}
.m-core-navigation-section-wide__buttons .a-core-button {
  width: 100%;
}

.m-core-navigation-section-wide__links.has-vertical-orientation {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.m-core-navigation-section-wide__links.has-horizontal-orientation {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.m-core-navigation-section-wide__links.has-horizontal-orientation
  .m-core-navigation-section-wide__link {
  width: 33%;
}

.m-core-navigation-section-wide__link {
  margin-bottom: 4px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:search-field
 */
.m-core-search-field {
  position: relative;
}
.m-core-search-field__input {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 24px;
  padding-left: 16px;
  padding-right: 50px;
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  letter-spacing: inherit;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: solid 2px #6696c7;
}
.m-core-search-field__input:hover,
.m-core-search-field__input:focus {
  border-color: #1b66b3;
}
.m-core-search-field__input:focus {
  box-shadow: 0 0 2px 0 #1b66b3;
}
.m-core-search-field__input::-webkit-input-placeholder {
  color: #999999;
}
.m-core-search-field__input:-ms-input-placeholder {
  color: #999999;
}
.m-core-search-field__input::placeholder {
  color: #999999;
}
.m-core-search-field__input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
.m-core-search-field__submit {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  padding: 0;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -16px;
  color: #1b66b3;
  transition: color 250ms ease-in-out;
}
.m-core-search-field__submit:hover {
  color: #1d5ea3;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:toggle-container
 */

.m-core-toggle-container__toggle {
  cursor: pointer;
  position: relative;
  padding-top: 8px;
  padding-bottom: 8px;
}
.m-core-toggle-container__toggle:not(:first-child) {
  border-top: 1px solid #999999;
}
.m-core-toggle-container__toggle > .a-core-icon-button > .a-core-icon {
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
}
.m-core-toggle-container__toggle.is-active
  > .a-core-icon-button
  > .a-core-icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.m-core-toggle-container__content {
  height: 0;
  overflow: hidden;
  transition: opacity 250ms 250ms ease-in-out;
  opacity: 0;
}
.m-core-toggle-container__content.is-active {
  height: auto;
  opacity: 1;
  padding-bottom: 16px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:molecule:m117-common-teaser
 */
.m-core-m117-common-teaser {
  cursor: pointer;
  position: relative;
  padding-bottom: 5px;
}
.m-core-m117-common-teaser:before {
  pointer-events: none;
  content: "";
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5px;
  border-style: solid solid none solid;
  border-width: 1px;
  border-color: #eaeaea;
}

.m-core-m117-common-teaser__header,
.m-core-m117-common-teaser__content {
  background-color: #ffffff;
}

.m-core-m117-common-teaser__header {
  position: relative;
}
.m-core-m117-common-teaser__header:before {
  display: block;
  content: "";
  padding-top: 100%;
}

.m-core-m117-common-teaser__content {
  height: 330px;
  padding: 8px;
}
.m-core-m117-common-teaser__content > .a-core-headline,
.m-core-richtext .m-core-m117-common-teaser__content > h1,
.m-core-richtext .m-core-m117-common-teaser__content > h2,
.m-core-richtext .m-core-m117-common-teaser__content > h3,
.m-core-richtext .m-core-m117-common-teaser__content > h4,
.m-core-richtext .m-core-m117-common-teaser__content > h5 {
  text-align: center;
  margin-top: 51px;
  padding-left: 10%;
  padding-right: 10%;
}
.m-core-m117-common-teaser__content > .a-core-headline.is-category,
.m-core-richtext .m-core-m117-common-teaser__content > h1.is-category,
.m-core-richtext .m-core-m117-common-teaser__content > h2.is-category,
.m-core-richtext .m-core-m117-common-teaser__content > h3,
.m-core-richtext .m-core-m117-common-teaser__content > h4.is-category,
.m-core-richtext .m-core-m117-common-teaser__content > h5.is-category {
  line-height: 120%;
}

.m-core-m117-common-teaser__footer {
  position: absolute;
  bottom: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 0 16px 43px 16px;
}

.m-core-m117-common-teaser__image-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: hidden;
}
.m-core-m117-common-teaser__image-wrapper > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m201-image-gallery
 */
.o-core-m201-image-gallery {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-core-m201-image-gallery.has-background-medium {
  background: #eaeaea;
}
.o-core-m201-image-gallery__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m201-image-gallery__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m201-image-gallery__header {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m201-image-gallery__slider-wrapper {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m201-image-gallery__slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
  position: relative;
}
.o-core-m201-image-gallery__slider-container {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m201-image-gallery__slide-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.o-core-m201-image-gallery__slide {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  height: auto;
  overflow: hidden;
  opacity: 0.25;
  transition: opacity 250ms ease-in-out;
}
.o-core-m201-image-gallery__slide:not(:last-of-type) {
  margin-right: 16px;
}
.o-core-m201-image-gallery__slide:before {
  display: block;
  content: "";
}
.o-core-m201-image-gallery__slide > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}
.o-core-m201-image-gallery__slide.is-active {
  opacity: 1;
}
.o-core-m201-image-gallery__slide.is-16x9 {
  width: 100%;
}
.o-core-m201-image-gallery__slide.is-16x9:before {
  padding-bottom: 56.25%;
}
.o-core-m201-image-gallery__slide.is-1x1 {
  width: 56.25%;
}
.o-core-m201-image-gallery__slide.is-1x1:before {
  padding-bottom: 100%;
}
.o-core-m201-image-gallery__slide.is-2x3 {
  width: 37.5%;
}
.o-core-m201-image-gallery__slide.is-2x3:before {
  padding-bottom: 150%;
}
.o-core-m201-image-gallery__prev-button,
.o-core-m201-image-gallery__next-button {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -32px;
  cursor: pointer;
  display: block;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
.o-core-m201-image-gallery__prev-button.is-disabled,
.o-core-m201-image-gallery__next-button.is-disabled {
  opacity: 0;
}
html.touchevents .o-core-m201-image-gallery__prev-button,
html.touchevents .o-core-m201-image-gallery__next-button {
  display: none;
}
.o-core-m201-image-gallery__prev-button svg,
.o-core-m201-image-gallery__next-button svg {
  height: 64px;
  width: 64px;
}
.o-core-m201-image-gallery__prev-button {
  left: 0;
  right: auto;
}
.o-core-m201-image-gallery__caption-list {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.o-core-m201-image-gallery__caption {
  width: 100%;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 0;
}
.o-core-m201-image-gallery__caption.is-active {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
  transition: opacity 250ms ease-in-out;
  opacity: 1;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m103-image-copy-button-teaser
 */
.o-core-m103-image-copy-button-teaser {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
  background: #343638 url("../../files/img/bg-dark.jpg") repeat 0 0;
  background-position: top left;
  background-repeat: repeat;
  background-size: 800px 800px;
  position: relative;
}
.o-core-m103-image-copy-button-teaser__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m103-image-copy-button-teaser__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m103-image-copy-button-teaser__image {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.o-core-m103-image-copy-button-teaser__image-wrapper {
  width: 100%;
  margin-bottom: 24px;
}
.o-core-m103-image-copy-button-teaser__image-wrapper > .a-core-image {
  width: 100%;
  height: auto;
}
.o-core-m103-image-copy-button-teaser__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m103-image-copy-button-teaser__content > .a-core-headline,
.m-core-richtext .o-core-m103-image-copy-button-teaser__content > h1,
.m-core-richtext .o-core-m103-image-copy-button-teaser__content > h2,
.m-core-richtext .o-core-m103-image-copy-button-teaser__content > h3,
.m-core-richtext .o-core-m103-image-copy-button-teaser__content > h4,
.m-core-richtext .o-core-m103-image-copy-button-teaser__content > h5,
.o-core-m103-image-copy-button-teaser__content > .a-core-copy,
.m-core-richtext .o-core-m103-image-copy-button-teaser__content > p,
.m-core-richtext ul .o-core-m103-image-copy-button-teaser__content > li,
.m-core-richtext ol .o-core-m103-image-copy-button-teaser__content > li,
.o-core-m103-image-copy-button-teaser__content > .a-core-button {
  width: 100%;
}
.o-core-m103-image-copy-button-teaser__content > .a-core-copy,
.m-core-richtext .o-core-m103-image-copy-button-teaser__content > p,
.m-core-richtext ul .o-core-m103-image-copy-button-teaser__content > li,
.m-core-richtext ol .o-core-m103-image-copy-button-teaser__content > li {
  margin-bottom: 16px;
}
.o-core-m103-image-copy-button-teaser__sublinks {
  margin-top: 16px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m109-content-teaser
 */
.o-core-m109-content-teaser {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-core-m109-content-teaser.has-background-medium {
  background: #eaeaea;
}
.o-core-m109-content-teaser__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m109-content-teaser__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m109-content-teaser__item {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m109-content-teaser__item + .o-core-m109-content-teaser__item {
  margin-top: 16px;
}
.o-core-m109-content-teaser__item.has-image
  .o-core-m109-content-teaser__item-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.o-core-m109-content-teaser__item.has-image
  .o-core-m109-content-teaser__item-inner
  .o-core-m109-content-teaser__image {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m109-content-teaser__item.has-image
  .o-core-m109-content-teaser__item-inner
  .o-core-m109-content-teaser__content {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m109-content-teaser__image .a-core-image {
  display: block;
  width: 80px;
}
.o-core-m109-content-teaser__image-href {
  position: relative;
  display: block;
  width: 80px;
}
.o-core-m109-content-teaser__image-href > .a-core-circular-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.o-core-m109-content-teaser__header {
  padding-top: 8px;
  border-top: 1px solid #eaeaea;
}
.has-background-medium .o-core-m109-content-teaser__header {
  border-color: #999999;
}
.o-core-m109-content-teaser__item.has-image
  .o-core-m109-content-teaser__header {
  margin: -80px 0 0 96px;
  min-height: 80px;
}
.o-core-m109-content-teaser__header > .a-core-copy,
.m-core-richtext .o-core-m109-content-teaser__header > p,
.m-core-richtext ul .o-core-m109-content-teaser__header > li,
.m-core-richtext ol .o-core-m109-content-teaser__header > li {
  color: #343638;
  margin-bottom: 8px;
}
.o-core-m109-content-teaser__content > .a-core-copy,
.m-core-richtext .o-core-m109-content-teaser__content > p,
.m-core-richtext ul .o-core-m109-content-teaser__content > li,
.m-core-richtext ol .o-core-m109-content-teaser__content > li {
  margin-top: 8px;
  margin-bottom: 4px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m202-media-richtext
 */
.o-core-m202-media-richtext {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-core-m202-media-richtext.has-background-medium {
  background: #eaeaea;
}
.o-core-m202-media-richtext.has-background-bright
  + .o-core-m202-media-richtext.has-background-bright {
  padding-top: 0;
}
.o-core-m202-media-richtext.has-background-medium
  + .o-core-m202-media-richtext.has-background-medium {
  padding-top: 0;
}
.o-core-m202-media-richtext__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m202-media-richtext__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m202-media-richtext__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  overflow: hidden;
}
.o-core-m202-media-richtext__media {
  margin-bottom: 16px;
}
.o-core-m202-media-richtext__media.has-extra-spacing {
  margin-bottom: 32px;
}
.o-core-m202-media-richtext__media > .a-core-image {
  width: 100%;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:side-by-side
 */
.o-core-side-by-side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.o-core-side-by-side__element {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:section-decoration
 */
.o-core-section-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-transform: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.o-core-section-decoration__wrapper {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  height: 100%;
}
.o-core-section-decoration__item {
  display: none;
}
.o-core-section-decoration__item .a-core-image {
  display: block;
  width: 100%;
  height: auto;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m205-text-stage
 */
.o-core-m205-text-stage {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
  background: #343638 url("../../files/img/bg-dark.jpg") repeat 0 0;
  background-position: top left;
  background-repeat: repeat;
  background-size: 800px 800px;
  border-bottom: 1px solid #343638;
}
.o-core-m205-text-stage__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m205-text-stage__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m205-text-stage__col {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m205-text-stage.has-cutout .o-core-m205-text-stage__col {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  margin-right: 0;
}
.o-core-m205-text-stage__subline {
  margin-top: 16px;
}
.o-core-m205-text-stage__image {
  display: none;
  padding-top: 10px;
  overflow: hidden;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m205-text-stage__image > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:legacy-container-iframe
 */
.o-core-legacy-container-iframe {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-core-legacy-container-iframe.has-background-medium {
  background: #eaeaea;
}
.o-core-legacy-container-iframe__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-legacy-container-iframe__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-legacy-container-iframe__wrapper {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-legacy-container-iframe__main {
  position: relative;
}
.o-core-legacy-container-iframe__iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.o-core-legacy-container-iframe__mobile-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m204-image-video-stage
 */
.o-core-m204-image-video-stage {
  position: relative;
  background: #343638;
}
.o-core-m204-image-video-stage__wrapper {
  margin: 0 auto;
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 1900px;
  overflow: hidden;
}
.o-core-m204-image-video-stage__wrapper:before {
  display: block;
  content: "";
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.o-core-m204-image-video-stage.is-narrow
  .o-core-m204-image-video-stage__wrapper {
  max-height: 70vh;
}
.o-core-m204-image-video-stage__poster {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.o-core-m204-image-video-stage__poster > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}
.o-core-m204-image-video-stage__preview-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-bottom: 56.25%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.o-core-m204-image-video-stage__poster.is-center > .a-core-image,
.o-core-m204-image-video-stage__poster.is-center
  > .o-core-m204-image-video-stage__preview-wrapper {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.o-core-m204-image-video-stage__poster.is-bottom > .a-core-image,
.o-core-m204-image-video-stage__poster.is-bottom
  > .o-core-m204-image-video-stage__preview-wrapper {
  top: auto;
  bottom: 0;
}
.o-core-m204-image-video-stage__preview-player {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.o-core-m204-image-video-stage__video-player {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.o-core-m204-image-video-stage__end-card {
  display: none;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 50px;
  width: 100%;
  height: auto;
}
.o-core-m204-image-video-stage__play-button {
  display: none;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.o-core-m204-image-video-stage__play-button > .a-core-circular-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.o-core-m204-image-video-stage__close-button {
  display: none;
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
}
.o-core-m204-image-video-stage__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  position: static;
}
.o-core-m204-image-video-stage__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m204-image-video-stage__content {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m204-image-video-stage.is-wide .o-core-m204-image-video-stage__content {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m204-image-video-stage__flap {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
}
.o-core-m204-image-video-stage.is-playing-preview
  .o-core-m204-image-video-stage__preview-wrapper {
  opacity: 1;
  visibility: visible;
}
.o-core-m204-image-video-stage.is-ready
  .o-core-m204-image-video-stage__play-button,
.o-core-m204-image-video-stage.has-ended-preview
  .o-core-m204-image-video-stage__play-button {
  display: block;
}
.o-core-m204-image-video-stage.is-playing
  .o-core-m204-image-video-stage__video-player,
.o-core-m204-image-video-stage.has-reached-end-card
  .o-core-m204-image-video-stage__video-player {
  opacity: 1;
  visibility: visible;
}
.o-core-m204-image-video-stage.is-playing
  .o-core-m204-image-video-stage__close-button,
.o-core-m204-image-video-stage.has-reached-end-card
  .o-core-m204-image-video-stage__close-button {
  display: block;
}
.o-core-m204-image-video-stage.has-reached-end-card
  .o-core-m204-image-video-stage__end-card {
  display: block;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m208-image-stage-portrait
 */
.o-core-m208-image-stage-portrait {
  position: relative;
}
.o-core-m208-image-stage-portrait__wrapper {
  margin: 0 auto;
  position: relative;
  max-width: 1900px;
}
.o-core-m208-image-stage-portrait__image-wrapper {
  position: relative;
  background-color: #fce531;
  overflow: hidden;
}
.o-core-m208-image-stage-portrait__image-wrapper:before {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.o-core-m208-image-stage-portrait__image-wrapper > .a-core-image {
  display: block;
  width: 101%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}
.o-core-m208-image-stage-portrait__image-wrapper.is-center > .a-core-image {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.o-core-m208-image-stage-portrait__image-wrapper.is-bottom > .a-core-image {
  top: auto;
  bottom: 0;
}
.o-core-m208-image-stage-portrait__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m208-image-stage-portrait__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m208-image-stage-portrait__content-wrapper {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m209-category
 */
.o-core-m209-category {
  position: relative;
  padding-top: 32px;
  padding-bottom: 32px;
  position: relative;
  z-index: 1;
}
.o-core-m209-category.has-background-medium {
  background: #eaeaea;
}
.o-core-m209-category__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m209-category__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m209-category__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:editorial-teaser-slider
 */
.o-core-editorial-teaser-slider {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-core-editorial-teaser-slider.has-background-medium {
  background: #eaeaea;
}
.o-core-editorial-teaser-slider__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-editorial-teaser-slider__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-editorial-teaser-slider__content {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-editorial-teaser-slider__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.o-core-editorial-teaser-slider__button {
  display: none;
}
.o-core-editorial-teaser-slider__headline,
.o-core-editorial-teaser-slider__copy {
  margin-bottom: 8px;
}
.o-core-editorial-teaser-slider__mobile-button {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 16px;
}
.o-core-editorial-teaser-slider__mobile-button .a-core-button {
  width: 100%;
}
.o-core-editorial-teaser-slider__slider-wrapper {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:teaser-wall
 */
.o-core-teaser-wall {
  position: relative;
}
.o-core-teaser-wall.has-background-medium {
  background: #eaeaea;
}
.o-core-teaser-wall.has-spacing {
  padding-top: 48px;
  padding-bottom: 24px;
}
.o-core-teaser-wall__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-teaser-wall__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-teaser-wall__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-teaser-wall__teasers {
  margin-bottom: -24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.m-core-expander.is-disabled-for-mobileWide .o-core-teaser-wall__teasers {
  margin-bottom: 0;
}
.o-core-teaser-wall.has-size-s
  .o-core-teaser-wall__teasers
  .o-core-teaser-wall__teaser {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-teaser-wall.has-size-m
  .o-core-teaser-wall__teasers
  .o-core-teaser-wall__teaser {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.m-core-expander .o-core-teaser-wall__teaser {
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.m-core-expander .o-core-teaser-wall__teaser:nth-child(-n + 3) {
  opacity: 1;
  height: auto;
  overflow: visible;
}
.m-core-expander__switch:checked
  ~ .m-core-expander__content
  .o-core-teaser-wall__teaser {
  opacity: 1;
  height: auto;
  overflow: visible;
  transition: opacity 250ms ease-in-out;
}
.m-core-expander.is-disabled .o-core-teaser-wall__teaser {
  opacity: 1;
  height: auto;
  overflow: visible;
}
.o-core-teaser-wall__teaser > .m-core-m104-single-offer-teaser,
.o-core-teaser-wall__teaser > .m-core-m108-offer-recipe-teaser,
.o-core-teaser-wall__teaser > .m-core-m113-tag-teaser,
.o-core-teaser-wall__teaser > .m-core-m110-recipe-teaser,
.o-core-teaser-wall__teaser > .m-core-m106-additional-content-teaser {
  margin-bottom: 24px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:overlay
 */
.o-core-overlay {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(64, 66, 69, 0.6);
}
.o-core-overlay__main {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
}
.o-core-overlay__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
  height: 100%;
  min-height: 100%;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.o-core-overlay.is-full-viewport .o-core-overlay__grid {
  padding-left: 0;
  padding-right: 0;
}
.o-core-overlay__span {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: calc(100% - 60px);
}
.o-core-overlay.is-full-viewport .o-core-overlay__span {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 0;
  margin-right: 0;
  height: 100%;
}
.o-core-overlay__span > .a-core-icon-only-button {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 10px;
}
.o-core-overlay__content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
  background-color: #ffffff;
}
.o-core-overlay.is-full-viewport .o-core-overlay__content-wrapper {
  min-height: 100%;
}
.o-core-overlay.has-medium-background .o-core-overlay__content-wrapper {
  background: #eaeaea;
}
.o-core-overlay__content {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  padding-left: 25px;
  padding-right: 25px;
}
.o-core-overlay.is-open {
  transition: opacity 350ms ease-in-out;
  visibility: visible;
  opacity: 1;
}
.o-core-overlay.is-open .o-core-overlay__main {
  transition: -webkit-transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.o-core-overlay > .a-core-icon-only-button {
  position: absolute;
  right: 30px;
  top: 30px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:magazine-stage
 */
.o-core-magazine-stage {
  position: relative;
  background: #343638;
}
.o-core-magazine-stage__image-wrapper {
  margin: 0 auto;
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 1900px;
  overflow: hidden;
}
.o-core-magazine-stage__image-wrapper:before {
  display: block;
  content: "";
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.o-core-magazine-stage__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.o-core-magazine-stage__image > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.o-core-magazine-stage__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.o-core-magazine-stage__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  height: 100%;
}
.o-core-magazine-stage__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  height: 100%;
}
.o-core-magazine-stage__flap {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  box-sizing: content-box;
  width: 100%;
  position: relative;
  padding-top: 5px;
}
.o-core-magazine-stage__flap:before {
  content: "";
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
}
.o-core-magazine-stage__content {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  z-index: 1;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:form-wrapper
 */
.o-core-form-wrapper {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-core-form-wrapper.has-background-medium {
  background: #eaeaea;
}
.o-core-form-wrapper__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-form-wrapper__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-form-wrapper__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  min-height: 70vh;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:form-notification
 */
.o-core-form-notification {
  margin-bottom: 48px;
}
.o-core-form-notification.has-grid {
  margin-top: 48px;
  margin-bottom: 0;
}
.o-core-form-notification__wrapper {
  position: relative;
}
.o-core-form-notification__wrapper.has-background-medium {
  background: #eaeaea;
}
.o-core-form-notification__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-form-notification__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-form-notification__grid-inner {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-form-notification__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 2px solid #999999;
  border-bottom: 2px solid #999999;
  background-color: #eaeaea;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 24px;
  padding-right: 24px;
}
.is-error .o-core-form-notification__content {
  border-color: #e2251a;
  background-color: #fce7e6;
}
.is-success .o-core-form-notification__content {
  border-color: #64b512;
  background-color: #edfae1;
}
.o-core-form-notification__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 56px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:user-account-interactions
 */
.o-core-user-account-interactions {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-core-user-account-interactions.has-background-medium {
  background: #eaeaea;
}
.o-core-user-account-interactions__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-user-account-interactions__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-user-account-interactions__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m322-disclaimer
 */
.o-core-m322-disclaimer {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-core-m322-disclaimer.has-background-medium {
  background: #eaeaea;
}
.o-core-m322-disclaimer__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m322-disclaimer__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m322-disclaimer__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */

.o-core-m401-header__meta.has-dropdown-for-tablet
  .o-core-m401-header__meta-dropdown-switch {
  position: absolute;
  bottom: 0;
  opacity: 0;
  display: none;
}
.o-core-m401-header__meta.has-dropdown-for-tablet
  .o-core-m401-header__meta-dropdown-switch:checked
  ~ .o-core-m401-header__meta-list {
  max-height: 400px;
}
.o-core-m401-header__meta.has-dropdown-for-tablet
  .o-core-m401-header__meta-dropdown-switch:checked
  ~ .o-core-m401-header__meta-dropdown-label
  .a-core-icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.o-core-m401-header__meta.has-dropdown-for-tablet
  .o-core-m401-header__meta-dropdown-label {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: none;
  position: relative;
  z-index: 20;
}
.o-core-m401-header__meta.has-dropdown-for-tablet
  .o-core-m401-header__meta-dropdown-label
  .a-core-icon {
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.o-core-m401-header__meta-dropdown-switch {
  display: none;
}

.o-core-m401-header__meta-dropdown-label {
  display: none;
}

.o-core-m401-header__mobile-meta {
  padding-top: 32px;
}

.o-core-m401-header__meta-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.o-core-m401-header__meta-item {
  margin: 0 0 8px 0;
}
.o-core-m401-header__meta-item > .a-core-nav-link {
  font-size: 14px;
  line-height: 14px;
}

.o-core-m401-header__bar {
  position: relative;
  #background: #343638 url("../../files/img/bg-dark.jpg") repeat 0 0;
  background-position: top left;
  background-repeat: repeat;
  background-size: 800px 800px;
  border-bottom: 2px solid #000;
  position: relative;
  z-index: 910;
  display: none;
}
.o-core-m401-header__bar:before {
  content: "";
  display: block;
  width: 100%;
  height: 96px;
  max-height: 100%;
  #background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  position: absolute;
  left: 0;
  bottom: 0;
}

.o-core-m401-header.has-no-background .o-core-m401-header__bar {
  background: transparent;
}
.o-core-m401-header.has-no-background .o-core-m401-header__bar:before {
  display: none;
}

.o-core-m401-header__bar-inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.o-core-m401-header__bar-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}

.o-core-m401-header__bar-main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  height: 96px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
}

.o-core-m401-header__logo {
  -webkit-box-flex: 1;
  -ms-flex: auto 0 0px;
  flex: auto 0 0;
  width: 52px;
  height: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.o-core-m401-header__logo .a-core-image {
  width: 52px;
  height: auto;
}
.o-core-m401-header.has-111-jahre-logo .o-core-m401-header__logo {
  width: 112px;
}
.o-core-m401-header.has-111-jahre-logo .o-core-m401-header__logo .a-core-image {
  width: 112px;
}

.o-core-m401-header__nav {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding-left: 80px;
  padding-right: 20px;
}
.o-core-m401-header.has-111-jahre-logo .o-core-m401-header__nav {
  padding-left: 136px;
}

.o-core-m401-header__nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: 22px;
}

.o-core-m401-header__nav-item {
  -webkit-box-flex: 20%;
  -ms-flex: 20% 0 1;
  flex: 20% 0 1;
  padding-right: 20px;
}
.o-core-m401-header.has-111-jahre-logo .o-core-m401-header__nav-item {
  -webkit-box-flex: 1;
  -ms-flex: auto 0 1;
  flex: auto 0 1;
}

.o-core-m401-header__nav-item-link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #ffffff;
  transition: color 450ms ease-in-out;
  height: 32px;
  transition: color 250ms ease-in-out;
}
.o-core-m401-header__nav-item-link:hover {
  color: #fce531 !important;
}
.o-core-m401-header__nav-item-link:hover
  .o-core-m401-header__nav-item-link-text-inner:before {
  background: #fce531;
}
.o-core-m401-header__nav-item-link.is-active
  .o-core-m401-header__nav-item-link-text-inner:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.o-core-m401-header__nav-item-link > .a-core-icon {
  display: none;
}

.o-core-m401-header__nav-item-link-text {
  position: relative;
}

.o-core-m401-header__nav-item-link-text-inner:before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  height: 2px;
  width: 100%;
  background: #ffffff;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: background 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, background 250ms ease-in-out;
  transition: transform 250ms ease-in-out, background 250ms ease-in-out,
    -webkit-transform 250ms ease-in-out;
}

.o-core-m401-header__actions {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: 22px;
  position: relative;
}

.o-core-m401-header__actions-item {
  color: #ffffff;
  transition: color 250ms ease-in-out;
}
.o-core-m401-header__actions-item:not(:first-child) {
  margin: 0 0 0 24px;
}
.o-core-m401-header__actions-item .a-core-icon {
  width: 24px;
  height: 24px;
}
.o-core-m401-header__actions-item:hover {
  color: #fce531 !important;
}
.o-core-m401-header__actions-item a {
  color: inherit !important;
}

.o-core-m401-header__actions-salutation {
  position: absolute;
  left: 0;
  bottom: -17.6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 18px;
}

.o-core-m401-header__flyout {
  background-color: #404245;
  width: 100%;
  position: fixed;
  height: 100%;
  z-index: 909;
  top: 0;
  left: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  transition: opacity 1ms,
    -webkit-transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 1ms;
  transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 1ms,
    -webkit-transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.o-core-m401-header__flyout.is-active {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.o-core-m401-header__flyout.is-active.is-slideout-l {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.o-core-m401-header__flyout.is-hide {
  opacity: 0;
}

.o-core-m401-header__flyout-main {
  padding-top: 60px;
  padding-bottom: 20px;
  transition: padding-top 400ms ease-in-out;
}
.has-smartbanner .o-core-m401-header__flyout-main {
  padding-top: 138px;
}
.o-core-m401-header__flyout-main a.a-core-headline {
  transition: color 250ms ease-in-out;
}
.o-core-m401-header__flyout-main a.a-core-headline:hover {
  color: #fce531;
}

.o-core-m401-header__flyout-go-back {
  border-bottom: 1px solid #999999;
  padding: 15px 0;
  margin-bottom: 10px;
}
.o-core-m401-header__flyout-go-back > .a-core-nav-link {
  margin-left: -10px;
}

.o-core-m401-header__flyout-content {
  opacity: 0;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
}
.o-core-m401-header__flyout-content.is-active {
  max-height: 9999px;
  opacity: 1;
}

.o-core-m401-header__flyout-close {
  display: none;
  padding-right: 24px;
}
.o-core-m401-header__flyout-close .a-core-nav-link .a-core-icon {
  -webkit-transform: scale(0.65);
  transform: scale(0.65);
}

.o-core-m401-header__mobile-bar {
  position: fixed;
  top: 0;
  left: 0;
  transition: top 400ms ease-in-out, -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, top 400ms ease-in-out;
  transition: transform 250ms ease-in-out, top 400ms ease-in-out,
    -webkit-transform 250ms ease-in-out;
  background: #343638 url("../../files/img/bg-dark.jpg") repeat 0 0;
  background-position: top left;
  background-repeat: repeat;
  background-size: 800px 800px;
  display: block;
  z-index: 910;
  width: 100%;
}
.o-core-m401-header__mobile-bar:before {
  content: "";
  display: block;
  width: 100%;
  height: 96px;
  max-height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  position: absolute;
  left: 0;
  bottom: 0;
}
.o-core-m401-header__mobile-bar.is-hide {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.has-smartbanner .o-core-m401-header__mobile-bar {
  top: 78px;
}

.o-core-m401-header__mobile-bar-inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.o-core-m401-header__mobile-bar-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}

.o-core-m401-header__mobile-bar-main {
  position: relative;
  width: 100%;
  height: 60px;
}

.o-core-m401-header__burger {
  position: absolute;
  height: 40px;
  width: 40px;
  left: 5px;
  top: 10px;
  cursor: pointer;
}
.o-core-m401-header__burger.is-open
  .o-core-m401-header__burger-line:first-child {
  -webkit-transform: rotate(45deg) translateY(-3px);
  transform: rotate(45deg) translateY(-3px);
}
.o-core-m401-header__burger.is-open
  .o-core-m401-header__burger-line:last-child {
  -webkit-transform: rotate(-45deg) translateY(3px);
  transform: rotate(-45deg) translateY(3px);
}
.o-core-m401-header__burger.is-open
  .o-core-m401-header__burger-line:nth-child(2) {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.o-core-m401-header__burger-line {
  width: 32px;
  height: 3px;
  position: absolute;
  background-color: #fff;
  left: 4px;
  top: 19px;
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
}
.o-core-m401-header__burger-line:first-child {
  top: 10px;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.o-core-m401-header__burger-line:nth-child(2) {
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.o-core-m401-header__burger-line:last-child {
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  top: 28px;
}

.o-core-m401-header__claim {
  width: 150px;
  height: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  cursor: pointer;
}
.o-core-m401-header__claim .a-core-image {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.o-core-m401-header__action {
  position: absolute;
  right: 10px;
  top: 14px;
  cursor: pointer;
}

.o-core-m401-header__mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: -webkit-transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1),
    -webkit-transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  background-color: #404245;
  height: 100%;
  width: 100%;
  z-index: 909;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.o-core-m401-header__mobile-nav:after {
  content: "";
  width: 100%;
  height: 200%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: opacity 250ms ease-in-out, -webkit-transform 1ms 250ms;
  transition: opacity 250ms ease-in-out, transform 1ms 250ms;
  transition: opacity 250ms ease-in-out, transform 1ms 250ms,
    -webkit-transform 1ms 250ms;
}
.o-core-m401-header__mobile-nav.is-open {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.o-core-m401-header__mobile-nav.is-open.is-slideout-l {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.o-core-m401-header__mobile-nav.is-open.is-slideout-l:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0.5;
  transition: opacity 250ms 100ms ease-in-out, -webkit-transform 1ms 0ms;
  transition: opacity 250ms 100ms ease-in-out, transform 1ms 0ms;
  transition: opacity 250ms 100ms ease-in-out, transform 1ms 0ms,
    -webkit-transform 1ms 0ms;
}

.o-core-m401-header__main-nav {
  margin-top: 24px;
  border-top: 1px solid #999999;
}

.o-core-m401-header__mobile-nav-inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.o-core-m401-header__mobile-nav-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}

.o-core-m401-header__mobile-nav-main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 60px;
  padding-bottom: 20px;
  transition: padding-top 400ms ease-in-out;
}
.has-smartbanner .o-core-m401-header__mobile-nav-main {
  padding-top: 138px;
}

.o-core-m401-header__main-nav-item {
  padding: 15px 0;
  border-bottom: 1px solid #999999;
}

.o-core-m401-header__main-nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: "EdekaText";
  font-size: 20px;
  line-height: 20px;
}

.o-core-m401-header__login {
  padding: 15px 0;
  border-bottom: 1px solid #999999;
}
.o-core-m401-header__login .a-core-nav-link.has-icon-left {
  padding-left: 40px;
}
.o-core-m401-header__login .a-core-nav-link.has-icon-left .a-core-icon {
  top: -2px;
}

.o-core-m401-header__mobile-retailer-offers-container {
  margin-top: 24px;
}

/*
 * Module global:core:organism:m401-header
 */
.o-core-m401-header {
  color: #ffffff;
  height: 60px;
}
.o-core-m401-header a,
.o-core-m401-header a:visited,
.o-core-m401-header a:active {
  color: #ffffff;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m323-global-notification
 */
.o-core-m323-global-notification {
  background-color: #eaeaea;
  position: relative;
}
.o-core-m323-global-notification.has-background-medium {
  background: #eaeaea;
}
.o-core-m323-global-notification input[type="checkbox"] {
  display: none;
}
.o-core-m323-global-notification #cookie-close {
  display: none;
  background: transparent;
  float: none;
  width: 0;
  height: 0;
  margin: 0;
}
.o-core-m323-global-notification
  .close-handler:checked
  + .o-core-m323-global-notification__main {
  max-height: 0;
}
.o-core-m323-global-notification__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m323-global-notification__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m323-global-notification__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  overflow: hidden;
  transition: max-height 250ms ease-in-out;
  max-height: 500px;
}
.o-core-m323-global-notification__main .a-core-icon-only-button {
  position: absolute;
  right: -8px;
  top: 8px;
}
.o-core-m323-global-notification__main .a-core-button {
  margin-top: 8px;
  width: 100%;
}
.o-core-m323-global-notification__content {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 10px;
  padding-left: 10px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:browser-support-warning
 */
.o-core-browser-support-warning {
  max-height: 0;
  transition: max-height 250ms ease-in-out;
  overflow: hidden;
}
.o-core-browser-support-warning.is-no-support {
  max-height: 300px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m402-footer
 */
.o-core-m402-footer {
  position: relative;
  #background: #343638 url("../../files/img/bg-dark.jpg") repeat 0 0;
  background-position: top left;
  background-repeat: repeat;
  background-size: 800px 800px;
  border-top: 2px solid #000;
  padding-top: 32px;
  padding-bottom: 48px;
}
.o-core-m402-footer:before {
  content: "";
  display: block;
  width: 100%;
  height: 96px;
  max-height: 100%;
  #background: linear-gradient(
    to top,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  position: absolute;
  left: 0;
  top: 0;
}
.o-core-m402-footer a,
.o-core-m402-footer a:visited,
.o-core-m402-footer a:active {
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}
.o-core-m402-footer [type="button"],
.o-core-m402-footer [type="submit"],
.o-core-m402-footer button {
  font-family: "EdekaText";
  padding: 11px 30px 9px 30px;
}
.o-core-m402-footer input[type="text"],
.o-core-m402-footer input[type="email"] {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.o-core-m402-footer.has-no-background {
  background: transparent;
}
.o-core-m402-footer.has-no-background:before {
  display: none;
}
.o-core-m402-footer__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m402-footer__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m402-footer__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m402-footer__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.o-core-m402-footer .a-core-copy a,
.o-core-m402-footer .m-core-richtext p a,
.m-core-richtext .o-core-m402-footer p a,
.o-core-m402-footer .m-core-richtext ul li a,
.m-core-richtext ul .o-core-m402-footer li a,
.o-core-m402-footer .m-core-richtext ol li a,
.m-core-richtext ol .o-core-m402-footer li a,
.o-core-m402-footer .a-core-copy a:hover,
.o-core-m402-footer .m-core-richtext p a:hover,
.m-core-richtext .o-core-m402-footer p a:hover,
.o-core-m402-footer .m-core-richtext ul li a:hover,
.m-core-richtext ul .o-core-m402-footer li a:hover,
.o-core-m402-footer .m-core-richtext ol li a:hover,
.m-core-richtext ol .o-core-m402-footer li a:hover {
  color: inherit;
}
.o-core-m402-footer__contact,
.o-core-m402-footer__nav {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m402-footer__newsletter {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m402-footer__legal {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-core-m402-footer__contact {
  margin-bottom: 16px;
}
.o-core-m402-footer__service {
  margin-bottom: 16px;
}
.o-core-m402-footer__service > .a-core-copy,
.m-core-richtext .o-core-m402-footer__service > p,
.m-core-richtext ul .o-core-m402-footer__service > li,
.m-core-richtext ol .o-core-m402-footer__service > li {
  padding-left: 40px;
  color: #999999;
}
.o-core-m402-footer__service-item:not(:last-child) {
  margin-bottom: 8px;
}
.o-core-m402-footer__social {
  margin-bottom: 16px;
}
.o-core-m402-footer__social-item {
  margin-bottom: 8px;
}
.o-core-m402-footer__apps {
  width: 100%;
  margin-bottom: 8px;
  margin-top: 24px;
}
.o-core-m402-footer__apps .a-core-copy,
.o-core-m402-footer__apps .m-core-richtext p,
.m-core-richtext .o-core-m402-footer__apps p,
.o-core-m402-footer__apps .m-core-richtext ul li,
.m-core-richtext ul .o-core-m402-footer__apps li,
.o-core-m402-footer__apps .m-core-richtext ol li,
.m-core-richtext ol .o-core-m402-footer__apps li {
  margin-bottom: 8px;
}
.o-core-m402-footer__apps-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.o-core-m402-footer__apps-item {
  margin-bottom: 8px;
  margin-right: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.o-core-m402-footer__apps-item .a-core-image {
  width: 134px;
  height: auto;
}
.o-core-m402-footer__newsletter {
  margin-bottom: 24px;
}
.o-core-m402-footer__newsletter > .a-core-headline,
.m-core-richtext .o-core-m402-footer__newsletter > h1,
.m-core-richtext .o-core-m402-footer__newsletter > h2,
.m-core-richtext .o-core-m402-footer__newsletter > h3,
.m-core-richtext .o-core-m402-footer__newsletter > h4,
.m-core-richtext .o-core-m402-footer__newsletter > h5 {
  margin-bottom: 8px;
  -webkit-font-smoothing: antialiased;
}
.o-core-m402-footer__newsletter-label {
  display: block;
  margin-bottom: 8px;
}
.o-core-m402-footer__newsletter-label > .a-core-copy,
.m-core-richtext .o-core-m402-footer__newsletter-label > p,
.m-core-richtext ul .o-core-m402-footer__newsletter-label > li,
.m-core-richtext ol .o-core-m402-footer__newsletter-label > li {
  color: #999999;
}
.o-core-m402-footer__newsletter-form > .a-core-button {
  width: 100%;
}
.o-core-m402-footer__newsletter-input {
  font-family: "EdekaText";
  font-size: 16px;
  line-height: 24px;
  padding-left: 8px;
  padding-right: 8px;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  letter-spacing: inherit;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: solid 2px #6696c7;
  margin: 0 0 24px;
}
.o-core-m402-footer__newsletter-input:hover,
.o-core-m402-footer__newsletter-input:focus {
  border-color: #1b66b3;
}
.o-core-m402-footer__newsletter-input:focus {
  box-shadow: 0 0 2px 0 #1b66b3;
}
.o-core-m402-footer__newsletter-input::-webkit-input-placeholder {
  color: #999999;
}
.o-core-m402-footer__newsletter-input:-ms-input-placeholder {
  color: #999999;
}
.o-core-m402-footer__newsletter-input::placeholder {
  color: #999999;
}
.o-core-m402-footer__nav:after {
  margin-top: 24px;
  margin-bottom: 24px;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #999999;
}
.o-core-m402-footer__nav-item {
  margin-bottom: 8px;
}
.o-core-m402-footer__legal-list {
  margin: -8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.o-core-m402-footer__legal-item {
  padding: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m406-breadcrumb
 */
.o-core-m406-breadcrumb {
  position: relative;
  background: transparent;
}
.o-core-m406-breadcrumb__wrapper {
  color: #eaeaea;
  background: #343638;
}
.o-core-m406-breadcrumb__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m406-breadcrumb__inner:before,
.o-core-m406-breadcrumb__inner:after {
  content: "";
  position: absolute;
  width: 25px;
  height: 100%;
  top: 0;
  z-index: 10;
}
.o-core-m406-breadcrumb__inner:before {
  background: linear-gradient(to right, #343638 30%, rgba(52, 54, 56, 0) 100%);
  left: 0;
}
.o-core-m406-breadcrumb__inner:after {
  background: linear-gradient(to left, #343638 30%, rgba(52, 54, 56, 0) 100%);
  right: 0;
}
.o-core-m406-breadcrumb__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.o-core-m406-breadcrumb__grid::-webkit-scrollbar {
  display: none;
}
.o-core-m406-breadcrumb__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  width: auto;
  min-width: 100%;
  padding-right: 17px;
  height: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.o-core-m406-breadcrumb__item {
  margin-right: 7px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.o-core-m406-breadcrumb.is-active .o-core-m406-breadcrumb__item {
  opacity: 1;
}
.o-core-m406-breadcrumb__item > .a-core-icon {
  width: 24px;
  height: 24px;
  margin-left: 7px;
}
.o-core-m406-breadcrumb__item-content {
  font-family: "EdekaText";
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.o-core-m406-breadcrumb__item-content.is-link {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  transition: color 250ms ease-in-out;
}
.o-core-m406-breadcrumb__item-content.is-link:hover {
  color: #fce531;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:global-notification-area
 */
.o-core-global-notification-area {
  margin-top: 60px;
  margin-bottom: -60px;
}
.has-smartbanner .o-core-global-notification-area {
  margin-top: 138px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:recipes:organism:m316-tagcloud
 */
.o-recipes-m316-tagcloud {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.o-recipes-m316-tagcloud.has-background-medium {
  background: #eaeaea;
}
.o-recipes-m316-tagcloud__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-recipes-m316-tagcloud__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-recipes-m316-tagcloud__col {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.o-recipes-m316-tagcloud__wrapper {
  margin-bottom: -8px;
}
.o-recipes-m316-tagcloud__wrapper > .a-core-tag-button {
  margin-right: 8px;
  margin-bottom: 8px;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m211-campaign-image-text
 */
.o-core-m211-campaign-image-text {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
  background: #343638 url("../../files/img/bg-dark.jpg") repeat 0 0;
  background-position: top left;
  background-repeat: repeat;
  background-size: 800px 800px;
}
.o-core-m211-campaign-image-text__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m211-campaign-image-text__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m211-campaign-image-text__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  overflow: hidden;
}
.o-core-m211-campaign-image-text__media:not(:last-child) {
  margin-bottom: 16px;
}
.o-core-m211-campaign-image-text__media > .a-core-image {
  width: 100%;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:organism:m212-banner-stage
 */
.o-core-m212-banner-stage {
  position: relative;
  background: #343638;
}
.o-core-m212-banner-stage:not(.has-full-width-image) {
  background: #343638 url("../../files/img/bg-dark.jpg") repeat 0 0;
  background-position: top left;
  background-repeat: repeat;
  background-size: 800px 800px;
}
.o-core-m212-banner-stage:not(.has-full-width-image)
  .o-core-m212-banner-stage__inner {
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.o-core-m212-banner-stage:not(.has-full-width-image)
  .o-core-m212-banner-stage__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 16px;
  padding-right: 16px;
}
.o-core-m212-banner-stage:not(.has-full-width-image)
  .o-core-m212-banner-stage__main {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  overflow: hidden;
}
.o-core-m212-banner-stage__media > .a-core-image {
  display: block;
  width: 100%;
  height: auto;
}

/**
 * Convert a number unit to pixels
 * @param  {Number} $val A number value
 * @return {String}      A pixel value
 */
/**
 * Test is a value is a map type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a map
 */
/**
 * Test is a value is a number type
 * @param  {*} $val      Some value
 * @return {Boolean}     True, if $val is a type
 */
/**
 * Update a nested map
 * @param {Map} $map      The parent map
 * @param {String} $key   The key within the parent map where the a child map should be updated
 * @param {Map} $updateMap  The child map with updated values
 * @return {Map}         Return the parent map with the child map merged in at the given key
 */
/**
 * Capitalize a string
 * @param  {String} $string The string to be capitalized
 * @return {String}         A capitalized string
 */
/**
 * Make wrapped styles respond to a specific breakpoint
 * @param {String}     A breakpoint's name (see $breakpoints)
 */
/**
 * Make wrapped styles respont to a high DPI displac
 */
/**
 * Create a section with pre-defined background and foreground colors
 * @param {String} $background   bright, medium, dark, darkPlain, auto
 */
/**
 * Set dark background
 */
/**
 * Use a plain dark background
 */
/**
 * Set medium background
 */
/**
 * Create a section's inner part that is aligned to grid and may overlap the section
 * @type {String} $overlay   m, l
 */
/**
 * Enable display of tabular numerals (OpenType feature: tnum)
 */
/**
 * Simple mixin to add default grid span
 */
/**
 * Basis default styling for templates
 */
/**
 * Reset browser button styles
 */
/**
 * Size and color options for circular elements
 */
/**
 * List of circular elements
 */
/**
 * Item within list of circular elements
 */
/**
 * Quantity Queries
 *
 */
/**
 * Test for classnames on HTML tag (e.g. touchevents)
 */
/**
 * Get a breakpoint from $breakpoints map
 * @param  {String} $id The breakpoint's id
 * @return {String}     The breakpoint's hex/rgb(a) value
 */
/**
 * Get a sub-range from $breakpoints map
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 * @return {Map}
 */
/**
 * Get a color from $colors map
 * @param  {String} $id The color's id
 * @return {String}     The color's hex/rgb(a) value
 */
.o-core-m204-image-video-stage__flap:after,
.o-core-magazine-stage__flap:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M5.5%200h-2c0%202.21-1.29%204-3.5%204v1h9V4C6.79%204%205.5%202.21%205.5%200z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

.m-core-m104-single-offer-teaser:after,
.m-core-m108-offer-recipe-teaser:after,
.m-core-m110-recipe-teaser:after,
.m-core-m106-additional-content-teaser:after,
.m-core-m115-product-teaser:after,
.m-core-m117-common-teaser:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%225%22%3E%3Cpath%20d%3D%22M0%200v1c2.21%200%203.5%201.79%203.5%204h2c0-2.21%201.29-4%203.5-4V0z%22%20fill%3D%22%23eaeaea%22%2F%3E%3Cpath%20d%3D%22M4%204h1a4%204%200%200%201%204-4H0a4%204%200%200%201%204%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}

/**
 * Get a font from $fonts map
 * @param  {String} $id The font's id
 * @return {String}     The font family
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Get responsive size stylings for a font type
 */
/**
 * Use a specific font
 */
/**
 * Create a grid container to wrap columns
 */
/**
 * Create an inner grid container for a sub-grid
 */
/**
 * Use a sub grid with individual cols
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 *
 * Example of $sub-grid parameter:
 * @include use-sub-grid((
 *   mobile: 4,
 *   tablet: 10,
 *   desktop: 8
 * )){
 *   // Your content here
 * }
 */
/**
 * Merge the cols definiton of a sub-grid into the main grid
 * @param {Map} $sub-grid    A map with cols definitions per breakpoint
 */
/**
 * Calculate the with of a columns based on a given span count
 * @param {Number} $count    The number of columns to span
 * @param {Map} $gridDefs    Definition for the grid to use
 * @return {Number}          Width of the columns
 */
/**
 * Create a grid column for a specific breakpoint
 * @param {Number} $span       The count of cols to span
 * @param {Number} $pre        The count of cols to add as margin on the list side
 * @param {Number} $post       The count of cols to add as margin on the right side
 * @param {String} $breakpoint The breakpoint when this behaviour should take place
 */
/**
  * Flexbile mixin to create a responsive grid col
  * @param {Number|Map} $options   Configuration object for a responsive grid column
  *
  * Allows three different variants to pass $options parameter
  *
  * Variant A: pass a single number
  * @include grid-span(6)
  * - Spans 4 columns for mobile (by default)
  * - Spans 6 columns for > mobile (by definition)
  *
  * Variant B: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: 2,
  *   mobileWide: 6,
  *   tablet: 4,
  *   desktopSmall: 6
  * ));
  * - Spans 2 columns for mobile
  * - Spans 6 columns for mobileWide
  * - Spans 4 columns for tablet
  * - Spans 6 columns for desktopSmall and above
  *
  * Variant C: pass a simple configuration object for different breakpoints
  * @include grid-span((
  *   mobile: (span: 2, pre: 1, post: 1),
  *   mobileWide: (span: 10, pre: 1, post: 1),
  *   tablet: (span: 8, pre: 2, post: 2),
  *   desktopSmall: (span: 6, pre: 3, post: 3),
  * ));
  * - Spans 2 columns for mobile with 1 column margin-left and 1 column margin-right
  * - Spans 10 columns for mobileWide with 1 columns margin-left and 1 columns margin-right
  * - Spans 8 columns for tablet with 2 columns margin-left and 2 columns margin-right
  * - Spans 6 columns for desktopSmall and above with3 columns margin-left and 3 columns margin-right
*/
/**
 * Order an item in first position
 */
/**
 * Order an item in last position
 */
/**
 * Use a grid gutter (or a fraction/multiple of a grid gutter for a given property)
 * @param {String} $prop    CSS property, e.g. margin-left
 * @param {Float} $factor   Factor for the amount of the gutter
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/**
 * Get a responsive stylings config for a font type
 * @param  {String} $id The font's id
 * @param  {String} $breakpoint The breakpoint
 * @return {Map|null}     Config map or null
 */
/**
 * Use a specific space
 * @param {String} $id      The spacing's id
 * @param {String} $prop    The CSS property to set
 * @param {Number} $factor  Factor applied to the value
 * @param {Map} $range      Map defining range, e.g. (from: mobile, to: tablet)
 */
/*
 * Module global:core:template:default
 */
.t-core-default {
  font-family: "EdekaText";
  font-size: 16px;
  color: #404245;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.t-core-default + #b-page {
  padding-top: 0;
}
@media (min-width: 450px) {
  .x-breakpoint-min-mobileWide {
    display: block;
  }
  .a-core-m207-section-separator.has-grid .a-core-m207-section-separator__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .a-core-m207-section-separator.has-grid .a-core-m207-section-separator__col {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .a-core-circular-icon.is-medium-shy {
    width: 48px;
    height: 48px;
  }
  .a-core-circular-icon.is-medium-shy .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-value.is-medium-shy {
    width: 48px;
    height: 48px;
  }
  .a-core-circular-value.is-medium-shy .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .m-core-expander.is-disabled-for-mobileWide .m-core-expander__expand,
  .m-core-expander.is-disabled-for-mobileWide .m-core-expander__collapse {
    display: none;
  }
  .m-core-section-title {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-m102-teaser-slider {
    margin-left: -8px;
    margin-right: -8px;
  }
  .m-core-m102-teaser-slider__slide.is-next {
    opacity: 1;
  }
  .m-core-m102-teaser-slider__slide.has-size-s {
    width: 41.66667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-m102-teaser-slider__slide.has-size-m {
    width: 58.33333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-m102-teaser-slider__slide.has-size-xl {
    width: 33.33333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-m102-teaser-slider__offset-before {
    width: 0%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-m102-teaser-slider__offset-after {
    width: 16.66667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-m102-teaser-slider__offset-before,
  .m-core-m102-teaser-slider__offset-after {
    padding-left: 0;
    padding-right: 0;
  }
  .m-core-m203-headline-intro__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-m203-headline-intro__wrapper {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: 100%;
    height: auto;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: calc(177.77778%);
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 120px;
  }
  .m-core-m110-recipe-teaser.has-size-s .m-core-m110-recipe-teaser__meta-list {
    width: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: auto;
    height: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: calc(177.77778%);
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 120px;
  }
  .m-core-m110-recipe-teaser.has-size-m .m-core-m110-recipe-teaser__meta-list {
    width: 100%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: 100%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: auto;
    height: 100%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: calc(177.77778%);
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 120px;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__meta-list {
    width: 100%;
  }
  .m-core-form-buttons__item {
    width: auto;
  }
  .m-core-navigation-content-nutrition {
    margin-left: -8px;
    margin-right: -8px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__go-back {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-navigation-content-recipes {
    margin-left: -8px;
    margin-right: -8px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__go-back {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-navigation-content-recipes .m-core-navigation-content-recipes__image {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__magazine {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__search-cookbook {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-navigation-content-retailer-offers {
    margin-left: -8px;
    margin-right: -8px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__store {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__image {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__offers {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m201-image-gallery__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m201-image-gallery__header {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m201-image-gallery__slider-wrapper {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m201-image-gallery__slider {
    margin-left: -8px;
    margin-right: -8px;
  }
  .o-core-m201-image-gallery__slider-container {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m201-image-gallery__slide:not(:last-of-type) {
    margin-right: 16px;
  }
  .o-core-m201-image-gallery__caption-list {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m103-image-copy-button-teaser__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m103-image-copy-button-teaser__image {
    width: 41.66667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m103-image-copy-button-teaser__image-wrapper {
    margin-bottom: 0 !important;
  }
  .o-core-m103-image-copy-button-teaser__content {
    width: 58.33333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m103-image-copy-button-teaser__content > .a-core-headline,
  .m-core-richtext .o-core-m103-image-copy-button-teaser__content > h1,
  .m-core-richtext .o-core-m103-image-copy-button-teaser__content > h2,
  .m-core-richtext .o-core-m103-image-copy-button-teaser__content > h3,
  .m-core-richtext .o-core-m103-image-copy-button-teaser__content > h4,
  .m-core-richtext .o-core-m103-image-copy-button-teaser__content > h5 {
    margin-top: 0;
  }
  .o-core-m109-content-teaser__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m109-content-teaser__item {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner {
    margin-left: -8px;
    margin-right: -8px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner
    .o-core-m109-content-teaser__image {
    width: 41.66667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner
    .o-core-m109-content-teaser__content {
    width: 58.33333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m109-content-teaser__image .a-core-image {
    width: 100%;
  }
  .o-core-m109-content-teaser__image-href {
    width: auto;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__header {
    margin: 0;
    min-height: 0;
  }
  .o-core-m202-media-richtext__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m202-media-richtext__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m202-media-richtext__media.is-left,
  .o-core-m202-media-richtext__media.is-right {
    width: 50%;
  }
  .o-core-m202-media-richtext__media.is-left {
    float: left;
    padding-right: 8px;
    margin-right: 8px;
  }
  .o-core-m202-media-richtext__media.is-right {
    float: right;
    padding-left: 8px;
    margin-left: 8px;
  }
  .o-core-side-by-side {
    margin-left: -8px;
    margin-right: -8px;
  }
  .o-core-side-by-side__element {
    width: 75%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m205-text-stage__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m205-text-stage__col {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m205-text-stage.has-cutout .o-core-m205-text-stage__col {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m205-text-stage__image {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-legacy-container-iframe__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-legacy-container-iframe__wrapper {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m204-image-video-stage.is-narrow
    .o-core-m204-image-video-stage__wrapper {
    max-height: 70vh;
  }
  .o-core-m204-image-video-stage__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m204-image-video-stage__content {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m204-image-video-stage.is-wide
    .o-core-m204-image-video-stage__content {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m208-image-stage-portrait__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m208-image-stage-portrait__content-wrapper {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m209-category__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m209-category__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-editorial-teaser-slider__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-editorial-teaser-slider__content {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-editorial-teaser-slider__mobile-button {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-editorial-teaser-slider__slider-wrapper {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-teaser-wall__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-teaser-wall__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-expander.is-disabled-for-mobileWide .o-core-teaser-wall__teasers {
    margin-bottom: -24px;
  }
  .o-core-teaser-wall__teasers {
    margin-left: -8px;
    margin-right: -8px;
  }
  .o-core-teaser-wall.has-size-s
    .o-core-teaser-wall__teasers
    .o-core-teaser-wall__teaser {
    width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-teaser-wall.has-size-m
    .o-core-teaser-wall__teasers
    .o-core-teaser-wall__teaser {
    width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .m-core-expander.is-disabled-for-mobileWide .o-core-teaser-wall__teaser {
    opacity: 1;
    height: auto;
    overflow: visible;
  }
  .o-core-overlay__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-overlay__span {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-overlay.is-full-viewport .o-core-overlay__span {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-overlay__content-wrapper {
    margin-left: -8px;
    margin-right: -8px;
  }
  .o-core-overlay__content {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-overlay__content {
    padding-left: 25px;
    padding-right: 25px;
  }
  .o-core-magazine-stage__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-magazine-stage__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-form-wrapper__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-form-wrapper__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-form-notification__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-form-notification__grid-inner {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-user-account-interactions__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-user-account-interactions__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m322-disclaimer__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m322-disclaimer__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m401-header__bar-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m401-header__bar-main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m401-header__flyout-close {
    padding-right: 24px;
  }
  .o-core-m401-header__mobile-bar-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m401-header__mobile-nav-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m401-header__mobile-nav-main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m323-global-notification__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m323-global-notification__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m323-global-notification__main .a-core-icon-only-button {
    right: 0;
  }
  .o-core-m323-global-notification__main .a-core-button {
    width: auto;
  }
  .o-core-m323-global-notification__content {
    padding-left: 0;
    padding-right: 30px;
  }
  .o-core-m402-footer__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m402-footer__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m402-footer__wrapper {
    margin-left: -8px;
    margin-right: -8px;
  }
  .o-core-m402-footer__contact,
  .o-core-m402-footer__nav {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m402-footer__newsletter {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m402-footer__legal {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m406-breadcrumb__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m406-breadcrumb__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-recipes-m316-tagcloud__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-recipes-m316-tagcloud__col {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m211-campaign-image-text__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m211-campaign-image-text__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .o-core-m211-campaign-image-text__media.is-left,
  .o-core-m211-campaign-image-text__media.is-right {
    width: 50%;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    float: left;
    padding-right: 8px;
    margin-right: 8px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    float: right;
    padding-left: 8px;
    margin-left: 8px;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image)
    .o-core-m212-banner-stage__grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image)
    .o-core-m212-banner-stage__main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 450px) and (min-width: 450px) {
  .o-core-m202-media-richtext__media.is-left {
    padding-right: 8px;
  }
  .o-core-m202-media-richtext__media.is-left {
    margin-right: 8px;
  }
  .o-core-m202-media-richtext__media.is-right {
    padding-left: 8px;
  }
  .o-core-m202-media-richtext__media.is-right {
    margin-left: 8px;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    padding-right: 8px;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    margin-right: 8px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    padding-left: 8px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    margin-left: 8px;
  }
}
@media (min-width: 700px) and (min-width: 450px) {
  .o-core-m401-header__meta {
    right: 8px;
  }
  .o-core-m401-header__flyout-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m401-header__flyout-main {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 700px) {
  .x-breakpoint-min-tablet {
    display: block;
  }
  .a-core-icon-top-button {
    margin-bottom: 32px;
  }
  .a-core-copy.has-spacing + .a-core-copy.has-spacing,
  .m-core-richtext p + .a-core-copy.has-spacing,
  .m-core-richtext ul li.has-spacing + .a-core-copy.has-spacing,
  .m-core-richtext ol li.has-spacing + .a-core-copy.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + p,
  .m-core-richtext p + p,
  .m-core-richtext ul li.has-spacing + p,
  .m-core-richtext ol li.has-spacing + p,
  .m-core-richtext ul .a-core-copy.has-spacing + li.has-spacing,
  .m-core-richtext ul p + li.has-spacing,
  .m-core-richtext ul li.has-spacing + li.has-spacing,
  .m-core-richtext ol ul li.has-spacing + li.has-spacing,
  .m-core-richtext ul ol li.has-spacing + li.has-spacing,
  .m-core-richtext ol .a-core-copy.has-spacing + li.has-spacing,
  .m-core-richtext ol p + li.has-spacing,
  .m-core-richtext ul ol li.has-spacing + li.has-spacing,
  .m-core-richtext ol ul li.has-spacing + li.has-spacing,
  .m-core-richtext ol li.has-spacing + li.has-spacing,
  .a-core-copy.has-spacing + .a-core-listing.has-spacing,
  .m-core-richtext p + .a-core-listing.has-spacing,
  .m-core-richtext ul li.has-spacing + .a-core-listing.has-spacing,
  .m-core-richtext ol li.has-spacing + .a-core-listing.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + ul,
  .m-core-richtext p + ul,
  .m-core-richtext ul li.has-spacing + ul,
  .m-core-richtext ol li.has-spacing + ul,
  .m-core-richtext .a-core-copy.has-spacing + ol,
  .m-core-richtext p + ol,
  .m-core-richtext ul li.has-spacing + ol,
  .m-core-richtext ol li.has-spacing + ol {
    margin-top: 24px;
  }
  .a-core-copy.has-spacing + .a-core-headline.is-main.has-spacing,
  .m-core-richtext p + .a-core-headline.is-main.has-spacing,
  .m-core-richtext ul li.has-spacing + .a-core-headline.is-main.has-spacing,
  .m-core-richtext ol li.has-spacing + .a-core-headline.is-main.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h1,
  .m-core-richtext p + h1,
  .m-core-richtext ul li.has-spacing + h1,
  .m-core-richtext ol li.has-spacing + h1,
  .m-core-richtext .a-core-copy.has-spacing + h2.is-main.has-spacing,
  .m-core-richtext p + h2.is-main.has-spacing,
  .m-core-richtext ul li.has-spacing + h2.is-main.has-spacing,
  .m-core-richtext ol li.has-spacing + h2.is-main.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h3.is-main.has-spacing,
  .m-core-richtext p + h3.is-main.has-spacing,
  .m-core-richtext ul li.has-spacing + h3.is-main.has-spacing,
  .m-core-richtext ol li.has-spacing + h3.is-main.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h4.is-main.has-spacing,
  .m-core-richtext p + h4.is-main.has-spacing,
  .m-core-richtext ul li.has-spacing + h4.is-main.has-spacing,
  .m-core-richtext ol li.has-spacing + h4.is-main.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h5.is-main.has-spacing,
  .m-core-richtext p + h5.is-main.has-spacing,
  .m-core-richtext ul li.has-spacing + h5.is-main.has-spacing,
  .m-core-richtext ol li.has-spacing + h5.is-main.has-spacing {
    margin-top: 48px;
  }
  .a-core-copy.has-spacing + .a-core-headline.is-section.has-spacing,
  .m-core-richtext p + .a-core-headline.is-section.has-spacing,
  .m-core-richtext ul li.has-spacing + .a-core-headline.is-section.has-spacing,
  .m-core-richtext ol li.has-spacing + .a-core-headline.is-section.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h1.is-section.has-spacing,
  .m-core-richtext p + h1.is-section.has-spacing,
  .m-core-richtext ul li.has-spacing + h1.is-section.has-spacing,
  .m-core-richtext ol li.has-spacing + h1.is-section.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h2,
  .m-core-richtext p + h2,
  .m-core-richtext ul li.has-spacing + h2,
  .m-core-richtext ol li.has-spacing + h2,
  .m-core-richtext .a-core-copy.has-spacing + h3.is-section.has-spacing,
  .m-core-richtext p + h3.is-section.has-spacing,
  .m-core-richtext ul li.has-spacing + h3.is-section.has-spacing,
  .m-core-richtext ol li.has-spacing + h3.is-section.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h4.is-section.has-spacing,
  .m-core-richtext p + h4.is-section.has-spacing,
  .m-core-richtext ul li.has-spacing + h4.is-section.has-spacing,
  .m-core-richtext ol li.has-spacing + h4.is-section.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h5.is-section.has-spacing,
  .m-core-richtext p + h5.is-section.has-spacing,
  .m-core-richtext ul li.has-spacing + h5.is-section.has-spacing,
  .m-core-richtext ol li.has-spacing + h5.is-section.has-spacing {
    margin-top: 32px;
  }
  .a-core-copy.has-spacing + .a-core-headline.is-article.has-spacing,
  .m-core-richtext p + .a-core-headline.is-article.has-spacing,
  .m-core-richtext ul li.has-spacing + .a-core-headline.is-article.has-spacing,
  .m-core-richtext ol li.has-spacing + .a-core-headline.is-article.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h1.is-article.has-spacing,
  .m-core-richtext p + h1.is-article.has-spacing,
  .m-core-richtext ul li.has-spacing + h1.is-article.has-spacing,
  .m-core-richtext ol li.has-spacing + h1.is-article.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h2.is-article.has-spacing,
  .m-core-richtext p + h2.is-article.has-spacing,
  .m-core-richtext ul li.has-spacing + h2.is-article.has-spacing,
  .m-core-richtext ol li.has-spacing + h2.is-article.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h3.is-article.has-spacing,
  .m-core-richtext p + h3.is-article.has-spacing,
  .m-core-richtext ul li.has-spacing + h3.is-article.has-spacing,
  .m-core-richtext ol li.has-spacing + h3.is-article.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h4.is-article.has-spacing,
  .m-core-richtext p + h4.is-article.has-spacing,
  .m-core-richtext ul li.has-spacing + h4.is-article.has-spacing,
  .m-core-richtext ol li.has-spacing + h4.is-article.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h5.is-article.has-spacing,
  .m-core-richtext p + h5.is-article.has-spacing,
  .m-core-richtext ul li.has-spacing + h5.is-article.has-spacing,
  .m-core-richtext ol li.has-spacing + h5.is-article.has-spacing {
    margin-top: 24px;
  }
  .a-core-copy.has-spacing + .a-core-headline.is-category.has-spacing,
  .m-core-richtext p + .a-core-headline.is-category.has-spacing,
  .m-core-richtext ul li.has-spacing + .a-core-headline.is-category.has-spacing,
  .m-core-richtext ol li.has-spacing + .a-core-headline.is-category.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h1.is-category.has-spacing,
  .m-core-richtext p + h1.is-category.has-spacing,
  .m-core-richtext ul li.has-spacing + h1.is-category.has-spacing,
  .m-core-richtext ol li.has-spacing + h1.is-category.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h2.is-category.has-spacing,
  .m-core-richtext p + h2.is-category.has-spacing,
  .m-core-richtext ul li.has-spacing + h2.is-category.has-spacing,
  .m-core-richtext ol li.has-spacing + h2.is-category.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h3,
  .m-core-richtext p + h3,
  .m-core-richtext ul li.has-spacing + h3,
  .m-core-richtext ol li.has-spacing + h3,
  .m-core-richtext .a-core-copy.has-spacing + h4.is-category.has-spacing,
  .m-core-richtext p + h4.is-category.has-spacing,
  .m-core-richtext ul li.has-spacing + h4.is-category.has-spacing,
  .m-core-richtext ol li.has-spacing + h4.is-category.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h5.is-category.has-spacing,
  .m-core-richtext p + h5.is-category.has-spacing,
  .m-core-richtext ul li.has-spacing + h5.is-category.has-spacing,
  .m-core-richtext ol li.has-spacing + h5.is-category.has-spacing {
    margin-top: 24px;
  }
  .a-core-copy.has-spacing + .a-core-headline.is-entry.has-spacing,
  .m-core-richtext p + .a-core-headline.is-entry.has-spacing,
  .m-core-richtext ul li.has-spacing + .a-core-headline.is-entry.has-spacing,
  .m-core-richtext ol li.has-spacing + .a-core-headline.is-entry.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h1.is-entry.has-spacing,
  .m-core-richtext p + h1.is-entry.has-spacing,
  .m-core-richtext ul li.has-spacing + h1.is-entry.has-spacing,
  .m-core-richtext ol li.has-spacing + h1.is-entry.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h2.is-entry.has-spacing,
  .m-core-richtext p + h2.is-entry.has-spacing,
  .m-core-richtext ul li.has-spacing + h2.is-entry.has-spacing,
  .m-core-richtext ol li.has-spacing + h2.is-entry.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h3.is-entry.has-spacing,
  .m-core-richtext p + h3.is-entry.has-spacing,
  .m-core-richtext ul li.has-spacing + h3.is-entry.has-spacing,
  .m-core-richtext ol li.has-spacing + h3.is-entry.has-spacing,
  .m-core-richtext .a-core-copy.has-spacing + h4,
  .m-core-richtext p + h4,
  .m-core-richtext ul li.has-spacing + h4,
  .m-core-richtext ol li.has-spacing + h4,
  .m-core-richtext .a-core-copy.has-spacing + h5.is-entry.has-spacing,
  .m-core-richtext p + h5.is-entry.has-spacing,
  .m-core-richtext ul li.has-spacing + h5.is-entry.has-spacing,
  .m-core-richtext ol li.has-spacing + h5.is-entry.has-spacing {
    margin-top: 16px;
  }
  .a-core-headline.is-main.has-spacing,
  .m-core-richtext h1,
  .m-core-richtext h2.is-main.has-spacing,
  .m-core-richtext h3.is-main.has-spacing,
  .m-core-richtext h4.is-main.has-spacing,
  .m-core-richtext h5.is-main.has-spacing,
  .a-core-headline.is-main-stactic.has-spacing,
  .m-core-richtext h1.is-main-stactic.has-spacing,
  .m-core-richtext h2.is-main-stactic.has-spacing,
  .m-core-richtext h3.is-main-stactic.has-spacing,
  .m-core-richtext h4.is-main-stactic.has-spacing,
  .m-core-richtext h5.is-main-stactic.has-spacing {
    margin-bottom: 32px;
  }
  .a-core-headline.is-section.has-spacing,
  .m-core-richtext h1.is-section.has-spacing,
  .m-core-richtext h2,
  .m-core-richtext h3.is-section.has-spacing,
  .m-core-richtext h4.is-section.has-spacing,
  .m-core-richtext h5.is-section.has-spacing,
  .a-core-headline.is-section-static.has-spacing,
  .m-core-richtext h1.is-section-static.has-spacing,
  .m-core-richtext h2.is-section-static.has-spacing,
  .m-core-richtext h3.is-section-static.has-spacing,
  .m-core-richtext h4.is-section-static.has-spacing,
  .m-core-richtext h5.is-section-static.has-spacing {
    margin-bottom: 24px;
  }
  .a-core-headline.is-article.has-spacing,
  .m-core-richtext h1.is-article.has-spacing,
  .m-core-richtext h2.is-article.has-spacing,
  .m-core-richtext h3.is-article.has-spacing,
  .m-core-richtext h4.is-article.has-spacing,
  .m-core-richtext h5.is-article.has-spacing,
  .a-core-headline.is-article-static.has-spacing,
  .m-core-richtext h1.is-article-static.has-spacing,
  .m-core-richtext h2.is-article-static.has-spacing,
  .m-core-richtext h3.is-article-static.has-spacing,
  .m-core-richtext h4.is-article-static.has-spacing,
  .m-core-richtext h5.is-article-static.has-spacing {
    margin-bottom: 16px;
  }
  .a-core-headline.is-category.has-spacing,
  .m-core-richtext h1.is-category.has-spacing,
  .m-core-richtext h2.is-category.has-spacing,
  .m-core-richtext h3,
  .m-core-richtext h4.is-category.has-spacing,
  .m-core-richtext h5.is-category.has-spacing {
    margin-bottom: 16px;
  }
  .a-core-headline.is-entry.has-spacing,
  .m-core-richtext h1.is-entry.has-spacing,
  .m-core-richtext h2.is-entry.has-spacing,
  .m-core-richtext h3.is-entry.has-spacing,
  .m-core-richtext h4,
  .m-core-richtext h5.is-entry.has-spacing,
  .a-core-headline.is-entry-static.has-spacing,
  .m-core-richtext h1.is-entry-static.has-spacing,
  .m-core-richtext h2.is-entry-static.has-spacing,
  .m-core-richtext h3.is-entry-static.has-spacing,
  .m-core-richtext h4.is-entry-static.has-spacing,
  .m-core-richtext h5.is-entry-static.has-spacing {
    margin-bottom: 8px;
  }
  .a-core-listing.has-spacing,
  .m-core-richtext ul,
  .m-core-richtext ol {
    margin-bottom: 24px;
  }
  ul.a-core-listing li:before,
  .m-core-richtext ul li:before {
    padding-right: 16px;
  }
  ol.a-core-listing li:before,
  .m-core-richtext ol li:before {
    padding-right: 8px;
  }
  .a-core-m207-section-separator.has-grid .a-core-m207-section-separator__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .a-core-m207-section-separator.has-grid .a-core-m207-section-separator__col {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .a-core-m207-section-separator.has-spacing {
    padding-top: 60px;
  }
  .a-core-m207-section-separator.has-spacing {
    padding-bottom: 60px;
  }
  .a-core-m206-section-spacing {
    height: 48px;
  }
  .a-core-m206-section-spacing.is-negative {
    margin-bottom: -60px;
  }
  .a-core-circular-icon {
    width: 70px;
    height: 70px;
  }
  .a-core-circular-icon .a-core-icon {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
  }
  .a-core-circular-icon.is-small {
    width: 44px;
    height: 44px;
  }
  .a-core-circular-icon.is-small .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-icon.is-medium {
    width: 48px;
    height: 48px;
  }
  .a-core-circular-icon.is-medium .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-icon.is-extra-large {
    width: 100px;
    height: 100px;
  }
  .a-core-circular-icon.is-extra-large .a-core-icon {
    width: 54px;
    height: 54px;
    margin-top: -27px;
    margin-left: -27px;
  }
  .a-core-circular-icon-button.has-label-top
    .a-core-circular-icon-button__label {
    padding-bottom: 16px;
  }
  .a-core-circular-icon-button.has-label-right
    .a-core-circular-icon-button__label {
    padding-left: 24px;
  }
  .a-core-circular-icon-button.has-label-bottom
    .a-core-circular-icon-button__label {
    padding-top: 16px;
  }
  .a-core-circular-icon-button.has-label-left
    .a-core-circular-icon-button__label {
    padding-right: 24px;
  }
  .a-core-circular-value {
    width: 70px;
    height: 70px;
  }
  .a-core-circular-value .a-core-icon {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
  }
  .a-core-circular-value.is-small {
    width: 44px;
    height: 44px;
  }
  .a-core-circular-value.is-small .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-value.is-medium {
    width: 48px;
    height: 48px;
  }
  .a-core-circular-value.is-medium .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-value.is-extra-large {
    width: 100px;
    height: 100px;
  }
  .a-core-circular-value.is-extra-large .a-core-icon {
    width: 54px;
    height: 54px;
    margin-top: -27px;
    margin-left: -27px;
  }
  .a-core-circular-value__primary {
    top: 21px;
  }
  .a-core-circular-value__secondary {
    top: 40px;
  }
  .a-core-tag-button {
    padding: 8px;
  }
  .a-core-circular-percentage,
  .a-core-circular-percentage .a-core-circular-percentage__mask,
  .a-core-circular-percentage .a-core-circular-percentage__fill {
    width: 84px;
    height: 84px;
  }
  .a-core-circular-percentage .a-core-circular-percentage__mask {
    clip: rect(0px, 84px, 84px, 42px);
  }
  .a-core-circular-percentage .a-core-circular-percentage__fill {
    clip: rect(-1px, 43px, 86px, -1px);
  }
  .a-core-circular-percentage .a-core-circular-percentage__circle {
    width: 80px;
    height: 80px;
    margin: 2px 0 0 2px;
  }
  .a-core-circular-percentage .a-core-circular-percentage__inner {
    margin: 4px 0 0 4px;
    width: 76px;
    height: 76px;
  }
  .a-core-circular-percentage__inner {
    font-size: 14px;
    line-height: 16px;
  }
  .a-core-labeled-icon > .a-core-icon {
    margin-bottom: 8px;
  }
  .a-core-offer-product-badges {
    margin: -4px;
  }
  .a-core-offer-product-badges > .a-core-image {
    margin: 4px;
  }
  .a-core-form-field-text:not(.is-textarea):after {
    right: 8px;
  }
  .a-core-rectangle-badge {
    margin-left: 16px;
  }
  .a-core-navigation-content-image {
    height: 100%;
    min-height: 300px;
  }
  .a-core-navigation-content-image > .a-core-image {
    width: auto;
    height: 100%;
  }
  .m-core-expander__expand,
  .m-core-expander__collapse {
    padding-top: 24px;
  }
  .m-core-expander.is-disabled-for-tablet .m-core-expander__expand,
  .m-core-expander.is-disabled-for-tablet .m-core-expander__collapse {
    display: none;
  }
  .m-core-section-title {
    margin-top: 48px;
  }
  .m-core-section-title {
    margin-bottom: 48px;
  }
  .m-core-section-title {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-m102-teaser-slider {
    margin-left: -10px;
    margin-right: -10px;
  }
  .m-core-m102-teaser-slider__slide.has-size-s {
    width: 33.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-m102-teaser-slider__slide.has-size-m {
    width: 41.66667%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-m102-teaser-slider__slide.has-size-xl {
    width: 83.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-m102-teaser-slider__offset-before {
    width: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-m102-teaser-slider__offset-after {
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
  }
  html.touchevents
    .m-core-m102-teaser-slider__container.has-swiper-horizontal
    .m-core-m102-teaser-slider__prev-button,
  html.touchevents
    .m-core-m102-teaser-slider__container.has-swiper-horizontal
    .m-core-m102-teaser-slider__next-button {
    display: block;
  }
  .m-core-m104-single-offer-teaser__content {
    padding-top: 16px;
  }
  .m-core-m104-single-offer-teaser__content {
    padding-left: 16px;
  }
  .m-core-m104-single-offer-teaser__content {
    padding-right: 16px;
  }
  .m-core-m104-single-offer-teaser__content > .a-core-headline,
  .m-core-richtext .m-core-m104-single-offer-teaser__content > h1,
  .m-core-richtext .m-core-m104-single-offer-teaser__content > h2,
  .m-core-richtext .m-core-m104-single-offer-teaser__content > h3,
  .m-core-richtext .m-core-m104-single-offer-teaser__content > h4,
  .m-core-richtext .m-core-m104-single-offer-teaser__content > h5 {
    margin-bottom: 8px;
  }
  .m-core-m104-single-offer-teaser__header > .a-core-offer-discount-badge {
    left: 16px;
  }
  .m-core-m104-single-offer-teaser__header > .a-core-offer-incentive-badge {
    right: 16px;
  }
  .m-core-m104-single-offer-teaser__header > .a-core-offer-incentive-badge {
    top: 16px;
  }
  .m-core-m104-single-offer-teaser__header > .a-core-offer-product-badges {
    left: 16px;
  }
  .m-core-m104-single-offer-teaser__header > .a-core-offer-product-badges {
    right: 16px;
  }
  .m-core-m104-single-offer-teaser__price,
  .m-core-m104-single-offer-teaser__actions {
    padding-left: 16px;
  }
  .m-core-m104-single-offer-teaser__price,
  .m-core-m104-single-offer-teaser__actions {
    padding-right: 16px;
  }
  .m-core-m104-single-offer-teaser__actions:before {
    left: 16px;
  }
  .m-core-m104-single-offer-teaser__actions:before {
    right: 16px;
  }
  .m-core-m108-offer-recipe-teaser__content {
    padding: 16px;
  }
  .m-core-m108-offer-recipe-teaser__content > .m-core-title-with-icon {
    margin-bottom: 16px;
  }
  .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > .a-core-headline,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h1,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h1,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h2,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h2,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h3,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h3,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h4,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h4,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h5,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h5 {
    margin-top: 8px;
  }
  .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > .a-core-headline,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h1,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h1,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h2,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h2,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h3,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h3,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h4,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h4,
  .m-core-title-with-icon.has-size-s
    .m-core-richtext
    .m-core-title-with-icon__content
    > h5,
  .m-core-richtext
    .m-core-title-with-icon.has-size-s
    .m-core-title-with-icon__content
    > h5 {
    margin-bottom: 8px;
  }
  .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > .a-core-headline,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h1,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h1,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h2,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h2,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h3,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h3,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h4,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h4,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h5,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h5 {
    margin-top: 8px;
  }
  .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > .a-core-headline,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h1,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h1,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h2,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h2,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h3,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h3,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h4,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h4,
  .m-core-title-with-icon.has-size-m
    .m-core-richtext
    .m-core-title-with-icon__content
    > h5,
  .m-core-richtext
    .m-core-title-with-icon.has-size-m
    .m-core-title-with-icon__content
    > h5 {
    margin-bottom: 24px;
  }
  .m-core-media-description {
    margin-top: 16px;
  }
  .m-core-cta-bar:not(.is-reversed) .m-core-cta-bar__list:first-child {
    margin-top: 16px;
  }
  .m-core-cta-bar.is-reversed .m-core-cta-bar__list:last-child {
    margin-top: 24px;
  }
  .m-core-cta-bar__item {
    margin-right: 16px;
  }
  .m-core-cta-bar__item {
    margin-bottom: 16px;
  }
  .m-core-m203-headline-intro {
    padding-top: 32px;
  }
  .m-core-m203-headline-intro {
    padding-bottom: 60px;
  }
  .m-core-m203-headline-intro__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .m-core-m203-headline-intro__wrapper {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-m203-headline-intro__headline {
    margin-bottom: 16px;
  }
  .m-core-m203-headline-intro__action {
    margin-left: 32px;
  }
  .m-core-m203-headline-intro__action {
    margin-bottom: 32px;
  }
  .m-core-m319-sharing {
    margin-bottom: -24px;
  }
  .m-core-m319-sharing__item:nth-last-child(n + 5),
  .m-core-m319-sharing__item:nth-last-child(n + 5)
    ~ .m-core-m319-sharing__item {
    padding-bottom: 24px;
  }
  .m-core-m319-sharing__item.is-whatsapp,
  .m-core-m319-sharing__item.is-facebook-messenger {
    display: none;
  }
  .m-core-m110-recipe-teaser__content-wrapper {
    padding: 16px;
  }
  .m-core-m110-recipe-teaser > .m-core-m317-save-recipe {
    right: 8px;
  }
  .m-core-m110-recipe-teaser > .m-core-m317-save-recipe {
    top: 8px;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: 100%;
    height: auto;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: calc(177.77778%);
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 140px;
  }
  .m-core-m110-recipe-teaser.has-size-s .m-core-m110-recipe-teaser__meta-list {
    width: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: calc(50% - 20px * 0.5);
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: 100%;
    height: auto;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 140px;
  }
  .m-core-m110-recipe-teaser.has-size-m .m-core-m110-recipe-teaser__meta-list {
    width: 50%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: 100%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: auto;
    height: 100%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: calc(177.77778%);
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 140px;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__meta-list {
    width: 100%;
  }
  .m-core-m106-additional-content-teaser__content {
    padding-left: 16px;
  }
  .m-core-m106-additional-content-teaser__content {
    padding-right: 16px;
  }
  .m-core-m106-additional-content-teaser__content > .a-core-icon-button {
    margin-top: 16px;
  }
  .m-core-m106-additional-content-teaser.has-context-recipes
    .m-core-m106-additional-content-teaser__content {
    height: 140px;
  }
  .m-core-m317-save-recipe__label {
    margin-top: 8px;
  }
  .m-core-m113-tag-teaser__image-wrapper {
    padding: 8px;
  }
  .m-core-m113-tag-teaser.has-dimmed-image
    .m-core-m113-tag-teaser__image-wrapper:after {
    top: 8px;
  }
  .m-core-m113-tag-teaser.has-dimmed-image
    .m-core-m113-tag-teaser__image-wrapper:after {
    right: 8px;
  }
  .m-core-m113-tag-teaser.has-dimmed-image
    .m-core-m113-tag-teaser__image-wrapper:after {
    bottom: 8px;
  }
  .m-core-m113-tag-teaser.has-dimmed-image
    .m-core-m113-tag-teaser__image-wrapper:after {
    left: 8px;
  }
  .m-core-m113-tag-teaser__badge {
    right: 16px;
  }
  .m-core-m113-tag-teaser__badge {
    top: 16px;
  }
  .m-core-m113-tag-teaser__link {
    padding: 16px;
  }
  .m-core-form-group > .a-core-form-field-label {
    margin-bottom: 8px;
  }
  .m-core-form-group__field {
    margin-bottom: 16px;
  }
  .m-core-form-group__footer > .a-core-form-field-counter {
    margin-left: 8px;
  }
  .m-core-form-layout {
    margin-bottom: 24px;
  }
  .m-core-form-layout.has-spacing {
    margin-bottom: 60px;
  }
  .m-core-form-layout.has-separator {
    padding-bottom: 48px;
  }
  .m-core-form-layout.has-separator {
    margin-bottom: 48px;
  }
  .m-core-form-text {
    margin-bottom: 60px;
  }
  .m-core-form-text.has-separator {
    padding-bottom: 48px;
  }
  .m-core-form-text.has-separator {
    margin-bottom: 48px;
  }
  .m-core-form-errors {
    margin-bottom: 60px;
  }
  .m-core-form-buttons {
    margin-top: 48px;
  }
  .m-core-form-buttons__item {
    margin-right: 16px;
  }
  .m-core-form-buttons__item {
    margin-bottom: 16px;
  }
  .m-core-form-buttons-login__element {
    margin-bottom: 24px;
  }
  .m-core-form-buttons-login__separator {
    margin-top: 24px;
  }
  .m-core-form-buttons-login__separator {
    margin-bottom: 24px;
  }
  .m-core-m115-product-teaser__content {
    padding: 16px;
  }
  .m-core-m115-product-teaser__footer {
    padding: 16px;
  }
  .m-core-navigation-content-nutrition {
    padding-top: 60px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .m-core-navigation-content-nutrition {
    margin-left: -10px;
    margin-right: -10px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__go-back {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container:not(:last-child) {
    padding-bottom: 0;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container:not(:first-child) {
    padding-top: 16px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container:not(:first-child):before {
    display: block;
  }
  .m-core-navigation-content-recipes {
    padding-top: 60px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .m-core-navigation-content-recipes {
    margin-left: -10px;
    margin-right: -10px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__go-back {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-content-recipes .m-core-navigation-content-recipes__image {
    width: 0%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-content-recipes .m-core-navigation-content-recipes__image {
    display: none;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__image.has-headline
    .a-core-navigation-content-image__headline {
    display: none;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__magazine {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__magazine {
    margin-bottom: 0;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__magazine
    .m-core-navigation-section__headline {
    display: block;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__search-cookbook {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__search-cookbook
    > .m-core-navigation-section:not(:last-child) {
    margin-bottom: 48px;
  }
  .m-core-navigation-content-retailer-offers {
    padding-top: 32px;
  }
  .m-core-navigation-content-retailer-offers {
    padding-bottom: 32px;
  }
  .m-core-navigation-content-retailer-offers {
    margin-left: -10px;
    margin-right: -10px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__store {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__image {
    width: 0%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__image {
    display: none;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__offers {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .m-core-navigation-section__headline,
  .m-core-navigation-section__copy,
  .m-core-navigation-section__buttons {
    margin-bottom: 24px;
  }
  .m-core-navigation-section__headline + .m-core-navigation-section__copy {
    margin-top: -8px;
  }
  .m-core-navigation-section__copy {
    display: block;
  }
  .m-core-navigation-section__buttons .a-core-button {
    width: inherit;
  }
  .m-core-navigation-section__link {
    margin-bottom: 8px;
  }
  .m-core-navigation-section-store__headline,
  .m-core-navigation-section-store__copy {
    margin-bottom: 24px;
  }
  .m-core-navigation-section-store__headline {
    display: block;
  }
  .m-core-navigation-section-store__headline-mobile {
    display: none;
  }
  .m-core-navigation-section-store__copy {
    display: block;
  }
  .m-core-navigation-section-store__store-information {
    padding: 0;
  }
  .m-core-navigation-section-store__store-information:before {
    display: none;
  }
  .m-core-navigation-section-store__store-information-trigger {
    display: none;
  }
  .m-core-navigation-section-store__store-information-trigger.m-core-navigation-section-store__store-information-trigger {
    display: none;
  }
  .m-core-navigation-section-store__store-information-inner {
    max-height: none;
    padding-right: 0;
  }
  .m-core-navigation-section-store__store-information-item {
    margin-bottom: 24px;
  }
  .m-core-navigation-section-store__links {
    display: none;
  }
  .m-core-navigation-section-store__link {
    margin-bottom: 8px;
  }
  .m-core-navigation-section-store__buttons-mobile {
    margin-top: 32px;
  }
  .m-core-navigation-section-store__buttons-mobile {
    display: none;
  }
  .m-core-navigation-section-store__buttons {
    margin-top: 32px;
  }
  .m-core-navigation-section-store__buttons {
    display: block;
  }
  .m-core-navigation-section-wide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .m-core-navigation-section-wide__inner {
    width: 50%;
  }
  .m-core-navigation-section-wide__inner.is-0 {
    padding-right: 10px;
  }
  .m-core-navigation-section-wide__inner.is-1 {
    padding-left: 10px;
  }
  .m-core-navigation-section-wide__headline {
    margin-bottom: 16px;
  }
  .m-core-navigation-section-wide__copy {
    margin-bottom: 24px;
  }
  .m-core-navigation-section-wide__copy {
    display: block;
  }
  .m-core-navigation-section-wide__buttons {
    margin-bottom: 24px;
  }
  .m-core-navigation-section-wide__buttons .a-core-button {
    width: inherit;
  }
  .m-core-navigation-section-wide__links {
    -webkit-box-ordinal-group: 21;
    -ms-flex-order: 20;
    order: 20;
    min-height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: -8px;
    margin-bottom: 24px;
  }
  .m-core-navigation-section-wide__link {
    margin-bottom: 8px;
  }
  .m-core-search-field__submit {
    right: 16px;
  }
  .m-core-toggle-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .m-core-toggle-container__toggle:not(:first-child) {
    border-top: 0;
  }
  .m-core-toggle-container__toggle {
    -webkit-box-ordinal-group: -1;
    -ms-flex-order: -2;
    order: -2;
    overflow: hidden;
    padding-top: 0;
  }
  .m-core-toggle-container__toggle:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 20;
    bottom: -50px;
    left: 50%;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(-45deg) translate(0, -50%);
    transform: rotate(-45deg) translate(0, -50%);
    margin-left: -16px;
    border-top: 1px solid #999999;
    border-right: 1px solid #999999;
    background: #eaeaea;
    opacity: 0;
    transition: bottom 250ms ease-in-out, opacity 250ms ease-in-out;
  }
  .m-core-toggle-container__toggle.is-active:after {
    bottom: -16px;
    opacity: 1;
    transition: bottom 250ms 250ms ease-in-out, opacity 250ms 250ms ease-in-out;
  }
  .m-core-toggle-container__content {
    -webkit-box-flex: 100%;
    -ms-flex: 100% 0 0px;
    flex: 100% 0 0;
    position: relative;
    z-index: 10;
    margin-top: -1px;
  }
  .m-core-toggle-container__content:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    background: #999999;
    opacity: 0;
    transition: opacity 250ms ease-in-out;
  }
  .m-core-toggle-container__content.is-active {
    padding-top: 24px;
    padding-bottom: 0;
    transition: opacity 250ms ease-in-out;
  }
  .m-core-toggle-container__content.is-active:before {
    opacity: 1;
  }
  .m-core-m117-common-teaser__content {
    padding: 16px;
  }
  .o-core-m201-image-gallery {
    padding-top: 60px;
  }
  .o-core-m201-image-gallery {
    padding-bottom: 60px;
  }
  .js .has-section-entry-animation .o-core-m201-image-gallery > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js
    .has-section-entry-animation
    .o-core-m201-image-gallery.is-in-viewport
    > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-core-m201-image-gallery__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m201-image-gallery__header {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m201-image-gallery__slider-wrapper {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m201-image-gallery__slider {
    margin-left: -10px;
    margin-right: -10px;
  }
  .o-core-m201-image-gallery__slider-container {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m201-image-gallery__slide:not(:last-of-type) {
    margin-right: 20px;
  }
  html.touchevents .o-core-m201-image-gallery__prev-button,
  html.touchevents .o-core-m201-image-gallery__next-button {
    display: block;
  }
  .o-core-m201-image-gallery__caption-list {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m103-image-copy-button-teaser {
    padding-top: 60px;
  }
  .o-core-m103-image-copy-button-teaser {
    padding-bottom: 60px;
  }
  .js .has-section-entry-animation .o-core-m103-image-copy-button-teaser > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js
    .has-section-entry-animation
    .o-core-m103-image-copy-button-teaser.is-in-viewport
    > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-core-m103-image-copy-button-teaser__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m103-image-copy-button-teaser__image {
    width: 33.33333%;
    margin-left: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m103-image-copy-button-teaser__image-wrapper {
    margin-bottom: 32px;
  }
  .o-core-m103-image-copy-button-teaser__content {
    width: 50%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m103-image-copy-button-teaser__content > .a-core-copy,
  .m-core-richtext .o-core-m103-image-copy-button-teaser__content > p,
  .m-core-richtext ul .o-core-m103-image-copy-button-teaser__content > li,
  .m-core-richtext ol .o-core-m103-image-copy-button-teaser__content > li {
    margin-bottom: 24px;
  }
  .o-core-m103-image-copy-button-teaser__content > .a-core-button {
    width: auto;
  }
  .o-core-m103-image-copy-button-teaser__sublinks {
    margin-top: 24px;
  }
  .o-core-m109-content-teaser {
    padding-top: 60px;
  }
  .o-core-m109-content-teaser {
    padding-bottom: 60px;
  }
  .js .has-section-entry-animation .o-core-m109-content-teaser > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js
    .has-section-entry-animation
    .o-core-m109-content-teaser.is-in-viewport
    > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-core-m109-content-teaser__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m109-content-teaser__item {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m109-content-teaser__item + .o-core-m109-content-teaser__item {
    margin-top: 24px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner {
    margin-left: -10px;
    margin-right: -10px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner
    .o-core-m109-content-teaser__image {
    width: 40%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner
    .o-core-m109-content-teaser__content {
    width: 60%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m109-content-teaser__header {
    padding-top: 16px;
  }
  .o-core-m109-content-teaser__header > .a-core-copy,
  .m-core-richtext .o-core-m109-content-teaser__header > p,
  .m-core-richtext ul .o-core-m109-content-teaser__header > li,
  .m-core-richtext ol .o-core-m109-content-teaser__header > li {
    margin-bottom: 16px;
  }
  .o-core-m109-content-teaser__content > .a-core-copy,
  .m-core-richtext .o-core-m109-content-teaser__content > p,
  .m-core-richtext ul .o-core-m109-content-teaser__content > li,
  .m-core-richtext ol .o-core-m109-content-teaser__content > li {
    margin-top: 16px;
  }
  .o-core-m109-content-teaser__content > .a-core-copy,
  .m-core-richtext .o-core-m109-content-teaser__content > p,
  .m-core-richtext ul .o-core-m109-content-teaser__content > li,
  .m-core-richtext ol .o-core-m109-content-teaser__content > li {
    margin-bottom: 8px;
  }
  .o-core-m202-media-richtext {
    padding-top: 60px;
  }
  .o-core-m202-media-richtext {
    padding-bottom: 60px;
  }
  .js .has-section-entry-animation .o-core-m202-media-richtext > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js
    .has-section-entry-animation
    .o-core-m202-media-richtext.is-in-viewport
    > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-core-m202-media-richtext__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m202-media-richtext__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m202-media-richtext__media {
    margin-bottom: 24px;
  }
  .o-core-m202-media-richtext__media.has-extra-spacing {
    margin-bottom: 48px;
  }
  .o-core-side-by-side {
    margin-left: -10px;
    margin-right: -10px;
  }
  .o-core-side-by-side__element {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-section-decoration__item {
    position: absolute;
    display: block;
    width: 380px;
    height: auto;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
  .o-core-section-decoration__item,
  .o-core-section-decoration__item.is-left {
    left: -60px;
  }
  .o-core-section-decoration__item.is-right {
    left: calc(100% + 60px);
  }
  .o-core-section-decoration__item,
  .o-core-section-decoration__item.is-top {
    top: 0;
  }
  .o-core-section-decoration__item.is-middle {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .o-core-section-decoration__item.is-bottom {
    top: auto;
    bottom: 0;
  }
  .o-core-m205-text-stage {
    padding-top: 60px;
  }
  .o-core-m205-text-stage {
    padding-bottom: 60px;
  }
  .o-core-m205-text-stage.has-cutout {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none;
  }
  .o-core-m205-text-stage__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m205-text-stage__col {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m205-text-stage.has-cutout .o-core-m205-text-stage__col {
    width: 58.33333%;
    margin-left: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m205-text-stage.has-cutout .o-core-m205-text-stage__col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .o-core-m205-text-stage__subline {
    margin-top: 24px;
  }
  .o-core-m205-text-stage__image {
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m205-text-stage__image {
    display: block;
  }
  .o-core-legacy-container-iframe {
    padding-top: 60px;
  }
  .o-core-legacy-container-iframe {
    padding-bottom: 60px;
  }
  .o-core-legacy-container-iframe__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-legacy-container-iframe__wrapper {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-legacy-container-iframe__mobile-overlay {
    display: none;
  }
  .o-core-m204-image-video-stage.is-narrow
    .o-core-m204-image-video-stage__wrapper {
    max-height: 70vh;
  }
  .o-core-m204-image-video-stage__close-button {
    top: 16px;
  }
  .o-core-m204-image-video-stage__close-button {
    right: 16px;
  }
  .o-core-m204-image-video-stage__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m204-image-video-stage__content {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m204-image-video-stage.is-wide
    .o-core-m204-image-video-stage__content {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m208-image-stage-portrait__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    overflow: hidden;
  }
  .o-core-m208-image-stage-portrait__media,
  .o-core-m208-image-stage-portrait__content {
    width: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
  }
  .o-core-m208-image-stage-portrait__media {
    margin-right: -100%;
  }
  .o-core-m208-image-stage-portrait__image-wrapper {
    position: relative;
    width: 38.09524%;
  }
  .o-core-m208-image-stage-portrait__image-wrapper:before {
    padding-bottom: 133.33333%;
  }
  .o-core-m208-image-stage-portrait__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m208-image-stage-portrait__content-wrapper {
    width: 58.33333%;
    margin-left: 41.66667%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .js .has-section-entry-animation .o-core-m209-category > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js .has-section-entry-animation .o-core-m209-category.is-in-viewport > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-core-m209-category {
    padding-top: 48px;
  }
  .o-core-m209-category {
    padding-bottom: 48px;
  }
  .o-core-m209-category__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m209-category__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-editorial-teaser-slider {
    padding-top: 60px;
  }
  .o-core-editorial-teaser-slider {
    padding-bottom: 60px;
  }
  .js .has-section-entry-animation .o-core-editorial-teaser-slider > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js
    .has-section-entry-animation
    .o-core-editorial-teaser-slider.is-in-viewport
    > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-core-editorial-teaser-slider__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-editorial-teaser-slider__content {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-editorial-teaser-slider__button {
    display: block;
  }
  .o-core-editorial-teaser-slider__headline,
  .o-core-editorial-teaser-slider__copy {
    margin-bottom: 16px;
  }
  .o-core-editorial-teaser-slider__mobile-button {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-editorial-teaser-slider__mobile-button {
    margin-top: 24px;
  }
  .o-core-editorial-teaser-slider__mobile-button {
    display: none;
  }
  .o-core-editorial-teaser-slider__slider-wrapper {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-teaser-wall.has-spacing {
    padding-top: 60px;
  }
  .o-core-teaser-wall.has-spacing {
    padding-bottom: 32px;
  }
  .o-core-teaser-wall__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-teaser-wall__main {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-teaser-wall__teasers {
    margin-bottom: -32px;
  }
  .m-core-expander.is-disabled-for-mobileWide .o-core-teaser-wall__teasers {
    margin-bottom: -32px;
  }
  .o-core-teaser-wall__teasers {
    margin-left: -10px;
    margin-right: -10px;
  }
  .o-core-teaser-wall.has-size-s
    .o-core-teaser-wall__teasers
    .o-core-teaser-wall__teaser {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-teaser-wall.has-size-m
    .o-core-teaser-wall__teasers
    .o-core-teaser-wall__teaser {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-teaser-wall__teaser > .m-core-m104-single-offer-teaser,
  .o-core-teaser-wall__teaser > .m-core-m108-offer-recipe-teaser,
  .o-core-teaser-wall__teaser > .m-core-m113-tag-teaser,
  .o-core-teaser-wall__teaser > .m-core-m110-recipe-teaser,
  .o-core-teaser-wall__teaser > .m-core-m106-additional-content-teaser {
    margin-bottom: 32px;
  }
  .o-core-overlay {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .o-core-overlay__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-overlay__grid {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .o-core-overlay__span {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-overlay__span {
    height: auto;
    max-height: calc(100% - 120px);
  }
  .o-core-overlay.is-full-viewport .o-core-overlay__span {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-overlay.is-full-viewport .o-core-overlay__span {
    max-height: 100%;
  }
  .o-core-overlay__span > .a-core-icon-only-button {
    right: 24px;
    top: 24px;
  }
  .o-core-overlay__content-wrapper {
    margin-left: -10px;
    margin-right: -10px;
  }
  .o-core-overlay__content {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-magazine-stage__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-magazine-stage__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-magazine-stage__flap {
    padding-left: 40px;
  }
  .o-core-magazine-stage__flap {
    padding-right: 40px;
  }
  .o-core-magazine-stage__content {
    padding-top: 32px;
  }
  .o-core-magazine-stage__content {
    padding-bottom: 32px;
  }
  .o-core-magazine-stage__content {
    padding-left: 0;
    padding-right: 0;
  }
  .o-core-form-wrapper {
    padding-top: 60px;
  }
  .o-core-form-wrapper {
    padding-bottom: 60px;
  }
  .o-core-form-wrapper__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-form-wrapper__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-form-notification {
    margin-bottom: 60px;
  }
  .o-core-form-notification.has-grid {
    margin-top: 60px;
  }
  .o-core-form-notification__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-form-notification__grid-inner {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-form-notification__content {
    padding-top: 24px;
  }
  .o-core-form-notification__content {
    padding-bottom: 24px;
  }
  .o-core-user-account-interactions {
    padding-top: 60px;
  }
  .o-core-user-account-interactions {
    padding-bottom: 60px;
  }
  .o-core-user-account-interactions__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-user-account-interactions__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m322-disclaimer {
    padding-top: 60px;
  }
  .o-core-m322-disclaimer {
    padding-bottom: 60px;
  }
  .js .has-section-entry-animation .o-core-m322-disclaimer > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js
    .has-section-entry-animation
    .o-core-m322-disclaimer.is-in-viewport
    > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-core-m322-disclaimer__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m322-disclaimer__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m401-header__meta {
    position: absolute;
    right: 8px;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet {
    margin-right: -7px;
    top: 0;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-dropdown-label {
    display: block;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-list {
    background: #404245;
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 10;
    width: 200px;
    display: block;
    max-height: 0;
    transition: max-height 250ms ease-in-out;
    overflow: hidden;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-item {
    margin: 0 40px 0 16px;
    font-size: 14px;
    text-align: right;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-item:first-child {
    margin-top: 46px;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-item:last-child {
    margin-bottom: 9px;
  }
  .o-core-m401-header__meta-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .o-core-m401-header__meta-item {
    margin: 0 0 0 20px;
  }
  .o-core-m401-header__meta-item > .a-core-nav-link {
    padding-right: 0;
  }
  .o-core-m401-header__meta-item > .a-core-nav-link .a-core-icon {
    display: none;
  }
  .o-core-m401-header__bar {
    display: block;
  }
  .o-core-m401-header__bar-grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m401-header__bar-main {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m401-header__nav-item-link {
    padding-left: 40px;
  }
  .o-core-m401-header__nav-item-link > .a-core-icon {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .o-core-m401-header__nav-item-link:before {
    left: 40px;
    width: calc(100% - 40px);
  }
  .o-core-m401-header.has-111-jahre-logo .o-core-m401-header__nav-item-link {
    padding-left: 0;
  }
  .o-core-m401-header.has-111-jahre-logo
    .o-core-m401-header__nav-item-link
    > .a-core-icon {
    display: none;
  }
  .o-core-m401-header__flyout {
    background-color: #343638;
    -webkit-transform: none;
    transform: none;
    position: relative;
    z-index: 900;
    height: inherit;
    transition: opacity 1ms, -webkit-transform 450ms ease-in-out;
    transition: transform 450ms ease-in-out, opacity 1ms;
    transition: transform 450ms ease-in-out, opacity 1ms,
      -webkit-transform 450ms ease-in-out;
  }
  .o-core-m401-header__flyout.is-active {
    box-shadow: none;
    overflow-y: visible;
  }
  .o-core-m401-header__flyout.is-active .o-core-m401-header__flyout-main {
    max-height: 800px;
    opacity: 1;
  }
  .o-core-m401-header__flyout.is-active .o-core-m401-header__flyout-close {
    height: 40px;
    opacity: 1;
  }
  .o-core-m401-header__flyout-inner {
    max-width: 1600px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
  }
  .o-core-m401-header__flyout-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m401-header__flyout-main {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: opacity 450ms ease-in-out, max-height 450ms ease-in-out;
  }
  .has-smartbanner .o-core-m401-header__flyout-main {
    padding-top: 0;
  }
  .o-core-m401-header__flyout-go-back {
    display: none;
  }
  .o-core-m401-header__flyout-content {
    transition: opacity 450ms ease-in-out, max-height 450ms ease-in-out;
    padding: 0;
  }
  .o-core-m401-header__flyout-content.is-active {
    max-height: 800px;
  }
  .o-core-m401-header__flyout-close {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 450ms ease-in-out, height 450ms ease-in-out;
    position: relative;
    z-index: 20;
    background: #404245;
  }
  .o-core-m401-header__flyout-close {
    padding-right: 34px;
  }
  .o-core-m401-header__mobile-bar {
    display: none;
  }
  .o-core-m401-header__mobile-bar-grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m401-header__mobile-nav {
    display: none;
  }
  .o-core-m401-header__main-nav {
    margin-top: 32px;
  }
  .o-core-m401-header__mobile-nav-grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m401-header__mobile-nav-main {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m401-header__mobile-retailer-offers-container {
    margin-top: 32px;
  }
  .o-core-m401-header {
    height: auto;
  }
  .o-core-m323-global-notification__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m323-global-notification__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m323-global-notification__main .a-core-icon-only-button {
    top: 16px;
  }
  .o-core-m323-global-notification__main .a-core-button {
    margin-top: 16px;
  }
  .o-core-m323-global-notification__content {
    padding-top: 16px;
  }
  .o-core-m323-global-notification__content {
    padding-bottom: 16px;
  }
  .o-core-m402-footer {
    padding-top: 48px;
  }
  .o-core-m402-footer {
    padding-bottom: 60px;
  }
  .o-core-m402-footer__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m402-footer__main {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m402-footer__wrapper {
    margin-left: -10px;
    margin-right: -10px;
  }
  .o-core-m402-footer__contact,
  .o-core-m402-footer__nav {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m402-footer__newsletter {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m402-footer__legal {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m402-footer__contact {
    margin-bottom: 24px;
  }
  .o-core-m402-footer__contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .o-core-m402-footer__service {
    margin-bottom: 24px;
  }
  .o-core-m402-footer__service {
    width: 50%;
    padding-right: 10px;
  }
  .o-core-m402-footer__service-item:not(:last-child) {
    margin-bottom: 16px;
  }
  .o-core-m402-footer__social {
    margin-bottom: 24px;
  }
  .o-core-m402-footer__social {
    width: 50%;
    padding-left: 10px;
  }
  .o-core-m402-footer__social-item {
    margin-bottom: 16px;
  }
  .o-core-m402-footer__apps {
    margin-bottom: 16px;
    -webkit-font-smoothing: antialiased;
  }
  .o-core-m402-footer__apps {
    margin-top: 0;
  }
  .o-core-m402-footer__apps .a-core-copy,
  .o-core-m402-footer__apps .m-core-richtext p,
  .m-core-richtext .o-core-m402-footer__apps p,
  .o-core-m402-footer__apps .m-core-richtext ul li,
  .m-core-richtext ul .o-core-m402-footer__apps li,
  .o-core-m402-footer__apps .m-core-richtext ol li,
  .m-core-richtext ol .o-core-m402-footer__apps li {
    margin-bottom: 16px;
  }
  .o-core-m402-footer__apps-item {
    margin-bottom: 16px;
  }
  .o-core-m402-footer__newsletter {
    margin-bottom: 32px;
  }
  .o-core-m402-footer__newsletter > .a-core-headline,
  .m-core-richtext .o-core-m402-footer__newsletter > h1,
  .m-core-richtext .o-core-m402-footer__newsletter > h2,
  .m-core-richtext .o-core-m402-footer__newsletter > h3,
  .m-core-richtext .o-core-m402-footer__newsletter > h4,
  .m-core-richtext .o-core-m402-footer__newsletter > h5 {
    margin-bottom: 16px;
  }
  .o-core-m402-footer__newsletter-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .o-core-m402-footer__newsletter-form > .a-core-button {
    width: auto;
  }
  .o-core-m402-footer__newsletter-input {
    padding-left: 16px;
  }
  .o-core-m402-footer__newsletter-input {
    padding-right: 16px;
  }
  .o-core-m402-footer__newsletter-input {
    margin: 0 16px 0 0;
  }
  .o-core-m402-footer__nav:after {
    margin-top: 32px;
  }
  .o-core-m402-footer__nav:after {
    margin-bottom: 32px;
  }
  .o-core-m402-footer__nav-list {
    -webkit-column-gap: 20px;
    column-gap: 20px;
  }
  .o-core-m402-footer__nav-list {
    -webkit-column-fill: balance;
    column-fill: balance;
    -webkit-column-count: 2;
    column-count: 2;
  }
  .o-core-m402-footer__nav-item {
    margin-bottom: 16px;
  }
  .o-core-m402-footer__legal-list {
    margin: -16px;
  }
  .o-core-m402-footer__legal-item {
    padding: 16px;
  }
  .o-core-m406-breadcrumb__wrapper {
    background: rgba(0, 0, 0, 0.5);
  }
  .o-core-m406-breadcrumb.is-pos-absolute .o-core-m406-breadcrumb__wrapper {
    position: absolute;
    z-index: 800;
    width: 100%;
  }
  .o-core-m406-breadcrumb__inner:before,
  .o-core-m406-breadcrumb__inner:after {
    display: none;
  }
  .o-core-m406-breadcrumb__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m406-breadcrumb__main {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m406-breadcrumb__item {
    opacity: 1;
  }
  .o-core-global-notification-area {
    margin-top: 0;
    margin-bottom: 0;
  }
  .o-recipes-m316-tagcloud {
    padding-top: 60px;
  }
  .o-recipes-m316-tagcloud {
    padding-bottom: 60px;
  }
  .js .has-section-entry-animation .o-recipes-m316-tagcloud > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js
    .has-section-entry-animation
    .o-recipes-m316-tagcloud.is-in-viewport
    > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-recipes-m316-tagcloud__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-recipes-m316-tagcloud__col {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-recipes-m316-tagcloud__wrapper {
    margin-bottom: -16px;
  }
  .o-recipes-m316-tagcloud__wrapper > .a-core-tag-button {
    margin-right: 16px;
  }
  .o-recipes-m316-tagcloud__wrapper > .a-core-tag-button {
    margin-bottom: 16px;
  }
  .o-core-m211-campaign-image-text {
    padding-top: 60px;
  }
  .o-core-m211-campaign-image-text {
    padding-bottom: 60px;
  }
  .js .has-section-entry-animation .o-core-m211-campaign-image-text > div {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translateY(150px) scale(1);
    transform: translateY(150px) scale(1);
    opacity: 0;
    transition: opacity 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out,
      -webkit-transform 500ms ease-in-out;
  }
  .js
    .has-section-entry-animation
    .o-core-m211-campaign-image-text.is-in-viewport
    > div {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .o-core-m211-campaign-image-text__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m211-campaign-image-text__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .o-core-m211-campaign-image-text__media:not(:last-child) {
    margin-bottom: 24px;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image)
    .o-core-m212-banner-stage__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image)
    .o-core-m212-banner-stage__main {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 450px) and (min-width: 700px) {
  .o-core-m202-media-richtext__media.is-left {
    padding-right: 10px;
  }
  .o-core-m202-media-richtext__media.is-left {
    margin-right: 10px;
  }
  .o-core-m202-media-richtext__media.is-right {
    padding-left: 10px;
  }
  .o-core-m202-media-richtext__media.is-right {
    margin-left: 10px;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    padding-right: 10px;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    margin-right: 10px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    padding-left: 10px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    margin-left: 10px;
  }
}
@media (min-width: 700px) and (min-width: 700px) {
  .m-core-navigation-content-nutrition {
    padding-top: 32px;
  }
  .m-core-navigation-content-nutrition {
    padding-bottom: 32px;
  }
  .m-core-navigation-content-recipes {
    padding-top: 32px;
  }
  .m-core-navigation-content-recipes {
    padding-bottom: 32px;
  }
  .o-core-m401-header__meta {
    right: 10px;
  }
  .o-core-m401-header__flyout-grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .o-core-m401-header__flyout-main {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 750px) {
  .o-core-m401-header__nav-item {
    padding-right: 30px;
  }
}
@media (min-width: 820px) {
  .o-core-m401-header.has-111-jahre-logo .o-core-m401-header__nav {
    padding-left: 156px;
  }
}
@media (min-width: 890px) {
  .o-core-m401-header__nav-item {
    -webkit-box-flex: 1;
    -ms-flex: auto 0 1;
    flex: auto 0 1;
  }
}
@media (min-width: 980px) and (min-width: 450px) {
  .o-core-m204-image-video-stage__flap {
    left: -32px;
  }
  .o-core-m204-image-video-stage__flap {
    right: -32px;
  }
}
@media (min-width: 700px) and (min-width: 980px) {
  .o-core-m401-header__meta {
    right: 12px;
  }
  .o-core-m401-header__flyout-grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m401-header__flyout-main {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (min-width: 980px) {
  .x-breakpoint-min-desktopSmall {
    display: block;
  }
  .a-core-button {
    font-size: 20px;
    line-height: 20px;
  }
  .a-core-button.is-small {
    font-size: 16px;
    line-height: 16px;
  }
  .a-core-icon-button {
    font-size: 20px;
    line-height: 20px;
  }
  .a-core-icon-button.is-subtle {
    font-size: 16px;
    line-height: 16px;
  }
  .a-core-icon-button-multiline {
    font-size: 20px;
    line-height: 20px;
  }
  .a-core-icon-only-button {
    font-size: 20px;
    line-height: 20px;
  }
  .a-core-copy,
  .m-core-richtext p,
  .m-core-richtext ul li,
  .m-core-richtext ol li {
    font-size: 16px;
    line-height: 24px;
  }
  .a-core-copy.is-highlight,
  .m-core-richtext p.is-highlight,
  .m-core-richtext ul li.is-highlight,
  .m-core-richtext ol li.is-highlight {
    font-size: 24px;
    line-height: 36px;
  }
  .a-core-copy.is-longread,
  .m-core-richtext p,
  .m-core-richtext ul li.is-longread,
  .m-core-richtext ol li.is-longread {
    font-size: 18px;
    line-height: 28px;
  }
  .a-core-copy.is-shy,
  .m-core-richtext p.is-shy,
  .m-core-richtext ul li.is-shy,
  .m-core-richtext ol li.is-shy {
    font-size: 16px;
    line-height: 24px;
  }
  .a-core-copy.is-static,
  .m-core-richtext p.is-static,
  .m-core-richtext ul li.is-static,
  .m-core-richtext ol li.is-static {
    font-size: 16px;
    line-height: 24px;
  }
  .a-core-copy.is-small,
  .m-core-richtext p.is-small,
  .m-core-richtext ul li.is-small,
  .m-core-richtext ol li.is-small {
    font-size: 14px;
    line-height: 20px;
  }
  .a-core-copy.is-small-static,
  .m-core-richtext p.is-small-static,
  .m-core-richtext ul li.is-small-static,
  .m-core-richtext ol li.is-small-static {
    font-size: 14px;
    line-height: 20px;
  }
  .a-core-copy.is-extra-small,
  .m-core-richtext p.is-extra-small,
  .m-core-richtext ul li.is-extra-small,
  .m-core-richtext ol li.is-extra-small {
    font-size: 12px;
    line-height: 16px;
  }
  .a-core-headline.is-hero,
  .m-core-richtext h1.is-hero,
  .m-core-richtext h2.is-hero,
  .m-core-richtext h3.is-hero,
  .m-core-richtext h4.is-hero,
  .m-core-richtext h5.is-hero {
    font-size: 100px;
    line-height: 100px;
  }
  .a-core-headline.is-highlight,
  .m-core-richtext h1.is-highlight,
  .m-core-richtext h2.is-highlight,
  .m-core-richtext h3.is-highlight,
  .m-core-richtext h4.is-highlight,
  .m-core-richtext h5.is-highlight {
    font-size: 72px;
    line-height: 72px;
  }
  .a-core-headline.is-main,
  .m-core-richtext h1,
  .m-core-richtext h2.is-main,
  .m-core-richtext h3.is-main,
  .m-core-richtext h4.is-main,
  .m-core-richtext h5.is-main {
    font-size: 60px;
    line-height: 60px;
  }
  .a-core-headline.is-main-static,
  .m-core-richtext h1.is-main-static,
  .m-core-richtext h2.is-main-static,
  .m-core-richtext h3.is-main-static,
  .m-core-richtext h4.is-main-static,
  .m-core-richtext h5.is-main-static {
    font-size: 52px;
    line-height: 52px;
  }
  .a-core-headline.is-section,
  .m-core-richtext h1.is-section,
  .m-core-richtext h2,
  .m-core-richtext h3.is-section,
  .m-core-richtext h4.is-section,
  .m-core-richtext h5.is-section {
    font-size: 40px;
    line-height: 40px;
  }
  .a-core-headline.is-section-static,
  .m-core-richtext h1.is-section-static,
  .m-core-richtext h2.is-section-static,
  .m-core-richtext h3.is-section-static,
  .m-core-richtext h4.is-section-static,
  .m-core-richtext h5.is-section-static {
    font-size: 40px;
    line-height: 40px;
  }
  .a-core-headline.is-article,
  .m-core-richtext h1.is-article,
  .m-core-richtext h2.is-article,
  .m-core-richtext h3.is-article,
  .m-core-richtext h4.is-article,
  .m-core-richtext h5.is-article {
    font-size: 32px;
    line-height: 32px;
  }
  .a-core-headline.is-article-static,
  .m-core-richtext h1.is-article-static,
  .m-core-richtext h2.is-article-static,
  .m-core-richtext h3.is-article-static,
  .m-core-richtext h4.is-article-static,
  .m-core-richtext h5.is-article-static {
    font-size: 32px;
    line-height: 32px;
  }
  .a-core-headline.is-category,
  .m-core-richtext h1.is-category,
  .m-core-richtext h2.is-category,
  .m-core-richtext h3,
  .m-core-richtext h4.is-category,
  .m-core-richtext h5.is-category {
    font-size: 24px;
    line-height: 24px;
  }
  .a-core-headline.is-entry,
  .m-core-richtext h1.is-entry,
  .m-core-richtext h2.is-entry,
  .m-core-richtext h3.is-entry,
  .m-core-richtext h4,
  .m-core-richtext h5.is-entry {
    font-size: 20px;
    line-height: 20px;
  }
  .a-core-headline.is-entry-static,
  .m-core-richtext h1.is-entry-static,
  .m-core-richtext h2.is-entry-static,
  .m-core-richtext h3.is-entry-static,
  .m-core-richtext h4.is-entry-static,
  .m-core-richtext h5.is-entry-static {
    font-size: 20px;
    line-height: 20px;
  }
  .a-core-headline.is-fragment-static,
  .m-core-richtext h1.is-fragment-static,
  .m-core-richtext h2.is-fragment-static,
  .m-core-richtext h3.is-fragment-static,
  .m-core-richtext h4.is-fragment-static,
  .m-core-richtext h5.is-fragment-static {
    font-size: 18px;
    line-height: 18px;
  }
  .a-core-listing li,
  .m-core-richtext ul li,
  .m-core-richtext ol li,
  .a-core-listing__item,
  .m-core-richtext ul li,
  .m-core-richtext ol li {
    font-size: 18px;
    line-height: 28px;
  }
  .a-core-m207-section-separator.has-grid .a-core-m207-section-separator__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .a-core-m207-section-separator.has-grid .a-core-m207-section-separator__col {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .a-core-circular-icon {
    width: 80px;
    height: 80px;
  }
  .a-core-circular-icon .a-core-icon {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
  }
  .a-core-circular-icon.is-small {
    width: 44px;
    height: 44px;
  }
  .a-core-circular-icon.is-small .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-icon.is-medium {
    width: 60px;
    height: 60px;
  }
  .a-core-circular-icon.is-medium .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-icon.is-medium-shy {
    width: 60px;
    height: 60px;
  }
  .a-core-circular-icon.is-medium-shy .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-icon.is-extra-large {
    width: 120px;
    height: 120px;
  }
  .a-core-circular-icon.is-extra-large .a-core-icon {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
  }
  .a-core-circular-icon-button__label {
    font-size: 20px;
    line-height: 20px;
  }
  .a-core-circular-value {
    width: 80px;
    height: 80px;
  }
  .a-core-circular-value .a-core-icon {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
  }
  .a-core-circular-value.is-small {
    width: 44px;
    height: 44px;
  }
  .a-core-circular-value.is-small .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-value.is-medium {
    width: 60px;
    height: 60px;
  }
  .a-core-circular-value.is-medium .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-value.is-medium-shy {
    width: 60px;
    height: 60px;
  }
  .a-core-circular-value.is-medium-shy .a-core-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
  }
  .a-core-circular-value.is-extra-large {
    width: 120px;
    height: 120px;
  }
  .a-core-circular-value.is-extra-large .a-core-icon {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
  }
  .a-core-circular-value__primary {
    top: 19px;
    font-size: 32px;
  }
  .a-core-circular-value__secondary {
    top: 50px;
    font-size: 14px;
  }
  .a-core-tag-button {
    font-size: 14px;
    line-height: 20px;
  }
  .a-core-link {
    font-size: 16px;
    line-height: 24px;
  }
  .a-core-form-field-checkbox__label {
    font-size: 16px;
    line-height: 24px;
  }
  .a-core-form-field-checkbox__label {
    padding-top: 4px;
  }
  .a-core-form-field-label {
    font-size: 20px;
    line-height: 20px;
  }
  .a-core-form-field-label:not(.is-required):after {
    font-size: 12px;
    line-height: 16px;
  }
  .a-core-form-field-message {
    font-size: 12px;
    line-height: 16px;
  }
  .a-core-form-field-counter {
    font-size: 12px;
    line-height: 16px;
  }
  .a-core-form-field-radio__label {
    font-size: 16px;
    line-height: 24px;
  }
  .a-core-form-field-radio__label {
    padding-top: 4px;
  }
  .a-core-nav-link {
    font-size: 16px;
    line-height: 16px;
  }
  html.touchevents .a-core-nav-link:hover {
    color: #1b66b3;
  }
  html.touchevents .a-core-nav-link.has-context-color-dark:hover {
    color: #fce531;
  }
  .a-core-nav-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .m-core-expander.is-disabled-for-desktopSmall .m-core-expander__expand,
  .m-core-expander.is-disabled-for-desktopSmall .m-core-expander__collapse {
    display: none;
  }
  .m-core-section-title {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-m102-teaser-slider {
    margin-left: -12px;
    margin-right: -12px;
  }
  .m-core-m102-teaser-slider__slide.is-next
    + .m-core-m102-teaser-slider__slide {
    opacity: 1;
  }
  .m-core-m102-teaser-slider__slide.has-size-s {
    width: 25%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-m102-teaser-slider__slide.has-size-m {
    width: 29.16667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-m102-teaser-slider__slide.has-size-xl {
    width: 66.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-m102-teaser-slider__offset-before {
    width: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-m102-teaser-slider__offset-after {
    width: 8.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-m108-offer-recipe-teaser__footer {
    padding: 0 32px 43px 32px;
  }
  .m-core-m203-headline-intro__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .m-core-m203-headline-intro__wrapper {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-m203-headline-intro__headline {
    font-size: 60px;
    line-height: 60px;
  }
  .m-core-m317-save-recipe {
    font-size: 20px;
    line-height: 20px;
  }
  .m-core-navigation-content-nutrition {
    margin-left: -12px;
    margin-right: -12px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__go-back {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container {
    width: 33.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container:not(:first-child) {
    padding-top: 0;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container:not(:first-child):before {
    display: none;
  }
  .m-core-navigation-content-recipes {
    margin-left: -12px;
    margin-right: -12px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__go-back {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-content-recipes .m-core-navigation-content-recipes__image {
    width: 33.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-content-recipes .m-core-navigation-content-recipes__image {
    display: block;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__magazine {
    width: 33.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__search-cookbook {
    width: 33.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-content-retailer-offers {
    margin-left: -12px;
    margin-right: -12px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__store {
    width: 33.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__image {
    width: 33.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__image {
    display: block;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__offers {
    width: 33.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .m-core-navigation-section-wide__inner {
    width: 100%;
  }
  .m-core-navigation-section-wide__inner.is-0 {
    padding-right: 0;
  }
  .m-core-navigation-section-wide__inner.is-1 {
    padding-left: 0;
  }
  .m-core-navigation-section-wide__copy {
    min-height: 72px;
  }
  .m-core-navigation-section-wide__links {
    margin-top: 0;
    margin-bottom: 0;
  }
  .m-core-search-field__input {
    font-size: 16px;
    line-height: 24px;
  }
  .m-core-m117-common-teaser__content > .a-core-headline,
  .m-core-richtext .m-core-m117-common-teaser__content > h1,
  .m-core-richtext .m-core-m117-common-teaser__content > h2,
  .m-core-richtext .m-core-m117-common-teaser__content > h3,
  .m-core-richtext .m-core-m117-common-teaser__content > h4,
  .m-core-richtext .m-core-m117-common-teaser__content > h5 {
    margin-top: 48px;
  }
  .m-core-m117-common-teaser__footer {
    padding: 0 32px 43px 32px;
  }
  .o-core-m201-image-gallery__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m201-image-gallery__header {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m201-image-gallery__slider-wrapper {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m201-image-gallery__slider {
    margin-left: -12px;
    margin-right: -12px;
  }
  .o-core-m201-image-gallery__slider-container {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m201-image-gallery__slide:not(:last-of-type) {
    margin-right: 24px;
  }
  .o-core-m201-image-gallery__caption-list {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m103-image-copy-button-teaser__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m103-image-copy-button-teaser__image {
    width: 25%;
    margin-left: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m103-image-copy-button-teaser__content {
    width: 41.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m109-content-teaser__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m109-content-teaser__item {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner {
    margin-left: -12px;
    margin-right: -12px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner
    .o-core-m109-content-teaser__image {
    width: 37.5%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner
    .o-core-m109-content-teaser__content {
    width: 62.5%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m202-media-richtext__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m202-media-richtext__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-side-by-side {
    margin-left: -12px;
    margin-right: -12px;
  }
  .o-core-side-by-side__element {
    width: 50%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-section-decoration__item {
    width: 450px;
  }
  .o-core-section-decoration__item,
  .o-core-section-decoration__item.is-left {
    left: 0;
  }
  .o-core-section-decoration__item.is-right {
    left: 100%;
  }
  .o-core-m205-text-stage__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m205-text-stage__col {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m205-text-stage.has-cutout .o-core-m205-text-stage__col {
    width: 58.33333%;
    margin-left: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m205-text-stage__image {
    width: 25%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-legacy-container-iframe__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-legacy-container-iframe__wrapper {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m204-image-video-stage {
    margin-bottom: -160px;
    transition: margin-bottom 900ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .o-core-m204-image-video-stage__wrapper {
    max-height: calc(100vh - 150px);
  }
  .o-core-m204-image-video-stage.is-narrow
    .o-core-m204-image-video-stage__wrapper {
    max-height: 70vh;
  }
  .o-core-m204-image-video-stage__play-button > .a-core-circular-icon {
    top: calc(50% - 82.5px);
  }
  .o-core-m204-image-video-stage__inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .o-core-m204-image-video-stage__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m204-image-video-stage__grid {
    position: relative;
    height: 100%;
  }
  .o-core-m204-image-video-stage__content {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m204-image-video-stage__content {
    position: relative;
    height: 100%;
  }
  .o-core-m204-image-video-stage.is-wide
    .o-core-m204-image-video-stage__content {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m204-image-video-stage__flap {
    left: -32px;
    right: -32px;
    width: auto;
    height: 165px;
    transition: -webkit-transform 900ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 900ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 900ms cubic-bezier(0.645, 0.045, 0.355, 1),
      -webkit-transform 900ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .o-core-m204-image-video-stage__flap:before {
    content: "";
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    bottom: 0;
    background: #ffffff;
  }
  .o-core-m204-image-video-stage.is-playing,
  .o-core-m204-image-video-stage.has-reached-end-card {
    margin-bottom: 0;
  }
  .o-core-m204-image-video-stage.is-playing
    .o-core-m204-image-video-stage__flap,
  .o-core-m204-image-video-stage.has-reached-end-card
    .o-core-m204-image-video-stage__flap {
    -webkit-transform: translateY(165px);
    transform: translateY(165px);
  }
  .o-core-m204-image-video-stage.is-playing
    .o-core-m204-image-video-stage__video-player,
  .o-core-m204-image-video-stage.has-reached-end-card
    .o-core-m204-image-video-stage__video-player {
    transition-delay: 600ms;
  }
  .o-core-m208-image-stage-portrait__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m208-image-stage-portrait__content-wrapper {
    width: 58.33333%;
    margin-left: 41.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m209-category__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m209-category__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-editorial-teaser-slider__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-editorial-teaser-slider__content {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-editorial-teaser-slider__mobile-button {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-editorial-teaser-slider__slider-wrapper {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-teaser-wall__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-teaser-wall__main {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-teaser-wall__teasers {
    margin-left: -12px;
    margin-right: -12px;
  }
  .o-core-teaser-wall.has-size-s
    .o-core-teaser-wall__teasers
    .o-core-teaser-wall__teaser {
    width: 33.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-teaser-wall.has-size-m
    .o-core-teaser-wall__teasers
    .o-core-teaser-wall__teaser {
    width: 25%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-overlay__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-overlay__span {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-overlay.is-full-viewport .o-core-overlay__span {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-overlay__content-wrapper {
    margin-left: -12px;
    margin-right: -12px;
  }
  .o-core-overlay__content {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-magazine-stage__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-magazine-stage__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-magazine-stage__flap {
    padding-left: 48px;
  }
  .o-core-magazine-stage__flap {
    padding-right: 48px;
  }
  .o-core-form-wrapper__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-form-wrapper__main {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-form-notification__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-form-notification__grid-inner {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-user-account-interactions__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-user-account-interactions__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m322-disclaimer__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m322-disclaimer__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet {
    margin-right: 0;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-dropdown-label {
    display: none;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: none;
    padding: 0;
    position: static;
    width: auto;
    max-height: none;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-item {
    margin: 0 0 0 20px;
    font-size: inherit;
    text-align: left;
  }
  .o-core-m401-header__meta.has-dropdown-for-tablet
    .o-core-m401-header__meta-item:first-child {
    margin-top: 0;
  }
  .o-core-m401-header__bar-grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m401-header__bar-main {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m401-header__nav-item {
    padding-right: 40px;
  }
  .o-core-m401-header.has-111-jahre-logo .o-core-m401-header__nav-item-link {
    padding-left: 40px;
  }
  .o-core-m401-header.has-111-jahre-logo
    .o-core-m401-header__nav-item-link
    > .a-core-icon {
    display: block;
  }
  .o-core-m401-header__actions-item:not(:first-child) {
    margin: 0 0 0 34px;
  }
  .o-core-m401-header__actions-salutation {
    font-size: 14px;
    line-height: 20px;
  }
  .o-core-m401-header__flyout-close {
    padding-right: 32px;
  }
  .o-core-m401-header__mobile-bar-grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m401-header__mobile-nav-grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m401-header__mobile-nav-main {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m401-header__main-nav-link {
    font-size: 24px;
    line-height: 24px;
  }
  .o-core-m323-global-notification__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m323-global-notification__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m402-footer__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m402-footer__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m402-footer__wrapper {
    margin-left: -12px;
    margin-right: -12px;
  }
  .o-core-m402-footer__contact,
  .o-core-m402-footer__nav {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m402-footer__newsletter {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m402-footer__legal {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m402-footer__contact {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .o-core-m402-footer__service {
    margin-right: 12px;
  }
  .o-core-m402-footer__service {
    width: 33.33333%;
    padding-right: 0;
  }
  .o-core-m402-footer__social {
    margin-left: 12px;
  }
  .o-core-m402-footer__social {
    margin-right: 12px;
  }
  .o-core-m402-footer__social {
    width: 33.33333%;
    padding-left: 0;
  }
  .o-core-m402-footer__apps {
    width: 33.33333%;
  }
  .o-core-m402-footer__apps {
    margin-left: 12px;
  }
  .o-core-m402-footer__apps-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .o-core-m402-footer__apps-item {
    margin-right: 0;
  }
  .o-core-m402-footer__newsletter-input {
    font-size: 16px;
    line-height: 24px;
  }
  .o-core-m402-footer__nav-list {
    -webkit-column-gap: 24px;
    column-gap: 24px;
  }
  .o-core-m402-footer__nav-list {
    -webkit-column-count: 3;
    column-count: 3;
  }
  .o-core-m406-breadcrumb__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m406-breadcrumb__grid {
    overflow-x: hidden;
  }
  .o-core-m406-breadcrumb__main {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m406-breadcrumb__item-content {
    font-size: 14px;
    line-height: 20px;
  }
  .o-recipes-m316-tagcloud__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-recipes-m316-tagcloud__col {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m211-campaign-image-text__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m211-campaign-image-text__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image)
    .o-core-m212-banner-stage__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image)
    .o-core-m212-banner-stage__main {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .t-core-default {
    font-size: 18px;
  }
}
@media (min-width: 980px) and (min-width: 980px) {
  .o-core-m204-image-video-stage__flap {
    left: -48px;
  }
  .o-core-m204-image-video-stage__flap {
    right: -48px;
  }
}
@media (min-width: 450px) and (min-width: 980px) {
  .o-core-m202-media-richtext__media.is-left {
    padding-right: 12px;
  }
  .o-core-m202-media-richtext__media.is-left {
    margin-right: 12px;
  }
  .o-core-m202-media-richtext__media.is-right {
    padding-left: 12px;
  }
  .o-core-m202-media-richtext__media.is-right {
    margin-left: 12px;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    padding-right: 12px;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    margin-right: 12px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    padding-left: 12px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    margin-left: 12px;
  }
}
@media (min-width: 980px) and (min-width: 700px) {
  .o-core-m204-image-video-stage__flap {
    left: -40px;
  }
  .o-core-m204-image-video-stage__flap {
    right: -40px;
  }
}
@media (min-width: 1280px) and (min-width: 980px) {
  .a-core-navigation-content-separator:before {
    right: 12px;
  }
}
@media (min-width: 450px) and (min-width: 1280px) {
  .o-core-m202-media-richtext__media.is-left {
    padding-right: 16px;
  }
  .o-core-m202-media-richtext__media.is-left {
    margin-right: 16px;
  }
  .o-core-m202-media-richtext__media.is-right {
    padding-left: 16px;
  }
  .o-core-m202-media-richtext__media.is-right {
    margin-left: 16px;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    padding-right: 16px;
  }
  .o-core-m211-campaign-image-text__media.is-left {
    margin-right: 16px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    padding-left: 16px;
  }
  .o-core-m211-campaign-image-text__media.is-right {
    margin-left: 16px;
  }
}
@media (min-width: 1280px) {
  .x-breakpoint-min-desktopMid {
    display: block;
  }
  .a-core-m207-section-separator.has-grid .a-core-m207-section-separator__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .a-core-m207-section-separator.has-grid .a-core-m207-section-separator__col {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .a-core-navigation-content-separator:before {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    background: #999999;
    height: 100%;
    top: 0;
    right: 8px;
  }
  .a-core-navigation-content-separator {
    display: block;
  }
  .m-core-expander.is-disabled-for-desktopMid .m-core-expander__expand,
  .m-core-expander.is-disabled-for-desktopMid .m-core-expander__collapse {
    display: none;
  }
  .m-core-section-title {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-m102-teaser-slider {
    margin-left: -16px;
    margin-right: -16px;
  }
  .m-core-m102-teaser-slider__slide.has-size-s {
    width: 25%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-m102-teaser-slider__slide.has-size-m {
    width: 25%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-m102-teaser-slider__slide.has-size-xl {
    width: 66.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-m102-teaser-slider__offset-before {
    width: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-m102-teaser-slider__offset-after {
    width: 8.33333%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-m203-headline-intro__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .m-core-m203-headline-intro__wrapper {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: 100%;
    height: auto;
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: calc(177.77778%);
  }
  .m-core-m110-recipe-teaser.has-size-s
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 140px;
  }
  .m-core-m110-recipe-teaser.has-size-s .m-core-m110-recipe-teaser__meta-list {
    width: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: calc(50% - 32px * 0.5);
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: 100%;
    height: auto;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: 100%;
  }
  .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 140px;
  }
  .m-core-m110-recipe-teaser.has-size-m .m-core-m110-recipe-teaser__meta-list {
    width: 50%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper:before {
    padding-bottom: 100%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__image-wrapper
    > .a-core-image {
    width: auto;
    height: 100%;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__preview-wrapper {
    width: calc(177.77778%);
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__content-wrapper {
    height: 140px;
  }
  .is-shrinked
    .m-core-m110-recipe-teaser.has-size-m
    .m-core-m110-recipe-teaser__meta-list {
    width: 100%;
  }
  .m-core-navigation-content-nutrition {
    margin-left: -16px;
    margin-right: -16px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__go-back {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-navigation-content-nutrition
    .m-core-navigation-content-nutrition__container {
    width: 33.33333%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-navigation-content-recipes {
    margin-left: -16px;
    margin-right: -16px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__go-back {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-navigation-content-recipes .m-core-navigation-content-recipes__image {
    width: 25%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__magazine {
    width: 33.33333%;
    margin-right: 4.16667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-navigation-content-recipes
    .m-core-navigation-content-recipes__search-cookbook {
    width: 25%;
    margin-left: 4.16667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-navigation-content-retailer-offers {
    margin-left: -16px;
    margin-right: -16px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__store {
    width: 29.16667%;
    margin-right: 4.16667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__image {
    width: 25%;
    margin-left: 4.16667%;
    margin-right: 4.16667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-core-navigation-content-retailer-offers
    .m-core-navigation-content-retailer-offers__offers {
    width: 33.33333%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m201-image-gallery__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m201-image-gallery__header {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m201-image-gallery__slider-wrapper {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m201-image-gallery__slider {
    margin-left: -16px;
    margin-right: -16px;
  }
  .o-core-m201-image-gallery__slider-container {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m201-image-gallery__slide:not(:last-of-type) {
    margin-right: 32px;
  }
  .o-core-m201-image-gallery__caption-list {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m103-image-copy-button-teaser__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m103-image-copy-button-teaser__image {
    width: 25%;
    margin-left: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m103-image-copy-button-teaser__content {
    width: 41.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m109-content-teaser__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m109-content-teaser__item {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner {
    margin-left: -16px;
    margin-right: -16px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner
    .o-core-m109-content-teaser__image {
    width: 25%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m109-content-teaser__item.has-image
    .o-core-m109-content-teaser__item-inner
    .o-core-m109-content-teaser__content {
    width: 75%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m202-media-richtext__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m202-media-richtext__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-side-by-side {
    margin-left: -16px;
    margin-right: -16px;
  }
  .o-core-side-by-side__element {
    width: 50%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m205-text-stage__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m205-text-stage__col {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m205-text-stage.has-cutout .o-core-m205-text-stage__col {
    width: 58.33333%;
    margin-left: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m205-text-stage__image {
    width: 25%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-legacy-container-iframe__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-legacy-container-iframe__wrapper {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m204-image-video-stage.is-narrow
    .o-core-m204-image-video-stage__wrapper {
    max-height: 70vh;
  }
  .o-core-m204-image-video-stage__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m204-image-video-stage__content {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m204-image-video-stage.is-wide
    .o-core-m204-image-video-stage__content {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m208-image-stage-portrait__image-wrapper {
    max-height: calc(100vh - 150px);
  }
  .o-core-m208-image-stage-portrait__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m208-image-stage-portrait__content-wrapper {
    width: 58.33333%;
    margin-left: 41.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m209-category__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m209-category__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-editorial-teaser-slider__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-editorial-teaser-slider__content {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-editorial-teaser-slider__mobile-button {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-editorial-teaser-slider__slider-wrapper {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-teaser-wall__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-teaser-wall__main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-teaser-wall__teasers {
    margin-left: -16px;
    margin-right: -16px;
  }
  .o-core-teaser-wall.has-size-s
    .o-core-teaser-wall__teasers
    .o-core-teaser-wall__teaser {
    width: 25%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-teaser-wall.has-size-m
    .o-core-teaser-wall__teasers
    .o-core-teaser-wall__teaser {
    width: 25%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-overlay__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-overlay__span {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-overlay.is-full-viewport .o-core-overlay__span {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-overlay__content-wrapper {
    margin-left: -16px;
    margin-right: -16px;
  }
  .o-core-overlay__content {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-magazine-stage__image-wrapper {
    max-height: calc(100vh - 250px);
  }
  .o-core-magazine-stage__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-magazine-stage__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-magazine-stage__flap {
    padding-left: 64px;
  }
  .o-core-magazine-stage__flap {
    padding-right: 64px;
  }
  .o-core-form-wrapper__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-form-wrapper__main {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-form-notification__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-form-notification__grid-inner {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-user-account-interactions__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-user-account-interactions__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m322-disclaimer__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m322-disclaimer__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m401-header__bar-grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m401-header__bar-main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m401-header__nav-item {
    padding-right: 60px;
  }
  .o-core-m401-header__flyout-close {
    padding-right: 64px;
  }
  .o-core-m401-header__mobile-bar-grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m401-header__mobile-nav-grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m401-header__mobile-nav-main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m323-global-notification__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m323-global-notification__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m402-footer__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m402-footer__main {
    width: 83.33333%;
    margin-left: 8.33333%;
    margin-right: 8.33333%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m402-footer__wrapper {
    margin-left: -16px;
    margin-right: -16px;
  }
  .o-core-m402-footer__contact,
  .o-core-m402-footer__nav {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m402-footer__newsletter {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m402-footer__legal {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m402-footer__service {
    margin-right: 16px;
  }
  .o-core-m402-footer__social {
    margin-left: 16px;
  }
  .o-core-m402-footer__social {
    margin-right: 16px;
  }
  .o-core-m402-footer__apps {
    margin-left: 16px;
  }
  .o-core-m402-footer__nav-list {
    -webkit-column-gap: 32px;
    column-gap: 32px;
  }
  .o-core-m406-breadcrumb__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m406-breadcrumb__main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-recipes-m316-tagcloud__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-recipes-m316-tagcloud__col {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m211-campaign-image-text__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m211-campaign-image-text__main {
    width: 66.66667%;
    margin-left: 16.66667%;
    margin-right: 16.66667%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image)
    .o-core-m212-banner-stage__grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image)
    .o-core-m212-banner-stage__main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (min-width: 980px) and (min-width: 1280px) {
  .o-core-m204-image-video-stage__flap {
    left: -64px;
  }
  .o-core-m204-image-video-stage__flap {
    right: -64px;
  }
}
@media (min-width: 700px) and (min-width: 1280px) {
  .o-core-m401-header__meta {
    right: 16px;
  }
  .o-core-m401-header__flyout-grid {
    padding-left: 48px;
    padding-right: 48px;
  }
  .o-core-m401-header__flyout-main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (min-width: 1280px) and (min-width: 450px) {
  .a-core-navigation-content-separator:before {
    right: 8px;
  }
}
@media (min-width: 1280px) and (min-width: 1280px) {
  .a-core-navigation-content-separator:before {
    right: 16px;
  }
}
@media (min-width: 1280px) and (min-width: 700px) {
  .a-core-navigation-content-separator:before {
    right: 10px;
  }
}
@media (min-width: 1600px) {
  .a-core-copy,
  .m-core-richtext p,
  .m-core-richtext ul li,
  .m-core-richtext ol li {
    font-size: 18px;
    line-height: 28px;
  }
  .a-core-copy.is-longread,
  .m-core-richtext p,
  .m-core-richtext ul li.is-longread,
  .m-core-richtext ol li.is-longread {
    font-size: 22px;
    line-height: 32px;
  }
  .a-core-copy.is-small,
  .m-core-richtext p.is-small,
  .m-core-richtext ul li.is-small,
  .m-core-richtext ol li.is-small {
    font-size: 16px;
    line-height: 24px;
  }
  .a-core-copy.is-small-static,
  .m-core-richtext p.is-small-static,
  .m-core-richtext ul li.is-small-static,
  .m-core-richtext ol li.is-small-static {
    font-size: 14px;
  }
  .a-core-headline.is-category,
  .m-core-richtext h1.is-category,
  .m-core-richtext h2.is-category,
  .m-core-richtext h3,
  .m-core-richtext h4.is-category,
  .m-core-richtext h5.is-category {
    font-size: 28px;
    line-height: 28px;
  }
  .a-core-headline.is-entry,
  .m-core-richtext h1.is-entry,
  .m-core-richtext h2.is-entry,
  .m-core-richtext h3.is-entry,
  .m-core-richtext h4,
  .m-core-richtext h5.is-entry {
    font-size: 24px;
    line-height: 24px;
  }
  .a-core-listing li,
  .m-core-richtext ul li,
  .m-core-richtext ol li,
  .a-core-listing__item,
  .m-core-richtext ul li,
  .m-core-richtext ol li {
    font-size: 22px;
    line-height: 32px;
  }
  .a-core-tag-button {
    font-size: 16px;
    line-height: 24px;
  }
  .a-core-link {
    font-size: 18px;
    line-height: 28px;
  }
  .a-core-form-field-checkbox__label {
    font-size: 18px;
    line-height: 28px;
  }
  .a-core-form-field-checkbox__label {
    padding-top: 2px;
  }
  .a-core-form-field-radio__label {
    font-size: 18px;
    line-height: 28px;
  }
  .a-core-form-field-radio__label {
    padding-top: 2px;
  }
  .m-core-navigation-section-wide__copy {
    min-height: 56px;
  }
  .o-core-m401-header__actions-salutation {
    font-size: 16px;
    line-height: 24px;
  }
  .o-core-m401-header__actions-salutation {
    font-size: 14px;
    line-height: 14px;
  }
  .o-core-m401-header__main-nav-link {
    font-size: 28px;
    line-height: 28px;
  }
  .o-core-m406-breadcrumb__item-content {
    font-size: 16px;
    line-height: 24px;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2 / 1),
  only screen and (min-device-pixel-ratio: 2) {
  .o-core-m103-image-copy-button-teaser {
    background-image: url("../../files/img/bg-dark.jpg") repeat 0 0;
  }
  .o-core-m205-text-stage {
    background-image: url("../../files/img/bg-dark.jpg") repeat 0 0;
  }
  .o-core-m401-header__bar {
    background-image: url("../../files/img/bg-dark.jpg") repeat 0 0;
  }
  .o-core-m401-header__mobile-bar {
    background-image: url("../../files/img/bg-dark.jpg") repeat 0 0;
  }
  .o-core-m402-footer {
    background-image: url("../../files/img/bg-dark.jpg") repeat 0 0;
  }
  .o-core-m211-campaign-image-text {
    background-image: url("../../files/img/bg-dark.jpg") repeat 0 0;
  }
  .o-core-m212-banner-stage:not(.has-full-width-image) {
    background-image: url("../../files/img/bg-dark.jpg") repeat 0 0;
  }
}

/*# sourceMappingURL=core.css.map */