/*! project: tenant-dhl-com v6.10.1-SNAPSHOT | compilation hash: 2646ae425c7e68506bab | timestamp: Fri Nov 11 2022 10:38:13 GMT+0100 (Central European Standard Time) */
/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/reset.css ***!
  \*********************************************************************************************************************************************************************************************/
/**
 * @file base/reset.css
 *
 * @description
 * Universal css-resets to remove browser specific rules.
 * Enforces box-sizing: border-box;
 * Sets a background-color for the html & body element
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* global reset */

* {

	/* remove webkit margins */
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-start: 0;

	/* remove highlight on tap */
	-webkit-tap-highlight-color: transparent;

	/* remove all margins and paddings */
	margin: 0;
	padding: 0;

	/* force border box for all elements
		content-box:
			This is the default style as specified by the CSS standard.
			The width and height properties are measured including only the content, but not the padding, border or margin.
		border-box:
			The width and height properties include the padding and border, but not the margin.
	*/
	box-sizing: border-box;
	outline: none;
}

html,
body {
	background: #ffffff;
}

.display-none {
	display: none !important; /* stylelint-disable-line declaration-no-important */
}

button {
	background: none;
	border: none;
}

/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css ***!
  \********************************************************************************************/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/layout/custom/grid.css ***!
  \*****************************************************************************************************************************************************************************************************/
/**
 * @file layout/custom/grid.css
 *
 * @description
 *
 * Styles for the sitespecific grid
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 * @example
 * section.l-grid--widthrapper
 *  section.l-grid---6
 *  section.l-grid---3
 *  section.l-grid--w-3
 *
 * @TODO define no flexbox version
 * @TODO delete sample rules
 *
 *
 */

/**
 * initializes the grid
 * @class l-grid
 */
.l-grid {
	display: flex;
	flex: 0 1 auto;
	flex-flow: row wrap;
}

.l-grid--margin {

	/* please note: there was a var() syntax error which got transpiled before */
	margin: 0 calc(var(--grid-gutter) / 2 * -1);
}

.l-grid--nowrap {
	flex-wrap: nowrap;
}

.l-grid--row-reverse {
	flex-direction: row-reverse;
}

/* sets porperties for all grid items */
.l-grid--has-gutter {
	flex: 0 0 auto;

	/* please note: there was a var() syntax error which got transpiled before */
	padding: 0 calc(var(--grid-gutter) / 2);
}

.l-grid--has-margin-gutter {
	flex: 0 0 auto;

	/* please note: there was a var() syntax error which got transpiled before */
	margin: 0 var(--grid-gutter);
}

/**
 * space distribution
 * @class .l-grid--{around|between}-{SIZE}
 * @extends .l-grid
 * @example .l-grid.l-grid--left-s
 */
.l-grid--around-s {
	justify-content: space-around;
}

.l-grid--between-s {
	justify-content: space-between;
}

.l-grid--shrink {
	width: auto;
	max-width: inherit;
	min-width: auto;
}

/**
 * horizontal alignment
 * @class .l-grid--{left|center|top}-{SIZE}
 * @extends .l-grid
 * @example .l-grid.l-grid--left-s
 */
.l-grid--left-s {
	justify-content: flex-start;
	text-align: left;
}

.l-grid--center-s {
	justify-content: center;
	text-align: center;
}

.l-grid--right-s {
	justify-content: flex-end;
	text-align: right;
}

/**
 * vertical alignment
 * @class .l-grid--{top|middle|bottom}-{SIZE}
 * @extends .l-grid
 * @example .l-grid.l-grid--middle-s
 */
.l-grid--top-s {
	align-items: flex-start;
	vertical-align: top;
}

.l-grid--middle-s {
	align-items: center;
	vertical-align: middle;
}

.l-grid--bottom-s {
	align-items: flex-end;
	vertical-align: bottom;
}

/**
 * hides an item in the specified size
 * @class .l-grid--hidden-{SIZE}
 * @extends .l-grid-w-{WIDTH}-{SIZE}
 * @example .l-grid--w-auto-s.l-grid--hidden-s-l
 */
.l-grid--hidden-s {
	display: none;
}

/**
 * shows an item in the specified size
 * @class .l-grid--visible-{SIZE}
 * @extends .l-grid-w-{WIDTH}-{SIZE}
 * @example .l-grid--w-auto-s.l-grid--visible-s-l
 */
.l-grid--visible-s {
	display: flex;
}

/**
 * resets width
 * @class .l-grid--w-reset-{SIZE}
 * @example .l-grid--w-reset-s
 */
.l-grid--w-reset-s {
	width: auto;
	flex-basis: auto;
	max-width: none;
	flex-grow: initial;
}

/**
 * sets an item to automatically take all the available space
 * @class .l-grid--w-auto-{SIZE}
 * @example .l-grid--w-auto-s
 */
.l-grid--w-auto-s {
	flex-grow: 1;
	flex-basis: 0;
	max-width: 100%;
}

.l-grid--nowrap-s {
	flex-wrap: nowrap;
}

/**
 * all the percentage based sizes
 * @class .l-grid--w-{PERCENTAGE}pc-{SIZE}
 * @example .l-grid--w-10pc-s
 */
.l-grid--w-10pc-s {
	flex-basis: 10%;
	max-width: 10%;
	width: 10%;
}

.l-grid--w-20pc-s {
	flex-basis: 20%;
	max-width: 20%;
	width: 20%;
}

.l-grid--w-25pc-s {
	flex-basis: 25%;
	max-width: 25%;
	width: 25%;
}

.l-grid--w-33pc-s {
	flex-basis: 33.3333%;
	max-width: 33.3333%;
	width: 33.3333%;
}

.l-grid--w-40pc-s {
	flex-basis: 40%;
	max-width: 40%;
	width: 40%;
}

.l-grid--w-50pc-s {
	flex-basis: 50%;
	max-width: 50%;
	width: 50%;
}

.l-grid--w-60pc-s {
	flex-basis: 60%;
	max-width: 60%;
	width: 60%;
}

.l-grid--w-66pc-s {
	flex-basis: 66.6666%;
	max-width: 66.6666%;
	width: 66.6666%;
}

.l-grid--w-75pc-s {
	flex-basis: 75%;
	max-width: 75%;
	width: 75%;
}

.l-grid--w-80pc-s {
	flex-basis: 80%;
	max-width: 80%;
	width: 80%;
}

.l-grid--w-90pc-s {
	flex-basis: 90%;
	max-width: 90%;
	width: 90%;
}

.l-grid--w-95pc-s {
	flex-basis: 95%;
	max-width: 95%;
	width: 95%;
}

.l-grid--w-100pc-s {
	flex-basis: 100%;
	max-width: 100%;
	width: 100%;
}

/**
 * offsets an item by 0.25, 0.5, 1, 2, 3, 4,5 units
 * @class .l-grid--w-{NUMBER}u-{SIZE}
 * @extends grid item
 * @example .l-grid--w-10pc-s.l-grid--o-1u-s
 */
.l-grid--o-025u-s {
	margin-left: calc(0.25 * (1 / var(--grid-units) * 100%));
}

.l-grid--o-05u-s {
	margin-left: calc(0.5 * (1 / var(--grid-units) * 100%));
}

.l-grid--o-1u-s {
	margin-left: calc(1 * (1 / var(--grid-units) * 100%));
}

.l-grid--o-2u-s {
	margin-left: calc(2 * (1 / var(--grid-units) * 100%));
}

.l-grid--o-3u-s {
	margin-left: calc(3 * (1 / var(--grid-units) * 100%));
}

.l-grid--o-4u-s {
	margin-left: calc(4 * (1 / var(--grid-units) * 100%));
}

.l-grid--o-5u-s {
	margin-left: calc(5 * (1 / var(--grid-units) * 100%));
}

/**
 * sets the padding of an item to 0, 1, 2, 3, 4,5 units
 * @class .l-grid--p-{NUMBER}u-{SIZE}
 * @extends grid item
 * @example .l-grid--w-10pc-s.l-grid--p-1u-s
 */
.l-grid--p-0u-s {
	padding: 0 !important; /* stylelint-disable-line declaration-no-important */
}

.l-grid--p-025u-s {
	padding-left: calc(0.25 * (1 / var(--grid-units) * 100%));
	padding-right: calc(0.25 * (1 / var(--grid-units) * 100%));
}

.l-grid--p-05u-s {
	padding-left: calc(0.5 * (1 / var(--grid-units) * 100%));
	padding-right: calc(0.5 * (1 / var(--grid-units) * 100%));
}

.l-grid--p-1u-s {
	padding-left: calc(1 * (1 / var(--grid-units) * 100%));
	padding-right: calc(1 * (1 / var(--grid-units) * 100%));
}

.l-grid--p-2u-s {
	padding-left: calc(2 * (1 / var(--grid-units) * 100%));
	padding-right: calc(2 * (1 / var(--grid-units) * 100%));
}

.l-grid--p-3u-s {
	padding-left: calc(3 * (1 / var(--grid-units) * 100%));
	padding-right: calc(3 * (1 / var(--grid-units) * 100%));
}

.l-grid--p-4u-s {
	padding-left: calc(4 * (1 / var(--grid-units) * 100%));
	padding-right: calc(4 * (1 / var(--grid-units) * 100%));
}

.l-grid--p-5u-s {
	padding-left: calc(5 * (1 / var(--grid-units) * 100%));
	padding-right: calc(5 * (1 / var(--grid-units) * 100%));
}

.l-grid--p-6u-s {
	padding-left: calc(6 * (1 / var(--grid-units) * 100%));
	padding-right: calc(6 * (1 / var(--grid-units) * 100%));
}

.l-grid--p-7u-s {
	padding-left: calc(7 * (1 / var(--grid-units) * 100%));
	padding-right: calc(7 * (1 / var(--grid-units) * 100%));
}

/**
 * minor breakpoint "s-m"
 * @size 480 - 666
 */
@media screen and (min-width: 480px) and (max-width: 665px) {

	/**
	 * space distribution
	 * @class .l-grid--{around|between}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--around-s-m {
		justify-content: space-around;
	}

	.l-grid--between-s-m {
		justify-content: space-between;
	}

	/**
	 * horizontal alignment
	 * @class .l-grid--{left|center|top}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--left-s-m {
		justify-content: flex-start;
		text-align: left;
	}

	.l-grid--center-s-m {
		justify-content: center;
		text-align: center;
	}

	.l-grid--right-s-m {
		justify-content: flex-end;
		text-align: right;
	}

	/**
	 * vertical alignment
	 * @class .l-grid--{top|middle|bottom}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--middle-s
	 */
	.l-grid--top-s-m {
		align-items: flex-start;
		vertical-align: top;
	}

	.l-grid--middle-s-m {
		align-items: center;
		vertical-align: middle;
	}

	.l-grid--bottom-s-m {
		align-items: flex-end;
		vertical-align: bottom;
	}

	/**
	 * removes the gutter from a grid item
	 * @class .l-grid--no-gutter
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--no-gutter
	 */
	.l-grid--no-gutter-s-m {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	/**
	 * hides an item in the specified size
	 * @class .l-grid--hidden-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--hidden-s-l
	 */
	.l-grid--hidden-s-m {
		display: none;
	}

	/**
	 * shows an item in the specified size
	 * @class .l-grid--visible-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--visible-s-l
	 */
	.l-grid--visible-s-m {
		display: flex;
	}

	/**
	 * resets width
	 * @class .l-grid--w-reset-{SIZE}
	 * @example .l-grid--w-reset-s
	 */
	.l-grid--w-reset-s-m {
		width: auto;
		flex-basis: auto;
		max-width: none;
		flex-grow: initial;
	}

	/**
	 * all the percentage based sizes
	 * @class .l-grid--w-{PERCENTAGE}pc-{SIZE}
	 * @example .l-grid--w-10pc-s
	 */
	.l-grid--w-10pc-s-m {
		flex-basis: 10%;
		max-width: 10%;
		width: 10%;
	}

	.l-grid--w-20pc-s-m {
		flex-basis: 20%;
		max-width: 20%;
		width: 20%;
	}

	.l-grid--w-25pc-s-m {
		flex-basis: 25%;
		max-width: 25%;
		width: 25%;
	}

	.l-grid--w-33pc-s-m {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
		width: 33.3333%;
	}

	.l-grid--w-40pc-s-m {
		flex-basis: 40%;
		max-width: 40%;
		width: 40%;
	}

	.l-grid--w-50pc-s-m {
		flex-basis: 50%;
		max-width: 50%;
		width: 50%;
	}

	.l-grid--w-60pc-s-m {
		flex-basis: 60%;
		max-width: 60%;
		width: 60%;
	}

	.l-grid--w-66pc-s-m {
		flex-basis: 66.6666%;
		max-width: 66.6666%;
		width: 66.6666%;
	}

	.l-grid--w-75pc-s-m {
		flex-basis: 75%;
		max-width: 75%;
		width: 75%;
	}

	.l-grid--w-80pc-s-m {
		flex-basis: 80%;
		max-width: 80%;
		width: 80%;
	}

	.l-grid--w-100pc-s-m {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	/**
	 * offsets an item by 0.25, 0.5, 1, 2, 3, 4,5 units
	 * @class .l-grid--w-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--o-1u-s
	 */
	.l-grid--o-025u-s-m {
		margin-left: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-05u-s-m {
		margin-left: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-1u-s-m {
		margin-left: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-2u-s-m {
		margin-left: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-3u-s-m {
		margin-left: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-4u-s-m {
		margin-left: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-5u-s-m {
		margin-left: calc(5 * (1 / var(--grid-units) * 100%));
	}

	/**
	 * sets the padding of an item to 0, 1, 2, 3, 4,5 units
	 * @class .l-grid--p-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--p-1u-s
	 */
	.l-grid--p-0u-s-m {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	.l-grid--p-025u-s-m {
		padding-left: calc(0.25 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-05u-s-m {
		padding-left: calc(0.5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-1u-s-m {
		padding-left: calc(1 * (1 / var(--grid-units) * 100%));
		padding-right: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-2u-s-m {
		padding-left: calc(2 * (1 / var(--grid-units) * 100%));
		padding-right: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-3u-s-m {
		padding-left: calc(3 * (1 / var(--grid-units) * 100%));
		padding-right: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-4u-s-m {
		padding-left: calc(4 * (1 / var(--grid-units) * 100%));
		padding-right: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-5u-s-m {
		padding-left: calc(5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-6u-s-m {
		padding-left: calc(6 * (1 / var(--grid-units) * 100%));
		padding-right: calc(6 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-7u-s-m {
		padding-left: calc(7 * (1 / var(--grid-units) * 100%));
		padding-right: calc(7 * (1 / var(--grid-units) * 100%));
	}
}

/**
 * minor breakpoint "s-l"
 * @size 667 - 767
 */
@media screen and (min-width: 666px) and (max-width: 767px) {

	/**
	 * space distribution
	 * @class .l-grid--{around|between}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--around-s-l {
		justify-content: space-around;
	}

	.l-grid--between-s-l {
		justify-content: space-between;
	}

	/**
	 * horizontal alignment
	 * @class .l-grid--{left|center|top}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--left-s-l {
		justify-content: flex-start;
		text-align: left;
	}

	.l-grid--center-s-l {
		justify-content: center;
		text-align: center;
	}

	.l-grid--right-s-l {
		justify-content: flex-end;
		text-align: right;
	}

	/**
	 * vertical alignment
	 * @class .l-grid--{top|middle|bottom}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--middle-s
	 */
	.l-grid--top-s-l {
		align-items: flex-start;
		vertical-align: top;
	}

	.l-grid--middle-s-l {
		align-items: center;
		vertical-align: middle;
	}

	.l-grid--bottom-s-l {
		align-items: flex-end;
		vertical-align: bottom;
	}

	/**
	 * removes the gutter from a grid item
	 * @class .l-grid--no-gutter
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--no-gutter
	 */
	.l-grid--no-gutter-s-l {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	/**
	 * hides an item in the specified size
	 * @class .l-grid--hidden-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--hidden-s-l
	 */
	.l-grid--hidden-s-l {
		display: none;
	}

	/**
	 * shows an item in the specified size
	 * @class .l-grid--visible-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--visible-s-l
	 */
	.l-grid--visible-s-l {
		display: flex;
	}

	/**
	 * resets width
	 * @class .l-grid--w-reset-{SIZE}
	 * @example .l-grid--w-reset-s
	 */
	.l-grid--w-reset-s-l {
		width: auto;
		flex-basis: auto;
		max-width: none;
		flex-grow: initial;
	}

	/**
	 * sets an item to automatically take all the available space
	 * @class .l-grid--w-auto-{SIZE}
	 * @example .l-grid--w-auto-s
	 */
	.l-grid--w-auto-s-l {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}

	/**
	 * all the percentage based sizes
	 * @class .l-grid--w-{PERCENTAGE}pc-{SIZE}
	 * @example .l-grid--w-10pc-s
	 */
	.l-grid--w-10pc-s-l {
		flex-basis: 10%;
		max-width: 10%;
		width: 10%;
	}

	.l-grid--w-15pc-s-l {
		flex-basis: 15%;
		max-width: 15%;
		width: 15%;
	}

	.l-grid--w-20pc-s-l {
		flex-basis: 20%;
		max-width: 20%;
		width: 20%;
	}

	.l-grid--w-25pc-s-l {
		flex-basis: 25%;
		max-width: 25%;
		width: 25%;
	}

	.l-grid--w-33pc-s-l {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
		width: 33.3333%;
	}

	.l-grid--w-40pc-s-l {
		flex-basis: 40%;
		max-width: 40%;
		width: 40%;
	}

	.l-grid--w-50pc-s-l {
		flex-basis: 50%;
		max-width: 50%;
		width: 50%;
	}

	.l-grid--w-60pc-s-l {
		flex-basis: 60%;
		max-width: 60%;
		width: 60%;
	}

	.l-grid--w-66pc-s-l {
		flex-basis: 66.6666%;
		max-width: 66.6666%;
		width: 66.6666%;
	}

	.l-grid--w-70pc-s-l {
		flex-basis: 70%;
		max-width: 70%;
		width: 70%;
	}

	.l-grid--w-75pc-s-l {
		flex-basis: 75%;
		max-width: 75%;
		width: 75%;
	}

	.l-grid--w-80pc-s-l {
		flex-basis: 80%;
		max-width: 80%;
		width: 80%;
	}

	.l-grid--w-100pc-s-l {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	/**
	 * offsets an item by 0.25, 0.5, 1, 2, 3, 4,5 units
	 * @class .l-grid--w-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--o-1u-s
	 */
	.l-grid--o-025u-s-l {
		margin-left: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-05u-s-l {
		margin-left: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-1u-s-l {
		margin-left: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-2u-s-l {
		margin-left: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-3u-s-l {
		margin-left: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-4u-s-l {
		margin-left: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-5u-s-l {
		margin-left: calc(5 * (1 / var(--grid-units) * 100%));
	}

	/**
	 * sets the padding of an item to 0, 1, 2, 3, 4,5 units
	 * @class .l-grid--p-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--p-1u-s
	 */
	.l-grid--p-0u-s-l {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	.l-grid--p-025u-s-l {
		padding-left: calc(0.25 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-05u-s-l {
		padding-left: calc(0.5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-1u-s-l {
		padding-left: calc(1 * (1 / var(--grid-units) * 100%));
		padding-right: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-2u-s-l {
		padding-left: calc(2 * (1 / var(--grid-units) * 100%));
		padding-right: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-3u-s-l {
		padding-left: calc(3 * (1 / var(--grid-units) * 100%));
		padding-right: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-4u-s-l {
		padding-left: calc(4 * (1 / var(--grid-units) * 100%));
		padding-right: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-5u-s-l {
		padding-left: calc(5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-6u-s-l {
		padding-left: calc(6 * (1 / var(--grid-units) * 100%));
		padding-right: calc(6 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-7u-s-l {
		padding-left: calc(7 * (1 / var(--grid-units) * 100%));
		padding-right: calc(7 * (1 / var(--grid-units) * 100%));
	}
}

/**
 * major breakpoint "m"
 * @size >=768
 */
@media screen and (min-width: 768px),print {

	/**
	 * space distribution
	 * @class .l-grid--{around|between}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--around-m {
		justify-content: space-around;
	}

	.l-grid--between-m {
		justify-content: space-between;
	}

	/**
	 * horizontal alignment
	 * @class .l-grid--{left|center|top}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--left-m {
		justify-content: flex-start;
		text-align: left;
	}

	.l-grid--center-m {
		justify-content: center;
		text-align: center;
	}

	.l-grid--right-m {
		justify-content: flex-end;
		text-align: right;
	}

	/**
	 * vertical alignment
	 * @class .l-grid--{top|middle|bottom}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--middle-s
	 */
	.l-grid--top-m {
		align-items: flex-start;
		vertical-align: top;
	}

	.l-grid--middle-m {
		align-items: center;
		vertical-align: middle;
	}

	.l-grid--bottom-m {
		align-items: flex-end;
		vertical-align: bottom;
	}

	/**
	 * removes the gutter from a grid item
	 * @class .l-grid--no-gutter
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--no-gutter
	 */
	.l-grid--no-gutter-m {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	/**
	 * hides an item in the specified size
	 * @class .l-grid--hidden-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--hidden-m
	 */
	.l-grid--hidden-m {
		display: none;
	}

	/**
	 * shows an item in the specified size
	 * @class .l-grid--visible-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--visible-s-l
	 */
	.l-grid--visible-m {
		display: flex;
	}

	.l-grid--nowrap-m {
		flex-wrap: nowrap;
	}

	/**
	 * resets width
	 * @class .l-grid--w-reset-{SIZE}
	 * @example .l-grid--w-reset-s
	 */
	.l-grid--w-reset-m {
		width: auto;
		flex-basis: auto;
		max-width: none;
		flex-grow: initial;
	}

	/**
	 * sets an item to automatically take all the available space
	 * @class .l-grid--w-auto-{SIZE}
	 * @example .l-grid--w-auto-s
	 */
	.l-grid--w-auto-m {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}

	/**
	 * all the percentage based sizes
	 * @class .l-grid--w-{PERCENTAGE}pc-{SIZE}
	 * @example .l-grid--w-10pc-s
	 */
	.l-grid--w-10pc-m {
		flex-basis: 10%;
		max-width: 10%;
		width: 10%;
	}

	.l-grid--w-15pc-m {
		flex-basis: 15%;
		max-width: 15%;
		width: 15%;
	}

	.l-grid--w-20pc-m {
		flex-basis: 20%;
		max-width: 20%;
		width: 20%;
	}

	.l-grid--w-25pc-m {
		flex-basis: 25%;
		max-width: 25%;
		width: 25%;
	}

	.l-grid--w-30pc-m {
		flex-basis: 30%;
		max-width: 30%;
		width: 30%;
	}

	.l-grid--w-33pc-m {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
		width: 33.3333%;
	}

	.l-grid--w-40pc-m {
		flex-basis: 40%;
		max-width: 40%;
		width: 40%;
	}

	.l-grid--w-50pc-m {
		flex-basis: 50%;
		max-width: 50%;
		width: 50%;
	}

	.l-grid--w-55pc-m {
		flex-basis: 55%;
		max-width: 55%;
		width: 55%;
	}

	.l-grid--w-60pc-m {
		flex-basis: 60%;
		max-width: 60%;
		width: 60%;
	}

	.l-grid--w-66pc-m {
		flex-basis: 66.6666%;
		max-width: 66.6666%;
		width: 66.6666%;
	}

	.l-grid--w-70pc-m {
		flex-basis: 70%;
		max-width: 70%;
		width: 70%;
	}

	.l-grid--w-75pc-m {
		flex-basis: 75%;
		max-width: 75%;
		width: 75%;
	}

	.l-grid--w-80pc-m {
		flex-basis: 80%;
		max-width: 80%;
		width: 80%;
	}

	.l-grid--w-90pc-m {
		flex-basis: 90%;
		max-width: 90%;
		width: 90%;
	}

	.l-grid--w-85pc-m {
		flex-basis: 85%;
		max-width: 85%;
		width: 85%;
	}

	.l-grid--w-95pc-m {
		flex-basis: 95%;
		max-width: 95%;
		width: 95%;
	}

	.l-grid--w-100pc-m {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	/**
	 * offsets an item by 0.25, 0.5, 1, 2, 3, 4,5 units
	 * @class .l-grid--w-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--o-1u-s
	 */
	.l-grid--o-025u-m {
		margin-left: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-05u-m {
		margin-left: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-1u-m {
		margin-left: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-2u-m {
		margin-left: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-3u-m {
		margin-left: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-4u-m {
		margin-left: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-5u-m {
		margin-left: calc(5 * (1 / var(--grid-units) * 100%));
	}

	/**
	 * sets the padding of an item to 0, 1, 2, 3, 4,5 units
	 * @class .l-grid--p-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--p-1u-s
	 */
	.l-grid--p-0u-m {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	.l-grid--p-025u-m {
		padding-left: calc(0.25 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-05u-m {
		padding-left: calc(0.5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-1u-m {
		padding-left: calc(1 * (1 / var(--grid-units) * 100%));
		padding-right: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-2u-m {
		padding-left: calc(2 * (1 / var(--grid-units) * 100%));
		padding-right: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-3u-m {
		padding-left: calc(3 * (1 / var(--grid-units) * 100%));
		padding-right: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-4u-m {
		padding-left: calc(4 * (1 / var(--grid-units) * 100%));
		padding-right: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-5u-m {
		padding-left: calc(5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-6u-m {
		padding-left: calc(6 * (1 / var(--grid-units) * 100%));
		padding-right: calc(6 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-7u-m {
		padding-left: calc(7 * (1 / var(--grid-units) * 100%));
		padding-right: calc(7 * (1 / var(--grid-units) * 100%));
	}
}

/**
 * minor breakpoint "m-s"
 * @size 768 - 1023
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {

	/**
	 * space distribution
	 * @class .l-grid--{around|between}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--around-m-s {
		justify-content: space-around;
	}

	.l-grid--between-m-s {
		justify-content: space-between;
	}

	/**
	 * horizontal alignment
	 * @class .l-grid--{left|center|top}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--left-m-s {
		justify-content: flex-start;
		text-align: left;
	}

	.l-grid--center-m-s {
		justify-content: center;
		text-align: center;
	}

	.l-grid--right-m-s {
		justify-content: flex-end;
		text-align: right;
	}

	/**
	 * vertical alignment
	 * @class .l-grid--{top|middle|bottom}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--middle-s
	 */
	.l-grid--top-m-s {
		align-items: flex-start;
		vertical-align: top;
	}

	.l-grid--middle-m-s {
		align-items: center;
		vertical-align: middle;
	}

	.l-grid--bottom-m-s {
		align-items: flex-end;
		vertical-align: bottom;
	}

	/**
	 * removes the gutter from a grid item
	 * @class .l-grid--no-gutter
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--no-gutter
	 */
	.l-grid--no-gutter-m-s {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	/**
	 * hides an item in the specified size
	 * @class .l-grid--hidden-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--hidden-m-s
	 */
	.l-grid--hidden-m-s {
		display: none;
	}

	/**
	 * shows an item in the specified size
	 * @class .l-grid--visible-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--visible-s-l
	 */
	.l-grid--visible-m-s {
		display: flex;
	}

	/**
	 * resets width
	 * @class .l-grid--w-reset-{SIZE}
	 * @example .l-grid--w-reset-s
	 */
	.l-grid--w-reset-m-s {
		width: auto;
		flex-basis: auto;
		max-width: none;
		flex-grow: initial;
	}

	/**
	 * sets an item to automatically take all the available space
	 * @class .l-grid--w-auto-{SIZE}
	 * @example .l-grid--w-auto-s
	 */
	.l-grid--w-auto-m-s {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}

	/**
	 * all the fix width sizes
	 */
	.l-grid--w-560-m-s {
		width: 56rem;
	}

	/**
	 * all the percentage based sizes
	 * @class .l-grid--w-{PERCENTAGE}pc-{SIZE}
	 * @example .l-grid--w-10pc-s
	 */
	.l-grid--w-10pc-m-s {
		flex-basis: 10%;
		max-width: 10%;
		width: 10%;
	}

	.l-grid--w-20pc-m-s {
		flex-basis: 20%;
		max-width: 20%;
		width: 20%;
	}

	.l-grid--w-25pc-m-s {
		flex-basis: 25%;
		max-width: 25%;
		width: 25%;
	}

	.l-grid--w-33pc-m-s {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
		width: 33.3333%;
	}

	.l-grid--w-40pc-m-s {
		flex-basis: 40%;
		max-width: 40%;
		width: 40%;
	}

	.l-grid--w-50pc-m-s {
		flex-basis: 50%;
		max-width: 50%;
		width: 50%;
	}

	.l-grid--w-60pc-m-s {
		flex-basis: 60%;
		max-width: 60%;
		width: 60%;
	}

	.l-grid--w-66pc-m-s {
		flex-basis: 66.6666%;
		max-width: 66.6666%;
		width: 66.6666%;
	}

	.l-grid--w-75pc-m-s {
		flex-basis: 75%;
		max-width: 75%;
		width: 75%;
	}

	.l-grid--w-80pc-m-s {
		flex-basis: 80%;
		max-width: 80%;
		width: 80%;
	}

	.l-grid--w-85pc-m-s {
		flex-basis: 85%;
		max-width: 85%;
		width: 85%;
	}

	.l-grid--w-90pc-m-s {
		flex-basis: 90%;
		max-width: 90%;
		width: 90%;
	}

	.l-grid--w-100pc-m-s {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	/**
	 * offsets an item by 0.25, 0.5, 1, 2, 3, 4,5 units
	 * @class .l-grid--w-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--o-1u-s
	 */
	.l-grid--o-025u-m-s {
		margin-left: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-05u-m-s {
		margin-left: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-1u-m-s {
		margin-left: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-2u-m-s {
		margin-left: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-3u-m-s {
		margin-left: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-4u-m-s {
		margin-left: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-5u-m-s {
		margin-left: calc(5 * (1 / var(--grid-units) * 100%));
	}

	/**
	 * sets the padding of an item to 0, 1, 2, 3, 4,5 units
	 * @class .l-grid--p-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--p-1u-s
	 */
	.l-grid--p-0u-m-s {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	.l-grid--p-025u-m-s {
		padding-left: calc(0.25 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-05u-m-s {
		padding-left: calc(0.5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-1u-m-s {
		padding-left: calc(1 * (1 / var(--grid-units) * 100%));
		padding-right: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-2u-m-s {
		padding-left: calc(2 * (1 / var(--grid-units) * 100%));
		padding-right: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-3u-m-s {
		padding-left: calc(3 * (1 / var(--grid-units) * 100%));
		padding-right: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-4u-m-s {
		padding-left: calc(4 * (1 / var(--grid-units) * 100%));
		padding-right: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-5u-m-s {
		padding-left: calc(5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-6u-m-s {
		padding-left: calc(6 * (1 / var(--grid-units) * 100%));
		padding-right: calc(6 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-7u-m-s {
		padding-left: calc(7 * (1 / var(--grid-units) * 100%));
		padding-right: calc(7 * (1 / var(--grid-units) * 100%));
	}
}

/**
 * minor breakpoint "m-m"
 * @size 1024 - 1364
 */
@media screen and (min-width: 1024px),print {

	/**
	 * space distribution
	 * @class .l-grid--{around|between}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--around-m-m {
		justify-content: space-around;
	}

	.l-grid--between-m-m {
		justify-content: space-between;
	}

	/**
	 * horizontal alignment
	 * @class .l-grid--{left|center|top}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--left-s
	 */
	.l-grid--left-m-m {
		justify-content: flex-start;
		text-align: left;
	}

	.l-grid--center-m-m {
		justify-content: center;
		text-align: center;
	}

	.l-grid--right-m-m {
		justify-content: flex-end;
		text-align: right;
	}

	/**
	 * vertical alignment
	 * @class .l-grid--{top|middle|bottom}-{SIZE}
	 * @extends .l-grid
	 * @example .l-grid.l-grid--middle-s
	 */
	.l-grid--top-m-m {
		align-items: flex-start;
		vertical-align: top;
	}

	.l-grid--middle-m-m {
		align-items: center;
		vertical-align: middle;
	}

	.l-grid--bottom-m-m {
		align-items: flex-end;
		vertical-align: bottom;
	}

	/**
	 * removes the gutter from a grid item
	 * @class .l-grid--no-gutter
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--no-gutter
	 */
	.l-grid--no-gutter-m-m {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	/**
	 * hides an item in the specified size
	 * @class .l-grid--hidden-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--hidden-m-m
	 */
	.l-grid--hidden-m-m {
		display: none;
	}

	/**
	 * shows an item in the specified size
	 * @class .l-grid--visible-{SIZE}
	 * @extends .l-grid-w-{WIDTH}-{SIZE}
	 * @example .l-grid--w-auto-s.l-grid--visible-s-l
	 */
	.l-grid--visible-m-m {
		display: flex;
	}

	/**
	 * resets width
	 * @class .l-grid--w-reset-{SIZE}
	 * @example .l-grid--w-reset-s
	 */
	.l-grid--w-reset-m-m {
		width: auto;
		max-width: none;
		flex: 1;
	}

	/**
	 * sets an item to automatically take all the available space
	 * @class .l-grid--w-auto-{SIZE}
	 * @example .l-grid--w-auto-s
	 */
	.l-grid--w-auto-m-m {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}

	/**
	 * all the fix width sizes
	 */
	.l-grid--w-560-m-m {
		width: 56rem;
	}

	/**
	 * all the percentage based sizes
	 * @class .l-grid--w-{PERCENTAGE}pc-{SIZE}
	 * @example .l-grid--w-10pc-s
	 */
	.l-grid--w-10pc-m-m {
		flex-basis: 10%;
		max-width: 10%;
		width: 10%;
	}

	.l-grid--w-20pc-m-m {
		flex-basis: 20%;
		max-width: 20%;
		width: 20%;
	}

	.l-grid--w-25pc-m-m {
		flex-basis: 25%;
		max-width: 25%;
		width: 25%;
	}

	.l-grid--w-30pc-m-m {
		flex-basis: 30%;
		max-width: 30%;
		width: 30%;
	}

	.l-grid--w-33pc-m-m {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
		width: 33.3333%;
	}

	.l-grid--w-40pc-m-m {
		flex-basis: 40%;
		max-width: 40%;
		width: 40%;
	}

	.l-grid--w-50pc-m-m {
		flex-basis: 50%;
		max-width: 50%;
		width: 50%;
	}

	.l-grid--w-55pc-m-m {
		flex-basis: 55%;
		max-width: 55%;
		width: 55%;
	}

	.l-grid--w-60pc-m-m {
		flex-basis: 60%;
		max-width: 60%;
		width: 60%;
	}

	.l-grid--w-66pc-m-m {
		flex-basis: 66.6666%;
		max-width: 66.6666%;
		width: 66.6666%;
	}

	.l-grid--w-70pc-m-m {
		flex-basis: 70%;
		max-width: 70%;
		width: 70%;
	}

	.l-grid--w-75pc-m-m {
		flex-basis: 75%;
		max-width: 75%;
		width: 75%;
	}

	.l-grid--w-80pc-m-m {
		flex-basis: 80%;
		max-width: 80%;
		width: 80%;
	}

	.l-grid--w-95pc-m-m {
		flex-basis: 95%;
		max-width: 95%;
		width: 95%;
	}

	.l-grid--w-100pc-m-m {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	/**
	 * offsets an item by 0.25, 0.5, 1, 2, 3, 4,5 units
	 * @class .l-grid--w-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--o-1u-s
	 */
	.l-grid--o-025u-m-m {
		margin-left: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-05u-m-m {
		margin-left: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-1u-m-m {
		margin-left: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-2u-m-m {
		margin-left: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-3u-m-m {
		margin-left: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-4u-m-m {
		margin-left: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--o-5u-m-m {
		margin-left: calc(5 * (1 / var(--grid-units) * 100%));
	}

	/**
	 * sets the padding of an item to 0, 1, 2, 3, 4,5 units
	 * @class .l-grid--p-{NUMBER}u-{SIZE}
	 * @extends grid item
	 * @example .l-grid--w-10pc-s.l-grid--p-1u-s
	 */
	.l-grid--p-0u-m-m {
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	.l-grid--p-025u-m-m {
		padding-left: calc(0.25 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.25 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-05u-m-m {
		padding-left: calc(0.5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(0.5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-1u-m-m {
		padding-left: calc(1 * (1 / var(--grid-units) * 100%));
		padding-right: calc(1 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-2u-m-m {
		padding-left: calc(2 * (1 / var(--grid-units) * 100%));
		padding-right: calc(2 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-3u-m-m {
		padding-left: calc(3 * (1 / var(--grid-units) * 100%));
		padding-right: calc(3 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-4u-m-m {
		padding-left: calc(4 * (1 / var(--grid-units) * 100%));
		padding-right: calc(4 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-5u-m-m {
		padding-left: calc(5 * (1 / var(--grid-units) * 100%));
		padding-right: calc(5 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-6u-m-m {
		padding-left: calc(6 * (1 / var(--grid-units) * 100%));
		padding-right: calc(6 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--p-7u-m-m {
		padding-left: calc(7 * (1 / var(--grid-units) * 100%));
		padding-right: calc(7 * (1 / var(--grid-units) * 100%));
	}

	.l-grid--nowrap-m-m {
		flex-wrap: nowrap;
	}
}

@media screen and (min-width: 1365px) {
	.l-grid--w-30pc-l {
		flex-basis: 30%;
		max-width: 30%;
		width: 30%;
	}

	.l-grid--w-20pc-l {
		flex-basis: 20%;
		max-width: 20%;
		width: 20%;
	}

	.l-grid--w-55pc-l {
		flex-basis: 55%;
		max-width: 55%;
		width: 55%;
	}

	.l-grid--w-60pc-l {
		flex-basis: 60%;
		max-width: 60%;
		width: 60%;
	}
}

/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/layout/custom/view.css ***!
  \*****************************************************************************************************************************************************************************************************/
/**
 * @file layout/custom/view.css
 *
 * @description
 *
 * Styles for the sitespecific view
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 * @example
 * section.layout-grid--wrapper
 *  section.layout-grid--size-6
 *  section.layout-grid--size-3
 *  section.layout-grid--size-3
 *
 * @TODO define no flexbox version
 * @TODO delete sample rules
 *
 *
 */

.l-view {
	height: 100%;
	min-width: var(--width-page-min);
	max-width: var(--width-page-max);
	margin: 0 auto;
	padding-top: calc(4 * var(--base-line-height));
	position: relative;
}

.full-width-grid .l-view {
	max-width: var(--width-page-fullwidth);
}

.campaign .l-view,
.no-white-space .l-view {
	padding-top: 0;
}

.l-view input {
	appearance: none;
}

.l-view.is-editmode [type="checkbox"] {
	appearance: checkbox;
	border-radius: 0;
}

@media screen and (min-width: 768px),print {
	.l-view {
		padding-top: 0;
	}
}

/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/layout/custom/header.css ***!
  \*******************************************************************************************************************************************************************************************************/
/**
 * @file layout/custom/header.css
 *
 * @description
 *
 * Styles for the header
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 *
 *
 */

.l-header {
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1002;
}

.is-editmode .l-header {
	position: relative;
}

@media screen and (min-width: 768px),print {
	.l-header {
		background: transparent;
		height: auto;
		padding: 0;
		position: relative;
	}

	.is-fixed .l-header {
		position: fixed;
		right: 0;
		left: 0;
		margin: 0 auto;
		max-width: 136.5rem;
		animation: animation-nav-primary-fixed 400ms;
	}

	@keyframes animation-nav-primary-fixed {
		0% {
			top: -5.6rem;
		}

		100% {
			top: 0;
		}
	}
}

/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/layout/custom/component.css ***!
  \**********************************************************************************************************************************************************************************************************/
/**********************************************************************************************************
AVAILABLE GRIDS

	classic grid			- very first but meanwhile obsolete grid which is still used by many components
							- applied by default in case no additional CSS class is set on the page's <html>
							  element

	"full-width-grid"		- introduced in 2020 for wider component contents and backgrounds
							- current default grid for all new components
							- applied via CSS class .full-width-grid on the page's <html> element
							- every component which is based on "full-width-grid" does also have to support
							  the classic grid for backward compatibility reasons

	"left-aligned-grid"		- introduced in 2021 for a proper left-alignment with the header's logo
							- "left-aligned" means:
								-- components are left-aligned on the grid and
								-- contents are left-aligned inside their respective component container
							- future default grid for all new and most of the already existing components
							- can only be considered as an extension of "full-width-grid" but not as an
							  independent grid
							- applied via CSS classes .full-width-grid.left-aligned-grid on the page's
							  <html> element (both classes are required)
***********************************************************************************************************
COMPONENT SIZES (DESCRIPTION)

	.component-small		- supported by all available grids
							- the wider the viewport gets, the wider the component gets
							- useful for components where too much empty (white)space should be prevented
							- useful for components where the content width should be kept small (mostly
							  text-based things)

	.component-wide			- supported by all available grids
							- the wider the viewport gets, the wider the component gets
							- useful for components where much space is required for background media or
							  background colors
							- useful for components where much/large content needs to be shown

	.component-medium		- supported by "full-width-grid" and therefore also "left-aligned-grid"
							- falls back to .component-small in case of the classic grid
							- tries to avoid too big differences in the component width between the different
							  viewports (means: for small viewports it equals .component-wide, then moves to
							  a compromise solution and finally for large viewports it equals .component-small)
							- useful for components with great focus on readability of text (never too short
							  or too long lines)
							- useful for components where the layout should remain rather static between the
							  different viewports

	no class at all			- can be used for so-called off-grid components
							- use case:
								-- component container stretches to the full viewport width up to the
								   "full-width-grid"'s maximum of 1920px
								-- in case of extra large viewports (> 1920px), whitespace appears
								   left/right next to the component
								-- the extra wide component container is used for background media or
								   background colors
								-- the immediate child containers (which contain the actual content) get
								   either .component-small, -medium or -large to also have the content
								   properly scaled and aligned
***********************************************************************************************************
COMPONENT SIZES (OVERVIEW)

						 MOBILE		TABLET		DESKTOP-SMALL	DESKTOP-LARGE
	.component-small	 6/6 cols	10/12 cols	 8/12 cols		 8/12 cols
	.component-medium	 6/6 cols	12/12 cols	10/12 cols		 8/12 cols
	.component-wide		 6/6 cols	12/12 cols	12/12 cols		12/12 cols
	no class at all		 full-width full-width	full-width		max. 1920px
**********************************************************************************************************/

/*****************************************************************
	VIEWPORT SIZE:
		all
	GRID VALUES (@320px viewport / "full-width-grid"):
		col					28.833333333333333333333333333333px
		gutter				21px
		side offset			21px
		content width		278px
		off-grid components	320px
	COLS IN USAGE (@320px viewport / "full-width-grid"):
		.component-small	6 of 6
		.component-medium	6 of 6
		.component-wide		6 of 6
	EXTERNAL REFERENCE:
		https://publicis.invisionapp.com/dsm/publicis/dhl-ui-library/nav/5fbf94df9eea2616760b74af/asset/5fc510345f1f337d5e6f906c/tab/design?version=60ae7223c6384f156f9bead2&mode=preview
*****************************************************************/

.component-margin {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .component-margin {
	margin-bottom: calc(4 * var(--base-line-height));
}

.left-aligned-grid .component-top-margin {
	margin-top: calc(4 * var(--base-line-height));
}

.component-margin--campaign {
	margin-bottom: calc(4 * var(--base-line-height));
}

.component-margin--campaign.component-margin {
	margin-bottom: calc(5.5 * var(--base-line-height));
}

.component-padding--campaign {
	padding-top: calc(4 * var(--base-line-height));
	padding-bottom: calc(4 * var(--base-line-height));
}

/* TODO: this selector has just (mid 2021) been deprecated and needs to be
   removed from all components soon
   (see: https://tools.publicis.sapient.com/jira/browse/DPDHLPA-23603) */
.component-top-margin {
	margin-top: calc(1.5 * var(--base-line-height));
}

.full-width-grid .component-small,
.full-width-grid .component-medium,
.full-width-grid .component-wide {
	max-width: var(--width-page-max);
	margin-left: auto;
	margin-right: auto;
}

.component-small,
.component-medium,
.component-wide {
	padding-left: var(--component-wide-padding-s);
	padding-right: var(--component-wide-padding-s);
}

/*****************************************************************
	VIEWPORT SIZE:
		>= 768
*****************************************************************/

@media screen and (min-width: 768px),print {
	.component-wide {
		padding-left: var(--component-wide-padding-m);
		padding-right: var(--component-wide-padding-m);
	}
}

/*****************************************************************
	VIEWPORT SIZE:
		768-1023
	GRID VALUES (@768px viewport / "full-width-grid"):
		col					37.75px
		gutter				21px
		side offset			42px
		content width		684px
		off-grid components	768px
	COLS IN USAGE (@768px viewport / "full-width-grid"):
		.component-small	10 of 12
		.component-medium	12 of 12
		.component-wide		12 of 12
	EXTERNAL REFERENCE:
		https://publicis.invisionapp.com/dsm/publicis/dhl-ui-library/nav/5fbf94df9eea2616760b74af/asset/5fc5118f779c8913aabb2df5/tab/design?version=60ae7223c6384f156f9bead2&mode=preview
*****************************************************************/

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.component-small,
	.component-medium {
		padding-left: calc(6 * (1 / var(--grid-units) * 100%));
		padding-right: calc(6 * (1 / var(--grid-units) * 100%));
	}

	.full-width-grid .component-small {
		padding-left: calc(((100% - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-m)) / 12) + var(--component-wide-padding-m) + var(--grid-col-gap));
		padding-right: calc(((100% - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-m)) / 12) + var(--component-wide-padding-m) + var(--grid-col-gap));
	}

	.full-width-grid.left-aligned-grid .component-small,
	.full-width-grid .component-medium {
		padding-left: var(--component-wide-padding-m);
		padding-right: var(--component-wide-padding-m);
	}
}

/*****************************************************************
	VIEWPORT SIZE:
		>= 1024
*****************************************************************/

@media screen and (min-width: 1024px),print {
	.component-small,
	.component-medium {
		padding-left: calc(7 * (1 / var(--grid-units) * 100%));
		padding-right: calc(7 * (1 / var(--grid-units) * 100%));
	}
}

/*****************************************************************
	VIEWPORT SIZE:
		1024-1364
	GRID VALUES (@1025px viewport / "full-width-grid"):
		col					59.166666666666666666666666666667px
		gutter				21px
		side offset			42px
		content width		941px
		off-grid components	1025px
	COLS IN USAGE (@1025px viewport / "full-width-grid"):
		.component-small	 8 of 12
		.component-medium	10 of 12
		.component-wide		12 of 12
	EXTERNAL REFERENCE:
		https://publicis.invisionapp.com/dsm/publicis/dhl-ui-library/nav/5fbf94df9eea2616760b74af/asset/5fc5171e840e7c6998983441/tab/design?version=60ae7223c6384f156f9bead2&mode=preview
*****************************************************************/

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.full-width-grid .component-small {
		padding-left: calc(((100% - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-m)) / (12 / 2)) + var(--component-wide-padding-m) + 2 * var(--grid-col-gap));
		padding-right: calc(((100% - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-m)) / (12 / 2)) + var(--component-wide-padding-m) + 2 * var(--grid-col-gap));
	}

	.full-width-grid .component-medium {
		padding-left: calc(((100% - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-m)) / 12 ) + var(--component-wide-padding-m) + var(--grid-col-gap));
		padding-right: calc(((100% - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-m)) / 12 ) + var(--component-wide-padding-m) + var(--grid-col-gap));
	}

	.full-width-grid.left-aligned-grid .component-small,
	.full-width-grid.left-aligned-grid .component-medium {
		padding-left: var(--component-wide-padding-m);
		padding-right: calc(100% - var(--component-wide-padding-m) - ((100% - 2 * var(--component-wide-padding-m) - 11 * var(--grid-col-gap)) / 12 * 9) - 8 * var(--grid-col-gap));
	}
}

/*****************************************************************
	VIEWPORT SIZE:
		>= 1365
	GRID VALUES (@1365px viewport / "full-width-grid"):
		col					80.5px
		gutter				21px
		side offset			84px
		content width		1197px
		off-grid components	1365px
	COLS IN USAGE (@1365px viewport / "full-width-grid"):
		.component-small	 8 of 12
		.component-medium	 8 of 12
		.component-wide		12 of 12
	EXTERNAL REFERENCE:
		https://publicis.invisionapp.com/dsm/publicis/dhl-ui-library/nav/5fbf94df9eea2616760b74af/asset/5fc517227c214a296dc578b0/tab/design?version=60ae7223c6384f156f9bead2&mode=preview
*****************************************************************/

@media screen and (min-width: 1365px) {
	.full-width-grid .component-small,
	.full-width-grid .component-medium {
		padding-left: calc(((var(--width-page-max) - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-l)) / (12 / 2)) + var(--component-wide-padding-l) + 2 * var(--grid-col-gap));
		padding-right: calc(((var(--width-page-max) - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-l)) / (12 / 2)) + var(--component-wide-padding-l) + 2 * var(--grid-col-gap));
	}

	.full-width-grid.left-aligned-grid .component-small,
	.full-width-grid.left-aligned-grid .component-medium {
		padding-left: var(--component-wide-padding-l);
		padding-right: calc(var(--width-page-max) - var(--component-wide-padding-l) - var(--width-page-max-nopadding-small-c20));
	}

	.full-width-grid .component-wide {
		padding-left: var(--component-wide-padding-l);
		padding-right: var(--component-wide-padding-l);
	}

	.component-margin--campaign {
		margin-bottom: calc(5 * var(--base-line-height));
	}

	.left-aligned-grid .component-margin {
		margin-bottom: calc(5 * var(--base-line-height));
	}

	.left-aligned-grid .component-top-margin {
		margin-top: calc(5 * var(--base-line-height));
	}

	.component-margin--campaign.component-margin {
		margin-bottom: calc(6.5 * var(--base-line-height));
	}

	.component-padding--campaign {
		padding-bottom: calc(7 * var(--base-line-height));
		padding-top: calc(7 * var(--base-line-height));
	}
}

/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/layout/custom/wcag.css ***!
  \*****************************************************************************************************************************************************************************************************/
/**
 * @file layout/custom/grid.css
 *
 * @description
 *
 * Styles for the wcag properties
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 *
 */

.l-wcag--hidden {
	position: absolute;
	top: 0;
	left: -999.9rem;
	height: 0.1rem;
	width: 0.1rem;
	z-index: 1000;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/less-loader/dist/cjs.js!./source/clientlib-all/css/layout/core/grid/grid.less ***!
  \************************************************************************************************************************************************************************************************************************************************/
/**
 * This file is part of the "AEM responsive grid system". Its content is dependent on the
 * respective Adobe AEM version that we currently use. For the sake of a better development
 * process it has been migrated from the backend to the frontend code base.
 *
 * Ideally, this file is never adjusted or overwritten, except it is urgently required
 * (every adjustment or overwriting can lead to side effects on production environment or
 * issues in a future migration to a newer version of the "AEM responsive grid system").
 */
/* maximum amount of grid cells to be provided */
/* imports */
/**
 * This file is part of the "AEM responsive grid system". Its content is dependent on the
 * respective Adobe AEM version that we currently use. For the sake of a better development
 * process it has been migrated from the backend to the frontend code base.
 *
 * IT IS FORBIDDEN TO ADJUST OR OVERWRITE THIS FILE SINCE IT IS AN IMMUTABLE PART OF THE
 * ADOBE AEM INSTALLATION!
 */
/* grid component */
.aem-Grid {
  display: block;
  width: 100%;
}
.aem-Grid::before,
.aem-Grid::after {
  display: table;
  content: " ";
}
.aem-Grid::after {
  clear: both;
}
/* placeholder for new components */
.aem-Grid-newComponent {
  clear: both;
  margin: 0;
}
/* column of a grid */
.aem-GridColumn {
  box-sizing: border-box;
  clear: both;
}
/* force showing hidden */
.aem-GridShowHidden > .aem-Grid > .aem-GridColumn {
  display: block !important;
  /* stylelint-disable-line declaration-no-important */
}
/* generates all the rules for the grid columns up to the given amount of column */
/* generates all the rules for the grid column offset up to the given amount of column */
/* generates all the rules for the grid and columns for the given break point and total of columns */
/* generates all the rules for the grids and columns */
/* API function to be called to generate a grid config */
/* default breakpoint (desktop first approach) */
.aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 20%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 40%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 60%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 80%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 20%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 40%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 60%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 80%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 16.66666667%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 83.33333333%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 16.66666667%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 83.33333333%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 14.28571429%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 28.57142857%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 42.85714286%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 57.14285714%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 71.42857143%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 85.71428571%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 14.28571429%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 28.57142857%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 42.85714286%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 57.14285714%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 71.42857143%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 85.71428571%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 12.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 37.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 62.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 87.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 12.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 37.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 62.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 87.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 11.11111111%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 22.22222222%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 44.44444444%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 55.55555556%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 77.77777778%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 88.88888889%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 11.11111111%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 22.22222222%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 44.44444444%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 55.55555556%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 77.77777778%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 88.88888889%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 10%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 20%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 30%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 40%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 60%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 70%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 80%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 90%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 10%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 20%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 30%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 40%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 60%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 70%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 80%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 90%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 9.09090909%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 18.18181818%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 27.27272727%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 36.36363636%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 45.45454545%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 54.54545455%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 63.63636364%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 72.72727273%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 81.81818182%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 90.90909091%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--11 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 9.09090909%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 18.18181818%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 27.27272727%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 36.36363636%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 45.45454545%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 54.54545455%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 63.63636364%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 72.72727273%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 81.81818182%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 90.90909091%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--11 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 8.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 16.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 41.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 58.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 83.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--11 {
  float: left;
  clear: none;
  width: 91.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--12 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 8.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 16.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 41.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 58.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 83.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--11 {
  margin-left: 91.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--12 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 20%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 40%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 60%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 80%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 20%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 40%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 60%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 80%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 16.66666667%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 83.33333333%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 16.66666667%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 83.33333333%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 14.28571429%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 28.57142857%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 42.85714286%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 57.14285714%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 71.42857143%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 85.71428571%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 14.28571429%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 28.57142857%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 42.85714286%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 57.14285714%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 71.42857143%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 85.71428571%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 12.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 37.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 62.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 87.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 12.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 37.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 62.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 87.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 11.11111111%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 22.22222222%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 44.44444444%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 55.55555556%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 77.77777778%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 88.88888889%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 11.11111111%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 22.22222222%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 44.44444444%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 55.55555556%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 77.77777778%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 88.88888889%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 10%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 20%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 30%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 40%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 60%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 70%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 80%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 90%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 10%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 20%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 30%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 40%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 60%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 70%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 80%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 90%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 9.09090909%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 18.18181818%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 27.27272727%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 36.36363636%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 45.45454545%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 54.54545455%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 63.63636364%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 72.72727273%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 81.81818182%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 90.90909091%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--11 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 9.09090909%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 18.18181818%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 27.27272727%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 36.36363636%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 45.45454545%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 54.54545455%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 63.63636364%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 72.72727273%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 81.81818182%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 90.90909091%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--11 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 8.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 16.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 41.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 58.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 83.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--11 {
  float: left;
  clear: none;
  width: 91.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--12 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 8.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 16.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 41.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 58.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 83.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--11 {
  margin-left: 91.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--12 {
  margin-left: 100%;
}
.aem-Grid > .aem-GridColumn.aem-GridColumn--default--newline {
  /* newline behavior */
  display: block;
  clear: both !important;
  /* stylelint-disable-line declaration-no-important */
}
.aem-Grid > .aem-GridColumn.aem-GridColumn--default--none {
  /* none behavior */
  display: block;
  clear: none !important;
  /* stylelint-disable-line declaration-no-important */
  /* prevent the clear:both effect of another breakpoint new line */
  float: left;
  /* enforce the float positioning to maintain the column height and position relative to previous columns */
}
.aem-Grid > .aem-GridColumn.aem-GridColumn--default--hide {
  /* hide behavior */
  display: none;
}
/* tablet breakpoint */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 14.28571429%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 28.57142857%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 42.85714286%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 57.14285714%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 71.42857143%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 85.71428571%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 14.28571429%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 28.57142857%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 42.85714286%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 57.14285714%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 71.42857143%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 85.71428571%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 12.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 37.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 62.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 87.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 12.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 37.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 62.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 87.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 11.11111111%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 22.22222222%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 44.44444444%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 55.55555556%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 77.77777778%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 88.88888889%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 11.11111111%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 22.22222222%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 44.44444444%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 55.55555556%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 77.77777778%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 88.88888889%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 10%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 30%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 70%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 90%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 10%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 30%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 70%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 90%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 9.09090909%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 18.18181818%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 27.27272727%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 36.36363636%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 45.45454545%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 54.54545455%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 63.63636364%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 72.72727273%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 81.81818182%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 90.90909091%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--11 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 9.09090909%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 18.18181818%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 27.27272727%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 36.36363636%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 45.45454545%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 54.54545455%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 63.63636364%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 72.72727273%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 81.81818182%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 90.90909091%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--11 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 8.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 41.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 58.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--11 {
    float: left;
    clear: none;
    width: 91.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--12 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 8.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 41.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 58.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--11 {
    margin-left: 91.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--12 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--1 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--1 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--1 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 14.28571429%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 28.57142857%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 42.85714286%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 57.14285714%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 71.42857143%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 85.71428571%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 14.28571429%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 28.57142857%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 42.85714286%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 57.14285714%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 71.42857143%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 85.71428571%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 12.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 37.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 62.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 87.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 12.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 37.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 62.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 87.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 11.11111111%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 22.22222222%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 44.44444444%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 55.55555556%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 77.77777778%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 88.88888889%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 11.11111111%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 22.22222222%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 44.44444444%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 55.55555556%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 77.77777778%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 88.88888889%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 10%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 30%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 70%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 90%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 10%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 30%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 70%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 90%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 9.09090909%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 18.18181818%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 27.27272727%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 36.36363636%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 45.45454545%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 54.54545455%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 63.63636364%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 72.72727273%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 81.81818182%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 90.90909091%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--11 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 9.09090909%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 18.18181818%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 27.27272727%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 36.36363636%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 45.45454545%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 54.54545455%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 63.63636364%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 72.72727273%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 81.81818182%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 90.90909091%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--11 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 8.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 41.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 58.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--11 {
    float: left;
    clear: none;
    width: 91.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--12 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 8.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 41.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 58.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--11 {
    margin-left: 91.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--12 {
    margin-left: 100%;
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--tablet--newline {
    /* newline behavior */
    display: block;
    clear: both !important;
    /* stylelint-disable-line declaration-no-important */
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--tablet--none {
    /* none behavior */
    display: block;
    clear: none !important;
    /* stylelint-disable-line declaration-no-important */
    /* prevent the clear:both effect of another breakpoint new line */
    float: left;
    /* enforce the float positioning to maintain the column height and position relative to previous columns */
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--tablet--hide {
    /* hide behavior */
    display: none;
  }
}
/* phone breakpoint (AEM uses term "phone" instead of "mobile") */
@media screen and (max-width: 767px),print {
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 14.28571429%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 28.57142857%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 42.85714286%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 57.14285714%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 71.42857143%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 85.71428571%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 14.28571429%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 28.57142857%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 42.85714286%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 57.14285714%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 71.42857143%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 85.71428571%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 12.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 37.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 62.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 87.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 12.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 37.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 62.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 87.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 11.11111111%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 22.22222222%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 44.44444444%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 55.55555556%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 77.77777778%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 88.88888889%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 11.11111111%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 22.22222222%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 44.44444444%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 55.55555556%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 77.77777778%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 88.88888889%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 10%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 30%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 70%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 90%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 10%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 30%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 70%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 90%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 9.09090909%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 18.18181818%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 27.27272727%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 36.36363636%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 45.45454545%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 54.54545455%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 63.63636364%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 72.72727273%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 81.81818182%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 90.90909091%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--11 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 9.09090909%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 18.18181818%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 27.27272727%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 36.36363636%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 45.45454545%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 54.54545455%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 63.63636364%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 72.72727273%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 81.81818182%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 90.90909091%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--11 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 8.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 41.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 58.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--11 {
    float: left;
    clear: none;
    width: 91.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--12 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 8.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 41.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 58.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--11 {
    margin-left: 91.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--12 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 14.28571429%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 28.57142857%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 42.85714286%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 57.14285714%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 71.42857143%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 85.71428571%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 14.28571429%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 28.57142857%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 42.85714286%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 57.14285714%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 71.42857143%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 85.71428571%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 12.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 37.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 62.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 87.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 12.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 37.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 62.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 87.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 11.11111111%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 22.22222222%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 44.44444444%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 55.55555556%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 77.77777778%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 88.88888889%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 11.11111111%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 22.22222222%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 44.44444444%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 55.55555556%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 77.77777778%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 88.88888889%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 10%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 30%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 70%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 90%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 10%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 30%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 70%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 90%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 9.09090909%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 18.18181818%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 27.27272727%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 36.36363636%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 45.45454545%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 54.54545455%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 63.63636364%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 72.72727273%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 81.81818182%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 90.90909091%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--11 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 9.09090909%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 18.18181818%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 27.27272727%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 36.36363636%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 45.45454545%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 54.54545455%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 63.63636364%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 72.72727273%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 81.81818182%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 90.90909091%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--11 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 8.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 41.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 58.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--11 {
    float: left;
    clear: none;
    width: 91.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--12 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 8.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 41.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 58.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--11 {
    margin-left: 91.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--12 {
    margin-left: 100%;
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--newline {
    /* newline behavior */
    display: block;
    clear: both !important;
    /* stylelint-disable-line declaration-no-important */
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--none {
    /* none behavior */
    display: block;
    clear: none !important;
    /* stylelint-disable-line declaration-no-important */
    /* prevent the clear:both effect of another breakpoint new line */
    float: left;
    /* enforce the float positioning to maintain the column height and position relative to previous columns */
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--hide {
    /* hide behavior */
    display: none;
  }
}

/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/layout/core/xf/xf.css ***!
  \****************************************************************************************************************************************************************************************************/
/**
 * This file partially overwrites default styles of "AEM experience fragments"
 * (see: https://www.aemcomponents.dev/content/core-components-examples/library/page-authoring/experience-fragment.html).
 *
 * Its content is dependent on the respective Adobe AEM version that we currently
 * use. For the sake of a better development process it has been migrated from
 * the backend to the frontend code base.
 *
 * Ideally, this file is never adjusted or overwritten, except it is urgently required
 * (every adjustment or overwriting can lead to side effects on production environment or
 * issues in a future migration to a newer version of "AEM experience fragments").
 */

.xf-content-height {

	/* overwriting original "margin: 0 -12px;" */
	/* stylelint-disable-next-line declaration-no-important */
	margin: 0 !important;
}

/*!********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/base.css ***!
  \********************************************************************************************************************************************************************************************/
html,
body {

	/* global styles */
	background: var(--color-white-500);
	background-color: var(--color-white-500) !important; /* stylelint-disable-line declaration-no-important */
	color: var(--color-black-400);
	text-rendering: optimizeLegibility;
	margin: auto;
	position: relative;
	max-width: 100%;

	/* iconfont.css */

	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: auto;
}

/* overwrite normalize.css after update to new major version 8.x.x;
   see: https://tools.publicis.sapient.com/jira/browse/DPDHLPA-30275 */
button,
input,
optgroup,
select,
textarea {
	line-height: inherit;
}

body.yellow-gradient {
	background: var(--linear-gradient-campaign-yellow-to-right-body-background) !important; /* stylelint-disable-line declaration-no-important */
}

body.black {
	background-color: var(--color-black-400) !important; /* stylelint-disable-line declaration-no-important */
}

/* in some components the font color is set to white; to avoid white and
therefore invisible alt text of an image element, we set the font color for all
images to web-save black by default */
img {
	color: var(--color-black-400);
}

/* global setting for input */
input {
	border-radius: 0;
}

/* browserspecific stuff */

/* remove "clear"-enhancement on IE>=10 and Edge in Modern UI */
input::-ms-clear {
	width: 0;
	height: 0;
}

.clear {
	clear: both;
}

.noscroll {
	overflow: hidden;
}

::placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
	color: var(--color-gray-600);
}

.has-editor-margin {
	padding-top: calc(10 * var(--base-line-height));
}

.text-info-s,
.text-info-m {
	line-height: calc(2 * var(--base-line-height));
}

.text-info-s.icon-time::before,
.text-info-s.icon-important::before {
	margin-right: 0.8rem;
	position: relative;
	top: 0.1rem;
}

.text-info-m.icon-important::before {
	font-size: 2rem;
	margin-right: 0.8rem;
}

.clearfix::after {
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
}

/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/color.css ***!
  \*********************************************************************************************************************************************************************************************/
/**
 * @file base/colors.css
 *
 * @description
 *
 * Overall color classes
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 *
 */

/* PRIMARY COLORS */

.color-yellow-500 {
	color: var(--color-yellow-500) !important; /* stylelint-disable-line declaration-no-important */
}

.color-red-500 {
	color: var(--color-red-500) !important; /* stylelint-disable-line declaration-no-important */
}

/* To support the RTE pages(backend compatibility), we are keeping color-web-black class also */
.color-web-black {
	color: var(--color-black-400) !important; /* stylelint-disable-line declaration-no-important */
}

.color-black-400 {
	color: var(--color-black-400) !important; /* stylelint-disable-line declaration-no-important */
}

/* To support the RTE pages(backend compatibility), we are keeping color-web-white class also */
.color-web-white {
	color: var(--color-white-500) !important; /* stylelint-disable-line declaration-no-important */
}

.color-white-500 {
	color: var(--color-white-500) !important; /* stylelint-disable-line declaration-no-important */
}

.color-gray-600 {
	color: var(--color-gray-600) !important; /* stylelint-disable-line declaration-no-important */
}

/* SECONDARY COLORS */

.color-red-400 {
	color: var(--color-red-400) !important; /* stylelint-disable-line declaration-no-important */
}

.color-yellow-400 {
	color: var(--color-yellow-400) !important; /* stylelint-disable-line declaration-no-important */
}

.color-yellow-300 {
	color: var(--color-yellow-300) !important; /* stylelint-disable-line declaration-no-important */
}

/* To support the RTE pages(backend compatibility), we are keeping color-secondary-green-1 class also */
.color-secondary-green-1 {
	color: var(--color-green-500) !important; /* stylelint-disable-line declaration-no-important */
}

.color-green-500 {
	color: var(--color-green-500) !important; /* stylelint-disable-line declaration-no-important */
}

.color-green-600 {
	color: var(--color-green-600) !important; /* stylelint-disable-line declaration-no-important */
}

.color-gray-400 {
	color: var(--color-gray-400) !important; /* stylelint-disable-line declaration-no-important */
}

.color-gray-300 {
	color: var(--color-gray-300) !important; /* stylelint-disable-line declaration-no-important */
}

.color-gray-200 {
	color: var(--color-gray-200) !important; /* stylelint-disable-line declaration-no-important */
}

.color-gray-50 {
	color: var(--color-gray-50) !important; /* stylelint-disable-line declaration-no-important */
}

.color-gray-100 {
	color: var(--color-gray-100) !important; /* stylelint-disable-line declaration-no-important */
}

.color-yellow-500--mobile {
	color: var(--color-yellow-500) !important; /* stylelint-disable-line declaration-no-important */
}

.color-red-500--mobile {
	color: var(--color-red-500) !important; /* stylelint-disable-line declaration-no-important */
}

.color-black-400--mobile {
	color: var(--color-black-400) !important; /* stylelint-disable-line declaration-no-important */
}

.color-white-500--mobile {
	color: var(--color-white-500) !important; /* stylelint-disable-line declaration-no-important */
}

/* BACKGROUND COLORS */
.background-color-yellow-500 {
	background-color: var(--color-yellow-500) !important; /* stylelint-disable-line declaration-no-important */
}

.background-color-black-400 {
	background-color: var(--color-black-400) !important; /* stylelint-disable-line declaration-no-important */
}

.background-color-red-500 {
	background-color: var(--color-red-500) !important; /* stylelint-disable-line declaration-no-important */
}

.background-color-white-500 {
	background-color: var(--color-white-500) !important; /* stylelint-disable-line declaration-no-important */
}

.background-color-gradient-postyellow-vertical {
	background: var(--linear-gradient-yellow-to-bottom) !important; /* stylelint-disable-line declaration-no-important */
}

.background-color-gradient-postyellow-horizontal {
	background: var(--linear-gradient-yellow-to-right) !important; /* stylelint-disable-line declaration-no-important */
}

/**
 * major breakpoint "m"
 * @size >=768
 */
@media screen and (min-width: 768px),print {
	.color-yellow-500--desktop {
		color: var(--color-yellow-500) !important; /* stylelint-disable-line declaration-no-important */
	}

	.color-red-500--desktop {
		color: var(--color-red-500) !important; /* stylelint-disable-line declaration-no-important */
	}

	.color-black-400--desktop {
		color: var(--color-black-400) !important; /* stylelint-disable-line declaration-no-important */
	}

	.color-white-500--desktop {
		color: var(--color-white-500) !important; /* stylelint-disable-line declaration-no-important */
	}
}

/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/color-gradient.css ***!
  \******************************************************************************************************************************************************************************************************/
.linear-gradient {
	background: var(--color-yellow-500); /* Old browsers */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--color-yellow-500)), color-stop(83%, var(--color-yellow-400))); /* Chrome,Safari4+ */
	background: linear-gradient(to bottom, var(--color-yellow-500) 0%, var(--color-yellow-400) 83%); /* W3C */
	width: 100%;
}

.linear-gradient.transparency {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 204, 0, 1)), color-stop(5%, rgba(255, 204, 0, 0.94)), color-stop(90%, rgba(255, 204, 0, 0)), color-stop(100%, rgba(255, 204, 0, 0))); /* Chrome,Safari4+ */
	background: linear-gradient(to bottom, rgba(255, 204, 0, 1) 0%, rgba(255, 204, 0, 0.94) 5%, rgba(255, 204, 0, 0) 90%, rgba(255, 204, 0, 0) 100%); /* W3C */
	height: calc(5 * var(--base-line-height));
	width: 100%;
}

.shadow-small {
	box-shadow: var(--shadow-small);
}

.shadow-medium {
	box-shadow: var(--shadow-medium);
}

.shadow-large {
	box-shadow: var(--shadow-large);
}

.shadow-blurry {
	box-shadow: var(--shadow-blurry);
}

.shadow-float-effect {
	box-shadow: var(--shadow-float-effect);
}

/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/typography.css ***!
  \**************************************************************************************************************************************************************************************************/
/* Global */

html {
	font-family: "Delivery", "Verdana", sans-serif /*rtl:prepend:"Delivery Arabic", */;
	font-size: var(--base-font-size);
}

html.fallback-font {
	font-family: "Verdana", sans-serif;
}

body {
	font-size: var(--body-font-size);
	line-height: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid body {
	font-size: var(--body-font-size-c20);
}

.overline {
	font-weight: normal;
}

b,
strong,
p.bold {
	font-weight: bold;
}

p {
	margin-bottom: var(--base-line-height);
}

p.small,
span.small,
div.small {
	font-size: var(--font-size-text-small);
	line-height: calc(1 * var(--base-line-height) + 0.1rem);
}

p.boldlarge {
	font-size: var(--font-size-text-large);
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: 800;
}

p.sub-h3 {
	font-size: var(--font-size-text-large);
	font-weight: normal;
}

span.marked {
	background-color: var(--color-yellow-400);
}

/* sanitation */

hr {
	border: 0.1rem solid;
	margin: -0.1rem 0;
}

sup,
sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em; /* stylelint-disable-line unit-allowed-list */
}

sub {
	top: 0.4em; /* stylelint-disable-line unit-allowed-list */
}

abbr {
	border: 0.1rem var(--color-gray-600) dotted;
}

.quote {
	color: var(--color-red-500);
	font-size: var(--font-size-5);
	font-family: "Delivery", "Verdana", sans-serif /*rtl:prepend:"Delivery Arabic", */;
	font-weight: 200;
	line-height: calc(3 * var(--base-line-height));
	text-align: center;
}

.fallback-font .quote {
	font-family: "Verdana", sans-serif;
}

blockquote {
	border-left: 0.3rem solid var(--color-gray-300);
	font-family: "Delivery", "Verdana", sans-serif /*rtl:prepend:"Delivery Arabic", */;
	font-weight: bold;
	margin: 0;
	padding-left: 2rem;
	margin-left: 2rem;
}

.fallback-font blockquote {
	font-family: "Verdana", sans-serif;
}

/* text alignment */

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

/* h1-h6 general */

h1,
h2,
h3,
h4,
h5,
h6,
.level1,
.level2,
.level3,
.level4,
.level5,
.level6 {
	font-family: "Delivery", "Verdana", sans-serif/*rtl:prepend:"Delivery Arabic", */;
	margin: 0 0 calc(2 * var(--base-line-height)) 0;
}

.fallback-font h1,
.fallback-font h2,
.fallback-font h3,
.fallback-font h4,
.fallback-font h5,
.fallback-font h6 {
	font-family: "Verdana", sans-serif;
}

/* descending specificity is required to force correct font-family overwriting */
h1,
h2,
h3,
h4,
h5,
.level1,
.level2,
.level3,
.level4,
.level5,
.level6 {
	font-weight: 800;
}

p.teaseroverline {
	font-weight: 200;
}

h4,
.level4 {
	font-size: var(--font-size-h4);
	line-height: calc(1.7 * var(--base-line-height));
}

h5,
.level5 {
	font-size: var(--font-size-h5);
	line-height: calc(1.5 * var(--base-line-height));
}

h1,
h2,
.level1,
.level2 {
	text-transform: initial;
}

h1 .sub-h1,
.level1 .sub-h1,
.overline,
h2 .sub-h2 {
	font-weight: 200;
	display: block;
}

.level3--campaign {
	font-size: var(--font-size-campaign-level3-mobile);
	line-height: var(--font-size-campaign-level3-mobile);
}

.level2--campaign {
	font-size: var(--font-size-campaign-level2-mobile);
	line-height: var(--font-size-campaign-level2-mobile);
}

.level1--campaign {
	font-size: var(--font-size-campaign-level1-mobile);
	line-height: var(--font-size-campaign-level1-mobile);
}

.level2--campaign .overline {
	font-size: var(--font-size-text-large);
	line-height: calc(var(--font-size-text-large) + 0.2rem);
	margin-bottom: calc(0.5 * var(--base-line-height));
}

@media screen and (max-width: 479px) {
	h1,
	.level1 {
		font-size: var(--font-size-h1-mobile-small);
		line-height: calc(2 * var(--base-line-height));
	}

	h2,
	.level2,
	h1 .sub-h1,
	.level1 .sub-h1,
	h2 .sub-h2 {
		font-size: var(--font-size-h2-mobile-small);
		line-height: calc(1.5 * var(--base-line-height));
	}

	h3,
	.level3 {
		font-size: var(--font-size-h3-mobile);
		line-height: calc(1.7 * var(--base-line-height));
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	h1,
	.level1 {
		font-size: var(--font-size-h1-mobile-medium);
		line-height: calc(2.5 * var(--base-line-height));
	}

	h2,
	.level2,
	h1 .sub-h1,
	.level1 .sub-h1,
	h2 .sub-h2 {
		font-size: var(--font-size-h2-mobile-medium);
		line-height: calc(2 * var(--base-line-height));
	}

	h3,
	.level3 {
		font-size: var(--font-size-h3-mobile);
		line-height: calc(1.7 * var(--base-line-height));
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	h1,
	.level1 {
		font-size: var(--font-size-h1-mobile-large);
		line-height: calc(3 * var(--base-line-height));
	}

	h2,
	.level2,
	h1 .sub-h1,
	.level1 .sub-h1,
	h2 .sub-h2 {
		font-size: var(--font-size-h2-mobile-large);
		line-height: calc(2.5 * var(--base-line-height));
	}

	h3,
	.level3 {
		font-size: var(--font-size-h3-tablet);
		line-height: calc(2.5 * var(--base-line-height));
	}
}

@media screen and (max-width: 767px),print {
	h1.tiny,
	h1.small,
	h2.tiny,
	h2.small {
		font-size: calc(2 * var(--font-size-1));
		line-height: calc(2 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	h1,
	.level1 {
		font-size: var(--font-size-h1-mobile-large);
		line-height: calc(3 * var(--base-line-height));
	}

	h1.small,
	h2.small {
		font-size: calc(2.5 * var(--font-size-1));
		line-height: calc(2.5 * var(--base-line-height));
	}

	h1.tiny,
	h2.tiny {
		font-size: calc(2 * var(--font-size-1));
		line-height: calc(2 * var(--base-line-height));
	}

	h2,
	.level2,
	h1 .sub-h1,
	.level1 .sub-h1,
	h2 .sub-h2 {
		font-size: var(--font-size-h2-mobile-large);
		line-height: calc(2.5 * var(--base-line-height));
	}

	h3,
	.level3 {
		font-size: var(--font-size-h3-tablet);
		line-height: calc(2.5 * var(--base-line-height));
	}

	.level2--campaign {
		font-size: var(--font-size-campaign-level2-tablet);
		line-height: var(--font-size-campaign-level2-tablet);
	}

	.level1--campaign {
		font-size: var(--font-size-campaign-level1-tablet);
		line-height: var(--font-size-campaign-level1-tablet);
	}

	.level2--campaign .overline {
		font-size: var(--font-size-h4);
	}
}

@media screen and (min-width: 1024px),print {
	h1,
	.level1 {
		font-size: var(--font-size-h1-desktop);
		line-height: calc(3.5 * var(--base-line-height));
	}

	h1.small,
	h2.small {
		font-size: calc(3 * var(--font-size-1));
		line-height: calc(3 * var(--base-line-height));
	}

	h1.tiny,
	h2.tiny {
		font-size: calc(2.5 * var(--font-size-1) - 0.3rem);
		line-height: calc(2.5 * var(--base-line-height) - 0.3rem);
	}

	h2,
	.level2,
	h1 .sub-h1,
	.level1 .sub-h1,
	h2 .sub-h2 {
		font-size: var(--font-size-h2-mobile-large);
		line-height: calc(2.5 * var(--base-line-height));
	}

	h3,
	.level3 {
		font-size: var(--font-size-h3-tablet);
		line-height: calc(2.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.level3--campaign {
		font-size: var(--font-size-campaign-level3-desktop-small);
		line-height: var(--font-size-campaign-level3-desktop-small);
	}

	.level2--campaign {
		font-size: var(--font-size-campaign-level2-desktop-small);
		line-height: var(--font-size-campaign-level2-desktop-small);
	}

	.level1--campaign {
		font-size: var(--font-size-campaign-level1-desktop-small);
		line-height: var(--font-size-campaign-level1-desktop-small);
	}

	.level2--campaign .overline {
		font-size: var(--font-size-h4);
	}
}

@media screen and (min-width: 1365px) {
	h1.small,
	h2.small {
		font-size: var(--font-size-h1-desktop);
		line-height: calc(3.5 * var(--base-line-height));
	}

	h1.tiny,
	h2.tiny {
		font-size: var(--font-size-h2-mobile-large);
		line-height: calc(2.5 * var(--base-line-height) + 0.3rem);
	}

	.level3--campaign {
		font-size: var(--font-size-campaign-level3-desktop-large);
		line-height: var(--font-size-campaign-level3-desktop-large);
	}

	.level2--campaign {
		font-size: var(--font-size-campaign-level2-desktop-large);
		line-height: var(--font-size-campaign-level2-desktop-large);
	}

	.level1--campaign {
		font-size: var(--font-size-campaign-level1-desktop-large);
		line-height: var(--font-size-campaign-level1-desktop-large);
	}

	.level2--campaign .overline {
		font-size: var(--font-size-5);
	}
}

/*!********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/link.css ***!
  \********************************************************************************************************************************************************************************************/
/**
 * @file base/link.css
 *
 * @description
 *
 * Overall basic styles for links
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 * @example
 * 	<a class="link link-red" href="#">Textlink</a>
 *	<a class="link link-external has-icon link-red" href="#">External</a>
 *	<a class="link link-internal has-icon" href="#">Internal</a>
 *	<a class="link link-internal link-red has-icon" href="#">Internal red</a>
 *	<a class="link link-arrow-down has-icon" href="#">Arrow Down</a>
 *
 */

/* global anchor styles */
a {
	text-decoration: none;
}

a.icon-left::before {
	display: inline-block;
	margin-right: 1rem;
}

.link {
	position: relative;
	display: inline-block;
	color: var(--color-black-400);
	font-weight: bold;
	transition: color 200ms;
}

.link-light-grey {
	color: var(--color-gray-600);
	transition: color 200ms;
}

.link-white,
.link-white.link-internal::after,
.link-white.link-external::after {
	color: var(--color-white-500);
	transition: color 200ms;
}

.link-red,
.link::before {
	color: var(--color-red-500);
	transition: color 200ms;
}

.c-nav--mobile-meta .link::before {
	color: var(--color-black-400);
}

.link-back::before {
	content: var(--icon-chevron-back);
	color: var(--color-red-500);
	font-size: 1.2rem;
	top: 0.1rem;
	padding-right: calc(0.5 * var(--base-line-height));
	display: inline-block;
}

/* rtl:raw:
.link-back::before {
	transform: scaleX(-1);
} */

.link-mail::after {
	content: var(--icon-email);
	margin-left: 0.5rem;
	font-size: 1.3rem;
	top: 0.2rem;
	margin-right: 0.4rem;
}

.link-phone::after {
	content: var(--icon-helpline);
	font-size: 1.1rem;
	margin-left: 0.7rem;
	top: 0;
	margin-right: 0.4rem;
}

/* rtl:raw:
.link-phone::after {
  transform: rotateY(180deg);
	display:inline-block;
}
*/

.link-internal::after {
	top: 0.1rem;
	content: var(--icon-chevron-forward);
	font-size: 1.2rem;
	margin-left: 0.4rem;
	color: var(--color-red-500);
}

.left-aligned-grid .link-internal::after {
	top: 0;
	content: var(--icon-chevron-forward);
	margin-left: 0.7rem;
}

/* rtl:raw:
.link-internal::after {
	display: inline-block;
	transform: scaleX(-1);
}
*/

.link-external::after {
	content: var(--icon-open-in-new-window);
	font-size: 1.4rem;
	margin-left: 0.7rem;
	margin-right: 0.4rem;
	color: var(--color-red-500);
	vertical-align: middle;
	display: inline-block;
}

/* rtl:raw:
.link-external::after {
	transform: scaleX(-1);
}
*/

.left-aligned-grid .link-external::after {
	content: var(--icon-open-in-new-window);
}

/* rtl:raw:
.left-aligned-grid .link-external::after {
	transform: scaleX(-1);
}
*/

.link-external-wide,
.link-internal-wide {
	color: var(--color-black-400);
	display: block;
	top: 0.1rem;
	width: 100%;
	border-width: 0.1rem;
	border-style: solid;
	border-color: var(--color-gray-300) transparent;
	padding: calc(1 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(1 * var(--base-line-height)) 0;
	cursor: pointer;
}

.link-external-wide a,
.link-external-wide span,
.link-internal-wide a,
.link-internal-wide span {
	color: var(--color-black-400);
	overflow: hidden;
	align-self: center;
	width: 100%;
	padding-right: calc(1 * var(--base-line-height));
	transition: color 200ms;
}

.link-external-wide a::after,
.link-external-wide span::after,
.link-internal-wide a::after,
.link-internal-wide span::after {
	color: var(--color-red-500);
	content: var(--icon-chevron-forward);
	font-size: 1.6rem;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	right: -0.3em; /* stylelint-disable-line unit-allowed-list */
}

.link-external-wide a::after,
.link-external-wide span::after {
	content: var(--icon-open-in-new-window);
	right: 0;
}

/* rtl:raw:
.link-external-wide a::after,
.link-external-wide span::after {
	transform: scaleX(-1);
}
*/

.link-external-wide:hover a,
.link-external-wide:hover a::after,
.link-external-wide:hover span,
.link-internal-wide:hover a,
.link-internal-wide:hover a::after,
.link-internal-wide:hover span {
	color: var(--color-red-400);
}

.link.link-arrow-down::after {
	margin-left: 0.8rem;
	top: 0;
	font-size: 1.4rem;
	content: var(--icon-chevron-down);
}

.link-text .link-text--wrapper {
	height: 0;
	overflow: hidden;
	transition: height 600ms;
}

.link-text--link {
	background-color: var(--color-white-500);
	color: var(--color-black-400);
	display: block;
	height: auto;
	font-size: var(--font-size-text-large);
	font-weight: 800;
	line-height: calc(1.5 * var(--base-line-height));
	padding: calc(0.5 * var(--base-line-height)) calc(4 * var(--base-line-height)) calc(0.5 * var(--base-line-height)) calc(1 * var(--base-line-height));
	position: relative;
	transition: color 200ms;
}

.link-text.is-open .link-text--wrapper {
	display: block;
	height: auto;
	overflow: visible;
}

.link-text--icon-mobile,
.link-text--icon {
	cursor: pointer;
	display: block;
	color: var(--color-red-500);
	font-family: "dhlicons";
	font-size: 1.5rem;
	height: 100%;
	position: absolute;
	right: 0;
	width: calc(4 * var(--base-line-height));
	top: 0;
	text-align: right;
	padding-right: calc(1 * var(--base-line-height));
}

.link-text--icon {
	display: none;
}

.link-text.is-open .link-text--icon::after {
	content: var(--icon-minus);
}

.link-text p {
	padding-top: calc(1 * var(--base-line-height));
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.link-text.is-open .link-text--link:hover,
.link-text--link:hover .link-text--icon,
.link-text--link:hover .link-text--icon-mobile {
	color: var(--color-red-400);
}

.link-text--link-mobile::after {
	color: var(--color-red-500);
	margin-left: 0.4rem;
	top: 0;
}

.link-text--icon-mobile {
	display: block;
	margin-left: 0.8rem;
	position: absolute;
	padding-top: calc(0.5 * var(--base-line-height));
	right: 0;
	content: var(--icon-plus);
}

.link-anchor {
	display: block;
	position: relative;
	top: calc(-6 * var(--base-line-height));
	visibility: hidden;
}

/* use this for <span> tags that only contain an icon and should be treated as a link */
.link-icon {
	display: flex;
	justify-content: center;
	align-items: center;

	/* for UX reasons the touchable area should always be at least 40x40 pixels */
	width: calc(3 * var(--base-line-height));
	height: calc(3 * var(--base-line-height));
	cursor: pointer;
}

.link:hover,
.link:active,
.link-light-grey:hover,
.link-light-grey:active,
.link-white:hover,
.link-white:hover::after,
.link-white:active,
.link-white:active::after,
.link-red:hover,
.link-red:active,
.link-red:hover::after,
.link-red:active::after {
	color: var(--color-red-400);
}

@media screen and (max-width: 767px),print {
	.link:focus {
		color: var(--color-red-400);
	}
}

/**
 * breakpoint "s-l"
 * @size 666 - 767
 */
@media screen and (min-width: 666px) and (max-width: 767px) {
	.link-text {
		display: block;
	}

	.link-text .link-text--wrapper {
		display: flex;
		height: 100%;
		overflow: visible;
	}

	.link-text p {
		margin-bottom: calc(3 * var(--base-line-height));
	}

	.link-text--link {
		background-color: inherit;
		border-bottom: 0.1rem solid var(--color-gray-300);
		display: block;
		padding: calc(0.5 * var(--base-line-height)) 0;
	}

	.link-text--icon {
		display: inline;
		margin-left: 0;
		position: relative;

		/* width: auto; */
	}

	.link-text--icon-mobile {
		display: none;
	}

	.link-text--link-mobile {
		display: none;
	}
}

/* .link:focus,
.link-light-grey:focus,
.link-white:focus {
	outline: 0.1rem solid var(--color-red-500);
} */

/**
 * breakpoint "m"
 * @size >767
 */
@media screen and (min-width: 768px),print {
	.link-internal span:not(.sr-only) {
		align-self: center;
		position: static;
		width: 100%;
	}

	.link-external-wide,
	.link-internal-wide {
		padding: calc(1 * var(--base-line-height)) calc(0.5 * var(--base-line-height)) calc(1 * var(--base-line-height)) 0;
		line-height: 1.07;
		display: flex;
		transition: background-color 200ms;
		position: relative;
		top: 0;
	}

	.link-external-wide:first-child,
	.link-internal-wide:first-child {
		top: 0;
		border-top: 0.1rem solid var(--color-gray-300);
	}

	.link-external-wide:not(:first-child),
	.link-internal-wide:not(:first-child) {
		border-top: 0.1rem solid transparent;
	}

	html:not(.is-touch) .link-external-wide:focus-within,
	html:not(.is-touch) .link-internal-wide:focus-within {
		border-color: var(--color-black-400);
		opacity: 1;
	}

	.link-text {
		display: block;
		padding: 0 calc(2 * var(--base-line-height));
	}

	.link-text .link-text--wrapper {
		display: flex;
		height: auto;
		overflow: visible;
	}

	.link-text p {
		margin-bottom: calc(3 * var(--base-line-height));
	}

	.link-text.is-open .link-text--link {
		color: var(--color-red-500);
	}

	.link-text--link {
		background-color: inherit;
		border-bottom: 0.1rem solid var(--color-gray-300);
		position: relative;
		display: table;
		padding: calc(0.5 * var(--base-line-height)) 0;
	}

	.link-text--icon {
		display: inline;
		margin-left: 0;
		position: relative;
		vertical-align: middle;

		/* width: auto; */
	}

	.link-text--icon-mobile {
		display: none;
	}

	.link-text--link-mobile {
		display: none;
	}

	.has-secondary-navigation .link-anchor {
		top: calc(-10 * var(--base-line-height));
	}
}

/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/button.css ***!
  \**********************************************************************************************************************************************************************************************/
/**
 * @example
 * 	<button class="base-button"><span>See all our products & solutions</span></button>
 *	<button class="base-button base-button--white"><span>See all our products & solutions</span></button>
 *	<button class="base-button is-disabled" disabled="true"><span>See all our products & solutions</span></button>
 *
 *	--> Works also with an anchor
 *
 * 	<button class="base-button base-button--white base-button--country-select has-icon">Select your Country</button>
 *	<button class="circle-button icon-push-android"></button>
 *	<button class="circle-button icon-print"></button>
 *	<a class="circle-button-big icon-print"></a>
 */

/**
 * basic button, solid red
 */

.base-button {
	position: relative;
	border: 0.1rem solid var(--color-red-500);
	background-color: var(--color-red-500);
	border-radius: 0.4rem;
	color: var(--color-white-500);
	cursor: pointer;
	font-weight: bold;
	font-size: var(--font-size-standard);
	margin: 0;
	margin-bottom: calc(1 * var(--base-line-height));
	padding: calc(0.5 * var(--base-line-height)) calc(1.1 * var(--base-line-height));

	/* center vertically to align the link text with the button text */
	display: inline-flex;
	align-items: center;
	vertical-align: middle;

	/* normalize */
	text-decoration: none;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;

	/* set a min height */
	min-height: calc(3 * var(--base-line-height));
	overflow: hidden;

	/* the buttons is a long as the text atm, so no need for this */
	justify-content: center;

	/* center text */
	text-align: center;
}

.base-button span {

	/* center vertically to align the link text with the button text */
	display: inline-flex; /* this is not necessary in a perfect world ... */

	/* substract the border to get closer to the horizontal grid */
	line-height: calc(1.5 * var(--base-line-height));

	/* normalize */
	margin: 0;
	text-decoration: none;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	letter-spacing: 0.05rem;
	white-space: normal;
	color: var(--color-white-500);
}

/**
 * basic button, solid green
 */

.base-button.green {
	border: 0.1rem solid var(--color-green-600);
	background-color: var(--color-green-600);
}

/**
 * basic button, solid white
 */

.base-button.white {
	background-color: var(--color-white-500);
	border: 0.1rem solid var(--color-white-500);
}

.base-button.white span {
	color: var(--color-red-500);
}

/* add .text-wrap in order to enable multiline support; adding this separate
   class is the only way of not breaking older components since singleline has
   been the .base-button's default behavior since always */
.base-button.text-wrap span {
	white-space: normal;
}

.base-button,
.base-button--small {
	min-width: calc(8.5 * var(--base-line-height));
}

.base-button--tiny {
	min-width: calc(4.5 * var(--base-line-height));
	padding: 0 var(--font-size-icon-plus) 0.1rem;
	min-height: calc(2 * var(--base-line-height));
}

.base-button--wide {
	min-width: 20% !important; /* stylelint-disable-line declaration-no-important */
}

.base-button::before {
	position: absolute;
	left: var(--base-line-height);
}

.base-button::after {
	position: absolute;
	right: var(--base-line-height);
}

.base-button.link-external::after,
.base-button.link-internal::after {
	color: currentColor;
	right: 0;
	top: 0.1rem;
}

/**
 * basic button, solid white with red border
 */

.base-button--white {
	color: var(--color-red-500);
	border: 0.1rem solid var(--color-red-500);
	background-color: var(--color-white-500);
	transition: border 200ms;
}

.base-button--white span {
	color: var(--color-red-500);
}

/**
 * basic button, solid white with green border
 */

.base-button--white.green {
	color: var(--color-green-600);
	border: 0.1rem solid var(--color-green-600);
	background-color: var(--color-white-500);
}

.base-button--white.green span {
	color: var(--color-green-600);
}

/**
 * basic button, transparent background with red border
 */

.base-button--white.white {
	background-color: transparent;
}

/**
 * basic button with arrow
 */

.base-button--arrow {
	overflow: hidden;
	padding: 0;
	margin: 0;
	height: calc(var(--base-line-height) * 3);
	max-height: calc(var(--base-line-height) * 3);
	min-height: calc(var(--base-line-height) * 3);
	width: calc(var(--base-line-height) * 6);
	max-width: calc(var(--base-line-height) * 6);
	min-width: calc(var(--base-line-height) * 6);
	position: relative;
}

.base-button--arrow::before {
	content: var(--icon-chevron-forward);
	height: 100%;
	position: absolute;
	top: 60%;
	left: 50%;
	line-height: 2.4;
	transform: translateX(-50%) translateY(-50%);
	font-family: "dhlicons";

	/* speak: none; */
	font-style: normal;
	font-weight: normal;
	font-variant: normal;

	/* better font rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.base-button.base-button--smallarrow {
	width: calc(3.5 * var(--base-line-height));
	margin-right: calc(0.5 * var(--base-line-height));
	padding: 0;
	min-width: auto;
	margin-bottom: 0;
}

.base-button--smallarrow::before {
	font-size: var(--font-size-6);
	top: 1rem;
	left: 0.9rem;
}

/**
 * basic circle button
 */

.base-button:hover,
.base-button:active {
	border-color: var(--color-red-400);
	background-color: var(--color-red-400);
}

.base-button.green:hover,
.base-button.green:active {
	border-color: var(--color-green-500);
	background-color: var(--color-green-500);
}

.base-button.white:hover,
.base-button.white:active {
	border-color: var(--color-white-500);
	background-color: var(--color-white-500);
}

.base-button.white span:hover,
.base-button.white span:active {
	color: var(--color-red-400);
}

input[type="search"] ~ .base-button:focus {
	box-shadow: none;
}

input[type="search"] ~ .base-button:focus::before {
	content: "";
	display: block;
	border: 0.3rem solid var(--color-white-500);
	width: auto;
	position: absolute;
	left: 0.1rem;
	right: 0.1rem;
	top: 0.1rem;
	bottom: 0.1rem;
	border-top-right-radius: 0.4rem;
	border-bottom-right-radius: 0.4rem;
}

input[type="search"] ~ .base-button:focus::after {
	content: "";
	display: block;
	border: 0.2rem solid var(--color-red-500);
	width: auto;
	position: absolute;
	left: 0.3rem;
	right: 0.3rem;
	top: 0.3rem;
	bottom: 0.3rem;
	border-top-right-radius: 0.4rem;
	border-bottom-right-radius: 0.4rem;
	transition: border-color 200ms;
}

input[type="search"] ~ .base-button:focus:hover::after {
	border-color: var(--color-red-400);
}

.base-button:not(.is-disabled):focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.94), 0 0 0 0.4rem var(--color-red-500);
}

.base-button.green:not(.is-disabled):focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.94), 0 0 0 0.4rem var(--color-green-600);
}

.base-button.white:not(.is-disabled):focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.94), 0 0 0 0.4rem var(--color-red-500);
}

.base-button--white:hover,
.base-button--white:active {
	border-color: var(--color-red-400);
	background-color: var(--color-white-500);
}

.base-button--white:hover span,
.base-button--white:active span {
	color: var(--color-red-400);
}

.base-button--white:focus {
	border-color: var(--color-red-500);
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.94), 0 0 0 0.4rem var(--color-red-500);
}

.base-button--white.green:focus {
	border-color: var(--color-green-600);
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.94), 0 0 0 0.4rem var(--color-green-600);
	background-color: var(--color-white-500);
}

.base-button--white.green:hover,
.base-button--white.green:active {
	border-color: var(--color-green-500);
	background-color: var(--color-white-500);
}

.base-button--white.green:hover span,
.base-button--white.green:active span {
	color: var(--color-green-500);
}

.base-button--white.white:focus {
	background-color: transparent;
}

.base-button--white.white:hover,
.base-button--white.white:active {
	background-color: transparent;
}

/**
 * disabled button
 */

.base-button.is-disabled,
.base-button.is-disabled:hover,
.base-button.is-disabled:focus {
	color: var(--color-white-500);
	transition: none;
	cursor: default;
	border-color: var(--color-gray-300);
	background-color: var(--color-gray-300);
}

.base-button--white.is-disabled,
.base-button--white.is-disabled:hover,
.base-button--white.is-disabled:focus {
	color: var(--color-gray-300);
	background-color: var(--color-white-500);
}

.base-button--white.is-disabled span {
	color: var(--color-gray-300);
}

.base-button.is-disabled span,
.base-button.is-disabled:hover span,
.base-button.is-disabled:focus span {
	color: var(--color-white-500);
}

/**
 * device depended definitions
 */

.is-touch .base-button:hover,
.is-touch .base-button:focus {
	border-color: var(--color-red-400);
	background-color: var(--color-red-400);
	box-shadow: none;
}

.is-touch .base-button:hover span,
.is-touch .base-button:focus span {
	color: var(--color-white-500);
}

.is-touch .base-button.is-disabled,
.is-touch .base-button.is-disabled:hover,
.is-touch .base-button.is-disabled:focus {
	color: var(--color-white-500);
	transition: none;
	cursor: auto;
	border-color: var(--color-gray-300);
	background-color: var(--color-gray-300);
}

.is-touch .base-button.base-button--white:active {
	border: 0.1rem solid var(--color-red-500);
}

.is-touch .base-button--white:hover,
.is-touch .base-button--white:focus {
	border-color: var(--color-red-400);
	background-color: var(--color-white-500);
}

.is-touch .base-button--white:hover span,
.is-touch .base-button--white:focus span {
	color: var(--color-red-400);
}

.is-touch .base-button.is-disabled span,
.is-touch .base-button.is-disabled:hover span,
.is-touch .base-button.is-disabled:focus span {
	color: var(--color-white-500);
}

/* use inline-block for button elements to horizontal center text */
button.base-button {
	display: inline-block;
}

/* remove letter spacing due to the frutiger renders messy inside a button */
button.base-button span {
	letter-spacing: -0.03rem;
}

button.base-button--arrow {
	display: inline-flex;
}

/* this button dummy is used as those clickable containers */
button.button-dummy {
	border: none;
	color: unset;
	background: none;
	outline: none;
	box-sizing: border-box;
}

/**
 * @cssfor ie <= 11
 * @descripton: ie does not recognize flexbox align-items: center when a min-height is used
 * so we need to fall back to padding and line height
 * bulletproof but unfortunately this breaks the horizontal grid on multiline buttons.
 * if the flex-box version causes probles, use this for all useragents - multiline will be rare
 * @bug
 * @type {[type]}
 */
:fullscreen,
:root .base-button span.at-icon-wrapper {
	padding: 0;
}

@media screen and (max-width: 767px),print {
	.base-button {

		/* the buttons spans the whole area */
		width: 100%;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.base-button span {
		white-space: nowrap;
	}
}

@media screen and (min-width: 768px),print {
	.base-button {
		transition: background-color 200ms, border 200ms;
	}

	.base-button span {
		white-space: nowrap;
	}
}

/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/percy.css ***!
  \*********************************************************************************************************************************************************************************************/
/**
 * @file base/percy.css
 *
 * @description
 *
 * Overall file which contains all percy based css changes
 *
 */

/* global percy styles */

@media only percy {

	/* Preventing sticky behaviour of old/new navigation and new footer for tests in percy */
	/* stylelint-disable selector-max-id, selector-class-pattern */
	.c-navigation,
	#navigation-primary,
	.c-voc-footer--action-bar,
	.secondaryNavIparsys .c-nav-secondary {
		position: static;
	}
	/* stylelint-enable selector-max-id, selector-class-pattern */
}

/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/accessibility/sr-only.css ***!
  \********************************************************************************************************************************************************************************************************/
/**
 * @file accessibility/sr-only.css
 *
 * @description
 *
 * Styles for the screen reader only class
 *
 */

.sr-only {
	position: absolute !important; /* stylelint-disable-line declaration-no-important */
	width: 0.1rem !important; /* stylelint-disable-line declaration-no-important */
	height: 0.1rem !important; /* stylelint-disable-line declaration-no-important */
	padding: 0;
	margin: -0.1rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/components/slider.css ***!
  \****************************************************************************************************************************************************************************************************/
/**
 * @file components/slider.css
 *
 * @description
 * define arrows and idizes for slider
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-slider--index {
	height: calc(1 * var(--base-line-height));
	left: 0;
	margin: calc(-2 * var(--base-line-height)) 0 0 0;
	position: absolute;
	right: 0;
	z-index: 100;
}

.c-slider--index li {
	background-color: var(--color-gray-400);
	border-radius: 1.2rem;
	cursor: pointer;
	display: block;
	float: left;
	height: 1.2rem;
	list-style: none;
	margin: 0.5rem 0.35rem;
	transition: transform 200ms;
	width: 1.2rem;
}

.c-slider--index li:not(.is-active):hover,
.c-slider--index li:not(.is-active):focus {
	transform: scale(1.4);
}

.c-slider--index .is-active {
	background-color: var(--color-red-500);
	cursor: initial;
	transform: scale(1.4);
}

.c-slider--control {
	cursor: pointer;
	display: none;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 100;
}

.c-slider--control span {
	color: var(--color-red-500);
	font-size: calc(4.5 * var(--base-line-height));
	width: calc(3 * var(--base-line-height));
}

.c-slider--control.is-left {
	background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	left: 0;
	transition: left 200ms;
}

.c-slider--control.is-left span::before {
	left: calc(-1 * var(--base-line-height));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.c-slider--control.is-right {
	background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	right: 0;
	transition: right 200ms;
}

.c-slider--control.is-right span::before {
	position: absolute;
	right: calc(-1 * var(--base-line-height));
	top: 50%;
	transform: translateY(-50%);
}

/* rtl:raw:
.c-slider--control.is-right span::before,
.c-slider--control.is-left span::before  {
    transform: rotateY(180deg);
    display:inline-block;
}
*/

@media screen and (min-width: 768px),print {
	.c-slider--navigation {
		min-height: 2.5rem;
		position: relative;
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	.c-slider--control span {
		font-size: calc(5 * var(--base-line-height));
		width: calc(4 * var(--base-line-height));
	}
}

/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/flags.css ***!
  \*********************************************************************************************************************************************************************************************/
.flag-icon::before {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.flag-icon-ad::before {
	background-image: url(../assets/img/2a0e764dc91a108c9154.svg);
}

.flag-icon-ae::before {
	background-image: url(../assets/img/73bdac21f1584c50e516.svg);
}

.flag-icon-af::before {
	background-image: url(../assets/img/bac52c42896e9fa7fa36.svg);
}

.flag-icon-ag::before {
	background-image: url(../assets/img/4480efca46b3e35df792.svg);
}

.flag-icon-ai::before {
	background-image: url(../assets/img/ed7f74ba1ca62cfbdce0.svg);
}

.flag-icon-al::before {
	background-image: url(../assets/img/fcba361a2610c5241ddd.svg);
}

.flag-icon-am::before {
	background-image: url(../assets/img/e02c1ad4e6767358dd24.svg);
}

.flag-icon-ao::before {
	background-image: url(../assets/img/b8dfe2f72356b9011572.svg);
}

.flag-icon-aq::before {
	background-image: url(../assets/img/13fd2b3f2a66d6621d99.svg);
}

.flag-icon-ar::before {
	background-image: url(../assets/img/cee0c4a6b999731fb66e.svg);
}

.flag-icon-as::before {
	background-image: url(../assets/img/5af90654439ee3777415.svg);
}

.flag-icon-at::before {
	background-image: url(../assets/img/bec38c50dc8045c799e6.svg);
}

.flag-icon-au::before {
	background-image: url(../assets/img/8a40cca51224658cd530.svg);
}

.flag-icon-aw::before {
	background-image: url(../assets/img/8d74f85304ab465b3653.svg);
}

.flag-icon-ax::before {
	background-image: url(../assets/img/dbc7b19fe1e8e27c0523.svg);
}

.flag-icon-az::before {
	background-image: url(../assets/img/74c2c55accd4390b25d2.svg);
}

.flag-icon-ba::before {
	background-image: url(../assets/img/3ee522b04862dcd9fad6.svg);
}

.flag-icon-bb::before {
	background-image: url(../assets/img/e095c9412cba702ab591.svg);
}

.flag-icon-bd::before {
	background-image: url(../assets/img/4b63fb311d14a615c4c7.svg);
}

.flag-icon-be::before {
	background-image: url(../assets/img/1074c5d70974cfc7a28f.svg);
}

.flag-icon-bf::before {
	background-image: url(../assets/img/677ebd7762f16c963284.svg);
}

.flag-icon-bg::before {
	background-image: url(../assets/img/277ad21da3b85769aa2a.svg);
}

.flag-icon-bh::before {
	background-image: url(../assets/img/f5cf1e30d4aa6f678fbd.svg);
}

.flag-icon-bi::before {
	background-image: url(../assets/img/b393deba7234fc47ecc0.svg);
}

.flag-icon-bj::before {
	background-image: url(../assets/img/8a15f650873dd0a62e7f.svg);
}

.flag-icon-bl::before {
	background-image: url(../assets/img/9f4e3392d23caf9238e5.svg);
}

.flag-icon-bm::before {
	background-image: url(../assets/img/9ab4efdb380047ab14d3.svg);
}

.flag-icon-bn::before {
	background-image: url(../assets/img/a877f559946a7ded4fb0.svg);
}

.flag-icon-bo::before {
	background-image: url(../assets/img/9140ec40d0f925933be6.svg);
}

.flag-icon-bq::before {
	background-image: url(../assets/img/8df76584a27d8ac5112c.svg);
}

.flag-icon-br::before {
	background-image: url(../assets/img/543ea16a8e4808afb90d.svg);
}

.flag-icon-bs::before {
	background-image: url(../assets/img/c67d339db9928969d6b5.svg);
}

.flag-icon-bt::before {
	background-image: url(../assets/img/3dcaeb1eeb7cf92597b4.svg);
}

.flag-icon-bv::before {
	background-image: url(../assets/img/739827b38a18aa22c8eb.svg);
}

.flag-icon-bw::before {
	background-image: url(../assets/img/39e41537f8de692c4313.svg);
}

.flag-icon-by::before {
	background-image: url(../assets/img/1005658a4d77a08cbeeb.svg);
}

.flag-icon-bz::before {
	background-image: url(../assets/img/c7e43b804478cdee9e63.svg);
}

.flag-icon-ca::before {
	background-image: url(../assets/img/1d1bdecf6ff2fc3533c9.svg);
}

.flag-icon-cc::before {
	background-image: url(../assets/img/a7498ff7c7442734fc1b.svg);
}

.flag-icon-cd::before {
	background-image: url(../assets/img/ccd20353a924d16cf0ef.svg);
}

.flag-icon-cf::before {
	background-image: url(../assets/img/9bf34879f203795ef626.svg);
}

.flag-icon-cg::before {
	background-image: url(../assets/img/cc40fcab3354aec8c374.svg);
}

.flag-icon-ch::before {
	background-image: url(../assets/img/ae49e2ddb7afbd578e56.svg);
}

.flag-icon-ci::before {
	background-image: url(../assets/img/217dbc568793e0a673a8.svg);
}

.flag-icon-ck::before {
	background-image: url(../assets/img/68ffc383a3dedbdd7ba6.svg);
}

.flag-icon-cl::before {
	background-image: url(../assets/img/403d4db86219564ecad8.svg);
}

.flag-icon-cm::before {
	background-image: url(../assets/img/eda5d2befdc27733c8f7.svg);
}

.flag-icon-cn::before {
	background-image: url(../assets/img/afc97e8ef48e553529b3.svg);
}

.flag-icon-co::before {
	background-image: url(../assets/img/0035aba963e688086ef0.svg);
}

.flag-icon-cr::before {
	background-image: url(../assets/img/17b4c60cbafa67198d6a.svg);
}

.flag-icon-cu::before {
	background-image: url(../assets/img/7d53ca7ed46743dbd733.svg);
}

.flag-icon-cv::before {
	background-image: url(../assets/img/2cc4cc1299706dc16669.svg);
}

.flag-icon-cw::before {
	background-image: url(../assets/img/3fe49dc00d32e439569d.svg);
}

.flag-icon-cx::before {
	background-image: url(../assets/img/2b63b6b6ec7ed7eb56e5.svg);
}

.flag-icon-cy::before {
	background-image: url(../assets/img/d72cad5a3e32d4304625.svg);
}

.flag-icon-cz::before {
	background-image: url(../assets/img/94211d7fc92d433d7286.svg);
}

.flag-icon-de::before {
	background-image: url(../assets/img/3c7c2b6e69fb70cb2510.svg);
}

.flag-icon-dj::before {
	background-image: url(../assets/img/8104446fdef403482a6d.svg);
}

.flag-icon-dk::before {
	background-image: url(../assets/img/f9071d770daf2a1cbee2.svg);
}

.flag-icon-dm::before {
	background-image: url(../assets/img/8d7db65adddc264a38b2.svg);
}

.flag-icon-do::before {
	background-image: url(../assets/img/4778e7b2d19ba03fd53c.svg);
}

.flag-icon-dz::before {
	background-image: url(../assets/img/f3d8830efc64624f9d54.svg);
}

.flag-icon-ec::before {
	background-image: url(../assets/img/44f1df38e005d875e22b.svg);
}

.flag-icon-ee::before {
	background-image: url(../assets/img/3de621a24ad5bb5df188.svg);
}

.flag-icon-eg::before {
	background-image: url(../assets/img/71a9c1baf76b6d9954c6.svg);
}

.flag-icon-eh::before {
	background-image: url(../assets/img/d1d6ce33690348b0655c.svg);
}

.flag-icon-er::before {
	background-image: url(../assets/img/21e7a0ec0bfdce08b6a4.svg);
}

.flag-icon-es::before {
	background-image: url(../assets/img/06c7ef6aa3c09687c525.svg);
}

.flag-icon-et::before {
	background-image: url(../assets/img/025b930840d456189083.svg);
}

.flag-icon-fi::before {
	background-image: url(../assets/img/5357c18c644510d9daa9.svg);
}

.flag-icon-fj::before {
	background-image: url(../assets/img/43d2e05449e1f81a3fc3.svg);
}

.flag-icon-fk::before {
	background-image: url(../assets/img/69f263eca5e9942d9431.svg);
}

.flag-icon-fm::before {
	background-image: url(../assets/img/d3868dac18fa2bd33003.svg);
}

.flag-icon-fo::before {
	background-image: url(../assets/img/93997e07ec3eb48669c8.svg);
}

.flag-icon-fr::before {
	background-image: url(../assets/img/ca4662ca52657c2175df.svg);
}

.flag-icon-g0::before {
	background-image: url(../assets/img/98e4d1767dd1a2a9c85e.svg);
}

.flag-icon-ga::before {
	background-image: url(../assets/img/4209dec7be9ea48e3b29.svg);
}

.flag-icon-gb::before {
	background-image: url(../assets/img/8d77f741d1084f519524.svg);
}

.flag-icon-gd::before {
	background-image: url(../assets/img/03db0522ad2ffe36867c.svg);
}

.flag-icon-ge::before {
	background-image: url(../assets/img/b72cc1c07c462f4b7757.svg);
}

.flag-icon-gf::before {
	background-image: url(../assets/img/fef63f4565a60c2bd150.svg);
}

.flag-icon-gg::before {
	background-image: url(../assets/img/4434dabbc0c8d5dc7c09.svg);
}

.flag-icon-gh::before {
	background-image: url(../assets/img/ff8f4373adb00254093a.svg);
}

.flag-icon-gi::before {
	background-image: url(../assets/img/6c8d57c752a74b8e5b03.svg);
}

.flag-icon-gl::before {
	background-image: url(../assets/img/17c11cd1e8724b411335.svg);
}

.flag-icon-gm::before {
	background-image: url(../assets/img/0428e592c7b8a1375a19.svg);
}

.flag-icon-gn::before {
	background-image: url(../assets/img/accb0921fea06fef684f.svg);
}

.flag-icon-gp::before {
	background-image: url(../assets/img/ca4662ca52657c2175df.svg);
}

.flag-icon-gq::before {
	background-image: url(../assets/img/a4c926de547f45f09c9c.svg);
}

.flag-icon-gr::before {
	background-image: url(../assets/img/e12b14ccb5033d8a4c24.svg);
}

.flag-icon-gs::before {
	background-image: url(../assets/img/4db5fa2e9642930aa74e.svg);
}

.flag-icon-gt::before {
	background-image: url(../assets/img/8d487d3e3e70b5a68699.svg);
}

.flag-icon-gu::before {
	background-image: url(../assets/img/e7a2472605a16b967d1b.svg);
}

.flag-icon-gw::before {
	background-image: url(../assets/img/b7dd021bf339f3cd4deb.svg);
}

.flag-icon-gy::before {
	background-image: url(../assets/img/4e9a7d8e4e91c635059a.svg);
}

.flag-icon-hk::before {
	background-image: url(../assets/img/7149dc7e1bb31d951970.svg);
}

.flag-icon-hm::before {
	background-image: url(../assets/img/070c1d8c8d93fe5bdf81.svg);
}

.flag-icon-hn::before {
	background-image: url(../assets/img/a12878db3ec32ce770ad.svg);
}

.flag-icon-hr::before {
	background-image: url(../assets/img/69f1cf316e735a7f5be3.svg);
}

.flag-icon-ht::before {
	background-image: url(../assets/img/39f3cb74fc0981a9e3bc.svg);
}

.flag-icon-hu::before {
	background-image: url(../assets/img/456f333045e8c2a0ccc9.svg);
}

.flag-icon-id::before {
	background-image: url(../assets/img/8371cd3ad1aefbfdf4ae.svg);
}

.flag-icon-ie::before {
	background-image: url(../assets/img/870155ef6d235e5c6f23.svg);
}

.flag-icon-il::before {
	background-image: url(../assets/img/96856486a017f3243e2f.svg);
}

.flag-icon-im::before {
	background-image: url(../assets/img/6ec5bfa42f62dd892c71.svg);
}

.flag-icon-in::before {
	background-image: url(../assets/img/6b019bb08174a797acd9.svg);
}

.flag-icon-io::before {
	background-image: url(../assets/img/0c81e2d09bc085c77b72.svg);
}

.flag-icon-iq::before {
	background-image: url(../assets/img/a433a457e12c56d9d2f7.svg);
}

.flag-icon-ir::before {
	background-image: url(../assets/img/5b6e8508f4cceb7336dc.svg);
}

.flag-icon-is::before {
	background-image: url(../assets/img/03cd764166ff6796db63.svg);
}

.flag-icon-it::before {
	background-image: url(../assets/img/f21650473de6cfa1b17d.svg);
}

.flag-icon-je::before {
	background-image: url(../assets/img/779e4b6da64fe0754fe1.svg);
}

.flag-icon-jm::before {
	background-image: url(../assets/img/a2980739febe20d3d8f0.svg);
}

.flag-icon-jo::before {
	background-image: url(../assets/img/c557c156c4b206a3ba47.svg);
}

.flag-icon-jp::before {
	background-image: url(../assets/img/be00a97e3ee0386ca2a0.svg);
}

.flag-icon-ke::before {
	background-image: url(../assets/img/5396e45cf3c13d0479cf.svg);
}

.flag-icon-kg::before {
	background-image: url(../assets/img/7cbc5db64ffcd4e7ac41.svg);
}

.flag-icon-kh::before {
	background-image: url(../assets/img/a8bcc2ee91a3856c1621.svg);
}

.flag-icon-ki::before {
	background-image: url(../assets/img/155679c4322176c3eefc.svg);
}

.flag-icon-km::before {
	background-image: url(../assets/img/3f933f51bc00b8e86ebc.svg);
}

.flag-icon-kn::before {
	background-image: url(../assets/img/5099753d73361f71b6df.svg);
}

.flag-icon-kp::before {
	background-image: url(../assets/img/3519ac650a1c2a7c355f.svg);
}

.flag-icon-kr::before {
	background-image: url(../assets/img/e0b790bd616e2340a4d4.svg);
}

.flag-icon-kw::before {
	background-image: url(../assets/img/7eba06dd6b13d3eded99.svg);
}

.flag-icon-ky::before {
	background-image: url(../assets/img/786950d00ea6309c35ca.svg);
}

.flag-icon-kz::before {
	background-image: url(../assets/img/aaa734e0716074fc1c17.svg);
}

.flag-icon-la::before {
	background-image: url(../assets/img/832ce2ab0f72fede8de6.svg);
}

.flag-icon-lb::before {
	background-image: url(../assets/img/37834cf17cb4b089d2ac.svg);
}

.flag-icon-lc::before {
	background-image: url(../assets/img/06aa6e6bd1d63f5213a8.svg);
}

.flag-icon-li::before {
	background-image: url(../assets/img/5837237dc2a47ac1c3a0.svg);
}

.flag-icon-lk::before {
	background-image: url(../assets/img/3455ecde1e20b2f413a1.svg);
}

.flag-icon-lr::before {
	background-image: url(../assets/img/224138ba03fc30838b41.svg);
}

.flag-icon-ls::before {
	background-image: url(../assets/img/a187145c43be8e0d71b5.svg);
}

.flag-icon-lt::before {
	background-image: url(../assets/img/3f22bdd28ba3f3c44077.svg);
}

.flag-icon-lu::before {
	background-image: url(../assets/img/8ee7cf7bc5132732e746.svg);
}

.flag-icon-lv::before {
	background-image: url(../assets/img/4aa6a681d39c90c011a0.svg);
}

.flag-icon-ly::before {
	background-image: url(../assets/img/0e2e93f62486a4700a0b.svg);
}

.flag-icon-ma::before {
	background-image: url(../assets/img/37205fce1bb2b8eaca00.svg);
}

.flag-icon-mc::before {
	background-image: url(../assets/img/ac88e5c2707d8b8c1c0d.svg);
}

.flag-icon-md::before {
	background-image: url(../assets/img/f74bb8f8f4e724897a15.svg);
}

.flag-icon-me::before {
	background-image: url(../assets/img/3dbdd2535fcf962b7c0f.svg);
}

.flag-icon-mf::before {
	background-image: url(../assets/img/ca4662ca52657c2175df.svg);
}

.flag-icon-mg::before {
	background-image: url(../assets/img/1f8441702ab6280625c1.svg);
}

.flag-icon-mh::before {
	background-image: url(../assets/img/d83325c01749bf87a3f8.svg);
}

.flag-icon-mk::before {
	background-image: url(../assets/img/2e2e2a388c2a84871399.svg);
}

.flag-icon-ml::before {
	background-image: url(../assets/img/e94662b00132458851c3.svg);
}

.flag-icon-mm::before {
	background-image: url(../assets/img/f7ad31f447295f9940b5.svg);
}

.flag-icon-mn::before {
	background-image: url(../assets/img/5f5421256851890b0f3b.svg);
}

.flag-icon-mo::before {
	background-image: url(../assets/img/14db3b4c7f42f5fabb39.svg);
}

.flag-icon-mp::before {
	background-image: url(../assets/img/9272a90fdd20ced842f0.svg);
}

.flag-icon-mq::before {
	background-image: url(../assets/img/248e96169b8dcba1b8c5.svg);
}

.flag-icon-mr::before {
	background-image: url(../assets/img/5cee7bb03ba131589b85.svg);
}

.flag-icon-ms::before {
	background-image: url(../assets/img/11dc8592ba324dc7de57.svg);
}

.flag-icon-mt::before {
	background-image: url(../assets/img/9a112635f0f3bf52f825.svg);
}

.flag-icon-mu::before {
	background-image: url(../assets/img/430d08d4dd05933745a3.svg);
}

.flag-icon-mv::before {
	background-image: url(../assets/img/bd65db78c4cdd077b5fb.svg);
}

.flag-icon-mw::before {
	background-image: url(../assets/img/c05a9d5b64447db79104.svg);
}

.flag-icon-mx::before {
	background-image: url(../assets/img/a1561f3d988f6f9f4d3b.svg);
}

.flag-icon-my::before {
	background-image: url(../assets/img/36bc9e8541ee8e5a0b8c.svg);
}

.flag-icon-mz::before {
	background-image: url(../assets/img/020b2b2192ec952bad98.svg);
}

.flag-icon-na::before {
	background-image: url(../assets/img/52fd1fab955f2eddcb4a.svg);
}

.flag-icon-nc::before {
	background-image: url(../assets/img/039372ccd9df2f7ccf3a.svg);
}

.flag-icon-ne::before {
	background-image: url(../assets/img/c97fe29d2bfdbff15c83.svg);
}

.flag-icon-nf::before {
	background-image: url(../assets/img/5adb4416a4b80d17965e.svg);
}

.flag-icon-ng::before {
	background-image: url(../assets/img/76a4297b9e721b1c69b1.svg);
}

.flag-icon-ni::before {
	background-image: url(../assets/img/ca554680c90ed98f3d42.svg);
}

.flag-icon-nl::before {
	background-image: url(../assets/img/026eb4b5b9ae92626c8f.svg);
}

.flag-icon-no::before {
	background-image: url(../assets/img/446cece317316c578f92.svg);
}

.flag-icon-np::before {
	background-image: url(../assets/img/a45fa6aecdc191e49a5b.svg);
}

.flag-icon-nr::before {
	background-image: url(../assets/img/dbd334a3f44e666c6b7a.svg);
}

.flag-icon-nu::before {
	background-image: url(../assets/img/2233fb194f469f44042f.svg);
}

.flag-icon-nz::before {
	background-image: url(../assets/img/2f4132d63af644f0ce5b.svg);
}

.flag-icon-om::before {
	background-image: url(../assets/img/b2c66a10e382a94e12cb.svg);
}

.flag-icon-pa::before {
	background-image: url(../assets/img/0935aea4c0722bca0961.svg);
}

.flag-icon-pe::before {
	background-image: url(../assets/img/967e1d31e8aba326a09f.svg);
}

.flag-icon-pf::before {
	background-image: url(../assets/img/55d5276ae768355b856a.svg);
}

.flag-icon-pg::before {
	background-image: url(../assets/img/c1794ed9ff1f605fb193.svg);
}

.flag-icon-ph::before {
	background-image: url(../assets/img/eb8709973064eb20d6c9.svg);
}

.flag-icon-pk::before {
	background-image: url(../assets/img/b76f1aaae1472af5de16.svg);
}

.flag-icon-pl::before {
	background-image: url(../assets/img/a12c31e2c00d1645818a.svg);
}

.flag-icon-pm::before {
	background-image: url(../assets/img/039372ccd9df2f7ccf3a.svg);
}

.flag-icon-pn::before {
	background-image: url(../assets/img/583172cbfad046599393.svg);
}

.flag-icon-pr::before {
	background-image: url(../assets/img/3d27a843775d9773e49a.svg);
}

.flag-icon-ps::before {
	background-image: url(../assets/img/223bac275b3860a9cb15.svg);
}

.flag-icon-pt::before {
	background-image: url(../assets/img/d12c514dfb3ac2cb992e.svg);
}

.flag-icon-pw::before {
	background-image: url(../assets/img/959fa71b29b4af423201.svg);
}

.flag-icon-py::before {
	background-image: url(../assets/img/8694f5b3b8d0c9404e01.svg);
}

.flag-icon-qa::before {
	background-image: url(../assets/img/bee6b73a98f6285443ff.svg);
}

.flag-icon-re::before {
	background-image: url(../assets/img/039372ccd9df2f7ccf3a.svg);
}

.flag-icon-ro::before {
	background-image: url(../assets/img/365999e178c92adaaf33.svg);
}

.flag-icon-rs::before {
	background-image: url(../assets/img/8a50a9f63331b04b54c6.svg);
}

.flag-icon-ru::before {
	background-image: url(../assets/img/70f4b256815606068387.svg);
}

.flag-icon-rw::before {
	background-image: url(../assets/img/2ed53fd185f75ebdf03e.svg);
}

.flag-icon-sa::before {
	background-image: url(../assets/img/c549cb3c1e5d2d7a6eb9.svg);
}

.flag-icon-sb::before {
	background-image: url(../assets/img/13c2f1013063cc7b6ead.svg);
}

.flag-icon-sc::before {
	background-image: url(../assets/img/427cfbafe2f94ea3e6c5.svg);
}

.flag-icon-sd::before {
	background-image: url(../assets/img/f523b7ba1d7d4795b5d7.svg);
}

.flag-icon-se::before {
	background-image: url(../assets/img/3e08fd0c4fb4228630ee.svg);
}

.flag-icon-sg::before {
	background-image: url(../assets/img/7975fc8ed612215734e7.svg);
}

.flag-icon-sh::before {
	background-image: url(../assets/img/e696e802b9e39bb0d8ee.svg);
}

.flag-icon-si::before {
	background-image: url(../assets/img/6d7727e4042a0dd409c8.svg);
}

.flag-icon-sj::before {
	background-image: url(../assets/img/707fa1c60eb9a3277a7e.svg);
}

.flag-icon-sk::before {
	background-image: url(../assets/img/f130c54daa0cd8c2b7bf.svg);
}

.flag-icon-sl::before {
	background-image: url(../assets/img/f4e3a7a6060f3b596b1b.svg);
}

.flag-icon-sm::before {
	background-image: url(../assets/img/d122dbbff546eff10fc6.svg);
}

.flag-icon-sn::before {
	background-image: url(../assets/img/9b370f258cb95458a88c.svg);
}

.flag-icon-so::before {
	background-image: url(../assets/img/0144b8615ae576af7cf3.svg);
}

.flag-icon-sr::before {
	background-image: url(../assets/img/bcba11e12a7c0a2ee0b2.svg);
}

.flag-icon-ss::before {
	background-image: url(../assets/img/0585acbc3aed4270c8f4.svg);
}

.flag-icon-st::before {
	background-image: url(../assets/img/7931e0ccdcaae096dde9.svg);
}

.flag-icon-sv::before {
	background-image: url(../assets/img/65e3aa80d8d476f2db0c.svg);
}

.flag-icon-sx::before {
	background-image: url(../assets/img/f379ba8a4550d82db6f4.svg);
}

.flag-icon-sy::before {
	background-image: url(../assets/img/ceaea02fd8f7ed62a5fb.svg);
}

.flag-icon-sz::before {
	background-image: url(../assets/img/c1ac05d7805c8f3eb1fc.svg);
}

.flag-icon-tc::before {
	background-image: url(../assets/img/db7d1a51de4705211a87.svg);
}

.flag-icon-td::before {
	background-image: url(../assets/img/45bb4e7c92d4ffe93ef3.svg);
}

.flag-icon-tf::before {
	background-image: url(../assets/img/a06d5a1b6024e5185337.svg);
}

.flag-icon-tg::before {
	background-image: url(../assets/img/ce83ffba0260c955540c.svg);
}

.flag-icon-th::before {
	background-image: url(../assets/img/6b5258860577cff35c8a.svg);
}

.flag-icon-tj::before {
	background-image: url(../assets/img/53d395bdd2fe45965dfa.svg);
}

.flag-icon-tk::before {
	background-image: url(../assets/img/db2dafeaa92c9cd00922.svg);
}

.flag-icon-tl::before {
	background-image: url(../assets/img/ae32fa8d62b105856fe4.svg);
}

.flag-icon-tm::before {
	background-image: url(../assets/img/6fe2f6e9a12fefd7c4ad.svg);
}

.flag-icon-tn::before {
	background-image: url(../assets/img/06e7e45336f7c48aa3f9.svg);
}

.flag-icon-to::before {
	background-image: url(../assets/img/a1a379624a8b766cf361.svg);
}

.flag-icon-tr::before {
	background-image: url(../assets/img/b305cdaef3cf1719564c.svg);
}

.flag-icon-tt::before {
	background-image: url(../assets/img/d9cc73875b576a9001cd.svg);
}

.flag-icon-tv::before {
	background-image: url(../assets/img/7d6a8e75836dc7457023.svg);
}

.flag-icon-tw::before {
	background-image: url(../assets/img/9b409d4e9c5792f6ebfa.svg);
}

.flag-icon-tz::before {
	background-image: url(../assets/img/dc2edca4f67ebea04802.svg);
}

.flag-icon-ua::before {
	background-image: url(../assets/img/342c70bd120744525745.svg);
}

.flag-icon-ug::before {
	background-image: url(../assets/img/8064fc5b5e61add27ea3.svg);
}

.flag-icon-um::before {
	background-image: url(../assets/img/5b6a1d20aba34844a47c.svg);
}

.flag-icon-us::before {
	background-image: url(../assets/img/5b6a1d20aba34844a47c.svg);
}

.flag-icon-uy::before {
	background-image: url(../assets/img/a8dc99e25f3a066b0f25.svg);
}

.flag-icon-uz::before {
	background-image: url(../assets/img/28553caf3b4e3cc8f9d2.svg);
}

.flag-icon-va::before {
	background-image: url(../assets/img/d76f4da020ca4c6eac5c.svg);
}

.flag-icon-vc::before {
	background-image: url(../assets/img/c11b01b834d533ad1464.svg);
}

.flag-icon-ve::before {
	background-image: url(../assets/img/db907c49220c5fdf6b78.svg);
}

.flag-icon-vg::before {
	background-image: url(../assets/img/2343da4bcf252e94732e.svg);
}

.flag-icon-vi::before {
	background-image: url(../assets/img/b598e26cc4d76d7ed459.svg);
}

.flag-icon-vn::before {
	background-image: url(../assets/img/ad8eca6b936dd14d5bf6.svg);
}

.flag-icon-vu::before {
	background-image: url(../assets/img/5e538d68a859dcb9a774.svg);
}

.flag-icon-wf::before {
	background-image: url(../assets/img/8a0a57bad5cf2c47e6de.svg);
}

.flag-icon-ws::before {
	background-image: url(../assets/img/1da0583129d488c52b65.svg);
}

.flag-icon-ye::before {
	background-image: url(../assets/img/6f59f5d8d892b69d3a59.svg);
}

.flag-icon-yt::before {
	background-image: url(../assets/img/039372ccd9df2f7ccf3a.svg);
}

.flag-icon-za::before {
	background-image: url(../assets/img/265e445e89a09bc720e7.svg);
}

.flag-icon-zm::before {
	background-image: url(../assets/img/750e5e3852b27879e262.svg);
}

.flag-icon-zw::before {
	background-image: url(../assets/img/0e7b779aae9048403b77.svg);
}

.flag-icon-eu::before {
	background-image: url(../assets/img/3402529155f5c0cef3db.svg);
}

.flag-icon-gb-eng::before {
	background-image: url(../assets/img/2797f61a7ad225434d9c.svg);
}

.flag-icon-gb-sct::before {
	background-image: url(../assets/img/3db9d81d594e1986fb05.svg);
}

.flag-icon-gb-wls::before {
	background-image: url(../assets/img/6bd1e56d5cde2f11bf4d.svg);
}

.flag-icon-un::before {
	background-image: url(../assets/img/8c3f6859bb9ecc264211.svg);
}

/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/fonts.css ***!
  \*********************************************************************************************************************************************************************************************/
/* DEFAULT FONT */

/* normal (400) */
@font-face {
	font-family: "Delivery";
	src: url(../assets/fonts/default-274a65bae9742377aaf0.woff) format("woff");
	font-weight: normal;
	font-style: normal;
}

/* normal (400) - Arabic */
@font-face {
	font-family: "Delivery Arabic";
	src: url(../assets/fonts/arabic-f6dee7cd45890abf2cab.woff) format("woff");
	font-weight: normal;
	font-style: normal;
}

/* bold (700) */
@font-face {
	font-family: "Delivery";
	src: url(../assets/fonts/default-815fcbb4d2c579017011.woff) format("woff");
	font-weight: bold;
	font-style: normal;
}

/* bold (700) - Arabic */
@font-face {
	font-family: "Delivery Arabic";
	src: url(../assets/fonts/arabic-dc3736464316ca1f9387.woff) format("woff");
	font-weight: bold;
	font-style: normal;
}

/* CONDENSED FONT */

/* normal (200) */
@font-face {
	font-family: "Delivery";
	src: url(../assets/fonts/default-5a6dd86f272b304a8b83.woff) format("woff");
	font-weight: 200;
	font-style: normal;
}

/* normal (200) - Arabic */
@font-face {
	font-family: "Delivery Arabic";
	src: url(../assets/fonts/arabic-3418fc4165a84e3ca04e.woff) format("woff");
	font-weight: 200;
	font-style: normal;
}

/* bold (800) */
@font-face {
	font-family: "Delivery";
	src: url(../assets/fonts/default-3e828e80f6e985c352eb.woff) format("woff");
	font-weight: 800;
	font-style: normal;
}

/* bold (800) - Arabic */
@font-face {
	font-family: "Delivery Arabic";
	src: url(../assets/fonts/arabic-29aa36b7bdc7620d5065.woff) format("woff");
	font-weight: 800;
	font-style: normal;
}

/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/iconfont.css ***!
  \************************************************************************************************************************************************************************************************/
@font-face {
	font-family: "dhlicons";
	src: url(../assets/fonts/iconfont-da52a17c1b8deb953bfe.woff) format("woff");
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"]::before,
[class*=" icon-"]::before,
.has-icon::before,
.has-icon::after {
	font-family: "dhlicons";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.has-icon::before,
.has-icon::after {
	position: relative;
}

.icon-anchor-arrow-legacy::before {
	content: var(--icon-anchor-arrow-legacy);
}

.icon-chevron-back-legacy::before {
	content: var(--icon-chevron-back-legacy);
}

.icon-chevron-first-legacy::before {
	content: var(--icon-chevron-first-legacy);
}

.icon-chevron-forward-legacy::before {
	content: var(--icon-chevron-forward-legacy);
}

.icon-chevron-last-legacy::before {
	content: var(--icon-chevron-last-legacy);
}

.icon-close-bold-legacy::before {
	content: var(--icon-close-bold-legacy);
}

.icon-dimensions-legacy::before {
	content: var(--icon-dimensions-legacy);
}

.icon-doublecheck-legacy::before {
	content: var(--icon-doublecheck-legacy);
}

.icon-information-outline-legacy::before {
	content: var(--icon-information-outline-legacy);
}

.icon-parcel-legacy::before {
	content: var(--icon-parcel-legacy);
}

.icon-pieces-legacy::before {
	content: var(--icon-pieces-legacy);
}

.icon-play-circle-legacy::before {
	content: var(--icon-play-circle-legacy);
}

.icon-rss-legacy::before {
	content: var(--icon-rss-legacy);
}

.icon-share-web-legacy::before {
	content: var(--icon-share-web-legacy);
}

.icon-triangle-back-legacy::before {
	content: var(--icon-triangle-back-legacy);
}

.icon-triangle-down-legacy::before {
	content: var(--icon-triangle-down-legacy);
}

.icon-triangle-forward-legacy::before {
	content: var(--icon-triangle-forward-legacy);
}

.icon-triangle-up-legacy::before {
	content: var(--icon-triangle-up-legacy);
}

.icon-triangle-up-pointy-legacy::before {
	content: var(--icon-triangle-up-pointy-legacy);
}

.icon-tt-approval-legacy::before {
	content: var(--icon-tt-approval-legacy);
}

.icon-vimeo-legacy::before {
	content: var(--icon-vimeo-legacy);
}

.icon-weibo-legacy::before {
	content: var(--icon-weibo-legacy);
}

.icon-weight-legacy::before {
	content: var(--icon-weight-legacy);
}

.icon-youtube-legacy::before {
	content: var(--icon-youtube-legacy);
}

.icon-2-man-handling::before {
	content: var(--icon-2-man-handling);
}

.icon-added-value::before {
	content: var(--icon-added-value);
}

.icon-airport::before {
	content: var(--icon-airport);
}

.icon-arrow-back::before {
	content: var(--icon-arrow-back);
}

.icon-arrow-down::before {
	content: var(--icon-arrow-down);
}

.icon-arrow-forward::before {
	content: var(--icon-arrow-forward);
}

.icon-arrow-up::before {
	content: var(--icon-arrow-up);
}

.icon-auto-mobility::before {
	content: var(--icon-auto-mobility);
}

.icon-automotive::before {
	content: var(--icon-automotive);
}

.icon-avoid-crowds::before {
	content: var(--icon-avoid-crowds);
}

.icon-balance-confirmation::before {
	content: var(--icon-balance-confirmation);
}

.icon-bookmark-off::before {
	content: var(--icon-bookmark-off);
}

.icon-bookmark-on::before {
	content: var(--icon-bookmark-on);
}

.icon-bulky-shipments::before {
	content: var(--icon-bulky-shipments);
}

.icon-calendar-friday-english::before {
	content: var(--icon-calendar-friday-english);
}

.icon-calendar-friday-german::before {
	content: var(--icon-calendar-friday-german);
}

.icon-calendar-monday-english::before {
	content: var(--icon-calendar-monday-english);
}

.icon-calendar-monday-german::before {
	content: var(--icon-calendar-monday-german);
}

.icon-calendar-saturday-english::before {
	content: var(--icon-calendar-saturday-english);
}

.icon-calendar-saturday-german::before {
	content: var(--icon-calendar-saturday-german);
}

.icon-calendar-thursday-english::before {
	content: var(--icon-calendar-thursday-english);
}

.icon-calendar-thursday-german::before {
	content: var(--icon-calendar-thursday-german);
}

.icon-calendar-today-english::before {
	content: var(--icon-calendar-today-english);
}

.icon-calendar-today-german::before {
	content: var(--icon-calendar-today-german);
}

.icon-calendar-tuesday-english::before {
	content: var(--icon-calendar-tuesday-english);
}

.icon-calendar-tuesday-german::before {
	content: var(--icon-calendar-tuesday-german);
}

.icon-calendar-wednsday-english::before {
	content: var(--icon-calendar-wednsday-english);
}

.icon-calendar-wednsday-german::before {
	content: var(--icon-calendar-wednsday-german);
}

.icon-calendar::before {
	content: var(--icon-calendar);
}

.icon-cancel-circle::before {
	content: var(--icon-cancel-circle);
}

.icon-cancel::before {
	content: var(--icon-cancel);
}

.icon-carbon-dashboard::before {
	content: var(--icon-carbon-dashboard);
}

.icon-cash-on-delivery::before {
	content: var(--icon-cash-on-delivery);
}

.icon-cc-off::before {
	content: var(--icon-cc-off);
}

.icon-cc-on::before {
	content: var(--icon-cc-on);
}

.icon-certificate::before {
	content: var(--icon-certificate);
}

.icon-chatbot::before {
	content: var(--icon-chatbot);
}

.icon-checkmark-circle::before {
	content: var(--icon-checkmark-circle);
}

.icon-checkmark::before {
	content: var(--icon-checkmark);
}

.icon-chemicals::before {
	content: var(--icon-chemicals);
}

.icon-chevron-back::before {
	content: var(--icon-chevron-back);
}

.icon-chevron-down::before {
	content: var(--icon-chevron-down);
}

.icon-chevron-forward::before {
	content: var(--icon-chevron-forward);
}

.icon-chevron-up::before {
	content: var(--icon-chevron-up);
}

.icon-clearance-delay::before {
	content: var(--icon-clearance-delay);
}

.icon-cloud-loading::before {
	content: var(--icon-cloud-loading);
}

.icon-cloud-save::before {
	content: var(--icon-cloud-save);
}

.icon-cloud-success::before {
	content: var(--icon-cloud-success);
}

.icon-cloud::before {
	content: var(--icon-cloud);
}

.icon-coffee-break::before {
	content: var(--icon-coffee-break);
}

.icon-consumer::before {
	content: var(--icon-consumer);
}

.icon-container::before {
	content: var(--icon-container);
}

.icon-containership::before {
	content: var(--icon-containership);
}

.icon-content::before {
	content: var(--icon-content);
}

.icon-control-tower::before {
	content: var(--icon-control-tower);
}

.icon-copy-to-clipboard::before {
	content: var(--icon-copy-to-clipboard);
}

.icon-copy::before {
	content: var(--icon-copy);
}

.icon-coronavirus::before {
	content: var(--icon-coronavirus);
}

.icon-crop::before {
	content: var(--icon-crop);
}

.icon-current-location::before {
	content: var(--icon-current-location);
}

.icon-custom-service::before {
	content: var(--icon-custom-service);
}

.icon-delivered::before {
	content: var(--icon-delivered);
}

.icon-delivery-van::before {
	content: var(--icon-delivery-van);
}

.icon-delivery-without-signature::before {
	content: var(--icon-delivery-without-signature);
}

.icon-departed::before {
	content: var(--icon-departed);
}

.icon-disinfection::before {
	content: var(--icon-disinfection);
}

.icon-document::before {
	content: var(--icon-document);
}

.icon-doorstep-delivery::before {
	content: var(--icon-doorstep-delivery);
}

.icon-download-file::before {
	content: var(--icon-download-file);
}

.icon-download::before {
	content: var(--icon-download);
}

.icon-drag-corner::before {
	content: var(--icon-drag-corner);
}

.icon-drag-handle::before {
	content: var(--icon-drag-handle);
}

.icon-e-trike::before {
	content: var(--icon-e-trike);
}

.icon-edit::before {
	content: var(--icon-edit);
}

.icon-education::before {
	content: var(--icon-education);
}

.icon-email::before {
	content: var(--icon-email);
}

.icon-emerging-market-solutions::before {
	content: var(--icon-emerging-market-solutions);
}

.icon-energy::before {
	content: var(--icon-energy);
}

.icon-engineering::before {
	content: var(--icon-engineering);
}

.icon-envelopes::before {
	content: var(--icon-envelopes);
}

.icon-envirosolutions::before {
	content: var(--icon-envirosolutions);
}

.icon-exception::before {
	content: var(--icon-exception);
}

.icon-express-product::before {
	content: var(--icon-express-product);
}

.icon-facebook::before {
	content: var(--icon-facebook);
}

.icon-fast-payment::before {
	content: var(--icon-fast-payment);
}

.icon-feature-detection::before {
	content: var(--icon-feature-detection);
}

.icon-file-jpg::before {
	content: var(--icon-file-jpg);
}

.icon-file-pdf::before {
	content: var(--icon-file-pdf);
}

.icon-file-png::before {
	content: var(--icon-file-png);
}

.icon-filter-options::before {
	content: var(--icon-filter-options);
}

.icon-filter::before {
	content: var(--icon-filter);
}

.icon-finance::before {
	content: var(--icon-finance);
}

.icon-financial-services::before {
	content: var(--icon-financial-services);
}

.icon-flagship-store::before {
	content: var(--icon-flagship-store);
}

.icon-flexible-parcel-delivery::before {
	content: var(--icon-flexible-parcel-delivery);
}

.icon-forklift-supply-chain::before {
	content: var(--icon-forklift-supply-chain);
}

.icon-frontline::before {
	content: var(--icon-frontline);
}

.icon-giftbox::before {
	content: var(--icon-giftbox);
}

.icon-global-forwarding-freight::before {
	content: var(--icon-global-forwarding-freight);
}

.icon-globe::before {
	content: var(--icon-globe);
}

.icon-glossary::before {
	content: var(--icon-glossary);
}

.icon-gogreen::before {
	content: var(--icon-gogreen);
}

.icon-grid-view::before {
	content: var(--icon-grid-view);
}

.icon-hand-truck::before {
	content: var(--icon-hand-truck);
}

.icon-handicapped::before {
	content: var(--icon-handicapped);
}

.icon-heart-off::before {
	content: var(--icon-heart-off);
}

.icon-heart-on::before {
	content: var(--icon-heart-on);
}

.icon-helmet::before {
	content: var(--icon-helmet);
}

.icon-helpline::before {
	content: var(--icon-helpline);
}

.icon-home-and-work::before {
	content: var(--icon-home-and-work);
}

.icon-home-delivery::before {
	content: var(--icon-home-delivery);
}

.icon-home::before {
	content: var(--icon-home);
}

.icon-hospital::before {
	content: var(--icon-hospital);
}

.icon-hr::before {
	content: var(--icon-hr);
}

.icon-idea::before {
	content: var(--icon-idea);
}

.icon-identity-document-including-age::before {
	content: var(--icon-identity-document-including-age);
}

.icon-identity-document::before {
	content: var(--icon-identity-document);
}

.icon-image::before {
	content: var(--icon-image);
}

.icon-incorrect-payment::before {
	content: var(--icon-incorrect-payment);
}

.icon-information::before {
	content: var(--icon-information);
}

.icon-instagram::before {
	content: var(--icon-instagram);
}

.icon-insurance-up-to-25k-euro::before {
	content: var(--icon-insurance-up-to-25k-euro);
}

.icon-integrated-solutions::before {
	content: var(--icon-integrated-solutions);
}

.icon-intransit::before {
	content: var(--icon-intransit);
}

.icon-landscape-format::before {
	content: var(--icon-landscape-format);
}

.icon-laptop::before {
	content: var(--icon-laptop);
}

.icon-large-envelope::before {
	content: var(--icon-large-envelope);
}

.icon-layout::before {
	content: var(--icon-layout);
}

.icon-lighthouse::before {
	content: var(--icon-lighthouse);
}

.icon-limited-quantities::before {
	content: var(--icon-limited-quantities);
}

.icon-linkedin::before {
	content: var(--icon-linkedin);
}

.icon-list::before {
	content: var(--icon-list);
}

.icon-live-tracking::before {
	content: var(--icon-live-tracking);
}

.icon-load-profile-optimization::before {
	content: var(--icon-load-profile-optimization);
}

.icon-location-pin::before {
	content: var(--icon-location-pin);
}

.icon-location::before {
	content: var(--icon-location);
}

.icon-logout::before {
	content: var(--icon-logout);
}

.icon-lsh::before {
	content: var(--icon-lsh);
}

.icon-luggage::before {
	content: var(--icon-luggage);
}

.icon-lunch-break::before {
	content: var(--icon-lunch-break);
}

.icon-mail::before {
	content: var(--icon-mail);
}

.icon-management-services::before {
	content: var(--icon-management-services);
}

.icon-management::before {
	content: var(--icon-management);
}

.icon-manifest-received::before {
	content: var(--icon-manifest-received);
}

.icon-medal-1::before {
	content: var(--icon-medal-1);
}

.icon-medal-2::before {
	content: var(--icon-medal-2);
}

.icon-medal-3::before {
	content: var(--icon-medal-3);
}

.icon-meeting-point::before {
	content: var(--icon-meeting-point);
}

.icon-menu-burger::before {
	content: var(--icon-menu-burger);
}

.icon-middle-out::before {
	content: var(--icon-middle-out);
}

.icon-minus-circle::before {
	content: var(--icon-minus-circle);
}

.icon-minus::before {
	content: var(--icon-minus);
}

.icon-miss-a-parcel::before {
	content: var(--icon-miss-a-parcel);
}

.icon-mobile-off::before {
	content: var(--icon-mobile-off);
}

.icon-mobile-phone::before {
	content: var(--icon-mobile-phone);
}

.icon-more-horizontal::before {
	content: var(--icon-more-horizontal);
}

.icon-more-vertical::before {
	content: var(--icon-more-vertical);
}

.icon-mtan::before {
	content: var(--icon-mtan);
}

.icon-no-connection::before {
	content: var(--icon-no-connection);
}

.icon-no-delivery-to-neighbour::before {
	content: var(--icon-no-delivery-to-neighbour);
}

.icon-not-suitable-vaccination::before {
	content: var(--icon-not-suitable-vaccination);
}

.icon-office-worker::before {
	content: var(--icon-office-worker);
}

.icon-online-shopping::before {
	content: var(--icon-online-shopping);
}

.icon-open-in-new-window::before {
	content: var(--icon-open-in-new-window);
}

.icon-open-parcel::before {
	content: var(--icon-open-parcel);
}

.icon-other::before {
	content: var(--icon-other);
}

.icon-packstation-locker-lean::before {
	content: var(--icon-packstation-locker-lean);
}

.icon-packstation-locker::before {
	content: var(--icon-packstation-locker);
}

.icon-pallet::before {
	content: var(--icon-pallet);
}

.icon-paper-registration::before {
	content: var(--icon-paper-registration);
}

.icon-parcel-box::before {
	content: var(--icon-parcel-box);
}

.icon-parcel-butler::before {
	content: var(--icon-parcel-butler);
}

.icon-parcel-handover::before {
	content: var(--icon-parcel-handover);
}

.icon-parcel-notification::before {
	content: var(--icon-parcel-notification);
}

.icon-parcel-stop::before {
	content: var(--icon-parcel-stop);
}

.icon-parcel-tracking::before {
	content: var(--icon-parcel-tracking);
}

.icon-parcel::before {
	content: var(--icon-parcel);
}

.icon-parking::before {
	content: var(--icon-parking);
}

.icon-partnership::before {
	content: var(--icon-partnership);
}

.icon-password-reset::before {
	content: var(--icon-password-reset);
}

.icon-pause::before {
	content: var(--icon-pause);
}

.icon-payment-advice::before {
	content: var(--icon-payment-advice);
}

.icon-phone-with-hand::before {
	content: var(--icon-phone-with-hand);
}

.icon-plane-air-freight::before {
	content: var(--icon-plane-air-freight);
}

.icon-plane-landing::before {
	content: var(--icon-plane-landing);
}

.icon-plane-take-off::before {
	content: var(--icon-plane-take-off);
}

.icon-play::before {
	content: var(--icon-play);
}

.icon-please-contact::before {
	content: var(--icon-please-contact);
}

.icon-plugins-shopsoftware::before {
	content: var(--icon-plugins-shopsoftware);
}

.icon-plus-circle::before {
	content: var(--icon-plus-circle);
}

.icon-plus::before {
	content: var(--icon-plus);
}

.icon-pod::before {
	content: var(--icon-pod);
}

.icon-port-crane::before {
	content: var(--icon-port-crane);
}

.icon-portrait-format::before {
	content: var(--icon-portrait-format);
}

.icon-post-and-parcel-germany::before {
	content: var(--icon-post-and-parcel-germany);
}

.icon-postage-calculator::before {
	content: var(--icon-postage-calculator);
}

.icon-power-plug::before {
	content: var(--icon-power-plug);
}

.icon-preferred-neighbour::before {
	content: var(--icon-preferred-neighbour);
}

.icon-primary-secondary-packaging::before {
	content: var(--icon-primary-secondary-packaging);
}

.icon-print::before {
	content: var(--icon-print);
}

.icon-prio::before {
	content: var(--icon-prio);
}

.icon-product-launches::before {
	content: var(--icon-product-launches);
}

.icon-public-sector::before {
	content: var(--icon-public-sector);
}

.icon-push-android::before {
	content: var(--icon-push-android);
}

.icon-push-ios::before {
	content: var(--icon-push-ios);
}

.icon-q-and-a::before {
	content: var(--icon-q-and-a);
}

.icon-quarantine::before {
	content: var(--icon-quarantine);
}

.icon-receipt::before {
	content: var(--icon-receipt);
}

.icon-receive-parcel::before {
	content: var(--icon-receive-parcel);
}

.icon-received::before {
	content: var(--icon-received);
}

.icon-redirect-labeling::before {
	content: var(--icon-redirect-labeling);
}

.icon-redirect::before {
	content: var(--icon-redirect);
}

.icon-redo-arrow::before {
	content: var(--icon-redo-arrow);
}

.icon-registration-digital::before {
	content: var(--icon-registration-digital);
}

.icon-reset-clear::before {
	content: var(--icon-reset-clear);
}

.icon-resize-larger::before {
	content: var(--icon-resize-larger);
}

.icon-resize-smaller::before {
	content: var(--icon-resize-smaller);
}

.icon-responsibility::before {
	content: var(--icon-responsibility);
}

.icon-retail-sector::before {
	content: var(--icon-retail-sector);
}

.icon-return-of-undeliverables::before {
	content: var(--icon-return-of-undeliverables);
}

.icon-return-solutions::before {
	content: var(--icon-return-solutions);
}

.icon-rolls-and-tubes::before {
	content: var(--icon-rolls-and-tubes);
}

.icon-safety-vest::before {
	content: var(--icon-safety-vest);
}

.icon-sameday::before {
	content: var(--icon-sameday);
}

.icon-saving-sets-percentage::before {
	content: var(--icon-saving-sets-percentage);
}

.icon-saving-sets::before {
	content: var(--icon-saving-sets);
}

.icon-scan-barcode::before {
	content: var(--icon-scan-barcode);
}

.icon-scan-parcel::before {
	content: var(--icon-scan-parcel);
}

.icon-search::before {
	content: var(--icon-search);
}

.icon-send-parcel::before {
	content: var(--icon-send-parcel);
}

.icon-send::before {
	content: var(--icon-send);
}

.icon-service-point::before {
	content: var(--icon-service-point);
}

.icon-settings::before {
	content: var(--icon-settings);
}

.icon-share-android::before {
	content: var(--icon-share-android);
}

.icon-share-ios::before {
	content: var(--icon-share-ios);
}

.icon-shop::before {
	content: var(--icon-shop);
}

.icon-shopping-cart-ecommerce::before {
	content: var(--icon-shopping-cart-ecommerce);
}

.icon-shopping-cart::before {
	content: var(--icon-shopping-cart);
}

.icon-sms::before {
	content: var(--icon-sms);
}

.icon-social-distancing::before {
	content: var(--icon-social-distancing);
}

.icon-solar-panel::before {
	content: var(--icon-solar-panel);
}

.icon-sort::before {
	content: var(--icon-sort);
}

.icon-speech-bubble::before {
	content: var(--icon-speech-bubble);
}

.icon-ssl-encryption::before {
	content: var(--icon-ssl-encryption);
}

.icon-star-off::before {
	content: var(--icon-star-off);
}

.icon-star-on::before {
	content: var(--icon-star-on);
}

.icon-store::before {
	content: var(--icon-store);
}

.icon-supplier::before {
	content: var(--icon-supplier);
}

.icon-swap-arrows::before {
	content: var(--icon-swap-arrows);
}

.icon-technology::before {
	content: var(--icon-technology);
}

.icon-temperature-control::before {
	content: var(--icon-temperature-control);
}

.icon-tiktok::before {
	content: var(--icon-tiktok);
}

.icon-time::before {
	content: var(--icon-time);
}

.icon-timetable::before {
	content: var(--icon-timetable);
}

.icon-toilets::before {
	content: var(--icon-toilets);
}

.icon-town::before {
	content: var(--icon-town);
}

.icon-train-rail-freight::before {
	content: var(--icon-train-rail-freight);
}

.icon-transfer::before {
	content: var(--icon-transfer);
}

.icon-transport-of-lithium-batteries::before {
	content: var(--icon-transport-of-lithium-batteries);
}

.icon-transport-solutions::before {
	content: var(--icon-transport-solutions);
}

.icon-trash-bin-delete::before {
	content: var(--icon-trash-bin-delete);
}

.icon-truck-road-freight::before {
	content: var(--icon-truck-road-freight);
}

.icon-twitter::before {
	content: var(--icon-twitter);
}

.icon-two-gears::before {
	content: var(--icon-two-gears);
}

.icon-undo-arrow::before {
	content: var(--icon-undo-arrow);
}

.icon-upload-file::before {
	content: var(--icon-upload-file);
}

.icon-upload::before {
	content: var(--icon-upload);
}

.icon-user-circle::before {
	content: var(--icon-user-circle);
}

.icon-user::before {
	content: var(--icon-user);
}

.icon-vaccine::before {
	content: var(--icon-vaccine);
}

.icon-visibility-off::before {
	content: var(--icon-visibility-off);
}

.icon-visibility-on::before {
	content: var(--icon-visibility-on);
}

.icon-volume-high::before {
	content: var(--icon-volume-high);
}

.icon-volume-low::before {
	content: var(--icon-volume-low);
}

.icon-volume-muted::before {
	content: var(--icon-volume-muted);
}

.icon-warehouse::before {
	content: var(--icon-warehouse);
}

.icon-warehousing-solutions::before {
	content: var(--icon-warehousing-solutions);
}

.icon-wash-hands::before {
	content: var(--icon-wash-hands);
}

.icon-wear-mask::before {
	content: var(--icon-wear-mask);
}

.icon-wechat::before {
	content: var(--icon-wechat);
}

.icon-whatsapp::before {
	content: var(--icon-whatsapp);
}

.icon-wifi::before {
	content: var(--icon-wifi);
}

.icon-workshop::before {
	content: var(--icon-workshop);
}

.icon-xing::before {
	content: var(--icon-xing);
}

.icon-youtube::before {
	content: var(--icon-youtube);
}

/* rtl:raw:
.icon-open-in-new-window::before,
.icon-open-in-new-window::after,
.icon-chevron-forward::before,
.icon-chevron-forward::after,
.icon-chevron-back::before,
.icon-chevron-back::after,
.icon-share-web::before,
.icon-share-web::after,
.icon-arrow-back::before,
.icon-arrow-back::after,
.icon-arrow-forward::before,
.icon-arrow-forward::after,
.icon-content::before,
.icon-content::after,
.icon-airport::before,
.icon-airport::after,
.icon-consumer::before,
.icon-consumer::after,
.icon-containership::before,
.icon-containership::after,
.icon-delivery-van::before,
.icon-delivery-van::after,
.icon-departed::before,
.icon-departed::after,
.icon-drag-corner::before,
.icon-drag-corner::after,
.icon-e-trike::before,
.icon-e-trike::after,
.icon-education::before,
.icon-education::after,
.icon-emerging-market-solutions::before,
.icon-emerging-market-solutions::after,
.icon-fast-payment::before,
.icon-fast-payment::after,
.icon-forklift-supply-chain::before,
.icon-forklift-supply-chain::after,
.icon-global-forwarding-freight::before,
.icon-global-forwarding-freight::after,
.icon-hand-truck::before,
.icon-hand-truck::after,
.icon-handicapped::before,
.icon-handicapped::after,
.icon-identity-document::before,
.icon-identity-document::after,
.icon-intransit::before,
.icon-intransit::after,
.icon-landscape-format::before,
.icon-landscape-format::after,
.icon-laptop::before,
.icon-laptop::after,
.icon-list::before,
.icon-list::after,
.icon-logout::before,
.icon-logout::after,
.icon-online-shopping::before,
.icon-online-shopping::after,
.icon-plane-air-freight::before,
.icon-plane-air-freight::after,
.icon-plane-landing::before,
.icon-plane-landing::after,
.icon-plane-take-off::before,
.icon-plane-take-off::after,
.icon-please-contact::before,
.icon-please-contact::after,
.icon-pod::before,
.icon-pod::after,
.icon-port-crane::before,
.icon-port-crane::after,
.icon-portrait-format::before,
.icon-portrait-format::after,
.icon-product-launches::before,
.icon-product-launches::after,
.icon-push-ios::before,
.icon-push-ios::after,
.icon-q-and-a::before,
.icon-q-and-a::after,
.icon-received::before,
.icon-received::after,
.icon-redirect::before,
.icon-redirect::after,
.icon-redirect-labeling::before,
.icon-redirect-labeling::after,
.icon-return-of-undeliverables::before,
.icon-return-of-undeliverables::after,
.icon-return-solutions::before,
.icon-return-solutions::after,
.icon-send::before,
.icon-send::after,
.icon-shopping-cart::before,
.icon-shopping-cart::after,
.icon-shopping-cart-ecommerce::before,
.icon-shopping-cart-ecommerce::after,
.icon-sort::before,
.icon-sort::after,
.icon-speech-bubble::before,
.icon-speech-bubble::after,
.icon-supplier::before,
.icon-supplier::after,
.icon-swap-arrows::before,
.icon-swap-arrows::after,
.icon-train-rail-freight::before,
.icon-train-rail-freight::after,
.icon-transport-solutions::before,
.icon-transport-solutions::after,
.icon-truck-road-freight::before,
.icon-truck-road-freight::after,
.icon-workshop::before,
.icon-workshop::after {
	transform: scaleX(-1);
}
*/

/*!********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/list.css ***!
  \********************************************************************************************************************************************************************************************/
/**
 * @file base/list.css
 *
 * @description
 * Overall list classes - defining all lists
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 *  --------------------------------------------------------------------------------------------------------------------
 * As both this custom implementation of lists and the core component cmp-list have a CSS class ".list", we run into the
 * issue that the custom CSS class ".list" inteferes with the core component's CSS and brings some unwanted spacing etc.
 * Therefore we need to overwrite respectively reset the custom CSS class in the core component's CSS.
 *  --------------------------------------------------------------------------------------------------------------------
 */

/* global list styles */
ul,
ol {
	list-style-position: inside;
	margin-bottom: var(--base-line-height);
	line-height: calc(2 * var(--base-line-height));
}

ul {
	list-style-type: disc;
}

ol li ol {
	list-style-type: lower-latin;
	color: var(--color-black-400);
}

.list {
	margin-bottom: var(--base-line-height);
	list-style-position: outside;
	color: var(--color-red-500);
}

.list .list {
	margin-top: var(--base-line-height);
	margin-bottom: 0;
}

.list li {
	position: relative;
	margin-bottom: var(--base-line-height);
}

ol.list,
ul.list {
	counter-reset: section;
	padding-left: 2.4em; /* stylelint-disable-line unit-allowed-list */

	/*
	not devisable by 7,
	as this padding balances the list number which is not devisable by 7 itself
	*/
}

ol.list > li {
	padding-left: calc(0.5 * var(--base-line-height));
}

ul.list li {
	list-style: square;
	padding-left: calc(0.5 * var(--base-line-height));
}

.list-proof-check li span {
	color: var(--color-black-400);
}

.list li span {
	color: var(--color-black-400);
	line-height: 1.4;
}

.list li span a span {  /* legacy code */
	color: var(--color-red-500);
	transition: color 200ms;
}

.list li span a:hover span {  /* legacy code */
	color: var(--color-red-400);
}

.list-proof-check {
	padding-left: calc(3 * var(--base-line-height));
	list-style-type: none;
	color: var(--color-red-500);
}

.list-proof-check li {
	position: relative;

	/* margin-bottom: var(--base-line-height); */
	/* padding-left: 2.9rem; */
}

.list li:last-child {
	margin-bottom: 0;
}

.list-proof-check li:last-child {
	margin-bottom: 0;
}

.list-proof-check li::before {
	position: absolute;
	top: -0.5rem;
	left: -3.5rem;
	content: var(--icon-checkmark);
	font-size: 2.1rem;
	font-family: "dhlicons";

	/* speak: none; */
	font-style: normal;
	font-weight: normal;
	font-variant: normal;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.left-aligned-grid .list,
.left-aligned-grid .list li,
.left-aligned-grid .list li span {
	line-height: var(--base-line-height-c20);
}

.left-aligned-grid .list-type-separated .list,
.left-aligned-grid .list.list-type-separated {
	color: var(--color-black-400);
}

.left-aligned-grid .list-type-separated .list li:not(:last-child)::before,
.left-aligned-grid .list.list-type-separated li:not(:last-child)::before {
	width: calc(4.5 * var(--base-line-height));
	content: "";
	position: absolute;
	height: 0.1rem;
	background-color: var(--color-gray-400);
	bottom: -0.1rem;
	left: calc(-2 * var(--base-line-height));
}

.left-aligned-grid .list-type-separated .list li:not(:last-child),
.left-aligned-grid .list.list-type-separated li:not(:last-child) {
	border-bottom: 0.1rem solid var(--color-gray-400);
	padding-bottom: var(--base-line-height);
}

/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/rte-light.css ***!
  \*************************************************************************************************************************************************************************************************/
.has-rte.is-centered {
	text-align: center;
}

.has-rte a:not(.base-button):not(:hover),
.has-rte a:link:not(.base-button):not(:hover),
.has-rte a:visited:not(.base-button):not(:hover) {
	color: var(--color-red-500);
	font-weight: bold;
}

.has-rte a.base-button,
.has-rte a.base-button:link,
.has-rte a.base-button:visited {
	font-weight: bold;
	text-decoration: none;
}

.has-rte a:not(.base-button):hover,
.has-rte a:not(.base-button):active {
	color: var(--color-red-400);
}

.has-rte .link:hover {
	text-decoration: underline;
}

.has-rte .link:hover::after {
	display: inline-block;
}

html:not(.is-touch) .has-rte a:not(.base-button):focus {
	color: var(--color-red-500);
	outline: 0.1rem solid var(--color-red-500);
	text-decoration: none;
}

html:not(.is-touch) .has-rte a:focus::after {
	color: var(--color-red-500);
}

.has-rte .list .link {
	display: inline;
}

.has-rte ul,
.has-rte ol {
	overflow: hidden;
	padding-top: var(--base-line-height);
}

.has-rte .list.is-centered,
.has-rte.is-centered .list {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 40rem;
	min-width: 15rem;
	padding-left: calc(2.5 * var(--base-line-height));
	padding-right: 2em; /* stylelint-disable-line unit-allowed-list */
}

.has-rte .list li {
	text-align: left;
}

/* .has-rte ul.list, */
.has-rte /*ol*/.list {
	width: 100%;
}

.has-rte ol.list,
.has-rte ol.list.list.is-centered,
.has-rte ul.list,
.has-rte ul.list.list.is-centered {

	/*
	not devisable by 7,
	as this padding balances the list number which is not devisable by 7 itself
	*/
	padding-left: calc(2 * var(--base-line-height));
}

p.has-rte {
	line-height: calc(1.5 * var(--base-line-height));
}

p.has-rte:empty {
	display: none;
}

.large p,
.large ul,
.large ol,
.large a span,
.has-rte p.large,
.has-rte ul.large,
.has-rte ol.large,
.has-rte span.large {
	font-size: var(--font-size-text-large);
	line-height: calc(1.75 * var(--base-line-height));
}

.condensed p,
.condensed ul,
.condensed ol,
.condensed a span,
.has-rte p.condensed,
.has-rte ul.condensed,
.has-rte ol.condensed,
.has-rte span.condensed {
	font-size: var(--font-size-text-condensed);
	line-height: calc(2 * var(--base-line-height) + 0.1rem);
	font-weight: 200;
}

.large-condensed p,
.large-condensed ul,
.large-condensed ol,
.large-condensed a span,
.has-rte p.large-condensed,
.has-rte ul.large-condensed,
.has-rte ol.large-condensed,
.has-rte span.large-condensed {
	font-size: var(--font-size-text-largecondensed);
	line-height: calc(2.5 * var(--base-line-height) - 0.1rem);
	font-weight: 200;
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.has-rte .list.is-centered,
	.has-rte.is-centered .list {
		max-width: 66rem;
	}
}

/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/search-expandable.css ***!
  \*********************************************************************************************************************************************************************************************************/
/* @deprecated */
/**
 * @file
 *
 * @description
 *
 * Styles for the expandable search effect
 *
 */

.c-search-expandable.is-active .c-form--element-input {
	width: calc(100% - 1.75rem - 2rem);
	padding: 0 calc(var(--base-line-height) / 2);
}

.c-search-expandable {
	margin: 0 calc(var(--base-line-height) * 1) 0 calc(var(--base-line-height) * 2) !important; /* stylelint-disable-line declaration-no-important */
}

.c-search-expandable .c-form--element-input {
	width: 0%;
	transition: width 200ms ease-in;
	padding: 0;
	background: var(--color-gray-50);
}

.c-search-expandable--button {
	cursor: pointer;
	color: var(--color-black-400);
}

.c-search-expandable--button:hover,
.c-search-expandable--button:hover::before {
	color: var(--color-red-400);
}

/**
 * major breakpoint "m"
 * @size >=768
 */
@media screen and (min-width: 768px),print {
	.c-search-expandable.is-active .c-form--element-input {
		width: calc(50%);
		padding: 0 calc(var(--base-line-height) / 2);
		margin: 0;
	}
}

/*!***********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/base/waiting.css ***!
  \***********************************************************************************************************************************************************************************************/
/**
 * @file base/waiting.css
 *
 * @description
 *
 * Styles for the waiting / loading layer
 *
 */

.c-waiting {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: color(rgba(255, 255, 255, 0.9));
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSc2NHB4JyBoZWlnaHQ9JzY0cHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXJpcHBsZSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9Im5vbmUiIGNsYXNzPSJiayI+PC9yZWN0PjxnPiA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjJzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49IjBzIiBrZXlUaW1lcz0iMDswLjMzOzEiIHZhbHVlcz0iMTsxOzAiPjwvYW5pbWF0ZT48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSIjYWZhZmI3IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwcyIga2V5VGltZXM9IjA7MC4zMzsxIiB2YWx1ZXM9IjA7MjI7NDQiPjwvYW5pbWF0ZT48L2NpcmNsZT48L2c+PGc+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIxcyIga2V5VGltZXM9IjA7MC4zMzsxIiB2YWx1ZXM9IjE7MTswIj48L2FuaW1hdGU+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iI2ZjMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMXMiIGtleVRpbWVzPSIwOzAuMzM7MSIgdmFsdWVzPSIwOzIyOzQ0Ij48L2FuaW1hdGU+PC9jaXJjbGU+PC9nPjwvc3ZnPg==);
	display: none;
	z-index: 20000;
	min-height: 20rem;
}

.c-waiting.is-active {
	display: block;
}

/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/components/calculator.css ***!
  \********************************************************************************************************************************************************************************************************/
.c-calculator--tabcontent {
	margin: 0;
	min-height: calc(7 * var(--base-line-height));
	background: var(--color-yellow-500);
}

.c-calculator--tabcontent select {
	padding: 1.4rem 3.5rem 1.4rem 1.2rem;
}

.c-calculator--input-select {
	height: calc(3 * var(--base-line-height));
	padding: 0 calc(2 * var(--base-line-height));
	border: 0 solid var(--color-white-500);
	outline: none;
	background-color: var(--color-white-500);
	appearance: none;
	background-size: calc(2 * var(--base-line-height)) calc(2 * var(--base-line-height));
	border-radius: 0.4rem;
}

.c-calculator--input-select::-ms-expand {
	display: none;
}

.c-calculator--countryselector-overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0);
	transition: background-color 500ms;
	z-index: 12;
}

.c-calculator--padding-vertical {
	padding: 0 calc(1 * var(--base-line-height));
}

.c-calculator--padding-vertical h3 {
	font-weight: 800;
}

.l-view input.c-calculator--input-field {
	padding: 1.4rem 1.2rem;
}

.c-calculator--input-form {
	position: relative;
}

.c-calculator--zip-error-message {
	color: var(--color-red-500);
	display: block;
	font-size: var(--font-size-1);
	padding-top: calc(0.5 * var(--base-line-height));
}

.c-calculator--text-align-left {
	text-align: left;
}

.c-calculator--error-message {
	color: var(--color-red-500);
	font-weight: bold;
	display: none;
}

.c-calculator--ruler {
	display: inline-block;
	border-bottom: 0.1rem solid var(--color-gray-300);
	margin-top: calc(1 * var(--base-line-height));
}

.c-calculator--goto-previous {
	cursor: pointer;
}

.c-calculator--margin-top,
.c-calculator--product-component-wrapper {
	margin-top: calc(1 * var(--base-line-height));
}

.c-calculator--text-align-right {
	text-align: right;
}

.c-calculator--modal-close {
	color: var(--color-red-500);
	float: right;
	font-size: var(--font-size-5);
	font-weight: bold;
	cursor: pointer;
}

.c-calculator--modal-common {
	display: none;
	position: absolute;
	z-index: 13;
	overflow: auto;
}

.c-calculator--modal-content {
	background-color: var(--color-white-500);
	margin: auto;
	padding: var(--base-line-height);
	border: 0.1rem solid var(--color-gray-600);
	width: 100%;
	border-radius: 0.4rem;
}

.c-calculator--error-id {
	margin-top: calc(-1 * var(--base-line-height));
}

.c-calculator .is-loading {
	background-image: url(../assets/img/09f7af41dd2858a74e3f.svg);
	background-repeat: no-repeat;
	background-position: right;
}

@media screen and (min-width: 768px),print {
	.c-calculator--modal-common {
		width: 80%;
		right: calc(6 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-calculator--modal-common {
		width: 38%;
		right: calc(8 * var(--base-line-height));
	}
}

@media screen and (max-width: 767px),print {
	.c-calculator--modal-content {
		width: 80%;
	}
}

/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/components/accordion.css ***!
  \*******************************************************************************************************************************************************************************************************/
/**
 * @file components/accordion.css
 *
 * @description
 *
 * Styles for the generic accordion component
 */

.c-accordion--content {
	display: none;
	height: 0;
	overflow: hidden;
}

.c-accordion--item {
	list-style-type: none;
	overflow: hidden;
}

.c-accordion--item.is-open {
	overflow: hidden;
}

.c-accordion--item.is-open .c-accordion--content {
	display: block;
	height: auto;
}

.c-accordion--hitbox {
	cursor: pointer;
}

@media screen and (min-width: 1024px),print {
	.c-accordion--item .link-text--wrapper {
		border-top: 0.1rem solid var(--color-gray-300);
		margin-top: var(--base-line-height);
	}

	.c-accordion--item > .link {
		display: inline-block;
		width: auto;
		border: 0;
		padding: 0;
		margin-top: calc(0.5 * var(--base-line-height));
	}

	.c-accordion--item > .link > .link-text--icon {
		padding-right: 0;
	}

	/* rtl:raw:
	.c-accordion--item > .link > .link-text--icon {
	    position: absolute;
	    left: -1.5rem;
	    display: block;
	    width: auto;
	    display: inline-block;
	    transform: rotateZ(180deg);
	}

	*/

	.c-accordion--item > .link:focus {
		color: var(--color-red-500);
		outline: 0.1rem solid var(--color-red-500);
		text-decoration: none;
	}
}

/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/forms/form-general.css ***!
  \*****************************************************************************************************************************************************************************************************/
/* FORM STEPS OUTER CONTAINERS */

.c-form-step--form {
	margin: 0 auto;
	width: 100%;

	/* please note the workaround for .c-form-step--pagination-item which is based
	   on this max-width value
	   see: https://tools.publicis.sapient.com/jira/browse/DPDHLPA-4847 */
	max-width: 56rem;
}

.left-aligned-grid .c-form-step--form {
	margin: 0;
}

/* FORM STEP PAGINATION */

.c-form-step--pagination {
	counter-reset: pagination;
	margin-bottom: calc(3 * var(--base-line-height));
}

.no-js .c-form-step--pagination {
	display: none;
}

.c-form-step--pagination-list {
	display: flex;
	list-style: none;

	/* required for the workaround for .c-form-step--pagination-item
	   see: https://tools.publicis.sapient.com/jira/browse/DPDHLPA-4847 */
	justify-content: center;
}

.c-form-step--pagination-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1 0 2.8rem;
}

.c-form-step--pagination-label {
	text-align: center;
	font-size: var(--font-size-text-small);
	line-height: 1.5rem;
}

.c-form-step--pagination-line-container {
	display: flex;
	justify-content: center;
}

.c-form-step--pagination-line-container::before,
.c-form-step--pagination-line-container::after {
	display: block;
	content: "";
	width: calc(50% - 1.4rem);
}

.c-form-step--pagination-line-container::after,
.c-form-step--pagination-item.is-inactive .c-form-step--pagination-line-container::before {
	margin: 1.35rem 0;
	height: 0.1rem;
	background-color: var(--color-gray-500);
}

.c-form-step--pagination-line-container::before,
.c-form-step--pagination-item.is-validated .c-form-step--pagination-line-container::after {
	margin: 1.2rem 0;
	height: 0.4rem;
	background-color: var(--color-green-500);
}

.c-form-step--pagination-item:first-child .c-form-step--pagination-line-container::before,
.c-form-step--pagination-item:last-child .c-form-step--pagination-line-container::after {
	visibility: hidden;
}

.c-form-step--pagination-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	width: 2.8rem;
	height: 2.8rem;
	border: 0.3rem solid var(--color-green-500);
	border-radius: 1.4rem;
	font-size: var(--font-size-text-small);
	cursor: default;
}

.c-form-step--pagination-icon::before {
	content: counter(pagination);
	counter-increment: pagination;
}

.c-form-step--pagination-item.is-validated .c-form-step--pagination-icon {
	border: 0;
	background: url(../assets/img/74a6644034224450036e.svg) center center no-repeat;
	background-size: 3.3rem;
	cursor: pointer;
}

.c-form-step--pagination-item.is-validated .c-form-step--pagination-icon::before {
	visibility: hidden;
}

.c-form-step--pagination-item.is-inactive .c-form-step--pagination-icon {
	border: 0.1rem solid var(--color-gray-500);
}

@media screen and (max-width: 767px),print {
	.c-form-step--pagination-label {
		display: none;
	}

	.c-form-step--pagination-item:last-child {
		flex-grow: 0;
	}

	.c-form-step--pagination-line-container::before,
	.c-form-step--pagination-item:last-child .c-form-step--pagination-line-container::after {
		display: none;
	}

	.c-form-step--pagination-line-container::after {
		width: calc(100% - 2.8rem);
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-form-step--form {
		max-width: 62.4rem;
	}
}

@media screen and (min-width: 768px),print {

	/* since the <ul> container width of 56rem cannot be divided by 3, 6 and 9
	   (= number of <li>s inside) while keeping integer values, we need to round
	   these <li> widths manually and hardcoded in order to prevent design/render
	   issues of the horizontal lines (between the step numbers/circles) in some
	   browsers; this workaround is optimized for up to 9 <li>s
	   see: https://tools.publicis.sapient.com/jira/browse/DPDHLPA-4847
	   see: https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/ */
	.c-form-step--pagination-item:first-child:nth-last-child(3),
	.c-form-step--pagination-item:first-child:nth-last-child(3) ~ .c-form-step--pagination-item {
		flex: 0 0 18.7rem;
	}

	.c-form-step--pagination-item:first-child:nth-last-child(6),
	.c-form-step--pagination-item:first-child:nth-last-child(6) ~ .c-form-step--pagination-item {
		flex: 0 0 9.3rem;
	}

	.c-form-step--pagination-item:first-child:nth-last-child(9),
	.c-form-step--pagination-item:first-child:nth-last-child(9) ~ .c-form-step--pagination-item {
		flex: 0 0 6.2rem;
	}

	.c-form-step--pagination-line-container {
		margin-top: var(--base-line-height);
	}
}

/* FORM STEP INTRO TEXT */

.c-form-step--intro-text {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

/* FORM STEPS INNER CONTAINERS */

.c-form-step--form-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.c-form-step--section {
	width: 100%;
}

.c-form-step--section .c-text-generic {
	margin: calc(2.5 * var(--base-line-height)) 0;
	padding: 0;
}

.c-form-steps.is-form-steps .c-form-step--section {
	display: none;
	opacity: 0;
	transition: opacity 3000ms;
}

.c-form-steps.is-form-steps .c-form-step--section.is-active,
.no-js .c-form-steps.is-form-steps .c-form-step--section {
	display: block;
	opacity: 1;
}

.c-form-steps .has-button {
	display: flex;
}

.left-aligned-grid .c-form-steps .has-button > .base-button {
	font-size: var(--font-size-2);
	line-height: 1.6rem;
}

.left-aligned-grid .c-form-steps .has-button > .base-button > span {
	line-height: 1.6rem;
}

/* button should be left-aligned for single-step forms */
.c-form-steps.is-form-steps .has-button {
	justify-content: flex-start;
}

/* button should be right-aligned only for multi-step forms which has pagination */
.c-form-steps.is-form-steps .c-form-step--pagination ~ .c-form-step--form-wrapper .has-button {
	justify-content: flex-end;
}

/* without scripts multi-step forms are single-step forms again */
.no-js .c-form-steps.is-form-steps .has-button {
	justify-content: flex-start;
}

.no-js .c-form-steps .has-button-step {
	display: none;
}

/* FIELDSET */

.c-form--element-fieldset {
	margin: calc(2.5 * var(--base-line-height)) 0 0;
	padding: 0;
	border: 0;
}

.c-form--element-fieldset:first-child {
	margin: 0;
}

/* BASE ELEMENT */

.c-form--element-base {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	border: 0;
	font-size: var(--font-size-standard);
	line-height: calc(1.5 * var(--base-line-height));
	color: var(--color-black-400);
	background-color: var(--color-white-500);
}

.left-aligned-grid .c-form--element-base {
	font-size: var(--font-size-2);
	line-height: 2rem;
}

.left-aligned-grid textarea.c-form--element-base {
	line-height: calc(2 * var(--base-line-height));
}

/* LEGEND */
.c-form--element-fieldset-legend {
	margin-bottom: 0;
	font-size: var(--font-size-text-large);
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: 800;
	color: var(--color-black-500);
}

.left-aligned-grid .c-form--element-fieldset-legend {
	font-size: var(--font-size-4);
	line-height: calc(2 * var(--base-line-height));
}

.c-form--element-fieldset-legend:not(:last-child) {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-form--element-fieldset-legend.has-tooltip {
	position: relative;
	padding-right: 1.9rem; /* info icon width (1.6rem) + small extra space (0.3rem) */
}

/* TOOLTIP */

.c-form--element-tooltip {
	position: absolute;
	top: -0.95rem;
	right: -1.2rem;

	/* for UX reasons the touchable area should always be at least 40x40 pixels */
	width: 4rem;
	height: 4rem;
	background: url(../assets/img/999fb42fdf418eeeca06.svg) center center no-repeat;
	background-size: 1.6rem 1.6rem;
}

.c-form--element-tooltip:focus {
	background-image: url(../assets/img/47bbb0fc5fd4f5c4c222.svg);
}

.c-form--element-tooltip:hover {
	background-image: url(../assets/img/47bbb0fc5fd4f5c4c222.svg);
}

.c-form--element-tooltip::before,
.c-form--element-tooltip::after {
	display: none;
	position: absolute;
	left: 50%;
	box-sizing: border-box; /* actually automatically applied to all elements but not to pseudo-elements */
	pointer-events: none; /* tooltip should only be visible if mouse hovers over the icon */
}

.c-form--element-tooltip::before {
	content: "";
	z-index: 999;
	top: 4.2rem;
	transform: translateX(-50%) rotate(45deg);

	/* calculated with Pythagoras' theorem to achieve a width of 2.8rem after rotate(45deg) */
	width: 1.9798989873223330683223642138936rem;
	height: 1.9798989873223330683223642138936rem;
	background-color: var(--color-white-500);
	border-width: 0.1rem;
	border-style: solid;
	border-color: var(--color-gray-300) transparent transparent var(--color-gray-300);
}

.c-form--element-tooltip::after {
	content: attr(data-content);
	z-index: 998;
	top: 5.1rem;

	/* negative ::after width (-24.5rem) + half of ::before width (2.8rem / 2) + small extra space (0.7rem);
	   avoid using calc() inside translate since this is not supported by IE11 and Edge < 14 */
	transform: translateX(-22.4rem);
	padding: 2.1rem 2rem 1.9rem;
	width: 24.5rem;
	font-weight: normal;
	background: var(--color-white-500);
	border: 0.1rem solid var(--color-gray-300);
	border-radius: 0.1rem;
	box-shadow: 0 0 1.9rem 0 var(--color-gray-300);
}

.c-form--element-tooltip:hover::before,
.c-form--element-tooltip:focus::before,
.c-form--element-tooltip:hover::after,
.c-form--element-tooltip:focus::after {
	display: block;
}

/* FORM STEP ITEM */

.c-form-step--item {
	position: relative;
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-form-step--item.dependant-hidden {
	display: none;
}

.c-form-step--item:first-child {
	margin-top: 0;
}

.c-form--element-fieldset-legend + .c-form-step--item,
.c-form-step--item[data-form-validation-state="error"] + .c-form-step--item {
	margin-top: var(--base-line-height);
}

.c-form--element-fieldset div.c-form-step--item:first-of-type {
	margin-top: 0;
}

/* use flexbox for checkbox/radiobutton items instead of "display: inline-block;"
   (which can cause spacing issues) in order to avoid too long label containers */
.c-form-step--item-checkbox,
.c-form-step--item-radio {
	display: flex;
	flex-wrap: wrap;
}

/* reduce/remove margin-top of checkbox/radiobutton items since space is needed by the
   checkbox/radiobutton elements themselves for accessibility reasons
   (see: https://bit.ly/2TLWygr) */
.c-form--element-fieldset-legend + .c-form-step--item-checkbox,
.c-form--element-fieldset-legend + .c-form-step--item-radio {
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-form-step--item-checkbox + .c-form-step--item-checkbox,
.c-form-step--item-radio + .c-form-step--item-radio {
	margin-top: 0;
}

/* because of the special structuring of the checkbox items, we need a different
   margin-top in case a checkbox item follows another error-stated item */
.c-form-step--item[data-form-validation-state="error"] + .c-form-step--item-checkbox {
	margin-top: calc(0.5 * var(--base-line-height));
}

/* unlike checkbox items, radiobutton items cannot follow other error-stated
   items since only the last radiobutton item is allowed to show an error message */
.c-form-step--item[data-form-validation-state="error"] + .c-form-step--item-radio {
	margin-top: 0;
}

/* equalize the checkbox/radiobutton element's padding-bottom to ensure proper
   spacing to the following form item */
.c-form-step--item-checkbox:last-child:not([data-form-validation-state="error"]),
.c-form-step--item-radio:last-child:not([data-form-validation-state="error"]) {
	margin-bottom: calc(-0.5 * var(--base-line-height));
}

.c-form-step--item-file {
	display: flex;
	flex-wrap: wrap;
}

/* INPUT (TEXT) + TEXTAREA */

.c-form--element-input {
	padding: 2.4rem 1.2rem 0.9rem;
}

.c-form--element-input,
.c-form--element-textarea {
	border: 0.1rem solid var(--color-gray-500);
}

.c-form--element-input,
.l-view input.c-form--element-input, /* required to ensure proper overwriting of l-view styles */
.c-form--element-textarea {
	border-radius: 0.4rem;
}

.c-form--element-textarea {
	height: 24.5rem;
	overflow-x: hidden;
	resize: none;
	appearance: none;
	padding: 2.4rem 1.2rem 0.9rem;
}

.c-form--element-input:hover,
.c-form--element-input:focus,
.c-form--element-textarea:hover,
.c-form--element-textarea:focus {
	border-color: var(--color-black-500);
}

.c-form--element-input:focus,
.c-form--element-textarea:focus {
	padding: 2.3rem 1.1rem 0.8rem;
	border-width: 0.2rem;
}

.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-input,
.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-textarea {
	padding-right: 3.5rem; /* default padding-right (1.2rem) + checkmark width (1.6rem) + small extra space (0.7rem) */
	background: var(--color-white-500) url(../assets/img/74a6644034224450036e.svg) right 1.2rem center no-repeat;
	background-size: 1.6rem 1.6rem;
}

.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-input:focus,
.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-textarea:focus {
	padding-right: 3.4rem; /* reduced padding-right (1.1rem) + checkmark width (1.6rem) + small extra space (0.7rem) */
	background-position: right 1.1rem bottom 1.1rem;
}

/* black border-color of :hover and :focus must be preferred over the success' green */
.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-input:not(:hover):not(:focus),
.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-textarea:not(:hover):not(:focus) {
	border-color: var(--color-green-600);
}

/* black border-color of :hover and :focus must be preferred over the error's red */
.c-form-step--item[data-form-validation-state="error"] .c-form--element-input:not(:hover):not(:focus),
.c-form-step--item[data-form-validation-state="error"] .c-form--element-textarea:not(:hover):not(:focus) {
	border-color: var(--color-red-400-3);
}

.c-form--element-input:disabled,
.c-form--element-textarea:disabled {
	opacity: 0.4;
	border: 0.1rem solid var(--color-gray-500); /* although disabled is set, pseudo-classes are still applied */
}

/* SELECT */
/* please note: the <select> element is considered impossible to style
   consistently cross-platform; however, some styles are workable
   (see: https://mzl.la/2F4PEe0) */

.c-form--element-select {
	appearance: none;
	padding: 1.7rem 3.9rem 1.6rem 1.2rem;
	background: var(--color-white-500) url(../assets/img/47cd1b3c5da8f5768ec8.svg) right 1.2rem center no-repeat;
	background-size: 2.1rem;
	border: 0.1rem solid var(--color-gray-500);
	border-radius: 0.4rem;
	cursor: pointer;
}

.left-aligned-grid .c-form--element-select {
	padding: 1.7rem 4.4rem 1.7rem 1.2rem;
}

/* avoid blue highlighting in Internet Explorer and Edge */
.c-form--element-select::-ms-value {
	background: var(--color-white-500);
	color: var(--color-black-400);
}

/* hide the expand icon in Internet Explorer and Edge */
.c-form--element-select::-ms-expand {
	display: none;
}

.c-form--element-select:hover,
html:not(.is-touch) .c-form--element-select:focus {
	border-color: var(--color-black-500);
	background: var(--color-white-500) url(../assets/img/47cd1b3c5da8f5768ec8.svg) right 1.2rem center no-repeat;
	background-size: 2.1rem;
}

html:not(.is-touch) .c-form--element-select:focus {
	padding: 1.6rem 3.8rem 1.5rem 1.1rem;
	background-position: right 1.1rem center;
	border-width: 0.2rem;
}

/* please note: because browsers often treat <option>s as replaced elements, the
   extent to which they can be styled with the :checked pseudo-class varies from
   browser to browser
   (see: https://mzl.la/2C9Nurt) */
.c-form--element-select option:checked {
	background-color: var(--color-gray-200);
}

/* black border-color of :hover and :focus must be preferred over the success' green */
.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-select:not(:hover):not(:focus) {
	border-color: var(--color-green-600);
}

.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-select {
	background: var(--color-white-500) url(../assets/img/182cc7807c3af4840d10.svg) right 1.2rem center no-repeat;
	background-size: 2.1rem;
}

/* black border-color of :hover and :focus must be preferred over the error's red */
.c-form-step--item[data-form-validation-state="error"] .c-form--element-select:not(:hover):not(:focus) {
	border-color: var(--color-red-400-3);
}

.c-form-step--item[data-form-validation-state="error"] .c-form--element-select {
	color: var(--color-red-500);
}

/* do not group this ::-ms-value based selector with other valid selectors,
   otherwise some browsers will ignore everything (e.g. Chrome) */
.c-form-step--item[data-form-validation-state="error"] .c-form--element-select::-ms-value {
	color: var(--color-red-500);
}

.c-form-step--item[data-form-validation-state="error"] .c-form--element-select option {
	color: var(--color-black-400);
}

.c-form--element-select:disabled {
	opacity: 0.4;
	border: 0.1rem solid var(--color-gray-500); /* although disabled is set, pseudo-classes are still applied */
	cursor: default;
}

.c-form--element-select option:disabled {
	color: var(--color-black-opacity-45);
	background-color: var(--color-white-500);
}

/* INPUT (CHECKBOX) + INPUT (RADIO) */
/* please note: styling a checkbox or a radiobutton can be tricky; for example,
   the sizes of checkboxes and radiobuttons are not meant to be changed with
   their default designs, and browsers react very differently when you try
   (see: https://mzl.la/2T1rncv) */

.c-form--element-checkbox,
.c-form--element-checkbox:disabled,
.c-form--element-radio,
.c-form--element-radio:disabled {
	position: absolute;
	width: 0;
	height: 0;
	border: 0;
	opacity: 0;
}

.left-aligned-grid .c-form--element-checkbox ~ .c-form--element-label,
.left-aligned-grid .c-form--element-radio ~ .c-form--element-label {
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-form--element-label-checkbox::before,
.c-form--element-label-checkbox::after,
.c-form--element-label-radio::before,
.c-form--element-label-radio::after {
	content: "";
	position: absolute;
	top: 0.7rem;
	left: 0;
	width: 2.4rem;
	height: 2.4rem;
	border: 0.1rem solid var(--color-gray-500);
	border-radius: 0.4rem;
	box-sizing: border-box; /* actually automatically applied to all elements but not to pseudo-elements */
}

.c-form--element-label-checkbox::after,
.c-form--element-label-radio::after {
	border: 0;
	visibility: hidden;
}

.c-form--element-label-checkbox::after {
	background: url(../assets/img/2a2636ff91f124489438.svg) center center no-repeat;
	background-size: 1.6rem 1.6rem;
}

.c-form--element-label-radio::before {
	top: 0.9rem;
	width: 2rem;
	height: 2rem;
	border-radius: 1rem;
}

.c-form--element-label-radio::after {
	top: 1.5rem;
	left: 0.6rem;
	width: 0.8rem;
	height: 0.8rem;
	background-color: var(--color-gray-700);
	border-radius: 0.4rem;
}

.c-form--element-checkbox:checked ~ .c-form--element-label-checkbox::after,
.c-form--element-radio:checked ~ .c-form--element-label-radio::after {
	visibility: visible;
}

/* actually we are hovering over the <label>s but these are forwarding it to the <input>s */
.c-form--element-checkbox:hover ~ .c-form--element-label-checkbox::before,
.c-form--element-checkbox:focus ~ .c-form--element-label-checkbox::before,
.c-form--element-radio:hover ~ .c-form--element-label-radio::before,
.c-form--element-radio:focus ~ .c-form--element-label-radio::before {
	border-color: var(--color-black-500);
}

.c-form--element-checkbox:focus ~ .c-form--element-label-checkbox::before,
.c-form--element-radio:focus ~ .c-form--element-label-radio::before {
	border-width: 0.2rem;
}

/* black border-color of :hover and :focus must be preferred over the success' green */
.c-form-step--item[data-form-validation-state="ok"] .c-form--element-checkbox:checked:not(:hover):not(:focus) ~ .c-form--element-label-checkbox::before,
.c-form-step--item[data-form-validation-state="ok"] .c-form--element-radio:enabled:not(:hover):not(:focus) ~ .c-form--element-label-radio::before {
	border-color: var(--color-green-600);
}

.c-form-step--item[data-form-validation-state="ok"] .c-form--element-checkbox:checked ~ .c-form--element-label-checkbox::after {
	background: url(../assets/img/2a2636ff91f124489438.svg) center center no-repeat;
	background-size: 1.6rem 1.6rem;
}

.c-form-step--item[data-form-validation-state="ok"] .c-form--element-radio:checked ~ .c-form--element-label-radio::after {
	background-color: var(--color-green-600);
}

/* black border-color of :hover and :focus must be preferred over the error's red */
.c-form-step--item[data-form-validation-state="error"] .c-form--element-checkbox:not(:hover):not(:focus) ~ .c-form--element-label-checkbox::before,
.c-form-step--item[data-form-validation-state="error"] .c-form--element-radio:enabled:not(:hover):not(:focus) ~ .c-form--element-label-radio::before {
	border-color: var(--color-red-400-3);
}

.c-form--element-checkbox:disabled ~ .c-form--element-label-checkbox::before,
.c-form--element-checkbox:disabled ~ .c-form--element-label-checkbox::after,
.c-form--element-radio:disabled ~ .c-form--element-label-radio::before,
.c-form--element-radio:disabled ~ .c-form--element-label-radio::after {
	opacity: 0.4;
}

.c-form--element-checkbox:disabled ~ .c-form--element-label-checkbox::before,
.c-form--element-radio:disabled ~ .c-form--element-label-radio::before {
	border: 0.1rem solid var(--color-gray-500); /* although disabled is set, pseudo-classes are still applied */
}

/* INPUT (FILE) */

.c-form--element-file {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	font-size: 0; /* avoid blinking cursor in Internet Explorer, see: https://stackoverflow.com/a/36693924 */
	cursor: pointer;
}

.c-form--element-file-fake-text,
.c-form--element-file-fake-button {
	pointer-events: none;
}

.left-aligned-grid .c-form--element-file-fake-button {
	font-size: var(--font-size-2);
	line-height: 1.6rem;
}

.c-form--element-file-fake-text {
	flex: 1 0 33%; /* this value needs to be synchronized with the max-width of .c-form--element-file-fake-button */
	padding: 1.7rem 1.2rem 1.6rem;
	border-right: 0;
}

.c-form--element-file-fake-text,
.l-view input.c-form--element-file-fake-text /* required to ensure proper overwriting of l-view styles */ {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* we need the placeholder as fake label since the input's value can also be
   removed again by the browser in case the OS file select window is closed
   without a file selection */
.c-form--element-file-fake-text::placeholder {
	color: var(--color-black-500);
}

.c-form--element-file-fake-button {
	flex: 0 0 auto;
	margin-bottom: 0;
	padding: 0 1.2rem;
	width: auto;
	min-width: 11.9rem;
	max-width: 67%; /* this value needs to be synchronized with the flex-basis of .c-form--element-file-fake-text */
	max-height: 5.6rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	transition: none;
}

.c-form--element-file:hover ~ .c-form--element-file-fake-text,
.c-form--element-file:focus ~ .c-form--element-file-fake-text {
	border-color: var(--color-black-500);
}

.c-form--element-file:focus ~ .c-form--element-file-fake-text {
	padding: 1.6rem 1.2rem 1.5rem 1.1rem;
	border-width: 0.2rem 0 0.2rem 0.2rem;
}

.c-form--element-file:enabled:hover ~ .c-form--element-file-fake-button {
	border-color: var(--color-red-400);
	color: var(--color-red-400);
}

.c-form--element-file:focus ~ .c-form--element-file-fake-button {
	border-width: 0.2rem 0.2rem 0.2rem 0.1rem;
	padding-right: 1.1rem;
}

.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-file ~ .c-form--element-file-fake-text {
	padding-right: 1.2rem;
	background: var(--color-white-500);
}

/* black border-color of :hover and :focus must be preferred over the success' green */
.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-file:not(:hover):not(:focus) ~ .c-form--element-file-fake-text {
	border-color: var(--color-green-600);
}

.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-file:hover ~ .c-form--element-file-fake-text,
.c-form-step--item[data-form-validation-state="ok"][data-form-value-state="set"] .c-form--element-file:focus ~ .c-form--element-file-fake-text {
	border-color: var(--color-black-500);
}

/* black border-color of :hover and :focus must be preferred over the error's red */
.c-form-step--item[data-form-validation-state="error"] .c-form--element-file:not(:hover):not(:focus) ~ .c-form--element-file-fake-text {
	border-color: var(--color-red-400-3);
}

.c-form-step--item[data-form-validation-state="error"] .c-form--element-file:hover ~ .c-form--element-file-fake-text,
.c-form-step--item[data-form-validation-state="error"] .c-form--element-file:focus ~ .c-form--element-file-fake-text {
	border-color: var(--color-black-500);
}

.c-form-step--item[data-form-validation-state="error"] .c-form--element-file ~ .c-form--element-file-fake-text::placeholder {
	color: var(--color-red-500);
}

.c-form--element-file:disabled ~ .c-form--element-file-fake-text {
	border: 0.1rem solid var(--color-gray-500); /* although disabled is set, pseudo-classes are still applied */
	border-right: 0;
}

.c-form--element-file:disabled ~ .c-form--element-file-fake-button {
	opacity: 0.4;
}

/* LABEL */

.c-form--element-label {
	position: absolute;
	top: 0.1rem;
	left: 1.2rem;
	padding: 1.7rem 0 0;
	width: calc(100% - 2.4rem);
	white-space: nowrap;
	color: var(--color-gray-600);
	background-color: transparent;
	overflow: hidden;
}

.left-aligned-grid .c-form--element-label {
	font-size: var(--font-size-2);
	line-height: 2rem;
	top: 0.3rem;
}

.c-form--element-input ~ .c-form--element-label,
.c-form--element-textarea ~ .c-form--element-label {
	cursor: text;
	pointer-events: none; /* otherwise we will get wrong label transitions on devices without touch events */
}

.c-form--element-input:focus ~ .c-form--element-label,
.c-form--element-textarea:focus ~ .c-form--element-label,
[data-form-value-state="set"] .c-form--element-input ~ .c-form--element-label,
[data-form-value-state="set"] .c-form--element-textarea ~ .c-form--element-label,
.no-js .c-form--element-input ~ .c-form--element-label,
.no-js .c-form--element-textarea ~ .c-form--element-label {
	padding: 1rem 0.1rem 0;
	font-size: var(--font-size-input-field-label);
	line-height: var(--base-line-height);
	background-color: transparent;
}

.left-aligned-grid .c-form--element-input:focus ~ .c-form--element-label,
.left-aligned-grid .c-form--element-textarea:focus ~ .c-form--element-label,
.left-aligned-grid [data-form-value-state="set"] .c-form--element-input ~ .c-form--element-label,
.left-aligned-grid [data-form-value-state="set"] .c-form--element-textarea ~ .c-form--element-label,
.left-aligned-grid .no-js .c-form--element-input ~ .c-form--element-label,
.left-aligned-grid .no-js .c-form--element-textarea ~ .c-form--element-label {
	line-height: 1.2rem;
}

.c-form--element-input:focus ~ .c-form--element-label,
.c-form--element-textarea:focus ~ .c-form--element-label,
.no-js .c-form--element-input ~ .c-form--element-label,
.no-js .c-form--element-textarea ~ .c-form--element-label {
	top: 0.2rem;
	padding-top: 0.9rem;
}

.left-aligned-grid .c-form--element-input:focus ~ .c-form--element-label,
.left-aligned-grid .c-form--element-textarea:focus ~ .c-form--element-label,
.left-aligned-grid .no-js .c-form--element-input ~ .c-form--element-label,
.left-aligned-grid .no-js .c-form--element-textarea ~ .c-form--element-label {
	top: 0.4rem;
}

.left-aligned-grid .c-form--element-checkbox:focus ~ .c-form--element-label,
.left-aligned-grid .c-form--element-radio:focus ~ .c-form--element-label {
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
	top: 0;
}

/* make sure to apply transitions only to inputs and textareas with unset value
   to avoid visual issues */
[data-form-value-state="unset"] .c-form--element-input ~ .c-form--element-label,
[data-form-value-state="unset"] .c-form--element-textarea ~ .c-form--element-label {
	transition: top 200ms ease-out, padding 200ms ease-out, padding-top 200ms ease-out, font-size 200ms ease-out, line-height 200ms ease-out, background-color 1ms;
}

[data-form-value-state="unset"] .c-form--element-input:focus ~ .c-form--element-label,
[data-form-value-state="unset"] .c-form--element-textarea:focus ~ .c-form--element-label {
	transition: top 200ms ease-out, padding 200ms ease-out, padding-top 200ms ease-out, font-size 200ms ease-out, line-height 200ms ease-out, background-color 1ms 200ms;
}

.no-js [data-form-value-state="unset"] .c-form--element-input ~ .c-form--element-label,
.no-js [data-form-value-state="unset"] .c-form--element-textarea ~ .c-form--element-label {
	transition: none;
}

.c-form--element-checkbox ~ .c-form--element-label,
.c-form--element-checkbox:focus ~ .c-form--element-label,
.c-form--element-radio ~ .c-form--element-label,
.c-form--element-radio:focus ~ .c-form--element-label,
.no-js .c-form--element-checkbox ~ .c-form--element-label,
.no-js .c-form--element-radio ~ .c-form--element-label {
	position: relative;
	top: 0;
	left: 0;
	margin-right: auto; /* play safe and force flex-wrap after the label's end */
	padding: 1rem 0 0.9rem 4.5rem;
	width: auto;
	font-size: var(--font-size-standard);
	white-space: normal;
	color: var(--color-black-400);
	line-height: 1.9rem;
	background-color: transparent;
	cursor: pointer;
	pointer-events: auto;
	user-select: none; /* avoid selection of label text on quickly repeating checkbox/radiobutton clicks/touches */
}

.c-form-step--item[data-form-validation-state="error"] .c-form--element-label,
.c-form-step--item[data-form-validation-state="error"] .c-form--element-checkbox ~ .c-form--element-label,
.c-form-step--item[data-form-validation-state="error"] .c-form--element-radio ~ .c-form--element-label {
	color: var(--color-red-500);
}

.c-form-step--item[data-form-validation-state="error"] .c-form--element-radio:disabled ~ .c-form--element-label {
	color: var(--color-black-400);
}

:disabled ~ .c-form--element-label {
	opacity: 0.4;
	user-select: none;
	cursor: default;
}

/* ERROR MESSAGE */

.c-form-step--error-message {
	display: none;
	margin-top: calc(0.5 * var(--base-line-height));
	padding: 0.1rem 0 0 2.3rem;
	font-size: var(--font-size-text-small);
	line-height: 1.6rem;
	color: var(--color-red-500);
	background: var(--color-white-500) url(../assets/img/3396919dcfc228f1196e.svg) left top 0.1rem no-repeat;
	background-size: 1.6rem 1.6rem;
}

.left-aligned-grid .c-form-step--error-message {
	font-size: var(--font-size-text-small);
	line-height: 1.8rem;
}

.c-form--element-checkbox ~ .c-form-step--error-message,
.c-form--element-radio ~ .c-form-step--error-message {
	margin-top: 0;
	padding-left: 6.8rem;
	background-position-x: 4.5rem;
}

/* additional margin-top to make clear that the error message does not only
   relate to the previous radiobutton element but to the whole radiobutton group */
.c-form--element-radio ~ .c-form-step--error-message {
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-form-step--item[data-form-validation-state="error"] .c-form-step--error-message {
	display: block;
}

/* for the sake of simplicity and consistency all radiobutton elements have a
   separate error message but since the whole radiobutton group is validated at
   once, only the very last error message is allowed to be displayed */
.c-form-step--item-radio:not(:last-child) .c-form-step--error-message {
	display: none;
}

/* BUTTONS */

.c-form-step--item .base-button {
	margin-bottom: 0;
}

/* EDIT MODE */

.is-editmode .c-form-steps {
	max-width: calc(40 * var(--base-line-height));
	margin: 0 auto;
}

.is-editmode .c-form-steps.is-form-steps .c-form-step--section {
	display: block;
	opacity: 1;
}

/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/forms/form-datepicker.css ***!
  \********************************************************************************************************************************************************************************************************/
.c-form--element-datepicker .is-today .pika-button {
	color: var(--color-red-500);
}

.c-form--element-datepicker .pika-button:hover {
	background: var(--color-yellow-500);
}

.c-form--element-datepicker .pika-table abbr {
	border: none;
	cursor: help;
}

.c-form--element-datepicker-wrap {
	position: relative;
}

.c-form--element-datepicker-field {
	padding: 0 var(--base-line-height);
	height: calc(3 * var(--base-line-height));
}

.c-form--element-datepicker-icon {
	font-size: var(--font-size-6);
	position: absolute;
	right: calc(0.5 * var(--base-line-height));
	top: 1rem;
}

/* rtl:raw:
	.c-form--element-datepicker .pika-next {
		float: left;
		transform: scaleX(-1);
	}

	.c-form--element-datepicker .pika-prev {
		float: right;
		transform: scaleX(-1);
	}
*/

/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/forms/form-package-size.css ***!
  \**********************************************************************************************************************************************************************************************************/
.c-form-step--intro-small-print {
	margin-bottom: calc(1.5 * var(--base-line-height));
	font-size: var(--font-size-text-small);
	line-height: 1.6rem;
	color: var(--color-gray-600);
}

.c-form-step--item-package-size-add {
	margin-top: calc(1.5 * var(--base-line-height));
}

.no-js .c-form-step--item-package-size-add {
	display: none;
}

.c-form-step--item-package-size-add span {
	display: inline-flex;
	text-align: right;
	font-weight: bold;
	color: var(--color-red-500);
	cursor: pointer;
}

.c-form-step--item-package-size-add span:hover {
	color: var(--color-red-400);
}

.c-form-step--item-package-size-add span:focus {
	outline: 0.2rem solid var(--color-black-400);
}

.c-form-step--item-package-size-add span::before {
	order: 1;
	margin-left: 0.7rem;
	font-size: var(--font-size-0);
	float: right;
}

.c-form--element-fieldset-package-size:not(:first-child) {
	margin-top: calc(1.5 * var(--base-line-height));
}

.c-form-step--item-package-size-box-outer {
	position: relative;
	border: 0.1rem solid var(--color-gray-500);
	border-radius: 0.4rem;
}

.c-form-step--item-package-size-remove {
	display: none;
	text-align: right;
}

.c-form-step--item-package-size-remove span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0.2rem 0.85rem -0.45rem 0;
	width: 4rem;
	height: 4rem;
	font-size: var(--font-size-icon-close);
	color: var(--color-red-500);
	cursor: pointer;
}

.c-form-step--item-package-size-remove span:hover {
	color: var(--color-red-400);
}

.c-form-step--item-package-size-remove span::before {
	padding: 0 0.2rem;
}

.c-form-step--item-package-size-remove span:focus::before {
	outline: 0.2rem solid var(--color-black-400);
}

.c-form-step--item-package-size-box-outer .c-form--element-fieldset {
	margin-top: 0;
}

.c-form-step--item-package-size-box-outer .c-form--element-fieldset-container {
	padding: var(--base-line-height) calc(1.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
}

.c-form-step--item-package-size-box-outer .c-form--element-fieldset-container:not(:last-child) {
	border-bottom: 0.1rem solid var(--color-gray-500);
}

.c-form-step--item-package-size-wrapper:not(:first-child) {
	margin-top: calc(2.5 * var(--base-line-height));
}

.c-form--element-fieldset-legend + .c-form-step--item-package-size-wrapper {
	margin-top: calc(1.5 * var(--base-line-height));
}

.c-form-step--item-package-size-wrapper .c-form--element-fieldset-legend::before {
	font-size: var(--font-size-text-small);
	margin-right: 0.8rem;
}

.c-form-step--item-package-size-wrapper .c-form--element-fieldset-inner-container,
.c-form-step--item-package-size-wrapper .c-form-step--item {
	margin-top: 0;
}

.c-form-step--item-package-size-wrapper .c-form--element-fieldset-legend + .c-form--element-fieldset-inner-container-group,
.c-form-step--item-package-size-wrapper .c-form--element-fieldset-legend + .c-form--element-fieldset-inner-container {
	margin-top: 0.9rem;
}

.c-form-step--item-package-size-wrapper .c-form--element-dimensions-unit-container {
	margin-top: calc(2.5 * var(--base-line-height));
}

.c-form-step--item-package-size-wrapper .c-form--element-dimensions-x {
	display: flex;
	justify-content: center;
	align-items: center;
}

.c-form-step--item-package-size-wrapper .c-form--element-dimensions-x span {
	display: inline-flex;
	margin: 0.4rem 0.7rem;
}

.c-form-step--item-package-size-wrapper .c-form--element-dimensions-x .icon-cancel::before {
	font-size: 1.4rem;
	line-height: var(--base-line-height);
}

.c-form-step--item-package-size-wrapper .c-form--element-weight-container-group {
	width: 100%;
}

.c-form-step--item-package-size-wrapper .c-form--element-weight-container .c-form-step--item:not(:first-child) {
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-form-step--item-package-size-wrapper .c-form--element-weight-radio-container {
	margin-top: 1.9rem;
}

.c-form--element-fieldset-package-size[data-form-validation-state="error"] .c-form-step--error-message {
	display: block;
}

@media screen and (min-width: 666px) and (max-width: 767px), screen and (min-width: 768px), print {
	.c-form-step--item-package-size-wrapper .c-form--element-dimensions-container {
		display: flex;
	}

	.c-form-step--item-package-size-wrapper .c-form--element-dimensions-container .c-form-step--item {
		flex: 1 1 auto;
		width: calc(100% / 3 - 5.8rem / 3);
	}

	.c-form-step--item-package-size-wrapper .c-form--element-dimensions-container .c-form--element-dimensions-x {
		width: calc(2 * var(--base-line-height));
	}

	.c-form-step--item-package-size-wrapper .c-form--element-dimensions-unit-container {
		margin-top: calc(1.5 * var(--base-line-height));
	}

	.c-form-step--item-package-size-wrapper .c-form--element-weight-container {
		display: flex;
	}

	.c-form-step--item-package-size-wrapper .c-form--element-weight-container .c-form-step--item:first-child {
		flex: 1 1 auto;
	}

	.c-form-step--item-package-size-wrapper .c-form--element-weight-container .c-form-step--item:not(:first-child) {
		flex: 0 0 9rem;
		margin: 0 0 0 calc(0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-form-step--item-package-size-wrapper .c-form--element-dimensions-container-group {
		display: flex;
	}

	.c-form-step--item-package-size-wrapper .c-form--element-dimensions-container {
		flex: 1 1 auto;
	}

	.c-form-step--item-package-size-wrapper .c-form--element-dimensions-unit-container {
		flex: 0 0 13rem;
		margin: 0 0 0 calc(2.5 * var(--base-line-height));
	}

	.c-form-step--item-package-size-wrapper .c-form--element-weight-container-group {
		display: flex;
	}

	.c-form-step--item-package-size-wrapper .c-form--element-weight-container {
		width: 50%;
	}

	.c-form-step--item-package-size-wrapper .c-form--element-weight-radio-container {
		width: 50%;
		margin: -0.9rem 0 0 calc(2.5 * var(--base-line-height));
	}
}

/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/forms/form-success.css ***!
  \*****************************************************************************************************************************************************************************************************/
.c-form--success-headline h1 {
	text-align: center;
}

.c-page-headline.c-form--success-headline h1 {
	margin-bottom: 2.1rem;
}

.c-form--success-head {
	padding-bottom: 0.7rem;
	text-align: right;
	border-bottom: 0.3rem solid var(--color-green-500);
}

.c-form--success-head span {
	display: inline-flex;
	justify-content: flex-end;
	color: var(--color-green-500);
	font-weight: bold;
}

.c-form--success-head span::before {
	position: relative;
	left: -0.2rem;
	order: 1;
	margin-left: 0.6rem;
	font-size: var(--font-size-5);
	float: right;
}

.c-form--success-message {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-top: calc(4 * var(--base-line-height));
}

.c-form--success-message p {
	margin-bottom: 0;
	width: 75%;
	text-align: center;
}

.c-form--success-message-ruler {
	margin: calc(4 * var(--base-line-height)) 0;
	border-bottom: 0.1rem solid var(--color-gray-300);
	width: 50%;
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/viewportAnimation/viewportAnimation.css ***!
  \**********************************************************************************************************************************************************************************************************************/
:root {
	--cubic-bezier-quick: cubic-bezier(0.255, 0.095, 0.25, 1.005);
	--cubic-bezier-fly-in: cubic-bezier(0.19, 0.2, 0.13, 0.99);
}

@media screen and (min-width: 768px),print {
	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-100 {
		transition: opacity 100ms, transform 100ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-200 {
		transition: opacity 200ms, transform 200ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-300 {
		transition: opacity 300ms, transform 300ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-500 {
		transition: opacity 500ms var(--cubic-bezier-quick), transform 500ms var(--cubic-bezier-quick);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-800 {
		transition: opacity 800ms, transform 800ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-900 {
		transition: opacity 300ms var(--cubic-bezier-quick), transform 900ms var(--cubic-bezier-quick);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-1000 {
		transition: opacity 1000ms, transform 1000ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-1000-fly-in {
		transition: opacity 1000ms var(--cubic-bezier-fly-in), transform 1000ms var(--cubic-bezier-fly-in);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--duration-1200-fly-in-campaign {
		transition: opacity 1200ms var(--cubic-bezier-fly-in), transform 1200ms var(--cubic-bezier-fly-in);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--fade-in {
		opacity: 0;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--fade-in-stage-text {
		transition: opacity 1200ms ease-in;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--offsety-100 {
		transform: translateY(10rem);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--offsety-150 {
		transform: translateY(15rem);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--offsety-200 {
		transform: translateY(20rem);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--offsety-250 {
		transform: translateY(25rem);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--offsetx-500 {
		transform: translateX(50rem);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--scale-110 {
		transform: scale(1.1);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--scale-120 {
		transform: scale(1.2);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation--active.animation--scale-130 {
		transform: scale(1.3);
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-100 {
		transition-delay: 100ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-150 {
		transition-delay: 150ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-200 {
		transition-delay: 200ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-250 {
		transition-delay: 250ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-300 {
		transition-delay: 300ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-350 {
		transition-delay: 350ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-400 {
		transition-delay: 400ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-500 {
		transition-delay: 500ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-600 {
		transition-delay: 600ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-900 {
		transition-delay: 900ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-1000 {
		transition-delay: 1000ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-1100 {
		transition-delay: 1100ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-1300 {
		transition-delay: 1300ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) .c-viewport-animation.animation--delay-1500 {
		transition-delay: 1500ms;
	}
}

/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/print/print.css ***!
  \**********************************************************************************************************************************************************************************************/
@media print {

	/* global styles */
	body {
		width: 102.4rem;
		max-width: 102.4rem;
		min-width: 102.4rem;
	}

	header {
		height: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	.l-view {
		padding-top: 0;
	}

	.l-view.has-no-stage {
		padding-top: 0;
	}

	.l-header {
		padding: 0;
		position: relative !important; /* stylelint-disable-line declaration-no-important */
	}

	.c-nav,
	.is-fixed .l-header,
	.is-fixed .c-nav {
		position: absolute;
		height: calc(6 * var(--base-line-height)) !important; /* stylelint-disable-line declaration-no-important */
		-webkit-print-color-adjust: exact; /* stylelint-disable-line property-no-vendor-prefix */
		top: 0;
	}

	.c-nav--logo img {
		width: 17.3rem !important; /* stylelint-disable-line declaration-no-important */
	}

	.is-fixed .l-header {
		animation: none;
	}

	.c-breadcrumb,
	.c-nav-secondary,
	.is-fixed .c-nav-secondary,
	.c-cookie-disclaimer,
	.c-global-newsflash--wrapper,
	.nav-footer,
	.c-footer,
	.c-nav-primary--meta {
		display: none !important; /* stylelint-disable-line declaration-no-important */
	}
}

/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/global/_variables.css ***!
  \****************************************************************************************************************************************************************************************************/
:root {

	/* colors */
	--color-black-300: #333333;
	--color-black-400: #191919;
	--color-black-500: #000000;
	--color-black-opacity-05: rgba(0, 0, 0, 0.05);
	--color-black-opacity-08: rgba(0, 0, 0, 0.08);
	--color-black-opacity-10: rgba(0, 0, 0, 0.1);
	--color-black-opacity-20: rgba(0, 0, 0, 0.2);
	--color-black-opacity-30: rgba(0, 0, 0, 0.3);
	--color-black-opacity-40: rgba(0, 0, 0, 0.4);
	--color-black-opacity-45: rgba(0, 0, 0, 0.45);
	--color-black-opacity-60: rgba(0, 0, 0, 0.6);
	--color-black-opacity-80: rgba(0, 0, 0, 0.8);
	--color-black-opacity-90: rgba(0, 0, 0, 0.9);
	--color-white-500: #ffffff;
	--color-white-opacity-20: rgba(255, 255, 255, 0.2);
	--color-white-opacity-40: rgba(255, 255, 255, 0.4);
	--color-white-opacity-45: rgba(255, 255, 255, 0.45);
	--color-white-opacity-60: rgba(255, 255, 255, 0.6);
	--color-white-opacity-80: rgba(255, 255, 255, 0.8);
	--color-gray-50: #f2f2f2;
	--color-gray-100: #ebebeb;
	--color-gray-200: #e5e5e5;
	--color-gray-300: #cccccc;
	--color-gray-400: #b2b2b2;
	--color-gray-500: #8c8c8c;
	--color-gray-600: #666666;
	--color-gray-700: #333333;
	--color-gray-opacity-05: rgba(0, 0, 0, 0.05);
	--color-gray-opacity-08: rgba(0, 0, 0, 0.08);
	--color-gray-opacity-10: rgba(0, 0, 0, 0.1);
	--color-gray-opacity-20: rgba(0, 0, 0, 0.2);
	--color-gray-opacity-30: rgba(0, 0, 0, 0.3);
	--color-gray-opacity-45: rgba(0, 0, 0, 0.45);
	--color-gray-opacity-60: rgba(0, 0, 0, 0.6);
	--color-gray-opacity-80: rgba(0, 0, 0, 0.8);
	--color-green-500: #76bd22;
	--color-green-550: #67a31d;
	--color-green-600: #007c39;
	--color-red-400: #eb131e;
	--color-red-500: #d40511;
	--color-red-600: #9a0000;
	--color-yellow-300: #fff0b2;
	--color-yellow-400: #ffde59;
	--color-yellow-500: #ffcc00;
	--color-yellow-600: #e37729;
	--color-yellow-opacity-50: rgba(255, 204, 0, 0.5);
	--color-blue-400: #007acc;
	--color-blue-500: #0098ff;

	/* overlay colors */

	--overlay-dark-20: rgba(0, 0, 0, 0.2);
	--overlay-dark-40: rgba(0, 0, 0, 0.4);
	--overlay-dark-50: rgba(0, 0, 0, 0.5);
	--overlay-light-20: rgba(255, 255, 255, 0.2);
	--overlay-light-40: rgba(255, 255, 255, 0.4);
	--overlay-yellow-90: rgba(255, 204, 0, 0.9);

	/* linear gradients */

	--linear-gradient-yellow-to-bottom: linear-gradient(to bottom, #ffcc00 0%, #ffcc00 30%, #ffe57f 79%, #fff0b2 100%);
	--linear-gradient-yellow-to-right: linear-gradient(to right, #ffcc00 0%, #ffcc00 48%, #ffe57f 70%, #fff0b2 100%);

	/* rtl:raw:
	--linear-gradient-yellow-to-right: linear-gradient(to left, #ffcc00 0%, #ffcc00 48%, #ffe57f 70%, #fff0b2 100%);
	*/

	--linear-gradient-campaign-yellow-to-right: linear-gradient(90deg, rgba(255, 204, 0, 1) 0, rgba(255, 204, 0, 1) 12.8rem, rgba(255, 204, 0, 0) 75%);
	--linear-gradient-campaign-yellow-to-right-body-background: linear-gradient(90deg, #ffcc00 0%, #ffcc00 30%, #ffe57f 79%, #fff0b2 100%);
	--linear-gradient-gray-to-top: linear-gradient(to top, rgba(25, 25, 25, 0.7), rgba(25, 25, 25, 0));

	/* shadows */

	/* default shadows (small = normal, medium = :hover, large = :focus) */
	--shadow-small: 0 0.1rem 0.4rem 0 rgba(50, 50, 50, 0.5);
	--shadow-medium: 0 0.2rem 0.7rem 0.1rem rgba(94, 94, 94, 0.5);
	--shadow-large: 0 0.6rem 1.2rem 0.1rem rgba(80, 80, 80, 0.7);

	/* special shadows (based on CSB/spotlight) */
	--shadow-blurry: 0 0.4rem 3.2rem 0 rgba(0, 0, 0, 0.07), 0 0 0.2rem 0 rgba(0, 0, 0, 0.1);
	--shadow-float-effect: 0 6rem 3rem -3.5rem rgba(0, 0, 0, 0.16), 0 1rem 1rem 0 rgba(0, 0, 0, 0.1);

	/* font sizes */

	--base-font-size: 0.625rem;
	--body-font-size: 1.5rem;
	--body-font-size-c20: 1.6rem;
	--base-line-height: 1.4rem;
	--base-line-height-c20: 2.5rem;
	--font-size-input-field-label: 1.1rem;
	--font-size-standard: 1.5rem;
	--font-size-text-small: 1.4rem;
	--font-size-text-large: 1.8rem;
	--font-size-text-condensed: 2.2rem;
	--font-size-text-largecondensed: 2.6rem;
	--font-size-button: 1.5rem;
	--font-size-input-field: 1.5rem;
	--font-size-h5: 1.8rem;
	--font-size-h4: 2.2rem;
	--font-size-quote-mobile: 2.1rem;
	--font-size-quote-desktop: 2.5rem;
	--font-size-h3-mobile: 2.2rem;
	--font-size-h3-tablet: 3.1rem;
	--font-size-h2-mobile-small: 2.2rem;
	--font-size-h2-mobile-medium: 2.9rem;
	--font-size-h2-mobile-large: 3.6rem;
	--font-size-h1-mobile-small: 2.8rem;
	--font-size-h1-mobile-medium: 3.5rem;
	--font-size-h1-mobile-large: 4.2rem;
	--font-size-h1-desktop: 5.1rem;
	--font-size-icons-standard: 1.6rem;
	--font-size-icons-gnf: 1.3rem;
	--font-size-icon-close: 1.7rem;
	--font-size-icon-smart-grid-dropdown: 2rem;
	--font-size-icon-smart-grid-dropdown-small: 1.2rem;
	--font-size-icon-smart-grid-remove-small: 1rem;
	--font-size-icon-marketing-stage-link-plus: 1.1rem;
	--font-size-icon-plus: 1.2rem;
	--font-size-icon-truck-fqt: 2.1rem;
	--font-size-0: 1.2rem;
	--font-size-1: 1.4rem;
	--font-size-2: 1.6rem;
	--font-size-3: 2rem;
	--font-size-4: 2.1rem;
	--font-size-5: 2.5rem;
	--font-size-6: 2.7rem;
	--font-size-7: 3.1rem;
	--font-size-8: 3.3rem;
	--font-size-9: 3.9rem;
	--font-size-campaign-level3-mobile: 2.8rem;
	--font-size-campaign-level3-desktop-small: 3.2rem;
	--font-size-campaign-level3-desktop-large: 3.6rem;
	--font-size-campaign-level2-mobile: 2.8rem;
	--font-size-campaign-level2-tablet: 3.6rem;
	--font-size-campaign-level2-desktop-small: 4.2rem;
	--font-size-campaign-level2-desktop-large: 5.1rem;
	--font-size-campaign-level1-mobile: 3.6rem;
	--font-size-campaign-level1-tablet: 4.2rem;
	--font-size-campaign-level1-desktop-small: 5.1rem;
	--font-size-campaign-level1-desktop-large: 7rem;

	/* grid */

	--grid-units: 32;
	--grid-units-full: 12;
	--grid-gutter: 1%;
	--grid-col-gap: 2.1rem;
	--grid-col-gap-11: calc(11 * var(--grid-col-gap));
	--grid-col: calc((100% - var(--grid-col-gap-11)) / 12);
	--grid-cols-12: calc(12 * var(--grid-col) + 11 * var(--grid-col-gap));
	--grid-cols-11: calc(11 * var(--grid-col) + 10 * var(--grid-col-gap));
	--grid-cols-10: calc(10 * var(--grid-col) + 9 * var(--grid-col-gap));
	--grid-cols-9: calc(9 * var(--grid-col) + 8 * var(--grid-col-gap));
	--grid-cols-8: calc(8 * var(--grid-col) + 7 * var(--grid-col-gap));
	--grid-cols-7: calc(7 * var(--grid-col) + 6 * var(--grid-col-gap));
	--grid-cols-6: calc(6 * var(--grid-col) + 5 * var(--grid-col-gap));
	--grid-cols-5: calc(5 * var(--grid-col) + 4 * var(--grid-col-gap));
	--grid-cols-4: calc(4 * var(--grid-col) + 3 * var(--grid-col-gap));
	--grid-cols-3: calc(3 * var(--grid-col) + 2 * var(--grid-col-gap));
	--grid-cols-2: calc(2 * var(--grid-col) + 1 * var(--grid-col-gap));
	--grid-cols-1: calc(var(--grid-col));

	/* page */

	--width-page-fullwidth: 192rem;
	--width-page-max: 136.5rem;
	--width-page-max-nopadding: 119.7rem;
	--width-page-max-nopadding-small: 79.1rem;
	--width-page-max-nopadding-small-c20: 89.25rem; /* content 2.0 */
	--width-page-min: 32rem;

	/* component padding */

	--component-wide-padding-s: calc(1.5 * var(--base-line-height));
	--component-wide-padding-m: calc(3 * var(--base-line-height));
	--component-wide-padding-l: calc(6 * var(--base-line-height));
	--component-page-max-padding: calc((100% - var(--width-page-max-nopadding)) / 2);
	--component-page-max-padding-small: calc((100% - var(--width-page-max-nopadding-small)) / 2);

	/* z-indexes */
	--header-z-index: 1002; /* please note: until further refactoring was done, this value must be exactly 1002 to avoid several side effects */
}

/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/clientlib-all/css/global/_icons.css ***!
  \************************************************************************************************************************************************************************************************/
:root {
	--icon-anchor-arrow-legacy: "\e600";
	--icon-chevron-back-legacy: "\e601";
	--icon-chevron-first-legacy: "\e602";
	--icon-chevron-forward-legacy: "\e603";
	--icon-chevron-last-legacy: "\e604";
	--icon-close-bold-legacy: "\e605";
	--icon-dimensions-legacy: "\e606";
	--icon-doublecheck-legacy: "\e607";
	--icon-information-outline-legacy: "\e608";
	--icon-parcel-legacy: "\e609";
	--icon-pieces-legacy: "\e60a";
	--icon-play-circle-legacy: "\e60b";
	--icon-rss-legacy: "\e60c";
	--icon-share-web-legacy: "\e60d";
	--icon-triangle-back-legacy: "\e60e";
	--icon-triangle-down-legacy: "\e60f";
	--icon-triangle-forward-legacy: "\e610";
	--icon-triangle-up-legacy: "\e611";
	--icon-triangle-up-pointy-legacy: "\e612";
	--icon-tt-approval-legacy: "\e613";
	--icon-vimeo-legacy: "\e614";
	--icon-weibo-legacy: "\e615";
	--icon-weight-legacy: "\e616";
	--icon-youtube-legacy: "\e617";
	--icon-2-man-handling: "\e618";
	--icon-added-value: "\e619";
	--icon-airport: "\e61a";
	--icon-arrow-back: "\e61b";
	--icon-arrow-down: "\e61c";
	--icon-arrow-forward: "\e61d";
	--icon-arrow-up: "\e61e";
	--icon-auto-mobility: "\e61f";
	--icon-automotive: "\e620";
	--icon-avoid-crowds: "\e621";
	--icon-balance-confirmation: "\e622";
	--icon-bookmark-off: "\e623";
	--icon-bookmark-on: "\e624";
	--icon-bulky-shipments: "\e625";
	--icon-calendar-friday-english: "\e626";
	--icon-calendar-friday-german: "\e627";
	--icon-calendar-monday-english: "\e628";
	--icon-calendar-monday-german: "\e629";
	--icon-calendar-saturday-english: "\e62a";
	--icon-calendar-saturday-german: "\e62b";
	--icon-calendar-thursday-english: "\e62c";
	--icon-calendar-thursday-german: "\e62d";
	--icon-calendar-today-english: "\e62e";
	--icon-calendar-today-german: "\e62f";
	--icon-calendar-tuesday-english: "\e630";
	--icon-calendar-tuesday-german: "\e631";
	--icon-calendar-wednsday-english: "\e632";
	--icon-calendar-wednsday-german: "\e633";
	--icon-calendar: "\e634";
	--icon-cancel-circle: "\e635";
	--icon-cancel: "\e636";
	--icon-carbon-dashboard: "\e637";
	--icon-cash-on-delivery: "\e638";
	--icon-cc-off: "\e639";
	--icon-cc-on: "\e63a";
	--icon-certificate: "\e63b";
	--icon-chatbot: "\e63c";
	--icon-checkmark-circle: "\e63d";
	--icon-checkmark: "\e63e";
	--icon-chemicals: "\e63f";
	--icon-chevron-back: "\e640";
	--icon-chevron-down: "\e641";
	--icon-chevron-forward: "\e642";
	--icon-chevron-up: "\e643";
	--icon-clearance-delay: "\e644";
	--icon-cloud-loading: "\e645";
	--icon-cloud-save: "\e646";
	--icon-cloud-success: "\e647";
	--icon-cloud: "\e648";
	--icon-coffee-break: "\e649";
	--icon-consumer: "\e64a";
	--icon-container: "\e64b";
	--icon-containership: "\e64c";
	--icon-content: "\e64d";
	--icon-control-tower: "\e64e";
	--icon-copy-to-clipboard: "\e64f";
	--icon-copy: "\e650";
	--icon-coronavirus: "\e651";
	--icon-crop: "\e652";
	--icon-current-location: "\e653";
	--icon-custom-service: "\e654";
	--icon-delivered: "\e655";
	--icon-delivery-van: "\e656";
	--icon-delivery-without-signature: "\e657";
	--icon-departed: "\e658";
	--icon-disinfection: "\e659";
	--icon-document: "\e65a";
	--icon-doorstep-delivery: "\e65b";
	--icon-download-file: "\e65c";
	--icon-download: "\e65d";
	--icon-drag-corner: "\e65e";
	--icon-drag-handle: "\e65f";
	--icon-e-trike: "\e660";
	--icon-edit: "\e661";
	--icon-education: "\e662";
	--icon-email: "\e663";
	--icon-emerging-market-solutions: "\e664";
	--icon-energy: "\e665";
	--icon-engineering: "\e666";
	--icon-envelopes: "\e667";
	--icon-envirosolutions: "\e668";
	--icon-exception: "\e669";
	--icon-express-product: "\e66a";
	--icon-facebook: "\e66b";
	--icon-fast-payment: "\e66c";
	--icon-feature-detection: "\e66d";
	--icon-file-jpg: "\e66e";
	--icon-file-pdf: "\e66f";
	--icon-file-png: "\e670";
	--icon-filter-options: "\e671";
	--icon-filter: "\e672";
	--icon-finance: "\e673";
	--icon-financial-services: "\e674";
	--icon-flagship-store: "\e675";
	--icon-flexible-parcel-delivery: "\e676";
	--icon-forklift-supply-chain: "\e677";
	--icon-frontline: "\e678";
	--icon-giftbox: "\e679";
	--icon-global-forwarding-freight: "\e67a";
	--icon-globe: "\e67b";
	--icon-glossary: "\e67c";
	--icon-gogreen: "\e67d";
	--icon-grid-view: "\e67e";
	--icon-hand-truck: "\e67f";
	--icon-handicapped: "\e680";
	--icon-heart-off: "\e681";
	--icon-heart-on: "\e682";
	--icon-helmet: "\e683";
	--icon-helpline: "\e684";
	--icon-home-and-work: "\e685";
	--icon-home-delivery: "\e686";
	--icon-home: "\e687";
	--icon-hospital: "\e688";
	--icon-hr: "\e689";
	--icon-idea: "\e68a";
	--icon-identity-document-including-age: "\e68b";
	--icon-identity-document: "\e68c";
	--icon-image: "\e68d";
	--icon-incorrect-payment: "\e68e";
	--icon-information: "\e68f";
	--icon-instagram: "\e690";
	--icon-insurance-up-to-25k-euro: "\e691";
	--icon-integrated-solutions: "\e692";
	--icon-intransit: "\e693";
	--icon-landscape-format: "\e694";
	--icon-laptop: "\e695";
	--icon-large-envelope: "\e696";
	--icon-layout: "\e697";
	--icon-lighthouse: "\e698";
	--icon-limited-quantities: "\e699";
	--icon-linkedin: "\e69a";
	--icon-list: "\e69b";
	--icon-live-tracking: "\e69c";
	--icon-load-profile-optimization: "\e69d";
	--icon-location-pin: "\e69e";
	--icon-location: "\e69f";
	--icon-logout: "\e6a0";
	--icon-lsh: "\e6a1";
	--icon-luggage: "\e6a2";
	--icon-lunch-break: "\e6a3";
	--icon-mail: "\e6a4";
	--icon-management-services: "\e6a5";
	--icon-management: "\e6a6";
	--icon-manifest-received: "\e6a7";
	--icon-medal-1: "\e6a8";
	--icon-medal-2: "\e6a9";
	--icon-medal-3: "\e6aa";
	--icon-meeting-point: "\e6ab";
	--icon-menu-burger: "\e6ac";
	--icon-middle-out: "\e6ad";
	--icon-minus-circle: "\e6ae";
	--icon-minus: "\e6af";
	--icon-miss-a-parcel: "\e6b0";
	--icon-mobile-off: "\e6b1";
	--icon-mobile-phone: "\e6b2";
	--icon-more-horizontal: "\e6b3";
	--icon-more-vertical: "\e6b4";
	--icon-mtan: "\e6b5";
	--icon-no-connection: "\e6b6";
	--icon-no-delivery-to-neighbour: "\e6b7";
	--icon-not-suitable-vaccination: "\e6b8";
	--icon-office-worker: "\e6b9";
	--icon-online-shopping: "\e6ba";
	--icon-open-in-new-window: "\e6bb";
	--icon-open-parcel: "\e6bc";
	--icon-other: "\e6bd";
	--icon-packstation-locker-lean: "\e6be";
	--icon-packstation-locker: "\e6bf";
	--icon-pallet: "\e6c0";
	--icon-paper-registration: "\e6c1";
	--icon-parcel-box: "\e6c2";
	--icon-parcel-butler: "\e6c3";
	--icon-parcel-handover: "\e6c4";
	--icon-parcel-notification: "\e6c5";
	--icon-parcel-stop: "\e6c6";
	--icon-parcel-tracking: "\e6c7";
	--icon-parcel: "\e6c8";
	--icon-parking: "\e6c9";
	--icon-partnership: "\e6ca";
	--icon-password-reset: "\e6cb";
	--icon-pause: "\e6cc";
	--icon-payment-advice: "\e6cd";
	--icon-phone-with-hand: "\e6ce";
	--icon-plane-air-freight: "\e6cf";
	--icon-plane-landing: "\e6d0";
	--icon-plane-take-off: "\e6d1";
	--icon-play: "\e6d2";
	--icon-please-contact: "\e6d3";
	--icon-plugins-shopsoftware: "\e6d4";
	--icon-plus-circle: "\e6d5";
	--icon-plus: "\e6d6";
	--icon-pod: "\e6d7";
	--icon-port-crane: "\e6d8";
	--icon-portrait-format: "\e6d9";
	--icon-post-and-parcel-germany: "\e6da";
	--icon-postage-calculator: "\e6db";
	--icon-power-plug: "\e6dc";
	--icon-preferred-neighbour: "\e6dd";
	--icon-primary-secondary-packaging: "\e6de";
	--icon-print: "\e6df";
	--icon-prio: "\e6e0";
	--icon-product-launches: "\e6e1";
	--icon-public-sector: "\e6e2";
	--icon-push-android: "\e6e3";
	--icon-push-ios: "\e6e4";
	--icon-q-and-a: "\e6e5";
	--icon-quarantine: "\e6e6";
	--icon-receipt: "\e6e7";
	--icon-receive-parcel: "\e6e8";
	--icon-received: "\e6e9";
	--icon-redirect-labeling: "\e6ea";
	--icon-redirect: "\e6eb";
	--icon-redo-arrow: "\e6ec";
	--icon-registration-digital: "\e6ed";
	--icon-reset-clear: "\e6ee";
	--icon-resize-larger: "\e6ef";
	--icon-resize-smaller: "\e6f0";
	--icon-responsibility: "\e6f1";
	--icon-retail-sector: "\e6f2";
	--icon-return-of-undeliverables: "\e6f3";
	--icon-return-solutions: "\e6f4";
	--icon-rolls-and-tubes: "\e6f5";
	--icon-safety-vest: "\e6f6";
	--icon-sameday: "\e6f7";
	--icon-saving-sets-percentage: "\e6f8";
	--icon-saving-sets: "\e6f9";
	--icon-scan-barcode: "\e6fa";
	--icon-scan-parcel: "\e6fb";
	--icon-search: "\e6fc";
	--icon-send-parcel: "\e6fd";
	--icon-send: "\e6fe";
	--icon-service-point: "\e6ff";
	--icon-settings: "\e700";
	--icon-share-android: "\e701";
	--icon-share-ios: "\e702";
	--icon-shop: "\e703";
	--icon-shopping-cart-ecommerce: "\e704";
	--icon-shopping-cart: "\e705";
	--icon-sms: "\e706";
	--icon-social-distancing: "\e707";
	--icon-solar-panel: "\e708";
	--icon-sort: "\e709";
	--icon-speech-bubble: "\e70a";
	--icon-ssl-encryption: "\e70b";
	--icon-star-off: "\e70c";
	--icon-star-on: "\e70d";
	--icon-store: "\e70e";
	--icon-supplier: "\e70f";
	--icon-swap-arrows: "\e710";
	--icon-technology: "\e711";
	--icon-temperature-control: "\e712";
	--icon-tiktok: "\e713";
	--icon-time: "\e714";
	--icon-timetable: "\e715";
	--icon-toilets: "\e716";
	--icon-town: "\e717";
	--icon-train-rail-freight: "\e718";
	--icon-transfer: "\e719";
	--icon-transport-of-lithium-batteries: "\e71a";
	--icon-transport-solutions: "\e71b";
	--icon-trash-bin-delete: "\e71c";
	--icon-truck-road-freight: "\e71d";
	--icon-twitter: "\e71e";
	--icon-two-gears: "\e71f";
	--icon-undo-arrow: "\e720";
	--icon-upload-file: "\e721";
	--icon-upload: "\e722";
	--icon-user-circle: "\e723";
	--icon-user: "\e724";
	--icon-vaccine: "\e725";
	--icon-visibility-off: "\e726";
	--icon-visibility-on: "\e727";
	--icon-volume-high: "\e728";
	--icon-volume-low: "\e729";
	--icon-volume-muted: "\e72a";
	--icon-warehouse: "\e72b";
	--icon-warehousing-solutions: "\e72c";
	--icon-wash-hands: "\e72d";
	--icon-wear-mask: "\e72e";
	--icon-wechat: "\e72f";
	--icon-whatsapp: "\e730";
	--icon-wifi: "\e731";
	--icon-workshop: "\e732";
	--icon-xing: "\e733";
	--icon-youtube: "\e734";
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/animation/clientlib/css/animation.css ***!
  \********************************************************************************************************************************************************************************************************************/
/* c-animaton is no actual component, just for dummy purpose */
.c-animation {
	display: block;
	text-align: center;
	margin: 0 auto;
	width: 32rem;
	padding: 1rem;
	height: 30rem;
	background-color: var(--color-yellow-500);
}

.c-animation ul {
	text-align: left;
	list-style-type: none;
}

.c-animation li {
	font-size: 1.2rem;
	line-height: 1.6rem;
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/breadcrumb/clientlib/css/breadcrumb.css ***!
  \**********************************************************************************************************************************************************************************************************************/
/**
 * @file component-breadcrumb.css
 *
 * @description
 *
 * Styles for the component-breadcrumb. An breadcrumb component
 */

.c-component-breadcrumb {
	overflow: hidden;
	padding: var(--base-line-height) calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-component-breadcrumb {
	padding: calc(1.5 * var(--base-line-height))
		calc(1.5 * var(--base-line-height));
}

.c-component-breadcrumb ul {
	list-style-type: none;
	margin-bottom: 0;
	align-content: flex-start;
}

.left-aligned-grid .c-component-breadcrumb--items,
.left-aligned-grid .c-nav-secondary--meta {
	line-height: 1.8rem;
}

.left-aligned-grid .c-nav-secondary--meta .link::after {
	top: 0.1rem;
}

.c-breadcrumb--item {
	position: relative;
	display: inline-block;
	float: left;
	padding-right: calc(0.5 * var(--base-line-height));
}

.c-breadcrumb--item a {
	color: var(--color-gray-600);
	font-weight: normal;
	font-size: var(--font-size-text-small);
	padding-right: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-breadcrumb--link {
	color: var(--color-red-500);
	font-size: var(--font-size-text-small);
	white-space: nowrap;
	padding-right: 0;
}

.c-breadcrumb--item a:hover {
	color: var(--color-red-400);
}

.left-aligned-grid .c-breadcrumb--link:hover {
	text-decoration: underline;
	cursor: pointer;
}

.c-breadcrumb--item:first-child {
	padding-left: 0;
}

.left-aligned-grid .c-breadcrumb--item:hover .divider::after {
	color: var(--color-black-400);
}

.c-breadcrumb--item:last-child,
.c-breadcrumb--item:last-child a {
	padding-right: 0;
}

.c-breadcrumb--item:last-child div span {
	display: block;
	max-width: 88vw;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--font-size-text-small);
	color: var(--color-black-400);
}

.c-component-breadcrumb .link {
	white-space: nowrap;
	font-size: var(--font-size-text-small);
}

.left-aligned-grid .c-breadcrumb--divider {
	padding-left: 2.1rem;
}

.left-aligned-grid .c-component-breadcrumb .divider::after {
	color: var(--color-black-400);
}

.c-component-breadcrumb .divider::after {
	content: var(--icon-chevron-forward);
	color: var(--color-gray-600);
	font-size: var(--font-size-0);
	position: absolute;
	right: 1rem;
	top: 0;
}

/* rtl:raw:
.c-component-breadcrumb .divider::after {
	transform: scaleX(-1);
}
*/

@media screen and (min-width: 768px),print {
	.c-component-breadcrumb {
		overflow: hidden;
		padding: calc(1 * var(--base-line-height)) calc(3 * var(--base-line-height));
		min-height: 3.5rem;
	}

	.left-aligned-grid .c-component-breadcrumb {
		overflow: hidden;
		padding: calc(1.5 * var(--base-line-height))
			calc(3 * var(--base-line-height));
		min-height: 3.5rem;
	}
}

@media screen and (min-width: 1024px),print {
	.c-breadcrumb--item a:focus {
		color: var(--color-red-500);
		outline: 0.1rem solid var(--color-red-500);
	}

	.c-breadcrumb--item a:focus + span.has-icon::after {
		color: var(--color-red-500);
	}

	.left-aligned-grid .c-breadcrumb--link:focus {
		outline: 0.1rem solid var(--color-red-500);
	}

	.left-aligned-grid .c-component-breadcrumb {
		padding: calc(1.5 * var(--base-line-height))
			calc(3 * var(--base-line-height));
	}
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-component-breadcrumb {
		max-width: none;
		padding-left: var(--component-page-max-padding);
		padding-right: var(--component-page-max-padding);
	}
}

/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/code-inclusion/clientlib/css/code-inclusion.css ***!
  \******************************************************************************************************************************************************************************************************************************/
/**
 * @file code-inclusion.css
 *
 * @description
 * define code inclusion
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* Content of Code Inclusion needs to have special styling */
.c-code-inclusion > * {
	display: block;
	max-width: 100%;
	min-width: 100%;
	width: 100%;
	margin: 0 auto;
}

.c-code-inclusion * {
	max-width: 100%;
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/country-selector/clientlib/css/country-selector.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
/**
 * @file country-selector.css
 *
 * @description
 * define country selector
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-country-selector--item {
	border-top: 0.1rem solid var(--color-gray-600);
	padding: calc(1.5 * var(--base-line-height)) 0 0;
}

.c-country-selector--item:last-of-type {
	border-bottom: 0.1rem solid var(--color-gray-600);
}

.c-country-selector--item > h3 {
	margin-bottom: var(--base-line-height);
}

.c-country-selector--list {
	margin-bottom: 0;
	align-items: center;
}

.c-country-selector--list > li {
	list-style-type: none;
	margin-bottom: var(--base-line-height);
}

.c-country-selector--list > li > a {
	font-weight: normal;
}

.c-country-selector--list > li > a:focus {
	color: var(--color-red-500);
	outline: 0.1rem solid var(--color-red-500);
}

@media screen and (min-width: 768px),print {
	.c-country-selector--item {
		border-top: none;
		border-bottom: none;
		padding: var(--base-line-height);
	}

	.c-country-selector--item:nth-of-type(odd) {
		background-color: var(--color-gray-50);
	}

	.c-country-selector--item > h3 {
		margin-bottom: 0;
		padding: 0 var(--base-line-height);
		width: 5rem;
	}

	.c-country-selector--list > li {
		margin-bottom: 0;
	}

	.c-country-selector--list > li > a {
		padding: 0 0.4rem;
		margin: 0 1rem;
	}

	.c-country-selector--list > li::after {
		content: "|";
		color: var(--color-gray-600);
	}

	.c-country-selector--list > li:last-child::after {
		content: "";
	}
}

/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/cta/clientlib/css/cta.css ***!
  \********************************************************************************************************************************************************************************************************/
/**
 * @file cta.css
 *
 * @description
 * define cta component
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

@media screen and (min-width: 768px),print {
	.c-cta .base-button {
		margin: 0 calc(0.5 * var(--base-line-height));
	}
}

/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/dhl-wall/clientlib/css/dhl-wall.css ***!
  \******************************************************************************************************************************************************************************************************************/
:root {

	/* Generic masonry-layout is flexible and does always scale to the available
	   container width. For this reason, the container (dhl-wall) needs to define
	   the width for the respective viewport sizes.
	   Each variable covers: Overall width of all teasers + padding of teasers' container (+ margin between teasers, if available). */
	--dhl-wall-max-content-width-mobile-medium: calc(28.6rem + 2 * 1.5 * var(--base-line-height));
	--dhl-wall-max-content-width-desktop-large: calc(95.2rem + 2 * 1.5 * var(--base-line-height) + 2 * 3 * var(--base-line-height));
}

.c-dhl-wall {
	display: block;
	padding: calc(2.5 * var(--base-line-height)) 0 calc(5.5 * var(--base-line-height));
	background: var(--linear-gradient-yellow-to-bottom);
	text-align: center;
}

.c-dhl-wall.layout-flippable-cards {
	background: var(--color-white-500);
}

.c-dhl-wall--header-section {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-dhl-wall--content {
	margin: 0 auto;
	padding: 0 calc(1.5 * var(--base-line-height));
	width: 100%;
	max-width: var(--dhl-wall-max-content-width-mobile-medium);
}

@media screen and (min-width: 768px),print {
	.c-dhl-wall--content {
		padding: 0 calc(3 * var(--base-line-height));
	}
}

@media screen and (min-width: 666px) and (max-width: 767px), screen and (min-width: 768px), print {
	.c-dhl-wall--content {
		max-width: var(--dhl-wall-max-content-width-desktop-large);
	}
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-dhl-wall .c-masonry-layout--item.c-viewport-animation:nth-child(2) {
	transition-delay: 100ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-dhl-wall .c-masonry-layout--item.c-viewport-animation:nth-child(3) {
	transition-delay: 150ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-dhl-wall .c-masonry-layout--item.c-viewport-animation:nth-child(4) {
	transition-delay: 200ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-dhl-wall .c-masonry-layout--item.c-viewport-animation:nth-child(5) {
	transition-delay: 250ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-dhl-wall .c-masonry-layout--item.c-viewport-animation:nth-child(6) {
	transition-delay: 300ms;
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/disruptor/clientlib/css/disruptor.css ***!
  \********************************************************************************************************************************************************************************************************************/
:root {
	--disruptor-introimage-height: 4.8rem;
	--disruptor-introimage-height-desktop: 9.8rem;
}

.c-disruptor {
	max-width: 192rem;
	width: 100%;
	position: relative;
}

.c-disruptor--wrapper {
	position: relative;
	display: block;
	text-align: center;
	padding-bottom: calc(5 * var(--base-line-height));
	overflow: hidden;
}

.c-disruptor--container {
	position: relative;
	clip-path: inset(-6rem -38rem -9rem -1rem);
}

/* rtl:raw:
.c-disruptor--container {
	clip-path: inset(-6rem -1rem -9rem -41rem);
}
*/

.c-disruptor--viewport {
	position: relative;
	width: auto;
}

.c-disruptor--headline {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-disruptor--tile {
	position: relative;
	max-width: calc((16 * var(--base-line-height)) + 0.4rem);
	min-height: calc((22 * var(--base-line-height)) + 0.3rem);
	border-radius: 0.4rem;
	background-color: var(--color-white-500);
	margin-right: var(--base-line-height);
	color: var(--color-black-400);
}

.c-disruptor--tile img {
	overflow: hidden;
}

.c-disruptor--tile-text-content {
	padding: var(--base-line-height);
	position: relative;
}

.c-disruptor--tile-articles .c-disruptor--tile-headline {
	font-size: calc(var(--base-line-height) + 0.4rem);
	line-height: calc((1.5 * var(--base-line-height)) + 0.1rem);
	font-weight: 800;
}

a.c-disruptor--tile:hover .c-disruptor--tile-headline {
	color: var(--color-red-500);
}

.c-disruptor--tile-tagline {
	position: absolute;
	padding: 0 var(--base-line-height);
	font-size: calc(var(--base-line-height) + 0.4rem);
	line-height: calc(var(--base-line-height) + 0.4rem);
	font-weight: 200;
	text-transform: uppercase;
	bottom: var(--base-line-height);
}

.c-disruptor .c-slider--index {
	margin: calc(2 * var(--base-line-height)) 0 0 0;
}

.c-disruptor .c-slider--index li {
	height: 0.8rem;
	width: 0.8rem;
	box-sizing: border-box;
	border: 0.1rem solid var(--color-gray-500);
	background-color: var(--color-gray-200);
}

.c-disruptor .c-slider--index .is-active {
	border: 0.1rem solid var(--color-red-400-4);
	background-color: var(--color-red-500);
	transform: none;
}

.c-disruptor .c-slider--control span {
	font-size: calc(6.5 * var(--base-line-height));
}

.c-disruptor .c-slider--control span::before {
	transition: right 250ms ease, left 250ms ease;
}

.c-disruptor--slider {
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	transition: left 400ms, margin-left 200ms;
}

/* INTRO */

.c-disruptor .c-disruptor--intro-voices-image {
	margin: 0 0 calc(0.5 * var(--base-line-height));
	width: var(--disruptor-introimage-height);
	height: var(--disruptor-introimage-height);
}

.c-disruptor .c-disruptor--intro-voices-image img {
	border-radius: 50%;
	width: 100%;
}

.c-disruptor--intro {
	margin: auto;
}

.c-disruptor--intro-articles {
	align-self: center;
}

.c-disruptor--intro-articles .base-button {
	width: auto;
}

.c-disruptor--intro-articles .has-rte {
	width: 100%;
}

.c-disruptor--intro-voices {
	justify-content: center;
	align-self: center;
}

.c-disruptor--intro-container {
	padding: calc(1 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
}

.c-disruptor--intro-container h4 {
	margin-bottom: calc(0.5 * var(--base-line-height));
	width: 100%;
}

.c-disruptor--intro-container h4 span {
	display: block;
	font-weight: 200;
	line-height: var(--font-size-h5);
	font-size: var(--font-size-h5);
	padding-bottom: calc(1 * var(--base-line-height));
}

/* TILES */

.c-disruptor--tile-articles {
	display: flex;
	flex-direction: column;
}

.c-disruptor--tile-articles picture {
	flex-basis: auto;
}

.c-disruptor--tile-articles .c-disruptor--tile-content {
	flex-grow: 1;
}

.c-disruptor--tile-products-publications .c-disruptor--tile-tagline {
	position: relative;
	bottom: 0;
	display: block;
}

.c-disruptor--tile-products-publications .c-disruptor--tile-tagline.has-icon {
	display: flex;
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-disruptor--tile-products-publications .c-disruptor--tile-tagline.has-icon::before {
	font-size: var(--font-size-7);
	font-weight: bold;
	color: var(--color-black-500);
	padding-right: calc(1 * var(--base-line-height));
	top: 0.9rem;
}

.c-disruptor--tile-products-publications .c-disruptor--tile-tagline,
.c-disruptor--tile-products-publications .c-disruptor--tile-text-content,
.c-disruptor--tile-products-publications.publication .c-disruptor--tile-text-content {
	padding-top: calc(1.5 * var(--base-line-height));
}

.c-disruptor--tile-products-publications.product .c-disruptor--tile-text-content {
	padding-top: calc(2.5 * var(--base-line-height));
}

.c-disruptor--tile-products-publications .c-disruptor--tile-headline {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-disruptor--tile-products-publications .base-button {
	position: absolute;
	bottom: var(--base-line-height);
	margin: 0 var(--base-line-height);
}

.c-disruptor--tile-products-publications .has-rte {
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-disruptor--tile-products-publications .c-disruptor--tile-text-content .has-rte .list {
	padding-left: calc(var(--base-line-height) + 0.4rem);
}

.c-disruptor--tile-products-publications .c-disruptor--tile-text-content .has-rte .list li {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-disruptor--tile-products-publications .c-disruptor--tile-text-content .has-rte .list li:last-child {
	margin-bottom: calc(var(--base-line-height) + 0.5rem);
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-disruptor--tile.c-viewport-animation:nth-child(2n) {
	transition-delay: 100ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-disruptor--tile.c-viewport-animation:nth-child(3n) {
	transition-delay: 150ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-disruptor--tile.c-viewport-animation:nth-child(4n) {
	transition-delay: 200ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-disruptor--tile.c-viewport-animation:nth-child(5n) {
	transition-delay: 250ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-disruptor--tile.c-viewport-animation:nth-child(6n) {
	transition-delay: 300ms;
}

@media screen and (max-width: 767px),print, screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-disruptor--intro .base-button {
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px),print {
	.c-disruptor .c-slider-navigation-wrapper--csb {
		margin-top: calc(2 * var(--base-line-height));
	}

	.c-disruptor--tile-products-publications .base-button {
		width: calc(100% - 2 * var(--base-line-height));
	}

	.c-disruptor--tile-products-publications .c-disruptor--tile-text-content.no-tagline {
		padding-top: calc(5 * var(--base-line-height));
	}
}

/* (min-width: 768px) */

@media screen and (min-width: 768px),print {
	.c-disruptor--tile {
		max-width: calc((20 * var(--base-line-height)) + 0.4rem);
		min-height: calc((28 * var(--base-line-height)) + 1rem);
		margin-bottom: calc(2 * var(--base-line-height));
		margin-right: calc(1.5 * var(--base-line-height));
		transition: 200ms;
		pointer-events: auto;
	}

	.c-disruptor--tile:not(.c-viewport-animation):hover {
		transform: scale(1.05);
		cursor: pointer;
	}

	.c-disruptor--tile-text-content {
		padding: calc(1.5 * var(--base-line-height));
	}

	.c-disruptor--tile-articles .c-disruptor--tile-headline {
		font-size: calc((1.5 * var(--base-line-height)) + 0.1rem);
		line-height: calc(2 * var(--base-line-height));
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-disruptor--tile-tagline {
		font-size: calc(1.5 * var(--base-line-height));
		line-height: calc(1.5 * var(--base-line-height));
		bottom: calc(1.5 * var(--base-line-height));
		padding: 0 calc(1.5 * var(--base-line-height));
	}

	.c-disruptor--slider {
		pointer-events: none;
	}

	.c-disruptor--intro-container h4 span {
		line-height: var(--font-size-4);
		font-size: var(--font-size-4);
	}

	/* INTRO */

	.c-disruptor--intro-container h4 {
		margin-bottom: calc(0.5 * var(--base-line-height));
	}

	.c-disruptor .c-disruptor--intro-voices-image {
		width: var(--disruptor-introimage-height-desktop);
		height: var(--disruptor-introimage-height-desktop);
		margin: 0 0 calc(1 * var(--base-line-height));
	}

	.c-disruptor--tile-products-publications .c-disruptor--tile-tagline.has-icon::before {
		font-size: var(--font-size-8);
	}

	/* TILES */
	.c-disruptor--tile-products-publications .base-button {
		bottom: calc(1.5 * var(--base-line-height));
		margin: 0 calc(1.5 * var(--base-line-height));
	}

	.c-disruptor--tile-products-publications .c-disruptor--tile-tagline,
	.c-disruptor--tile-products-publications .c-disruptor--tile-text-content {
		padding-top: calc(2.5 * var(--base-line-height));
	}

	.c-disruptor--tile-products-publications .c-disruptor--tile-text-content.no-tagline {
		padding-top: calc(6.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-disruptor--intro-container {
		flex-basis: auto;
		width: 28.4rem;
		margin-right: calc(1.5 * var(--base-line-height));
		padding: calc(1.5 * var(--base-line-height));
	}

	.c-disruptor--container {
		flex-basis: auto;
		width: calc(100% - 30.5rem);
		padding-top: var(--base-line-height);
	}
}

@media screen and (min-width: 1365px) {
	.c-disruptor--intro-articles {
		text-align: left;
	}

	.c-disruptor .c-slider-navigation--csb {
		transform: translateX(-14.7rem);
		position: relative;
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/download-box/clientlib/css/download-box.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.c-download-box--headline {
	margin: 0;
	text-align: center;
}

.left-aligned-grid .c-download-box--headline {
	text-align: left;
}

.c-download-box--rte-container {
	font-size: var(--font-size-text-large);
}

.left-aligned-grid .c-download-box--rte-container {
	text-align: left;
}

.c-download-box--rte-container:not(:first-child) {
	margin-top: var(--base-line-height);
}

.c-download-box--rte-container > :last-child {
	margin-bottom: 0;
}

.c-download-box--list {
	list-style: none;
}

.left-aligned-grid .c-download-box--rte-container .list {
	margin-left: 0;
}

.c-download-box--list:not(:first-child) {
	margin-top: calc(2.5 * var(--base-line-height));
}

.c-download-box--item:not(:first-child) {
	margin-top: calc(0.5 * var(--base-line-height));
}

/* required if used in context of .c-productcard */
.c-productcard li.c-download-box--item {
	margin-bottom: 0;
}

.c-download-box--link {
	display: flex;
	align-items: center;
	background-color: var(--color-gray-50);
	padding: var(--base-line-height) calc(1.5 * var(--base-line-height));
	min-height: calc(4 * var(--base-line-height));
	transition: background-color 200ms;
}

.c-download-box--link::after {
	flex: 0 0 auto;
	content: "";
	display: block;
	margin-left: var(--base-line-height);
	width: 2rem;
	height: 2rem;
	background: url(../assets/img/e83711f546ee7190263f.svg) center center no-repeat;
	background-size: contain;
}

html:not(.is-touch) .c-download-box--link:hover {
	background-color: var(--color-gray-200);
}

html:not(.is-touch) .c-download-box--link:hover::after {
	background-image: url(../assets/img/e83711f546ee7190263f.svg);
}

html:not(.is-touch) .c-download-box--link:focus,
html:not(.is-touch) .has-rte a.c-download-box--link:not(.base-button):focus /* required if used in context of .has-rte */ {
	outline: var(--color-black-500) solid 0.2rem;
	outline-offset: -0.2rem;
}

.c-download-box--text-container {
	flex: 1 1 auto;
}

.c-download-box--file-name {
	font-size: var(--font-size-text-small);
	line-height: 1.5rem;
	color: var(--color-black-400);
	font-weight: bold;
	transition: color 200ms;
}

html:not(.is-touch) .c-download-box--link:hover .c-download-box--file-name {
	color: var(--color-red-400);
	text-decoration: underline;
}

.c-download-box--file-meta-information {
	margin-top: calc(0.5 * var(--base-line-height));
	font-size: var(--font-size-text-small);
	font-weight: normal; /* required if used in context of .has-rte */
	line-height: 1.5rem;
	color: var(--color-gray-600);
}

.c-download-box--file-type {
	text-transform: uppercase;
}

.c-download-box--file-size {
	margin-left: calc(0.5 * var(--base-line-height));
}

@media screen and (min-width: 768px),print {
	.c-download-box--link::before {
		flex: 0 0 auto;
		content: "";
		display: block;
		margin-right: calc(1.5 * var(--base-line-height));
		width: calc(2 * var(--base-line-height));
		height: 3.1rem;
		background: url(../assets/img/b883c0e07a009a1c25eb.svg) center center no-repeat;
		background-size: contain;
	}

	.c-download-box--list:not(.has-file-type-icons) .c-download-box--link::before {
		display: none;
	}

	.c-download-box--link.file-type-doc::before {
		background-image: url(../assets/img/53c70d3a5c3b2febae5a.svg);
	}

	.c-download-box--link.file-type-docx::before {
		background-image: url(../assets/img/4a501c4b4517b5e2a955.svg);
	}

	.c-download-box--link.file-type-gif::before {
		background-image: url(../assets/img/0153b8af56d3c51516f4.svg);
	}

	.c-download-box--link.file-type-jpeg::before,
	.c-download-box--link.file-type-jpg::before {
		background-image: url(../assets/img/8eb8d10d104574ff9055.svg);
	}

	.c-download-box--link.file-type-pdf::before {
		background-image: url(../assets/img/87861814d750d6dd6a33.svg);
	}

	.c-download-box--link.file-type-png::before {
		background-image: url(../assets/img/e8aade01bab578dfc3a1.svg);
	}

	.c-download-box--link.file-type-ppt::before {
		background-image: url(../assets/img/1a39d05a46a918028d95.svg);
	}

	.c-download-box--link.file-type-pptx::before {
		background-image: url(../assets/img/935593748e73b100e3ed.svg);
	}

	.c-download-box--link.file-type-xls::before {
		background-image: url(../assets/img/5975c9791f32a3257f0a.svg);
	}

	.c-download-box--link.file-type-xlsx::before {
		background-image: url(../assets/img/bcb8ef8c1caba84abc63.svg);
	}

	.c-download-box--link.file-type-zip::before {
		background-image: url(../assets/img/c73722b869a70ea8c3be.svg);
	}

	.c-download-box--link::after {
		margin-left: calc(1.5 * var(--base-line-height));
	}

	.c-download-box--text-container {
		display: flex;
		align-items: center;
	}

	.c-download-box--file-name {
		flex: 1 1 auto;
	}

	.c-download-box--file-meta-information {
		flex: 0 0 auto;
		margin-top: 0;
	}

	.c-download-box--file-type {
		margin-left: calc(5 * var(--base-line-height));
	}

	.c-download-box--file-size {
		display: inline-block;
		min-width: 9.4rem;
		padding-left: calc(0.5 * var(--base-line-height));
		text-align: right;
	}
}

/*!**************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/download-container/clientlib/css/download-container.css ***!
  \**************************************************************************************************************************************************************************************************************************************/
/* START OF TEMPORARY FONT-STYLES OVERRIDE, WILL BE REMOVED WITH DPDHLPA-30649 */
.left-aligned-grid .c-download-container .level4 {
	font-size: 1.8rem;
	line-height: 2.1rem;
}

.left-aligned-grid .c-download-container p {
	font-size: 1.6rem;
	line-height: 2.1rem;
}

.left-aligned-grid .c-download-container .small {
	font-size: 1.4rem;
	line-height: 1.8rem;
}

.c-download-container.component-wide {
	justify-content: space-between;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.left-aligned-grid .c-download-container .level4 {
		font-size: 2.1rem;
		line-height: 2.8rem;
	}
}

@media screen and (min-width: 1024px),print {
	.left-aligned-grid .c-download-container .level4 {
		font-size: 2.1rem;
		line-height: 2.8rem;
	}
}

/* END OF TEMPORARY FONT-STYLES OVERRIDE */

.left-aligned-grid .c-download-container {
	text-align: left;
}

.c-download-container--element {
	flex-flow: row nowrap;
	box-shadow: var(--shadow-small);
	border-radius: 0.4rem;
	width: 100%;
	color: var(--color-black-400);
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-download-container--listview .c-download-container--element {
	box-shadow: none;
}

.c-download-container--element-content {
	padding: calc(1.5 * var(--base-line-height));
	display: flex;
	flex: 1 1 auto;
	flex-flow: column wrap;
	justify-content: space-between;
}

.c-download-container--listview .c-download-container--element-content {
	padding: 0;
}

.c-download-container--element-headline {
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-download-container--element-information {
	flex-flow: row nowrap;
}

.c-download-container--element-copy p {
	margin-bottom: 0;
}

.c-download-container--listview .c-download-container--element-copy p {
	color: var(--color-red-500);
}

.c-download-container--element-copy p.small {
	color: var(--color-gray-600);
	display: inline-block;
}

.c-download-container--element-image-wrapper {
	position: relative;
	width: calc(21 * var(--base-line-height));
	flex-shrink: 0;
	display: none;
}

.c-download-container--element-icon {
	width: 4.4rem;
	height: 4.4rem;
	position: relative;
	background-color: var(--color-red-500);
	border-radius: 0.4rem;
	margin-right: calc(1 * var(--base-line-height));
	flex-shrink: 0;
}

.c-download-container--element-icon::before {
	color: var(--color-white-500);
	position: absolute;
	font-size: 2.1rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.c-download-container:not(.c-download-container--listview) .c-download-container--element:hover {
	box-shadow: var(--shadow-medium);
}

.c-download-container:not(.c-download-container--listview) .c-download-container--element:focus {
	box-shadow: var(--shadow-large);
}

.c-download-container--listview .c-download-container--element:focus {
	border: 0.1rem solid var(--color-red-500);
}

.c-download-container--element:hover p:not(.small) {
	color: var(--color-red-400);
	text-decoration: underline;
}

@media screen and (min-width: 768px),print {
	.c-download-container:not(.c-download-container--listview) .c-download-container--element {
		min-height: calc(12 * var(--base-line-height));
	}

	.c-download-container.component-wide .c-download-container--element {
		width: var(--grid-cols-6);
	}

	.c-download-container.component-wide .c-download-container--element:first-child {
		margin-right: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-download-container.component-small:not(.c-download-container--listview) .c-download-container--element {
		width: var(--grid-cols-6);
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-download-container.component-small .c-download-container--element-image-wrapper {
		display: block;
	}
}

@media screen and (min-width: 1365px) {
	.c-download-container--element-image-wrapper {
		display: block;
	}
}

/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/footer/clientlib/css/footer.css ***!
  \**************************************************************************************************************************************************************************************************************/
/**
 * @file footer.css
 *
 * @description
 * Define footer and legal links
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-footer {
	overflow: hidden;
	background-color: var(--color-white-500);
}

/**
 * Meta
 */

.c-footer-meta {
	overflow: hidden;
	padding-top: var(--base-line-height);
	padding-bottom: 0;
	background-color: var(--color-gray-50);
}

.c-footer-meta-container {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-footer-meta--list {
	margin-top: calc(1.5 * var(--base-line-height));
	list-style-type: none;
}

.c-footer-meta--list li {
	list-style-type: none;
	display: flex;
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-footer-meta--list li:nth-child(odd) {
	padding-right: calc(0.5 * var(--base-line-height));
}

.c-footer-meta--list li:nth-child(even) {
	padding-left: calc(0.5 * var(--base-line-height));
}

.c-footer-meta--list .link {
	font-weight: normal;
	font-size: var(--font-size-text-small);
	color: var(--color-gray-600);
	line-height: var(--body-font-size);
	border: 0.1rem solid transparent;
}

.left-aligned-grid .c-footer-meta--list .link,
.left-aligned-grid .c-footer--legal-text {
	line-height: 1.8rem;
}

.c-footer-meta--list .link:hover {
	color: var(--color-red-400);
}

.c-footer-meta--list .link:focus {
	border-color: var(--color-red-500);
	color: var(--color-red-400);
}

.c-footer-meta-logo {
	width: calc(11 * var(--base-line-height));
}

.c-footer--legal-text {
	padding-top: calc(2 * var(--base-line-height));
	font-size: var(--font-size-1);
	color: var(--color-gray-600);
	text-align: center;
	justify-content: center;
	background-color: var(--color-gray-50);
	padding-bottom: calc(3 * var(--base-line-height));
}

.c-footer-partners--list,
.c-footer-social--list {
	pointer-events: none;
	display: flex;
	list-style-type: none;
	flex-flow: row wrap;
	align-items: center;
}

.c-footer-social--list {
	justify-content: flex-start;
	margin-left: calc(-1.5 * var(--base-line-height));
	margin-bottom: 0;
}

.c-footer-social--list li {
	margin-left: calc(1.5 * var(--base-line-height));
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-footer-partners--list .c-footer-partners-list--item,
.c-footer-social--list li {
	pointer-events: auto;
	transition: opacity 200ms;
}

.c-footer-social--list:focus-within a:not(:focus),
.c-footer-partners--list:focus-within a:not(:focus),
.c-footer-partners--list:hover > div:not(:hover),
.c-footer-social--list:hover > li:not(:hover) {
	opacity: 0.25;
}

.c-footer-social--list li,
.c-footer-social--list img {
	width: calc(2.5 * var(--base-line-height));
	height: calc(2.5 * var(--base-line-height));
}

.c-footer-social--list img {
	display: flex;
}

.c-footer-headline {
	font-size: var(--base-line-height);
	line-height: var(--body-font-size);
	font-weight: bold;
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-footer-headline {
	font-size: var(--body-font-size-c20);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-footer-social--list .link,
.c-footer-partners--list .link {
	position: relative;
}

.c-footer-social--list .link:focus::after {
	content: "";
	display: block;
	position: absolute;
	width: calc(3 * var(--base-line-height) - 0.2rem);
	height: calc(3 * var(--base-line-height) - 0.2rem);
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.c-footer-social--list .link:focus::after,
.c-footer-partners--list .link:focus {
	border: 0.1rem solid var(--color-black-400);
}

.c-footer-meta .link-external::after {
	color: var(--color-gray-600);
}

.c-footer-meta .link-external:hover::after {
	color: var(--color-red-500);
}

/**
 * default, mobile first
 * major breakpoint "s"
 * @size <= 767
 */

/* @media (--mobile) {
} */

/**
 * minor breakpoint "s-l"
 * @size 667 - 767
 */

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-footer-meta--logo {
		height: var(--font-size-4);
	}

	.c-footer-meta-container {
		margin-bottom: 0;
		padding-right: calc(0.5 * var(--base-line-height));
	}

	.c-footer-social-container {
		padding-left: calc(0.5 * var(--base-line-height));
	}

	.c-footer-social--list {
		max-width: calc(20 * var(--base-line-height));
	}
}

/**
 * major breakpoint "m"
 * @size >=768
 */

@media screen and (min-width: 768px),print {
	.c-footer-meta {
		padding-top: calc(2.5 * var(--base-line-height));
	}

	.c-footer-meta-container .c-footer-headline {
		margin-bottom: calc(2 * var(--base-line-height));
	}

	.c-footer-meta-container {
		margin-bottom: 0;
	}

	.c-footer-meta--list {
		display: flex;
		align-items: flex-end;
		margin: calc(1.5 * var(--base-line-height)) 0 0;
	}

	.c-footer-social--list {
		margin-left: calc(-2 * var(--base-line-height));
	}

	.c-footer-social--list li {
		margin-left: calc(2 * var(--base-line-height));
	}

	.c-footer-meta--list li:nth-child(odd),
	.c-footer-meta--list li:nth-child(even) {
		display: inline-block;
		padding-right: calc(2.5 * var(--base-line-height));
		padding-left: 0;
		width: auto;
		max-width: initial;
		flex-basis: auto;
		line-height: 0;
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-footer-social--list li,
	.c-footer-social--list img {
		width: calc(1.5 * var(--base-line-height));
		height: calc(1.5 * var(--base-line-height));
	}

	.c-footer--legal-text {
		padding-top: calc(1.5 * var(--base-line-height));
	}
}

/**
 * minor breakpoint "m-s"
 * @size 768 - 1023
 * @media (--tablet) {
 * }
 */

/**
 * @size < 1024
 */

@media screen and (min-width: 1024px),print {
	.c-footer-meta--container .c-footer-headline {
		margin-bottom: calc(2 * var(--base-line-height));
	}

	.c-footer-meta--list li a::after {
		top: 0.1rem;
	}
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.c-footer-meta--list li {
		white-space: nowrap;
		margin-bottom: 0;
	}

	.full-width-grid .c-footer-partners.component-wide,
	.full-width-grid .c-footer-meta.component-wide,
	.full-width-grid .c-footer--legal-text.component-wide {
		max-width: none;
		padding-left: var(--component-page-max-padding);
		padding-right: var(--component-page-max-padding);
	}
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/footer/clientlib/css/footer-partner.css ***!
  \**********************************************************************************************************************************************************************************************************************/
.c-footer-partners {
	background-color: var(--color-gray-50);
	padding-top: calc(1.5 * var(--base-line-height));
	padding-bottom: 0;
}

.c-footer-partners-container {
	border-bottom: 0.1rem solid var(--color-gray-300);
	padding-bottom: calc(1.5 * var(--base-line-height));
	flex-wrap: wrap;
}

.c-footer-partners--headline {
	margin-bottom: calc(2 * var(--base-line-height));
	font-size: var(--font-size-text-small);
	font-weight: bold;
}

.c-footer-partners--list {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	padding: 0 1.4rem;
}

.c-footer-partners-list--item {
	margin-bottom: 2.8rem;
	display: flex;
	justify-content: center;
}

.c-footer-partners--list a {
	display: flex;
	justify-content: center;
	height: 5.6rem;
	box-sizing: content-box;
	border: 0.1rem solid transparent;

	/* over ridding props */
	padding: 0 calc(1 * var(--base-line-height));
	width: 10rem;
}

.c-footer-partners--image {
	height: 100%;
	width: 100%;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-footer-partners-list--item {
		flex-basis: 25%;
	}

	.c-footer-partners--list a {
		padding: 0 2.8rem;
		width: 8rem;
	}
}

/* >= 1024px */
@media screen and (min-width: 1024px),print {
	.c-footer-partners-list--item {
		flex-basis: 10%;
	}

	.c-footer-partners--list a {
		padding: 0 1.4rem;
		width: 8rem;
	}
}

@media screen and (min-width: 1365px) {
	.c-footer-partners--list a {
		width: 9.2rem;
	}
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/hero-story-stage/clientlib/css/hero-story-stage.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
:root {

	/* media */
	--hero-story-stage-background-media-height-mobile: 56.9rem;
	--hero-story-stage-background-media-aspect-ratio-non-mobile: calc(21 / 9);

	/* tag */
	--hero-story-stage-tag-font-size-mobile: 1.8rem;
	--hero-story-stage-tag-line-height-mobile: 2rem;
	--hero-story-stage-tag-font-size-tablet: 2.2rem;
	--hero-story-stage-tag-line-height-tablet: 2rem;
	--hero-story-stage-tag-font-size-desktop-large: 2.5rem;

	/* headline */
	--hero-story-stage-headline-font-size-mobile: 2.8rem;
	--hero-story-stage-headline-line-height-mobile: 2.8rem;
	--hero-story-stage-headline-font-size-tablet: 2.9rem;
	--hero-story-stage-headline-large-font-size-tablet: 3.6rem;
	--hero-story-stage-headline-large-line-height-tablet: 3.5rem;
	--hero-story-stage-headline-font-size-desktop: 3.2rem;
	--hero-story-stage-headline-line-height-desktop: 3.3rem;
	--hero-story-stage-headline-large-font-size-desktop: 4.2rem;
	--hero-story-stage-headline-large-line-height-desktop: 4.2rem;
	--hero-story-stage-headline-font-size-desktop-large: 3.6rem;
	--hero-story-stage-headline-line-height-desktop-large: 3.8rem;
	--hero-story-stage-headline-large-font-size-desktop-large: 5.1rem;
	--hero-story-stage-headline-large-line-height-desktop-large: 4.9rem;

	/* copy */
	--hero-story-stage-copy-font-size-mobile: 1.8rem;
	--hero-story-stage-copy-line-height-mobile: 2.5rem;
	--hero-story-stage-copy-padding-mobile: 2.1rem;
	--hero-story-stage-copy-padding-tablet: 10rem;
	--hero-story-stage-copy-padding-desktop-sm: 20.2rem;
	--hero-story-stage-copy-width-desktop-lg: 79rem;
}

.c-hero-story-stage .c-video {
	margin: 0;
}

.c-hero-story-stage--outer-content-container {
	position: relative;
	width: 100%;
}

.c-hero-story-stage .c-background-media,
.c-hero-story-stage--outer-text-container {
	height: var(--hero-story-stage-background-media-height-mobile);
}

.c-hero-story-stage--outer-text-container {
	position: relative;
	width: 100%;
}

.c-hero-story-stage--inner-text-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 calc(1.5 * var(--base-line-height));
	width: 100%;
	height: 100%;
	color: var(--color-white-500);
}

div.c-hero-story-stage.text-left-aligned div.c-hero-story-stage--rte-container {
	padding-left: 0;
}

/* important for IE11 */
.c-hero-story-stage--inner-text-container > * {
	width: 100%;
}

.c-hero-story-stage:not(.text-left-aligned) .c-hero-story-stage--inner-text-container {
	text-align: center;
}

.c-hero-story-stage.text-left-aligned .c-hero-story-stage--inner-text-container {
	align-items: flex-start;
}

/* allowed for all the elements */
.c-hero-story-stage--inner-text-container .text-black {
	color: var(--color-black-400);
}

/* allowed for tag and headline only */
.c-hero-story-stage--tag.text-red,
.c-hero-story-stage--headline.text-red {
	color: var(--color-red-500);
}

/* allowed for tag only */
.c-hero-story-stage--tag.text-green {
	color: var(--color-green-600);
}

.c-hero-story-stage--tag,
.c-hero-story-stage--headline {
	text-transform: uppercase;
}

.c-hero-story-stage--tag {
	margin-bottom: calc(0.5 * var(--base-line-height));
	font-weight: 200;
	font-size: var(--hero-story-stage-tag-font-size-mobile);
	line-height: var(--hero-story-stage-tag-line-height-mobile);
}

.c-hero-story-stage--headline {
	margin: 0;
	font-size: var(--hero-story-stage-headline-font-size-mobile);
	line-height: var(--hero-story-stage-headline-line-height-mobile);
}

.c-hero-story-stage--rte-container {
	margin-top: calc(1.5 * var(--base-line-height));
	font-size: var(--hero-story-stage-copy-font-size-mobile);
	line-height: var(--hero-story-stage-copy-line-height-mobile);
	padding: 0 var(--hero-story-stage-copy-padding-mobile);
}

.c-hero-story-stage--rte-container > :last-child {
	margin: 0;
}

.c-hero-story-stage .c-media-tiles {
	margin-top: calc(3.5 * var(--base-line-height));
}

@media screen and (max-width: 767px),print, screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-hero-story-stage .c-media-tiles--tile-title.text-white,
	.c-hero-story-stage .c-media-tiles--tile-copy.text-white {
		color: var(--color-black-400);
	}

	.c-hero-story-stage .c-media-tiles--tile-dash.dash-white {
		background-color: var(--color-black-400);
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-hero-story-stage--inner-text-container {
		padding: 0 12.9rem;
	}
}

@media screen and (min-width: 768px),print {
	.c-hero-story-stage .c-background-media,
	.c-hero-story-stage--outer-text-container {
		padding-bottom: calc(100% / var(--hero-story-stage-background-media-aspect-ratio-non-mobile));
		height: auto;
	}

	.c-hero-story-stage--tag {
		font-size: var(--hero-story-stage-tag-font-size-tablet);
		line-height: var(--hero-story-stage-tag-line-height-tablet);
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-hero-story-stage--inner-text-container {
		padding: 0 10rem;
	}

	.c-hero-story-stage--headline {
		font-size: var(--hero-story-stage-headline-font-size-tablet);
	}

	.c-hero-story-stage--headline.text-large {
		font-size: var(--hero-story-stage-headline-large-font-size-tablet);
		line-height: var(--hero-story-stage-headline-large-line-height-tablet);
	}

	.c-hero-story-stage--rte-container {
		padding: 0 var(--hero-story-stage-copy-padding-tablet);
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-hero-story-stage--inner-text-container {
		padding: 0 12.2rem;
	}

	.c-hero-story-stage--headline {
		font-size: var(--hero-story-stage-headline-font-size-desktop);
		line-height: var(--hero-story-stage-headline-line-height-desktop);
	}

	.c-hero-story-stage--headline.text-large {
		font-size: var(--hero-story-stage-headline-large-font-size-desktop);
		line-height: var(--hero-story-stage-headline-large-line-height-desktop);
	}

	.c-hero-story-stage--rte-container {
		padding: 0 var(--hero-story-stage-copy-padding-desktop-sm);
	}
}

@media screen and (min-width: 1365px) {
	.c-hero-story-stage--outer-content-container {
		padding-bottom: calc(100% / var(--hero-story-stage-background-media-aspect-ratio-non-mobile));
	}

	.c-hero-story-stage--rte-container {
		width: var(--hero-story-stage-copy-width-desktop-lg);
	}

	.c-hero-story-stage--inner-content-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.c-hero-story-stage--outer-text-container {
		padding: 0;
	}

	.c-hero-story-stage--inner-text-container {
		position: relative;
		padding: 0 28.7rem;
	}

	/* with media-tiles at the end of the content container */
	.c-hero-story-stage.text-left-aligned .c-hero-story-stage--inner-text-container {
		padding: 0 49rem 0 8.4rem;
	}

	/* :last-child = without(!) media-tiles at the end of the content container */
	.c-hero-story-stage.text-left-aligned .c-hero-story-stage--outer-text-container:last-child .c-hero-story-stage--inner-text-container {
		padding: 0 38.9rem 0 18.5rem;
	}

	.c-hero-story-stage--tag {
		font-size: var(--hero-story-stage-tag-font-size-desktop-large);
	}

	.c-hero-story-stage--headline {
		font-size: var(--hero-story-stage-headline-font-size-desktop-large);
		line-height: var(--hero-story-stage-headline-line-height-desktop-large);
	}

	.c-hero-story-stage--headline.text-large {
		font-size: var(--hero-story-stage-headline-large-font-size-desktop-large);
		line-height: var(--hero-story-stage-headline-large-line-height-desktop-large);
	}

	.c-hero-story-stage .c-media-tiles {
		margin-top: calc(6 * var(--base-line-height));
	}

	.is-editmode .c-hero-story-stage--outer-content-container {
		padding-bottom: 0;
	}

	.is-editmode .c-hero-story-stage--inner-content-container {
		overflow: visible;
		position: relative;
	}

	.is-editmode .c-hero-story-stage--inner-text-container {
		position: absolute;
	}

	.is-editmode .c-hero-story-stage--outer-text-container {
		height: var(--hero-story-stage-background-media-height-mobile);
		padding-bottom: calc(100% / var(--hero-story-stage-background-media-aspect-ratio-non-mobile));
	}
}

/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/hero-story-teaser/clientlib/css/hero-story-teaser.css ***!
  \************************************************************************************************************************************************************************************************************************************/
:root {

	/* font */
	--hero-story-teaser-tag-tablet: 1.8rem;
	--hero-story-teaser-headline: 3.1rem;
	--hero-story-teaser-headline-large: 3.6rem;
	--hero-story-teaser-headline-tablet: 2.2rem;
	--hero-story-teaser-headline-lineheight: 3.5rem;
	--hero-story-teaser-headline-tablet-lineheight: 2.4rem;
	--hero-story-teaser-smallheadline: 1.9rem;
	--hero-story-teaser-smallheadline-large: 2.5rem;
	--hero-story-teaser-smallheadline-tablet: 1.4rem;
	--hero-story-teaser-smallheadline-lineheight: 2.7rem;
	--hero-story-teaser-smallheadline-large-lineheight: 3.5rem;
	--hero-story-teaser-smallheadline-tablet-lineheight: 1.9rem;

	/* background-media */
	--hero-story-teaser-background-media-height-mobile: 56.9rem; /* static */
	--hero-story-teaser-background-media-height-tablet: calc(100% / 16 * 9); /* based on aspect ratio */
}

.c-hero-story-teaser {
	display: block;
	text-align: center;
	position: relative;
}

.c-hero-story-teaser.component-margin-top {
	padding-top: calc(1.5 * var(--base-line-height));
}

.c-hero-story-teaser h3.c-story-image-container--headline,
.c-hero-story-teaser h2.c-story-image-container--headline,
.c-hero-story-teaser h1.c-story-image-container--headline {
	margin-bottom: calc(1.5 * var(--base-line-height));
	text-transform: none;
}

.c-hero-story-teaser h1.c-story-image-container--headline,
.c-hero-story-teaser h2.c-story-image-container--headline {
	text-transform: uppercase;
}

.c-hero-story-teaser .c-hero-story-teaser-subteaser h2.c-story-image-container--headline,
.c-hero-story-teaser .c-hero-story-teaser-subteaser h3.c-story-image-container--headline {
	text-transform: uppercase;
}

/* 2nd selector with .c-story-image-container--headline-inner-container exists
   for specifity reasons */
.c-hero-story-teaser .base-button,
.c-hero-story-teaser .c-story-image-container--headline-inner-container .base-button {
	width: auto;
}

.c-hero-story-teaser .c-story-image-container--headline-outer-container {
	position: absolute;
	top: 0;
	height: 100%;
}

.c-hero-story-teaser .c-story-image-container--headline-outer-container:not(.left-aligned) .c-story-image-container--headline-inner-container {
	position: absolute;
	justify-content: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.c-hero-story-teaser .c-story-image-container--headline-outer-container.left-aligned .c-story-image-container--headline-inner-container {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.c-hero-story-teaser .c-story-image-container--tagline:not(.red):not(.green):not(.black),
.c-hero-story-teaser .c-story-image-container--headline:not(.red):not(.black) {
	color: var(--color-white-500);
}

.c-hero-story-teaser-subteaser {
	justify-content: center;
}

.c-hero-story-teaser.substory-bottom .c-hero-story-teaser-subteaser {
	margin-bottom: calc(7.5 * var(--base-line-height));
}

.c-story-image-container-subteaser-container {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: 200ms;
	transition-timing-function: ease-in-out;
	transition-delay: 0ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-story-image-container-subteaser-container.c-viewport-animation:nth-child(1n) {
	transition-delay: 1100ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-story-image-container-subteaser-container.c-viewport-animation:nth-child(2n) {
	transition-delay: 1300ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-story-image-container-subteaser-container.c-viewport-animation:nth-child(3n) {
	transition-delay: 1500ms;
}

.c-story-image-container-subteaser-inner-container > *:not(.base-button-marker) {
	width: 100%;
}

.c-story-image-container-subteaser-container:not(.c-viewport-animation):hover {
	transform: scale(1.05);
}

html:not(.is-touch) .c-story-image-container-subteaser-container:focus {
	outline: 0.3rem solid var(--color-red-500);
}

.c-story-image-container-subteaser-inner-container {
	padding: calc(2.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
	position: relative;
	margin: 0 auto;
	justify-content: center;
}

.c-story-image-container-subteaser-container .base-button-marker {
	position: relative;
	background-color: var(--color-white-500);
	border-radius: 0.4rem;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	min-height: calc(3 * var(--base-line-height));
	font-weight: bold;
	font-size: var(--font-size-standard);
	margin: 0;
	padding: 0 calc(2.5 * var(--base-line-height));
	justify-content: center;
	text-align: center;
	color: var(--color-black-500);
}

.c-hero-story-teaser .c-hero-story-teaser-subteaser .c-story-image-container--tagline {
	font-size: var(--font-size-quote-mobile);
	line-height: var(--font-size-quote-mobile);
}

.c-hero-story-teaser .c-story-image-container--image-headline-container {
	position: relative;
}

@media screen and (max-width: 767px),print {
	.c-hero-story-teaser.substory-bottom .c-story-image-container--headline-outer-container {
		height: calc(100% - 10 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-bottom .c-hero-story-teaser-subteaser {
		margin-top: calc(-10 * var(--base-line-height));
		width: calc(20 * var(--base-line-height));
		margin-left: auto;
		margin-right: auto;
	}

	.c-hero-story-teaser.substory-top .c-story-image-container--headline-outer-container {
		height: calc(100% - 10 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-top .c-hero-story-teaser-subteaser {
		margin: calc(-10 * var(--base-line-height)) auto calc(7.5 * var(--base-line-height));
		width: calc(20 * var(--base-line-height));
	}

	.c-story-image-container-subteaser-container:not(:last-child) {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-hero-story-teaser .c-story-image-container--image-headline-container {
		height: var(--hero-story-teaser-background-media-height-mobile);
	}

	.c-hero-story-teaser .c-story-image-container--headline-inner-container {
		width: 100%;
	}

	.c-story-image-container-subteaser-container {
		width: calc(20 * var(--base-line-height));
		min-height: calc(20 * var(--base-line-height));
	}

	.c-hero-story-teaser-subteaser .c-story-image-container--headline.small {
		font-size: var(--hero-story-teaser-headline);
		line-height: var(--hero-story-teaser-headline-lineheight);
	}

	.c-hero-story-teaser-subteaser .c-story-image-container--headline.tiny {
		font-size: var(--hero-story-teaser-smallheadline);
		line-height: var(--hero-story-teaser-smallheadline-lineheight);
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-hero-story-teaser .c-story-image-container--headline-inner-container {
		width: calc(100% - 5 * var(--base-line-height));
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-hero-story-teaser .c-story-image-container--headline-inner-container {
		width: calc(100% - 15 * var(--base-line-height));
	}

	.c-hero-story-teaser .c-story-image-container--headline-outer-container.left-aligned .c-story-image-container--headline-inner-container {
		left: 15%;
		width: 70%;
	}
}

@media screen and (min-width: 768px),print {
	.c-hero-story-teaser .c-story-image-container--image-headline-container {
		padding-top: var(--hero-story-teaser-background-media-height-tablet);
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-hero-story-teaser.substory-top {
		margin-bottom: calc(1 * var(--base-line-height));
	}

	.c-hero-story-teaser.component-margin.substory-top {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-bottom .c-story-image-container--headline-outer-container {
		height: calc(100% - 5 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-bottom .c-hero-story-teaser-subteaser {
		margin-top: calc(-5 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-top .c-story-image-container--headline-outer-container {
		height: calc(100% - 16.5 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-top .c-hero-story-teaser-subteaser {
		margin-top: calc(-16.5 * var(--base-line-height));
	}

	.c-hero-story-teaser .c-story-image-container--headline-outer-container.left-aligned .c-story-image-container--headline-inner-container {
		left: 7%;
		width: 86%;
	}

	.c-story-image-container-subteaser-container:not(:last-child) {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.c-hero-story-teaser .c-story-image-container-subteaser-container .c-story-image-container--tagline {
		font-size: var(--hero-story-teaser-tag-tablet);
		line-height: var(--hero-story-teaser-tag-tablet);
	}

	.c-hero-story-teaser-subteaser .c-story-image-container--headline.small {
		font-size: var(--hero-story-teaser-headline-tablet);
		line-height: var(--hero-story-teaser-headline-tablet-lineheight);
	}

	.c-hero-story-teaser-subteaser .c-story-image-container--headline.tiny {
		font-size: var(--hero-story-teaser-smallheadline-tablet);
		line-height: var(--hero-story-teaser-smallheadline-tablet-lineheight);
	}

	.c-story-image-container-subteaser-container {
		width: calc(15 * var(--base-line-height));
		min-height: calc(15 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-hero-story-teaser.substory-top {
		margin-bottom: calc(3 * var(--base-line-height));
	}

	.c-hero-story-teaser.component-margin.substory-top {
		margin-bottom: calc(4.5 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-bottom .c-story-image-container--headline-outer-container {
		height: calc(100% - 10 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-bottom .c-hero-story-teaser-subteaser {
		margin-top: calc(-10 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-top .c-story-image-container--headline-outer-container {
		height: calc(100% - 24.5 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-top .c-hero-story-teaser-subteaser {
		margin-top: calc(-24.5 * var(--base-line-height));
	}

	.c-story-image-container-subteaser-container:not(:last-child) {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.c-story-image-container-subteaser-container {
		width: calc(21.5 * var(--base-line-height));
		min-height: calc(21.5 * var(--base-line-height));
	}

	.c-hero-story-teaser-subteaser .c-story-image-container--headline.small {
		font-size: var(--hero-story-teaser-headline);
		line-height: var(--hero-story-teaser-headline-lineheight);
	}

	.c-hero-story-teaser-subteaser .c-story-image-container--headline.tiny {
		font-size: var(--hero-story-teaser-smallheadline);
		line-height: var(--hero-story-teaser-smallheadline-lineheight);
	}
}

@media screen and (min-width: 1365px) {
	.c-hero-story-teaser.substory-top {
		margin-bottom: calc(4.5 * var(--base-line-height));
	}

	.c-hero-story-teaser.component-margin.substory-top {
		margin-bottom: calc(6 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-bottom .c-story-image-container--headline-outer-container {
		height: calc(100% - 15 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-bottom .c-hero-story-teaser-subteaser {
		margin-top: calc(-15 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-top .c-story-image-container--headline-outer-container {
		height: calc(100% - 32 * var(--base-line-height));
	}

	.c-hero-story-teaser.substory-top .c-hero-story-teaser-subteaser {
		margin-top: calc(-32 * var(--base-line-height));
	}

	.c-story-image-container-subteaser-container:not(:last-child) {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.c-story-image-container-subteaser-inner-container {
		padding: calc(4 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
	}

	.c-story-image-container-subteaser-container {
		width: calc(27.5 * var(--base-line-height));
		min-height: calc(27.5 * var(--base-line-height));
	}

	.c-hero-story-teaser-subteaser .c-story-image-container--headline.small {
		font-size: var(--hero-story-teaser-headline-large);
		line-height: var(--hero-story-teaser-headline-lineheight);
	}

	.c-hero-story-teaser-subteaser .c-story-image-container--headline.tiny {
		font-size: var(--hero-story-teaser-smallheadline-large);
		line-height: var(--hero-story-teaser-smallheadline-large-lineheight);
	}
}

/*!**************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/homepage-container/clientlib/css/homepage-container.css ***!
  \**************************************************************************************************************************************************************************************************************************************/
/**
 * @file homepage-container.css
 *
 * @description
 * define homepage container layout
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-homepage-container {
	overflow: hidden;
}

.c-homepage-container--background {
	padding-bottom: calc(4 * var(--base-line-height));
}

@media screen and (max-width: 767px),print {
	.c-homepage-container--button-container {
		padding: 0;
		padding-top: calc(1 * var(--base-line-height));
	}
}

@media screen and (max-width: 479px), screen and (min-width: 480px) and (max-width: 665px) {
	.c-homepage-container--background {
		padding-bottom: 0;
	}

	.c-homepage-container--button-container .base-button {
		width: 100%;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px), screen and (min-width: 768px), print {
	.c-homepage-container--button-container .base-button {
		width: auto;
		margin: 0 calc(0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-homepage-container--item {
		padding: 0 calc(2 * var(--base-line-height));
	}
}

/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/homepage-container/clientlib/css/homepage-element.css ***!
  \************************************************************************************************************************************************************************************************************************************/
/**
 * @file homepage-element.css
 *
 * @description
 * define homepage element within th container
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-homepage-element {
	padding-top: calc(2.5 * var(--base-line-height));
}

.c-homepage-element--item .link-text {
	margin-bottom: calc(1 * var(--base-line-height));
	text-align: left;
}

.c-homepage-element--item p {
	flex-basis: 100%;
	max-width: 100%;
	width: 100%;
	font-weight: normal;
}

.c-homepage-element--item .c-accordion--item h5 {
	margin-bottom: 0;
}

/* rtl:raw:
.link-text--link-mobile:after {
	display:inline-block;
}
*/

.c-homepage-element--item .link-text--link::after,
.c-homepage-element--item h5::after {
	font-size: var(--font-size-2);
	display: inline-block;
	margin: 0;
}

.c-homepage-element .link-lg-device {
	display: none;
}

.c-homepage-element .link-sm-device {
	display: block;
}

.is-editmdode .c-homepage-element--item .link-sm-device {
	display: none;
}

@media screen and (min-width: 480px) and (max-width: 665px), screen and (max-width: 479px) {
	.c-homepage-element {
		padding: calc(1.5 * var(--base-line-height)) 0 0 0;
	}

	.link.link-red.link-text--link-mobile.has-icon.link-external {
		padding-top: calc(0.5 * var(--base-line-height));
	}

	.c-homepage-element--item .link-text {
		margin-bottom: 0;
		padding: calc(1 * var(--base-line-height)) 0;
		border-top: 0.1rem solid var(--color-gray-300);
	}

	.c-homepage-element--item:last-of-type .link-text {
		border-bottom: 0.1rem solid var(--color-gray-300);
	}

	.c-homepage-element--item .link-text--link {
		padding: 0 calc(3 * var(--base-line-height)) 0 0;
	}

	.c-homepage-element--item .link-text--link::after,
	.c-homepage-element--item h5::after {
		content: var(--icon-chevron-down);
		font-size: var(--font-size-6);
		position: absolute;
		right: 0;
	}

	.c-homepage-element--item .link-text.is-open .link-text--link::after {
		content: var(--icon-chevron-up);
	}

	.c-homepage-element--item .link-text--icon-mobile {
		padding-top: 0;
		padding-right: 0;
	}

	.c-homepage-element.has-rte .link-text--link {
		color: var(--color-black-400);
	}

	/* General Lint-Bug */
	.c-homepage-element.has-rte .link-text.is-open .link-text--link {
		color: var(--color-red-500);
	}

	.c-homepage-container--button-container {
		padding-top: calc(1.5 * var(--base-line-height));
	}

	.c-homepage-teaser--textbox {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}
}

/**
 * breakpoint "s-l"
 * @size 666 - 767
 */
@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-homepage-element--item h5::after {
		content: "";
	}

	.c-homepage-element {
		margin-left: -calc(2 * var(--base-line-height));
		margin-right: -calc(2 * var(--base-line-height));
	}

	.c-homepage-element--item .link-text {
		margin-bottom: 0;
		padding: 0 calc(2 * var(--base-line-height));
	}

	.c-homepage-teaser--textbox > h1,
	.c-homepage-teaser--textbox > h2 {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	.c-homepage-container--button-container {
		margin-top: calc(2.5 * var(--base-line-height));
	}

	.c-homepage-element .link-text--wrapper {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}
}

/**
 * breakpoint "m"
 * @size >767
 */
@media screen and (min-width: 768px),print {
	.c-homepage-element--item h5::after {
		content: "";
	}

	.c-homepage-element--item .link-text {
		padding: 0 calc(2 * var(--base-line-height));
	}

	.c-homepage-element--item .link-text p {
		margin-bottom: 0;
	}

	.c-homepage-element .link-text--wrapper {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-homepage-teaser--textbox > h1,
	.c-homepage-teaser--textbox > h2 {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	.c-homepage-container--button-container {
		margin-top: calc(2.5 * var(--base-line-height));
	}

	.c-homepage-element .link-lg-device {
		display: block;
	}

	.c-homepage-element .link-sm-device {
		display: none;
	}

	.is-editmode .c-homepage-element--item .link-sm-device {
		display: none;
	}
}

/**
 * breakpoint "m-m"
 * @size >1023
 */
@media screen and (min-width: 1024px),print {
	.c-homepage-element--item.two-in-a-row {
		margin-left: 0.1rem;
		margin-right: 0.1rem;
	}

	.c-homepage-element--item .c-accordion--item h5 {
		margin-top: 0.8rem;
	}
}

@media screen and (min-width: 1365px) {
	.c-homepage-element {
		padding-left: 0;
		padding-right: 0;
	}

	.c-homepage-element--item .link-text {
		padding: 0 calc(2.5 * var(--base-line-height));
	}
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-homepage-element.component-wide {
		padding-left: 0;
		padding-right: 0;
	}

	.full-width-grid div:not(.is-fixed) .c-nav-secondary .c-nav--toggle {
		padding-right: calc((100% - var(--width-page-max-nopadding)) / 2 - 4.2rem);
	}
}

/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/homepage-container/clientlib/css/homepage-teaser.css ***!
  \***********************************************************************************************************************************************************************************************************************************/
/**
 * @file homepage-teaser.css
 *
 * @description
 * define homepage teaser
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* Will be fixed on a later state */
.c-homepage-teaser {
	overflow: hidden;
	position: relative;
}

.c-homepage-teaser.background-image {
	z-index: 0;
}

.c-homepage-teaser.background-image .c-homepage-teaser--image picture {
	height: 100%;
}

.c-homepage-teaser.teaser-image .c-homepage-teaser--image {
	height: calc(13 * var(--base-line-height));
}

.c-homepage-teaser.teaser-image .c-homepage-teaser--image picture {
	display: block;
	overflow: hidden;
}

.c-homepage-teaser.teaser-image .c-homepage-teaser--image img {
	display: block;
	height: 100%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	position: relative;
	transform: translateX(-50%);
}

.c-homepage-teaser .c-homepage-teaser--textbox {
	padding-top: calc(4 * var(--base-line-height));
}

.c-homepage-teaser .c-homepage-teaser--textbox p {
	font-size: var(--font-size-text-large);
}

.c-homepage-teaser .c-homepage-teaser--textbox h1 {
	color: var(--color-red-500);
}

.c-homepage-teaser.background-image .c-homepage-teaser--textbox {
	position: relative;
	z-index: 2;
}

.c-homepage-teaser.teaser-image {
	width: 100%;
}

.c-homepage-teaser--textbox {
	margin-bottom: calc(1.5 * var(--base-line-height));
	text-align: center;
}

/**
 * breakpoint "s-s"
 * @size 320 - 479
 * @size 480 - 665
 */
@media screen and (max-width: 479px), screen and (min-width: 480px) and (max-width: 665px) {
	.c-homepage-teaser--image-gradient {
		background: linear-gradient(to bottom, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 45%, rgba(242, 242, 242, 0) 100%);
		bottom: 16rem;
		height: 2.8rem;
		position: absolute;
		width: 100%;
		z-index: 10;
	}

	.c-homepage-teaser .c-homepage-teaser--textbox {
		padding-top: 0;
	}

	.c-homepage-teaser.background-image .c-homepage-teaser--image picture img {
		position: relative;
		height: calc(13 * var(--base-line-height));
		width: 100%;
	}
}

/**
 * major breakpoint "s-l"
 * @size 666 - 767
 */
@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-homepage-teaser.background-image .c-homepage-teaser--textbox.has-background-image {
		padding-bottom: calc(17.4 * var(--base-line-height));
	}

	.c-homepage-teaser.background-image .c-homepage-teaser--image {
		height: calc(81 * var(--base-line-height));
		left: -100%;
		overflow: hidden;
		position: absolute;
		width: 300%;
		z-index: 1;
		bottom: 0;
	}

	.c-homepage-teaser .c-homepage-teaser--textbox {
		padding-top: calc(4 * var(--base-line-height));
	}

	.c-homepage-teaser.teaser-image .c-homepage-teaser--image {
		height: calc(20 * var(--base-line-height));
	}

	.c-homepage-teaser .c-homepage-teaser--textbox p {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	.c-homepage-teaser.background-image .c-homepage-teaser--image picture img {
		bottom: 0;
		display: block;
		left: 0;
		margin: 0 auto;
		overflow: hidden;
		position: absolute;
		right: 0;
	}
}

/**
 * major breakpoint "m"
 * @size >=768
 */
@media screen and (min-width: 768px),print {
	.c-homepage-teaser.background-image .c-homepage-teaser--image {
		height: calc(81 * var(--base-line-height));
		left: -100%;
		overflow: hidden;
		position: absolute;
		width: 300%;
		z-index: 1;
		bottom: 0;
	}

	.c-homepage-teaser .c-homepage-teaser--textbox {
		padding-top: calc(4 * var(--base-line-height));
	}

	.c-homepage-teaser.background-image .c-homepage-teaser--textbox.has-background-image {
		padding-bottom: calc(17.4 * var(--base-line-height));
	}

	.c-homepage-teaser .c-homepage-teaser--textbox p {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	.c-homepage-teaser.background-image .c-homepage-teaser--image picture img {
		bottom: 0;
		display: block;
		left: 0;
		margin: 0 auto;
		overflow: hidden;
		position: absolute;
		right: 0;
	}
}

/**
 * major breakpoint "m-s"
 * @size 768 - 1023
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-homepage-teaser.teaser-image .c-homepage-teaser--image {
		height: calc(20 * var(--base-line-height));
	}
}

/**
 * major breakpoint "m-m"
 * @size 1023 - 1365
 */
@media screen and (min-width: 1024px),print {
	.c-homepage-teaser.teaser-image .c-homepage-teaser--image {
		height: calc(25 * var(--base-line-height));
	}
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/horizontal-ruler/clientlib/css/horizontal-ruler.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
/**
 * @file horizontal-ruler.css
 *
 * @description
 * define horizontal ruler
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* because the body tag is necessary to make :not(.no-js) properly work */
body:not(.no-js) .c-horizontal-ruler.hidden {
	display: none;
}

.c-horizontal-ruler.invisible {
	opacity: 0;
}

.c-horizontal-ruler--wide,
.c-horizontal-ruler--narrow {
	border: 0;
}

.c-horizontal-ruler--wide {
	border-bottom: 0.1rem solid var(--color-gray-200);
}

.c-horizontal-ruler--narrow {
	border-bottom: 0.2rem solid var(--color-gray-400);
}

.left-aligned-grid .c-horizontal-ruler--wide {
	border-bottom: 0.2rem solid var(--color-gray-300);
}

/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/horizontal-teaser-cta-campaign/clientlib/css/horizontal-teaser-cta-campaign.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
body.black .c-horizontal-teaser-cta-campaign--container {
	color: var(--color-white-500);
}

.c-horizontal-teaser-cta-campaign--container {
	align-items: flex-start;
	color: var(--color-black-400);
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: calc((16 * var(--base-line-height)) + 0.4rem);
	padding: 0 calc(1.5 * var(--base-line-height));
	pointer-events: auto;
}

.c-horizontal-teaser-cta-campaign--headline {
	font-size: var(--font-size-h3-mobile);
	font-weight: 800;
	line-height: 2.4rem;
	margin-bottom: var(--base-line-height);
}

.c-horizontal-teaser-cta-campaign--link {
	width: auto;
	margin-bottom: 0;
}

.left-aligned-grid .c-horizontal-teaser-cta-campaign--link {
	font-size: var(--font-size-standard);
}

@media screen and (min-width: 768px),print {
	.c-horizontal-teaser-cta-campaign--headline {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-horizontal-teaser-cta-campaign--container {
		max-width: calc((20 * var(--base-line-height)) + 0.4rem);
		margin-bottom: calc(2 * var(--base-line-height));
		margin-right: calc(1.5 * var(--base-line-height));
	}
}

/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/horizontal-teaser/clientlib/css/horizontal-teaser.css ***!
  \************************************************************************************************************************************************************************************************************************************/
.c-horizontal-teaser-wrapper {
	max-width: 192rem;
	width: 100%;
}

body.black .c-horizontal-teaser {
	color: var(--color-white-500);
}

.c-horizontal-teaser {
	display: block;
	text-align: center;
	overflow: hidden;
	margin-top: calc(2.5 * var(--base-line-height));
}

.left-aligned-grid .c-horizontal-teaser {
	padding-top: 0;
}

.c-horizontal-teaser--container {

	/* Need important to overwrite the value set by JS code (via style attribute) */
	height: auto !important; /* stylelint-disable-line declaration-no-important */
	position: relative;
}

.c-horizontal-teaser--viewport {
	position: relative;
	width: auto;
}

.c-horizontal-teaser--headline {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.left-aligned-grid .c-horizontal-teaser--headline {
	text-align: left;
}

.c-horizontal-teaser--tile {
	position: relative;
	max-width: 22.8rem;
	min-height: calc((22 * var(--base-line-height)) + 0.3rem);
	border-radius: 0.4rem;
	background-color: var(--color-white-500);
	margin-right: var(--base-line-height);
	color: var(--color-black-400);
}

.left-aligned-grid .c-horizontal-teaser--tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 0;
	box-shadow: var(--shadow-small);
}

.left-aligned-grid .c-horizontal-teaser--tile:hover {
	box-shadow: var(--shadow-medium);
}

.left-aligned-grid .c-horizontal-teaser--tile:focus {
	box-shadow: var(--shadow-large);
}

.left-aligned-grid .c-horizontal-teaser--tile > * {
	flex-basis: auto;
}

.c-horizontal-teaser--tile img {
	overflow: hidden;
}

a.c-horizontal-teaser--tile:focus {
	box-shadow: 0 0 0 0.3rem var(--color-black-400), 0 5rem 3rem -3.5rem rgba(0, 0, 0, 0.16), 0.2rem 1rem 10rem 0 rgba(0, 0, 0, 0.1);
}

.c-horizontal-teaser--tile-text-content {
	padding: var(--base-line-height);
	position: relative;
}

.c-horizontal-teaser--tile-headline {
	font-size: calc(var(--base-line-height) + 0.4rem);
	line-height: calc((1.5 * var(--base-line-height)) + 0.1rem);
	font-weight: 800;
}

.left-aligned-grid .c-horizontal-teaser--tile-headline {
	flex-basis: auto;
	margin-bottom: 0;
	transition: color 200ms;
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: bold;
}

.left-aligned-grid .c-horizontal-teaser--tile-headline::after {
	content: var(--icon-chevron-forward);
	display: inline-block;
	font-family: "dhlicons";
	margin-left: 0.3rem;
	font-size: 1.3rem;
	font-weight: normal;
	color: var(--color-red-500);
}

/* rtl:raw:
.left-aligned-grid .c-horizontal-teaser--tile-headline::after {
	transform: scaleX(-1);
} */

.left-aligned-grid .c-horizontal-teaser--tile:hover .c-horizontal-teaser--tile-headline {
	color: var(--color-red-500);
	text-decoration: underline;
}

a.c-horizontal-teaser--tile:hover .c-horizontal-teaser--tile-headline {
	color: var(--color-red-500);
}

.c-horizontal-teaser--tile-tagline {
	position: absolute;
	padding: 0 var(--base-line-height);
	font-size: calc(var(--base-line-height) + 0.4rem);
	line-height: calc(var(--base-line-height) + 0.4rem);
	font-weight: 200;
	text-transform: uppercase;
	bottom: var(--base-line-height);
}

.left-aligned-grid .c-horizontal-teaser--tile-tagline {
	display: none;
}

.c-horizontal-teaser--container > .c-slider-navigation-wrapper--csb {
	margin-top: calc(3.5 * var(--base-line-height));
}

.c-horizontal-teaser--container > .c-slider-navigation-wrapper--csb .c-slider-wrapper {
	align-items: baseline;
	display: flex;
	margin: 0 calc(var(--base-line-height) + 0.1rem);
	padding: 0 calc(var(--base-line-height) + 0.1rem);
}

.c-horizontal-teaser--container .c-slider--navigation {
	margin-bottom: 0;
}

.c-horizontal-teaser .c-slider--index {
	margin: calc(2 * var(--base-line-height)) 0 0 0;
}

.c-horizontal-teaser .c-slider--index li {
	height: 0.8rem;
	width: 0.8rem;
	box-sizing: border-box;
	border: 0.1rem solid var(--color-gray-500);
	background-color: var(--color-gray-200);
}

.c-horizontal-teaser .c-slider--index .is-active {
	border: 0.1rem solid var(--color-red-400-4);
	background-color: var(--color-red-500);
	transform: none;
}

.c-horizontal-teaser .c-slider--control span {
	font-size: calc(6.5 * var(--base-line-height));
}

.c-horizontal-teaser .c-slider--control span::before {
	transition: right 250ms ease, left 250ms ease;
}

.c-horizontal-teaser--slider {
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	transition: left 400ms, margin-left 200ms;
}

@media screen and (max-width: 767px),print {
	.c-slider-navigation-wrapper--csb {
		margin-top: calc(4 * var(--base-line-height));
	}

	.left-aligned-grid .c-slider-navigation-wrapper--csb {
		margin-top: calc(3.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-horizontal-teaser--tile-text-content {
		padding: calc(1.5 * var(--base-line-height)) var(--base-line-height);
	}
}

@media screen and (min-width: 768px),print {
	.c-horizontal-teaser {
		margin-top: calc(3 * var(--base-line-height));
	}

	.c-horizontal-teaser--tile {
		max-width: 28.4rem;
		min-height: calc((28 * var(--base-line-height)) + 1rem);
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.c-horizontal-teaser--tile-text-content {
		padding: calc(1.5 * var(--base-line-height));
	}

	.c-horizontal-teaser--tile-headline {
		font-size: calc((1.5 * var(--base-line-height)) + 0.1rem);
		line-height: calc(2 * var(--base-line-height));
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-horizontal-teaser--tile-tagline {
		font-size: calc(1.5 * var(--base-line-height));
		line-height: calc(1.5 * var(--base-line-height));
		bottom: calc(1.5 * var(--base-line-height));
		padding: 0 calc(1.5 * var(--base-line-height));
	}

	.c-horizontal-teaser--slider {
		pointer-events: none;
	}

	.c-horizontal-teaser--container > .c-slider-navigation-wrapper--csb {
		margin-top: calc(2 * var(--base-line-height));
	}

	a.c-horizontal-teaser--tile {
		transition: 200ms;
		pointer-events: auto;
	}

	html:not(.left-aligned-grid) a.c-horizontal-teaser--tile:not(.c-viewport-animation):hover {
		transform: scale(1.05);
		cursor: pointer;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) a.c-horizontal-teaser--tile.c-viewport-animation:nth-child(2n) {
		transition-delay: 100ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) a.c-horizontal-teaser--tile.c-viewport-animation:nth-child(3n) {
		transition-delay: 150ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) a.c-horizontal-teaser--tile.c-viewport-animation:nth-child(4n) {
		transition-delay: 200ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) a.c-horizontal-teaser--tile.c-viewport-animation:nth-child(5n) {
		transition-delay: 250ms;
	}

	html.viewport-animation:not(.is-editmode):not(.no-js) a.c-horizontal-teaser--tile.c-viewport-animation:nth-child(6n) {
		transition-delay: 300ms;
	}
}

/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/icon-bar/clientlib/css/icon-bar.css ***!
  \******************************************************************************************************************************************************************************************************************/
/**
 * @file icon-bar.css
 *
 * @description
 * define icon bar container and element
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-icon-bar--list {
	margin-bottom: 0;
}

.c-icon-bar--item {
	min-height: calc(7.5 * var(--base-line-height));
	list-style-type: none;
	border-radius: 0.4rem;
	transition: box-shadow 200ms, transform 200ms;
	transform: translateY(0);
	box-shadow: var(--shadow-small);
	margin-bottom: var(--base-line-height);
}

.c-icon-bar--item:hover {
	transform: translateY(-0.2rem);
	box-shadow: var(--shadow-medium);
}

.c-icon-bar--item a:focus {
	transform: translateY(0);
	box-shadow: var(--shadow-large);
}

.c-icon-bar--item a {
	padding: calc(1 * var(--base-line-height));
	position: relative;
	align-content: center;
}

.c-icon-bar--item a::after {
	bottom: 0;
	content: "";
	cursor: pointer;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 200ms;
	transition-timing-function: ease-out;
}

.c-icon-bar--item .link-internal,
.c-icon-bar--item .link-external {
	line-height: var(--body-font-size);
	font-size: var(--base-line-height);
}

.c-icon-bar--item a:hover::after,
.c-icon-bar--item a:focus::after,
.is-touch .c-icon-bar--item a:active::after {
	opacity: 1;
}

.c-icon-bar--icon {
	height: calc(3 * var(--base-line-height) - 0.2rem);
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-icon-bar.c-icon-bar--items-yellow .c-icon-bar--item {
	background: var(--color-yellow-500); /* Old browsers */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--color-yellow-500)), color-stop(83%, var(--color-yellow-400))); /* Chrome,Safari4+ */
	background: linear-gradient(to bottom, var(--color-yellow-500) 0%, var(--color-yellow-400) 83%); /* W3C */
}

.c-icon-bar--item img {
	align-self: center;
	display: block;
	height: calc(2.5 * var(--base-line-height));
	width: calc(2.5 * var(--base-line-height));
	margin: auto;

	/* transform: scale(1); */
	z-index: 1;
	transition: transform 200ms;
	transition-timing-function: ease-out;
}

.c-icon-bar--item span {
	display: block;
	color: var(--color-black-400);
	font-weight: bold;
	position: relative;
	z-index: 1;
	transition: color 200ms;
	font-size: var(--font-size-text-small);
}

.c-icon-bar--item a.link-red span {
	color: var(--color-red-500);
}

.c-icon-bar--item-subline {
	font-size: var(--base-line-height);
	line-height: calc(var(--base-line-height) + 0.1rem);
	color: var(--color-gray-600);
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-icon-bar--grey.c-icon-bar,
.c-icon-bar--yellow.c-icon-bar {
	margin-top: 0;
}

.c-icon-bar--grey .c-icon-bar--list,
.c-icon-bar--yellow .c-icon-bar--list {
	padding: calc(1.5 * var(--base-line-height));
	padding-bottom: calc((1.5 * var(--base-line-height)) - var(--base-line-height));
}

.c-icon-bar--grey .c-icon-bar--list {
	background: var(--color-gray-50);
}

.c-icon-bar--yellow .c-icon-bar--list {
	background: var(--linear-gradient-yellow-to-bottom);
}

.c-icon-bar--grey .c-icon-bar--item,
.c-icon-bar--yellow .c-icon-bar--item {
	background: var(--color-white-500);
}

@media screen and (min-width: 768px),print, screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1024px), print {
	.c-icon-bar--item a {
		padding: var(--base-line-height);
	}
}

@media screen and (min-width: 480px) and (max-width: 665px), screen and (min-width: 666px) and (max-width: 767px) {
	.c-icon-bar--item {

		/* creates gap of 14px between two boxes */
		max-width: calc(50% - (0.5 * var(--base-line-height)));
	}

	.c-icon-bar--item:nth-child(odd):not(:last-child) {
		margin-right: calc(0.5 * var(--base-line-height));
	}

	.c-icon-bar--item:nth-child(even) {
		margin-left: calc(0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-icon-bar--item {

		/* creates gap of 14px between two boxes */
		max-width: calc(33% - var(--base-line-height));
	}

	.c-icon-bar--item:nth-child(3n+1):not(:last-child) {
		margin-left: 0;
		margin-right: calc(0.5 * var(--base-line-height));
	}

	.c-icon-bar--item:nth-child(3n+2):not(:last-child) {
		margin-left: calc(0.5 * var(--base-line-height));
		margin-right: calc(0.5 * var(--base-line-height));
	}

	.c-icon-bar--item:nth-child(3n+3),
	.c-icon-bar--item:nth-child(3n+2):last-child {
		margin-left: calc(0.5 * var(--base-line-height));
		margin-right: 0;
	}
}

@media screen and (min-width: 1024px),print {
	.c-icon-bar--yellow .c-icon-bar--list {
		background: var(--linear-gradient-yellow-to-right);
	}

	.c-icon-bar--list {
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	.c-icon-bar--item + .c-icon-bar--item {
		margin-left: var(--base-line-height);
	}

	.c-icon-bar--item {

		/* creates gap of 14px between two boxes */
		max-width: calc(50% - (0.5 * var(--base-line-height)));
	}
}

.is-touch .c-icon-bar--item a:focus span,
.is-touch .c-icon-bar--item a:hover span {

	/* No hover on touch devices */
	color: var(--color-black-400);
}

.c-icon-bar--item a:hover span,
.c-icon-bar--item a:focus span,
.is-touch .c-icon-bar--item a:active span {
	color: var(--color-red-500);
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/icon-list/clientlib/css/icon-list.css ***!
  \********************************************************************************************************************************************************************************************************************/
/**
 * @file icon-list.css
 *
 * @description
 * define icon list container with its elements
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* Will be fixed on a later state */

.c-icon-list {
	text-align: center;
}

.c-icon-list--container {
	float: left;
	max-width: calc(72 * var(--base-line-height));
}

.c-icon-list--button-container {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-icon-list--copy {
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-icon-list--copy p {
	width: 100%;
	word-break: break-word;
	font-size: var(--font-size-text-large);
}

.c-icon-list h3 {
	margin-bottom: var(--base-line-height);
}

.c-icon-list--item {
	padding: 0 calc(1 * var(--base-line-height));
	margin-bottom: calc(1.5 * var(--base-line-height));
	min-height: calc(9.5 * var(--base-line-height));
	display: flex;
	flex-direction: column;
	align-items: center;
}

.c-icon-list--item:not(span):hover .c-icon-list--icon {
	border-color: var(--color-red-400);
}

.c-icon-list--item:not(span):hover .c-icon-list--icon-headline {
	color: var(--color-red-400);
}

.c-icon-list--item:not(span):focus .c-icon-list--icon-headline {
	border-color: var(--color-red-500);
}

.c-icon-list--item:not(span):hover .c-icon-list--icon img {
	transform: scale(1.1);
}

.c-icon-list--icon {
	background-color: var(--color-gray-50);
	border: 0.1rem solid transparent;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(5.5 * var(--base-line-height));
	width: calc(5.5 * var(--base-line-height));
	transition: border 200ms;
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-icon-list--icon img {
	display: block;
	height: calc(3 * var(--base-line-height));
	width: calc(3 * var(--base-line-height));
	transition: transform 200ms;
	transform: scale(1);
}

.c-icon-list--icon-headline {
	color: var(--color-red-500);
	display: inline;
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: bold;
	text-align: center;
	font-size: var(--body-font-size);
	border: 0.1rem solid transparent;
	max-width: calc(11 * var(--base-line-height));
}

span.c-icon-list--item .c-icon-list--icon-headline {
	color: var(--color-black-400);
}

@media screen and (max-width: 767px),print {
	.c-icon-list--container {
		justify-content: flex-start;
	}
}

@media screen and (max-width: 479px) {
	.c-icon-list--item {
		width: 50%;
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-icon-list--item {
		width: 33.333%;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-icon-list--item {
		width: 33.333%;
	}
}

@media screen and (min-width: 768px),print {
	.c-icon-list--item {
		min-height: calc(10 * var(--base-line-height));
	}

	.c-icon-list h3 {
		line-height: calc(2.5 * var(--base-line-height));
		font-size: var(--font-size-h3-tablet);
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-icon-list--item {
		width: 25%;
	}
}

@media screen and (min-width: 1024px),print {
	.c-icon-list--item {
		width: calc(100% / 4);
	}
}

/* IE11 Bugfix */
@media screen and (min-width: 1365px) {
	.full-width-grid .c-icon-list .c-icon-list--copy,
	.full-width-grid .c-icon-list h3,
	.full-width-grid .c-icon-list a,
	.full-width-grid .c-icon-list--button-container {
		margin-left: inherit;
		margin-right: inherit;
	}
}

/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/iframe/clientlib/css/iframe.css ***!
  \**************************************************************************************************************************************************************************************************************/
/**
 * @file iframe.css
 *
 * @description
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* Content of iFrame needs to have special styling */
.c-iframe {
	border: none;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

.c-iframe--wrapper {

	/* enable scrolling on touch devices */
	-webkit-overflow-scrolling: touch;
	overflow: auto;
	position: relative;
}

.c-iframe--wrapper .ratio {
	display: block;
	width: 100%;
	height: auto;
}

.c-iframe--wrapper iframe {
	width: 100%;
	height: 100%;
}

.c-iframe iframe {
	border: none;
	display: block;
}

.c-iframe > * {
	display: block;
	max-width: 100%;
	min-width: 100%;
	width: 100%;
	margin: 0 auto;
}

.c-iframe * {
	max-width: 100%;
}

/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/link/clientlib/css/link.css ***!
  \**********************************************************************************************************************************************************************************************************/
.c-link {
	margin-bottom: 0;
}

/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/marketing-stage-teaser/clientlib/css/marketing-stage-teaser.css ***!
  \**********************************************************************************************************************************************************************************************************************************************/
/**
 * @file component-marketing-stage-teaser.css
 *
 * @description
 *
 * Styles for the component-marketing-stage-teaser. An marketing-stage-teaser component
 */

.c-marketing-stage-teaser.component-wide {
	padding-top: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-marketing-stage-teaser.component-wide {
	padding-top: 0;
}

.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser--image-container {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
}

.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser-image-content-container {
	position: static;
	flex: 1;
	padding: 0 calc(var(--base-line-height) * 2) 0 0;
}

.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser--content-container {
	padding: 0 calc(var(--base-line-height) * 2) 0 0;
}

.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser--full-pic {
	flex: 3;
}

.c-marketing-stage-teaser img {
	width: 100%;
}

.c-marketing-stage-teaser h3 {
	margin-bottom: calc(1 * var(--base-line-height));
}

.left-aligned-grid .c-marketing-stage-teaser h3 {
	font-size: 2.2rem;
	line-height: 2.4rem;
}

.left-aligned-grid .c-marketing-stage-teaser p,
.left-aligned-grid .c-marketing-stage-teaser ul,
.left-aligned-grid .c-marketing-stage-teaser ol,
.left-aligned-grid .c-marketing-stage-teaser a.link {
	font-size: 1.5rem;
	line-height: calc(1.5 * var(--base-line-height));
}

.c-marketing-stage-teaser a.link,
.c-marketing-stage-teaser p {
	font-size: var(--font-size-text-large);
	line-height: calc(1.75 * var(--base-line-height));
	width: 100%;
}

.c-marketing-stage-teaser .c-marketing-stage-teaser--content-container p {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-marketing-stage-teaser--image-container {
	position: relative;
	font-size: 0;
	line-height: 0;
}

.c-marketing-stage-teaser--content-container {
	margin-top: calc(1.5 * var(--base-line-height));
}

.c-marketing-stage-teaser--text-container a.link {
	width: auto;
}

.c-marketing-stage-teaser--text-container ul,
.c-marketing-stage-teaser--text-container ol {
	font-size: var(--font-size-text-large);
	line-height: calc(1.75 * var(--base-line-height));
	margin-left: calc(2 * var(--base-line-height));
	padding-left: var(--base-line-height);
}

.c-marketing-stage-teaser--button-container a.link:hover,
.c-marketing-stage-teaser--text-container .has-rte a.link:hover {
	text-decoration: underline;
}

.c-marketing-stage-teaser--button-container a.link:hover::after,
.c-marketing-stage-teaser--text-container .has-rte a.link:hover::after {
	display: inline-block;
}

.c-marketing-stage-teaser--button-container a.link:focus,
.c-marketing-stage-teaser--text-container .has-rte a.link:focus {
	color: var(--color-red-500);
	outline: 0.1rem solid var(--color-red-500);
	text-decoration: none;
	width: auto;
}

.c-marketing-stage-teaser--button-container a.link:not(:last-child) {
	margin-bottom: var(--base-line-height);
}

@media screen and (max-width: 767px),print {
	.c-marketing-stage-teaser {
		padding-left: calc(1.5 * var(--base-line-height));
		padding-right: calc(1.5 * var(--base-line-height));
	}

	.c-marketing-stage-teaser--text-container picture,
	.c-marketing-stage-teaser--image-container picture:not(.l-grid--hidden-s) {
		display: block;
	}

	html:not(.left-aligned-grid) .c-marketing-stage-teaser picture:not(.c-marketing-stage-teaser--box-side-pic) {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser--image-container {
		flex-direction: column;
	}

	.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser-image-content-container {
		position: static;
		padding: calc(1.5 * var(--base-line-height)) 0 0;
		margin-top: 0;
	}

	.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser--content-container {
		padding: calc(1.5 * var(--base-line-height)) 0 0;
		margin-top: 0;
	}

	.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser--image-container .c-marketing-stage-teaser--box-side-pic {
		display: block;
	}

	.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser-image-content-container .c-marketing-stage-teaser--text-container .c-marketing-stage-teaser--wide-pic {
		display: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-marketing-stage-teaser--content-container {
		padding: 0 calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser--image-container {
		flex-direction: column;
	}

	.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser-image-content-container {
		position: static;
		padding: 2.1rem 0 0;
	}

	.left-aligned-grid .c-marketing-stage-teaser .c-marketing-stage-teaser--content-container {
		padding: 2.1rem 0 0;
		margin-top: 0;
	}
}

@media screen and (min-width: 768px),print {
	.c-marketing-stage-teaser:not(.component-wide) {
		padding-left: 0;
		padding-right: 0;
	}

	.c-marketing-stage-teaser:not(.component-wide) .c-marketing-stage-teaser--content-container {
		padding-right: calc(3 * var(--base-line-height));
	}

	.c-marketing-stage-teaser:not(.component-wide).type-image-right .c-marketing-stage-teaser--content-container {
		padding-left: calc(3 * var(--base-line-height));
	}

	.c-marketing-stage-teaser .c-marketing-stage-teaser--image-container:not(.l-grid--w-66pc-m-m) img {
		height: 100%;
	}

	.c-marketing-stage-teaser-image-content-container {
		position: absolute;
		background-color: var(--color-white-500);
		padding: calc(2.5 * var(--base-line-height));
		width: calc(21 * var(--base-line-height));
		height: auto;
		top: calc(2 * var(--base-line-height));
		right: calc(3 * var(--base-line-height));
	}

	.c-marketing-stage-teaser--content-container.vertically-center {
		align-self: center;
	}

	.c-marketing-stage-teaser-image-content-container.type-transparent {
		background-color: var(--color-white-opacity-80);
	}

	.c-marketing-stage-teaser-image-content-container.type-wide {
		width: calc(32.5 * var(--base-line-height));
	}

	.c-marketing-stage-teaser-image-content-container.type-box-left {
		right: auto;
		left: calc(3 * var(--base-line-height));
	}

	.c-marketing-stage-teaser .base-button {
		margin: 0 calc(1 * var(--base-line-height)) calc(1 * var(--base-line-height)) 0;
	}
}

@media screen and (min-width: 1024px),print {
	.c-marketing-stage-teaser--content-container {
		padding-left: calc(2 * var(--base-line-height));
		margin-top: 0;
	}

	.c-marketing-stage-teaser--content-container:not(.vertically-center) {
		padding-top: calc(1.5 * var(--base-line-height));
	}

	.c-marketing-stage-teaser--content-container.has-no-padding-top {
		padding-top: 0;
	}

	.c-marketing-stage-teaser.type-image-right .c-marketing-stage-teaser--content-container {
		padding-right: calc(2 * var(--base-line-height));
		padding-left: 0;
		order: 1;
	}

	.c-marketing-stage-teaser.type-image-right .c-marketing-stage-teaser--image-container {
		order: 2;
	}
}

@media screen and (min-width: 1365px) {
	.c-marketing-stage-teaser--content-container {
		padding-left: calc(2 * var(--base-line-height));
	}

	.c-marketing-stage-teaser-image-content-container {
		top: calc(3 * var(--base-line-height));
		right: calc(6 * var(--base-line-height));
	}

	.c-marketing-stage-teaser-image-content-container.type-box-left {
		right: auto;
		left: calc(6 * var(--base-line-height));
	}

	/* Safari only Fix for image height */
	_::-webkit-full-page-media,
	_:future,
	:root .c-marketing-stage-teaser .c-marketing-stage-teaser--image-container.l-grid--w-66pc-m-m picture {
		max-height: calc(33.4 * var(--base-line-height));
	}
}

/**
 * minor breakpoint "m-m"
 * @size > 1365
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-marketing-stage-teaser {
		max-width: var(--width-page-max);
		margin-left: auto;
		margin-right: auto;
	}
}

/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/message-bar/clientlib/css/message-bar.css ***!
  \************************************************************************************************************************************************************************************************************************/
.c-message-bar--message {
	margin-bottom: calc(0.5 * var(--base-line-height));
	padding: var(--base-line-height) calc(2 * var(--base-line-height)) var(--base-line-height) calc(1.5 * var(--base-line-height));
	background-color: var(--color-gray-50);
	border-left: calc(0.5 * var(--base-line-height)) solid var(--color-red-500);
}

.c-message-bar--message:last-child {
	margin: 0;
}

.c-message-bar--message.vertical-line-yellow {
	border-color: var(--color-yellow-500);
}

.c-message-bar--message.vertical-line-green {
	border-color: var(--color-green-500);
}

.c-message-bar--message.vertical-line-none {
	padding-left: calc(2 * var(--base-line-height));
	border: none;
}

.c-message-bar--date {
	display: block;
	margin-bottom: calc(0.5 * var(--base-line-height));
	color: var(--color-gray-600);
}

.c-message-bar--rte-container {
	max-width: 80rem;
	color: var(--color-black-400);
}

.c-message-bar--rte-container > .list,
.c-message-bar--rte-container.has-rte > .list {
	margin: var(--base-line-height) 0;
	padding: 0 0 0 calc(2 * var(--base-line-height));
}

.c-message-bar--rte-container > .list li {
	line-height: calc(1.5 * var(--base-line-height));
}

.c-message-bar--rte-container > .list li::before {
	left: -1.8rem;
}

.c-message-bar--rte-container > ul.list li::before {
	top: -0.1rem;
}

.c-message-bar--rte-container > p,
.c-message-bar--rte-container > .list li:not(:last-child) {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-message-bar--rte-container > :first-child {
	margin-top: 0;
}

.c-message-bar--rte-container > :last-child {
	margin-bottom: 0;
}

.c-message-bar--link-container {
	display: flex;
	justify-content: flex-end;
	margin-top: calc(0.5 * var(--base-line-height));
}

/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/numbers/clientlib/css/numbers.css ***!
  \****************************************************************************************************************************************************************************************************************/
.c-numbers--headline {
	margin-bottom: var(--base-line-height);
	text-align: center;
}

.c-numbers--rte-container {
	font-size: var(--font-size-text-large);
}

.c-numbers .c-media-tiles:not(:first-child) {
	margin-top: calc(2.5 * var(--base-line-height));
}

@media screen and (min-width: 768px),print {
	.c-numbers .c-media-tiles:not(:first-child) {
		margin-top: calc(3 * var(--base-line-height));
	}
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-numbers .c-media-tiles--column:nth-child(2) {
	transition-delay: 200ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-numbers .c-media-tiles--column:nth-child(3) {
	transition-delay: 400ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-numbers .c-media-tiles--column:nth-child(4) {
	transition-delay: 600ms;
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/overlay-small/clientlib/css/overlay-small.css ***!
  \****************************************************************************************************************************************************************************************************************************/
.c-overlay-small {
	position: fixed;
	z-index: 1002;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
}

.c-overlay-small h3 {
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-overlay-small > div {
	height: 100%;
}

.c-overlay-small.yellow {
	background-color: var(--overlay-yellow-90);
	z-index: 2147483647;
}

.c-overlay-small.grey {
	background-color: var(--overlay-dark-50);
}

.c-overlay-small--box {
	background-color: var(--color-white-500);
	width: calc(54 * var(--base-line-height));
	margin: auto;
	position: relative;
	height: auto;
	max-height: calc(100% - 10rem);
	top: 50%;
	transform: translateY(-50%);
	overflow: auto;
}

.c-overlay-small--scrollcontainer {
	overflow: hidden;
}

.c-overlay-small--inner {
	overflow: auto;
	margin: calc(4 * var(--base-line-height));
	height: calc(100% - (6 * var(--base-line-height)));
	font-size: var(--font-size-standard);
}

.c-overlay-small .c-product-close {
	top: calc(1 * var(--base-line-height));
	right: calc(1.3 * var(--base-line-height));
	padding-top: 1.3rem;
	margin-top: -0.5rem;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
}

.c-overlay-small--button-container {
	margin-top: calc(1.5 * var(--base-line-height));
	display: flex;
	justify-content: center;
}

.c-overlay-small--button-container a {
	margin: 0 1.4rem;
}

.c-overlay-small .c-product-close::before {
	color: var(--color-red-500);
	font-size: 2.1rem;
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/page-headline/clientlib/css/page-headline.css ***!
  \****************************************************************************************************************************************************************************************************************************/
html:not(.left-aligned-grid) .c-page-headline.component-margin {
	margin-bottom: calc(3 * var(--base-line-height));
}

.c-page-headline-margin-bottom,
.c-page-headline--wrapper {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-page-headline > :last-child,
.c-page-headline--wrapper > :last-child {
	margin-bottom: 0;
}

html:not(.left-aligned-grid) .c-page-headline > * {
	text-align: center;
}

.c-page-headline p {
	font-size: var(--font-size-text-large);
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-page-headline h1,
.c-page-headline h2,
.c-page-headline h3 {
	color: var(--color-red-500);
}

.c-page-headline .sub-h1,
.c-page-headline .sub-h2,
.c-page-headline .sub-h3 {
	display: block;
	margin-top: calc(-2 * var(--base-line-height));
	font-weight: 200;
}

.left-aligned-grid .c-page-headline--wrapper h2.sub-h2 {
	margin-top: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-page-headline h1,
.left-aligned-grid .c-page-headline h2:not(.sub-h2),
.left-aligned-grid .c-page-headline h3 {
	margin-bottom: 0;
}

.left-aligned-grid .c-page-headline-margin-bottom,
.left-aligned-grid .c-page-headline--wrapper {
	margin-bottom: calc(2 * var(--base-line-height));
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/productcards/clientlib/css/productcards.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/**
 * @file productcards.css
 *
 * @description
 * Define Productcards
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-productcard:last-child {
	margin-bottom: 0;
}

.c-productcard-header {
	background-color: var(--color-white-500);
}

.c-productcard-headline {
	background-color: var(--color-gray-50);
	color: var(--color-black-400);
	font-weight: 800;
	margin-bottom: 0;
	padding: var(--base-line-height) var(--base-line-height) calc(1 * var(--base-line-height)) var(--base-line-height);

	/* IE10 fix for line break */
	flex-direction: column;
}

.c-productcard-subheadline {
	background-color: var(--color-gray-50);
	padding: calc(0.5 * var(--base-line-height)) var(--base-line-height) var(--base-line-height) var(--base-line-height);

	/* IE10 fix for line break */
	flex-direction: column;
}

.c-productcard-headline + .c-productcard-subheadline {
	margin-top: calc(-0.5 * var(--base-line-height));
	padding-top: 0;
}

.c-productcard-header-content {
	background-color: var(--color-white-500);
	padding: calc(1.5 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
}

.c-productcard-header-content ul.list li {
	padding-left: 0;
	list-style: none;
}

.c-productcard-header-content ul.list li::before {
	content: var(--icon-checkmark);
	position: absolute;
	top: -0.3rem;
	left: -3.7rem;
	font-family: "dhlicons";
	font-size: var(--font-size-2);
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: var(--color-green-500);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.c-productcard-header-content ul.list,
.c-productcard ul,
.c-productcard ol {
	padding-left: calc(var(--base-line-height) * 3.21);
}

.c-productcard li {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-productcard ul.list li span {
	line-height: calc(1.5 * var(--base-line-height));
	display: block;
}

.c-productcard-content {
	overflow: hidden;
	width: 100%;
	border-bottom: 0.1rem solid var(--color-gray-600);
}

.c-productcard .c-accordion--header {
	border-top: 0.1rem solid var(--color-gray-600);
}

.c-productcard-content.c-accordion--content {
	display: block;
}

.c-productcard-buttoncontainer a {
	margin-bottom: var(--base-line-height);
}

.c-productcard-content--inner {

	/* background-color: var(--color-gray-50); */
	padding: var(--base-line-height) calc(1 * var(--base-line-height)) 0;
	width: 100%;
	height: 100%;
	display: inline-block;
}

.c-productcard-content--inner .c-download-box.component-small {
	margin-top: 0;
	padding: 0;
}

.c-productcard-content--inner .c-download-box ul {
	padding-left: 0;
}

.c-productcard-content--inner li {
	color: var(--color-red-500);
}

.c-productcard > .base-button {
	margin: 0;
}

.c-productcard .c-productcards-button {
	display: none;
}

.c-productcard .c-productcards-button--inactive {
	display: inline-flex;
}

.c-productcard.is-open .c-productcards-button--active {
	display: inline-flex;
}

.c-productcard.is-open .c-productcards-button--inactive {
	display: none;
}

@media screen and (max-width: 767px),print {
	.c-productcard-headline {
		padding: var(--base-line-height) calc(1.5 * var(--base-line-height));
	}

	.c-productcard-headline ~ .c-productcard-subheadline {
		padding: 0 calc(1.5 * var(--base-line-height)) var(--base-line-height);
	}

	.c-productcard-header-content,
	.c-productcard-content--inner {
		padding: calc(1.5 * var(--base-line-height));
	}

	.c-productcard-buttoncontainer {
		padding-bottom: calc(2 * var(--base-line-height));
	}

	.c-productcard-content--inner .c-download-box.component-small {
		width: 100%;
	}
}

.c-productcard .c-component-accordion--header span {
	color: var(--color-black-400);
	font-weight: 800;

	/* display: inline-flex; */
	padding: calc(1 * var(--base-line-height));
	padding-right: calc(2 * var(--base-line-height));
	border: 0.1rem solid var(--color-white-500);
}

.c-productcard .c-component-accordion--header .c-productcards-button::after {
	position: absolute;
	right: calc(1 * var(--base-line-height));
	font-family: "dhlicons";
	color: var(--color-red-500);
	height: auto;
	top: 50%;
	transform: translateY(-50%);
}

.c-productcard .c-component-accordion--header .c-productcards-button--inactive::after {
	content: var(--icon-chevron-down);
}

.c-productcard .c-component-accordion--header .c-productcards-button--active::after {
	content: var(--icon-chevron-up);
}

.c-productcard .c-download-box {
	margin-bottom: 2.2rem;
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-productcard-headline,
	.c-productcard-subheadline,
	.c-productcard-header-content {
		padding-left: calc(1.5 * var(--base-line-height));
		padding-right: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-productcard-headline,
	.c-productcard-subheadline,
	.c-productcard-header-content {
		padding-left: calc(1.5 * var(--base-line-height));
		padding-right: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-productcard-buttoncontainer {
		text-align: center;
		margin: 0 calc(-0.5 * var(--base-line-height));
		padding-bottom: 2.2rem;
		padding-top: 2rem;
		justify-content: center;
	}

	.c-productcard-buttoncontainer a {
		margin-left: calc(0.5 * var(--base-line-height));
		margin-right: calc(0.5 * var(--base-line-height));
	}
}

/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/productdetails/clientlib/css/productdetails.css ***!
  \******************************************************************************************************************************************************************************************************************************/
/**
 * @file productdetails.css
 *
 * @description
 * Define Productdetails
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-productdetails .c-download-box.component-small {
	padding: 0;
	margin: calc(1.5 * var(--base-line-height)) 0 0 0;
}

.c-productdetails--inner .list > li span {
	display: block;
}

.c-productdetails--buttoncontainer {
	margin-top: calc(2.5 * var(--base-line-height));
}

@media screen and (max-width: 767px),print {
	.c-productdetails .c-download-box.component-small {
		width: 100%;
	}
}

@media screen and (min-width: 768px),print {
	.c-productdetails--buttoncontainer a {
		margin: 0 calc(0.5 * var(--base-line-height)) var(--base-line-height) calc(0.5 * var(--base-line-height));
	}
}

/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/section-header/clientlib/css/section-header.css ***!
  \******************************************************************************************************************************************************************************************************************************/
:root {

	/* rte text */
	--section-header-rte-font-size: 1.8rem;
	--section-header-rte-line-height: 2.1rem;

	/* specific paddings for CSB components */
	--component-csb-padding-mobile: 2.1rem;
	--component-csb-padding-tablet: 10rem;
	--component-csb-padding-desktop-sm: 20.2rem;
	--component-csb-width-desktop-lg: 79rem;
}

.c-section-header {
	display: block;
	text-align: center;
	width: 100%;
}

/* colors */
body.black .c-section-header {
	color: var(--color-white-500);
}

.c-section-header,
.c-section-header .text-black {
	color: var(--color-black-400);
}

.c-section-header .text-white {
	color: var(--color-white-500);
}

.c-section-header .text-green {
	color: var(--color-green-600);
}

.c-section-header .text-red {
	color: var(--color-red-500);
}

.c-section-header--headline {
	margin: 0;
}

.c-section-header--rte-container {
	padding-top: var(--base-line-height);
	font-size: var(--section-header-rte-font-size);
	line-height: var(--section-header-rte-line-height);
}

.c-section-header--rte-container p:last-child {
	margin-bottom: 0;
}

/* CSB components have some different widths */
.component-csb .c-section-header {
	padding: 0 var(--component-csb-padding-mobile);
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.component-csb .c-section-header {
		padding: 0 var(--component-csb-padding-tablet);
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.component-csb .c-section-header {
		padding: 0 var(--component-csb-padding-desktop-sm);
	}
}

@media screen and (min-width: 1365px) {
	.component-csb .c-section-header {
		padding: 0;
		margin: 0 auto;
		width: var(--component-csb-width-desktop-lg);
	}
}

/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/service-teasers/clientlib/css/service-teaser.css ***!
  \*******************************************************************************************************************************************************************************************************************************/
.c-service-teaser {
	text-align: center;
	padding-top: calc(1.5 * var(--base-line-height));
	padding-bottom: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-service-teaser .list,
.left-aligned-grid .c-service-teaser .list li,
.left-aligned-grid .c-service-teaser .list li span {
	line-height: 1.8rem;
}

.c-service-teaser--headline {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-service-teaser--headline.left-align {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.c-service-teaser--teaser {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	border-radius: 0.4rem;
	background-color: var(--color-white-500);
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-service-teaser--teaser:not(.no-min-height) {
	min-height: calc(5.5 * var(--base-line-height));
}

.left-aligned-grid .c-service-teaser--teaser:not(.no-min-height) {
	min-height: 7.8rem;
}

.left-aligned-grid .c-service-teaser--teaser-link {
	margin-top: calc(0.5 * var(--base-line-height));
	flex-grow: 1;
	display: flex;
	align-items: flex-end;
	line-height: 1.8rem;
}

a.c-service-teaser--teaser:hover {
	box-shadow: var(--shadow-medium);
}

a.c-service-teaser--teaser:focus {
	box-shadow: var(--shadow-large);
}

.c-service-teaser--teaser.vertically-center {
	align-items: center;
}

.c-service-teaser--teaser-image-container {
	min-width: calc(5.5 * var(--base-line-height));
	height: 100%;
	position: relative;
	overflow: hidden;
}

.c-service-teaser--teaser:not(.is-icon).no-min-height .c-service-teaser--teaser-image-container,
.c-service-teaser--teaser:not(.is-icon) .c-service-teaser--teaser-image-container {
	display: none;
}

/* LEFT ALIGNED GRID EXCLUSIVE STYLES */
.c-service-teaser--teaser:not(.is-icon) .c-service-teaser--teaser-image {
	width: auto;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
	transform: translate(-50%, -50%);
	height: 100%;
}

.c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
	width: calc(4.5 * var(--base-line-height));
	height: calc(4.5 * var(--base-line-height));
	margin-top: var(--base-line-height);
	margin-left: var(--base-line-height);
}

.c-service-teaser--teaser-text-container {
	text-align: left;
	padding: var(--base-line-height) calc(0.5 * var(--base-line-height)) var(--base-line-height) var(--base-line-height);
}

.left-aligned-grid .c-service-teaser--teaser-text-container {
	display: flex;
	flex-direction: column;
}

.left-aligned-grid .capability-box .c-service-teaser--teaser-text-container,
.left-aligned-grid .capability-box .c-service-teaser--teaser-text-container p.has-rte {
	line-height: 1.8rem;
}

.left-aligned-grid .c-service-teaser--teaser-text-container,
.left-aligned-grid .c-service-teaser--teaser-text-container p.has-rte {
	font-size: var(--font-size-text-small);
	line-height: 2.5rem;
}

.c-service-teaser--teaser-text-container h5,
.c-service-teaser--teaser-text-container p {
	padding-bottom: calc(0.5 * var(--base-line-height));
	color: var(--color-black-400);
}

.left-aligned-grid .c-service-teaser--teaser-text-container h5,
.left-aligned-grid .c-service-teaser--teaser-text-container p {
	padding-bottom: 0;
}

.left-aligned-grid .c-service-teaser--teaser-text-container h5 ~ p,
.left-aligned-grid .c-service-teaser--teaser-text-container h5 ~ div p {
	padding-top: calc(0.5 * var(--base-line-height));
}

.c-service-teaser--teaser-text-container h5 {
	margin-bottom: 0;
}

.left-aligned-grid .c-service-teaser--teaser-text-container > h5 {
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .capability-box .c-service-teaser--teaser-text-container > h5 {
	font-size: var(--body-font-size-c20);
	font-weight: bold;
	line-height: calc(1.5 * var(--base-line-height));
}

a.c-service-teaser--teaser:hover .c-service-teaser--teaser-text-container h5 {
	color: var(--color-red-500);
}

.c-service-teaser--teaser-text-container p,
.c-service-teaser--teaser-text-container ol,
.c-service-teaser--teaser-text-container ul {
	font-weight: normal;
	margin-bottom: 0;
}

.c-service-teaser--teaser-text-container a.c-service-teaser--teaser-link:focus {
	outline: 0.1rem solid var(--color-red-500);
}

.c-service-teaser--teaser-text-container.no-image {
	padding: var(--base-line-height);
}

/*
LEFT ALIGNED GRID EXCLUSIVE STYLES

Normally, the original appearance of a component is overwritten with C2.0 styles
(always starting with .left-aligned-grid) to create a C2.0-specific appearance,
which is then also used exclusively on C2.0 pages.

The service-teasers component is a special case. Here, in addition to the
C2.0-specific appearance (a.k.a. Capability Boxes), the original appearance of
the component may also be displayed on C2.0 pages. Special care must therefore
be taken when overwriting original styles for C2.0.
*/
.left-aligned-grid .c-service-teaser--teaser-container.capability-box .c-service-teaser--teaser-text-container.no-image {
	padding-bottom: calc(2 * var(--base-line-height));
}

.left-aligned-grid .c-service-teaser--teaser-container.capability-box .c-service-teaser--teaser-text-container.no-image h5,
.left-aligned-grid .c-service-teaser--teaser-container.capability-box .c-service-teaser--teaser-text-container.no-image p {
	padding-bottom: 0;
}

.left-aligned-grid .c-service-teaser--teaser-container.capability-box .c-service-teaser--teaser-text-container.no-image p {
	padding-top: var(--base-line-height);
}

.left-aligned-grid .c-service-teaser:not(.bg-grey):not(.bg-linear-gradient) {
	padding-top: 0;
	padding-bottom: 0;
}

.left-aligned-grid .c-service-teaser {
	padding-top: calc(3 * var(--base-line-height));
	padding-bottom: calc(2.5 * var(--base-line-height));
}

.left-aligned-grid .c-service-teaser.bg-linear-gradient {
	background: var(--linear-gradient-yellow-to-bottom);
}

.left-aligned-grid .c-service-teaser.bg-grey {
	background: var(--color-gray-50);
}

.left-aligned-grid .c-service-teaser--headline {
	text-align: left;
	margin-bottom: calc(2 * var(--base-line-height));
	font-size: 2.8rem;
	line-height: 3.2rem;
}

.left-aligned-grid .c-service-teaser--teaser:not(.is-icon).no-min-height .c-service-teaser--teaser-image {
	width: 100%;
	object-fit: cover;
}

.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
	width: calc(3 * var(--base-line-height));
	height: calc(3 * var(--base-line-height));
	margin-top: calc(1.5 * var(--base-line-height));
	margin-left: calc(1.5 * var(--base-line-height));
	float: left;
}

/* EDIT MODE */
.is-editmode .c-service-teaser--teaser:not(.is-icon) .c-service-teaser--teaser-image {
	max-width: calc(9.5 * var(--base-line-height));
	width: calc(9.5 * var(--base-line-height));
	min-width: calc(9.5 * var(--base-line-height));
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	height: auto;
}

@media not screen and (max-width: 479px) {
	.c-service-teaser--teaser:not(.is-icon).no-min-height .c-service-teaser--teaser-image-container,
	.c-service-teaser--teaser:not(.is-icon) .c-service-teaser--teaser-image-container {
		display: block;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px), screen and (min-width: 768px), print {
	.c-service-teaser--headline {
		margin-bottom: calc(2 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-service-teaser--teaser-text-container {
		padding: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser--headline {
		font-size: 3.5rem;
		line-height: 4.6rem;
	}

	.c-service-teaser--teaser.link-bottom .c-service-teaser--teaser-text-container {
		height: 100%;
		width: 100%;
		position: relative;
		padding-bottom: calc(3 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser--teaser.link-bottom .c-service-teaser--teaser-text-container {
		padding-bottom: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser--teaser-text-container h5 ~ p,
	.left-aligned-grid .c-service-teaser--teaser-text-container h5 ~ div p {
		padding-top: var(--base-line-height);
	}

	.c-service-teaser--teaser.link-bottom .c-service-teaser--teaser-text-container a.c-service-teaser--teaser-link {
		bottom: 0;
		position: absolute;
		margin-bottom: calc(1.5 * var(--base-line-height));
		padding-right: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser--teaser.link-bottom .c-service-teaser--teaser-text-container a.c-service-teaser--teaser-link,
	.left-aligned-grid .c-service-teaser--teaser-link {
		position: static;
		margin-bottom: 0;
		margin-top: var(--base-line-height);
	}

	.c-service-teaser--teaser-text-container.no-image {
		padding: calc(1.5 * var(--base-line-height));
	}

	.c-service-teaser--teaser-text-container h5,
	.c-service-teaser--teaser-text-container p {
		padding-bottom: var(--base-line-height);
	}

	.c-service-teaser .c-service-teaser--teaser-container .c-service-teaser--teaser.is-icon.vertically-center .c-service-teaser--teaser-image-container {
		display: flex;
		flex: 0 1 auto;
		flex-flow: row wrap;
		align-items: center;
	}

	.c-service-teaser .c-service-teaser--teaser-container .c-service-teaser--teaser.is-icon.vertically-center .c-service-teaser--teaser-image {
		margin-top: 0;
		margin-left: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
		width: calc(3 * var(--base-line-height));
		height: calc(3 * var(--base-line-height));
		margin-left: calc(2 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image-container {
		min-width: calc(6 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-service-teaser--teaser:not(.no-min-height) {
		min-height: calc(7.4 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser--teaser:not(.no-min-height) {
		min-height: 10.4rem;
	}

	.c-service-teaser--teaser-image-container {
		min-width: calc(7.4 * var(--base-line-height));
	}

	.c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image-container {
		min-width: calc(6 * var(--base-line-height));
	}

	.c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
		margin-top: calc(1.5 * var(--base-line-height));
		margin-left: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image-container {
		min-width: calc(8.4 * var(--base-line-height));
	}

	.c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
		width: calc(7 * var(--base-line-height));
		height: calc(7 * var(--base-line-height));
		margin-top: calc(1.5 * var(--base-line-height));
		margin-left: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
		width: calc(3 * var(--base-line-height));
		height: calc(3 * var(--base-line-height));
		margin-left: calc(2 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image-container {
		min-width: calc(5.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-service-teaser.l-grid--w-70pc-m-m {
		margin: 0 auto;
	}

	.c-service-teaser.l-grid--w-70pc-m-m.component-margin {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.full-width-grid .c-service-teaser .c-service-teaser--teaser-container.component-wide,
	.c-service-teaser--teaser-container {
		margin: 0 auto;
		justify-content: flex-start;
	}

	.c-service-teaser--teaser {
		flex-basis: calc(50% - (0.75 * var(--base-line-height)));
	}

	.c-service-teaser--teaser:nth-child(odd) {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.c-service-teaser.l-grid--w-70pc-m-m .c-service-teaser--teaser-container .c-service-teaser--teaser-image-container {
		min-width: calc(7 * var(--base-line-height));
	}

	.c-service-teaser.l-grid--w-70pc-m-m .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image-container {
		min-width: calc(5.4 * var(--base-line-height));
	}

	.c-service-teaser.l-grid--w-70pc-m-m .c-service-teaser--teaser-container .c-service-teaser--teaser {
		min-height: calc(7 * var(--base-line-height));
	}

	.c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser-container .c-service-teaser--teaser-image-container {
		min-width: calc(10 * var(--base-line-height));
	}

	.c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser-container .c-service-teaser--teaser {
		min-height: calc(10 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser-container .c-service-teaser--teaser {
		min-height: 13.9rem;
	}

	.c-service-teaser.l-grid--w-70pc-m-m .c-service-teaser--teaser-container .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
		width: 5.5rem;
		height: 5.5rem;
	}

	/* LEFT ALIGNED GRID EXCLUSIVE STYLES - DESKTOP */
	.left-aligned-grid .c-service-teaser {
		padding-top: calc(4 * var(--base-line-height));
	}

	.left-aligned-grid .capability-box .c-service-teaser--teaser:only-child {
		min-width: calc(55.5 * var(--base-line-height) + 0.2rem); /* only in the case of a single teaser layout, width is specific */
	}

	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(3),
	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(3) ~ .c-service-teaser--teaser {
		flex-basis: calc(33.3% - var(--base-line-height));
	}

	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(3),
	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(3) ~ .c-service-teaser--teaser:nth-child(odd) {
		margin-right: 0;
	}

	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(3),
	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(3) ~ .c-service-teaser--teaser:not(:last-child) {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser .c-service-teaser--teaser-container .c-service-teaser--teaser.no-min-height {
		min-height: 0;
	}
}

@media screen and (min-width: 1365px) {
	.c-service-teaser.l-grid--w-70pc-m-m {
		max-width: calc(73 * var(--base-line-height));
	}

	.c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
		width: calc(8 * var(--base-line-height));
		height: calc(8 * var(--base-line-height));
		margin-top: calc(1.5 * var(--base-line-height));
		margin-left: calc(1.5 * var(--base-line-height));
	}

	.c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser-container .c-service-teaser--teaser-image-container {
		min-width: calc(13 * var(--base-line-height));
	}

	.c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser-container .c-service-teaser--teaser {
		min-height: calc(13 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser .c-service-teaser--teaser-container .c-service-teaser--teaser.no-min-height,
	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser-container .c-service-teaser--teaser.no-min-height {
		min-height: 0;
	}

	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser-container .c-service-teaser--teaser {
		min-height: 18.2rem;
	}

	.c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image-container {
		min-width: calc(9.5 * var(--base-line-height));
	}

	.c-service-teaser.l-grid--w-70pc-m-m .c-service-teaser--teaser-container .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
		width: 5.5rem;
		height: 5.5rem;
	}

	/* LEFT ALIGNED GRID EXCLUSIVE STYLES - DESKTOP-LARGE */
	.left-aligned-grid .capability-box .c-service-teaser--teaser:only-child {
		min-width: calc(56.5 * var(--base-line-height) + 0.2rem); /* only in the case of a single teaser layout, width is specific */
	}

	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(4),
	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(4) ~ .c-service-teaser--teaser {
		flex-basis: calc(25% - (var(--base-line-height) + 0.2rem)); /* adjustments to accommodate 4 teasers on 1 line with equal spacing inclusive of margin */
	}

	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(4),
	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(4) ~ .c-service-teaser--teaser:nth-child(odd) {
		margin-right: 0;
	}

	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(4),
	.left-aligned-grid .capability-box .c-service-teaser--teaser:first-child:nth-last-child(4) ~ .c-service-teaser--teaser:not(:last-child) {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image {
		width: calc(4 * var(--base-line-height));
		height: calc(4 * var(--base-line-height));
		margin-left: calc(2.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-service-teaser:not(.l-grid--w-70pc-m-m) .c-service-teaser--teaser.is-icon .c-service-teaser--teaser-image-container {
		min-width: calc(7.5 * var(--base-line-height));
	}
}

@media (-ms-high-contrast: none) { /* stylelint-disable-line media-feature-name-disallowed-list */
	.component-wide.c-service-teaser--teaser-container {
		margin: 0;
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/simple-stage/clientlib/css/simple-stage.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.c-simple-stage img {
	display: block;
	width: 100%;
}

.full-width-grid.left-aligned-grid .c-simple-stage {
	padding: 0;
	max-width: var(--width-page-fullwidth);
}

@media print {
	.c-simple-stage {
		display: none;
	}
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/smart-horizontal-teaser-tile-campaign/clientlib/css/smart-horizontal-teaser-tile-campaign.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.c-smart-horizontal-teaser-tile-campaign {
	background-color: var(--color-white-500);
	border-radius: 0.4rem;
	color: var(--color-black-400);
	display: inline-block;
	margin-right: var(--base-line-height);
	max-width: 22.8rem;
	min-width: 22.8rem;
	overflow: hidden;
	pointer-events: auto;
	position: relative;
	transition: 200ms;
}

.c-smart-horizontal-teaser-tile-campaign:focus {
	box-shadow: 0 0 0 0.3rem var(--color-black-400), 0 5rem 3rem -3.5rem rgba(0, 0, 0, 0.16), 0.2rem 1rem 10rem 0 rgba(0, 0, 0, 0.1);
}

.c-smart-horizontal-teaser-tile-campaign:hover {
	cursor: pointer;
	transform: scale(1.05);
}

.c-smart-horizontal-teaser-tile-campaign:hover > .c-smart-horizontal-teaser-tile-campaign-headline {
	color: var(--color-red-500);
}

.c-smart-horizontal-teaser-tile-campaign-headline {
	font-size: var(--font-size-text-large);
	line-height: 2.2rem;
	margin: 0;
	min-height: 16rem;
	padding: var(--base-line-height);
	transition: 200ms;
}

.c-smart-horizontal-teaser-tile-campaign-image-container {
	display: flex;
}

.c-smart-horizontal-teaser-tile-campaign-image {
	aspect-ratio: 16/9;
	height: 12.8rem;
	object-fit: cover;
	width: 100%;
}

@media screen and (min-width: 768px),print {
	.c-smart-horizontal-teaser-tile-campaign {
		margin-right: calc(1.5 * var(--base-line-height));
		min-width: 28.4rem;
		max-width: 28.4rem;
	}

	.c-smart-horizontal-teaser-tile-campaign-headline {
		line-height: calc(2 * var(--base-line-height));
		padding: calc(1.5 * var(--base-line-height));
		font-size: var(--font-size-h4);
	}

	.c-smart-horizontal-teaser-tile-campaign-image {
		height: 16rem;
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/social-share/clientlib/css/social-share.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/**
 * @file social-share.css
 *
 * @description
 * define social share
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-social-share {
	height: calc(3 * var(--base-line-height));
	padding-top: calc(var(--base-line-height) / 4);
}

.left-aligned-grid .c-social-share {
	justify-content: flex-start;
	padding-top: 0;
}

/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/stage-campaign/clientlib/css/stage-campaign.css ***!
  \******************************************************************************************************************************************************************************************************************************/
.c-stage-campaign {
	--component-height-mobile: 56.9rem;
	--component-height-tablet: calc(100vw / 16 * 9);
	--component-height-mobile-background: 32rem;
	--component-height-tablet-background: 40rem;
	position: relative;
}

.c-stage-campaign .base-button {
	margin-bottom: 0;
}

.c-stage-campaign:not(.has-background) {
	height: var(--component-height-mobile);
}

.c-stage-campaign.has-background {
	min-height: var(--component-height-mobile-background);
}

.c-stage-campaign--content-container {
	display: flex;
	position: relative;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}

.c-stage-campaign--content-container.component-wide {
	width: var(--grid-cols-12);
}

.c-stage-campaign--content-container.horizontal-left {
	justify-content: flex-start;
}

.c-stage-campaign--content-container.horizontal-right {
	justify-content: flex-end;
}

.c-stage-campaign--content-container.horizontal-center,
.c-stage-campaign--content-container.horizontal-center > .c-stage-campaign--content {
	justify-content: center;
	text-align: center;
}

.c-stage-campaign--content-container.vertical-center {
	align-items: center;
}

.c-stage-campaign--content-container.vertical-bottom {
	align-items: flex-end;
}

.c-stage-campaign .c-stage-campaign--content-container.foregroundmedia-version.horizontal-left .c-stage-campaign--content {
	margin-bottom: calc(5 * var(--base-line-height));
	margin-right: auto;
}

.c-stage-campaign .c-stage-campaign--content-container.foregroundmedia-version.horizontal-right .c-stage-campaign--content {
	margin-bottom: calc(5 * var(--base-line-height));
	margin-left: auto;
}

.c-stage-campaign.has-background .c-stage-campaign--content-container {
	margin-top: calc(5 * var(--base-line-height));
}

.c-stage-campaign--content {
	position: relative;
	width: var(--grid-cols-12);
}

.c-stage-campaign--content > .base-button--white {
	border-color: var(--color-white-500);
}

.c-stage-campaign--content > .base-button {
	margin-top: var(--base-line-height);
	width: auto;
}

.c-stage-campaign--headline {
	margin: 0;
}

.c-stage-campaign--overline {
	display: block;
	font-size: 1.8rem;
	font-weight: 200;
	line-height: 2rem;
	margin-bottom: 0.7rem;
}

.c-stage-campaign.foregroundmedia-default {
	border-bottom: calc(4.5 * var(--base-line-height)) solid transparent;
}

.c-stage-campaign.foregroundmedia-gradient-postyellow {
	border-bottom: calc(4.5 * var(--base-line-height)) solid;
	border-image-source: var(--linear-gradient-yellow-to-right);
	border-image-slice: 44;
}

.c-stage-campaign.foregroundmedia-black {
	border-bottom: calc(4.5 * var(--base-line-height)) solid var(--color-black-400);
}

.c-stage-campaign .c-stage-campaign--foregroundmedia-container {
	position: relative;
	height: auto;
	align-self: flex-end;
	margin-bottom: -9.8rem;
	margin-left: auto;
}

.c-stage-campaign .c-video {
	padding: 0;
	margin: 0;
}

.c-stage-campaign--foregroundmedia-image {
	display: block;
	width: 100%;
}

@media screen and (max-width: 767px),print {
	.c-stage-campaign .c-stage-campaign--foregroundmedia-container {
		width: var(--grid-cols-12);
	}

	.c-stage-campaign--content.foreground-narrow-version {
		width: var(--grid-cols-8);
	}

	.c-stage-campaign--foregroundmedia-container {
		width: var(--grid-cols-12);
	}

	.c-stage-campaign--content-container.foregroundmedia-version {
		flex-direction: column;
		justify-content: flex-end;
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-stage-campaign--content {
		width: var(--grid-cols-8);
	}

	.c-stage-campaign .c-stage-campaign--foregroundmedia-container {
		width: var(--grid-cols-8);
		margin-right: auto;
	}

	.c-stage-campaign--content.foreground-narrow-version {
		width: var(--grid-cols-6);
	}

	.c-stage-campaign--foregroundmedia-container.right {
		align-self: flex-start;
	}

	.c-stage-campaign--content-container.horizontal-right > .c-stage-campaign--content.foreground-narrow-version {
		align-self: flex-end;
	}

	.c-stage-campaign--content-container.horizontal-left > .c-stage-campaign--content.foreground-narrow-version {
		align-self: flex-start;
	}

	.c-stage-campaign .c-stage-campaign--content-container.horizontal-right .c-stage-campaign--foregroundmedia-container {
		margin-left: 0;
	}

	.c-stage-campaign .c-stage-campaign--content-container.horizontal-left .c-stage-campaign--foregroundmedia-container {
		margin-right: 0;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-stage-campaign--content {
		width: var(--grid-cols-6);
	}

	.c-stage-campaign .c-stage-campaign--foregroundmedia-container {
		width: var(--grid-cols-6);
	}

	.c-stage-campaign--content.foreground-narrow-version {
		width: var(--grid-cols-6);
	}

	.c-stage-campaign--foregroundmedia-container.right {
		align-self: flex-start;
	}

	.c-stage-campaign--content-container.horizontal-right > .c-stage-campaign--content.foreground-narrow-version {
		align-self: flex-end;
	}

	.c-stage-campaign--content-container.horizontal-right > .c-stage-campaign--foregroundmedia-container {
		margin-right: auto;
		margin-left: 0;
	}

	.c-stage-campaign--content-container.horizontal-left > .c-stage-campaign--content.foreground-narrow-version {
		align-self: flex-start;
	}
}

@media screen and (min-width: 768px),print {
	.c-stage-campaign:not(.has-background) {
		height: var(--component-height-tablet);
	}

	.c-stage-campaign.has-background {
		min-height: var(--component-height-tablet-background);
	}

	.c-stage-campaign.has-background .c-stage-campaign--content-container {
		margin-top: calc(7 * var(--base-line-height));
	}

	.c-stage-campaign .c-stage-campaign--content-container.foregroundmedia-version.horizontal-left .c-stage-campaign--content,
	.c-stage-campaign .c-stage-campaign--content-container.foregroundmedia-version.horizontal-right .c-stage-campaign--content {
		margin-bottom: 0;
	}

	.c-stage-campaign--content {
		width: var(--grid-cols-6);
	}

	.foregroundmedia-version .c-stage-campaign--content {
		width: var(--grid-cols-5);
	}

	.c-stage-campaign--content.foreground-narrow-version {
		width: var(--grid-cols-4);
	}

	.c-stage-campaign--overline {
		font-size: 2.2rem;
	}

	.c-stage-campaign--content-container.horizontal-right {
		justify-content: flex-start;
		flex-direction: row-reverse;
	}

	.c-stage-campaign--content-container.horizontal-right .c-stage-campaign--foregroundmedia-container {
		margin-left: 0;
		margin-right: auto;
	}

	.c-stage-campaign .c-stage-campaign--foregroundmedia-container {
		width: var(--grid-cols-6);
	}
}

@media screen and (min-width: 1365px) {
	.c-stage-campaign--overline {
		font-size: 2.5rem;
	}

	.c-stage-campaign.foregroundmedia-default {
		border-width: calc(9 * var(--base-line-height));
	}

	.c-stage-campaign.foregroundmedia-gradient-postyellow {
		border-width: calc(9 * var(--base-line-height));
	}

	.c-stage-campaign.foregroundmedia-black {
		border-width: calc(9 * var(--base-line-height));
	}

	.c-stage-campaign .c-stage-campaign--foregroundmedia-container {
		margin-bottom: -14rem;
	}
}

@media screen and (min-width: 1920px) {
	.c-stage-campaign {
		height: calc(var(--width-page-fullwidth) * 9 / 16);
	}
}

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/story-image-container/clientlib/css/story-image-container.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
.c-story-image-container--tagline {
	font-size: var(--font-size-text-large);
	line-height: 2rem;
	margin-bottom: calc(0.5 * var(--base-line-height));
	font-weight: 200;
	text-transform: uppercase;
}

.c-story-image-container--headline-outer-container {
	text-align: center;
	overflow: hidden;
}

.c-story-image-container--headline-outer-container.left-aligned {
	text-align: left;
}

.c-story-image-container--headline-inner-container.component-wide > * {
	width: 100%;
}

.c-story-image-container--headline {
	margin: 0 0 calc(3.5 * var(--base-line-height)) 0;
}

.c-story-image-container--tagline.green {
	color: var(--color-green-600);
}

.c-story-image-container--tagline.red,
.c-story-image-container--headline.red {
	color: var(--color-red-500);
}

.c-story-image-container--tagline.black,
.c-story-image-container--headline.black {
	color: var(--color-black-400);
}

/* (min-width: 768px) */
@media screen and (min-width: 768px),print {
	.c-story-image-container--tagline {
		font-size: var(--font-size-h4);
	}
}

/* (min-width: 1024px) */
@media screen and (min-width: 1024px),print {
	.c-story-image-container--tagline:not(.red):not(.green):not(.black),
	.c-story-image-container--headline:not(.red):not(.black) {
		color: var(--color-white-500);
	}

	.c-story-image-container--image-headline-container {
		position: relative;
	}

	.c-story-image-container--headline-outer-container {
		position: absolute;
		top: 0;
		height: 100%;
	}

	.c-story-image-container--headline-outer-container:not(.left-aligned) .c-story-image-container--headline-inner-container {
		position: absolute;
		top: 50%;
		left: 50%;
		justify-content: center;
		transform: translate(-50%, -50%);
	}

	.c-story-image-container--headline-outer-container.left-aligned .c-story-image-container--headline-inner-container {
		position: absolute;
		top: 50%;
		left: 12%;
		transform: translateY(-50%);
	}

	.c-story-image-container--headline-inner-container.component-wide {
		padding-left: 0;
		padding-right: 0;
	}

	.c-story-image-container--headline {
		margin: 0;
	}
}

/* (min-width: 1365px) */
@media screen and (min-width: 1365px) {
	.c-story-image-container--tagline {
		font-size: var(--font-size-5);
	}
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/sub-story-stage/clientlib/css/sub-story-stage.css ***!
  \********************************************************************************************************************************************************************************************************************************/
:root {

	/* background-media */
	--sub-story-stage-background-media-height-mobile: 32rem; /* static */
	--sub-story-stage-background-media-height-tablet: calc(100% / 21 * 9); /* based on aspect ratio */
}

.c-sub-story-stage--copy ul,
.c-sub-story-stage--action-box-copy-text ul {
	margin-left: calc(2 * var(--base-line-height));
}

.c-sub-story-stage--copy ol,
.c-sub-story-stage--action-box-copy-text ol {
	margin-left: calc(2.5 * var(--base-line-height));
	padding-left: 0;
}

.c-sub-story-stage--action-box {
	padding: calc(2 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
	background: var(--linear-gradient-yellow-to-bottom);
	border-radius: 0.4rem;
	align-self: baseline;
}

.c-sub-story-stage--action-box-icon {
	width: calc(2 * var(--base-line-height));
	height: calc(2 * var(--base-line-height));
	margin-bottom: var(--base-line-height);
	display: block;
}

.c-sub-story-stage--action-box-headline {
	font-size: 3.1rem;
	line-height: calc(2.5 * var(--base-line-height));
	margin: 0;
	display: block;
}

.c-sub-story-stage--action-box-copy-text {
	font-size: var(--font-size-standard);
	line-height: 2rem;
	font-weight: bold;
	margin-top: calc(0.5 * var(--base-line-height));
	margin-bottom: 0;
}

.c-sub-story-stage--action-box-copy-text > *:last-child {
	margin-bottom: 0;
}

.c-sub-story-stage--action-box .base-button {
	margin-bottom: 0;
	margin-top: calc(1.5 * var(--base-line-height));
}

.c-sub-story-stage .c-story-image-container--image-headline-container {
	position: relative;
}

@media screen and (max-width: 479px), screen and (min-width: 480px) and (max-width: 665px) {
	.c-sub-story-stage--action-box-headline {
		font-size: var(--font-size-h3-mobile);
		line-height: calc(var(--font-size-h3-mobile) + 0.2rem);
	}
}

@media screen and (max-width: 767px),print {
	.c-sub-story-stage .c-story-image-container--image-headline-container {
		padding-top: calc(var(--sub-story-stage-background-media-height-mobile) + 2 * var(--base-line-height));
	}

	.c-sub-story-stage .c-story-image-container--image-headline-container .c-background-media {
		height: var(--sub-story-stage-background-media-height-mobile);
	}

	.c-sub-story-stage--action-box {
		margin-top: calc(2.5 * var(--base-line-height));
	}

	.c-sub-story-stage--action-box .base-button {
		width: auto;
	}

	.c-sub-story-stage--image-headline-container img {
		width: auto;
		height: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.c-sub-story-stage .c-background-media--opacity-layer {
		display: none;
	}
}

.c-sub-story-stage--copy {
	text-align: left;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-sub-story-stage .c-story-image-container--image-headline-container {
		padding-top: calc(var(--sub-story-stage-background-media-height-tablet) + 2.5 * var(--base-line-height));
	}

	.c-sub-story-stage .c-story-image-container--image-headline-container .c-background-media {
		padding-top: var(--sub-story-stage-background-media-height-tablet);
		height: auto;
	}

	.c-sub-story-stage {
		align-items: center;
	}

	.c-sub-story-stage .c-background-media--opacity-layer {
		display: none;
	}
}

@media screen and (min-width: 768px),print {
	.c-sub-story-stage--action-box {
		padding: calc(2.5 * var(--base-line-height));
		order: 1;
		flex-basis: calc(50% - (2 * var(--base-line-height)));
		margin-right: calc(2 * var(--base-line-height));
	}

	.c-sub-story-stage--action-box-icon {
		width: calc(2.5 * var(--base-line-height));
		height: calc(2.5 * var(--base-line-height));
	}

	.c-sub-story-stage--copy {
		order: 2;
	}

	.c-sub-story-stage--action-box-copy-text {
		font-size: var(--font-size-text-large);
	}
}

@media screen and (min-width: 1024px),print {
	.c-sub-story-stage .c-story-image-container--image-headline-container {
		padding-top: var(--sub-story-stage-background-media-height-tablet);
	}

	.c-sub-story-stage--content-container {
		margin: 0 auto;
	}

	.c-sub-story-stage--action-box {
		max-width: calc(30.3 * var(--base-line-height));
		margin-right: calc(4 * var(--base-line-height));
		margin-top: calc(-4.5 * var(--base-line-height));
		z-index: 10;
	}

	.c-sub-story-stage--copy {
		margin-top: calc(3.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1365px) {
	.c-sub-story-stage--action-box {
		max-width: calc(32.2 * var(--base-line-height));
	}
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/tab-module/clientlib/css/tab-module.css ***!
  \**********************************************************************************************************************************************************************************************************************/
.c-wizard--springboard > .c-tab-module {
	width: 100%;
}

.c-tab-module--tabs {
	display: flex;
	flex-wrap: wrap;
	clip-path: inset(0 0 0 -1rem);
}

.c-tab-module--tabs.is-editmode {
	flex-direction: column;
}

.c-tab-module--label {
	order: 1;
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	height: calc(4.5 * var(--base-line-height));
	max-width: calc(11 * var(--base-line-height));
	text-align: center;
	white-space: nowrap;
	font-weight: 800;
	cursor: pointer;
	transition: width ease 500ms, opacity ease 500ms;
}

.c-tab-module--label::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.2rem;
	background-color: var(--color-gray-500);
	transition: background-color ease 300ms, height ease 300ms, width ease 300ms, bottom ease 300ms, left ease 300ms;
	transition-delay: unset;
}

.c-tab-module--label:hover::after {
	height: 0.4rem;
	bottom: -0.1rem;
	left: 0.7rem;
	width: calc(100% - 1.4rem);
	background-color: var(--color-red-400);
}

.c-tab-module--label:last-of-type::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 100%;
	right: -60rem;
	height: 0.2rem;
	background-color: var(--color-gray-500);
}

.c-tab-module--label img {
	width: calc(1.5 * var(--base-line-height));
	height: calc(1.5 * var(--base-line-height));
	transition: width ease 500ms, height ease 500ms, transform ease 500ms;
}

.c-tab-module--label img + span {
	font-size: 1.1rem;
	font-weight: bold;
}

.c-tab-module--label span {
	font-size: var(--font-size-h5);
	width: 100%;
	transition: opacity 200ms;
}

.c-tab-module--input:focus-visible + .c-tab-module--label {
	box-shadow: inset 0.1rem 0.1rem 0 var(--color-red-500), inset -0.1rem -0.2rem var(--color-red-500);
}

.c-tab-module--content {
	display: none;
	order: 2;
	width: 100%;
	margin-top: calc(2 * var(--base-line-height));
}

.c-tab-module--content.is-editmode {
	display: block;
	margin-bottom: var(--base-line-height);
}

.c-tab-module--content > .component-small,
.c-tab-module--content > .component-wide,
.c-tab-module--content > .component-medium {
	padding: 0;
	background-color: var(--color-white-500);
}

.c-tab-module--input:checked + .c-tab-module--label {
	cursor: default;
}

.c-tab-module--input:checked + .c-tab-module--label::after {
	height: 0.4rem;
	bottom: -0.1rem;
	left: 0.7rem;
	width: calc(100% - var(--base-line-height));
	background-color: var(--color-red-500);
}

.c-tab-module--input:first-child:checked + .c-tab-module--label::after,
.c-tab-module--input:first-child + .c-tab-module--label:hover::after {
	left: 0;
	width: calc(100% - 0.5 * var(--base-line-height));
}

.c-tab-module--input:checked + .c-tab-module--label img {
	width: calc(3 * var(--base-line-height));
	height: calc(3 * var(--base-line-height));
	transform: translateY(0.6rem);
}

.c-tab-module--input:checked + .c-tab-module--label img + span {
	opacity: 0;
}

.c-tab-module--input:checked + .c-tab-module--label + .c-tab-module--content {
	display: block;
}

@media screen and (min-width: 768px),print {
	.c-tab-module--label {
		font-size: 1.5rem;
	}

	.c-tab-module--label img {
		width: calc(2 * var(--base-line-height));
		height: calc(2 * var(--base-line-height));
	}
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/table-of-content/clientlib/css/table-of-content.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
:root {
	--toc-c20-column-gap: calc(0.5 * 1.5 * var(--base-line-height));
}

.c-table-of-content {
	display: block;
	text-align: center;
	padding-top: calc(1.5 * var(--base-line-height));
	padding-bottom: calc(2 * var(--base-line-height));
}

.c-table-of-content--headline {
	text-align: left;
	margin-bottom: calc(1.75 * var(--base-line-height));
}

.left-aligned-grid .c-table-of-content--headline {
	font-size: var(--font-size-4);
	line-height: calc(2 * var(--base-line-height));
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-table-of-content--columns {
	display: flex;
	flex-wrap: wrap;
}

.c-table-of-content--list-elements {
	list-style-type: none;
	text-align: left;
	border-left: 0.3rem solid var(--color-red-500);
	padding-left: calc(1.5 * var(--base-line-height));
	padding-top: calc(0.6 * var(--base-line-height));
	padding-bottom: calc(0.6 * var(--base-line-height));
}

.left-aligned-grid .c-table-of-content--list-elements {
	border-left: 0;
	padding: 0;
	width: 100%;
}

.c-table-of-content--list-elements:first-of-type {
	padding-top: 0;
}

.c-table-of-content--list-elements:last-of-type {
	padding-bottom: 0;
}

.c-table-of-content--link {
	font-size: var(--font-size-h5);
	line-height: 2.5rem;
	position: relative;
}

.left-aligned-grid .c-table-of-content--link {
	border-bottom: solid 0.1rem var(--color-gray-300);
	display: block;
	font-size: var(--font-size-2);
	font-weight: normal;
	line-height: calc(2 * var(--base-line-height));
	outline-offset: -0.1rem;
	padding: calc(0.5 * var(--base-line-height)) calc(2.5 * var(--base-line-height)) 0.8rem 1.1rem;
	position: relative;
}

.c-table-of-content--link::after {
	display: inline-block;
	top: 0;
}

.c-table-of-content--link:not(.link-internal):not(.link-external)::after {
	position: relative;
	transform: translateY(-50%);
	top: calc(var(--base-line-height) - 0.1rem);
	font-size: 1.4rem;
	transition: opacity 300ms ease-out;
	content: var(--icon-arrow-down);
	color: var(--color-red-500);
}

.left-aligned-grid .c-table-of-content--link.link-internal::after {
	content: var(--icon-chevron-forward);
}

/* rtl:raw:
.left-aligned-grid .c-table-of-content--link.link-internal::after {
  transform: scaleX(-1);
}
*/

.left-aligned-grid .c-table-of-content--link.link-external::after {
	content: var(--icon-open-in-new-window);
}

.left-aligned-grid .c-table-of-content--link:not(.link-internal):not(.link-external)::after {
	content: var(--icon-anchor-arrow-legacy);
}

.left-aligned-grid .c-table-of-content--link:not(.link-internal):not(.link-external)::after,
.left-aligned-grid .c-table-of-content--link::after {
	font-size: 1.7rem;
	height: 1.7rem;
	line-height: 1.7rem;
	margin-right: 1.1rem;
	margin-top: 1.3rem;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0;
	transform: none;
	width: 1.7rem;
}

/* rtl:raw:
.left-aligned-grid .c-table-of-content--link:not(.link-internal):not(.link-external)::after,
.left-aligned-grid .c-table-of-content--link::after {
  	transform: scaleX(-1);
} */

.c-table-of-content--link.link-external,
.c-table-of-content--link.link-internal {
	opacity: 1;
}

.c-table-of-content--link:hover,
.c-table-of-content--link:focus {
	text-decoration: underline;
}

.left-aligned-grid .c-table-of-content--link:focus {
	outline: solid 0.1rem var(--color-red-500);
	text-decoration: none;
}

@media screen and (max-width: 767px),print {
	.c-table-of-content--link {
		max-width: 80%;
	}

	.left-aligned-grid .c-table-of-content--link {
		max-width: initial;
	}

	.c-table-of-content--list-elements:not(:last-child) > a {
		margin-bottom: calc(2 * var(--base-line-height));
	}

	/* Unfortunately I need a 030 specificity to win the 021 above :-( */
	.left-aligned-grid .c-table-of-content--list-elements .c-table-of-content--link {
		margin-bottom: 0;
	}

	.c-table-of-content--list-elements {
		padding-top: 0;
		padding-bottom: 0;
	}
}

@media screen and (min-width: 768px),print {
	.c-table-of-content--columns {
		column-count: 2;
		column-gap: 0;
	}

	.left-aligned-grid .c-table-of-content--columns {
		margin: 0 calc(-1 * var(--toc-c20-column-gap));
	}

	.left-aligned-grid .c-table-of-content--list-elements {
		width: calc(100% / 3);
		padding: 0 var(--toc-c20-column-gap);
	}

	.c-table-of-content--list-elements > a {
		padding: calc(0.5 * var(--base-line-height)) 0;
	}

	.c-table-of-content--list-elements {
		padding-top: 0;
		padding-bottom: 0;
		padding-right: calc(0.75 * var(--base-line-height));
		break-inside: avoid;
	}

	.c-table-of-content--link:not(.link-internal):not(.link-external)::after {
		opacity: 0;
	}

	.c-table-of-content--link:not(.link-internal):not(.link-external):hover::after {
		opacity: 1;
	}
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/teaser-carousel/clientlib/css/teaser-carousel.css ***!
  \********************************************************************************************************************************************************************************************************************************/
/**
 * @file teaser-carousel.css
 *
 * @description
 * define teaser carousel element
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* Will be fixed on a later state */
.c-teaser-carousel--headline-container {
	margin-bottom: calc(1.5 * var(--base-line-height));
	text-align: center;
}

.c-teaser-carousel--headline-container h3 {
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-teaser-carousel--headline-container a {
	display: block;
}

.c-teaser-carousel--carousel-item {
	display: flex;
	transition: box-shadow 50ms ease-in-out;
}

.c-teaser-carousel--carousel-item .link {
	width: 100%;
	color: var(--color-black-400);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.c-teaser-carousel--carousel-item:hover {
	box-shadow: var(--shadow-medium);
}

.c-teaser-carousel--carousel-item a:focus {
	box-shadow: 0 0.5rem 0.7rem 0.4rem rgba(94, 94, 94, 0.5);
}

.c-teaser-carousel--carousel-item .link span {
	align-self: flex-end;
}

.c-teaser-carousel--carousel-item:hover .link span,
.c-teaser-carousel--carousel-item:hover .link span::after,
.c-teaser-carousel--carousel-item:hover .c-teaser-carousel--carousel-copy.linear-gradient span::after {
	color: var(--color-red-400);
}

.c-teaser-carousel--carousel-item:hover .c-teaser-carousel--carousel-copy.linear-gradient span {
	color: var(--color-black-500);
}

.c-teaser-carousel--image-wrapper {
	overflow: hidden;
	position: relative;
	text-align: center;
}

.c-teaser-carousel--image {
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	margin: auto;
	position: absolute;
	transform: translateX(-50%);
}

.c-teaser-carousel--carousel-copy {
	flex: 1 1 auto;
	min-height: calc(8 * var(--base-line-height));
	padding: calc(1.5 * var(--base-line-height));

	/* fix ie11 flex height bug */
	-ms-flex-preferred-size: auto;
}

.c-teaser-carousel--carousel-copy:not(.linear-gradient) span {
	color: var(--color-red-500);
}

.c-teaser-carousel--carousel-item:hover .c-teaser-carousel--carousel-copy.linear-gradient h4 {
	color: var(--color-red-400) !important;/* stylelint-disable-line declaration-no-important */
}

.c-teaser-carousel--carousel-copy h3 {
	margin-bottom: var(--base-line-height);
}

.c-teaser-carousel--carousel-copy p {
	font-size: var(--font-size-text-small);
	font-weight: normal;
	color: var(--color-black-500);
	line-height: calc(1 * var(--base-line-height));
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-teaser-carousel--carousel-copy:not(.linear-gradient) p {
	color: var(--color-gray-600);
}

.c-teaser-carousel--carousel-copy .link-internal {
	line-height: calc(1.5 * var(--base-line-height));
}

@media screen and (max-width: 767px),print {
	.c-teaser-carousel--image-wrapper {
		height: calc(14 * var(--base-line-height));
	}
}

@media screen and (max-width: 479px) {
	.c-teaser-carousel--image-wrapper {
		height: calc(13 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-teaser-carousel--image-wrapper {
		height: calc(13 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-teaser-carousel--headline-container a:focus {
		outline: none;
		border: 0.1rem solid var(--color-red-500);
	}
}

/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/teaser-carousel/clientlib/css/teaser-carousel-container.css ***!
  \******************************************************************************************************************************************************************************************************************************************/
/**
 * @file teaser-carousel-container.css
 *
 * @description
 * define teaser carousel container
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-teaser-carousel {
	overflow: hidden;
}

.c-teaser-carousel--carousel-container {
	list-style-type: none;
}

.c-teaser-carousel--carousel-item {
	width: 100%;
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-teaser-carousel .base-button {
	margin-top: calc(0.5 * var(--base-line-height));
	margin-bottom: calc(0.5 * var(--base-line-height));
}

/**
 * default, mobile first
 * major breakpoint "s"
 * @size <= 767
 */
@media screen and (max-width: 767px),print {
	.c-teaser-carousel--carousel-item {
		width: 100%;
	}
}

/**
 * minor breakpoint "s-l"
 * @size 667 - 767
 */
@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-teaser-carousel--carousel-item {
		width: calc(50% - (1 * var(--base-line-height)) * 0.5);
	}

	.c-teaser-carousel--carousel-item:nth-child(2n+1),
	.c-teaser-carousel--layout-2-1-1 .c-teaser-carousel--carousel-item:nth-child(2n) {
		margin-right: calc(1 * var(--base-line-height));
	}

	/* 50%:50% */
	.c-teaser-carousel--layout-1-1 .c-teaser-carousel--carousel-item {
		width: 100%;
		margin-right: 0;
	}

	/* 50%:25%:25% */
	.c-teaser-carousel--layout-2-1-1 .c-teaser-carousel--carousel-item:first-child {
		width: 100%;
		margin-right: 0;
	}

	.c-teaser-carousel--layout-2-1-1 .c-teaser-carousel--carousel-item:nth-child(3n) {
		margin-right: 0;
	}
}

/**
 * minor breakpoint "m-s"
 * @size 768 - 1023
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-teaser-carousel--carousel-item {
		width: calc(50% - (1 * var(--base-line-height)) * 0.5);
		margin-right: calc(1 * var(--base-line-height));
	}

	.c-teaser-carousel--carousel-item:nth-child(2n) {
		margin-right: 0;
	}

	/* 50%:50% */
	.c-teaser-carousel--layout-1-1 .c-teaser-carousel--carousel-item {
		width: calc(50% - (1 * var(--base-line-height)) * 0.5);
	}

	.c-teaser-carousel--layout-1-1 .c-teaser-carousel--carousel-item:nth-child(2n) {
		margin-right: 0;
	}

	/* 50%:25%:25% */
	.c-teaser-carousel--layout-2-1-1 .c-teaser-carousel--carousel-item {
		width: calc(33.33% - (1 * var(--base-line-height)) * 0.67);
	}

	.c-teaser-carousel--layout-2-1-1 .c-teaser-carousel--carousel-item:nth-child(2n) {
		margin-right: calc(1 * var(--base-line-height));
	}

	.c-teaser-carousel--layout-2-1-1 .c-teaser-carousel--carousel-item:nth-child(3n) {
		margin-right: 0;
	}
}

/**
 * minor breakpoint "m-m"
 * @size 1024 - 1364
 */
@media screen and (min-width: 1024px),print {
	.c-teaser-carousel--carousel-item {
		width: calc(25% - (1.5 * var(--base-line-height)) * 0.75);
	}

	.c-teaser-carousel--carousel-item:not(:last-child) {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.c-teaser-carousel--layout-1-1 .c-teaser-carousel--carousel-item,
	.c-teaser-carousel--layout-2-1-1 .c-teaser-carousel--carousel-item:first-child {
		width: calc(50% - (1.5 * var(--base-line-height)) * 0.5);
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/teaser-facts/clientlib/css/teaser-facts.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/**
 * @file teaser-facts.css
 *
 * @description
 * define teaser facts container with its elements
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-teaser-facts--slider {
	padding-left: 6.25%;
	padding-right: 6.25%;
}

.c-teaser-facts--viewport {
	width: 100%;
}

.c-teaser-facts--tile {
	margin-bottom: calc(3 * var(--base-line-height));
	width: 100%;
}

.c-teaser-facts--tile-wrapper {
	border-bottom: 0.1rem solid var(--color-gray-300);
	display: block;
	margin-bottom: var(--base-line-height);
	position: relative;
}

.c-teaser-facts--tile .c-teaser-facts--tile-wrapper img {
	display: block;
	height: calc(6 * var(--base-line-height));
	margin: 0 auto calc(1 * var(--base-line-height)) auto;
}

.c-teaser-facts--tile-wrapper svg {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(-1.5 * var(--base-line-height));
}

.c-teaser-facts--tile-count {
	margin-bottom: 0;
}

.c-teaser-facts--tile-count p {
	font-size: var(--font-size-h1-mobile-medium);
	line-height: var(--font-size-h1-mobile-medium);
	color: var(--color-red-500);
	font-weight: 800;
	display: block;
	margin-bottom: var(--base-line-height);
}

.c-teaser-facts--tile-count.level1 {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-teaser-facts--tile-count.level1 p {
	font-size: var(--font-size-h1-desktop);
	line-height: calc(3.5 * var(--base-line-height));
}

.c-teaser-facts--tile-headline {
	display: block;
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-teaser-facts .c-slider--index li {
	background-color: var(--color-gray-600);
	border-radius: 1.2rem;
	cursor: pointer;
	display: block;
	float: left;
	height: 1.2rem;
	list-style: none;
	margin: 0.5rem 0.7rem;
	width: 1.2rem;
}

.c-teaser-facts .c-slider--index li::before {
	background-color: var(--color-white-500);
	border-radius: 1rem;
	content: "";
	position: absolute;
	height: 1rem;
	top: 0.1rem;
	right: 0.1rem;
	width: 1rem;
}

.c-teaser-facts .c-slider--index li:not(.is-active):hover,
.c-teaser-facts .c-slider--index li:not(.is-active):focus {
	transform: scale(1.3);
}

.c-teaser-facts .c-slider--index .is-active {
	background-color: var(--color-white-500);
	opacity: 1;
}

.c-teaser-facts .c-slider--index .is-active::before {
	background-color: var(--color-red-500);
	opacity: 1;
}

.c-teaser-facts--text-wrapper a:focus {
	color: var(--color-red-500);
	outline: 0.1rem solid var(--color-red-500);
}

.c-teaser-facts .c-slider--control span {
	font-size: calc(4 * var(--base-line-height));
}

.c-teaser-facts .c-slider--control span::before {
	transition: right 250ms ease, left 250ms ease;
}

.c-teaser-facts .c-slider--control.is-right span::before {
	right: calc(0.5 * var(--base-line-height));
}

.c-teaser-facts .c-slider--control.is-left span::before {
	left: calc(0.5 * var(--base-line-height));
}

.c-teaser-facts .c-slider--control.is-right:hover span::before {
	color: var(--color-red-400);
	right: 0.2rem;
}

.c-teaser-facts .c-slider--control.is-left:hover span::before {
	color: var(--color-red-400);
	left: 0.2rem;
}

.c-teaser-facts .c-teaser-facts--text-wrapper ul.list {
	counter-reset: section;
	padding-left: 2.4rem;
}

.c-teaser-facts ol.list {
	padding-left: 2.4rem;
}

/* rtl:raw:
.c-teaser-facts--navigation .c-teaser-facts--control.is-right span::before {
    transform: rotateY(180deg);
    display:inline-block;
}
*/
/* rtl:raw:
.c-teaser-facts--navigation .c-teaser-facts--control.is-left span::before  {
    transform: translateX(-60px) rotateY(180deg);
    display:inline-block;
}
*/
@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-teaser-facts--slider {
		justify-content: center;
	}

	.c-teaser-facts--tile {
		width: 75%;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-teaser-facts--container {
		position: relative;
	}

	.c-teaser-facts--viewport {
		overflow: hidden;
		position: relative;
		margin: 0 calc(3.5 * var(--base-line-height)) 0 calc(2.5 * var(--base-line-height));
		width: 100%;
	}

	.c-teaser-facts--slider {
		padding-left: 0;
		padding-right: 0;
		position: relative;
		transition: left 400ms;
	}

	.c-teaser-facts--tile {
		width: 50%;
		padding: 0 calc(3 * var(--base-line-height)) calc(0.5 * var(--base-line-height)) calc(3 * var(--base-line-height));
	}

	.has-two-elements .c-teaser-facts--tile {
		width: 50%;
	}

	.c-teaser-facts--image-wrapper {
		height: calc(7 * var(--base-line-height));
	}

	.c-teaser-facts--tile-count {
		height: calc(4 * var(--base-line-height));
	}

	.c-teaser-facts .c-slider--index {
		height: calc(1 * var(--base-line-height));
		left: 0;
		margin: calc(-2 * var(--base-line-height)) 0 0 0;
		position: absolute;
		right: 0;
		top: calc(32 * var(--base-line-height));
		z-index: 100;
	}

	.c-teaser-facts--control {
		cursor: pointer;
		display: none;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 100;
	}

	.c-teaser-facts--control span {
		color: var(--color-red-500);
		font-size: calc(4.5 * var(--base-line-height));
		width: calc(3 * var(--base-line-height));
	}

	.c-teaser-facts--control.is-left {
		left: 0;
		transition: left 200ms;
	}

	.c-teaser-facts--control.is-left span {
		background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	}

	.c-teaser-facts--control.is-left span::before {
		left: calc(-1 * var(--base-line-height));
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.c-teaser-facts--control.is-right {
		right: 0;
		transition: right 200ms;
	}

	.c-teaser-facts--control.is-right span {
		background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	}

	.c-teaser-facts--control.is-right span::before {
		position: absolute;
		right: calc(-1 * var(--base-line-height));
		top: 50%;
		transform: translateY(-50%);
	}

	.c-teaser-facts--control.is-left:hover {
		left: -0.4rem;
	}

	.c-teaser-facts--control.is-right:hover {
		right: -0.4rem;
	}
}

@media screen and (min-width: 768px),print {
	.c-teaser-facts {
		padding-bottom: calc(4 * var(--base-line-height));
	}

	.c-teaser-facts--container {
		position: relative;
		height: auto !important;/* stylelint-disable-line declaration-no-important */
	}

	.c-teaser-facts--viewport {
		overflow: hidden;
		position: relative;
		width: 100%;
		margin: 0 calc(2.5 * var(--base-line-height)) 0 calc(2.5 * var(--base-line-height));
	}

	.c-teaser-facts--slider {
		padding-left: 0;
		padding-right: 0;
		position: relative;
		transition: left 400ms;
	}

	.c-teaser-facts--tile {
		margin-bottom: 0;
		padding: 0 calc(3 * var(--base-line-height)) calc(0.5 * var(--base-line-height)) calc(3 * var(--base-line-height));
	}

	.c-teaser-facts--image-wrapper {
		height: calc(7 * var(--base-line-height));
	}

	.c-teaser-facts--tile-count {
		height: calc(4 * var(--base-line-height));
	}

	.c-teaser-facts--index {
		height: calc(1 * var(--base-line-height));
		left: 0;
		margin: calc(-2 * var(--base-line-height)) 0 0 0;
		position: absolute;
		margin-bottom: calc(2.5 * var(--base-line-height));
		right: 0;
		z-index: 100;
	}

	.c-teaser-facts .c-slider--index {
		top: auto !important; /* stylelint-disable-line declaration-no-important */
		margin-top: calc(2.5 * var(--base-line-height));
	}

	.c-teaser-facts--index li {
		background-color: var(--color-gray-400);
		border-radius: 1.2rem;
		cursor: pointer;
		display: block;
		float: left;
		height: 1.2rem;
		list-style: none;
		margin: 0.5rem 0.7rem;
		transition: transform 200ms;
		width: 1.2rem;
	}

	.c-teaser-facts--index li:not(.is-active):hover,
	.c-teaser-facts--index li:not(.is-active):focus {
		transform: scale(1.3);
	}

	.c-teaser-facts--index .is-active {
		background-color: var(--color-red-500);
		cursor: initial;
	}

	.c-teaser-facts--control {
		cursor: pointer;
		display: none;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 100;
	}

	.c-teaser-facts--control span {
		color: var(--color-red-500);
		font-size: calc(5 * var(--base-line-height));
		width: calc(4 * var(--base-line-height));
	}

	.c-teaser-facts--control.is-left {
		left: 0;
		transition: left 200ms;
	}

	.c-teaser-facts--control.is-left span {
		background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	}

	.c-teaser-facts--control.is-left span::before {
		left: calc(-1 * var(--base-line-height));
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.c-teaser-facts--control.is-right {
		right: 0;
		transition: right 200ms;
	}

	.c-teaser-facts--control.is-right span {
		background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	}

	.c-teaser-facts--control.is-right span::before {
		position: absolute;
		right: calc(-1 * var(--base-line-height));
		top: 50%;
		transform: translateY(-50%);
	}

	.c-teaser-facts--control.is-left:hover {
		left: -0.4rem;
	}

	.c-teaser-facts--control.is-right:hover {
		right: -0.4rem;
	}

	.c-teaser-facts--text-wrapper {
		text-align: left;
		opacity: 1;
	}

	.has-two-elements .c-teaser-facts--tile {
		margin-bottom: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-teaser-facts--tile {
		width: 50%;
	}

	.has-two-elements .c-teaser-facts--tile {
		width: 50%;
	}
}

@media screen and (min-width: 1024px),print {
	.c-teaser-facts--tile {
		max-width: calc(32.5 * var(--base-line-height));
		width: 33.3333%;
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/teaser-image/clientlib/css/teaser-image.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.c-teaser-image {
	padding-top: calc(4 * var(--base-line-height));
}

.c-teaser-image--content {
	padding-bottom: calc(1 * var(--base-line-height));
	justify-content: center;
}

.left-aligned-grid .c-teaser-image {
	padding-top: 0;
}

.left-aligned-grid .c-teaser-image--content {
	justify-content: flex-start;
}

.left-aligned-grid .c-teaser-image--headline-container {
	text-align: left;
}

.left-aligned-grid .c-teaser-image .c-teaser-image--headline-container {
	margin-left: 0;
	padding: 0;
}

.left-aligned-grid .c-teaser-image--headline-container > * {
	margin-bottom: var(--base-line-height);
}

.left-aligned-grid .c-teaser-image--headline-container > :last-child {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-teaser-image--item {
	margin-bottom: calc(2 * var(--base-line-height));
	width: 100%;
	border-radius: 0.4rem;
}

.c-teaser-image--item .base-button span {
	white-space: normal;
}

.c-teaser-image--textbox {
	padding: calc(2 * var(--base-line-height)) calc(1.5 * var(--base-line-height)) 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.left-aligned-grid .c-teaser-image--textbox {
	font-size: var(--font-size-text-small);
	line-height: var(--base-line-height-c20);
}

.left-aligned-grid .c-teaser-image--textbox > .list span {
	line-height: var(--base-line-height-c20);
	display: block;
}

.c-teaser-image--textbox h3,
.c-teaser-image--textbox h4,
.c-teaser-image--textbox h5 {
	font-weight: 800;
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-teaser-image--textbox h4 {
	font-size: var(--font-size-h4);
	line-height: 2.4rem;
}

.c-teaser-image--textbox h5 {
	font-size: var(--font-size-h5);
	line-height: 2rem;
}

.left-aligned-grid .c-teaser-image--textbox h3,
.left-aligned-grid .c-teaser-image--textbox h4,
.left-aligned-grid .c-teaser-image--textbox h5 {
	font-weight: bold;
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-teaser-image--textbox p.has-rte {
	line-height: 2.5rem;
}

.left-aligned-grid .c-teaser-image--textbox > h4,
.left-aligned-grid .c-teaser-image--textbox > h5 {
	font-size: var(--body-font-size-c20);
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: bold;
}

.c-teaser-image--meta-data-wrapper {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--base-line-height);
}

/*
use collapsing margins to keep the vertical rhythm:
- in case of headline - the margins collapse
- in case of no headline - the margins pushes down the paragraph to keep the rhythm
*/
.c-teaser-image--textbox > p {
	margin-top: calc(1 * var(--base-line-height));
}

.c-teaser-image--textbox p + p {
	margin-top: 0;
}

.c-teaser-image--textbox .c-teaser-image--textbox-subline {
	margin-bottom: 0;
}

.c-teaser-image--image {
	border-radius: 0.4rem 0.4rem 0 0;
}

.c-teaser-image--image,
.c-teaser-image--image picture {
	overflow: hidden;
	display: block;
}

.c-teaser-image--image picture {
	height: 100%;
}

.c-teaser-image--image img {
	display: block;
	left: 50%;
	position: relative;
	transform: translate(-50%, 0);
	height: auto;
	width: 100%;
}

.c-teaser-image--headline-container {
	text-align: center;
}

.c-teaser-image--headline-container h4 {
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-teaser-image--headline-container p {
	font-size: var(--font-size-text-large);
}

.left-aligned-grid .c-teaser-image--button-wrapper > .base-button {
	font-size: var(--font-size-2);
	line-height: 1.6rem;
}

.left-aligned-grid .c-teaser-image--button-wrapper > .base-button > span {
	line-height: 1.6rem;
}

.c-teaser-image--button-wrapper .link-internal,
.c-teaser-image--button-wrapper .link-external {
	margin-bottom: calc(1.5 * var(--base-line-height));
	display: inline-block;
	width: 100%;
}

.c-teaser-image--button-wrapper .link-internal:focus {
	outline: 0.1rem solid var(--color-red-500);
	color: var(--color-red-500);
}

.c-teaser-image--textbox .c-teaser-image--headline-link::after {
	font-size: var(--font-size-1);
}

.c-teaser-image--textbox h5 .c-teaser-image--headline-link::after {
	font-size: var(--font-size-0);
}

.c-teaser-image--textbox li {
	line-height: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-teaser-image--textbox li {
	line-height: var(--base-line-height-c20);
}

.c-teaser-image--textbox li:not(:last-child) {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-teaser-image--textbox ul,
.c-teaser-image--textbox ol {
	padding-top: 0;
}

/* for check marks */
.c-teaser-image--textbox ul.list-proof-check li::before {
	top: 0.1rem;
	left: -2.9rem;
}

/* for bullets */
.c-teaser-image--textbox ul.list li::before {
	left: -2.4rem;
	top: 0.1rem;
}

/* for numbers */
.c-teaser-image--textbox ol.list li::before {
	left: -2.6rem;
}

.c-teaser-image--textbox .list-proof-check {
	padding-left: calc(2.5 * var(--base-line-height));
}

.c-teaser-image--textbox-body {
	padding-bottom: calc(2 * var(--base-line-height));
}

.c-teaser-image--textbox-body h4 .link-internal,
.c-teaser-image--button-wrapper .link-internal {
	padding-right: 1.6rem;
	width: 100%;
}

.c-teaser-image--textbox-body h4 .link-internal::after,
.c-teaser-image--button-wrapper .link-internal::after {
	margin-right: -1.6rem;
}

.c-teaser-image--textbox-body h4 .link-external,
.c-teaser-image--button-wrapper .link-external {
	padding-right: calc(1.5 * var(--base-line-height));
}

.c-teaser-image--textbox-body h4 .link-external::after,
.c-teaser-image--button-wrapper .link-external::after {
	margin-right: calc(-1.5 * var(--base-line-height));
}

@media screen and (max-width: 479px) {
	.c-teaser-image--textbox {
		padding: calc(2 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-teaser-image--textbox {
		padding: calc(2 * var(--base-line-height)) calc(1.5 * var(--base-line-height)) calc(0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-teaser-image--textbox h3 {
		margin-bottom: calc(1 * var(--base-line-height));
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-teaser-image--item {
		display: flex;
		flex-direction: column;
		width: calc(50% - 0.75 * var(--base-line-height));
	}

	.c-teaser-image--content > .c-teaser-image--item:nth-of-type(even) {
		margin-left: calc(0.75 * var(--base-line-height));
	}

	.c-teaser-image--content > .c-teaser-image--item:nth-of-type(odd) {
		margin-right: calc(0.75 * var(--base-line-height));
	}

	.c-teaser-image--button-wrapper {
		bottom: 0;
		padding-bottom: calc(1 * var(--base-line-height));
	}

	.c-teaser-image--textbox {
		position: relative;
		flex: 1;

		/* fix ie11 flex height bug */
		-ms-flex-preferred-size: auto;
	}
}

@media screen and (min-width: 768px),print {
	.c-teaser-image--item {
		display: flex;
		flex-direction: column;
	}

	.c-teaser-image--content > .c-teaser-image--item {
		display: flex;
		flex-direction: column;
		margin-left: 1.05rem;
		margin-right: 1.05rem;
	}

	.c-teaser-image--content > .c-teaser-image--item:first-child {
		margin-left: 0;
	}

	.c-teaser-image--content > .c-teaser-image--item:last-child {
		margin-right: 0;
	}

	.c-teaser-image--headline-container {
		padding-bottom: var(--base-line-height);
		text-align: center;
	}

	.c-teaser-image--textbox {
		position: relative;
		flex: 1 0 auto;
	}

	.c-teaser-image--button-wrapper {
		bottom: 0;
		padding-bottom: calc(0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-teaser-image--content > .c-teaser-image--item {
		flex-direction: column;
		width: calc(50% - 0.75 * var(--base-line-height));
	}

	.c-teaser-image--content > .c-teaser-image--item:nth-child(2n+1) {
		margin-left: 0;
	}

	.c-teaser-image--content > .c-teaser-image--item:nth-child(2n) {
		margin-right: 0;
	}
}

@media screen and (min-width: 1024px),print {
	.c-teaser-image--content > .c-teaser-image--item {
		width: calc(25% - 1.6rem);
		justify-content: center;
	}

	.c-teaser-image--content > .c-teaser-image--item:nth-child(4n+1) {
		margin-left: 0;
	}

	.c-teaser-image--content > .c-teaser-image--item:nth-child(4n) {
		margin-right: 0;
	}

	.c-teaser-image--content > .c-teaser-image--item:first-child:last-child,
	.c-teaser-image--content > .c-teaser-image--item:first-child:last-child ~ .c-teaser-image--item,
	.c-teaser-image--content > .c-teaser-image--item:first-child:nth-last-child(2),
	.c-teaser-image--content > .c-teaser-image--item:first-child:nth-last-child(2) ~ .c-teaser-image--item,
	.c-teaser-image--content > .c-teaser-image--item:first-child:nth-last-child(3),
	.c-teaser-image--content > .c-teaser-image--item:first-child:nth-last-child(3) ~ .c-teaser-image--item {
		width: calc(33.333% - var(--base-line-height));
	}

	.left-aligned-grid .c-teaser-image--headline-container {
		max-width: var(--grid-cols-9);
	}

	.is-editmode .c-teaser-image--item {
		width: calc(33.333% - var(--base-line-height));
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/teaser-large/clientlib/css/teaser-large.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.c-teaser-large {
	padding-top: calc(1 * var(--base-line-height));
}

.c-teaser-large.no-bg-dark-text {
	color: var(--color-black-400);
}

.c-teaser-large--text-container > :last-child {
	margin-bottom: 0;
}

.c-teaser-large--image-wrapper.has-border {
	border-bottom: 0.2rem solid var(--color-gray-300);
	border-top: 0.2rem solid var(--color-gray-300);
}

.c-teaser-large--image {
	display: block;
	width: 100%;
}

.c-teaser-large--button-container {
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--base-line-height);
}

.c-teaser-large--button-container a {
	margin-top: var(--base-line-height);
	margin-bottom: 0;
}

.c-teaser-large--text-container h3 {
	margin-bottom: calc(1 * var(--base-line-height));
}

.left-aligned-grid .c-teaser-large--text-container > h3 {
	font-size: var(--font-size-4);
	line-height: calc(2 * var(--base-line-height));
}

.c-teaser-large--text-container ol.list,
.c-teaser-large--text-container ul.list {
	color: inherit;
	padding-left: calc(2.5 * var(--base-line-height));
	font-size: var(--font-size-standard);
}

.c-teaser-large--text-container ol.list li span,
.c-teaser-large--text-container ul.list li span {
	color: inherit;
}

.c-teaser-large:not(.is-rightaligned):not(.is-leftaligned) .c-teaser-large--text-container ol.list,
.c-teaser-large:not(.is-rightaligned):not(.is-leftaligned) .c-teaser-large--text-container ul.list {
	display: inline-block;
	text-align: left;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	width: auto;
}

.c-teaser-large.is-rightaligned .c-teaser-large--text-container ol.list,
.c-teaser-large.is-rightaligned .c-teaser-large--text-container ul.list,
.c-teaser-large.is-leftaligned .c-teaser-large--text-container ol.list,
.c-teaser-large.is-leftaligned .c-teaser-large--text-container ul.list,
.c-teaser-large.is-leftaligned .c-teaser-large--text-container p,
.c-teaser-large.is-rightaligned .c-teaser-large--text-container p {
	font-size: var(--font-size-standard);
}

.left-aligned-grid .c-teaser-large.is-rightaligned .c-teaser-large--text-container ol.list,
.left-aligned-grid .c-teaser-large.is-rightaligned .c-teaser-large--text-container ul.list,
.left-aligned-grid .c-teaser-large.is-leftaligned .c-teaser-large--text-container ol.list,
.left-aligned-grid .c-teaser-large.is-leftaligned .c-teaser-large--text-container ul.list,
.left-aligned-grid .c-teaser-large.is-leftaligned .c-teaser-large--text-container p,
.left-aligned-grid .c-teaser-large.is-rightaligned .c-teaser-large--text-container p {
	font-size: var(--font-size-2);
	line-height: calc(2 * var(--base-line-height));
}

.c-teaser-large.dark-background li::before,
.c-teaser-large:not(.no-bg-dark-text):not(.bright-background) li::before {
	color: var(--color-white-500);
}

.c-teaser-large.bright-background li::before,
.c-teaser-large.no-bg-dark-text li::before {
	color: var(--color-red-500);
}

.c-teaser-large--text-container .list > li > span {
	line-height: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-teaser-large--text-container .list > li,
.left-aligned-grid .c-teaser-large--text-container .list > li > span {
	font-size: var(--font-size-2);
	line-height: calc(2 * var(--base-line-height));
}

.c-teaser-large.bg-linear-gradient {
	color: var(--color-black-400);
}

/* LEFT ALIGNED GRID EXCLUSIVE STYLES */
.left-aligned-grid .c-teaser-large.bg-linear-gradient {
	text-align: left;
	padding: 0;
	max-width: var(--width-page-fullwidth);
}

.left-aligned-grid .bg-linear-gradient .c-teaser-large--content-container {
	background: var(--linear-gradient-yellow-to-right);
	width: 100%;
	height: auto;
	position: initial;
	padding: calc(2 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-teaser-large.bg-linear-gradient:not(.has-image)::before {
	padding-bottom: 0;
}

.left-aligned-grid .c-teaser-large.bg-linear-gradient .c-teaser-large--button-container {
	margin-top: 0;
}

.left-aligned-grid .c-teaser-large--button-container > .base-button {
	font-size: var(--font-size-2);
}

.left-aligned-grid .c-teaser-large--button-container > .base-button > span {
	line-height: 1.6rem;
}

.left-aligned-grid .c-teaser-large .base-button--wide {

	/* !important required here to override global !important styling */
	min-width: auto !important; /* stylelint-disable-line declaration-no-important */
}

.left-aligned-grid .c-teaser-large--text-container > p {
	font-size: var(--font-size-2);
	line-height: calc(2 * var(--base-line-height));
}

@media screen and (max-width: 767px),print, screen and (min-width: 768px) and (max-width: 1023px) {
	.c-teaser-large--image-wrapper {
		margin-bottom: calc(2 * var(--base-line-height));
	}

	.c-teaser-large li::before,
	.c-teaser-large.dark-background li::before,
	.c-teaser-large:not(.no-bg-dark-text):not(.bright-background) li::before {
		color: var(--color-red-500);
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.left-aligned-grid .c-teaser-large.bg-linear-gradient .base-button {
		width: auto;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-teaser-large--button-container .base-button {
		width: 100%;
	}

	.left-aligned-grid .c-teaser-large.bg-linear-gradient .base-button {
		width: auto;
	}

	.left-aligned-grid .bg-linear-gradient .c-teaser-large--content-container {
		padding: calc(2 * var(--base-line-height)) calc(3 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.left-aligned-grid .c-teaser-large--text-container > h3 {
		font-size: 2.8rem;
		line-height: 3.2rem;
	}
}

@media screen and (min-width: 1024px),print {
	.c-teaser-large {
		position: relative;
		padding-top: 0;
		text-align: center;
		color: var(--color-white-500);
	}

	/* Actually the image defines the component height. If the image is disabled
	   (not rendered at all), we need to simulate the component height by using a
	   pseudo-element with the same aspect ratio like the image would ideally have. */
	.c-teaser-large:not(.has-image)::before {
		content: "";
		display: block;
		width: 100%;

		/* using (desired) width and height of .c-teaser-large--image-wrapper from
		   --desktop-large viewport */
		padding-bottom: calc(380.578 / 1197 * 100%);
	}

	.c-teaser-large--content-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: calc(3 * var(--base-line-height));
		padding: calc(2.5 * var(--base-line-height));
		width: calc(100% - 6 * var(--base-line-height));
		height: 100%;
		overflow: hidden;
	}

	.is-rightaligned .c-teaser-large--content-container,
	.is-leftaligned .c-teaser-large--content-container {
		justify-content: flex-start;
		align-items: flex-start;
		width: 61rem;
		text-align: left;
	}

	.is-rightaligned .c-teaser-large--content-container {
		right: calc(3 * var(--base-line-height));
		left: auto;
	}

	.bright-background .c-teaser-large--content-container {
		background-color: var(--color-white-opacity-80);
		color: var(--color-black-400);
	}

	.dark-background .c-teaser-large--content-container {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.gradient-background.is-rightaligned .c-teaser-large--content-container,
	.gradient-background.is-leftaligned .c-teaser-large--content-container {
		width: 69.5rem;
	}

	.gradient-background.is-rightaligned .c-teaser-large--content-container {
		padding-left: 12rem;
	}

	.gradient-background.is-leftaligned .c-teaser-large--content-container {
		padding-right: 12rem;
	}

	.gradient-background.is-rightaligned.bright-background .c-teaser-large--content-container {
		background: linear-gradient(to left, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.8) 57.5rem, rgba(255, 255, 255, 0) 100%);
	}

	.gradient-background.is-leftaligned.bright-background .c-teaser-large--content-container {
		background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.8) 57.5rem, rgba(255, 255, 255, 0) 100%);
	}

	.gradient-background.is-rightaligned.dark-background .c-teaser-large--content-container {
		background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 57.5rem, rgba(0, 0, 0, 0) 100%);
	}

	.gradient-background.is-leftaligned.dark-background .c-teaser-large--content-container {
		background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 57.5rem, rgba(0, 0, 0, 0) 100%);
	}

	.c-teaser-large--text-container {
		width: 100%;
	}

	.c-teaser-large:not(.is-rightaligned):not(.is-leftaligned) .c-teaser-large--text-container {
		width: auto;
		max-width: 76.8rem;
	}

	.c-teaser-large:not(.is-rightaligned):not(.is-leftaligned) .c-teaser-large--text-container ol.list,
	.c-teaser-large:not(.is-rightaligned):not(.is-leftaligned) .c-teaser-large--text-container ul.list {
		width: 50%;
	}

	.c-teaser-large--text-container > p {
		font-size: 1.8rem;
	}

	.c-teaser-large--text-container ol.list,
	.c-teaser-large--text-container ul.list {
		font-size: var(--font-size-text-large);
	}

	.c-teaser-large--button-container {
		justify-content: center;

		/* necessary for sf7 */
		width: 100%;
	}

	.is-rightaligned .c-teaser-large--button-container,
	.is-leftaligned .c-teaser-large--button-container {
		justify-content: flex-start;
	}

	.c-teaser-large--button-container a:not(:last-child) {
		margin-right: var(--base-line-height);
	}

	.c-teaser-large .base-button {
		min-width: 20%;
	}

	.left-aligned-grid .bg-linear-gradient .c-teaser-large--content-container {
		padding: calc(3 * var(--base-line-height));
	}

	.left-aligned-grid .bg-linear-gradient .c-teaser-large--text-container {
		max-width: var(--grid-cols-9);
	}

	.left-aligned-grid .bg-linear-gradient .c-teaser-large--text-container p,
	.left-aligned-grid .bg-linear-gradient .c-teaser-large--text-container ul.list,
	.left-aligned-grid .bg-linear-gradient .c-teaser-large--text-container ol.list {
		font-size: var(--font-size-text-large);
		line-height: calc(1.5 * var(--base-line-height) + 0.4rem);
	}
}

@media screen and (min-width: 1365px) {
	.full-width-grid .c-teaser-large--content-container {
		left: calc(6 * var(--base-line-height));
		width: calc(100% - 12 * var(--base-line-height));
	}

	.is-rightaligned .c-teaser-large--content-container,
	.is-leftaligned .c-teaser-large--content-container {
		width: 44rem;
	}

	.full-width-grid .is-rightaligned .c-teaser-large--content-container {
		right: calc(6 * var(--base-line-height));
		left: auto;
	}

	.gradient-background.is-rightaligned .c-teaser-large--content-container,
	.gradient-background.is-leftaligned .c-teaser-large--content-container {
		width: 70.8rem;
	}

	.gradient-background.is-rightaligned .c-teaser-large--content-container {
		padding-left: 30.3rem;
	}

	.gradient-background.is-leftaligned .c-teaser-large--content-container {
		padding-right: 30.3rem;
	}

	.gradient-background.is-rightaligned.bright-background .c-teaser-large--content-container {
		background: linear-gradient(to left, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.8) 40.5rem, rgba(255, 255, 255, 0) 100%);
	}

	.gradient-background.is-leftaligned.bright-background .c-teaser-large--content-container {
		background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.8) 40.5rem, rgba(255, 255, 255, 0) 100%);
	}

	.gradient-background.is-rightaligned.dark-background .c-teaser-large--content-container {
		background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 40.5rem, rgba(0, 0, 0, 0) 100%);
	}

	.gradient-background.is-leftaligned.dark-background .c-teaser-large--content-container {
		background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 40.5rem, rgba(0, 0, 0, 0) 100%);
	}

	.left-aligned-grid .bg-linear-gradient .c-teaser-large--content-container {
		padding: calc(4 * var(--base-line-height)) var(--component-page-max-padding);
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/text-generic/clientlib/css/text-generic.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/**
 * @file text-generic.css
 *
 * @description
 * define text generic
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 */

.c-text-generic.hidden {
	display: none;
}

.c-text-generic--image-wrapper {
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-text-generic--image-wrapper figure {
	margin: 0;
}

.c-text-generic--image {
	display: block;
	width: 100%;
}

.c-text-generic ol,
.c-text-generic ul {
	overflow: hidden;
	padding-top: 0;
}

.c-text-generic .list li {
	text-align: left; /* IE11 fix */
}

.c-text-generic .list:not(:last-child) {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-text-generic .list.is-centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 40rem;
	min-width: 15rem;
	padding-left: 2em; /* stylelint-disable-line unit-allowed-list */
	padding-right: 2em; /* stylelint-disable-line unit-allowed-list */
}

.c-text-generic--image-wrapper figcaption {
	line-height: 1.5rem;
	color: var(--color-gray-600);
	text-align: left;
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-text-generic > * {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-text-generic > *:last-child {
	margin-bottom: calc(3 * var(--base-line-height));
}

.c-text-generic h4 {
	margin-top: 5.2rem;
}

/* LEFT ALIGNED GRID EXCLUSIVE STYLES */
.left-aligned-grid .c-text-generic > p,
.left-aligned-grid .c-text-generic > ol,
.left-aligned-grid .c-text-generic > ul {
	text-align: left;
	font-size: var(--font-size-4);
	line-height: calc(2 * var(--base-line-height) + 0.4rem);
}

.left-aligned-grid .c-text-generic > h2 {
	text-align: left;
	font-size: var(--font-size-4);
	line-height: calc(2 * var(--base-line-height));
}

@media screen and (max-width: 767px),print {
	.c-text-generic .list.is-centered.has-no-padding {
		padding-left: calc(2 * var(--base-line-height));
	}

	.c-text-generic > ol.list.is-centered,
	.c-text-generic > ul.list.is-centered {
		margin-left: 0;
	}

	.left-aligned-grid .c-text-generic > p,
	.left-aligned-grid .c-text-generic > ol,
	.left-aligned-grid .c-text-generic > ul {
		font-size: var(--font-size-text-large);
		line-height: calc(2 * var(--base-line-height) - 0.1rem);
	}
}

@media screen and (min-width: 768px),print {
	.left-aligned-grid .c-text-generic > h2 {
		font-size: 2.8rem;
		line-height: 3.2rem;
	}
}

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/text-image-campaign/clientlib/css/text-image-campaign.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
.c-text-image-campaign--image {
	display: block;
	width: 100%;
}

.c-text-image-campaign,
.c-text-image-campaign-container {
	position: relative;
}

.c-text-image-campaign--img,
.c-text-image-campaign--text {
	align-items: center;
	height: 100vh;
}

.c-text-image-campaign--img-wrapper {
	margin-bottom: calc(2 * var(--base-line-height));
	width: 100%;
}

.c-text-image-campaign--img-wrapper figure,
.c-text-image-campaign--img-wrapper .c-video {
	margin: 0;
}

.c-text-image-campaign--img-wrapper .c-video {
	padding: 0;
}

.c-text-image-campaign--img-wrapper figcaption {
	color: var(--color-gray-600);
	opacity: 0.9;
	font-size: var(--base-line-height);
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-text-image-campaign--text-wrapper {
	align-content: flex-start;
}

.c-text-image-campaign--text-wrapper p {
	max-width: 100%;
	width: 100%;
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-text-image-campaign--text-wrapper h2,
.c-text-image-campaign--text-wrapper h3 {
	margin-bottom: var(--base-line-height);
}

.c-text-image-campaign--text-wrapper p:last-of-type,
.c-text-image-campaign--text-wrapper ol.list,
.c-text-image-campaign--text-wrapper ul.list {
	margin-bottom: 0;
}

.c-text-image-campaign--text-wrapper h4 {
	margin-bottom: var(--base-line-height);
}

.c-text-image-campaign--text-wrapper ol.list {
	padding-top: 0;
}

.c-text-image-campaign--text-wrapper .base-button {
	margin-bottom: 0;
	margin-top: var(--base-line-height);
}

.c-text-image-campaign--text-wrapper .base-button.link-external,
.c-text-image-campaign--text-wrapper .base-button.link-internal {
	background: none;
	border: none;
}

.c-text-image-campaign.type-image-center,
.c-text-image-campaign.type-image-center .c-text-image-campaign-container,
.c-text-image-campaign.type-image-center .c-text-image-campaign--button-container {
	justify-content: center;
}

.c-text-image-campaign.type-image-center .c-video--description,
.c-text-image-campaign.type-image-center .c-text-image-campaign--text-wrapper {
	text-align: center;
}

.c-text-image-campaign.type-image-center .c-text-image-campaign--img-wrapper {
	margin-bottom: calc(2 * var(--base-line-height));
	padding-right: 0;
	flex-basis: var(--grid-cols-8);
}

@media screen and (max-width: 479px) {
	.c-text-image-campaign--text-wrapper h3 {
		margin-bottom: var(--base-line-height);
	}
}

@media screen and (min-width: 768px),print {
	.c-text-image-campaign--img-wrapper {
		margin-bottom: 0;
		padding-left: 0;
		padding-right: var(--base-line-height);
	}

	.c-text-image-campaign.type-image-right .c-text-image-campaign--img-wrapper {
		order: 2;
		padding-left: var(--base-line-height);
		padding-right: 0;
	}

	.c-text-image-campaign--text-wrapper {
		padding-left: var(--base-line-height);
		padding-right: 0;
	}

	.c-text-image-campaign.type-image-right .c-text-image-campaign--text-wrapper {
		order: 1;
		padding-left: 0;
		padding-right: var(--base-line-height);
	}

	.c-text-image-campaign--text-wrapper.vertically-center {
		align-self: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-text-image-campaign--button-container .base-button {
		width: 100%;
	}
}

@media screen and (min-width: 1024px),print {
	.c-text-image-campaign--button-container .base-button {
		margin-left: calc(0.5 * var(--base-line-height));
		margin-right: calc(0.5 * var(--base-line-height));
	}

	.c-text-image-campaign--button-container {
		flex-wrap: nowrap;
		margin: 0 calc(-0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1365px) {
	.full-width-grid .c-text-image-campaign .c-video {
		padding-left: 0;
		padding-right: 0;
	}
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/text-image/clientlib/css/text-image.css ***!
  \**********************************************************************************************************************************************************************************************************************/
/**
 * @file text-image.css
 *
 * @description
 * define text image
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.left-aligned-grid .c-text-image--text-wrapper p,
.left-aligned-grid .c-text-image--text-wrapper li {
	font-size: var(--font-size-text-large);
	line-height: calc(2 * var(--base-line-height) - 0.1rem);
}

.left-aligned-grid .c-text-image--text-wrapper > h4 {
	font-size: var(--font-size-4);
	line-height: calc(2 * var(--base-line-height));
}

.left-aligned-grid .c-text-image--img-wrapper figcaption,
.left-aligned-grid .c-text--img-wrapper .c-video .c-video--description {
	line-height: var(--font-size-standard);
}

.left-aligned-grid .c-text-image--img-wrapper,
.left-aligned-grid .c-text-image--text-wrapper {
	flex-basis: var(--grid-cols-12);
}

.left-aligned-grid .c-text-image.type-image-center,
.left-aligned-grid .c-text-image.type-image-center .c-text-image--button-container {
	justify-content: left;
}

.left-aligned-grid .c-text-image.type-image-center .c-video--description,
.left-aligned-grid .c-text-image.type-image-center .c-text-image--text-wrapper {
	text-align: left;
}

.c-text-image--img,
.c-text-image--text {
	align-items: center;
	height: 100vh;
}

.c-text-image--img-wrapper {
	margin-bottom: calc(2 * var(--base-line-height));
	width: 100%;
}

.c-text-image--img-wrapper figure,
.c-text-image--img-wrapper .c-video {
	margin: 0;
}

.c-text-image--img-wrapper .c-video {
	padding: 0;
}

.c-text-image--img-wrapper figcaption {
	color: var(--color-gray-600);
	opacity: 0.9;
	font-size: var(--base-line-height);
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-text-image--text-wrapper {
	align-content: flex-start;
}

.c-text-image--text-wrapper p {
	max-width: 100%;
	width: 100%;
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-text-image--text-wrapper p:last-of-type,
.c-text-image--text-wrapper ol.list {
	margin-bottom: var(--base-line-height);
}

.c-text-image--text-wrapper h4 {
	margin-bottom: var(--base-line-height);
}

.c-text-image--text-wrapper ol.list {
	padding-top: 0;
}

.c-text-image--text-wrapper .base-button {
	margin-bottom: 0;
	margin-top: var(--base-line-height);
}

.c-text-image.type-image-center,
.c-text-image.type-image-center .c-text-image--button-container {
	justify-content: center;
}

.c-text-image.type-image-center .c-video--description,
.c-text-image.type-image-center .c-text-image--text-wrapper {
	text-align: center;
}

.c-text-image.type-image-center .c-text-image--img-wrapper {
	margin-bottom: calc(2 * var(--base-line-height));
	padding-right: 0;
}

@media screen and (max-width: 479px) {
	.c-text-image--text-wrapper h3 {
		margin-bottom: var(--base-line-height);
	}
}

@media screen and (min-width: 768px),print {
	.left-aligned-grid .c-text-image--text-wrapper > h4 {
		font-size: 2.8rem;
		line-height: 3.2rem;
	}

	.left-aligned-grid .c-text-image--text-wrapper p,
	.left-aligned-grid .c-text-image--text-wrapper li {
		font-size: var(--font-size-4);
		line-height: calc(2 * var(--base-line-height) + 0.4rem);
	}

	.c-text-image--img-wrapper {
		margin-bottom: 0;
		padding-left: 0;
		padding-right: var(--base-line-height);
	}

	.c-text-image.type-image-right .c-text-image--img-wrapper {
		order: 2;
		padding-left: var(--base-line-height);
		padding-right: 0;
	}

	.c-text-image--text-wrapper {
		padding-left: var(--base-line-height);
		padding-right: 0;
	}

	.c-text-image.type-image-right .c-text-image--text-wrapper {
		order: 1;
		padding-left: 0;
		padding-right: var(--base-line-height);
	}

	.c-text-image--text-wrapper.vertically-center {
		align-self: center;
	}

	.c-text-image--button-container .base-button span {
		white-space: normal;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-text-image--button-container .base-button {
		width: 100%;
	}

	.left-aligned-grid .c-text-image--text-wrapper {
		flex-basis: var(--grid-cols-12);
		max-width: var(--grid-cols-12);
		padding-left: 0;
		padding-right: 0;
	}

	.left-aligned-grid .c-text-image--img-wrapper {
		flex-basis: var(--grid-cols-6);
		max-width: var(--grid-cols-6);
		padding-left: 0;
		padding-right: 0;
		margin-bottom: calc(2 * var(--base-line-height));
	}

	.left-aligned-grid .c-text-image.type-image-right .c-text-image--img-wrapper {
		order: 1;
		padding-left: 0;
	}
}

@media screen and (min-width: 1024px),print {
	.c-text-image--button-container .base-button {
		margin-left: calc(0.5 * var(--base-line-height));
		margin-right: calc(0.5 * var(--base-line-height));
	}

	.c-text-image--button-container {
		flex-wrap: nowrap;
		margin: 0 calc(-0.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-text-image--text-wrapper {
		flex-basis: var(--grid-cols-9);
		max-width: var(--grid-cols-9);
		padding-left: 0.7rem;
		padding-right: 0;
	}

	.left-aligned-grid .c-text-image--img-wrapper {
		flex-basis: var(--grid-cols-3);
		max-width: var(--grid-cols-3);
		padding-left: 0;
		padding-right: 0;
		margin-right: var(--grid-col-gap);
	}

	.left-aligned-grid .c-text-image.type-image-right .c-text-image--img-wrapper {
		padding-left: 0;
		margin-right: 0;
		margin-left: var(--grid-col-gap);
	}

	.left-aligned-grid .c-text-image.type-image-right .c-text-image--text-wrapper {
		padding-right: 0.7rem;
		padding-left: 0;
	}
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-text-image .c-video {
		padding-left: 0;
		padding-right: 0;
	}

	.left-aligned-grid .c-text-image--text-wrapper {
		flex-basis: var(--grid-cols-8);
		max-width: var(--grid-cols-8);
	}

	.left-aligned-grid .c-text-image--img-wrapper {
		flex-basis: var(--grid-cols-4);
		max-width: var(--grid-cols-4);
	}
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/text-list/clientlib/css/text-list.css ***!
  \********************************************************************************************************************************************************************************************************************/
/**
 * @file text-list.css
 *
 * @description
 * define text list container with its elements
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-text-list--list {
	text-align: left;

	/* background-color: var(--color-gray-200); */
	padding: 0 calc(3.2 * var(--base-line-height));
	padding-right: var(--base-line-height);
}

.c-text-list--list.list-proof-check {
	padding-left: calc(4 * var(--base-line-height));
}

.c-text-list--list li {
	margin-bottom: calc(0.85 * var(--base-line-height));
}

.c-text-list--list li span {
	display: block;
	line-height: calc(1.5 * var(--base-line-height));
}

.c-text-list--headline {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

ol.c-text-list--list.list > li::before {
	top: -0.3rem;
	left: -2.5rem;
}

/**
 * major breakpoint "m"
 * @size >=768
 */
@media screen and (min-width: 768px),print {
	.c-text-list--headline {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	.c-text-list--list li:last-child {
		padding-bottom: 0;
	}
}

/**
 * minor breakpoint "m-s"
 * @size 768 - 1023
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-text-list--headline {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}
}

/* IE11 Bugfix */
@media screen and (min-width: 1365px) {
	.full-width-grid .c-text-list > * {
		margin-left: inherit;
		margin-right: inherit;
	}
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/text-media/clientlib/css/text-media.css ***!
  \**********************************************************************************************************************************************************************************************************************/
.c-text-media {
	clear: both;
	display: flex;
	display: flow-root;
}

.c-text-media-content {
	display: block;
	clear: both;
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-text-media-content p {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-text-media-content-mediacontainer {
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-text-media-content-mediacontainer figcaption {
	color: var(--color-gray-600);
	opacity: 0.9;
	line-height: calc(1 * var(--base-line-height) + 0.1rem);
	font-size: var(--base-line-height);
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-text-media-content-mediacontainer img {
	width: 100%;
}

.c-text-media-content-mediacontainer figure,
.c-text-media-content-mediacontainer .c-video.component-small,
.c-text-media-content-mediacontainer .c-video.component-wide {
	margin: 0;
	padding: 0;
}

.c-text-media-content .large-condensed,
.c-text-media-content .condensed {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-text-media--headline {
	text-align: center;
}

.c-text-media-content-copy h3,
.c-text-media-content-copy h4 {
	margin-bottom: calc(1.5 * var(--base-line-height) - 0.2rem);
}

.c-text-media-content.c-text-media-content--twocolumns p:last-child {
	margin-bottom: 0;
}

.c-text-media-content ul.list {
	padding-left: 2.4em; /* stylelint-disable-line unit-allowed-list */
}

.c-text-media-content-mediacontainer.l-grid--w-100pc-s:not(.leftaligned) {
	order: 2;
}

.c-text-media-content-copy.l-grid--w-100pc-s p.has-rte {
	word-break: break-word;
}

.c-text-media-content-mediacontainer.leftaligned + .c-text-media-content-copy ul,
.c-text-media-content-mediacontainer.leftaligned + .c-text-media-content-copy ol {
	display: inline-block;
}

@media screen and (min-width: 768px),print {
	.c-text-media-content--twocolumns {
		column-count: 2;
		column-gap: calc(2 * var(--base-line-height));
	}

	.c-text-media-content:not(.c-text-media-content--twocolumns) .c-text-media-content-mediacontainer {
		float: right;
		overflow: hidden;
		width: calc(50% - 1 * var(--base-line-height));
		margin-left: calc(2 * var(--base-line-height));
	}

	.c-text-media-content:not(.c-text-media-content--twocolumns) .c-text-media-content-mediacontainer.leftaligned {
		float: left;
		margin-left: 0;
		margin-right: calc(2 * var(--base-line-height));
	}

	.c-text-media-content-copy.l-grid--w-50pc-m {
		flex-basis: calc(50% - (2 * var(--base-line-height)));
	}
}

/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/text-quote-highlight/clientlib/css/text-quote-highlight.css ***!
  \******************************************************************************************************************************************************************************************************************************************/
:root {

	/* This is an image height which is an absolute one. No dependency on the line height */
	--quote-image-height: 11.2rem;
	--quote-image-gap-c20: 4.2rem;
}

.c-text-quote-highlight {
	flex-direction: column;
	align-items: center;
	word-break: break-word;
}

body.black .c-text-quote-highlight--wrapper:not(.linear-gradient):not(.bg-gray),
body.black .c-text-quote-highlight--wrapper:not(.linear-gradient):not(.bg-gray) .c-text-quote-highlight--source,
body.black .c-text-quote-highlight--wrapper:not(.linear-gradient):not(.bg-gray) .list,
body.black .c-text-quote-highlight--wrapper:not(.linear-gradient):not(.bg-gray) .list span {
	color: var(--color-white-500);
}

.left-aligned-grid .c-text-quote-highlight {
	flex-direction: row;
	align-items: normal;
	position: relative;
}

.c-text-quote-highlight figure {
	margin: 0;
	width: var(--quote-image-height);
	height: var(--quote-image-height);
	z-index: 1;
}

.left-aligned-grid .c-text-quote-highlight figure {
	position: absolute;
	margin-left: 2rem;
}

.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper.has-image .c-text-quote-highlight--quote {
	max-width: 73.8rem;
}

.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--quote {
	max-width: 89.3rem;
}

.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--button {
	justify-content: flex-start;
}

.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--button a {
	margin-top: 2.8rem;
}

.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--source {
	font-size: var(--body-font-size-c20);
}

.c-text-quote-highlight img {
	width: 100%;
}

.c-text-quote-highlight .rounded {
	border-radius: calc(var(--base-line-height) / 2);
}

.c-text-quote-highlight .rounded-circle {
	border-radius: 50%;
}

.c-text-quote-highlight .bg-gray {
	background: var(--color-gray-100);
}

.c-text-quote-highlight .bg-green {
	background: var(--color-green-600);
}

.c-text-quote-highlight--wrapper {
	width: 100%;
	padding-top: calc(var(--quote-image-height) / 2);
	padding-bottom: calc(var(--quote-image-height) / 2);
}

.left-aligned-grid .c-text-quote-highlight--wrapper.has-image {
	margin-top: calc(var(--base-line-height) * 4);
}

.c-text-quote-highlight--wrapper.component-small {
	border-radius: 0.4rem;
}

.c-text-quote-highlight--wrapper.has-image {
	transform: translateY(calc(var(--quote-image-height) / -2));
	margin-bottom: calc(var(--quote-image-height) / -2);
}

.c-text-quote-highlight--quote {
	font-weight: 300;
	border: none;
	padding-left: 0;
	margin: 0;
	quotes: "\201D""\201D";
	display: block;
}

.c-text-quote-highlight.text-highlight .c-text-quote-highlight--quote {
	font-weight: inherit;
}

.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote {
	font-style: italic;
}

.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--quote,
.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--source {
	text-align: left;
}

.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote,
.c-text-quote-highlight.text-highlight .c-text-quote-highlight--quote.center-align-text {
	text-align: center;
}

.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote.quotes-enabled > p::before {
	content: open-quote;
}

.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote.quotes-enabled > p::after {
	content: close-quote;
}

.c-text-quote-highlight--quote i {
	font-weight: normal;
}

/* add margin only when there is an image */
.c-text-quote-highlight--wrapper.has-image .c-text-quote-highlight--quote > p {
	margin-top: calc(1.5 * var(--base-line-height));
}

.c-text-quote-highlight.has-rte .list {
	padding-left: calc(2.4 * var(--body-font-size));
	color: var(--color-black-400);
}

.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--wrapper.bg-green *,
.c-text-quote-highlight.text-highlight .c-text-quote-highlight--wrapper.font-white *,
.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--wrapper.bg-green a.link,
.c-text-quote-highlight.text-highlight .c-text-quote-highlight--wrapper.font-white a.link,
.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--wrapper.bg-green *::after,
.c-text-quote-highlight.text-highlight .c-text-quote-highlight--wrapper.font-white *::after,
.c-text-quote-highlight.text-highlight .c-text-quote-highlight--wrapper.font-white a:focus {
	color: var(--color-white-500);
}

.c-text-quote-highlight.text-highlight .c-text-quote-highlight--wrapper.font-red * {
	color: var(--color-red-500);
}

.c-text-quote-highlight.text-highlight .c-text-quote-highlight--wrapper.font-green p,
.c-text-quote-highlight.text-highlight .c-text-quote-highlight--wrapper.font-green ul *:not(a),
.c-text-quote-highlight.text-highlight .c-text-quote-highlight--wrapper.font-green ol *:not(a) {
	color: var(--color-green-600);
}

.c-text-quote-highlight.has-rte .list > li::before {
	top: 0;
	left: calc(-1.8 * var(--body-font-size));
}

.c-text-quote-highlight .base-button {
	margin-top: calc(1.5 * var(--base-line-height));
	margin-bottom: 0;
}

.c-text-quote-highlight--source {
	display: block;
	color: var(--color-black-400);
	font-size: var(--font-size-text-small);
	font-style: normal;
	font-weight: bold;
	line-height: var(--font-size-quote-mobile);
	text-align: center;
	margin-top: calc(2 * var(--base-line-height));
}

/* default (normal) for mobile */
.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote > p,
.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote > .list {
	font-size: calc(1.4 * var(--body-font-size));
	line-height: calc(2 * var(--base-line-height));
	font-weight: inherit;
	font-style: inherit;
}

/*
I need to disable the rule here because I have to win the specificity war versus
`.left-aligned-grid .list li span`.
*/
/* stylelint-disable-next-line selector-max-compound-selectors */
.left-aligned-grid .c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote > p,
.left-aligned-grid .c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote > .list li,
.left-aligned-grid .c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote > .list li span {
	font-size: var(--font-size-4);
	line-height: 2.8rem;
}

/* font large */
.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote.font-large > p,
.c-text-quote-highlight.text-highlight .c-text-quote-highlight--quote.font-large > * {
	font-size: var(--font-size-4);
	line-height: calc(2 * var(--base-line-height) + 0.4rem);
}

.c-text-quote-highlight.text-highlight .c-text-quote-highlight--quote.font-large a.has-icon::after,
.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote a.has-icon::after {
	font-size: var(--font-size-text-large);
}

.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote.font-large a.has-icon::after {
	font-size: calc(2 * var(--base-line-height));
}

.c-text-quote-highlight .linear-gradient a.link,
.c-text-quote-highlight .linear-gradient .has-rte a.link {
	color: var(--color-black-400);
}

.c-text-quote-highlight .linear-gradient a.link::after {
	color: var(--color-red-500);
}

.c-text-quote-highlight.text-highlight .c-text-quote-highlight--quote > *:last-child {
	margin-bottom: 0;
}

.c-text-quote-highlight--wrapper.font-white .link::after,
.c-text-quote-highlight--wrapper.font-white .link:hover::after {
	color: var(--color-white-500);
}

.c-text-quote-highlight--wrapper .c-text-quote-highlight--quote .has-rte a.link:focus,
.c-text-quote-highlight--wrapper .c-text-quote-highlight--quote .list a.link:focus,
.c-text-quote-highlight--wrapper.font-green .has-rte a.link:focus,
.c-text-quote-highlight--wrapper.font-green .list a.link:focus,
.c-text-quote-highlight--wrapper.font-red .has-rte a.link:focus,
.c-text-quote-highlight--wrapper.font-red .list a.link:focus {
	color: var(--color-red-500);
	outline-color: var(--color-black-400);
}

.c-text-quote-highlight--wrapper.bg-gray .c-text-quote-highlight--quote .has-rte a.link:focus,
.c-text-quote-highlight--wrapper.bg-gray .c-text-quote-highlight--quote .list a.link:focus,
.c-text-quote-highlight--wrapper.bg-gray.font-red .has-rte a.link:focus,
.c-text-quote-highlight--wrapper.bg-gray.font-red .list a.link:focus {
	color: var(--color-red-500);
	outline-color: var(--color-red-500);
}

.c-text-quote-highlight--wrapper.font-white a.link:focus,
.c-text-quote-highlight--wrapper.bg-green .c-text-quote-highlight--quote a.link:focus {
	color: var(--color-white-500);
	outline-color: var(--color-white-500);
}

.c-text-quote-highlight--wrapper.linear-gradient .has-rte a.link:focus,
.c-text-quote-highlight--wrapper.linear-gradient .list a.link:focus {
	color: var(--color-black-400);
	outline-color: var(--color-black-400);
}

html:not(.is-touch) .c-text-quote-highlight--wrapper.font-white .has-rte a:not(.base-button):focus {
	outline: 0.1rem solid var(--color-white-500);
}

@media screen and (max-width: 767px),print {
	.c-text-quote-highlight.text-highlight.component-full.content-narrow .c-text-quote-highlight--quote {
		padding: 0 calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-text-quote-highlight figure {
		top: calc(var(--base-line-height) * -4);
	}

	.c-text-quote-highlight {
		margin-top: calc(var(--base-line-height) * 4);
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.left-aligned-grid .c-text-quote-highlight figure {
		top: calc(var(--base-line-height) * 4);
		margin-left: calc(var(--quote-image-gap-c20) / 2);
	}

	.left-aligned-grid .c-text-quote-highlight--wrapper.has-image {
		padding-left: calc((var(--quote-image-gap-c20) / 2) + (var(--quote-image-height) + (var(--quote-image-gap-c20) / 2)));
	}

	.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--quote .has-rte {
		margin-top: 0;
	}

	.c-text-quote-highlight {
		margin-top: 0;
	}
}

@media screen and (min-width: 768px),print {

	/* normal */
	.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote > p,
	.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote > .list {
		font-size: calc(4 * var(--base-font-size));
	}

	.c-text-quote-highlight.text-highlight.component-full.content-narrow .c-text-quote-highlight--quote {
		padding: 0 calc(4 * var(--base-line-height));
	}

	.c-text-quote-highlight.text-highlight.component-small .c-text-quote-highlight--wrapper {
		padding-left: calc(4 * var(--base-line-height));
		padding-right: calc(4 * var(--base-line-height));
	}

	.c-text-quote-highlight.text-highlight .c-text-quote-highlight--quote.font-large > * {
		font-size: var(--font-size-quote-desktop);
		line-height: calc(2.5 * var(--base-line-height) + 0.3rem);
	}

	.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--quote .has-rte {
		margin-top: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

	/* font large */
	.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote.font-large > p {
		font-size: calc(2 * var(--body-font-size));
		line-height: calc(3 * var(--base-line-height) + 0.3rem);
	}

	.c-text-quote-highlight.has-rte .list > li::before {
		top: 0.4rem;
	}

	.left-aligned-grid .c-text-quote-highlight figure {
		transform: translateY(calc(var(--quote-image-height) / 2));
		margin-left: var(--quote-image-gap-c20);
	}

	.left-aligned-grid .c-text-quote-highlight--wrapper.has-image {
		padding-left: calc(var(--quote-image-gap-c20) + (var(--quote-image-height) + var(--quote-image-gap-c20)));
	}

	.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--quote p {
		line-height: 2.8rem;
	}
}

@media screen and (min-width: 1024px),print {
	.c-text-quote-highlight:not(.text-highlight) .c-text-quote-highlight--quote.font-large > p {
		font-size: calc(3 * var(--body-font-size));
		line-height: 6.7rem;
	}

	.c-text-quote-highlight.has-rte .list > li::before {
		top: 0.3rem;
	}

	.left-aligned-grid .c-text-quote-highlight figure {
		transform: translateY(calc(var(--quote-image-height) / 2));
		margin-left: var(--quote-image-gap-c20);
	}

	.left-aligned-grid .c-text-quote-highlight--wrapper.has-image {
		padding-left: calc(var(--quote-image-gap-c20) + (var(--quote-image-height) + var(--quote-image-gap-c20)));
	}
}

@media screen and (min-width: 1365px) {
	.full-width-grid .c-text-quote-highlight:not(.text-highlight).component-full .c-text-quote-highlight--wrapper {
		max-width: none;
		padding-left: var(--component-page-max-padding-small);
		padding-right: var(--component-page-max-padding-small);
	}

	.full-width-grid .c-text-quote-highlight.text-highlight.component-full .c-text-quote-highlight--wrapper {
		max-width: none;
	}

	html:not(.full-width-grid) .c-text-quote-highlight:not(.text-highlight).component-full.content-narrow .c-text-quote-highlight--wrapper {
		padding-left: calc(10 * (1 / var(--grid-units) * 100%));
		padding-right: calc(10 * (1 / var(--grid-units) * 100%));
	}

	.full-width-grid .c-text-quote-highlight:not(.component-full):not(.text-highlight) .c-text-quote-highlight--wrapper {
		padding-left: calc(7 * (1 / var(--grid-units) * 100%));
		padding-right: calc(7 * (1 / var(--grid-units) * 100%));
	}

	.left-aligned-grid .c-text-quote-highlight figure {
		transform: translateY(calc(var(--quote-image-height) / 2));
		margin-left: var(--component-page-max-padding);
	}

	.left-aligned-grid .c-text-quote-highlight--wrapper.has-image {
		padding-left: calc(var(--component-page-max-padding) + 15.6rem) !important;  /* stylelint-disable-line declaration-no-important */
	}

	.left-aligned-grid .c-text-quote-highlight--wrapper {
		padding-left: var(--component-page-max-padding) !important;  /* stylelint-disable-line declaration-no-important */
	}

	.left-aligned-grid .c-text-quote-highlight .c-text-quote-highlight--wrapper .c-text-quote-highlight--source {
		margin-top: var(--base-line-height);
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/tiles-visual/clientlib/css/tiles-visual.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.c-tiles-visual {
	display: block;
	text-align: center;
}

.c-tiles-visual--header-section {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

body.black .c-tiles-visual--header-section,
body.black .c-section-header--rte-container {
	color: var(--color-white-500);
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-tiles-visual .c-media-tiles--column:nth-child(2) {
	transition-delay: 200ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-tiles-visual .c-media-tiles--column:nth-child(3) {
	transition-delay: 400ms;
}

html.viewport-animation:not(.is-editmode):not(.no-js) .c-tiles-visual .c-media-tiles--column:nth-child(4) {
	transition-delay: 600ms;
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/top-task-bar/clientlib/css/top-task-bar.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/**
 * @file top-task-bar.css
 *
 * @description
 * define top task bar container with its elements
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* Will be fixed on a later state */
.c-top-task-bar--list {
	border-top: 0.1rem solid var(--color-gray-600);
	background-color: var(--color-white-500);
	margin: 0;
}

.c-top-task-bar--list.shadow-small {
	box-shadow: none;
}

.c-top-task-bar--item {
	border-bottom: 0.1rem solid var(--color-gray-600);
	list-style-type: none;
}

.c-top-task-bar--item a {
	padding: calc(var(--base-line-height) + 0.4rem)
		calc(0.5 * var(--base-line-height));
	transition: background-color 200ms, color 200ms;
	position: relative;
}

.c-top-task-bar--icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/*
please be aware of :empty only applies to empty elements,
no whitespace, no linebreaks… very empty as in <div class="c-top-task-bar--icon"></div>
*/
.c-top-task-bar--icon:empty {
	display: none;
}

.c-top-task-bar--icon img {
	align-self: center;
	height: calc(2 * var(--base-line-height));
	max-width: calc(2 * var(--base-line-height));
	margin-right: var(--base-line-height);
	transform: scale(1);
	transition: transform 200ms;
	transition-timing-function: ease-out;

	/* IE11 image scaling fix */
	flex: 0 0 auto;
}

.c-top-task-bar .link,
.c-top-task-bar--icon:empty + .link {
	padding: 0;
	padding-right: var(--base-line-height);
}

.c-top-task-bar--item a .link:only-child,
.c-top-task-bar--icon ~ .link {
	padding-left: calc(3 * var(--base-line-height));
}

.c-top-task-bar .link::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
}

/* rtl:raw:
.c-top-task-bar .link::after {
    transform: rotateY(180deg) translateY(-50%);
	display:inline-block;
}
*/

.is-touch .c-top-task-bar a:hover,
.is-touch .c-top-task-bar a:focus {
	background-color: var(--color-white-500);
}

.c-top-task-bar a:hover,
.c-top-task-bar a:focus,
.is-touch .c-top-task-bar a:active {
	background-color: inherit;
}

.is-touch .c-top-task-bar--item a:hover img,
.is-touch .c-top-task-bar--item a:focus img {

	/* No hover on touch devices */
	transform: scale(1);
}

.c-top-task-bar--item a:hover img,
.c-top-task-bar--item a:focus img,
.is-touch .c-top-task-bar--item a:active img {
	transform: scale(1);
}

.is-touch .c-top-task-bar a:hover .link::after,
.is-touch .c-top-task-bar a:hover .link,
.is-touch .c-top-task-bar a:focus .link::after,
.is-touch .c-top-task-bar a:focus .link {
	color: var(--color-black-400);
}

.c-top-task-bar a:hover .link::after,
.c-top-task-bar a:hover .link,
.c-top-task-bar a:focus .link::after,
.c-top-task-bar a:focus .link,
.is-touch .c-top-task-bar a:active .link::after,
.is-touch .c-top-task-bar a:active .link {
	color: var(--color-red-400);
}

/* Dark top task bar */
.c-top-task-bar.type-dark .c-top-task-bar--list {
	background-color: var(--color-gray-50);
	border-top: 0.1rem solid var(--color-gray-400);
}

.c-top-task-bar.type-dark .c-top-task-bar--item {
	border-bottom: 0.1rem solid var(--color-gray-400);
}

.c-top-task-bar .c-top-task-bar--item span {
	font-size: var(--font-size-text-small);
	line-height: calc(var(--base-line-height) + 0.1rem);
}

.c-top-task-bar.type-dark .link {
	color: var(--color-red-500);
}

.is-touch .c-top-task-bar.type-dark a:hover,
.is-touch .c-top-task-bar.type-dark a:focus {
	background-color: inherit;
}

.c-top-task-bar.type-dark a:hover,
.c-top-task-bar.type-dark a:focus,
.is-touch .c-top-task-bar.type-dark a:active {
	background-color: var(--color-gray-300);
}

.is-touch .c-top-task-bar.type-dark a:hover .link::after,
.is-touch .c-top-task-bar.type-dark a:hover .link,
.is-touch .c-top-task-bar.type-dark a:focus .link::after,
.is-touch .c-top-task-bar.type-dark a:focus .link {
	color: var(--color-red-500);
}

.c-top-task-bar.type-dark a:hover .link::after,
.c-top-task-bar.type-dark a:hover .link,
.c-top-task-bar.type-dark a:focus .link::after,
.c-top-task-bar.type-dark a:focus .link,
.is-touch .c-top-task-bar.type-dark a:active .link::after,
.is-touch .c-top-task-bar.type-dark a:active .link {
	color: var(--color-black-400);
}

.c-top-task-bar--item a::before,
.c-top-task-bar--item a::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.c-top-task-bar--item a:focus::after {
	border: 0.1rem solid var(--color-black-400);
	width: calc(100% - 0.2rem);
	height: calc(100% - 0.2rem);
}

@media screen and (min-width: 768px),print {
	.c-top-task-bar--list {
		box-shadow: var(--shadow-small);
	}

	.c-top-task-bar--item {
		border: none;
		display: flex;
		align-content: stretch;
	}

	.c-top-task-bar--item a {
		display: flex;
		align-content: center;
		align-items: center;
		padding: var(--base-line-height) calc(1.5 * var(--base-line-height));
		position: relative;
	}

	.c-top-task-bar--icon {
		height: calc(3 * var(--base-line-height));
		position: relative;
		margin-bottom: calc(0.5 * var(--base-line-height));
		top: auto;
		transform: none;
	}

	.c-top-task-bar--icon img {
		align-self: center;
		display: block;
		height: calc(3 * var(--base-line-height));
		max-width: calc(3 * var(--base-line-height));
		margin: auto;
	}

	.c-top-task-bar .link {
		display: block;
		padding-left: 0;
		padding-right: 0;
		position: relative;
	}

	.c-top-task-bar .link::after {
		position: relative;
		top: 0.1rem;
	}

	/* rtl:raw:
	.c-top-task-bar .link::after {
	    transform: rotateY(180deg);
		display:inline-block;
	}
	*/

	.c-top-task-bar.type-dark .c-top-task-bar--item {
		border: none;
	}

	.c-top-task-bar.type-dark .c-top-task-bar--list,
	.c-top-task-bar .c-top-task-bar--list {
		border-top: 0;
		border-radius: 0.4rem;
	}

	.c-top-task-bar--item:not(:last-child) a::before {
		border-right: 0.1rem solid var(--color-gray-300);
		width: 100%;
		height: 100%;
		border-top-width: 0;
		border-bottom-width: 0;
	}

	.c-top-task-bar--item a:hover img,
	.c-top-task-bar--item a:focus img {
		transform: scale(1.1);
	}

	.c-top-task-bar--list .c-top-task-bar--item:first-child a,
	.c-top-task-bar--list .c-top-task-bar--item:first-child a:focus::after {
		border-top-left-radius: 0.4rem;
		border-bottom-left-radius: 0.4rem;
	}

	.c-top-task-bar--list .c-top-task-bar--item:last-child a,
	.c-top-task-bar--list .c-top-task-bar--item:last-child a:focus::after {
		border-top-right-radius: 0.4rem;
		border-bottom-right-radius: 0.4rem;
	}
}

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-contact-teasers/clientlib/css/voc-contact-teasers.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
.c-voc-contact-teasers {
	display: block;
	text-align: left;
	background-color: var(--color-gray-50);
	padding-top: calc(2 * var(--base-line-height));
	padding-bottom: calc(2 * var(--base-line-height));
}

.c-voc-contact-teasers--teaser-group {
	margin-bottom: var(--base-line-height);
}

.c-voc-contact-teasers--teaser-group-headline {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-voc-contact-teasers--teaser {
	border-radius: 0.4rem;
	padding: var(--base-line-height);
	box-shadow: var(--shadow-small);
	background-color: var(--color-white-500);
	margin-bottom: var(--base-line-height);
}

.c-voc-contact-teasers--teaser-header {
	display: flex;
	align-items: center;
}

.c-voc-contact-teasers--teaser-header-icon {
	flex: 0 0 auto;
	height: calc(4 * var(--base-line-height));
	width: auto;
}

.c-voc-contact-teasers--teaser-header-text-box {
	flex-basis: 80%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	padding-left: calc(0.5 * var(--base-line-height));
}

h5.c-voc-contact-teasers--teaser-headline {
	margin: 0;
	flex-basis: 100%;
	color: var(--color-red-500);
}

.c-voc-contact-teasers--teaser-subline {
	position: relative;
	flex-basis: auto;
	font-size: var(--font-size-text-large);
	font-weight: 800;
	line-height: calc(1.5 * var(--base-line-height));
	align-self: flex-start;
}

.c-voc-contact-teasers--teaser-subline:focus {
	outline: 0.1rem solid var(--color-red-500);
	color: var(--color-red-500);
}

.c-voc-contact-teasers--teaser-subline:hover,
.c-voc-contact-teasers--teaser-subline:hover::after {
	color: var(--color-red-400);
}

.c-voc-contact-teasers--teaser-subline.icon-communication {
	padding-left: calc(2.1rem + 0.5 * var(--base-line-height));
	background: url(../assets/img/b720904a3e4b15e4759b.svg) left top no-repeat;
	background-size: calc(1.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height));

	/* rtl:begin:ignore */
	direction: ltr;

	/* rtl:end:ignore */
}

/* rtl:raw:
.c-voc-contact-teasers--teaser-subline.icon-communication::after {
    display: inline-block;
    position: absolute;
    left: -1.9rem;
}
*/

.c-voc-contact-teasers--teaser-subline.icon-communication:hover {
	background-image: url(../assets/img/04b1ae52758d4ac32d89.svg);
}

.c-voc-contact-teasers--teaser-subline::after {
	font-size: var(--font-size-icons-standard);
	top: 0.2rem;
}

.c-voc-contact-teasers--teaser-copy {
	margin-bottom: 0;
	padding-top: calc(1.5 * var(--base-line-height));
}

.c-voc-contact-teasers--links {
	border-top: 0.1rem solid var(--color-gray-300);
	margin-top: calc(1.5 * var(--base-line-height));
	padding-top: calc(1.5 * var(--base-line-height));
}

h5.c-voc-contact-teasers--link-list-headline {
	font-size: var(--font-size-standard);
	margin: 0;
	font-weight: bold;
}

.c-voc-contact-teasers--link-list-subline {
	font-size: var(--font-size-1);
	font-weight: normal;
	line-height: 1.07;
	color: var(--color-gray-600);
	margin-left: calc(0.5 * var(--base-line-height));
}

.c-voc-contact-teasers--link-list-item {
	padding-top: calc(0.5 * var(--base-line-height));
	list-style-type: none;
	font-weight: normal;
}

.c-voc-contact-teasers--link-list-link {
	padding: 0.4rem 0 0 calc(2.5 * var(--base-line-height));
	min-height: calc(2 * var(--base-line-height));
	background-repeat: no-repeat;
	background-size: calc(2 * var(--base-line-height)) calc(2 * var(--base-line-height));
	font-weight: normal;
	line-height: 1.4;
	word-break: break-word;
}

.c-voc-contact-teasers--link-list-link::after {
	position: absolute;
	left: 0;
	content: "";
	height: 2.4rem;
	width: 2.4rem;
	top: 0.2rem;
	background-size: auto 2.4rem;
}

.c-voc-contact-teasers--link-list-link.icon-communication {

	/* rtl:begin:ignore */
	direction: ltr;

	/* rtl:end:ignore */
}

.c-voc-contact-teasers--link-list-link.icon-chat::after {
	background-image: url(../assets/img/53b71ac3075acfda7ab8.svg);
}

.c-voc-contact-teasers--link-list-link.icon-chat:hover::after {
	background-image: url(../assets/img/b0567ccddb6fc77b02e4.svg);
}

.c-voc-contact-teasers--link-list-link.icon-envelope::after {
	background-image: url(../assets/img/b13b6fc2fc5400aead9a.svg);
}

.c-voc-contact-teasers--link-list-link.icon-envelope:hover::after {
	background-image: url(../assets/img/b14a0be503b780777c65.svg);
}

.c-voc-contact-teasers--link-list-link.icon-location-finder::after {
	background-image: url(../assets/img/8c1e1ec4ad4af30bc08e.svg);
}

.c-voc-contact-teasers--link-list-link.icon-location-finder:hover::after {
	background-image: url(../assets/img/0d824cdb64e9d8ddc69c.svg);
}

.c-voc-contact-teasers--link-list-link.icon-communication::after {
	background-image: url(../assets/img/b720904a3e4b15e4759b.svg);
}

.c-voc-contact-teasers--link-list-link.icon-communication:hover::after {
	background-image: url(../assets/img/04b1ae52758d4ac32d89.svg);
}

.c-voc-contact-teasers--link-list-link.icon-question-mark::after {
	background-image: url(../assets/img/512c8f560aaf6ff3181a.svg);
}

.c-voc-contact-teasers--link-list-link.icon-question-mark:hover::after {
	background-image: url(../assets/img/0189fb4698d9291f0a3b.svg);
}

/* rtl:raw:
.c-voc-contact-teasers--link-list-link.icon-question-mark::after
{
	transform: rotateY(180deg);
}
*/

.c-voc-contact-teasers--link-list-link:focus {
	outline: 0.1rem solid var(--color-red-500);
	color: var(--color-red-500);
}

.c-voc-contact-teasers--link-list-link:hover {
	color: var(--color-red-400);
}

.c-voc-contact-teasers--conditions-apply-star {
	font-size: var(--font-size-standard);
	font-weight: normal;
	font-style: normal;
	line-height: 1.4;
	color: var(--color-gray-600);
	margin-left: calc(0.5 * var(--base-line-height));
}

.c-voc-contact-teasers--conditions-apply-text {
	font-size: var(--font-size-standard);
	font-weight: normal;
	font-style: normal;
	line-height: 1.4;
}

.c-voc-contact-teasers--conditions-apply-text,
.c-voc-contact-teasers--conditions-apply-text .list li span {
	color: var(--color-gray-600);
}

@media screen and (min-width: 1024px),print {
	.c-voc-contact-teasers--teaser.l-grid--w-25pc-m-m {
		max-width: calc(100% / 4 - (3 * var(--base-line-height) / 4));
	}

	.c-voc-contact-teasers--teaser.l-grid--w-33pc-m-m {
		max-width: calc(100% / 3 - (2 * var(--base-line-height) / 3));
	}

	.c-voc-contact-teasers--teaser.l-grid--w-50pc-m-m {
		max-width: calc(100% / 2 - (1 * var(--base-line-height) / 2));
	}

	.c-voc-contact-teasers--teaser:not(:last-child) {
		margin-right: var(--base-line-height);
	}

	.c-voc-contact-teasers--link-list-subline {
		display: block;
		margin-left: 0;
	}
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-voc-contact-teasers {
		max-width: none;
		padding-left: var(--component-page-max-padding);
		padding-right: var(--component-page-max-padding);
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-headline/clientlib/css/voc-headline.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.c-voc-headline {
	text-align: left;
	margin-top: calc(2 * var(--base-line-height));
}

.c-voc-headline h3,
.c-voc-headline--headline,
.c-voc-headline--copy,
.c-voc-headline--quick-links-label {
	margin-bottom: 0;
}

.c-voc-headline--headline {
	font-size: var(--font-size-h1-mobile-small);
	line-height: calc(2 * var(--base-line-height));
}

.c-voc-headline--copy {
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-voc-headline--quick-links-label {
	color: var(--color-gray-600);
}

/* 2nd selector required for UAT/Prod */
.c-voc-headline--quick-links-list,
.has-rte .c-voc-headline--quick-links-list {
	margin-top: calc(2 * var(--base-line-height));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 0;
	padding-top: 0;
	list-style-type: none;
	line-height: calc(1.5 * var(--base-line-height));
	overflow: visible;
}

.c-voc-headline--quick-links-item {
	margin: 0 calc(2 * var(--base-line-height)) var(--base-line-height) 0;
}

/* 2nd selector required for UAT/Prod */
.c-voc-headline--quick-links-link:not(.base-button),
.has-rte .c-voc-headline--quick-links-link:not(.base-button) {
	display: flex;
	align-items: baseline;
	height: calc(1.5 * var(--base-line-height));
	font-weight: normal;
	color: var(--color-black-400);
}

/* 2nd selector required for UAT/Prod */
.c-voc-headline--quick-links-link:not(.base-button):focus,
html:not(.is-touch) .has-rte .c-voc-headline--quick-links-link:not(.base-button):focus {
	color: var(--color-black-400);
	outline: 0.1rem solid var(--color-red-500);
}

/* 2nd selector required for UAT/Prod */
.c-voc-headline--quick-links-link:not(.base-button):hover,
html:not(.is-touch) .has-rte .c-voc-headline--quick-links-link:not(.base-button):hover {
	color: var(--color-red-400);
	text-decoration: none;
}

/* 2nd selector required for UAT/Prod */
.c-voc-headline--quick-links-link:not(.base-button):hover::after,
html:not(.is-touch) .has-rte .c-voc-headline--quick-links-link:not(.base-button):hover::after {
	color: var(--color-red-400);
}

/* 2nd selector required for UAT/Prod */
.c-voc-headline--quick-links-link.base-button,
.has-rte .c-voc-headline--quick-links-link.base-button {
	display: block;
	align-items: baseline;
	margin-bottom: 0;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	color: var(--color-white-500);
}

.c-voc-headline--quick-links-link.base-button:hover {
	color: var(--color-white-500);
}

/* 2nd selector required for UAT/Prod */
.c-voc-headline--quick-links-link.base-button::after,
html:not(.is-touch) .has-rte .c-voc-headline--quick-links-link.base-button::after {
	right: 0;
	color: var(--color-white-500);
}

/* EDIT MODE */

.is-editmode .quick-links-right-aligned {
	margin-bottom: calc(11 * var(--base-line-height));
}

@media screen and (max-width: 767px),print {
	.c-voc-headline--quick-links-item {
		flex-basis: 100%;
		margin-right: 0;
	}
}

@media screen and (min-width: 768px),print {
	.c-voc-headline--headline {
		font-size: var(--font-size-h1-mobile-medium);
		line-height: calc(2.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-voc-headline--headline {
		font-size: var(--font-size-h1-mobile-large);
		line-height: calc(3 * var(--base-line-height));
	}

	.c-voc-headline.quick-links-right-aligned {
		display: flex;
		justify-content: space-between;
	}

	.c-voc-headline.quick-links-right-aligned .c-voc-headline--headline-wrapper,
	.c-voc-headline.quick-links-right-aligned .c-voc-headline--quick-links-list {
		width: calc(50% - 3 * var(--base-line-height) / 2);
	}

	.c-voc-headline.quick-links-right-aligned .c-voc-headline--headline-wrapper {
		margin-bottom: 0;
	}

	.c-voc-headline.quick-links-right-aligned .c-voc-headline--quick-links-list {
		justify-content: flex-end;
		align-items: baseline;
		margin-top: calc(var(--base-line-height) / 2 + 0.2rem);
	}

	.c-voc-headline.quick-links-right-aligned .c-voc-headline--quick-links-item {
		margin: 0 0 var(--base-line-height) calc(2 * var(--base-line-height));
	}
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-icon-teasers/clientlib/css/voc-icon-teasers.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
.c-voc-icon-teasers {
	display: block;
	text-align: center;
	padding-top: calc(4 * var(--base-line-height));
	padding-bottom: calc(4.8 * var(--base-line-height));
}

.c-voc-icon-teasers--heading {
	margin-bottom: calc(3.2 * var(--base-line-height));
}

.c-voc-icon-teasers--headline-container {
	display: none;
}

.c-voc-icon-teasers--card-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.c-voc-icon-teasers--card {
	flex-basis: 100%;
	border-radius: 0.2rem;
	padding-left: calc(2 * var(--base-line-height));
	padding-right: calc(2 * var(--base-line-height));
	padding-bottom: calc(2 * var(--base-line-height));
	border: 0.1rem solid var(--color-gray-200);
}

.c-voc-icon-teasers--outer-heading {
	display: table;
	font-size: var(--body-font-size);
	line-height: var(--font-size-4);
	background-color: var(--color-white-500);
	margin: 0 auto calc(1.8 * var(--base-line-height));
	padding: 0 0.3rem;
	transform: translateY(-50%);
}

.c-voc-icon-teasers--card img {
	display: block;
	margin: 0 auto var(--base-line-height);
	width: calc(3 * var(--base-line-height));
	height: calc(3 * var(--base-line-height));
}

.c-voc-icon-teasers--card .c-voc-icon-teasers--inner-heading.link img {
	margin: 0 auto 1.1rem;
}

.c-voc-icon-teasers--inner-heading {
	display: inline-block;
	font-size: var(--body-font-size);
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: bold;
	padding: calc(0.25 * var(--base-line-height)) calc(0.5 * var(--base-line-height));
}

.c-voc-icon-teasers--inner-heading.link:focus {
	outline: 0.1rem solid var(--color-black-500);
	color: var(--color-red-500);
}

.c-voc-icon-teasers--inner-heading.link:hover,
.c-voc-icon-teasers--inner-heading.link:hover::after {
	color: var(--color-red-400);
}

.c-voc-icon-teasers--card ul {
	line-height: calc(1.5 * var(--base-line-height));
}

.c-voc-icon-teasers--card li {
	list-style-type: none;
	font-size: var(--body-font-size);
	margin-bottom: var(--base-line-height);
}

.c-voc-icon-teasers--card li:first-child {
	margin-top: var(--base-line-height);
}

.c-voc-icon-teasers--card li:last-child {
	margin-bottom: 0;
}

.c-voc-icon-teasers--link {
	font-weight: normal;
	padding-right: calc(1 * var(--base-line-height));
}

.c-voc-icon-teasers--link::after {
	display: inline-block;
	width: 1rem;
	margin-right: calc(-1 * var(--base-line-height));
}

.c-voc-icon-teasers--card li a:focus {
	outline: 0.1rem solid var(--color-red-500);
	color: var(--color-red-500);
}

.c-voc-icon-teasers--card li a:hover,
.c-voc-icon-teasers--link:hover::after {
	color: var(--color-red-400);
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-voc-icon-teasers--card-container {
		align-items: stretch;
		justify-content: center;
	}

	.c-voc-icon-teasers--card {
		flex-basis: 29%;
		margin: var(--base-line-height);
	}
}

@media screen and (min-width: 1024px),print {
	.c-voc-icon-teasers--headline-container {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-end;
		margin: 0 auto;
	}

	.c-voc-icon-teasers--headline-item {
		background-color: var(--color-white-500);
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: center;
		line-height: 2.1rem;
		height: 0.1rem;
		align-items: center;
		margin: 0.1rem 0 0.2rem;
		flex-grow: 1;
		flex-shrink: 1;
	}

	.c-voc-icon-teasers--headline-item span {
		background: var(--color-white-500); /* var(--color-white-500) */
		padding: 0 0.3rem;
		max-width: 75%;
		display: inline-block;
		position: relative;
	}

	.c-voc-icon-teasers--card-container {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: stretch;
		margin: -0.3rem auto 0;
	}

	.c-voc-icon-teasers--headline-container.teasers-1,
	.c-voc-icon-teasers--card-container.teasers-1 {
		max-width: calc((16 * var(--base-line-height)));
	}

	.c-voc-icon-teasers--headline-container.teasers-2,
	.c-voc-icon-teasers--card-container.teasers-2 {
		max-width: calc((16 * var(--base-line-height)) * 2);
	}

	.c-voc-icon-teasers--headline-container.teasers-3,
	.c-voc-icon-teasers--card-container.teasers-3 {
		max-width: calc((16 * var(--base-line-height)) * 3);
	}

	.c-voc-icon-teasers--headline-container.teasers-4,
	.c-voc-icon-teasers--card-container.teasers-4 {
		max-width: calc((16 * var(--base-line-height)) * 4);
	}

	.c-voc-icon-teasers--headline-container.teasers-5,
	.c-voc-icon-teasers--card-container.teasers-5 {
		max-width: calc((16 * var(--base-line-height)) * 5);
	}

	.c-voc-icon-teasers--headline-container.teasers-6,
	.c-voc-icon-teasers--card-container.teasers-6 {
		max-width: calc((16 * var(--base-line-height)) * 6);
	}

	.c-voc-icon-teasers--headline-container.teasers-7,
	.c-voc-icon-teasers--card-container.teasers-7 {
		max-width: calc((16 * var(--base-line-height)) * 7);
	}

	.c-voc-icon-teasers--headline-container.teasers-8,
	.c-voc-icon-teasers--card-container.teasers-8 {
		max-width: calc((16 * var(--base-line-height)) * 8);
	}

	.c-voc-icon-teasers--headline-container.teasers-9,
	.c-voc-icon-teasers--card-container.teasers-9 {
		max-width: calc((16 * var(--base-line-height)) * 9);
	}

	.c-voc-icon-teasers--headline-container.teasers-10,
	.c-voc-icon-teasers--card-container.teasers-10 {
		max-width: calc((16 * var(--base-line-height)) * 10);
	}

	.c-voc-icon-teasers--card {
		flex-basis: 0 0 auto;
		border-radius: 0;
		margin: 0;
		border-left-width: 0;
		border-right-width: 0;
		padding-top: calc(var(--base-line-height) + (1.7 * var(--base-line-height)));
	}

	.c-voc-icon-teasers--card:first-child {
		border-top-left-radius: 0.2rem;
		border-bottom-left-radius: 0.2rem;
		border-left: 0.1rem solid var(--color-gray-200);
	}

	.c-voc-icon-teasers--card:last-child {
		border-top-right-radius: 0.2rem;
		border-bottom-right-radius: 0.2rem;
	}

	.c-voc-icon-teasers--card.last {
		border-right: 0.1rem solid var(--color-gray-200);
	}

	.c-voc-icon-teasers--card img {
		margin: 0 auto var(--base-line-height);
	}

	.c-voc-icon-teasers--card .c-voc-icon-teasers--inner-heading.link img {
		margin: 0 auto 1.1rem;
	}

	.c-voc-icon-teasers--outer-heading {
		display: none;
	}
}

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-marketing-stage/clientlib/css/voc-marketing-stage.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
:root {
	--height-line-height: calc(2.3 * var(--base-line-height));
}

.c-voc-marketing-stage {
	display: block;
}

.c-voc-marketing-stage.component-margin {
	margin-bottom: calc(4 * var(--base-line-height));
	position: relative;
}

.c-voc-marketing-stage--container {
	left: 0;
	width: 100%;
	overflow: hidden;
	position: absolute;
	height: calc(100% - 4.7rem);
}

.c-voc-marketing-stage--content {
	position: relative;
	height: auto;
	min-height: calc(17 * var(--base-line-height));
}

.c-voc-marketing-stage--bg-image {
	width: 100%;
	height: 100%;

	/* please note that https://github.com/constancecchen/object-fit-polyfill is used */
	object-fit: cover;
}

/* BLOCK TEXT */

.c-voc-marketing-stage .c-voc-tracking-bar--input-outer-group {
	border: none;
	border-radius: 0;
}

.c-voc-marketing-stage--block-text {
	font-size: var(--font-size-h2-mobile-small);
	font-weight: 800;
	color: var(--color-white-500);
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.left-aligned-grid .c-voc-marketing-stage--block-text {
	font-size: var(--font-size-4);
	text-shadow: 0.1rem 0.1rem rgba(0, 0, 0, 0.4);
	line-height: calc(2 * var(--base-line-height));
}

/* TEXTBOX AND LINK */
.c-voc-marketing-stage--textbox {
	padding: calc(1.5 * var(--base-line-height));
	padding-top: calc(3 * var(--base-line-height));
	margin: 0 auto;
	width: 100%;
}

.c-voc-marketing-stage--textbox .c-voc-tracking-bar {
	margin-bottom: 0;
}

.c-voc-marketing-stage .c-voc-tracking-bar--form {
	padding: 0;
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-voc-marketing-stage--link {
	text-align: left;
	font-size: var(--font-size-standard);
	font-weight: bold;
	color: var(--color-white-500);
	line-height: calc(1.5 * var(--base-line-height));
	height: calc(1.5 * var(--base-line-height));
	margin: 0 0 calc(2.5 * var(--base-line-height)) 0;
}

.left-aligned-grid .c-voc-marketing-stage--link {
	font-size: var(--font-size-2);
	margin: 0;
}

.c-voc-marketing-stage--link .icon-plus::before {
	content: var(--icon-plus);
	font-size: var(--font-size-icon-marketing-stage-link-plus);
}

.c-voc-marketing-stage--link .text {
	margin-left: calc(0.5 * var(--base-line-height));
	vertical-align: text-top;
}

.c-voc-marketing-stage--link a {
	display: inline-flex;
	align-items: center;
}

.c-voc-marketing-stage--link a:focus {
	outline: 0.1rem solid var(--color-red-500);
	color: var(--color-white-500);
}

.c-voc-marketing-stage--link .link-internal::after,
.c-voc-marketing-stage--link .link-external::after {
	top: 0;
}

/* CARDS */
.c-voc-marketing-stage--card-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

.left-aligned-grid .c-voc-marketing-stage--card-container {
	padding: 0 calc(1.5 * var(--base-line-height));
}

.c-voc-marketing-stage--card {
	box-shadow: var(--shadow-small);
	border-radius: 0.4rem;
	flex-basis: 90%;
	margin-bottom: calc(1.5 * var(--base-line-height));
	background-color: var(--color-white-500);
}

.c-voc-marketing-stage--card.no-icon {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

a.c-voc-marketing-stage--card:hover {
	box-shadow: 0 0.2rem 3rem 0.1rem rgba(94, 94, 94, 0.4);
	cursor: pointer;
	z-index: 5;
}

a.c-voc-marketing-stage--card:focus {
	box-shadow: inset 0 0 0 0.2rem var(--color-black-500);
	cursor: pointer;
}

a.c-voc-marketing-stage--card:hover .c-voc-marketing-stage--card-heading {
	color: var(--color-red-400);
}

.c-voc-marketing-stage--card-body {
	padding: calc(1.5 * var(--base-line-height));
	text-align: center;
}

.c-voc-marketing-stage--card-image {
	width: auto;
	height: calc(3 * var(--base-line-height));
}

.c-voc-marketing-stage--card-heading {
	font-weight: bold;
	font-size: var(--font-size-1);
	text-align: center;
	color: var(--color-black-400);
	padding: calc(0.4 * var(--base-line-height));
}

.c-voc-marketing-stage--card-subheading {
	font-weight: normal;
	font-size: var(--font-size-0);
	text-align: center;
	color: var(--color-gray-600);
	margin: 0 auto;
}

/* PICTURE OVERLAY */
.c-voc-marketing-stage--content.has-background-20 {
	background-image: linear-gradient(to bottom, rgba(37, 27, 17, 0.2), rgba(37, 27, 17, 0.2)), linear-gradient(to bottom, rgba(37, 27, 17, 0), rgba(37, 27, 17, 0.5));
	background-size: 100% calc(100% - 4.7rem);
	background-repeat: no-repeat;
}

.c-voc-marketing-stage--content.has-background-40 {
	background-image: linear-gradient(to bottom, rgba(37, 27, 17, 0.4), rgba(37, 27, 17, 0.4)), linear-gradient(to bottom, rgba(37, 27, 17, 0), rgba(37, 27, 17, 0.5));
	background-size: 100% calc(100% - 4.7rem);
	background-repeat: no-repeat;
}

.c-voc-marketing-stage--content .c-form-step--error-message {
	padding: calc(0.5 * var(--base-line-height)) 0 calc(0.5 * var(--base-line-height)) calc(2.5 * var(--base-line-height));
	background-position: left calc(1 * var(--base-line-height)) top calc(0.5 * var(--base-line-height));
}

/* EDIT MODE */
.is-editmode .c-voc-marketing-stage-teaser-config {
	margin-top: calc(12 * var(--base-line-height));
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-voc-marketing-stage--card-container {
		width: 95%;
	}
}

@media screen and (min-width: 768px),print {
	.c-voc-marketing-stage--container {
		position: relative;
		height: calc(30 * var(--base-line-height));
	}

	.c-voc-marketing-stage--content {
		margin-top: calc(-30 * var(--base-line-height));
		min-height: calc(30 * var(--base-line-height));
	}

	.c-voc-marketing-stage--content.has-background-20 {
		background-size: 100% calc(30 * var(--base-line-height));
	}

	.c-voc-marketing-stage--content.has-background-40 {
		background-size: 100% calc(30 * var(--base-line-height));
	}

	.c-voc-marketing-stage--block-text {
		font-size: var(--font-size-h3-tablet);
		height: var(--font-size-h3-tablet);
		line-height: calc(2.5 * var(--base-line-height));
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-voc-marketing-stage--block-text {
		font-size: var(--font-size-h1-mobile-small);
		height: var(--height-line-height);
		line-height: var(--height-line-height);
	}

	.c-voc-marketing-stage--card-container {
		flex-flow: row nowrap;
		align-items: stretch;
		position: absolute;
		bottom: -3.3rem;
		left: 50%;
		transform: translateX(-50%);
	}

	.c-voc-marketing-stage--card-container .c-voc-quicklink:not(:last-child):not(.imp-triangle) {
		border-right: 0.1rem solid var(--color-gray-300);
	}

	.c-voc-marketing-stage--card-container .c-voc-quicklink.imp-triangle + .c-voc-quicklink:not(.imp-triangle) {
		border-left: 0.1rem solid var(--color-gray-300);
	}

	.c-voc-marketing-stage--card {
		margin: calc(3 * var(--base-line-height)) 0 0;
		border-radius: 0;
		max-width: calc(19 * var(--base-line-height));
	}

	.c-voc-marketing-stage--card:first-child {
		border-top-left-radius: 0.4rem;
		border-bottom-left-radius: 0.4rem;
	}

	.c-voc-marketing-stage--card:last-child {
		border-top-right-radius: 0.4rem;
		border-bottom-right-radius: 0.4rem;
	}

	.c-voc-marketing-stage--textbox {
		width: calc(45 * var(--base-line-height));
		padding-top: calc(6.5 * var(--base-line-height));
	}

	.full-width-grid .c-voc-marketing-stage {
		max-width: var(--width-page-max);
		margin-left: auto;
		margin-right: auto;
	}

	.left-aligned-grid .c-voc-marketing-stage,
	.left-aligned-grid.full-width-grid .c-voc-marketing-stage {
		max-width: 100%;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-voc-marketing-stage--card-container {
		width: 75%;
	}
}

@media screen and (min-width: 1365px) {
	.c-voc-marketing-stage--card-container {
		width: 65%;
	}

	.c-voc-marketing-stage--textbox {
		padding-top: calc(4.5 * var(--base-line-height));
	}
}

/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-quick-link/clientlib/css/voc-quick-link.css ***!
  \******************************************************************************************************************************************************************************************************************************/
.c-voc-quicklink {
	margin-bottom: var(--grid-col-gap);
	border-radius: 0.4rem;
	flex-basis: 100%;
	box-shadow: var(--shadow-small);
	background-color: var(--color-white-500);
}

.c-voc-quicklink-image {
	flex-basis: calc(3 * var(--base-line-height));
	width: calc(3 * var(--base-line-height));
	height: calc(3 * var(--base-line-height));
}

.c-voc-quicklink-text {
	flex-basis: 100%;
	margin-left: var(--base-line-height);
}

.c-voc-quicklink-body {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding: calc(1.5 * var(--base-line-height));
}

.c-voc-quicklink.imp-triangle {
	position: relative;
}

.c-voc-quicklink.imp-triangle::before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	right: 0;
	border-top: 0 solid transparent;
	border-bottom: 3.9rem solid transparent;
	border-right: 3.9rem solid var(--color-yellow-500);
}

.c-voc-quicklink-headline {
	text-align: left;
	margin: 0.7rem 0 1.4rem;
}

.c-voc-quicklink-subtext {
	font-size: var(--body-font-size);
	font-weight: normal;
	line-height: 1.4;
	color: var(--color-black-400);
	text-align: left;
}

.c-voc-contact-lookup-quicklinks-container a:focus {
	box-shadow: var(--shadow-large);
}

.c-voc-contact-lookup--linkwrapper a:focus {
	outline: 0.1rem solid var(--color-red-400);
	color: var(--color-red-400);
}

.c-voc-contact-lookup-quicklinks-container a:hover .c-voc-quicklink-headline,
.c-voc-contact-lookup--linkwrapper a:hover {
	color: var(--color-red-400);
}

a.c-voc-quicklink:hover .link-internal::after,
a.c-voc-quicklink:focus .link-internal::after,
.c-voc-contact-lookup--linkwrapper a.link-internal:hover::after,
.c-voc-contact-lookup--linkwrapper a.link-internal:focus::after {
	color: var(--color-red-400);
}

@media screen and (min-width: 768px),print {
	.c-voc-quicklink {
		flex-basis: var(--grid-cols-6);
	}

	.c-voc-quicklink:nth-child(-2n+3) {
		margin-right: var(--grid-col-gap);
	}
}

/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-quick-link/clientlib/css/voc-marketing-stage-quick-link.css ***!
  \**********************************************************************************************************************************************************************************************************************************************/
.c-voc-marketing-stage .c-voc-quicklink {
	overflow: hidden;
	margin-bottom: var(--base-line-height);
	flex-basis: 90%;
}

.left-aligned-grid .c-voc-marketing-stage .c-voc-quicklink {
	flex-basis: 100%;
}

.c-voc-marketing-stage .c-voc-quicklink.imp-triangle::before {
	top: 0;
}

.c-voc-marketing-stage .c-voc-quicklink.no-icon {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

.c-voc-marketing-stage .c-voc-quicklink:first-child {
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
}

.c-voc-marketing-stage .c-voc-quicklink:last-child {
	border-top-right-radius: 0.4rem;
	border-bottom-right-radius: 0.4rem;
}

.c-voc-marketing-stage .c-voc-quicklink-body {
	display: block;
}

.c-voc-marketing-stage .c-voc-quicklink-text {
	margin: 0;
}

.c-voc-marketing-stage .c-voc-quicklink-image {
	text-align: center;
	height: calc(2.5 * var(--base-line-height));
	width: auto;
}

.left-aligned-grid .c-voc-marketing-stage .c-voc-quicklink-headline,
.left-aligned-grid .c-voc-marketing-stage .c-voc-quicklink-subtext {
	line-height: calc(var(--base-line-height) + 0.4rem);
}

.c-voc-marketing-stage .c-voc-quicklink-headline {
	font-weight: bold;
	font-size: var(--font-size-1);
	line-height: calc(var(--base-line-height) + 0.1rem);
	text-align: center;
	display: block;
	margin: 0;
	color: var(--color-black-400);
	padding: calc(0.5 * var(--base-line-height));
}

.c-voc-marketing-stage .c-voc-quicklink-subtext {
	font-weight: normal;
	font-size: var(--font-size-0);
	line-height: calc(var(--base-line-height) + 0.1rem);
	text-align: center;
	color: var(--color-gray-600);
	margin: 0 auto;
}

.c-voc-marketing-stage .c-voc-quicklink-headline::after {
	content: "";
}

/* prevent overlapping box-shadow between the quicklinks in default state */
.c-voc-marketing-stage a.c-voc-quicklink:not(:first-child):not(:hover):not(:focus) {
	clip-path: polygon(0% -10%, 110% -10%, 110% 110%, 0% 110%);
}

.c-voc-marketing-stage a.c-voc-quicklink:hover {
	box-shadow: 0 0.2rem 3rem 0.1rem rgba(94, 94, 94, 0.4);
	cursor: pointer;
	z-index: 5;
}

.c-voc-marketing-stage a.c-voc-quicklink:focus {
	box-shadow: inset 0 0 0 0.2rem var(--color-black-500);
	cursor: pointer;
}

.c-voc-marketing-stage a.c-voc-quicklink:hover .c-voc-quicklink-headline {
	color: var(--color-red-400);
}

@media screen and (min-width: 768px),print {
	.c-voc-marketing-stage .c-voc-quicklink {
		margin: calc(3 * var(--base-line-height)) 0 0;
		border-radius: 0;
		max-width: calc(19 * var(--base-line-height));
	}

	.c-voc-marketing-stage .c-voc-quicklink.imp-triangle {
		padding-top: calc(0.5 * var(--base-line-height));
		margin: calc(1 * var(--base-line-height)) 0 0;
		position: relative;
		border-top-left-radius: 0.4rem;
		border-top-right-radius: 0.4rem;
	}

	.c-voc-marketing-stage .c-voc-quicklink.imp-triangle .c-voc-quicklink-image {
		height: calc(3 * var(--base-line-height));
	}

	.c-voc-marketing-stage--card-container .c-voc-quicklink:not(:first-child) {
		margin-left: -0.1rem;
	}
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-button/clientlib/css/cmp-button.css ***!
  \********************************************************************************************************************************************************************************************************************/
.cmp-button {
	position: relative;
	background-color: var(--color-red-500);
	border-radius: 0.4rem;
	color: var(--color-white-500);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: var(--font-size-2);
	min-height: 4.4rem;
	min-width: calc(8.5 * var(--base-line-height));
	font-weight: bold;
	line-height: 1.6rem;
	padding: var(--base-line-height) 3.2rem;
	transition: background-color 200ms;
	width: fit-content;
}

.cmp-button:hover {
	background-color: var(--color-red-400);
}

.cmp-button:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.94), 0 0 0 0.4rem var(--color-red-500);
}

.button-color-secondary > .cmp-button {
	color: var(--color-red-500);
	background-color: var(--color-white-500);
	border: solid 0.1rem var(--color-red-500);
	padding-top: 1.3rem;
	padding-bottom: 1.3rem;
}

.button-color-secondary > .cmp-button:hover {
	background-color: var(--color-red-400);
	color: var(--color-white-500);
}

.button-color-green > .cmp-button {
	background-color: var(--color-green-600);
}

.button-color-green > .cmp-button:hover {
	background-color: var(--color-green-500);
}

.button-color-blue > .cmp-button {
	background-color: var(--color-blue-400);
}

.button-color-blue > .cmp-button:hover {
	background-color: var(--color-blue-500);
}

.button-size-small > .cmp-button {
	padding: 1.2rem 1.8rem 1.3rem;
	min-height: 3.9rem;
	font-size: var(--base-line-height);
	line-height: var(--base-line-height);
}

.button-size-small .cmp-button__icon::before {
	font-size: 1.7rem;
}

.button-width-flexible > .cmp-button {
	width: 100%;
}

.button-margin-top > .cmp-button {
	margin-top: calc(1.5 * var(--base-line-height));
}

.button-add-external-link .cmp-button__text::after {
	content: var(--icon-open-in-new-window);
	font-family: "dhlicons";
	margin-left: 0.7rem;
	font-size: 1.6rem;
	font-weight: normal;
	display: flex;
	align-items: center;
}

/* rtl:raw:
.button-add-external-link .cmp-button__text::after {
	transform: scaleX(-1);
} */

.button-size-small .cmp-button__text::after {
	font-size: var(--base-line-height);
}

.cmp-button__text {
	display: flex;
}

.cmp-button__icon {
	display: flex;
	margin-right: 0.7rem;
}

.cmp-button__icon::before {
	font-size: calc(1.5 * var(--base-line-height));
}

.button-icon-separated-text > .cmp-button {
	background-color: transparent;
	color: var(--color-red-500);
	border: none;
	padding: 0 0.7rem 0 0;
	justify-content: flex-start;
	position: relative;
}

.button-icon-separated-text .cmp-button .cmp-button__icon {
	background-color: var(--color-red-500);
	color: var(--color-white-500);
	min-height: inherit;
	min-width: 4.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.4rem;
	margin-right: 1.1rem;
}

.button-icon-separated-text .cmp-button:hover .cmp-button__icon {
	background-color: var(--color-red-400);
}

.button-icon-separated-text .cmp-button .cmp-button__text {
	position: relative;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: calc(1.5 * var(--base-line-height));
}

.button-icon-separated-text .cmp-button .cmp-button__text::after {
	position: absolute;
	right: 0;
	margin-left: 0;
}

.button-add-external-link.button-icon-separated-text .cmp-button__text {
	padding-right: calc(1.3rem + 0.4rem);
}

.button-icon-separated-text .cmp-button:hover .cmp-button__text {
	text-decoration: underline;
	color: var(--color-red-400-5);
}

.button-icon-separated-text .cmp-button:focus {
	background-color: var(--color-white-500);
}

.button-icon-separated-text .cmp-button__text::after {
	font-size: 1.3rem;
}

.button-size-small.button-icon-separated-text .cmp-button__icon {
	min-width: 3.9rem;
	font-size: 1.6rem;
}

@media screen and (max-width: 767px),print {
	.cmp-button {
		width: 100%;
	}
}

/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-image/clientlib/css/cmp-image.css ***!
  \******************************************************************************************************************************************************************************************************************/
.cmp-image__image {
	display: block;
	max-width: 100%;
}

.cmp-image__title {
	display: block;
	line-height: 1.8rem;
	font-size: var(--font-size-0);
	max-width: 89.2rem;
	margin: 0.2rem 0 0.8rem;
}

.image-top-margin {
	margin-top: calc(2 * var(--base-line-height));
}

.image-icon,
.image-icon.image-top-margin {
	margin-top: var(--base-line-height);
}

.cmp-image__link,
.cmp-image__link-play-icon {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
}

.cmp-image__link:hover {
	cursor: zoom-in;
}

.cmp-image__link-play-icon:hover {
	cursor: pointer;
}

/* styles for the after attribute for the "zoom" icon variant */
.cmp-image__link::after {
	font-family: "dhlicons";
	font-size: var(--font-size-h1-mobile-small);
	color: var(--color-white-500);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	content: var(--icon-resize-larger);
	background: var(--color-gray-opacity-80);
	height: calc(3 * var(--base-line-height));
	width: calc(3 * var(--base-line-height));
	top: 0;
	left: 0;
}

/* styles for the after attribute for the "play" icon variant */
.cmp-image__link-play-icon::after {
	font-family: "dhlicons";
	font-size: var(--font-size-h1-desktop);
	color: var(--color-white-500);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	content: var(--icon-play);
	background: var(--color-gray-opacity-60);
	height: calc(6 * var(--base-line-height));
	width: calc(6 * var(--base-line-height));
	top: calc(50% - calc(calc(6 * var(--base-line-height)) / 2));
	left: calc(50% - calc(calc(6 * var(--base-line-height)) / 2));
	border-radius: calc(6 * var(--base-line-height));
}

.cmp-image__link:focus-visible .cmp-image__image {
	outline: var(--color-black-400) 0.2rem solid;
}

/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-list/clientlib/css/cmp-list.css ***!
  \****************************************************************************************************************************************************************************************************************/
/*
  -------------------------------------------------------
	Please read the note regarding overwriting respectively
	resetting custom CSS styles at the end of this file
  -------------------------------------------------------
*/

/* ------ General list styles ------ */
.cmp-list {
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
	margin: 0;
	padding: 0;
	list-style: square inside;
	margin-top: var(--base-line-height);
}

.no-margin .cmp-list {
	margin-top: 0;
}

.text-small .cmp-list {
	line-height: 1.8rem;
	font-size: var(--font-size-1);
}

.cmp-list__item {
	border-bottom: 0.1rem solid var(--color-gray-300);
	color: var(--color-black-400);
	padding: 0 0 1rem 3.2rem;
	text-indent: calc(-1.5 * var(--base-line-height));
	position: relative;
}

/* ------ Bullet type styles ------ */
.bullet-type-bullet .cmp-list {
	list-style: square inside;
}

.bullet-type-number .cmp-list {
	counter-reset: counter;
	display: flex;
	flex-direction: column;
}

.bullet-type-none .cmp-list,
.bullet-type-check .cmp-list,
.bullet-type-icon .cmp-list {
	list-style-type: none;
}

.bullet-type-none .cmp-list__item::before {
	content: "";
}

.bullet-type-bullet .cmp-list__item {
	padding: 0 0 1.2rem 3.7rem;
	text-indent: -3.4rem;
}

.bullet-type-number .cmp-list__item {
	list-style: none;
	counter-increment: counter;
	padding: 0 0 1.2rem 3.7rem;
}

.bullet-type-check .cmp-list__item {
	text-indent: 0;
	padding: 0 0 1.2rem 3.7rem;
}

.bullet-type-bullet .cmp-list__item::before {
	content: "";
	width: 0.7rem;
	display: inline-block;
}

.bullet-type-number .cmp-list__item::before {
	content: counter(counter) ".";
	min-width: 1rem;
	display: inline-block;
	margin-left: 0.7rem;
}

.bullet-type-check .cmp-list__item::before {
	position: absolute;
	top: 0.2rem;
	margin-left: 0.7rem;
	left: -0.7rem;
	content: var(--icon-checkmark);
	font-size: var(--font-size-4);
	font-family: "dhlicons";
}

.bullet-type-none .cmp-list__item,
.bullet-type-icon .cmp-list__item {
	padding: 0 0 1.2rem;
	text-indent: 0;
}

.cmp-list__item:last-child,
.spacing-small .cmp-list__item,
.spacing-large .cmp-list__item {
	border-bottom: none;
}

.spacing-large .cmp-list__item {
	padding-bottom: 0;
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.spacing-large .cmp-list__item:last-child {
	padding-bottom: 1.2rem;
	margin-bottom: 0;
}

.spacing-small .cmp-list__item {
	padding-bottom: 0;
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.spacing-small .cmp-list__item:last-child {
	padding-bottom: calc(0.5 * var(--base-line-height));
	margin-bottom: 0;
}

/* ------ Bullet colors ------ */
.bullet-color-black .cmp-list__item {
	color: var(--color-black-400);
}

.bullet-color-red .cmp-list__item {
	color: var(--color-red-500);
}

.bullet-color-green.bullet-type-check .cmp-list__item::before {
	color: var(--color-green-600);
}

/* ------ Text style ------ */
.cmp-list__item-description,
.cmp-list__item-title {
	line-height: calc(1.5 * var(--base-line-height));
	color: var(--color-black-400);
}

/* ------ Link styles (focus, hover and icons) ------ */
.cmp-list__item:focus-within::after {
	border: 0.1rem solid var(--color-red-500);
	bottom: 1rem;
	content: "";
	display: block;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: border-color 200ms;
	width: 100%;
}

.spacing-small .cmp-list__item:focus-within::after,
.spacing-large .cmp-list__item:focus-within::after {
	height: 100%;
}

.cmp-list__item-link:hover span {
	color: var(--color-red-500);
	text-decoration: underline;
	cursor: pointer;
}

.bullet-type-bullet .cmp-list__item-link--internal::after,
.bullet-type-bullet .cmp-list__item-link--external::after {
	margin-left: 0.4rem;
}

.bullet-type-number .cmp-list__item-link--internal::after,
.bullet-type-number .cmp-list__item-link--external::after {
	margin-left: -0.4rem;
}

.bullet-type-icon .cmp-list__item-link--internal::after,
.bullet-type-icon .cmp-list__item-link--external::after,
.bullet-type-none .cmp-list__item-link--internal::after,
.bullet-type-none .cmp-list__item-link--external::after,
.bullet-type-check .cmp-list__item-link--internal::after,
.bullet-type-check .cmp-list__item-link--external::after {
	left: 0.4rem;
}

.cmp-list__item-link--internal::after,
.cmp-list__item-link--external::after {
	position: relative;
	top: 0.2rem;
	color: var(--color-red-500);
	font-family: "dhlicons";
	display: inline-block;
}

.cmp-list__item-link--internal::after {
	content: var(--icon-chevron-forward);
	font-size: var(--font-size-2);
	left: 2.9rem;
}

.cmp-list__item-link--external::after {
	content: var(--icon-open-in-new-window);
	font-size: var(--font-size-1);
	left: 3.5rem;
}

/* For some reason the spacing between text and icons in
   the RTL view is too large, so we need to adjust it
*/
/* rtl:raw:
.cmp-list__item-link--internal::after,
.cmp-list__item-link--external::after {
	transform: scaleX(-1);
	right: 0.4rem;
 }

.bullet-type-bullet .cmp-list__item-link--internal::after,
.bullet-type-bullet .cmp-list__item-link--external::after{
	margin-right: -1.4rem;
}
*/

/* ------ Dynamic Icons------ */
.bullet-type-icon .cmp-list__item.has-icon {
	display: flex;
	align-items: center;
}

.bullet-type-icon .cmp-list__item.has-icon::before {
	font-size: var(--font-size-4);
	font-weight: normal;
	margin: 0 1.1rem 0 0.7rem;
}

/* ------ Link Icon Right ------ */
.list-link-icon-right .cmp-list__item-link--internal::after {
	position: absolute;
	right: 0;
	top: unset;
	text-indent: 0;
	left: unset;
}

.list-link-icon-right .cmp-list__item-link--external::after {
	position: absolute;
	right: 0;
	top: unset;
	text-indent: 0;
	left: unset;
}

.list-link-icon-right .cmp-list__item {
	padding-right: 2rem;
}

/* ------ Dynamic Icons With Yellow Background------ */
.dynamic-icon-bg-color .cmp-list {
	list-style: none;
}

.dynamic-icon-bg-color .cmp-list__item {
	align-items: center;
	display: flex;
	padding: 0 0 1rem;
	text-indent: 0;
}

.dynamic-icon-bg-color .cmp-list__item::before {
	display: inline-block;
	width: 2.9rem;
	padding-right: 0;
	padding-left: 0;
	margin-right: 0.6rem;
	line-height: 2.9rem;
	text-align: center;
	border-radius: 0.4rem;
	flex: 0 0 auto;
}

.dynamic-icon-bg-color.bg-yellow .cmp-list__item::before {
	background-color: var(--color-yellow-500);
}

.dynamic-icon-bg-color.spacing-small .cmp-list__item:focus-within::after,
.dynamic-icon-bg-color.spacing-large .cmp-list__item:focus-within::after {
	height: auto;
}

.dynamic-icon-bg-color .cmp-list__item .cmp-list__item-description,
.dynamic-icon-bg-color .cmp-list__item .cmp-list__item-title {
	font-size: 1.4rem;
	line-height: 1.8rem;
}

/*
	-----------------------------------------------------------------------------------------------------------------------
	Overwriting respectively resetting custom CSS styles
	====================================================
	As both this core component and the custom implementation of lists have a CSS class ".list", we run into the issue that
	the custom CSS class ".list" inteferes with this core component's CSS and brings some unwanted spacing etc.
	Therefore we need to overwrite respectively reset the custom CSS class here.
	See also comment here: https://tools.publicis.sapient.com/jira/browse/DPDHLPA-31599?focusedCommentId=17963809&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-17963809
	-----------------------------------------------------------------------------------------------------------------------
*/
.list .cmp-list .cmp-list__item,
.list .cmp-list .cmp-list__item .cmp-list__item-description,
.list .cmp-list .cmp-list__item .cmp-list__item-title {
	line-height: calc(0.84 * var(--base-line-height-c20));
}

.text-small .cmp-list .cmp-list__item,
.text-small .cmp-list .cmp-list__item .cmp-list__item-description,
.text-small .cmp-list .cmp-list__item .cmp-list__item-title {
	line-height: 1.8rem;
	font-size: var(--font-size-1);
}

.bullet-type-bullet.text-small .cmp-list .cmp-list__item {
	text-indent: -3rem;
}

.aem-Grid .list { /* stylelint-disable-line selector-class-pattern */
	margin-bottom: unset;
	list-style-position: unset;
	color: unset;
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-separator/clientlib/css/cmp-separator.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.cmp-separator__horizontal-rule {
	width: 100%;
	height: 0.1rem;
	margin: 0;
	border: 0;
	background-color: var(--color-black-400);
}

.separator-margin-top > .cmp-separator {
	margin-top: calc(1.5 * var(--base-line-height));
}

.separator-type-introduction .cmp-separator__horizontal-rule {
	width: 5.6rem;
	height: 0.2rem;
}

.separator-color-gray .cmp-separator__horizontal-rule {
	background-color: var(--color-gray-300);
}

.separator-color-white .cmp-separator__horizontal-rule {
	background-color: var(--color-white-500);
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-teaser/clientlib/css/cmp-teaser.css ***!
  \********************************************************************************************************************************************************************************************************************/
.cmp-teaser {
	border-radius: 0.4rem;
	box-shadow: var(--shadow-small);
	overflow: hidden;
	position: relative;
	transition: box-shadow 250ms;
	background: var(--color-white-500);
}

.cmp-teaser__link {
	height: 100%;
	width: 100%;
}

.cmp-teaser__image .cmp-image {
	display: flex;
	height: 0;
	padding-bottom: calc(9 / 16 * 100%);
	position: relative;
	width: 100%;
}

.cmp-teaser__image .cmp-image__image {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.cmp-teaser__content {
	background-color: var(--color-white-500);
	padding: calc(2 * var(--base-line-height));
}

.cmp-teaser__title {
	font-size: var(--font-size-2);
	font-weight: bold;
	line-height: calc(1.5 * var(--base-line-height));
	margin: 0;
	width: 100%;
	color: var(--color-black-400);
	transition: color 200ms;
}

.cmp-teaser--with-overlay-link .cmp-teaser__title::after {
	color: var(--color-red-500);
	content: var(--icon-chevron-forward);
	display: inline-block;
	font-family: "dhlicons";
	font-size: 1.5rem;
	height: 1.7rem;
	margin-left: calc(var(--base-line-height) / 2);
	width: 1.7rem;
	transform: translateY(0.2rem);
}

/* rtl:raw:
.cmp-teaser--with-overlay-link .cmp-teaser__title::after {
	transform: scaleX(-1) translateY(0.2rem);
} */

.cmp-teaser--with-overlay-link .cmp-teaser__link[target="_blank"] .cmp-teaser__title::after {
	content: var(--icon-open-in-new-window);
	font-size: 1.7rem;
}

/* rtl:raw:
.cmp-teaser--with-overlay-link .cmp-teaser__link[target="_blank"] .cmp-teaser__title::after {
	transform:  scaleX(-1) translateY(0.2rem);
} */

.cmp-teaser__title:hover {
	text-decoration: none;
}

.cmp-teaser--with-overlay-link .cmp-teaser__title:hover,
.cmp-teaser__link:hover > .cmp-teaser__content .cmp-teaser__title {
	color: var(--color-red-400);
	text-decoration: underline;
}

.cmp-teaser__action-container {
	margin-top: calc(3 * var(--base-line-height));
}

.cmp-teaser__action-link {
	background-color: var(--color-red-500);
	border-radius: 0.4rem;
	outline: solid 0.1rem var(--color-red-500);
	color: var(--color-white-500);
	display: block;
	font-size: var(--font-size-2);
	font-weight: bold;
	margin-top: var(--base-line-height);
	padding: var(--base-line-height) 3.2rem;
	text-align: center;
	transition: background-color 200ms;
	line-height: 1.6rem;
}

.cmp-teaser__action-link:hover {
	background-color: var(--color-red-400);
}

.cmp-teaser__action-link:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.94), 0 0 0 0.4rem var(--color-red-500);
}

.cmp-teaser__action-link:nth-child(2) {
	background-color: var(--color-white-500);
	color: var(--color-red-500);
}

.cmp-teaser__action-link:nth-child(2):hover {
	border-color: var(--color-red-400);
	color: var(--color-red-400);
}

/* Variations */
.teaser-top-margin .cmp-teaser {
	margin-top: calc(1.5 * var(--base-line-height));
}

.teaser-align-left .cmp-teaser {
	text-align: left;
}

.teaser-align-right .cmp-teaser {
	text-align: right;
}

.teaser-align-center .cmp-teaser {
	text-align: center;
}

.teaser-align-left .cmp-image {
	justify-content: flex-start;
}

.teaser-align-right .cmp-image {
	justify-content: flex-end;
}

.teaser-align-center .cmp-image {
	justify-content: center;
}

.cmp-teaser--with-overlay-link:hover {
	box-shadow: var(--shadow-medium);
}

.cmp-teaser--with-overlay-link:focus-within {
	box-shadow: var(--shadow-large);
}

.teaser-with-image-icon .cmp-teaser__image {
	display: flex;
	padding: calc(2 * var(--base-line-height)) calc(2 * var(--base-line-height))
		var(--base-line-height) calc(2 * var(--base-line-height));
}

.teaser-with-image-icon .cmp-image {
	height: auto;
	padding: 0;
}

.teaser-with-image-icon .cmp-teaser__image .cmp-image__image {
	height: calc(2.5 * var(--base-line-height));
	width: calc(2.5 * var(--base-line-height));
	position: static;
}

.teaser-horizontal .cmp-teaser {
	display: flex;
}

.teaser-align-left.teaser-horizontal .cmp-teaser {
	text-align: left;
}

.teaser-align-right.teaser-horizontal .cmp-teaser {
	text-align: right;
}

.teaser-align-center.teaser-horizontal .cmp-teaser {
	text-align: center;
}

.teaser-align-left.teaser-horizontal .cmp-image {
	justify-content: flex-start;
}

.teaser-align-right.teaser-horizontal .cmp-image {
	justify-content: flex-end;
}

.teaser-align-center.teaser-horizontal .cmp-image {
	justify-content: center;
}

.teaser-horizontal .cmp-teaser__image {
	position: absolute;
	border-right: solid 0.1rem var(--color-gray-300);
	flex-shrink: 0;
	margin-bottom: calc(1.5 * var(--base-line-height));
	margin-top: calc(1.5 * var(--base-line-height));
	padding: 0 var(--base-line-height) calc(1.5 * var(--base-line-height))
		calc(1.5 * var(--base-line-height));
	top: 0;
	bottom: 0;
}

.teaser-horizontal .cmp-teaser__content {
	flex-grow: 1;
	padding: calc(1.5 * var(--base-line-height)) 0
		calc(1.5 * var(--base-line-height)) calc(5.6 * var(--base-line-height));
	margin-right: 4.5rem;
}

.teaser-horizontal .cmp-teaser__title::after {
	top: 50%;
	margin-right: 1.8rem;
	position: absolute;
	right: 0;
	transform: translateY(-50%);
}

/* rtl:raw:
.teaser-horizontal .cmp-teaser__title::after {
	transform: scaleX(-1);
} */

.teaser-hide-copy .cmp-teaser__description {
	display: none;
}

.teaser-has-copy .cmp-teaser__description {
	margin-top: var(--base-line-height);
}

.teaser-has-copy .cmp-teaser__description > p {
	font-size: var(--font-size-text-small);
	line-height: 2.5rem;
	margin: 0;
	color: var(--color-black-400);
}

.teaser-horizontal .cmp-teaser__description {
	margin-top: 0.4rem;
	word-break: break-word;
}

.teaser-horizontal-just-headline .cmp-teaser__image {
	border: 0;
	display: flex;
	margin-top: 1.9rem;
	margin-bottom: 1.9rem;
	padding-left: var(--base-line-height);
}

.teaser-horizontal-just-headline .cmp-teaser__image .cmp-image__image {
	height: calc(1.5 * var(--base-line-height));
	width: calc(1.5 * var(--base-line-height));
}

.teaser-horizontal-just-headline .cmp-teaser__content {
	align-items: center;
	display: flex;
	margin-bottom: 1.9rem;
	margin-top: 1.9rem;
	padding: 0;
	margin-left: 4.9rem;
}

.teaser-horizontal-just-headline .cmp-teaser__title {
	font-size: 1.6rem;
	font-weight: normal;
}

/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-text/clientlib/css/cmp-text.css ***!
  \****************************************************************************************************************************************************************************************************************/
/* Configurable text styles classes */
.cmp-text__inline-text {
	display: block;
	font-weight: normal;
	color: var(--color-black-400);
	margin-top: 1.1rem;
}

.cmp-text__inline-text--intro-size-1 {
	font-size: 3.5rem;
	font-weight: 200;
	line-height: 4.6rem;
}

.cmp-text__inline-text--intro-size-2 {
	font-size: 2.8rem;
	font-weight: 200;
	line-height: calc(3 * var(--base-line-height));
}

.cmp-text__inline-text--intro-size-3 {
	font-size: 2.1rem;
	font-weight: 200;
	line-height: calc(2 * var(--base-line-height));
	margin-top: calc(2 * var(--base-line-height));
}

.cmp-text__inline-text--large-body-copy {
	font-size: 2.1rem;
	line-height: 3.2rem;
	margin-top: calc(2 * var(--base-line-height));
}

.cmp-text__inline-text--regular-desc-text {
	font-size: 1.6rem;
	line-height: calc(1.5 * var(--base-line-height));
}

.cmp-text__inline-text--regular-body-copy {
	font-size: 1.6rem;
	line-height: calc(2 * var(--base-line-height));
}

.cmp-text__inline-text--small-desc-text {
	font-size: 1.4rem;
	line-height: 1.8rem;
}

.cmp-text__inline-text--small-body-copy {
	font-size: 1.4rem;
	line-height: 2.5rem;
}

.cmp-text__inline-text--tiny {
	font-size: 1.2rem;
	line-height: 1.8rem;
}

/* Special case when font style selection is wrapped by a "strong" or "b" tag */
.cmp-text strong .cmp-text__inline-text,
.cmp-text b .cmp-text__inline-text {
	font-weight: bold;
}

/* Margin classes (text-margin-top will use margins as specified in the elements above, so no separate styling necessary) */
.text-margin-none .cmp-text__inline-text {
	margin-top: 0;
}

/* Color classes */
.text-black .cmp-text__inline-text {
	color: var(--color-black-400);
}

.text-red .cmp-text__inline-text {
	color: var(--color-red-500);
}

.text-grey .cmp-text__inline-text {
	color: var(--color-gray-600);
}

.text-white .cmp-text__inline-text,
.text-white .cmp-text__link .cmp-text__inline-text {
	color: var(--color-white-500);
}

/* Alignment classes to align "outer" container */
.text-left .cmp-text {
	text-align: left;
}

.text-center .cmp-text {
	text-align: center;
}

.text-right .cmp-text {
	text-align: right;
}

/* Anchor link styles */
.cmp-text__link,
.cmp-text__link .cmp-text__inline-text {
	color: var(--color-red-500);
	text-decoration: underline;
	display: inline-block;
}

.cmp-text__link:hover,
.cmp-text__link:hover .cmp-text__inline-text {
	color: var(--color-red-400);
}

.text-white .cmp-text__link:hover,
.text-white .cmp-text__link:hover .cmp-text__inline-text {
	color: var(--color-white-500);
}

.text-white .cmp-text__link {
	color: var(--color-white-500);
	text-decoration: underline;
}

.text-white .cmp-text__link.cmp-text__link--external::after {
	content: "";
	display: inline-block;
	margin-left: 0.9rem;
	width: 1.4rem;
	height: 1.4rem;
	background: url(../assets/img/c003b31075ec8434b7f8.svg) no-repeat center center;
	background-size: contain;
	position: relative;
	top: 0.2rem;
	right: 0.3rem;
}

.text-white .cmp-text__link:hover {
	color: var(--color-white-500);
	text-decoration: underline;
}

.cmp-text__link:focus-within {
	color: var(--color-red-500);
	outline: 0.1rem solid var(--color-red-500);
	text-decoration: none;
}

.cmp-text__link:focus-within .cmp-text__inline-text {
	text-decoration: none;
}

.text-white .cmp-text__link:focus-within {
	color: var(--color-white-500);
	outline: 0.1rem solid var(--color-white-500);
}

.cmp-text__link--internal::after {
	content: "";
	margin-left: 0;
}

.cmp-text__link--external::after {
	content: "";
	display: inline-block;
	margin-left: 0.9rem;
	width: 1.4rem;
	height: 1.4rem;
	background: url(../assets/img/97634095201cbbf21533.svg) no-repeat center center;
	background-size: contain;
	position: relative;
	top: 0.2rem;
	right: 0.3rem;
}

/* rtl:raw:
.cmp-text__link--external::after {
	transform: scaleX(-1);
} */

.cmp-text__inline-text--intro-size-1 .cmp-text__link,
.cmp-text__inline-text--intro-size-2 .cmp-text__link,
.cmp-text__inline-text--intro-size-3 .cmp-text__link {
	font-weight: 200;
}

.cmp-text__inline-text--intro-size-1 .cmp-text__link--external::after,
.cmp-text__inline-text--intro-size-2 .cmp-text__link--external::after {
	width: 2.1rem;
	height: 2.1rem;
}

.cmp-text__inline-text--intro-size-3 .cmp-text__link--external::after,
.cmp-text__inline-text--large-body-copy .cmp-text__link--external::after {
	width: 1.7rem;
	height: 1.7rem;
}

/* General list styles */
.cmp-text__list {
	margin: 0;
	padding: 0;
}

.cmp-text__list .cmp-text__link {
	margin-left: 2.1rem;
}

/* Ordered list styles */
.cmp-text__list--ordered {
	list-style-type: decimal;
}

/* Unordered list items styles */
.cmp-text__list--unordered .cmp-text__list-item {
	list-style-type: square;
	border-bottom: 0.1rem solid var(--color-gray-300);
	padding: 1rem 0 1rem 3.2rem;
	text-indent: -2.1rem;
}

.cmp-text__list--unordered .cmp-text__list-item:last-child {
	border-bottom: none;
}

/* Ordered list items styles */
.cmp-text__list--ordered .cmp-text__list-item {
	border-bottom: 0.1rem solid var(--color-gray-300);
	padding: 1rem 0 1rem 2.8rem;
	text-indent: -2.1rem;
}

.cmp-text__list--ordered .cmp-text__list-item::before {
	content: "";
	width: 0.9rem;
	display: inline-block;
}

.cmp-text__list--ordered .cmp-text__list-item:last-child {
	border-bottom: none;
}

/* In case of a chosen font style within the list, property "display" needs to be inline */
.cmp-text__list .cmp-text__inline-text {
	display: inline;
}

/* Viewport specific changes */
@media screen and (max-width: 767px),print {
	.cmp-text__inline-text--intro-size-1 {
		font-size: 2.8rem;
		line-height: 3.2rem;
	}

	.cmp-text__inline-text--intro-size-2 {
		font-size: 2.1rem;
		line-height: calc(2 * var(--base-line-height));
	}

	.cmp-text__inline-text--intro-size-3 {
		font-size: 1.8rem;
		line-height: calc(1.5 * var(--base-line-height));
	}
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-text/clientlib/css/cmp-text-table.css ***!
  \**********************************************************************************************************************************************************************************************************************/
.text[class*="table-"] {
	overflow-x: auto;
}

.cmp-text__table-table,
.cmp-text__table-row,
.cmp-text__table-cell,
.cmp-text__table-header {
	border: none;
	background-color: transparent;
}

.cmp-text__table {
	width: fit-content;
	overflow: auto;
	border-top: 0.4rem solid var(--color-gray-400);
	border-bottom: 0.4rem solid var(--color-gray-400);
	margin: 0.8rem 0;
	max-width: 100%;
}

.cmp-text__table-table {
	border-collapse: collapse;
	font-size: var(--font-size-text-small);
	line-height: 1.8rem;
	overflow: auto;
	margin: 0.8rem 0;
	table-layout: fixed;
}

.table-with-border .cmp-text__table-row {
	border-bottom: 0.1rem solid var(--color-gray-400);
}

.table-with-border .cmp-text__table-row:last-of-type {
	border-bottom: 0.1rem solid transparent;
}

.table-with-hover .cmp-text__table-row:hover {
	background: var(--color-gray-50);
	cursor: pointer;
}

.table-with-zebra .cmp-text__table-row:nth-child(2n),
.table-with-zebra.table-with-hover .cmp-text__table-row:hover:nth-child(2n) {
	background: var(--color-gray-50);
}

.table-with-zebra.table-with-hover .cmp-text__table-row:hover:nth-child(2n+1) {
	background: unset;
}

.cmp-text__table-row {
	height: 4.7rem;
}

.cmp-text__table-header,
.cmp-text__table-cell {
	padding: var(--base-line-height) var(--base-line-height) var(--base-line-height) 0;
	height: 4.7rem;
	word-break: break-word;
}

.cmp-text__table-header,
.table-align-left .cmp-text__table-header,
.table-align-left .cmp-text__table-cell {
	text-align: left;
}

.table-align-right .cmp-text__table-header,
.table-align-right .cmp-text__table-cell {
	text-align: right;
}

.table-align-center .cmp-text__table-header,
.table-align-center .cmp-text__table-cell {
	text-align: center;
}

/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-title/clientlib/css/cmp-title.css ***!
  \******************************************************************************************************************************************************************************************************************/
/* Common style for title text */
.cmp-title__text {
	font-style: normal;
	text-align: left;
	margin: 0;
	color: var(--color-black-400);
}

/* Styles for headlines */
h1.cmp-title__text {
	color: var(--color-red-500);
	font-size: calc(2.5 * var(--base-line-height));
	line-height: 4.6rem;
	font-weight: 800;
}

h2.cmp-title__text {
	font-size: calc(2 * var(--base-line-height));
	line-height: 3.2rem;
	font-weight: 800;
}

h3.cmp-title__text {
	font-size: calc(1.5 * var(--base-line-height));
	line-height: calc(2 * var(--base-line-height));
	font-weight: 800;
}

h4.cmp-title__text {
	font-size: 1.8rem;
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: 800;
}

h5.cmp-title__text {
	font-size: 1.6rem;
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: bold;
}

h6.cmp-title__text {
	font-size: calc(1 * var(--base-line-height));
	line-height: 1.8rem;
	font-weight: bold;
}

/* Colors for linked headlines */
h1 .cmp-title__link {
	color: var(--color-red-500);
}

:not(h1) .cmp-title__link {
	color: var(--color-black-400);
}

/* Color styles */
.title-red .cmp-title__text,
.title-red .cmp-title__link {
	color: var(--color-red-500);
}

.title-black .cmp-title__text,
.title-black .cmp-title__link {
	color: var(--color-black-400);
}

.title-green .cmp-title__text,
.title-green .cmp-title__link {
	color: var(--color-green-550);
}

.title-white .cmp-title__text,
.title-white .cmp-title__link {
	color: var(--color-white-500);
}

/* Alignment styles */
.title-left .cmp-title__text {
	text-align: left;
}

.title-center .cmp-title__text {
	text-align: center;
}

.title-right .cmp-title__text {
	text-align: right;
}

/* Margin styles */
.title-margin-top h1.cmp-title__text {
	margin-top: calc(5 * var(--base-line-height));
}

.title-margin-bottom h1.cmp-title__text {
	margin-bottom: calc(3.5 * var(--base-line-height));
}

.title-margin-top h2.cmp-title__text {
	margin-top: calc(5 * var(--base-line-height));
}

.title-margin-bottom h2.cmp-title__text {
	margin-bottom: calc(3.5 * var(--base-line-height));
}

.title-margin-top h3.cmp-title__text {
	margin-top: calc(4 * var(--base-line-height));
}

.title-margin-bottom h3.cmp-title__text {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.title-margin-top h4.cmp-title__text {
	margin-top: calc(3 * var(--base-line-height));
}

.title-margin-bottom h4.cmp-title__text {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.title-margin-top h5.cmp-title__text {
	margin-top: calc(2 * var(--base-line-height));
}

.title-margin-bottom h5.cmp-title__text {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.title-margin-top h6.cmp-title__text {
	margin-top: calc(2 * var(--base-line-height));
}

.title-margin-bottom h6.cmp-title__text {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.title-margin-none .cmp-title__text {
	margin: 0;
}

/* The links are always underlined */
.title .cmp-title__link {
	text-decoration: underline;
}

/* The links are hovered */
.title .cmp-title__link:hover {
	color: var(--color-red-400);
}

.title.title-white .cmp-title__link:hover {
	color: var(--color-white-500);
}

/* The links are focused */
.title .cmp-title__link:focus-within {
	color: var(--color-red-500);
	outline: 0.1rem solid var(--color-red-500);
	text-decoration: none;
}

.title.title-white .cmp-title__link:focus-within {
	color: var(--color-white-500);
	outline: 0.1rem solid var(--color-white-500);
}

@media screen and (min-width: 768px),print {

	/* The default case is specified */

	h1.cmp-title__text {
		font-size: calc(3.5 * var(--base-line-height));
		line-height: 5.3rem;
	}

	h2.cmp-title__text {
		font-size: calc(2.5 * var(--base-line-height));
		line-height: 4.6rem;
	}

	h3.cmp-title__text {
		font-size: calc(2 * var(--base-line-height));
		line-height: 3.2rem;
	}

	h4.cmp-title__text {
		font-size: calc(1.5 * var(--base-line-height));
		line-height: calc(2 * var(--base-line-height));
	}

	h5.cmp-title__text {
		font-size: 1.6rem;
		line-height: calc(1.5 * var(--base-line-height));
	}

	h6.cmp-title__text {
		font-size: calc(1 * var(--base-line-height));
		line-height: 1.8rem;
	}
}

/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/modal/clientlib/css/modal.css ***!
  \************************************************************************************************************************************************************************************************************/
.is-editmode .c-modal {
	visibility: visible;
}

/* Configuration styles */
.c-modal--content-area-padding-0 {
	--padding: 0;
}

.c-modal--content-area-padding-14 {
	--padding: 1.4rem;
}

.c-modal--content-area-padding-21 {
	--padding: 2.1rem;
}

.c-modal--content-area-padding-28 {
	--padding: 2.8rem;
}

.c-modal--content-area-padding-35 {
	--padding: 3.5rem;
}

.c-modal--content-area-padding-56 {
	--padding: 5.6rem;
}

/* General modal styles */
.c-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	width: 100vw;
	height: 100%;
	height: 100vh;
	border: none;
	z-index: 1111; /* this z-index is putted here just in case we want to overlay navigation */
	max-width: 100%;
	max-height: 100%;
	padding: var(--grid-col-gap);
	background-color: transparent;
}

.c-modal[data-modal-size="full-screen"] {
	padding-left: 0;
	padding-right: 0;
}

.c-modal[open] {
	transition: opacity 500ms cubic-bezier(0.25, 0, 0.3, 1);
}

.c-modal:not([open]) {
	pointer-events: none;
	opacity: 0;
	display: none;
}

.c-modal[loading] {
	visibility: hidden;
}

.c-modal .c-modal--container {
	height: fit-content;
	overflow: hidden auto;

	/* Configurable styles */
	width: var(--grid-cols-12);
	min-height: calc(3 * var(--base-line-height));
	max-height: calc(100% - calc(3 * var(--base-line-height)));
}

.c-modal[data-modal-size="full-screen"] .c-modal--container {
	width: calc(100% - calc(3 * var(--base-line-height)));
}

.c-modal:has(.icon-cancel:not(.outside)) .c-modal--container {
	padding-top: calc(3 * var(--base-line-height));
}

.c-modal.c-modal--content-area-color-white .c-modal--container,
.c-modal.c-modal--content-area-color-white:has(.icon-cancel:not(.outside)) .c-modal--close-icon-container {
	background-color: var(--color-white-500);
}

.c-modal.c-modal--content-area-color-black .c-modal--container,
.c-modal.c-modal--content-area-color-black:has(.icon-cancel:not(.outside)) .c-modal--close-icon-container {
	background-color: var(--color-black-400);
}

.c-modal .c-modal--content {
	padding: var(--padding);
	max-height: calc(100vh - calc(6 * var(--base-line-height)) - calc(2 * var(--padding, 2.1rem)));
}

.c-modal[data-modal-size="full-screen"] .c-modal--content {
	overflow: hidden;
}

.c-modal:has(.icon-cancel:not(.outside)) .c-modal--content {
	padding: calc(var(--padding) - calc(3 * var(--base-line-height))) var(--padding) var(--padding) var(--padding);
}

/* Overlay styles */
.c-modal .c-modal--overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	opacity: var(--opacity);
	animation: backdrop-fade-in 500ms ease;
}

.c-modal.c-modal--background-opacity-10 .c-modal--overlay {
	--opacity: 0.1;
}

.c-modal.c-modal--background-opacity-50 .c-modal--overlay {
	--opacity: 0.5;
}

.c-modal.c-modal--background-opacity-90 .c-modal--overlay {
	--opacity: 0.9;
}

.c-modal.c-modal--background-opacity-100 .c-modal--overlay {
	--opacity: 1;
}

.c-modal.c-modal--background-color-black .c-modal--overlay {
	background-color: var(--color-black-400);
}

.c-modal.c-modal--background-color-black .c-modal--container {
	box-shadow: 0 0.2rem 0.6rem -0.1rem rgba(0, 0, 0, 0.12), 0 0.7rem 1.7rem 0 rgba(0, 0, 0, 0.12), 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.12);
}

.c-modal.c-modal--background-color-white .c-modal--overlay {
	background-color: var(--color-white-500);
}

.c-modal.c-modal--background-color-white .c-modal--container {
	box-shadow: 0 0.2rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1), 0 0.7rem 1.7rem 0 rgba(0, 0, 0, 0.1), 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.1);
}

.c-modal.c-modal--background-color-yellow .c-modal--overlay {
	background-color: var(--color-yellow-500);
}

.c-modal.c-modal--background-color-yellow .c-modal--container {
	box-shadow: 0 0.2rem 0.6rem -0.1rem rgba(242, 144, 5, 0.12), 0 0.7rem 1.7rem 0 rgba(242, 144, 5, 0.12), 0 0.1rem 0.1rem 0 rgba(183, 67, 0, 0.12);
}

.c-modal.c-modal--content-area-color-transparent .c-modal--container {
	background-color: transparent;
	box-shadow: none;
}

/* Closing icon styles */
.c-modal .c-modal--close-icon-container {
	z-index: 2;
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: flex-end;
	height: calc(3 * var(--base-line-height));
	margin-top: calc(-3 * var(--base-line-height));
}

.c-modal .icon-cancel {
	cursor: pointer;
	font-size: calc(2 * var(--base-line-height));
	padding-right: calc(0.5 * var(--base-line-height));
}

.c-modal .icon-cancel.outside {
	top: 0;
	right: 0;
	display: flex;
	position: fixed;
	align-items: center;
	height: calc(3 * var(--base-line-height));
}

.c-modal .icon-cancel.c-modal--close-color-black {
	color: var(--color-black-400);
}

.c-modal .icon-cancel.c-modal--close-color-white {
	color: var(--color-white-500);
}

/* Animations */
@keyframes backdrop-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: var(--opacity);
	}
}

/* Modal size media queries */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-modal[data-modal-size="small"],
	.c-modal[data-modal-size="medium"],
	.c-modal[data-modal-size="large"] {
		padding-left: calc(2 * var(--grid-col-gap));
		padding-right: calc(2 * var(--grid-col-gap));
	}

	.c-modal[data-modal-size="small"] .c-modal--container {
		width: var(--grid-cols-7);
	}
}

@media screen and (min-width: 1024px),print {
	.c-modal[data-modal-size="small"],
	.c-modal[data-modal-size="medium"],
	.c-modal[data-modal-size="large"] {
		padding-left: calc(2 * var(--grid-col-gap));
		padding-right: calc(2 * var(--grid-col-gap));
	}

	.c-modal[data-modal-size="small"] .c-modal--container {
		width: var(--grid-cols-5);
	}
}

@media screen and (min-width: 1365px) {
	.c-modal[data-modal-size="small"],
	.c-modal[data-modal-size="medium"],
	.c-modal[data-modal-size="large"] {
		padding-left: calc(4 * var(--grid-col-gap));
		padding-right: calc(4 * var(--grid-col-gap));
	}

	.c-modal[data-modal-size="small"] .c-modal--container {
		max-width: calc((var(--width-page-max-nopadding-small-c20) + calc(4 * var(--grid-col-gap))) / 2);
	}

	.c-modal[data-modal-size="medium"] .c-modal--container {
		max-width: var(--width-page-max-nopadding-small-c20);
	}

	.c-modal[data-modal-size="large"] .c-modal--container {
		max-width: var(--width-page-max-nopadding);
	}
}

/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation/clientlib/css/navigation-bars.css ***!
  \***************************************************************************************************************************************************************************************************************************/
:root {
	--height-navigation-bar: 6.3rem;
	--shadow-navigation-bar: 0 0 0.1rem 0 rgba(0, 0, 0, 0.1), 0 0.2rem 1.2rem 0 rgba(0, 0, 0, 0.1), 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

/* any navigation bar */
.c-navigation--bar {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	width: 100%;
}

.c-navigation--bar:not(.text-zoomed) {
	height: var(--height-navigation-bar);
	max-height: var(--height-navigation-bar);
}

.c-navigation--bar.text-zoomed .c-navigation--menu:not(.c-navigation-menu--language-list-container):not(:last-child) {
	flex-grow: 1;
	flex-shrink: 1;
	flex-wrap: wrap;
}

.c-navigation--bar > .component-wide {
	width: 136.5rem;
	align-items: center;
}

/* yellow navigation bar */
.c-navigation--bar--main {
	background: var(--linear-gradient-yellow-to-right);
}

/* white navigation bar */
.c-navigation--bar--sub:not(.with-secondary),
.c-navigation[data-navigation-type="secondary"],
.c-navigation[data-navigation-type="secondary"].self-standing {
	box-shadow: var(--shadow-navigation-bar);
	background: transparent;
}

.c-navigation--bar--sub.with-secondary,
.c-navigation[data-navigation-type="secondary"].opened .c-navigation--bar--secondary {
	border-bottom: 0.1rem solid #cccccc;
}

/* Sub navigation bar align to left */
@media screen and (min-width: 1024px),print {
	.c-navigation--bar--sub:not(.text-zoomed) [data-scrollable] .c-navigation--menu.with-additional-space-from-left:first-of-type,
	.c-navigation[data-navigation-type="secondary"] .c-navigation--bar--sub:not(.text-zoomed) [data-scrollable] .c-navigation--menu.with-additional-space-from-left:first-of-type {
		margin-left: calc(-1.5 * var(--base-line-height));
	}
}

/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation/clientlib/css/navigation-logo.css ***!
  \***************************************************************************************************************************************************************************************************************************/
/* logo */
.c-navigation-logo {
	width: 12.7rem;
	height: 1.8rem;
	cursor: pointer;
}

.c-navigation--bar.text-zoomed .c-navigation-logo {
	margin: var(--space-y-navigation-menu-link) var(--space-x-navigation-menu-link);
}

.c-navigation-logo img {
	width: 100%;
}

@media screen and (min-width: 1024px),print {
	.c-navigation-logo {
		width: 15.2rem;
		height: calc(1.5 * var(--base-line-height));
	}
}

/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation/clientlib/css/navigation-search.css ***!
  \*****************************************************************************************************************************************************************************************************************************/
:root {
	--height-navigation-search: 6.3rem;
	--width-navigation-search-open: 17rem;
	--width-navigation-search-open-large-screen: 30rem;
	--max-width-navigation-static-alert-menu: 75rem;
	--space-x-navigation-search: 2.1rem;
	--space-y-navigation-search: calc(2.4rem - 0.7rem);
	--space-x-navigation-search-input: 0.7rem;
	--space-y-navigation-search-input: 0.7rem;
	--font-size-navigation-search-input: var(--font-size-text-small);
}

/**
 * Navigation Search: Initial states of each element in the navigation search
 */

.c-navigation-search--form {
	display: flex;
	position: relative;
	align-items: center;
	height: auto;
	padding: 0;
	width: 100%;
}

.c-navigation-search--form .icon-cancel::before {
	font-size: 1.4rem;
}

.c-navigation-search--form .icon-search::before {
	font-size: var(--font-size-1);
	height: calc(1 * var(--base-line-height));
}

.c-navigation-search--input,
.c-navigation-search--input-label {
	line-height: calc(1.5 * var(--base-line-height));
	font-size: var(--body-font-size-c20);
	background: none;
	border: none;
}

.c-navigation-search--input {
	padding: 0;
	width: 0;
}

.c-navigation-search--input::placeholder {
	color: var(--color-gray-600);
}

.c-navigation-search--input-container {
	display: flex;
	align-items: center;
	width: 0;
	opacity: 0;
	visibility: hidden;
	transition: width 400ms ease 100ms, opacity 400ms ease, visibility 400ms ease;
}

.c-navigation-search--input-label {
	display: inline-flex;
	transition: width 400ms ease 100ms, opacity 400ms ease;
}

.c-navigation-search--input-label span {
	display: inline-block;
	margin-left: 0.7rem;
}

/* when the search is open > hide the label text */
.c-navigation-search--form[data-open="true"] .c-navigation-search--input-label,
.c-navigation-search--form[data-show-label="false"] .c-navigation-search--input-label span {
	width: 0;
	opacity: 0;
	visibility: hidden;
}

.c-navigation-search--quicklinks {
	display: none;
	position: absolute;
	top: calc(100% - 1.5rem);
	width: calc(100% - 2 * var(--space-x-navigation-search));
	text-align: left;
	transition: opacity 200ms ease;
	transition-delay: 200ms;
	z-index: 1;

	/* initially values | these will change when search is open */
	opacity: 0;
	visibility: collapse;
}

/**
 * Navigation Search: When the search is opened
 */

.c-navigation-search--form[data-open="true"] .c-navigation-search--input-container {
	width: 100%;
	opacity: 1;
	visibility: visible;
	border-bottom: 0.2rem solid var(--color-black-400);
}

.c-navigation-search--form[data-open="true"] .c-navigation-search--input {
	padding: var(--space-y-navigation-search-input) 0;
	margin: 0 var(--space-x-navigation-search-input);
	display: inline-block;
	width: 100%;
}

.c-navigation-search--form[data-open="true"] .c-navigation-search--quicklinks {
	opacity: 1;
	visibility: visible;
	display: block;
}

.c-navigation-search--quicklinks li {
	background-color: var(--color-white-500);
	margin-bottom: 0;
	list-style: none;
	line-height: 2.1rem;
}

.c-navigation-search--quicklinks li.c-navigation-search--quicklinks-header {
	background-color: var(--color-gray-200);
}

.c-navigation-search--quicklinks li.c-navigation-search--quicklinks-header,
.c-navigation-search--quicklinks li a {
	padding: calc(var(--base-line-height) / 2) var(--base-line-height);
}

.c-navigation-search--quicklinks li a {
	display: flex;
	align-items: center;
	width: 100%;
	line-height: calc(1.5 * var(--base-line-height));
	cursor: pointer;
	color: var(--color-black-400);
	font-size: var(--font-size-text-small);
	font-weight: normal;
}

/**
STATE STYLES like focus, hover, active, disabled
*/

.c-navigation-search--close:hover,
.c-navigation-search--close:focus,
.c-navigation-search--input-label:hover,
.c-navigation-search--input-label:focus,
.c-navigation-search--quicklinks li a:hover,
.c-navigation-search--quicklinks li a:focus {
	color: var(--color-red-400);
	cursor: pointer;
}

.c-navigation [data-on-search-hide] {
	transition: clip-path 800ms ease, width 2000ms;
}

.c-navigation [data-on-search-hide="true"],
.c-navigation--menu li[data-on-search-hide="true"] {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 100ms ease;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-navigation-search--quicklinks {
		width: calc(100% - 4 * var(--space-x-navigation-search));
	}
}

@media screen and (min-width: 768px),print {
	.c-navigation-search--input,
	.c-navigation-search--input-label {
		background: none;
		border: none;
	}
}

@media screen and (min-width: 1024px),print {
	.c-navigation-search--input,
	.c-navigation-search--input-label {
		line-height: 1.8rem;
		font-size: var(--font-size-navigation-search-input);
	}

	.c-navigation[data-navigation-type="sticky"] [data-scrollable="true"] .c-navigation--menu[data-on-search-hide] {
		width: 100%;
	}

	.c-navigation[data-navigation-type="sticky"] .c-navigation--menu[data-on-search-hide="true"] {
		width: 0;
	}

	.c-navigation-search--form {
		height: var(--height-navigation-search);
		padding: 0 var(--space-x-navigation-search);
	}

	.c-navigation-search--quicklinks {
		width: calc(100% - 2 * var(--space-x-navigation-search));
	}

	.c-navigation[data-navigation-type="sticky"] .c-navigation-search--input-label span {
		display: none;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-navigation-search--form[data-open="true"] .c-navigation-search--input-container {
		width: var(--width-navigation-search-open);
	}

	.c-navigation[data-navigation-type="static"] .c-navigation--bar:first-of-type .c-navigation--menu {
		max-width: var(--max-width-navigation-static-alert-menu);
	}
}

@media screen and (min-width: 1365px) {
	.c-navigation-search--form[data-open="true"] .c-navigation-search--input-container {
		width: var(--width-navigation-search-open-large-screen);
	}
}

/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation/clientlib/css/navigation-menu.css ***!
  \***************************************************************************************************************************************************************************************************************************/
:root {
	--space-x-navigation-menu-link: 2rem;
	--space-y-navigation-menu-link: 2.15rem;
	--border-focus-navigation-menu-link: 0.1rem;
}

/**
 * Navigation Menu (ul and li)
 */
.c-navigation--menu {
	display: flex;
	align-items: center;
	width: fit-content;
	height: fit-content;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.c-navigation--menu > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/**
 * Following is the part of "navigation-menu" which may be:
 * 1. c-navigation-menu--meta-link (for meta navigation items)
 * 2. c-navigation-menu--link (for primary or secondary navigation items which are internal/external links)
 * 3. c-navigation-menu--button (for flyout buttons)
 */

.c-navigation-menu--button::after,
.c-navigation-menu--link::after,
.c-navigation-menu--meta-link::after,
.c-navigation-menu--meta-link::before {
	font-size: var(--font-size-1);
	line-height: calc(1 * var(--base-line-height));
}

.c-navigation-menu--button,
.c-navigation-menu--link,
.c-navigation-menu--meta-link {
	position: relative;
	padding: var(--space-y-navigation-menu-link) var(--space-x-navigation-menu-link);
	box-sizing: border-box;
	font-weight: normal;
	border: var(--border-focus-navigation-menu-link) solid transparent;
	display: flex;
	align-items: center;
	width: fit-content;
	background-color: transparent;
	cursor: pointer;
	color: var(--color-black-400);
	font-size: var(--body-font-size-c20);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-navigation-menu--meta-link::before {
	color: var(--color-black-400);
	margin-right: 0.6rem;
}

.c-navigation-menu--meta-link::after {
	margin-left: 0.6rem;
}

/* Selection rules */
.c-navigation [data-flyout-selected="true"] .c-navigation-menu--button,
.c-navigation-menu--link[data-selected="true"] {
	color: var(--color-red-500);
}

.c-navigation [data-flyout-selected="true"] .c-navigation-menu--button.login-button:not(.button-style) {
	border-bottom: 0.4rem solid var(--color-red-500);
	padding-bottom: 1.9rem;
}

.c-navigation [data-flyout-selected="true"] .c-navigation-menu--button.login-button::before {
	position: static;
	width: auto;
	height: initial;
	background-color: transparent;
}

.c-navigation-menu--meta-link[data-selected="true"] {
	color: var(--color-red-500);
	font-weight: bold;
}

.c-navigation-menu--button:focus,
.c-navigation-menu--link:focus,
.c-navigation-menu--meta-link:focus {
	border-color: var(--color-red-500);
}

.c-navigation-menu--button:hover,
.c-navigation-menu--link:hover,
.c-navigation-menu--meta-link:hover,
.c-navigation-menu--meta-link:hover::after,
.c-navigation-menu--meta-link:hover::before,
.c-navigation-menu--button:focus,
.c-navigation-menu--link:focus,
.c-navigation-menu--meta-link:focus,
.c-navigation-menu--meta-link:focus::after,
.c-navigation-menu--meta-link:focus::before {
	color: var(--color-red-400);
}

/* down/up arrow */
.c-navigation-menu--button::after {
	content: var(--icon-chevron-down);
	transition: transform 400ms ease;
	display: block;
	margin-left: 0.4rem;
	font-size: var(--font-size-4);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-navigation [data-flyout-selected="true"] .c-navigation-menu--button::after {
	content: var(--icon-chevron-up);
}

.c-navigation-menu--link.link-internal span,
.c-navigation-menu--meta-link.link-internal span {
	width: auto;
}

/* Login button */
.c-navigation .login-button:not(.button-style)::after {
	content: var(--icon-chevron-forward);
	color: var(--color-red-500);
	margin-left: 0.4rem;
	transform: none;
}

/* rtl:raw:
.c-navigation .login-button:not(.button-style)::after {
	transform: scaleX(-1);
} */

.c-navigation .login-button.button-style {
	width: unset;
	border-radius: 0.4rem;
	padding: 0.55rem 1.35rem;
	justify-content: center;
	font-weight: bold;
	margin: 1.351rem var(--component-wide-padding-s);
}

.c-navigation .login-button.button-style.primary-button {
	color: var(--color-white-500);
	background-color: var(--color-red-500);
}

.c-navigation .login-button.button-style.secondary-button {
	border: 0.1rem solid var(--color-red-500);
	background-color: var(--color-white-opacity-60);
	color: var(--color-red-500);
}

.c-navigation .login-button:not(.button-style):not(.disabled-icons)::before {
	content: var(--icon-user);
	color: var(--color-black-400);
	margin-right: 0.7rem;
}

.c-navigation .login-button:not(.button-style):not(.disabled-icons):hover::before {
	color: var(--color-red-500);
}

.c-navigation .login-button:not(.disabled-icons)::after {
	display: inline-block;
}

/* Scrolling feature styles */
.c-navigation--bar button[data-scroll-direction] {
	border: none;
	display: none;
	background-color: var(--color-white-500);
}

.c-navigation--bar button[data-scroll-direction].js-visible {
	display: flex;
}

.c-navigation--bar:not(.c-navigation--bar--sub) button[data-scroll-direction] {
	background-color: transparent;
}

.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction] {
	cursor: pointer;
}

.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="left"]::before,
.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="right"]::after {
	border-top: none;
	font-weight: bold;
	padding: 0 0.75rem;
	line-height: 6.2rem;
	border-bottom: none;
	background-color: transparent;
	content: var(--icon-chevron-back);
	color: var(--color-red-500);
	border-right: 0.1rem solid rgba(176, 176, 176, 1);
	border-left: 0.1rem solid rgba(176, 176, 176, 0.5);
	box-shadow: 0.4rem 0 0.4rem -0.1rem rgba(0, 0, 0, 0.05);
}

/* rtl:raw:
.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="left"]::before {
	transform: scaleX(-1);
} */

.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="right"]::after {
	transform: rotate(180deg);
}

/* rtl:raw:
.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="right"]::after {
	transform: rotate(0);
} */

.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="left"]:hover::before,
.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="right"]:hover::after {
	color: var(--color-red-500);
}

.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="left"]:focus::before,
.c-navigation--bar [data-scrollable="true"] button[data-scroll-direction="right"]:focus::after {
	color: var(--color-red-500);
	border: 0.1rem solid var(--color-red-500);
}

/* Flag related styles */
.c-navigation .flag-icon::before {
	border: 0.1rem solid var(--color-gray-300);
	height: 1.3rem;
	margin-right: 1.4rem;
	overflow: hidden;
	width: 1.8rem;
	margin-bottom: -0.3rem;
}

@media screen and (max-width: 767px),print {
	.c-navigation-menu--meta-link.link-internal::after {
		content: var(--icon-chevron-forward);
	}

	/* rtl:raw:
	.c-navigation-menu--meta-link.link-internal::after {
	transform: scaleX(-1);
} */

	.c-navigation-menu--button::after {
		font-size: var(--font-size-4);
		line-height: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-navigation .login-button.button-style {
		margin: calc(0.965 * var(--base-line-height)) var(--component-wide-padding-m);
	}
}

@media screen and (min-width: 1024px),print {
	.c-navigation-menu--button,
	.c-navigation-menu--link,
	.c-navigation-menu--meta-link {
		font-size: var(--font-size-text-small);
		line-height: 1.8rem;
	}

	.c-navigation-menu--button:hover span,
	.c-navigation-menu--link:hover span,
	.c-navigation-menu--meta-link:hover span,
	.c-navigation-search--input-label:hover span {
		text-decoration: underline;
	}

	.c-navigation[data-navigation-type="static"] .link-external::after,
	.c-navigation[data-navigation-type="sticky"] .link-external::after,
	.c-navigation[data-navigation-type="secondary"] .link-external::after {
		color: var(--color-black-400);
	}

	.c-navigation-menu--meta-link[data-selected="true"] {
		color: var(--color-black-400);
	}

	.c-navigation-menu--link.link-internal::after,
	.c-navigation .login-button.button-style::after,
	.c-navigation-menu--meta-link.link-internal::after,
	.c-navigation[data-navigation-type="static"] .login-button:not(.button-style):not(.disabled-icons)::before {
		content: "";
	}

	/* border line at the bottom to represent the selected */
	.c-navigation [data-flyout-selected="true"] .c-navigation-menu--button::before,
	.c-navigation-menu--link[data-selected="true"]::before {
		content: "";
		display: block;
		position: absolute;
		bottom: calc(0px - var(--border-focus-navigation-menu-link)); /* stylelint-disable-line unit-allowed-list */
		left: 0;
		width: 100%;
		height: 0.4rem;
		background-color: var(--color-red-500);
	}

	/* Fixing search form animation issue in sticky version of navigation */
	.c-navigation[data-navigation-type="sticky"] .c-navigation-menu--language-list-container {
		position: relative;
	}

	/* Fixing paddings for language list */
	.c-navigation[data-navigation-type="static"] .c-navigation-menu--language-list-container {
		margin-right: calc(0.65 * var(--space-x-navigation-menu-link));
	}

	.c-navigation-menu--language-list .c-navigation-menu--meta-link {
		padding-left: calc(0.65 * var(--space-x-navigation-menu-link));
		padding-right: calc(0.65 * var(--space-x-navigation-menu-link));
	}

	/* Scrolling feature styles */
	.c-navigation [data-scroll-menu] {
		overflow-x: hidden;
		white-space: nowrap;
	}

	/* Login button */
	.c-navigation .login-button.button-style {
		margin: 1.75rem 2rem;
		font-size: var(--font-size-text-small);
		line-height: var(--base-line-height);
	}

	.c-navigation .login-button:not(.button-style)::after,
	.c-navigation .login-button:not(.button-style).disabled-icons::after {
		content: var(--icon-chevron-down);
		color: var(--color-black-400);
		transition: transform 400ms ease;
	}

	.c-navigation [data-flyout-selected="true"] .login-button:not(.button-style)::after {
		content: var(--icon-chevron-up);
		color: var(--color-red-500);
	}

	.c-navigation .c-navigation-menu--link.login-button:not(.button-style)::after {
		content: "";
	}

	.c-navigation .login-button:not(.button-style):not(.disabled-icons)::before {
		margin-right: 0.4rem;
	}

	.c-navigation .login-button.disabled-icons::before,
	.c-navigation[data-navigation-type="sticky"] .login-button:not(.button-style):not(.disabled-icons) span {
		display: none;
	}

	.c-navigation-menu--button::after {
		font-size: 1.4rem;
		line-height: var(--base-line-height);
	}
}

/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation/clientlib/css/navigation-flyout.css ***!
  \*****************************************************************************************************************************************************************************************************************************/
:root {
	--space-x-navigation-menu-link: 2rem;
	--space-y-navigation-menu-link: 2.3rem;
	--border-focus-navigation-menu-link: 0.1rem;
}

/* Main wrapper of the flyout component */
.c-navigation-flyout {
	width: 100%;
	display: inline-block;
}

/* Trigger Button styles are defined in navigation-menu-items */

/**
 * Flyout Container: is the container div which acts as a backdrop for the flyout
 * Flyout Content: is the actual content of the flyout
 */
.c-navigation-flyout-container,
.c-navigation-flyout-content {
	z-index: -1;
	transition: max-height 400ms ease-in-out, opacity 400ms ease-in-out, visibility 400ms ease-in-out;
}

.c-navigation-flyout-container {
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	left: 0;
	display: none;
}

.c-navigation-flyout-content {
	top: 0;
	left: unset;
	right: unset;
	background-color: var(--color-white-500);
	box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.1), 0 0.2rem 1.2rem 0 rgba(0, 0, 0, 0.1), 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

.c-navigation-flyout-content section {
	position: relative;
}

.c-navigation-flyout-content section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(0.5 * var(--base-line-height));
	background-color: var(--color-red-500);
}

/* full: stretch the flyout as per client's width */
.c-navigation-flyout-content[data-flyout-size="full"] {
	width: 100%;
}

/* Selected state styles */
.c-navigation [data-flyout-selected="true"] .c-navigation-flyout-container,
.c-navigation [data-flyout-selected="true"] .c-navigation-flyout-content {
	display: block;
}

.c-navigation [data-flyout-selected="true"] .c-navigation-flyout-content {
	height: fit-content;
}

@media screen and (min-width: 1024px),print {
	.c-navigation-flyout-container,
	.c-navigation-flyout-content {
		display: unset;
		position: absolute;
		opacity: 0;
		visibility: collapse;
	}

	/* This style is required for proper flyout animation but casing infinite loop in aem editor's and preview's mode */
	body:not(.is-editmode):not(.is-previewmode) .c-navigation-flyout-container {
		height: 100vh;
	}

	.c-navigation-flyout-content {
		max-height: 59.1rem;
		overflow-y: auto;
		height: 0;
	}

	.c-navigation [data-flyout-selected="true"] .c-navigation-flyout-container,
	.c-navigation [data-flyout-selected="true"] .c-navigation-flyout-content {
		display: unset;
		opacity: 1;
		visibility: visible;
		white-space: normal;
		z-index: 1;
	}

	.c-navigation [data-flyout-selected="true"] .c-navigation-flyout-content {
		animation: c-navigation-flyout-from-top 400ms ease-in-out;
	}

	.c-navigation-flyout-content[data-flyout-size="one-column-right"],
	.c-navigation-flyout-content[data-flyout-size="one-column-left"] {
		width: 33.6rem;
	}

	.c-navigation-flyout-content[data-flyout-size="two-columns-right"],
	.c-navigation-flyout-content[data-flyout-size="two-columns-left"] {
		width: 58.8rem;
	}

	.c-navigation-flyout-content[data-flyout-size="three-columns-right"],
	.c-navigation-flyout-content[data-flyout-size="three-columns-left"] {
		width: 86.8rem;
	}

	.c-navigation-flyout-content section::before {
		position: static;
	}

	.c-navigation-flyout {
		width: auto;
	}
}

@keyframes c-navigation-flyout-from-top {
	from {
		transform: translateY(-10%);
	}

	to {
		transform: translate(0);
	}
}

/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation/clientlib/css/navigation-sticky.css ***!
  \*****************************************************************************************************************************************************************************************************************************/
.c-navigation {
	display: block;
	width: 100%;
	transition: top 400ms ease-in-out;
	z-index: var(--header-z-index);
}

.c-navigation[data-navigation-type="sticky"][data-navigation-show="false"] {
	visibility: hidden;
}

.full-width-grid .l-view .c-navigation[data-navigation-type="sticky"],
.full-width-grid .l-view .c-navigation[data-navigation-type="secondary"][data-navigation-show="true"] {
	max-width: var(--width-page-fullwidth);
}

.c-navigation[data-navigation-type="static"] {
	position: relative;
}

.c-navigation[data-navigation-type="sticky"] {
	position: fixed;
	top: -100%;
}

.c-navigation[data-navigation-type="static"],
.c-navigation[data-navigation-type="sticky"] {
	z-index: 1101;
}

.c-navigation[data-navigation-type="sticky"][data-navigation-show="true"] {
	top: 0;
}

/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation/clientlib/css/navigation-mobile.css ***!
  \*****************************************************************************************************************************************************************************************************************************/
:root {
	--size-of-one-rendered-navigation: 6.3rem;
	--size-of-one-rendered-navigation-with-global-newsflash: 20rem;
	--shadow-navigation-bar: 0 0 0.1rem 0 rgba(0, 0, 0, 0.1), 0 0.2rem 1.2rem 0 rgba(0, 0, 0, 0.1), 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

.c-navigation--bar--sub,
.c-navigation--bar.c-navigation-mobile-menu,
.c-navigation--bar--main .c-navigation--menu,
.c-navigation--bar--secondary .c-navigation--menu,
.c-navigation:not([data-navigation-type="secondary"]) .c-navigation-menu--link-container {
	display: none;
}

.c-navigation--menu,
.c-navigation--menu li,
.c-navigation--menu .link,
.c-navigation-menu--button {
	width: 100%;
}

.c-navigation--menu,
.c-navigation--bar.c-navigation-mobile-menu {
	flex-direction: column;
}

.c-navigation.opened {
	position: fixed;
	top: 0;
	background-color: var(--color-white-500);
}

.c-navigation.opened .c-navigation--bar.c-navigation-mobile-menu,
.c-navigation.opened .c-navigation--bar--sub > section:first-of-type {
	overflow: scroll;
}

.c-navigation.opened .c-navigation--bar.c-navigation-mobile-menu {
	display: flex;
}

.c-navigation[data-navigation-type="static"].opened > .c-navigation-mobile-menu,
.c-navigation[data-navigation-type="sticky"].opened > .c-navigation-mobile-menu,
.c-navigation[data-navigation-type="secondary"].self-standing.opened .c-navigation-mobile-menu {
	height: calc((var(--vh) * 100) - var(--size-of-one-rendered-navigation));
	max-height: calc((var(--vh) * 100) - var(--size-of-one-rendered-navigation));
}

.c-navigation[data-navigation-type="secondary"].opened .c-navigation-mobile-menu {
	height: calc((var(--vh) * 100) - (var(--size-of-one-rendered-navigation) * 2));
	max-height: calc((var(--vh) * 100) - (var(--size-of-one-rendered-navigation) * 2));
}

.js-global-newsflash-visible .c-navigation[data-navigation-type="secondary"].opened .c-navigation-mobile-menu {
	height: calc((var(--vh) * 100) - var(--size-of-one-rendered-navigation-with-global-newsflash));
	max-height: calc((var(--vh) * 100) - var(--size-of-one-rendered-navigation-with-global-newsflash));
}

.c-navigation.opened .c-navigation--menu li:not(.c-navigation-menu--language-list) {
	border-bottom: 0.1rem solid var(--color-gray-200);
}

.c-navigation.opened .c-navigation--menu:last-of-type li:last-child:not(.c-navigation-menu--language-list) {
	border-bottom: unset;
}

.c-navigation.opened .c-navigation-menu--button:not(.login-button) {
	font-weight: bold;
	text-align: left;
}

.c-navigation.opened .c-navigation-menu--button:not(.login-button)::after {
	margin-left: auto;
	margin-bottom: auto;
}

.c-navigation--bar.c-navigation-mobile-menu {
	box-shadow: var(--shadow-navigation-bar);
	background-color: var(--color-white-500);
}

/* Language list adjustment */
.c-navigation.opened .c-navigation--menu .c-navigation-menu--language-list {
	display: flex;
}

.c-navigation.opened .c-navigation--menu .c-navigation-menu--language-list a:first-child {
	margin-right: auto;
}

.c-navigation.opened .c-navigation--menu .c-navigation-menu--language-list a:not(:first-child) {
	width: auto;
	padding: 0 var(--base-line-height);
	margin: var(--base-line-height) 0;
	border-right: 0.1rem solid var(--color-gray-200);
}

.c-navigation.opened .c-navigation--menu .c-navigation-menu--language-list a:last-child {
	padding-right: calc(1.5 * var(--base-line-height));
	border-right: none;
}

/* Weired part to meet border-bottom design requirement */
.c-navigation.opened .c-navigation--bar--sub .component-wide {
	padding: 0;
}

.c-navigation.opened .link,
.c-navigation.opened .c-navigation-menu--button,
.c-navigation.opened .c-navigation-menu--meta-link {
	padding: 1.351rem var(--component-wide-padding-s);
}

.c-navigation.opened .c-navigation-search--form {
	padding: calc(0.4 * var(--base-line-height)) var(--component-wide-padding-s);
}

/* Navigation menu button */
.c-navigation-mobile-menu--button {
	display: flex;
	flex-direction: column;
	margin-left: auto;
	cursor: pointer;
}

.c-navigation-mobile-menu--bar {
	width: 2.1rem;
	height: 0.4rem;
	background-color: var(--color-red-500);
	transition: 400ms;
}

.c-navigation-mobile-menu--bar:nth-child(2) {
	margin: 0.45rem 0;
}

.c-navigation.opened .c-navigation-mobile-menu--bar:first-child {
	transform: rotate(-45deg) translate(-0.7rem, 0.6rem);
}

.c-navigation.opened .c-navigation-mobile-menu--bar:nth-child(2) {
	opacity: 0;
}

.c-navigation.opened .c-navigation-mobile-menu--bar:last-child {
	transform: rotate(45deg) translate(-0.5rem, -0.5rem);
}

/* Hidding globe icon on mobile viewport */
@media screen and (max-width: 767px),print {
	.c-navigation-menu--meta-link:not(.icon-exception)::before {
		display: none;
	}
}

@media screen and (min-width: 768px),print {
	.c-navigation.opened .link,
	.c-navigation.opened .c-navigation-menu--button,
	.c-navigation.opened .c-navigation-menu--meta-link {
		padding: 1.351rem var(--component-wide-padding-m);
	}

	.c-navigation.opened .c-navigation-search--form {
		padding: calc(0.4 * var(--base-line-height)) var(--component-wide-padding-m);
	}

	.c-navigation-search--form[data-open="true"] .c-navigation-search--input-label {
		padding: 0;
	}

	.c-navigation.opened .c-navigation--menu .c-navigation-menu--language-list a:last-child {
		padding-right: calc(3 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-navigation--bar--sub,
	.c-navigation--bar--main .c-navigation--menu,
	.c-navigation--bar--secondary .c-navigation--menu,
	.c-navigation:not([data-navigation-type="secondary"]) .c-navigation-menu--link-container {
		display: flex;
	}

	.c-navigation-mobile-menu,
	.c-navigation-mobile-menu--button {
		display: none;
	}

	.c-navigation--menu,
	.c-navigation--menu li,
	.c-navigation--menu .link,
	.c-navigation-menu--button {
		width: auto;
	}

	.c-navigation--menu,
	.c-navigation--bar.c-navigation-mobile-menu {
		flex-direction: row;
	}

	.c-navigation[data-navigation-type="sticky"] .c-navigation--menu:not(:first-of-type) {
		margin-left: auto;
	}

	.c-navigation[data-navigation-type="sticky"] .c-navigation--menu:last-child {
		margin-left: 0;
	}
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation/clientlib/css/navigation-secondary.css ***!
  \********************************************************************************************************************************************************************************************************************************/
.c-navigation[data-navigation-type="secondary"] {
	position: relative;
}

.c-navigation[data-navigation-type="secondary"][data-navigation-show="true"] {
	position: fixed;
	top: calc(4.5 * var(--base-line-height));
	background-color: var(--color-white-500);
}

.c-navigation[data-navigation-type="secondary"].self-standing {
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-navigation[data-navigation-type="secondary"][data-navigation-show="true"].self-standing {
	top: 0;
}

.c-navigation[data-navigation-type="secondary"].self-standing::before {
	top: calc(-0.5 * var(--base-line-height));
	content: "";
	width: 100%;
	height: calc(0.5 * var(--base-line-height));
	position: absolute;
	background: var(--linear-gradient-yellow-to-right);
}

.c-navigation--bar--secondary .c-navigation--menu > li:first-child a,
.c-navigation--bar--secondary .c-navigation--menu > li:first-child .c-navigation-menu--no-link {
	font-weight: 800;
	padding: 1.65rem 2rem;
	font-size: var(--font-size-4);
	color: var(--color-red-500);
	line-height: calc(2 * var(--base-line-height));
}

.c-navigation--bar--secondary .c-navigation--menu > li:first-child .c-navigation-menu--no-link {
	padding: 0 2rem;
}

.c-navigation--bar--secondary .c-navigation--menu > li:first-child a:hover,
.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--button:hover {
	color: var(--color-red-400);
}

.c-navigation--bar--secondary .c-navigation--menu .link,
.c-navigation--bar--secondary .c-navigation-menu--button {
	font-size: var(--font-size-2);
	font-weight: bold;
}

.c-navigation[data-navigation-type="secondary"] .c-navigation-mobile-menu > li:first-child {
	display: none;
}

.c-navigation[data-navigation-type="secondary"] .c-navigation-mobile-menu--button {
	width: 100%;
	position: relative;
}

.c-navigation[data-navigation-type="secondary"] .c-navigation-mobile-menu--button span {
	color: var(--color-red-500);
	font-weight: bold;
	font-size: var(--font-size-text-large);
	max-width: 60vw;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.c-navigation[data-navigation-type="secondary"] .c-navigation-mobile-menu--button:not(.empty-menu) span::after {
	content: var(--icon-chevron-down);
	right: 0;
	margin-left: auto;
	position: absolute;
	top: calc(-1.5 * var(--base-line-height));
	border-left: 0.1rem solid var(--color-gray-300);
	padding: calc(1.5 * var(--base-line-height)) 0 calc(1.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
}

.c-navigation[data-navigation-type="secondary"].opened .c-navigation-mobile-menu--button span::after {
	content: var(--icon-chevron-up);
}

.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--button,
.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--button::after,
.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--link,
.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--link::after,
.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--meta-link,
.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--meta-link::after,
.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--meta-link::before {
	line-height: calc(1.5 * var(--base-line-height));
}

@media screen and (max-width: 767px),print {
	.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--button {
		padding: 1.351rem 2rem;
	}
}

@media screen and (max-width: 767px),print, screen and (min-width: 768px) and (max-width: 1023px) {
	.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--link {
		font-weight: bold;
	}

	.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--button::after {
		content: var(--icon-chevron-down);
		transform: none;
		font-size: var(--font-size-4);
	}

	.c-navigation[data-navigation-type="secondary"] .c-navigation-mobile-menu--button span::after {
		font-size: var(--font-size-4);
		line-height: calc(1.5 * var(--base-line-height));
	}

	.c-navigation[data-navigation-type="secondary"] [data-flyout-selected="true"] .c-navigation-menu--button::after {
		content: var(--icon-chevron-up);
	}

	.c-navigation[data-navigation-type="secondary"] .c-navigation--menu .link:not(.link-external)::after {
		content: var(--icon-chevron-forward);
		color: var(--color-red-500);
		margin-left: 0.6rem;
	}

	/* rtl:raw:
	.c-navigation[data-navigation-type="secondary"] .c-navigation--menu .link:not(.link-external)::after {
	  	transform: scaleX(-1);
  } */

	.c-navigation--bar--secondary .c-navigation--menu > li:first-child a {
		font-size: var(--font-size-text-large);
		line-height: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--button {
		padding: 2rem;
	}

	.c-navigation[data-navigation-type="secondary"] .c-navigation-menu--button::after {
		line-height: var(--base-line-height);
	}
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/accordion/clientlib/css/accordion.css ***!
  \********************************************************************************************************************************************************************************************************************/
/* Will be fixed on a later state */
.c-component-accordion h2 {
	width: 100%;
}

.c-component-accordion .component-small,
.c-component-accordion .component-wide {
	padding: 0;
}

.c-component-accordion h3 {
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-component-accordion-list {
	margin-top: calc(1 * var(--base-line-height));
	margin-bottom: 0;
	width: 100%;
}

.c-component-accordion .c-component-accordion--copytext {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1.8rem;
}

.c-component-accordion-list > li {
	float: none;
	list-style: none;
	color: var(--color-black-400);
	padding: 0;
}

.c-component-accordion li .c-component-accordion--header a,
.c-component-accordion li .c-component-accordion--header button {
	color: var(--color-black-400);
	font-weight: 800;
	display: block;
	line-height: 2.1rem;
	width: 100%;
	text-align: left;
	padding: 1.7rem 4.9rem 1.4rem calc(1 * var(--base-line-height));
	border: 0.1rem solid var(--color-white-500);
}

html:not(.is-touch) .c-component-accordion li:not(.is-open) .c-component-accordion--header a:focus,
html:not(.is-touch) .c-component-accordion li:not(.is-open) .c-component-accordion--header button:focus {
	border: 0.1rem solid var(--color-black-500);
	color: var(--color-red-500);
}

html:not(.is-touch) .c-component-accordion li .c-component-accordion--header:hover a,
.c-component-accordion .has-hover .c-component-accordion--header a,
html:not(.is-touch) .c-component-accordion li .c-component-accordion--header:hover a::after,
.c-component-accordion .has-hover .c-component-accordion--header a::after,
.c-component-accordion .is-editmode .c-component-accordion--header a::after,
html:not(.is-touch) .c-component-accordion li .c-component-accordion--header:hover button,
.c-component-accordion .has-hover .c-component-accordion--header button,
html:not(.is-touch) .c-component-accordion li .c-component-accordion--header:hover button::after,
.c-component-accordion .has-hover .c-component-accordion--header button::after,
.c-component-accordion .is-editmode .c-component-accordion--header button::after {
	color: var(--color-red-400);
}

.c-component-accordion .is-open,
.c-component-accordion .is-editmode > div {
	border-bottom: 0;
}

/* adjustments for components inside the component accordion */
.c-component-accordion .is-open .c-text-generic,
.c-component-accordion .is-open .c-video,
.c-component-accordion .is-open .c-download-box {
	padding: 0 calc(1 * var(--base-line-height));
}

.c-component-accordion .c-download-box--file-meta-information {
	font-weight: normal;
}

html:not(.is-touch) .c-component-accordion .has-rte .c-download-box--link:focus {
	outline: var(--color-black-500) solid 0.2rem;
}

.c-component-accordion .is-open .c-cta {
	padding: calc(0.5 * var(--base-line-height)) calc(1 * var(--base-line-height)) 0;
}

.c-component-accordion--header {
	display: block;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	text-align: left;
	border-top: 0.1rem solid var(--color-gray-300);
}

.c-component-accordion .c-component-accordion-list > li:last-child {
	border-bottom: 0.1rem solid var(--color-gray-300);
}

.c-component-accordion li .c-component-accordion--header a::after,
.c-component-accordion li .c-component-accordion--header button::after {
	position: absolute;
	right: calc(1 * var(--base-line-height));
	font-family: "dhlicons";
	content: var(--icon-chevron-down);
	color: var(--color-red-500);
	height: auto;
	top: 50%;
	transform: translateY(-50%);
}

.c-component-accordion li.c-accordion--item--locked .c-component-accordion--header a,
.c-component-accordion li.c-accordion--item--locked .c-component-accordion--header button {
	cursor: default;
	color: var(--color-black-500) !important; /* stylelint-disable-line declaration-no-important */
}

.c-component-accordion li.c-accordion--item--locked .c-component-accordion--header a::after,
.c-component-accordion li.c-accordion--item--locked .c-component-accordion--header button::after {
	content: "";
}

.c-component-accordion .is-open .c-component-accordion--header a::after,
.c-component-accordion .is-editmode .c-component-accordion--header a::after,
.c-component-accordion .is-open .c-component-accordion--header button::after,
.c-component-accordion .is-editmode .c-component-accordion--header button::after {
	content: var(--icon-chevron-up);
}

/* accordion content - the foldable part */

.c-component-accordion--content .list.is-centered {
	margin-left: 0;
	margin-right: 0;
}

.c-component-accordion--content {
	background: transparent;
	overflow: hidden;
	display: none;
	text-align: left;
}

.c-component-accordion--content-wrapper {
	padding: calc(0.5 * var(--base-line-height)) 0 calc(1 * var(--base-line-height)) 0;
}

.c-component-accordion--content-wrapper ol.list {
	counter-reset: revert;
}

.c-component-accordion .is-open .c-component-accordion--content,
.c-component-accordion .is-editmode .c-component-accordion--content {
	display: block;
}

.c-component-accordion .is-editmode .c-component-accordion--content {
	height: auto;
}

.c-component-accordion--content-wrapper .c-video--headline,
.c-component-accordion--content-wrapper .c-video--transcript {
	text-align: left;
}

@media screen and (min-width: 768px),print {
	.c-component-accordion .is-open .c-cta .base-button {
		margin-bottom: var(--base-line-height);
	}

	.c-component-accordion .is-open .c-cta:first-of-type {
		margin-top: 0.7rem;
	}
}

@media screen and (max-width: 767px),print, screen and (min-width: 768px) and (max-width: 1023px) {
	.c-component-accordion li .c-component-accordion--header a,
	.c-component-accordion li .c-component-accordion--header button {
		padding-right: calc(3.4 * var(--base-line-height));
	}
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/alert-message/clientlib/css/alert-message.css ***!
  \****************************************************************************************************************************************************************************************************************************/
/* because the body tag is necessary to make :not(.no-js) properly work */
body:not(.no-js) .c-alert-message:not(.content-extended).hidden {
	display: none;
}

.c-alert-message {
	margin-bottom: calc(3 * var(--base-line-height));
}

.c-alert-message--taglist {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}

.c-alert-message--taglist li {
	font-size: var(--font-size-text-small);
	line-height: calc(1.5 * var(--base-line-height));
	color: var(--color-gray-600);
}

.c-alert-message--taglist li:not(:last-child)::after {
	content: "|";
	margin: 0 calc(0.5 * var(--base-line-height));
	font-size: var(--font-size-standard);
}

.c-alert-message--headline-h2 {
	text-align: center;
	text-transform: uppercase;
}

.c-page-headline .c-alert-message--headline-h2 {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-alert-message--headline {
	margin-bottom: var(--base-line-height);
}

.c-alert-message.content-extended p:last-child {
	margin-bottom: 0;
}

.c-alert-message--details-link:focus {
	outline: 0.1rem solid var(--color-red-500);
}

.c-alert-message--fallback-content {
	margin-bottom: calc(3 * var(--base-line-height));
}

.c-alert-message-back-button {
	display: flex;
	justify-content: center;
	margin-bottom: calc(3 * var(--base-line-height));
}

.c-alert-message-back-button.hidden {
	display: none;
}

.c-alert-message-back-button a {
	margin-bottom: 0;
}

@media screen and (min-width: 768px),print {
	.c-alert-message.last,
	.c-alert-message.content-extended,
	.c-alert-message--fallback-content,
	.c-alert-message-back-button {
		margin-bottom: calc(5 * var(--base-line-height));
	}

	.c-alert-message-back-button {
		margin-top: calc(-2 * var(--base-line-height));
	}
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/background-media/clientlib/css/background-media.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
.c-background-media,
.c-background-media--picture-element,
.c-background-media--video-element {
	position: relative; /* required for .c-background-media--opacity-layer */
	width: 100%;
}

.c-background-media--video-element {
	display: block;
}

.c-background-media:not(.background-relative),
.c-background-media:not(.background-relative) .c-background-media--picture-element,
.c-background-media:not(.background-relative) .c-background-media--video-element,
.c-background-media--opacity-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* please note that https://github.com/constancecchen/object-fit-polyfill is used */
.c-background-media:not(.background-relative) .c-background-media--image-element,
.c-background-media:not(.background-relative) .c-background-media--video-element {
	object-fit: cover;
}

.c-background-media:not(.background-relative).background-top .c-background-media--image-element,
.c-background-media:not(.background-relative).background-top .c-background-media--video-element {
	object-position: top;
}

.c-background-media:not(.background-relative).background-right .c-background-media--image-element,
.c-background-media:not(.background-relative).background-right .c-background-media--video-element {
	object-position: right;
}

.c-background-media:not(.background-relative).background-bottom .c-background-media--image-element,
.c-background-media:not(.background-relative).background-bottom .c-background-media--video-element {
	object-position: bottom;
}

.c-background-media:not(.background-relative).background-left .c-background-media--image-element,
.c-background-media:not(.background-relative).background-left .c-background-media--video-element {
	object-position: left;
}

.c-background-media--image-element {
	display: block;
	width: 100%;
}

.c-background-media:not(.background-relative) .c-background-media--image-element {
	height: 100%; /* required for object-fit/position */
}

.c-background-media--video-element.hidden {
	display: none;
}

/* bg-black and opacity-20 are the default settings */
.c-background-media--opacity-layer {
	background-color: var(--color-black-500);
	opacity: 0.2;
}

.c-background-media--opacity-layer.bg-white {
	background-color: var(--color-white-500);
}

.c-background-media--opacity-layer.opacity-40 {
	opacity: 0.4;
}

/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/cookie-disclaimer/clientlib/css/cookie-disclaimer.css ***!
  \************************************************************************************************************************************************************************************************************************************/
/**
 * @file cookie-disclaimer.css
 *
 * @description
 * define cookie disclaimer
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

.c-cookie-disclaimer {
	border-bottom: 0.1rem solid var(--color-gray-300);
	width: 100%;
	left: 0;
	display: none;
	text-align: left;
	background: var(--color-gray-50);
	min-width: var(--width-page-min);
	max-width: var(--width-page-max);
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	z-index: 1001;
	top: calc(4 * var(--base-line-height));
	height: auto;
}

.c-cookie-disclamer--copy-wrapper {
	margin-top: calc(1.5 * var(--base-line-height));
}

.c-cookie-disclamer--button-wrapper {
	margin-top: calc(2 * var(--base-line-height));
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-cookie-disclaimer-close {
	position: absolute;
	right: calc(2 * var(--base-line-height));
	top: calc(0.85 * var(--base-line-height));
	font-size: 1.7rem;
	color: var(--color-red-500);
}

.c-cookie-disclaimer-close::before {
	font-size: 2.1rem;
}

.c-cookie-disclaimer-close:hover {
	color: var(--color-red-400);
}

.c-cookie-disclaimer-close:focus::before {
	outline: 0.2rem solid var(--color-black-400);
}

.c-cookie-disclamer--button-wrapper .base-button {
	margin-bottom: 0;
}

/**
 * major breakpoint "m"
 * @size <768
 */
@media screen and (max-width: 767px),print {
	.c-cookie-disclamer--button-wrapper .base-button {
		width: auto;
	}

	.c-cookie-disclaimer-close {
		right: calc(0.5 * var(--base-line-height));
	}
}

/**
 * major breakpoint "m"
 * @size >=768
 */
@media screen and (min-width: 768px),print {
	.c-cookie-disclaimer {
		top: 0;
	}

	.c-cookie-disclaimer .c-cookie-disclamer--copy-wrapper {
		padding-right: calc(1 * var(--base-line-height));
	}
}

.is-editmode .c-cookie-disclaimer {
	display: block !important; /* stylelint-disable-line declaration-no-important */
	height: auto !important; /* stylelint-disable-line declaration-no-important */
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-cookie-disclaimer {
		max-width: var(--width-page-fullwidth);
		padding-left: var(--component-page-max-padding);
		padding-right: var(--component-page-max-padding);
	}

	.full-width-grid .c-cookie-disclaimer-close {
		right: calc((100% - var(--width-page-max-nopadding)) / 2 - (1 * var(--base-line-height)));
	}
}

/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/country-selection-layer/clientlib/css/country-selection-layer.css ***!
  \************************************************************************************************************************************************************************************************************************************************/
.c-country-selection-layer {
	border-bottom: 0.1rem solid var(--color-gray-300);
	background: var(--color-gray-50);
	display: none;
	margin: 0 auto;
	min-width: 32rem;
	max-width: var(--width-page-max);
	overflow: hidden;
	position: relative;
	top: calc(4 * var(--base-line-height));
	z-index: 1001;
	transition: opacity 550ms, height 550ms;
}

.c-country-selection-layer .base-button {
	padding: 0 calc(1 * var(--base-line-height));
}

.c-country-selection-layer--container {
	padding: calc(2 * var(--base-line-height)) 0 calc(1 * var(--base-line-height));
}

.c-country-selection-layer--base-copy {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-country-selection-layer--flag {
	border-radius: 50%;
	height: calc(3 * var(--base-line-height));
	margin-bottom: calc(2 * var(--base-line-height));
	margin-right: var(--base-line-height);
	overflow: hidden;
	position: relative;
	width: calc(3 * var(--base-line-height));
}

.c-country-selection-layer--copy {
	width: 100%;
	display: block;
}

.c-country-selection-layer--copy-container {
	height: calc(3 * var(--base-line-height));
}

.c--country-selection-layer-close {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

@media screen and (min-width: 1024px),print {
	.c-country-selection-layer--copy-container {
		height: calc(4 * var(--base-line-height));
	}

	.c-country-selection-layer--copy {
		width: auto;
	}

	.c-country-selection-layer--flag {
		margin-right: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-country-selection-layer {
		padding: 0 calc(3 * var(--base-line-height));
		top: 0;
	}

	.c-country-selection-layer--container {
		padding: calc(1 * var(--base-line-height)) 0;
		position: relative;
	}

	.c-country-selection-layer--container > div {
		justify-content: center;
	}

	.c-country-selection-layer--flag {
		left: 0;
		margin-bottom: 0;
		position: relative;
		margin-top: calc(0.5 * var(--base-line-height));
	}

	.c-country-selection-layer--base-copy {
		margin: 0 calc(0.5 * var(--base-line-height));
		flex-grow: 0;
	}

	.c-country-selection-layer--copy:first-of-type {
		margin-right: calc(1 * var(--base-line-height));
	}

	.c-country-selection-layer--copy-container {
		margin-right: calc(1 * var(--base-line-height));
	}

	.c-country-selection-layer .base-button {
		margin: calc(0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-country-selection-layer--container {
		padding: calc(2 * var(--base-line-height)) 0 calc(1.5 * var(--base-line-height));
	}

	.c-country-selection-layer--container > div {
		flex-direction: column;
		align-content: center;
	}

	.c-country-selection-layer--container > div > div {
		flex-basis: auto;
		width: auto;
	}

	.c-country-selection-layer--flag {
		margin-bottom: calc(1.5 * var(--base-line-height));
		margin-top: 0;
	}

	.c-country-selection-layer .base-button.c--country-selection-layer-close {
		margin: calc(0.5 * var(--base-line-height)) calc(0.5 * var(--base-line-height)) calc(0.5 * var(--base-line-height)) 0;
	}
}

/* EDITMODE */

.is-editmode .c-country-selection-layer {
	display: block;
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-country-selection-layer {
		max-width: var(--width-page-fullwidth);
		padding-left: var(--component-page-max-padding);
		padding-right: var(--component-page-max-padding);
	}
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/faq-tiles/clientlib/css/faq-tiles.css ***!
  \********************************************************************************************************************************************************************************************************************/
.c-faq-tiles--tabs {
	display: flex;
	flex-wrap: wrap;
}

.c-faq-tiles--tabs.is-editmode {
	flex-direction: column;
}

.c-faq-tiles--content.is-editmode {
	max-height: fit-content;
	margin: var(--base-line-height) 0;
	opacity: 1;
}

.c-faq-tiles--label {
	display: none;
}

.c-faq-tiles--content {
	display: block;
	order: 2;
	width: 100%;
	margin-top: calc(2 * var(--base-line-height));
	background-color: var(--color-white-500);
}

.c-faq-tiles.component-small .c-faq-tiles--label:nth-of-type(n+4),
.c-faq-tiles.component-wide .c-faq-tiles--label:nth-of-type(n+5) {
	order: 3;
}

.c-faq-tiles.component-small .c-faq-tiles--label:nth-of-type(n+7),
.c-faq-tiles.component-wide .c-faq-tiles--label:nth-of-type(n+9) {
	order: 5;
}

.c-faq-tiles.component-small .c-faq-tiles--content:nth-of-type(n+4),
.c-faq-tiles.component-wide .c-faq-tiles--content:nth-of-type(n+5) {
	order: 4;
}

.c-faq-tiles.component-small .c-faq-tiles--content:nth-of-type(n+7),
.c-faq-tiles.component-wide .c-faq-tiles--content:nth-of-type(n+9) {
	order: 6;
}

.c-faq-tiles--content-container > .component-small,
.c-faq-tiles--content-container > .component-wide {
	padding: 0;
	background-color: var(--color-white-500);
}

.c-faq-tiles.component-wide .c-faq-tiles--content-container > .component-small,
.c-faq-tiles.component-wide .c-faq-tiles--content-container > .component-wide {
	max-width: var(--width-page-max-nopadding-small);
	margin-left: 0;
}

.c-faq-tiles--input:checked + .c-faq-tiles--label {
	cursor: default;
	box-shadow: var(--shadow-small);
}

.c-faq-tiles--input:checked + .c-faq-tiles--label::after {
	background-color: var(--color-red-500);
}

.c-faq-tiles--content-container {
	display: none;
}

.c-faq-tiles--close-button {
	display: none;
}

.c-faq-tiles--close-button.icon-cancel::before {
	font-size: 2.1rem;
}

.c-faq-tiles--content-label-container {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: calc(1 * var(--base-line-height));
	display: flex;
	background-color: var(--color-white-500);
	border-radius: 0.4rem;
}

.c-faq-tiles--content-label {
	display: flex;
	width: 100%;
}

.c-faq-tiles--content-label img {
	margin-right: calc(0.5 * var(--base-line-height));
	width: calc(1.5 * var(--base-line-height));
	height: calc(1.5 * var(--base-line-height));
}

.c-faq-tiles--input:checked + .c-faq-tiles--label + .c-faq-tiles--content .c-faq-tiles--content-label-container {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: 0 0.3rem 0.7rem -0.2rem rgba(94, 94, 94, 0.5);
}

@media screen and (max-width: 767px),print {
	.c-faq-tiles--input:checked + .c-faq-tiles--label + .c-faq-tiles--content .c-faq-tiles--content-container {
		display: block;
		border-bottom-right-radius: 0.4rem;
		border-bottom-left-radius: 0.4rem;
		border-left: 0.7rem solid var(--color-red-500);
		padding: 2.1rem 1.4rem 1.4rem;
	}

	.c-faq-tiles--input:checked + .c-faq-tiles--label + .c-faq-tiles--content {
		box-shadow: var(--shadow-medium);
	}
}

@media screen and (min-width: 768px),print {
	.c-faq-tiles--content-container {
		display: block;
		padding: calc(1.5 * var(--base-line-height)) calc(3.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
		position: relative;
		border-left: none;
	}

	.c-faq-tiles--label {
		order: 1;
		position: relative;
		width: calc(33.333% - calc(1 * var(--base-line-height)));
		flex-flow: column wrap;
		align-items: center;
		text-align: center;
		cursor: pointer;
		transition: margin-bottom 300ms ease 200ms, clip-path 300ms ease 200ms;
		font-size: 1.5rem;
		display: flex;
		padding: calc(1.5 * var(--base-line-height));
		border-radius: 0.4rem;
		clip-path: inset(-1rem -1rem -1rem -1rem);
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.c-faq-tiles.component-wide .c-faq-tiles--label {
		width: calc(25% - calc(1.125 * var(--base-line-height)));
	}

	.c-faq-tiles.component-small .c-faq-tiles--label:nth-of-type(3n+3) {
		margin-right: 0;
	}

	.c-faq-tiles.component-wide .c-faq-tiles--label:nth-of-type(4n+4) {
		margin-right: 0;
	}

	.c-faq-tiles--label:hover {
		box-shadow: var(--shadow-medium);
	}

	.c-faq-tiles--input:focus-visible + .c-faq-tiles--label {
		box-shadow: var(--shadow-large);
	}

	.c-faq-tiles--label span {
		text-align: left;
		word-break: break-word;
	}

	.c-faq-tiles--label img {
		width: calc(2.5 * var(--base-line-height));
		height: calc(2.5 * var(--base-line-height));
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-faq-tiles--content-label-container {
		display: none;
	}

	.c-faq-tiles--content {
		max-height: 0;
		margin: 0;
		opacity: 0;
		border-bottom-left-radius: 0.4rem;
		border-bottom-right-radius: 0.4rem;
		box-shadow: var(--shadow-small);
		overflow: hidden;
		transition: opacity 200ms, max-height 300ms ease 200ms, margin 300ms ease 200ms;
	}

	.c-faq-tiles--content.is-open {
		display: block;
		opacity: 1;
		max-height: 50rem;
		margin: calc(1 * var(--base-line-height)) 0;
		transition: opacity 200ms 500ms, max-height 300ms ease 200ms, margin 300ms ease 200ms;
	}

	.c-faq-tiles--input:checked + .c-faq-tiles--label {
		background-color: var(--color-white-500);
		clip-path: inset(-1rem -1rem 0 -1rem);
		border-radius: 0.4rem 0.4rem 0 0;
		z-index: 1;
		margin-bottom: calc(-1 * var(--base-line-height));
	}

	.c-faq-tiles--input:checked + .c-faq-tiles--label span {
		color: var(--color-red-500);
	}

	.c-faq-tiles--input + .c-faq-tiles--label::after {
		content: "";
		position: absolute;
		transition: height 200ms, bottom 300ms;
		left: calc(1.5 * var(--base-line-height));
		right: calc(1.5 * var(--base-line-height));
		height: 0;
		bottom: 0;
		background-color: var(--color-red-500);
	}

	.c-faq-tiles--input:checked + .c-faq-tiles--label::after {
		height: 0.4rem;
		transition: height 300ms 200ms, bottom 300ms 200ms;
	}

	.c-faq-tiles--close-button {
		display: block;
		width: 1.5rem;
		color: var(--color-red-500);
		position: absolute;
		right: 1.4rem;
		top: 1.4rem;
		background: none;
		border: none;
	}

	.c-faq-tiles--close-button:hover {
		color: var(--color-red-400);
	}

	.c-faq-tiles--close-button:focus-visible {
		border: 0.1rem solid var(--color-red-400);
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-faq-tiles.component-wide .c-faq-tiles--label,
	.c-faq-tiles.component-small .c-faq-tiles--label {
		width: calc(50% - calc(0.75 * var(--base-line-height)));
	}

	.c-faq-tiles.component-small .c-faq-tiles--label:nth-of-type(n+3),
	.c-faq-tiles.component-wide .c-faq-tiles--label:nth-of-type(n+3) {
		order: 3;
	}

	.c-faq-tiles.component-small .c-faq-tiles--label:nth-of-type(n+5),
	.c-faq-tiles.component-wide .c-faq-tiles--label:nth-of-type(n+5) {
		order: 5;
	}

	.c-faq-tiles.component-small .c-faq-tiles--label:nth-of-type(n+7),
	.c-faq-tiles.component-wide .c-faq-tiles--label:nth-of-type(n+7) {
		order: 7;
	}

	.c-faq-tiles.component-small .c-faq-tiles--content:nth-of-type(n+3),
	.c-faq-tiles.component-wide .c-faq-tiles--content:nth-of-type(n+3) {
		order: 4;
	}

	.c-faq-tiles.component-small .c-faq-tiles--content:nth-of-type(n+5),
	.c-faq-tiles.component-wide .c-faq-tiles--content:nth-of-type(n+5) {
		order: 6;
	}

	.c-faq-tiles.component-small .c-faq-tiles--content:nth-of-type(n+7),
	.c-faq-tiles.component-wide .c-faq-tiles--content:nth-of-type(n+7) {
		order: 8;
	}

	.c-faq-tiles.component-small .c-faq-tiles--label:nth-of-type(2n+2),
	.c-faq-tiles.component-wide .c-faq-tiles--label:nth-of-type(2n+2) {
		margin-right: 0;
	}
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/form-switcher/clientlib/css/form-switcher.css ***!
  \****************************************************************************************************************************************************************************************************************************/
:root {
	--form-switcher-loader-icon-size: 10rem;
}

.c-form-switcher {
	padding-bottom: calc(var(--form-switcher-loader-icon-size) + 3 * var(--base-line-height));
	display: flex;
	flex-direction: column;
	align-items: center;
}

.left-aligned-grid .c-form-switcher {
	align-items: flex-start;
}

.no-js .c-form-switcher {
	display: none;
}

.c-form-switcher.form-loading {
	background: url(../assets/img/2232976986268d95f7cc.svg) center bottom no-repeat;
	background-size: var(--form-switcher-loader-icon-size);
}

.c-form-switcher.form-injected,
.c-form-switcher.form-error {
	padding-bottom: 0;
}

/* whether .component-margin is set or not, when a form is injected, we need a
space between .c-form-switcher and the following currently injected form component */
.c-form-switcher.form-injected {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-form-switcher--headline,
.c-form-switcher--copy {
	margin: 0;
	width: 100%; /* relevant for older browsers (e.g. IE11) */
	max-width: 76.8rem;
	text-align: center;
}

.left-aligned-grid .c-form-switcher--headline,
.left-aligned-grid .c-form-switcher--copy {
	text-align: left;
}

.left-aligned-grid .c-form-switcher--headline {
	font-size: calc(2 * var(--font-size-1));
	line-height: 3.2rem;
}

.left-aligned-grid .c-form-switcher--copy {
	font-size: var(--font-size-text-large);
	line-height: calc(1.5 * var(--base-line-height));
	font-weight: 200;
}

.c-form-switcher--copy {
	font-size: var(--font-size-text-large);
}

.c-form-switcher--copy:not(:first-child) {
	margin-top: var(--base-line-height);
}

.c-form-switcher .c-form-step--item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 56rem;
}

.c-form-switcher .c-form-step--item:not(:first-child) {
	margin-top: calc(2.5 * var(--base-line-height));
}

.c-form-switcher.form-error .c-form-step--error-message {
	display: block;
	margin-top: calc(3 * var(--base-line-height));
	width: auto;
	color: var(--color-black-400);
}

.left-aligned-grid .c-form-switcher.form-error .c-form-step--error-message {
	width: inherit;
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-form-switcher .c-form-step--item {
		max-width: 62.4rem;
	}
}

@media screen and (min-width: 1024px),print {
	.left-aligned-grid .c-form-switcher--headline,
	.left-aligned-grid .c-form-switcher--copy {
		max-width: 69.9rem;
	}
}

@media screen and (min-width: 768px),print {
	.left-aligned-grid .c-form-switcher.form-loading {
		background-position: left 27.5rem bottom;
	}

	.left-aligned-grid .c-form-switcher--headline {
		font-size: calc(2.5 * var(--font-size-1));
		line-height: 4.6rem;
	}

	.left-aligned-grid .c-form-switcher--copy {
		font-size: var(--font-size-4);
		line-height: calc(2 * var(--base-line-height));
	}
}

@media screen and (min-width: 1365px) {
	.left-aligned-grid .c-form-switcher--headline,
	.left-aligned-grid .c-form-switcher--copy {
		max-width: 89.3rem;
	}
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/globalnewsflash/clientlib/css/globalnewsflash.css ***!
  \********************************************************************************************************************************************************************************************************************************/
@keyframes marquee {
	0% {
		transform: translate(300%, 0);
		transform-origin: 50% 50%;/* update here */
	}

	100% {
		transform: translate(-100%, 0);
		transform-origin: 50% 50%;/* update here */
	}
}

.c-global-newsflash--newsdate {
	font-weight: normal;
}

.c-global-newsflash--newsdate::after {
	content: "|";
	margin: auto calc(0.5 * var(--base-line-height));
}

.c-global-newsflash--wrapper {
	position: relative;
	z-index: 111;
	max-width: var(--width-page-max);
	margin: 0 auto;
	display: none;
}

.c-nav-primary--globalnewsflash.not-visible {
	display: none;
}

.c-nav-primary--globalnewsflash.not-visible + li::before {
	border-right: none;
}

.no-js .c-nav-primary--globalnewsflash.not-visible + li::before {
	border-right: 0.1rem solid var(--color-yellow-400);
}

.no-js .c-nav-primary--globalnewsflash.not-visible {
	display: flex;
}

.c-global-newsflash {
	background-color: var(--color-red-500);
	position: relative;
	top: calc(4 * var(--base-line-height));
}

.no-white-space .c-global-newsflash,
.no-white-space .c-country-selection-layer {
	top: 0;
}

.c-global-newsflash .c-global-newsflash--content-wrapper {
	display: flex;
	flex-basis: auto;
	margin: calc(1.5 * var(--base-line-height)) 0;
	width: 100%;
	max-width: none;
}

.c-global-newsflash .c-global-newsflash--copy-wrapper {
	position: relative;
	margin-left: calc(0.5 * var(--base-line-height));
	width: calc(100% - 3.3rem - var(--base-line-height));
	overflow: hidden;
}

.c-global-newsflash .c-global-newsflash-close {
	position: absolute;
	top: 50%;
	right: calc(1.5 * var(--base-line-height) - ((4.2rem - 1.7rem) / 2));
	transform: translateY(-50%);
	font-size: 1.7rem;
}

.c-global-newsflash .c-global-newsflash-close.icon-cancel::before {
	font-size: 2.1rem;
}

@media screen and (min-width: 768px),print {
	.c-global-newsflash .c-nav-primary--globalnewsflash a {
		padding-left: 0;
	}

	.c-global-newsflash {
		top: 0;
	}

	.c-global-newsflash .c-global-newsflash--copy-wrapper {
		margin-left: calc(2 * var(--base-line-height));
		width: calc(100% - 3.3rem - 4 * var(--base-line-height));
	}

	.c-global-newsflash .c-global-newsflash--copy.c-global-newsflash--copy--mobile {
		display: none;
	}

	.c-global-newsflash .c-global-newsflash-close {
		right: calc(3 * var(--base-line-height) - ((4.2rem - 1.7rem) / 2));
	}
}

.c-global-newsflash .c-global-newsflash--copy-wrapper.no-padding {
	padding-left: 0;
}

.c-global-newsflash .c-global-newsflash-icon-alert {
	display: flex;
	align-items: center;
	font-size: var(--font-size-icons-standard);
}

.c-global-newsflash .c-global-newsflash-icon-alert,
.c-global-newsflash .c-global-newsflash-close,
.c-global-newsflash .link-internal::after,
.c-global-newsflash .c-global-newsflash-link,
.c-global-newsflash--copy:link {
	color: var(--color-white-500);
}

.c-global-newsflash .c-global-newsflash--copy-wrapper .animated {
	position: absolute;
	animation-name: marquee;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: running;
	white-space: nowrap;
	left: 0;
}

.c-global-newsflash .c-global-newsflash--copy-wrapper .paused {
	animation-play-state: paused;
}

/* Safari hack because paised is not working */
_::-webkit-full-page-media,
_:future,
:root .c-global-newsflash .c-global-newsflash--copy-wrapper .paused {
	animation-play-state: running;
}

.c-global-newsflash .c-global-newsflash--copy-wrapper:active .animated {
	animation-play-state: running !important; /* stylelint-disable-line declaration-no-important */
}

/* IE11 and Mobile Fix - DHLGLOBAL-6493 Lang != en */
/* IE11 and Mobile Fix - DHLGLOBAL-6695 */
html:not([lang*="en-"]) .c-global-newsflash .c-global-newsflash--copy-wrapper {
	display: none;
}

html:not([lang*="en-"]) .c-global-newsflash .c-global-newsflash--copy--mobile {
	display: inline-block !important; /* stylelint-disable-line declaration-no-important */
}

@media all and (-ms-high-contrast: none), (hover: none) { /* stylelint-disable-line media-feature-name-disallowed-list */
	.c-global-newsflash .c-global-newsflash--copy-wrapper {
		display: none;
	}

	.c-global-newsflash .c-global-newsflash--copy--mobile {
		display: inline-block !important; /* stylelint-disable-line declaration-no-important */
	}
}

@media screen and (max-width: 479px) {
	.c-global-newsflash .c-global-newsflash--content-wrapper {
		margin: var(--base-line-height) 0;
	}
}

@media screen and (max-width: 767px),print {
	.c-global-newsflash .c-global-newsflash--copy-wrapper {
		display: none;
	}
}

.c-global-newsflash .c-global-newsflash--copy-wrapper.hover .animated {
	animation-play-state: paused;
}

.c-global-newsflash .c-global-newsflash--copy {
	margin: 0.1rem;
	padding-left: 0.3rem;
	line-height: 1.4rem; /* do not increase, otherwise the outline gets cropped in Firefox */
	white-space: nowrap;
	color: var(--color-white-500);
	cursor: pointer;
}

.c-global-newsflash .c-global-newsflash--copy--mobile {
	margin: 0.1rem 0.1rem 0.1rem calc(0.5 * var(--base-line-height));
	max-width: calc(100% - 5.3rem);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-global-newsflash .c-global-newsflash--copy:hover {
	text-decoration: underline;
}

.c-global-newsflash .c-global-newsflash--copy:focus {
	outline: 0.1rem solid var(--color-white-500);
}

.c-global-newsflash .c-global-newsflash--copy::after {
	display: inline-block;
	top: 0.2rem;
	font-size: var(--font-size-icons-gnf);
}

.c-global-newsflash .c-global-newsflash--copy.no-nowrap {
	white-space: normal;
}

.c-global-newsflash p {
	display: inline-block;
	margin-bottom: 0;
	padding-right: 0.4rem;
	width: 10.7rem;
	white-space: nowrap;
	text-align: center;
	color: var(--color-white-500);
}

.c-global-newsflash .c-global-newsflash--copy-wrapper:hover .c-global-newsflash--copy {
	color: var(--color-white-500);
}

@media screen and (min-width: 768px),print {
	.c-global-newsflash .c-global-newsflash--copy--mobile {
		margin: 0.1rem 0.1rem 0.1rem calc(2 * var(--base-line-height));
	}
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-global-newsflash--wrapper {
		max-width: var(--width-page-fullwidth);
	}

	.full-width-grid .c-global-newsflash {
		max-width: none;
		padding-left: var(--component-page-max-padding);
		padding-right: var(--component-page-max-padding);
	}

	.full-width-grid .c-global-newsflash-close {
		right: calc((100% - var(--width-page-max-nopadding)) / 2 - (1 * var(--base-line-height)));
	}
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/go-to-top-button/clientlib/css/go-to-top-button.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
.c-go-to-top-button {
	position: fixed;
	bottom: calc(3 * var(--base-line-height));
	right: calc(0.5 * var(--base-line-height));
	min-width: auto;
	width: calc(3 * var(--base-line-height));
	margin: 0;
	transition: opacity 200ms;
	pointer-events: none;
	opacity: 0;
	z-index: 2000;
}

.c-go-to-top-button::before {
	font-size: var(--font-size-5);
	left: 0;
}

.c-go-to-top-button.visible {
	position: fixed;
	opacity: 1;
	pointer-events: all;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-go-to-top-button {
		right: calc(2.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-go-to-top-button {
		right: calc(2.5 * var(--base-line-height));
	}
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/link-list-big/clientlib/css/link-list-big.css ***!
  \****************************************************************************************************************************************************************************************************************************/
/**
 * @file link-list-big.css
 *
 * @description
 * define link list big container with its elements
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* Will be fixed on a later state */
.c-link-list-big--category-list {
	display: block;
	margin-bottom: 2rem;
}

.c-link-list-big--category-headline {
	position: relative;
	border-bottom: 0.1rem solid var(--color-gray-300);
	padding: calc(1 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(1 * var(--base-line-height));
}

.c-link-list-big--category-headline::after {
	color: var(--color-red-500);
	content: var(--icon-chevron-down);
	font-size: 2rem;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	right: -0.3em; /* stylelint-disable-line unit-allowed-list */
	padding-right: calc(1.5 * var(--base-line-height));
}

.c-link-list-big--category.is-open .c-link-list-big--category-headline::after {
	content: var(--icon-chevron-up);
}

.c-link-list-big--category-headline.c-accordion--hitbox {
	cursor: default;
}

.c-link-list-big--category-headline p {
	font-size: var(--font-size-text-large);
	font-weight: 800;
	margin-bottom: 0;
	position: relative;
	padding-right: calc(3 * var(--base-line-height));
	text-transform: none;
	padding-top: 0;
}

.c-link-list-big--category-headline p span {
	content: var(--icon-plus);
	display: block;
	color: var(--color-red-500);
	float: right;
	padding-top: 0;
}

.c-link-list-big--category:first-child .c-link-list-big--category-headline {
	border-top: 0.1rem solid var(--color-gray-300);
}

.c-link-list-big--category-links {
	margin: 0;
}

.c-link-list-big--category-links .link-external-wide,
.c-link-list-big--category-links .link-internal-wide {
	padding-left: calc(1 * var(--base-line-height));
}

/* rtl:raw:
.c-link-list-big--category-links .link-external-wide a:after,
.c-link-list-big--category-links .link-internal-wide a:after{
    transform: translateY(-50%) rotateY(180deg);
}
*/

.c-link-list-big--category-links .has-icon {
	display: block;
	position: relative;
	padding-right: calc(1.5 * var(--base-line-height));
}

.c-link-list-big--category.is-open {
	background-color: transparent;
}

.c-link-list-big--category .c-link-list-big--category-headline {
	background-color: var(--color-gray-50);
	cursor: pointer;
}

.c-link-list-big--category.is-open .c-link-list-big--category-headline {
	border: none;
}

.c-link-list-big--category.is-open:first-child .c-link-list-big--category-headline {
	border-top: 0.1rem solid var(--color-gray-300);
}

.c-link-list-big--category.is-open p span {
	content: var(--icon-minus);
}

.c-link-list-big--button-container {
	padding-bottom: calc(3 * var(--base-line-height));
	padding-top: calc(1 * var(--base-line-height));
}

.c-link-list-big--copy {
	padding-bottom: calc(6 * var(--base-line-height));
}

.c-link-list-big > p {
	font-size: var(--font-size-text-large);
}

.c-link-list-big .link-external-wide a,
.c-link-list-big .link-internal-wide a {
	font-size: var(--font-size-text-small);
	font-weight: normal;
	line-height: var(--font-size-standard);
	overflow: visible;
}

.c-link-list-big h3 {
	text-transform: none;
	font-weight: normal;
	font-size: var(--font-size-text-large);
	line-height: calc(1.5 * var(--base-line-height));
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-link-list-big--category-links .link a::before {
	content: "";
	position: absolute;
	top: calc(-1.4rem - 0.1rem);
	right: calc(-0.5 * var(--base-line-height));
	bottom: calc(-1 * var(--base-line-height));
	left: calc(-1 * var(--base-line-height));
	display: block;
	width: auto;
	height: auto;
	border: 0.1rem solid transparent;
}

html:not(.is-touch) .c-link-list-big--category-links .link a:focus,
html:not(.is-touch) .c-link-list-big--category-links .link a:focus::after {
	color: var(--color-red-500);
}

html:not(.is-touch) .c-link-list-big--category-links .link a:focus::before {
	border-color: var(--color-black-500);
}

html:not(.is-touch) .c-link-list-big .link:focus-within {
	border: 0.1rem solid transparent;
}

.c-link-list-big h2 {
	margin-bottom: 1.4rem;
}

@media screen and (min-width: 768px),print {
	.c-link-list-big h2 {
		font-size: var(--font-size-h3-tablet);
	}

	.c-link-list-big--category-list {
		display: flex;
	}

	.c-link-list-big--category.l-grid--w-25pc-m {
		padding: 0 calc(1.5 * var(--base-line-height));
	}

	.c-link-list-big--category:first-child .c-link-list-big--category-headline {
		border-top: none;
	}

	.c-link-list-big--category-headline {
		border: none;
		padding: calc(1 * var(--base-line-height)) calc(0.5 * var(--base-line-height));
	}

	.c-link-list-big:first-child .c-link-list-big--category-headline {
		border-top: none;
	}

	.c-link-list-big--category {
		padding: 0 calc(2 * var(--base-line-height));
	}

	.c-link-list-big--category:first-child {
		padding-left: 0;
	}

	.c-link-list-big--category:last-child {
		padding-right: 0;
	}

	.c-link-list-big--category-headline p span {
		display: none;
	}

	.c-link-list-big--category p::after {
		display: none;
	}

	.c-link-list-big--category-links {
		display: block;
		height: auto;
	}

	.c-link-list-big--button-container {
		justify-content: center;
	}

	.c-link-list-big--button-container .base-button {
		margin: 0 calc((0.5 / var(--grid-units)) * 1 * 100vw);
		max-width: 32rem;
	}

	.c-link-list-big .link-external-wide a,
	.c-link-list-big .link-internal-wide a {
		word-break: break-word;
	}

	.c-link-list-big .base-button {
		margin-top: var(--base-line-height);
	}
}

/**
 * minor breakpoint "m-s"
 * @size 768 - 1023
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-link-list-big--category-links .link a::before {
		left: calc(-0.5 * var(--base-line-height));
	}

	.c-link-list-big--category-headline::after {
		content: "";
	}

	.c-link-list-big--category .c-link-list-big--category-headline {
		background-color: transparent;
	}

	.c-link-list-big--category-headline p {
		padding-right: calc(0.5 * var(--base-line-height));
	}

	.c-link-list-big--category.l-grid--w-25pc-m,
	.c-link-list-big--category.l-grid--w-33pc-m {
		padding: 0 calc(1.5 * var(--base-line-height));
	}

	.c-link-list-big--category-links .link-external-wide,
	.c-link-list-big--category-links .link-internal-wide {
		padding-left: calc(0.5 * var(--base-line-height));
	}

	.c-link-list-big .link-external-wide a,
	.c-link-list-big .link-internal-wide a {
		padding-right: var(--base-line-height);
	}

	.c-link-list-big .link-internalexternalafter,
	.c-link-list-big .link-internal-wide a::after {
		right: -0.3rem;
	}
}

@media screen and (min-width: 768px),print {
	.c-link-list-big--category-headline::after {
		content: "";
	}

	.c-link-list-big--category .c-link-list-big--category-headline {
		background-color: transparent;
		padding-bottom: calc(2 * var(--base-line-height));
	}

	.c-link-list-big--category-headline p {
		padding-right: calc(0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-link-list-big--category-links .link-external-wide,
	.c-link-list-big--category-links .link-internal-wide {
		padding-left: calc(0.5 * var(--base-line-height));
	}
}

@media screen and (max-width: 767px),print {
	.c-link-list-big--category-links .link a::before {
		left: calc(-0.5 * var(--base-line-height));
	}

	.c-link-list-big--category-links .link-internal-wide {
		line-height: 1.5rem;
		padding: 1.7rem 1.4rem;
	}
}

@media screen and (max-width: 479px), screen and (min-width: 480px) and (max-width: 665px) {
	.c-link-list-big h2 {
		line-height: 2.4rem;
		font-size: var(--font-size-h4);
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-link-list-big h2 {
		font-size: var(--font-size-7);
	}
}

/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/location-selector-dropdown/clientlib/css/location-selector-dropdown.css ***!
  \******************************************************************************************************************************************************************************************************************************************************/
.c-location-selector-dropdown {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* without JavaScript the component is not able to work so we hide it completely;
   implementing a fallback based on native <select> or <datalist> is
   theoretically possible, but goes far beyond this scope */
.no-js .c-location-selector-dropdown {
	display: none;
}

/* background-color:
   - default: white
   - optional: gray */
.c-location-selector-dropdown.bg-gray {
	padding-top: calc(2.5 * var(--base-line-height));
	padding-bottom: calc(2.5 * var(--base-line-height));
	background: var(--color-gray-50);
}

/* color:
   - default: black
   - optional: red */
.c-location-selector-dropdown--headline {
	margin: 0;
	text-align: center;
}

.c-location-selector-dropdown--rte-container {
	font-size: var(--font-size-text-large);
}

.c-location-selector-dropdown--rte-container:not(:first-child) {
	margin-top: var(--base-line-height);
}

.c-location-selector-dropdown--rte-container > :last-child {
	margin-bottom: 0;
}

.c-combobox:not(:first-child) {
	margin-top: calc(2.5 * var(--base-line-height));
}

.c-location-selector-dropdown--button-container {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--base-line-height);
	width: 100%;
}

/* alignment:
   - default: right
   - optional: centered */
.c-location-selector-dropdown--button.centered {
	margin: 0 auto;
}

@media screen and (min-width: 768px),print {
	.c-combobox,
	.c-location-selector-dropdown--button-container {
		max-width: 56rem;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-location-selector-dropdown--headline,
	.c-location-selector-dropdown--rte-container {
		max-width: 48rem;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-location-selector-dropdown--headline,
	.c-location-selector-dropdown--rte-container {
		max-width: 57.6rem;
	}
}

@media screen and (min-width: 1365px) {
	.c-location-selector-dropdown--headline,
	.c-location-selector-dropdown--rte-container {
		max-width: 76.8rem;
	}
}

/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/combobox/clientlib/css/combobox.css ***!
  \******************************************************************************************************************************************************************************************************************/
:root {

	/* keep these values in sync with combobox.js where you will find the same variables */
	--combobox-listbox-max-visible-items: 5;
	--combobox-listbox-item-height: calc(2.5 * var(--base-line-height));

	/* further variables */
	--combobox-input-padding-bottom: 1.5rem;
	--combobox-input-border-width: 0.2rem;
	--combobox-listbox-padding-bottom: calc(0.5 * var(--base-line-height));
}

.c-combobox {
	position: relative;
	width: 100%;
}

.c-combobox.listbox-visible {
	z-index: 1; /* listbox must always be on top of other following elements */
}

.c-combobox--input {
	appearance: none;
	padding: 1.7rem 3.9rem 1.6rem 1.2rem;
	border: 0.1rem solid var(--color-gray-500);
	border-radius: 0.4rem;
	cursor: text;
}

/* avoid blue highlighting in Internet Explorer and Edge */
.c-combobox--input::-ms-value {
	background: var(--color-white-500);
	color: var(--color-black-400);
}

.c-combobox--input:hover,
.c-combobox.focused .c-combobox--input {
	border-color: var(--color-black-500);
	background: var(--color-white-500) url(../assets/img/47cd1b3c5da8f5768ec8.svg) right 1.2rem center no-repeat;
	background-size: 2.1rem;
}

.c-combobox.focused .c-combobox--input {
	padding: 1.6rem 3.8rem var(--combobox-input-padding-bottom) 1.1rem;
	background-position: right 1.1rem top 2.3rem;
	border-width: var(--combobox-input-border-width);
}

.c-combobox.listbox-visible .c-combobox--input {
	padding-bottom: calc(var(--combobox-input-padding-bottom) + var(--combobox-input-border-width));
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.c-combobox--listbox {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	width: 100%;
	background: var(--color-white-500);
	border: var(--combobox-input-border-width) solid var(--color-black-500);
	border-top: 0;
	border-radius: 0.4rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	list-style: none;
	overflow-x: hidden;

	/* show scrollbar when maximum number of listbox items has been exceeded */
	max-height: calc(var(--combobox-listbox-max-visible-items) * var(--combobox-listbox-item-height) + var(--combobox-listbox-padding-bottom) + var(--combobox-input-border-width));
	overflow-y: auto;
}

.c-combobox:not(.listbox-visible) .c-combobox--listbox {
	display: none;
}

.c-combobox--listbox-item {
	display: flex;
	align-items: center;
	padding: 0 1.2rem;
	height: var(--combobox-listbox-item-height);
	white-space: pre; /* keep spaces around <b> tags */
	cursor: pointer;
	line-height: calc(1.5 * var(--base-line-height));
}

.c-combobox--listbox-item:last-child {
	margin-bottom: var(--combobox-listbox-padding-bottom);
}

.c-combobox--listbox-item:hover,
.c-combobox--listbox-item.active {
	background: var(--color-gray-200);
}

/* default styling for optional icons in the listbox items; in case of a
   property iconClasses in the source data of the combobox' data-listbox HTML
   attribute, the class .icon is automatically added to each listbox item; in
   addition, the custom classes defined in iconClasses are added as well and
   must be used to define a background-image and optionally also further styles
   for overwriting the default styles (if really required);

   please always define the custom CSS related to iconClasses in the CSS file of
   the respective component and not in this generic CSS file of the combobox */
.c-combobox--listbox-item.icon::before {
	content: "";
	flex: 0 0 auto;
	margin: -0.1rem calc(0.5 * var(--base-line-height)) 0 0;
	width: 1.6rem;
	height: 1.6rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 0.8rem;
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/marketing-stage/clientlib/css/marketing-stage.css ***!
  \********************************************************************************************************************************************************************************************************************************/
:root {

	/* headline */
	--marketing-stage-headline-font-size-tablet: 2.8rem;
	--marketing-stage-headline-line-height-tablet: 2.6rem;
	--marketing-stage-headline-font-size-desktop: 3.8rem;
	--marketing-stage-headline-line-height-desktop: 3.6rem;
	--marketing-stage-headline-font-size-desksmall-small: 2.9rem;
	--marketing-stage-headline-line-height-desksmall-small: 2.8rem;
	--marketing-stage-headline-font-size-desktop-large: 5.1rem;
	--marketing-stage-headline-line-height-desktop-large: 4.9rem;

	/* overline */
	--marketing-stage-overline-font-size-mobile-small: 1.7rem;
	--marketing-stage-overline-line-height-mobile-small: 1.6rem;
	--marketing-stage-overline-font-size-mobile-medium: 2.2rem;
	--marketing-stage-overline-line-height-mobile-medium: 2.1rem;
	--marketing-stage-overline-large-font-size-mobile-medium: 2.9rem;
	--marketing-stage-overline-large-line-height-mobile-medium: 2.8rem;
	--marketing-stage-overline-font-size-mobile-large: 2.5rem;
	--marketing-stage-overline-line-height-mobile-large: 2.4rem;
	--marketing-stage-overline-font-size-tablet: 2rem;
	--marketing-stage-overline-line-height-tablet: 1.9rem;
	--marketing-stage-overline-font-size-desktop: 2.7rem;
	--marketing-stage-overline-line-height-desktop: 2.6rem;
	--marketing-stage-overline-font-size-desktop-large: 3.6rem;
	--marketing-stage-overline-line-height-desktop-large: 3.5rem;

	/* slider control arrwowds */
	--marketing-stage-slider-control: 5.6rem;
}

.c-marketing-stage--container {
	position: relative;
}

.no-js .c-slider--navigation {
	display: none;
}

.c-marketing-stage .c-slider--index {
	margin-top: var(--base-line-height);
	height: auto;
}

.c-marketing-stage .c-slider--index li {
	position: relative;
	margin: 0.15rem calc(0.5 * var(--base-line-height));
	background-color: var(--color-gray-600);
}

.c-marketing-stage .c-slider--index li::before {
	content: "";
	position: absolute;
	top: 0.1rem;
	right: 0.1rem;
	width: 1rem;
	height: 1rem;
	background-color: var(--color-white-500);
	border-radius: 1rem;
}

.c-marketing-stage .c-slider--index .is-active {
	background-color: var(--color-white-500);
}

.c-marketing-stage .c-slider--index .is-active::before {
	background-color: var(--color-red-500);
}

.c-marketing-stage .c-slider--control.is-left {
	background: linear-gradient(to right, rgba(50, 50, 50, 0), rgba(50, 50, 50, 0));
	transition: background 2000ms, left 200ms;
}

.c-marketing-stage .c-slider--control.is-right {
	background: linear-gradient(to left, rgba(50, 50, 50, 0), rgba(0, 0, 0, 0));
	transition: background 2000ms, right 200ms;
}

.c-marketing-stage .c-slider--control.is-left:hover {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0));
}

.c-marketing-stage .c-slider--control.is-right:hover {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0));
}

.c-marketing-stage .c-slider--control span {
	color: var(--color-gray-300);
	opacity: 0.7;
	font-size: var(--marketing-stage-slider-control);
}

.c-marketing-stage .c-slider--control.is-left:hover span,
.c-marketing-stage .c-slider--control.is-right:hover span {
	color: var(--color-white-500);
	opacity: 1;
}

.c-marketing-stage .c-slider--control.is-right span::before {
	right: -0.4rem;
}

.c-marketing-stage .c-slider--control.is-left span::before {
	left: -0.4rem;
}

.c-marketing-stage--slide {
	opacity: 0;
	position: absolute;
	width: 100%;
	background-color: var(--color-white-500);
	z-index: 0;
	transition: opacity 750ms;
}

.c-marketing-stage--slide.is-active,
.no-js .c-marketing-stage--slide {
	opacity: 1;
	z-index: 1;
}

.is-editmode .c-marketing-stage--slide,
.no-js .c-marketing-stage--slide {
	position: relative;
}

.no-js .c-marketing-stage--slide:not(:last-child) {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-marketing-stage--slide img {
	display: block;
	width: 100%;
}

.c-marketing-stage--textbox {
	padding: 4.8rem calc(1.5 * var(--base-line-height)) 0;
	pointer-events: none; /* text box prevents the picture behind it from being clickable */
}

.c-marketing-stage--textbox a,
.c-marketing-stage--textbox .c-marketing-stage--headline,
.c-marketing-stage--textbox .link,
.c-marketing-stage--textbox .link-red,
.c-marketing-stage--textbox .base-button {
	pointer-events: auto; /* reset pointer events inside text box */
}

.c-marketing-stage--textbox > :last-child:not(.c-marketing-stage--buttons),
.c-marketing-stage--textbox > :last-child > :last-child:not(.base-button) {
	margin-bottom: 0;
}

.c-marketing-stage--buttons {
	margin-bottom: calc(-1 * var(--base-line-height));
}

/**
 * @cssfor ie <= 11
 * @descripton: ie does not recognize flexbox align-items: center when a min-height is used
 * so we need to fall back to padding and line height
 * bulletproof but unfortunately this breaks the horizontal grid on multiline buttons.
 * if the flex-box version causes probles, use this for all useragents - multiline will be rare
 * @bug
 * @type {[type]}
 */
_:fullscreen,
:root .c-marketing-stage--textbox .base-button span {
	line-height: calc(1.5 * var(--base-line-height));
}

.c-marketing-stage--headline {
	display: block;
	margin-bottom: calc(1.5 * var(--base-line-height));
	font-weight: 800;
	color: var(--color-red-500);
	text-transform: uppercase;
}

.c-marketing-stage--headline:hover {
	color: var(--color-red-500);
}

.c-marketing-stage--overline.overline {
	display: block;
	margin-bottom: 0;
	font-weight: 200;
}

@media screen and (max-width: 479px) {
	.c-marketing-stage--headline.level1 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-mobile-medium);
		line-height: var(--marketing-stage-overline-line-height-mobile-medium);
	}

	.c-marketing-stage--headline.level2 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-mobile-small);
		line-height: var(--marketing-stage-overline-line-height-mobile-small);
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-marketing-stage--headline.level1 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-large-font-size-mobile-medium);
		line-height: var(--marketing-stage-overline-large-line-height-mobile-medium);
	}

	.c-marketing-stage--headline.level2 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-mobile-medium);
		line-height: var(--marketing-stage-overline-line-height-mobile-medium);
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-marketing-stage--headline.level1 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-desktop-large);
		line-height: var(--marketing-stage-overline-line-height-desktop-large);
	}

	.c-marketing-stage--headline.level2 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-mobile-large);
		line-height: var(--marketing-stage-overline-line-height-mobile-large);
	}
}

@media screen and (min-width: 768px),print {
	.c-marketing-stage .c-slider--navigation,
	.c-media-gallery-carousel .c-slider--navigation {
		min-height: auto;
		position: static;
		margin: 0;
	}

	.c-marketing-stage .c-slider--index {
		bottom: var(--base-line-height);
		margin-top: 0;
	}

	.c-marketing-stage .c-slider--control.is-left span::before {
		left: -0.5rem;
	}

	.c-marketing-stage .c-slider--control.is-right span::before {
		right: -0.5rem;
	}

	.c-marketing-stage--textbox {
		display: block;
		position: absolute;
		top: calc(50% - (1.5rem + var(--base-line-height)) / 2); /* 1.5rem = dots, var(--base-line-height) = distance to bottom */
		transform: translateY(-50%);
		padding: calc(2 * var(--base-line-height));
		max-height: calc(100% - 1.5rem - 3 * var(--base-line-height)); /* 1.5rem = dots, 3 * var(--base-line-height) = distances to top, dots and bottom */
		line-height: calc(2.5 * var(--base-line-height));
		overflow: hidden;
	}

	.c-marketing-stage--headline,
	.c-marketing-stage--headline:hover {
		color: var(--color-white-500);
	}

	.c-marketing-stage--buttons .base-button:first-child:nth-last-child(2) {
		margin-right: var(--base-line-height);
	}

	.c-marketing-stage--textbox.has-background-50 {
		background-color: rgba(255, 255, 255, 0.5);
	}

	.c-marketing-stage--textbox.has-background-75 {
		background-color: rgba(255, 255, 255, 0.75);
	}

	.c-marketing-stage--textbox.has-background-50 .c-marketing-stage--headline,
	.c-marketing-stage--textbox.has-background-50 .c-marketing-stage--headline:hover,
	.c-marketing-stage--textbox.has-background-75 .c-marketing-stage--headline,
	.c-marketing-stage--textbox.has-background-75 .c-marketing-stage--headline:hover {
		color: var(--color-red-500);
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-marketing-stage .c-slider--control {
		width: calc(4.5 * var(--base-line-height)); /* prevent overlapping with textbox */
	}

	.c-marketing-stage--textbox {
		left: calc(4.5 * var(--base-line-height));
		max-width: calc(100% - 9 * var(--base-line-height));
	}

	.c-marketing-stage--textbox.is-right {
		left: auto;
		right: calc(4.5 * var(--base-line-height));
	}

	.c-marketing-stage--textbox.wide {
		max-width: calc(553 / 768 * 100%);
	}

	.c-marketing-stage--headline .level1 {
		font-size: var(--marketing-stage-headline-font-size-tablet);
		line-height: var(--marketing-stage-headline-line-height-tablet);
	}

	.c-marketing-stage--headline .level2 {
		font-size: var(--marketing-stage-overline-font-size-mobile-medium);
		line-height: var(--marketing-stage-overline-line-height-mobile-medium);
	}

	.c-marketing-stage--headline .level1 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-tablet);
		line-height: var(--marketing-stage-overline-line-height-tablet);
	}

	.c-marketing-stage--headline .level2 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-mobile-small);
		line-height: var(--marketing-stage-overline-line-height-mobile-small);
	}
}

@media screen and (min-width: 1024px),print {
	.c-marketing-stage .c-slider--control {
		width: calc(5.5 * var(--base-line-height));
	}

	.c-marketing-stage--textbox {
		left: calc(6 * var(--base-line-height));
		max-width: calc(448 / 1024 * 100%);
	}

	.c-marketing-stage--textbox.is-right {
		left: auto;
		right: calc(6 * var(--base-line-height));
	}

	.c-marketing-stage--textbox.wide {
		max-width: calc(718 / 1024 * 100%);
	}

	.c-marketing-stage--headline {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	.c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-desktop);
		line-height: var(--marketing-stage-overline-line-height-desktop);
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-marketing-stage--headline .level1 {
		font-size: var(--marketing-stage-headline-font-size-desktop);
		line-height: var(--marketing-stage-headline-line-height-desktop);
	}

	.c-marketing-stage--headline .level2 {
		font-size: var(--marketing-stage-headline-font-size-desksmall-small);
		line-height: var(--marketing-stage-headline-line-height-desksmall-small);
	}

	.c-marketing-stage--headline.level2 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-mobile-medium);
		line-height: var(--marketing-stage-overline-line-height-mobile-medium);
	}
}

@media screen and (min-width: 1365px) {
	.full-width-grid .c-marketing-stage {
		max-width: var(--width-page-max);
		margin-left: auto;
		margin-right: auto;
	}

	.c-marketing-stage--textbox {
		left: calc(8 * var(--base-line-height));
		max-width: calc(598 / 1365 * 100%);
	}

	.c-marketing-stage--textbox.is-right {
		left: auto;
		right: calc(8 * var(--base-line-height));
	}

	.c-marketing-stage--textbox.wide {
		max-width: calc(938 / 1365 * 100%);
	}

	.c-marketing-stage--headline.level1 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-desktop-large);
		line-height: var(--marketing-stage-overline-line-height-desktop-large);
	}

	.c-marketing-stage--headline.level2 > .c-marketing-stage--overline.overline {
		font-size: var(--marketing-stage-overline-font-size-mobile-large);
		line-height: var(--marketing-stage-overline-line-height-mobile-large);
	}
}

/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/masonry-layout/clientlib/css/masonry-layout.css ***!
  \******************************************************************************************************************************************************************************************************************************/
/* FIXME: Media queries must be updated urgently with regards to the 1px offset
		  between tablet and desktop! In the meantime, we need to use 2 temporary
		  custom media queries. */

/* stylelint-disable custom-media-pattern */
/* stylelint-enable custom-media-pattern */

/* Layout solution mostly based on:
   https://tobiasahlin.com/blog/masonry-with-css/ */

:root {

	/* item */
	--masonry-layout-item-gap: calc(1.5 * var(--base-line-height));

	/* tag */
	--masonry-layout-tag-font-size-mobile: 2.1rem;
	--masonry-layout-tag-line-height-mobile: 2.1rem;

	/* headline */
	--masonry-layout-headline-font-size-mobile: 2.2rem;
	--masonry-layout-headline-line-height-mobile: 2.8rem;
	--masonry-layout-headline-large-font-size-mobile: 4rem;
	--masonry-layout-headline-large-line-height-mobile: 4.3rem;
	--flippable-transition-duration: 600ms;
}

.c-masonry-layout {
	display: flex;
	flex-direction: column;
}

.c-masonry-layout--item {
	flex: 0 0 auto; /* important for IE11 */
	margin-bottom: var(--masonry-layout-item-gap);
	width: 100%;
	transition: 200ms;
	perspective: 90rem;
	transform-origin: 50% 50% 50%;
}

.c-masonry-layout--item,
.c-masonry-layout--teaser-card--img img,
.c-masonry-layout--teaser-card--img::after,
.c-masonry-layout--teaser-card--back {
	border-radius: 0.4rem;
}

html:not(.is-touch) .c-masonry-layout--item:not(.c-viewport-animation):not(.flipped):hover {
	box-shadow: 0 5rem 3rem -3.5rem rgba(0, 0, 0, 0.3);
	transform: scale(1.035);
	-webkit-font-smoothing: antialiased;
}

.c-masonry-layout--teaser-card {
	position: relative;
	transition: all var(--flippable-transition-duration);
	transform-style: preserve-3d;
}

.c-masonry-layout--teaser-card button.button-dummy::after,
.c-masonry-layout--teaser-card button.button-dummy.link-icon::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	border-radius: 0.4rem;
}

.c-masonry-layout--teaser-card button.button-dummy:focus::after,
.c-masonry-layout--teaser-card button.button-dummy.link-icon:focus::after,
.c-masonry-layout--teaser-card button.button-dummy:focus + .c-masonry-layout--teaser-card--back {
	border: 0.3rem solid var(--color-black-400);
}

.c-masonry-layout--teaser-card--back {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	transform: rotateY(180deg);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity var(--flippable-transition-duration);

	/* as this is an absolute div, we cannot apply the ::after for focused border
		instead, first we will apply initial border value and
		when it is focused only the border with color will be applied
	 */
	border: 0.3rem solid transparent;
}

/*
	all the actionable items needs be hidden to skip the focus events
	We could apply the whole backside but it would not look good
 */
.c-masonry-layout--teaser-card--back button,
.c-masonry-layout--teaser-card--back a {
	visibility: hidden;
}

.c-teaser-card-back-close {
	position: absolute;
	right: 0;
	z-index: 1;
}

.c-teaser-card-back-close.icon-cancel::before {
	font-size: 2.1rem;
}

.icon-svg-flip {
	background-image: url(../assets/img/0f3f7f31450e50235177.svg);
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 5rem;
	height: 5.4rem;
	z-index: 1;
	background-repeat: no-repeat;
}

/* rtl:raw:
.icon-svg-flip {
	transform: rotateY(180deg);
}
*/

/* By default do not show the backface  */
.c-masonry-layout--teaser-card--front,
.c-masonry-layout--teaser-card--back {
	width: 100%;
	backface-visibility: hidden;
}

.c-masonry-layout--teaser-card--back .text-bottom {
	flex: 1 auto;

	/* This is a hack for viewport between 880 to 1024
		When the card is flipped and
		In order to make the the backside of the card shows a transparent image,
		We make the front side of the card's backface visibility is visible
		In this case, front side is coming on top of back sided card which do not shows the back sided card.
		To fix, one of the child from the back side card needs to be is rotated again.

		Inspiration: https://stackoverflow.com/a/8506148
	 */
	transform: rotateY(0);
}

/* By default the backside background should be white */
.flippable-card-white .c-masonry-layout--teaser-card--back {
	background-color: var(--color-white-500);
}

.c-masonry-layout--teaser-card--front,
.c-masonry-layout--teaser-card--link {
	display: block;
	position: relative;
}

.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--front,
.c-masonry-layout--teaser-card--front *,
.c-masonry-layout--teaser-card--back .text-bottom {
	pointer-events: none;
}

.c-masonry-layout--teaser-card--back section:not(.text-bottom) {
	padding-top: calc(3 * var(--base-line-height));
}

.c-masonry-layout--teaser-card--back .text-bottom .base-button,
.c-masonry-layout--teaser-card--back .text-bottom ul:last-child,
.c-masonry-layout--teaser-card--back .text-bottom p:last-child {
	margin-bottom: 0;
}

/* When the card is flipped */
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card {
	transform: rotateY(180deg);
}

/* rtl:raw:
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card {
	transform: rotateY(-180deg);
}
*/

.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--back {
	box-shadow: 0 5.1rem 3.1rem -3.6rem rgba(0, 0, 0, 0.16), 0.2rem 1rem 10.3rem 0 rgba(0, 0, 0, 0.1);
	backface-visibility: visible;
	opacity: 1;
}

/* When it is flipped, make actionable items visible */
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--back button,
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--back a {
	visibility: visible;
	pointer-events: all;
}

.c-masonry-layout--teaser-card--front .c-masonry-layout--teaser-card--content,
.c-masonry-layout--teaser-card--front .icon-svg-flip,
.c-masonry-layout--teaser-card--img.overlay-white20::after,
.c-masonry-layout--teaser-card--img.overlay-white40::after,
.c-masonry-layout--teaser-card--img.overlay-black20::after,
.c-masonry-layout--teaser-card--img.overlay-black40::after {
	transition: all var(--flippable-transition-duration);
}

.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--back .c-masonry-layout--teaser-card--content,
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--back .c-masonry-layout--teaser-card--content > * {
	flex-shrink: 0;
}

/* When the card is flipped hide the icon and text content from the front side */
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--front .c-masonry-layout--teaser-card--content,
.c-masonry-layout--item.flipped .icon-svg-flip,
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--img.overlay-white20::after,
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--img.overlay-white40::after,
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--img.overlay-black20::after,
.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card--img.overlay-black40::after {
	opacity: 0;
}

/* When the card is flipped and DHL wall has configured as background white transparent 10 */
.flippable-card-white-10 .flipped .c-masonry-layout--teaser-card--back {
	background-color: rgba(255, 255, 255, 0.9);
}

.flippable-card-white-10 .flipped .c-masonry-layout--teaser-card--back .c-masonry-layout--teaser-card--content {
	background-color: unset;
}

html:not(.is-touch) .c-masonry-layout--teaser-card--link:focus {
	outline: var(--color-black-400) solid 0.3rem;
	outline-offset: -0.3rem;
}

.c-masonry-layout--teaser-card--img::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.c-masonry-layout--teaser-card--img.overlay-white20::after,
.c-masonry-layout--teaser-card--img.overlay-white40::after {
	background-color: var(--color-white-500);
}

.c-masonry-layout--teaser-card--img.overlay-black20::after,
.c-masonry-layout--teaser-card--img.overlay-black40::after {
	background-color: var(--color-black-500);
}

.c-masonry-layout--teaser-card--img.overlay-white20::after,
.c-masonry-layout--teaser-card--img.overlay-black20::after {
	opacity: 0.2;
}

.c-masonry-layout--teaser-card--img.overlay-white40::after,
.c-masonry-layout--teaser-card--img.overlay-black40::after {
	opacity: 0.4;
}

.c-masonry-layout--teaser-card--img img {
	display: block;
	width: 100%;
	height: auto;
}

.c-masonry-layout--item.flipped .c-masonry-layout--teaser-card .c-masonry-layout--teaser-card--img img {
	border-left: 0.1rem solid var(--color-white-500);
}

.c-masonry-layout--teaser-card--back .c-masonry-layout--teaser-card--content,
.c-masonry-layout--teaser-card--back .c-masonry-layout--teaser-card--content .has-rte {
	font-size: var(--body-font-size);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-masonry-layout--teaser-card--back .c-masonry-layout--teaser-card--content > h4 {
	margin-bottom: calc(var(--base-line-height) / 2);
	line-height: calc(2 * var(--base-line-height));
}

.c-masonry-layout--teaser-card--content {
	padding: calc(2 * var(--base-line-height)) calc(1.5 * var(--base-line-height)) calc(2.5 * var(--base-line-height));
	text-align: left;
	color: var(--color-black-400);
}

.c-masonry-layout--teaser-card--content.text-color-white {
	color: var(--color-white-500);
}

.c-masonry-layout--teaser-card--content.text-on-image {
	position: absolute;
	top: 0;
	padding-top: calc(2.5 * var(--base-line-height));
	width: 100%;
	height: 100%;
}

.c-masonry-layout--teaser-card--content:not(.text-on-image) {
	background-color: var(--color-white-500);
}

.c-masonry-layout--teaser-card--content.text-bottom {
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
}

.c-masonry-layout--teaser-card--content ul.list:not(.list-proof-check) {
	padding-left: calc(2.5 * var(--base-line-height));
}

.c-masonry-layout--teaser-card--tag {
	font-size: var(--masonry-layout-tag-font-size-mobile);
	line-height: var(--masonry-layout-tag-line-height-mobile);
	font-weight: 200;
	text-transform: uppercase;
	overflow: hidden;
}

.c-masonry-layout--teaser-card--headline {
	font-size: var(--masonry-layout-headline-font-size-mobile);
	line-height: var(--masonry-layout-headline-line-height-mobile);
	font-weight: 800;
	overflow: hidden;
}

.c-masonry-layout--teaser-card--headline.text-large {
	font-size: var(--masonry-layout-headline-large-font-size-mobile);
	line-height: var(--masonry-layout-headline-large-line-height-mobile);
}

.c-masonry-layout--teaser-card--headline:not(:first-child) {
	margin-top: calc(0.5 * var(--base-line-height));
}

@media screen and (min-width: 666px) and (max-width: 767px), screen and (min-width: 768px), print {
	.c-masonry-layout {
		flex-wrap: wrap;
	}

	/* Enforce a 2nd column (without that, columns would not show up in case of only
	   very little content) */
	.c-masonry-layout::before {
		content: "";
		flex-basis: 100%;
		width: 0;
		order: 2;
	}

	.c-masonry-layout--item {
		margin-right: var(--masonry-layout-item-gap);
	}

	.no-js .c-masonry-layout {
		flex-wrap: nowrap;
		align-items: center;
	}

	.no-js .c-masonry-layout--item {
		margin-right: 0;
	}

	.no-js .c-masonry-layout--item:nth-child(1n+1) {
		order: 0;
	}
}

/* Starting from mobile-large we need 2 columns */
@media screen and (min-width: 666px) and (max-width: 767px), screen and (min-width: 768px) and (max-width: 1024px) {
	.c-masonry-layout--item {
		width: calc(50% - (var(--masonry-layout-item-gap) / 2));
	}

	.c-masonry-layout--item:nth-child(odd) {
		order: 1;
	}

	.c-masonry-layout--item:nth-child(even) {
		order: 2;
		margin-right: 0;
	}
}

/* Starting from desktop-small we need 3 columns */
@media screen and (min-width: 1025px),print {

	/* Enforce a 3rd column (without that, columns would not show up in
	   case of only very little content) */
	.c-masonry-layout::after {
		content: "";
		flex-basis: 100%;
		width: 0;
		order: 2;
	}

	.c-masonry-layout--item {
		width: calc(100% / 3 - (2 * var(--masonry-layout-item-gap) / 3));
	}

	.c-masonry-layout--item:nth-child(3n+1) {
		order: 1;
	}

	.c-masonry-layout--item:nth-child(3n+2) {
		order: 2;
	}

	.c-masonry-layout--item:nth-child(3n+3) {
		order: 3;
		margin-right: 0;
	}
}

@media screen and (min-width: 768px),print {
	.c-masonry-layout--teaser-card--content {
		padding-right: calc(2.5 * var(--base-line-height));
	}
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/media-gallery/clientlib/css/media-gallery.css ***!
  \****************************************************************************************************************************************************************************************************************************/
.c-media-gallery {
	display: block;
	position: relative;
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-media-gallery.component-margin {
	margin-bottom: calc(3 * var(--base-line-height));
}

.c-media-gallery--header-section {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

body.black .c-media-gallery--header-section {
	color: var(--color-white-500);
}

.c-media-gallery-grid-tile {
	overflow: hidden;

	/* IE11 fix */
	width: 100%;
	margin-bottom: 0.4rem;
	height: 28.6rem;
}

.c-media-gallery-grid-tile .c-media-gallery-grid-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.c-media-gallery-grid-tile .icon-play-circle-legacy {
	font-size: 5.6rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: var(--color-white-500);
}

.c-media-gallery-grid-tile img {
	transition: 500ms ease-in-out;
}

html:not(.is-touch) .c-media-gallery-grid-tile:hover img {
	transform: scale(1.05) translateX(-47.5%);
}

.c-media-gallery-show-all {
	position: absolute;
	bottom: -3rem;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
}

.c-media-gallery-show-all span {
	pointer-events: none;
}

.c-media-gallery-grid {
	display: flex;
}

.c-media-gallery:not(.showall) .grid-tile:nth-child(n+7) {
	display: none;
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-media-gallery-grid-tile {
		width: calc(33% - 0.4rem);
		margin-right: 0.4rem;
		height: calc((100vw - 4.2rem) / 3);
	}
}

@media screen and (min-width: 768px),print {
	.c-media-gallery-grid-tile {
		width: calc(33% - 0.4rem);
		margin-right: 0.4rem;
		height: calc((100vw - 8.4rem) / 3);
	}
}

@media screen and (min-width: 1365px) {
	.c-media-gallery-grid-tile {
		width: calc(33% - 0.4rem);
		height: calc((119.7rem - 0.4rem) / 3);
	}
}

@media screen and (max-width: 479px) {
	.c-media-gallery-grid {
		padding-left: calc((100% - 27.8rem) / 2);
		padding-right: calc((100% - 27.8rem) / 2);
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-media-gallery-grid {
		padding-left: calc((100% - 28.6rem) / 2);
		padding-right: calc((100% - 28.6rem) / 2);
	}
}

@media screen and (min-width: 768px),print {
	.c-media-gallery-grid-tile .icon-play-circle-legacy {
		font-size: 7rem;
	}
}

@supports (display: grid) {

	/* CSS Grid Layout is used via progressive enhancement so autoprefixing needs to
	   be disabled for this feature inside of the @supports block;
	   autoprefixer grid: off */

	.c-media-gallery-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: calc(28.6rem / 2);
		grid-gap: 0.4rem;
		grid-auto-flow: row dense;
	}

	.c-media-gallery:not(.showall) .grid-tile:nth-child(7) {
		display: block;
	}

	.c-media-gallery:not(.showall) .grid-tile:nth-child(n+5) {
		display: none;
	}

	.grid-tile:nth-child(14n+1),
	.grid-tile:nth-child(14n+5) {
		grid-column: span 2;
	}

	.grid-tile:nth-child(14n+2),
	.grid-tile:nth-child(14n+9) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.grid-tile:nth-child(14n+8),
	.grid-tile:nth-child(14n+12) {
		grid-column: span 2;
	}

	.c-media-gallery-grid-tile {
		width: 100%;
		height: 100%;
		margin-right: 0;
		margin-bottom: 0;
	}

	html:not(.is-touch) .c-media-gallery-grid-tile:hover img {
		transform: scale(1.05);
	}

	@media screen and (min-width: 666px) and (max-width: 767px) {
		.c-media-gallery-grid {
			grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: calc((100vw - 4.2rem) / 4);
		}

		.c-media-gallery:not(.showall) .grid-tile:nth-child(5),
		.c-media-gallery:not(.showall) .grid-tile:nth-child(6),
		.c-media-gallery:not(.showall) .grid-tile:nth-child(7) {
			display: block;
		}

		.c-media-gallery:not(.showall) .grid-tile:nth-child(n+8) {
			display: none;
		}

		.grid-tile:nth-child(14n+8),
		.grid-tile:nth-child(14n+12) {
			grid-column: 3 / span 2;
		}

		.grid-tile:nth-child(14n+3),
		.grid-tile:nth-child(14n+13) {
			grid-column: 2;
		}
	}

	@media screen and (min-width: 768px),print {
		.c-media-gallery-grid {
			grid-auto-rows: calc((100vw - 8.4rem) / 4);
			grid-template-columns: repeat(4, 1fr);
		}

		.c-media-gallery:not(.showall) .grid-tile:nth-child(5),
		.c-media-gallery:not(.showall) .grid-tile:nth-child(6),
		.c-media-gallery:not(.showall) .grid-tile:nth-child(7) {
			display: block;
		}

		.c-media-gallery:not(.showall) .grid-tile:nth-child(n+8) {
			display: none;
		}

		.grid-tile:nth-child(14n+8),
		.grid-tile:nth-child(14n+12) {
			grid-column: 3 / span 2;
		}

		.grid-tile:nth-child(14n+3),
		.grid-tile:nth-child(14n+13) {
			grid-column: 2;
		}
	}

	@media screen and (min-width: 1365px) {
		.c-media-gallery-grid {
			grid-auto-rows: calc(119.7rem / 4);
		}
	}
}

/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/media-gallery-carousel/clientlib/css/media-gallery-carousel.css ***!
  \**********************************************************************************************************************************************************************************************************************************************/
.c-media-gallery-carousel-wrapper {
	max-width: 192rem;
	width: 100%;
}

.c-media-gallery-carousel {
	display: block;
	text-align: center;
	padding-top: calc(2.5 * var(--base-line-height));
	overflow: hidden;
}

.c-media-gallery-carousel--container {
	position: relative;
	display: block;
	height: auto !important; /* stylelint-disable-line declaration-no-important */
}

.c-media-gallery-carousel--viewport {
	position: relative;
	width: auto;
}

.c-media-gallery-carousel--headline {
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-media-gallery-carousel--headline-container {
	margin-bottom: calc(2.5 * var(--base-line-height));
	text-align: center;
}

body.black .c-media-gallery-carousel--headline-container,
body.black .c-media-gallery-carousel-copy {
	color: var(--color-white-500);
}

.c-media-gallery-carousel--tile {
	position: relative;
	padding-right: 0.3rem;
	margin-top: 0.8rem;
	color: var(--color-black-400);
	display: block;
	cursor: pointer;
}

.c-media-gallery-carousel--tile em {
	position: absolute;
	left: 0.8rem;
	top: 0.8rem;
	color: var(--color-white-500);
	pointer-events: none;
}

.c-media-gallery-carousel--tile:hover::after,
.c-media-gallery-carousel--tile.active::after {
	content: "";
	width: calc(100% - 0.3rem);
	height: 0.4rem;
	position: absolute;
	top: -0.8rem;
	left: 0;
	background-color: var(--color-red-500);
}

.c-media-gallery-carousel--tile picture {
	height: 100%;
	width: 100%;
	display: block;
	overflow: hidden;
	pointer-events: none;
}

.c-media-gallery-carousel--tile img {
	overflow: hidden;
	height: 100%;
	pointer-events: none;
}

.c-media-gallery-carousel--tile-text-content {
	padding: var(--base-line-height);
	position: relative;
}

.c-media-gallery-carousel .c-slider--index {
	margin: calc(2 * var(--base-line-height)) 0 0 0;
}

.c-media-gallery-carousel .c-slider--index li {
	height: 0.8rem;
	width: 0.8rem;
	box-sizing: border-box;
	border: 0.1rem solid var(--color-gray-500);
	background-color: var(--color-gray-200);
}

.c-media-gallery-carousel .c-slider--index .is-active {
	border: 0.1rem solid var(--color-red-400-4);
	background-color: var(--color-red-500);
	transform: none;
}

.c-media-gallery-carousel .c-slider--control span {
	font-size: calc(6.5 * var(--base-line-height));
}

.c-media-gallery-carousel--slider {
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	transition: left 400ms, margin-left 200ms;
}

.c-media-gallery-carousel--detail-container {
	margin-top: calc(0.3 * var(--base-line-height));
}

.c-media-gallery-carousel-copy {
	text-align: left;
	margin-top: calc(1 * var(--base-line-height));
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-media-gallery-carousel--detail-item:not(.active) {
	display: none;
}

.c-media-gallery-carousel--detail-item img {
	width: 100%;
}

.c-media-gallery-carousel--detail-item h5 {
	margin-bottom: calc(0.5 * var(--base-line-height));
	font-weight: bold;
}

.c-media-gallery-carousel--button-wrapper a:first-child {
	margin-left: calc(1.5 * var(--base-line-height));
}

.c-media-gallery-carousel--button-wrapper a:not(.c-media-gallery-carousel--link) span {
	font-weight: normal;
	padding-left: 1rem;
}

.c-media-gallery-carousel--link {
	display: flex;
}

.c-media-gallery-carousel--link span {
	font-weight: normal;
	padding: 0.2rem 0 0;
}

.c-media-gallery-carousel--link span.c-media-gallery-carousel--link-text {
	font-weight: bold;
	padding-right: 1rem;
}

.c-media-gallery-carousel--link span.c-media-gallery-carousel--link-file-size {
	padding-left: 0.4rem;
}

.c-media-gallery-carousel--button-wrapper a::before {
	padding-right: 1rem;
	top: 0.2rem;
}

.c-media-gallery-carousel--button-wrapper {
	flex-direction: row-reverse;
	width: 100%;
}

.c-media-gallery-carousel .c-slider-navigation--csb .c-slider-control--csb.is-left,
.c-media-gallery-carousel .c-slider-navigation--csb .c-slider-control--csb.is-right {
	font-size: 4.2rem;
	pointer-events: all;
}

.c-media-gallery-carousel--tile-copy {
	display: none;
	width: calc(100% - 0.3rem);
}

@media screen and (max-width: 479px), screen and (min-width: 480px) and (max-width: 665px) {
	.c-media-gallery-carousel--button-wrapper > a:not(:last-child) {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (max-width: 767px),print {
	.c-media-gallery-carousel .c-slider-navigation-wrapper--csb {
		display: none;
	}
}

/* (min-width: 768px) */

@media screen and (min-width: 768px),print {
	.c-media-gallery-carousel .c-slider-navigation-wrapper--csb {
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
	}

	.c-media-gallery-carousel--slider-wrapper {
		width: 100%;
		overflow-x: hidden;
	}

	.c-media-gallery-carousel--tile-text-content {
		padding: calc(1.5 * var(--base-line-height));
	}

	.c-media-gallery-carousel--slider {
		pointer-events: none;
	}

	a.c-media-gallery-carousel--tile {
		pointer-events: auto;
		margin-top: 1.3rem;
	}

	.c-media-gallery-carousel--detail-container {
		margin-top: calc(0.5 * var(--base-line-height));
	}

	.c-media-gallery-carousel-copy {
		margin-top: calc(1.5 * var(--base-line-height));
		margin-bottom: 0;
	}

	.c-media-gallery-carousel .c-slider-navigation--csb .c-slider-control--csb.is-right {
		right: 6.5%;
		top: 7.8vw;
	}

	.c-media-gallery-carousel .c-slider-navigation--csb .c-slider-control--csb.is-left {
		left: 6.5%;
		top: 7.8vw;
	}

	.c-media-gallery-carousel--tile:hover::after,
	.c-media-gallery-carousel--tile.active::after {
		height: 0.6rem;
		top: -1.3rem;
	}

	.c-media-gallery-carousel--tile-copy {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: calc(0.5 * var(--base-line-height));
		font-size: var(--font-size-0);
		color: var(--color-white-500);
		line-height: calc(var(--font-size-0) + 0.1rem);
		font-weight: bold;
		margin-bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		pointer-events: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	html:not(.full-width-grid) .c-media-gallery-carousel .component-medium {
		padding-left: var(--component-wide-padding-m);
		padding-right: var(--component-wide-padding-m);
	}

	.c-media-gallery-carousel .c-slider-navigation--csb .c-slider-control--csb.is-right {
		right: 0.2%;
		top: 9.2vw;
	}

	.c-media-gallery-carousel .c-slider-navigation--csb .c-slider-control--csb.is-left {
		left: 0.2%;
		top: 9.2vw;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	html:not(.full-width-grid) .c-media-gallery-carousel .component-medium {
		padding-left: calc(((100% - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-m)) / 12 ) + var(--component-wide-padding-m) + var(--grid-col-gap));
		padding-right: calc(((100% - var(--grid-col-gap-11) - 2 * var(--component-wide-padding-m)) / 12 ) + var(--component-wide-padding-m) + var(--grid-col-gap));
	}
}

@media screen and (min-width: 1365px) {
	.c-media-gallery-carousel .c-slider-navigation--csb .c-slider-control--csb.is-right {
		right: 16.5%;
		top: 8rem;
	}

	.c-media-gallery-carousel .c-slider-navigation--csb .c-slider-control--csb.is-left {
		left: 16.5%;
		top: 8rem;
	}
}

/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/media-gallery-slider/clientlib/css/media-gallery-slider.css ***!
  \******************************************************************************************************************************************************************************************************************************************/
.left-aligned-grid .c-media-gallery-carousel--headline-container {
	text-align: left;
}

.left-aligned-grid.full-width-grid .c-media-gallery-slider--tile-text-content {
	text-align: left;
	padding-left: 0;
	padding-right: 0;
}

.left-aligned-grid .c-media-gallery-slider-wrapper .c-media-gallery-carousel--button-wrapper a:only-child {
	margin-left: 0;
}

.left-aligned-grid .c-media-gallery-slider-wrapper .c-media-gallery-carousel--button-wrapper {
	justify-content: flex-end;
}

.left-aligned-grid .c-media-gallery-slider-wrapper .c-slider-navigation--csb button.c-slider-control--csb.is-right {
	right: 1.4rem;
}

.left-aligned-grid .c-media-gallery-slider-wrapper .c-slider-navigation--csb button.c-slider-control--csb.is-left {
	left: 1.4rem;
}

.left-aligned-grid .c-media-gallery-slider-wrapper .c-slider-navigation--csb .c-slider-control--csb:focus,
.left-aligned-grid .c-media-gallery-slider-wrapper .c-slider-navigation--csb .c-slider-control--csb:hover:focus {
	color: var(--color-white-500);
}

.c-media-gallery-slider-wrapper {
	width: 100%;
}

.c-media-gallery-slider {
	display: block;
	text-align: center;
	padding-bottom: calc(3 * var(--base-line-height));
	overflow: hidden;
}

.c-media-gallery-slider--container {
	position: relative;
}

.c-media-gallery-slider--viewport {
	position: relative;
	width: auto;
}

.c-media-gallery-slider--tile {
	position: relative;
	max-width: calc(100vw - 4.2rem);
	min-height: calc((22 * var(--base-line-height)) + 0.3rem);
	border-radius: 0.4rem;
	background-color: var(--color-white-500);
	margin-right: calc(0.5 * var(--base-line-height));
	color: var(--color-black-400);
}

/* The last slider tile should NOT have a margin right */
.c-media-gallery-slider--tile:last-child {
	margin-right: 0;
}

.c-media-gallery-slider--tile img {
	width: 100%;
}

.c-media-gallery-slider--tile-text-content {
	padding: var(--base-line-height);
	text-align: center;
	position: relative;
}

.c-media-gallery-slider--tile-text-content h5 {
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.left-aligned-grid .c-media-gallery-slider--tile-text-content > h5 {
	font-size: var(--font-size-text-large);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-media-gallery-slider--container .c-slider-navigation--csb {
	width: 100%;
}

.c-media-gallery-slider .c-slider--index {
	margin: calc(2 * var(--base-line-height)) 0 0 0;
}

.c-media-gallery-slider .c-slider--index li {
	height: 0.8rem;
	width: 0.8rem;
	box-sizing: border-box;
	border: 0.1rem solid var(--color-gray-500);
	background-color: var(--color-gray-200);
	flex-shrink: 0;
}

.c-media-gallery-slider .c-slider--index .is-active {
	border: 0.1rem solid var(--color-red-400-4);
	background-color: var(--color-red-500);
	transform: none;
}

.c-media-gallery-slider .c-slider--control span {
	font-size: calc(6.5 * var(--base-line-height));
}

.c-media-gallery-slider .c-slider--control span::before {
	transition: right 250ms ease, left 250ms ease;
}

.c-media-gallery-slider--slider {
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	transition: left 400ms, margin-left 200ms;
}

.c-media-gallery-slider .c-media-gallery-slider--video-element {
	height: auto;
	position: relative;
	width: 100%;
}

.c-media-gallery-slider .c-video {
	margin-bottom: 0;
}

.c-media-gallery-slider--tile-copy {
	font-size: var(--font-size-text-large);
	line-height: calc(1.5 * var(--base-line-height) + 0.4rem);
}

.c-media-gallery-slider.carousel .c-media-gallery-slider--tile-copy {
	font-size: var(--font-size-standard);
	line-height: calc(1.5 * var(--base-line-height));
	text-align: left;
}

.left-aligned-grid .c-media-gallery-slider.carousel .c-media-gallery-slider--tile-copy,
.left-aligned-grid .c-media-gallery-slider--tile-copy {
	font-size: var(--font-size-2);
	line-height: calc(2 * var(--base-line-height));
}

.c-media-gallery-slider .c-slider-navigation-wrapper--csb {
	position: absolute;
	width: calc(100% - 4.2rem);
	top: 25vw;
}

.c-media-gallery-slider .c-slider-wrapper {
	display: none;
}

.c-media-gallery-slider .c-slider-navigation--csb .c-slider-control--csb {
	position: absolute;
	z-index: 1;
	margin: 0;
}

/* rtl:raw:
.c-media-gallery-slider .c-slider-navigation--csb .c-slider-control--csb {
  transform: rotateY(180deg);
} */

.c-media-gallery-slider .c-slider-navigation--csb .c-slider-control--csb.is-left {
	left: calc(1 * var(--base-line-height));
}

.c-media-gallery-slider .c-slider-navigation--csb .c-slider-control--csb.is-right {
	right: calc(1 * var(--base-line-height));
}

@media screen and (max-width: 479px), screen and (min-width: 480px) and (max-width: 665px) {
	.left-aligned-grid .c-media-gallery-slider-wrapper .c-media-gallery-carousel--button-wrapper a:first-child {
		margin-left: 0;
	}

	.left-aligned-grid .c-media-gallery-slider-wrapper .c-media-gallery-carousel--button-wrapper a {
		width: 100%;
	}

	.c-media-gallery-slider--tile {
		min-height: 0;
		height: auto;
	}

	.c-media-gallery-slider--tile-text-content {
		padding: var(--base-line-height);
	}
}

@media screen and (max-width: 767px),print {
	.c-media-gallery-slider .c-slider-navigation-wrapper--csb {
		margin-top: calc(0 * var(--base-line-height));
	}
}

/* (min-width: 768px) */

@media screen and (min-width: 768px),print {
	.c-media-gallery-slider {
		padding-bottom: calc(3 * var(--base-line-height));
	}

	.c-media-gallery-slider--tile {
		max-width: calc(100vw - 8.4rem);
		min-height: calc((28 * var(--base-line-height)) + 1rem);
		margin-right: var(--base-line-height);
	}

	.c-media-gallery-slider--tile-text-content {
		padding: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-media-gallery-slider--tile-text-content > h5 {
		font-size: var(--font-size-4);
		line-height: calc(2 * var(--base-line-height));
	}

	.c-media-gallery-slider--tile-tagline {
		font-size: calc(1.5 * var(--base-line-height));
		line-height: calc(1.5 * var(--base-line-height));
		bottom: calc(1.5 * var(--base-line-height));
		padding: 0 calc(1.5 * var(--base-line-height));
	}

	.c-media-gallery-slider .c-slider-navigation-wrapper--csb {
		width: calc(100% - 8.4rem);
	}
}

@media screen and (min-width: 1024px),print {
	.c-media-gallery-slider--tile {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid.full-width-grid .component-small.c-media-gallery-slider--tile-text-content {
		padding-right: calc(var(--grid-cols-3) + var(--grid-col-gap));
		padding-left: 0;
	}
}

@media screen and (min-width: 1365px) {
	.c-media-gallery-slider--tile {
		max-width: 119.7rem;
	}

	html:not(.full-width-grid) .component-small.c-media-gallery-slider--tile-text-content,
	.full-width-grid .component-small.c-media-gallery-slider--tile-text-content {
		max-width: var(--width-page-max-nopadding-small);
		padding-left: 0;
		padding-right: 0;
		margin: auto;
	}

	html:not(.full-width-grid) .c-media-gallery-slider--container {
		max-width: var(--width-page-max);
		padding-left: calc(6 * var(--base-line-height));
		padding-right: calc(6 * var(--base-line-height));
		margin-left: auto;
		margin-right: auto;
	}

	.c-media-gallery-slider .c-slider-navigation-wrapper--csb {
		width: calc(100% - 16.8rem);
		top: 33rem;
	}

	.left-aligned-grid.full-width-grid .component-small.c-media-gallery-slider--tile-text-content {
		max-width: 100%;
	}
}

/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/media-tiles/clientlib/css/media-tiles.css ***!
  \************************************************************************************************************************************************************************************************************************/
/* please note: .text-top-aligned and .text-left-aligned are usually set in the
   .c-media-tiles container but since this is a sub(!)-component these classes
   could theoretically also be set outside in (the container of) some wrapping
   component */
/* please note: columns and tile type number represent most of the styles; tile type text
   and image inherit most of these styles; extra styles for tile type text and image are
   always introduced with a respective comment line */
/* as a rule of thumb: margin and width is controlled by the columns, padding and height
   by the tiles (exceptions proof the rule) */

:root {

	/* generic tile/column */
	--media-tiles-tile-size-tablet: 27.3rem;
	--media-tiles-tile-size-tablet-narrow: 21.4rem;
	--media-tiles-tile-size-desktop: 29.9rem;
	--media-tiles-tile-size-desktop-large: 38.5rem;
	--media-tiles-tile-size-desktop-large-narrow: 28.4rem;

	/* tile type number - title */
	--media-tiles-tile-type-number-title-font-size-mobile: 4.1rem;
	--media-tiles-tile-type-number-title-line-height-mobile: 3.8rem;
	--media-tiles-tile-type-number-title-small-font-size-mobile: 2.6rem;
	--media-tiles-tile-type-number-title-small-line-height-mobile: 2.3rem;
	--media-tiles-tile-type-number-title-small-font-size-tablet: 2.1rem;
	--media-tiles-tile-type-number-title-small-line-height-tablet: 2rem;
	--media-tiles-tile-type-number-title-small-font-size-desktop-small: 3.5rem;
	--media-tiles-tile-type-number-title-small-line-height-desktop-small: 3.3rem;
	--media-tiles-tile-type-number-title-large-font-size-mobile: 6rem;
	--media-tiles-tile-type-number-title-large-line-height-mobile: 5.8rem;
	--media-tiles-tile-type-number-title-font-size-tablet-narrow: 3.4rem;
	--media-tiles-tile-type-number-title-line-height-tablet-narrow: 3.2rem;
	--media-tiles-tile-type-number-title-large-font-size-tablet-narrow: 5rem;
	--media-tiles-tile-type-number-title-large-line-height-tablet-narrow: 4.8rem;
	--media-tiles-tile-type-number-title-font-size-desktop: 4.8rem;
	--media-tiles-tile-type-number-title-line-height-desktop: 4.5rem;
	--media-tiles-tile-type-number-title-large-font-size-desktop: 7rem;
	--media-tiles-tile-type-number-title-large-line-height-desktop: 6.8rem;
	--media-tiles-tile-type-number-title-font-size-desktop-large-narrow: 4.1rem;
	--media-tiles-tile-type-number-title-line-height-desktop-large-narrow: 3.8rem;
	--media-tiles-tile-type-number-title-large-font-size-desktop-large-narrow: 6rem;
	--media-tiles-tile-type-number-title-large-line-height-desktop-large-narrow: 5.8rem;

	/* tile type number - copy */
	--media-tiles-tile-type-number-copy-font-size-mobile: 1.6rem;
	--media-tiles-tile-type-number-copy-line-height-mobile: 1.8rem;
	--media-tiles-tile-type-number-copy-font-size-mobile-large: 2.2rem;
	--media-tiles-tile-type-number-copy-line-height-mobile-large: 2.4rem;
	--media-tiles-tile-type-number-copy-font-size-tablet-narrow: 1.6rem;
	--media-tiles-tile-type-number-copy-line-height-tablet-narrow: 1.8rem;
	--media-tiles-tile-type-number-copy-font-size-desktop: 2.2rem;
	--media-tiles-tile-type-number-copy-line-height-desktop: 2.4rem;
	--media-tiles-tile-type-number-copy-medium-font-size-tablet: 1.4rem;
	--media-tiles-tile-type-number-copy-small-font-size-tablet: 1.3rem;
	--media-tiles-tile-type-number-copy-small-font-size: 1.5rem;
	--media-tiles-tile-type-number-copy-small-line-height: 1.7rem;

	/* tile type text - copy */
	--media-tiles-tile-type-text-copy-font-size-mobile: 2rem;
	--media-tiles-tile-type-text-copy-line-height-mobile: 3.2rem;
	--media-tiles-tile-type-text-copy-small-line-height-mobile: 2.2rem;
	--media-tiles-tile-type-text-copy-small-font-size: 1.5rem;
	--media-tiles-tile-type-text-copy-small-line-height: 2.1rem;
}

.c-media-tiles,
.c-media-tiles--column {
	display: flex;
	flex-direction: column;
}

.c-media-tiles {
	position: relative;
}

.c-media-tiles--column {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-media-tiles--column:last-child {
	margin: 0;
}

body.black .c-media-tiles--tile.bg-transparent {
	color: var(--color-white-500);
}

body.black .c-media-tiles--tile.bg-transparent .c-media-tiles--tile-dash {
	background-color: var(--color-white-500);
}

.c-media-tiles--tile {
	padding: calc(2.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
	background: var(--linear-gradient-yellow-to-bottom);
}

.c-media-tiles--tile.bg-gray {
	background: var(--color-gray-50);
}

.c-media-tiles--tile-type-image.bg-green,
.c-media-tiles--tile-type-number.bg-green,
.c-media-tiles--tile-type-text.bg-green {
	background: var(--color-green-600);
}

.c-media-tiles--tile.bg-transparent {
	background: none;
}

.c-media-tiles--tile-type-number.uppercase {
	text-transform: uppercase;
}

/* please note that transparent tiles can be considered an edge case from a
   design perspective (the missing background would look like too big spacing
   around the content with the normal styling) */
.c-media-tiles--tile.bg-transparent.collapsible {

	/* other than the styles below, this style changes depending on the viewport
	   size and should therefore not be extended with the !important rule */
	margin-bottom: calc(2 * var(--base-line-height));

	/* the following styles must be applied to transparent tiles in any case; in
	   order to avoid writing many partially very long additional selectors for all
	   the different viewport sizes, we use !important exceptionally */
	/* stylelint-disable declaration-no-important */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
	/* stylelint-enable declaration-no-important */
}

.c-media-tiles--headline {
	font-size: var(--media-tiles-tile-type-text-copy-font-size-mobile);
	line-height: var(--media-tiles-tile-type-text-copy-small-line-height-mobile);
	font-weight: 800;
	margin-bottom: var(--base-line-height);
	text-align: center;
	color: var(--color-red-500);
}

.c-media-tiles--column:last-child .c-media-tiles--tile.bg-transparent.collapsible {
	margin: 0;
}

.text-left-aligned .c-media-tiles--tile.bg-transparent.collapsible {
	padding-right: calc(3 * var(--base-line-height));
	padding-left: 0;
}

.c-media-tiles--tile-title,
.c-media-tiles--tile-copy,
.c-media-tiles--tile-rte-container p {
	margin-bottom: 0;
	font-weight: 800;
	text-align: center;
}

.c-media-tiles--tile-rte-container {
	color: var(--color-red-500);
}

.text-left-aligned .c-media-tiles--tile-title,
.text-left-aligned .c-media-tiles--tile-copy,
.text-left-aligned .c-media-tiles--tile-rte-container p,
.text-left-aligned .c-media-tiles--headline {
	text-align: left;
}

.c-media-tiles--tile-title {
	font-size: var(--media-tiles-tile-type-number-title-font-size-mobile);
	line-height: var(--media-tiles-tile-type-number-title-line-height-mobile);
	color: var(--color-red-500);
}

.c-media-tiles--tile-title.text-large {
	font-size: var(--media-tiles-tile-type-number-title-large-font-size-mobile);
	line-height: var(--media-tiles-tile-type-number-title-large-line-height-mobile);
}

.c-media-tiles--tile-title.text-black,
.c-media-tiles--tile-rte-container .text-black {
	color: var(--color-black-400);
}

.c-media-tiles--tile-title.text-green,
.c-media-tiles--tile-rte-container .text-green,
.c-media-tiles--headline.text-green {
	color: var(--color-green-600);
}

.c-media-tiles--headline.text-black {
	color: var(--color-black-400);
}

.c-media-tiles--tile-rte-container .text-white,
.c-media-tiles--tile-title.text-white,
.c-media-tiles--tile-copy.text-white,
.c-media-tiles--headline.text-white {
	color: var(--color-white-500);
}

.c-media-tiles--tile-copy,
.c-media-tiles--tile-rte-container p {
	font-size: var(--media-tiles-tile-type-number-copy-font-size-mobile);
	line-height: var(--media-tiles-tile-type-number-copy-line-height-mobile);
}

.c-media-tiles--tile-copy.text-medium {
	font-size: var(--media-tiles-tile-type-number-copy-line-height-tablet-narrow);
	line-height: var(--media-tiles-tile-type-text-copy-font-size-mobile);
}

.c-media-tiles--tile-copy.text-small {
	font-size: var(--media-tiles-tile-type-number-copy-small-font-size);
	line-height: var(--media-tiles-tile-type-number-copy-small-line-height);
}

.c-media-tiles--tile-copy:not(:first-child),
.c-media-tiles--tile-rte-container p:not(:first-child) {
	margin-top: calc(0.5 * var(--base-line-height));
}

.c-media-tiles--tile-dash {
	margin: 0 auto;
	width: calc(6 * var(--base-line-height));
	height: 0.3rem;
	background-color: var(--color-black-400);
}

.c-media-tiles--tile-dash:not(:first-child) {
	margin-top: calc(2.5 * var(--base-line-height));
}

.c-media-tiles--tile-dash.dash-white {
	background-color: var(--color-white-500);
}

.text-left-aligned .c-media-tiles--tile-dash {
	margin-left: 0;
}

/* extra styles for tile type text */
.c-media-tiles--tile-type-text .c-media-tiles--tile-rte-container p {
	font-size: var(--media-tiles-tile-type-text-copy-font-size-mobile);
	line-height: var(--media-tiles-tile-type-text-copy-line-height-mobile);
	font-weight: normal;
	text-transform: none;
}

.c-media-tiles--tile-type-text .c-media-tiles--tile-rte-container.text-small p {
	font-size: var(--media-tiles-tile-type-text-copy-small-font-size);
	line-height: var(--media-tiles-tile-type-text-copy-small-line-height);
}

.c-media-tiles--cta-btn {
	margin: calc(2.5 * var(--base-line-height)) auto;
	width: auto;
}

.c-media-tiles--icon {
	height: calc(4.5 * var(--base-line-height));
	width: calc(4.5 * var(--base-line-height));
	margin: 0 auto;
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-media-tiles--icon img {
	height: calc(4.5 * var(--base-line-height));
	width: calc(4.5 * var(--base-line-height));
}

.c-media-tiles--tile-type-text--cta-section {
	text-align: center;
}

.c-media-tiles.cta-bottom-aligned .c-media-tiles--tile-type-text {
	position: relative;
	justify-content: flex-start;
}

.c-media-tiles.cta-bottom-aligned .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--icon-text-section {
	padding-bottom: calc(9 * var(--base-line-height));
}

.c-media-tiles.cta-bottom-aligned .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--cta-section {
	bottom: 0;
	width: 100%;
	position: absolute;
	margin-left: calc(-1.5 * var(--base-line-height));
}

/* extra styles for tile type image */
.c-media-tiles--tile-type-image {

	/* the following styles must be applied to tiles of type image in any case; in
	   order to avoid writing many partially very long additional selectors for all
	   the different viewport sizes, we use !important exceptionally */
	/* stylelint-disable declaration-no-important */
	padding: 0 !important;
	/* stylelint-enable declaration-no-important */
}

.c-media-tiles--tile-picture-element {
	width: 100%;
	height: 100%;
}

.c-media-tiles--tile-image-element {
	display: block;
	width: 100%;
	height: 100%;

	/* please note that https://github.com/constancecchen/object-fit-polyfill is used */
	object-fit: cover;
}

@media screen and (max-width: 767px),print {
	.c-media-tiles {
		padding: 0 var(--component-wide-padding-s);
	}

	.c-media-tiles--tile-title.text-small {
		font-size: var(--media-tiles-tile-type-number-title-small-font-size-mobile);
		line-height: var(--media-tiles-tile-type-number-title-small-line-height-mobile);
	}
}

@media screen and (max-width: 479px) {
	.c-media-tiles--tile-copy.text-medium {
		font-size: var(--media-tiles-tile-type-number-copy-medium-font-size-tablet);
		line-height: var(--media-tiles-tile-type-number-copy-font-size-mobile);
	}

	.c-media-tiles--tile-copy.text-small {
		font-size: var(--media-tiles-tile-type-number-copy-small-font-size-tablet);
		line-height: var(--media-tiles-tile-type-number-copy-small-font-size);
	}
}

@media screen and (min-width: 480px) and (max-width: 665px), screen and (min-width: 666px) and (max-width: 767px) {
	.c-media-tiles--tile-copy,
	.c-media-tiles--tile-rte-container p {
		font-size: var(--media-tiles-tile-type-number-copy-font-size-mobile-large);
		line-height: var(--media-tiles-tile-type-number-copy-line-height-mobile-large);
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-media-tiles--tile {
		padding: calc(3 * var(--base-line-height)) calc(5 * var(--base-line-height));
	}

	.text-left-aligned .c-media-tiles--tile {
		padding-right: calc(10 * var(--base-line-height) - 1.5 * var(--base-line-height));
		padding-left: calc(1.5 * var(--base-line-height));
	}

	.text-left-aligned .c-media-tiles--tile.bg-transparent.collapsible {
		padding-right: calc(10 * var(--base-line-height));
		padding-left: 0;
	}

	.c-media-tiles.cta-bottom-aligned .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--cta-section {
		margin-left: calc(-5 * var(--base-line-height));
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.text-left-aligned .c-media-tiles,
	.text-left-aligned.c-media-tiles {
		padding-left: 12.9rem;
	}

	.c-media-tiles--tile {
		padding: calc(3 * var(--base-line-height)) 16.3rem;
	}

	.text-left-aligned .c-media-tiles--tile {
		padding-right: calc(16.3rem + (16.3rem - 1.5 * var(--base-line-height)) - (12.9rem - 1.5 * var(--base-line-height)));
		padding-left: calc(1.5 * var(--base-line-height));
	}

	.text-left-aligned .c-media-tiles--tile.bg-transparent.collapsible {
		padding-right: calc(2 * 16.3rem - (12.9rem - 1.5 * var(--base-line-height)));
		padding-left: 0;
	}

	.c-media-tiles.cta-bottom-aligned .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--cta-section {
		margin-left: calc((-12 * var(--base-line-height)) + 0.5rem);
	}
}

@media screen and (min-width: 768px),print {
	.c-media-tiles {
		flex-flow: row wrap;
		justify-content: center;
	}

	.text-left-aligned .c-media-tiles,
	.text-left-aligned.c-media-tiles {
		justify-content: flex-start;
	}

	.c-media-tiles--column {
		margin: 0 calc(1.5 * var(--base-line-height)) 0 0;
	}

	/* extra styles for the first 2 of 4 columns in a row */
	.c-media-tiles--column:first-child:nth-last-child(4),
	.c-media-tiles--column:nth-child(2):nth-last-child(3) {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-media-tiles--tile {
		display: flex;
		flex-direction: column;
		justify-content: center;

		/* generally, all tiles should grow inside a column;
		   in case a column contains 2 tiles but only 1 tile of type image, the image must not be scaled;
		   this edge case cannot be covered via selectors since you cannot access a tile of type image which is followed by a tile NOT of type image;
		   therefore a big difference was added to the scaling of the different tile types (flex-grow: 99999 vs 1) */
		flex: 99999 0 auto;
	}

	.c-media-tiles--tile-type-image {
		flex-grow: 1;
	}

	.text-top-aligned .c-media-tiles--tile {
		justify-content: flex-start;
	}

	.c-media-tiles--tile.bg-transparent.collapsible {
		margin: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.text-left-aligned .c-media-tiles,
	.text-left-aligned.c-media-tiles {
		padding-left: 10rem;
	}

	.c-media-tiles--column {
		width: var(--media-tiles-tile-size-tablet);
	}

	.c-media-tiles--tile {
		min-height: var(--media-tiles-tile-size-tablet);
	}

	.c-media-tiles--tile-title.text-small {
		font-size: var(--media-tiles-tile-type-number-title-small-font-size-mobile);
		line-height: var(--media-tiles-tile-type-number-title-small-line-height-mobile);
	}

	/* only half of the min-height for 2 tiles above each other */
	.c-media-tiles--tile:first-child:nth-last-child(2),
	.c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile {
		min-height: calc(var(--media-tiles-tile-size-tablet) / 2);
	}

	/* extra styles for the first 2 of 4 columns in a row */
	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile.bg-transparent.collapsible,
	.c-media-tiles--column:nth-child(2):nth-last-child(3) .c-media-tiles--tile.bg-transparent.collapsible {
		margin-bottom: calc(2 * var(--base-line-height));
	}

	.c-media-tiles--column:first-child:nth-last-child(4) {
		margin-left: calc((100% - (2 * var(--media-tiles-tile-size-tablet)) - (1.5 * var(--base-line-height))) / 2);
	}

	.c-media-tiles--column:nth-child(2):nth-last-child(3) {
		margin-right: calc((100% - (2 * var(--media-tiles-tile-size-tablet)) - (1.5 * var(--base-line-height))) / 2);
	}

	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(4) {
		margin-left: 0;
	}

	.text-left-aligned .c-media-tiles--column:nth-child(2):nth-last-child(3) {
		margin-right: calc((100% - (2 * var(--media-tiles-tile-size-tablet)) - (1.5 * var(--base-line-height))));
	}

	/* extra styles for 3 columns in a row */
	.c-media-tiles--column:first-child:nth-last-child(3),
	.c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column {
		width: var(--media-tiles-tile-size-tablet-narrow);
	}

	.c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile,
	.c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile {
		padding: calc(2.5 * var(--base-line-height)) var(--base-line-height);
		min-height: var(--media-tiles-tile-size-tablet-narrow);
	}

	/* only half of the min-height for 2 tiles above each other */
	.c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile:first-child:nth-last-child(2),
	.c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile,
	.c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2),
	.c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile {
		min-height: calc(var(--media-tiles-tile-size-tablet-narrow) / 2);
	}

	/* these width and min-height adjustments are a workaround for left-alignment
	   with 3 columns on tablet; without reducing the size by 1.1rem per column, the
	   last column would wrap in certain scenarios; this is something that was not
	   very well thought through by the design team */
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column {
		width: calc(var(--media-tiles-tile-size-tablet-narrow) - 1.1rem);
	}

	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile {
		padding-right: calc(2 * var(--base-line-height));
		padding-left: 0;
		min-height: calc(var(--media-tiles-tile-size-tablet-narrow) - 1.1rem);
	}

	/* only half of the min-height for 2 tiles above each other */
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile {
		min-height: calc((var(--media-tiles-tile-size-tablet-narrow) - 1.1rem) / 2);
	}

	.c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile-title,
	.c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile-title {
		font-size: var(--media-tiles-tile-type-number-title-font-size-tablet-narrow);
		line-height: var(--media-tiles-tile-type-number-title-line-height-tablet-narrow);
	}

	.c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile-title.text-large,
	.c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile-title.text-large {
		font-size: var(--media-tiles-tile-type-number-title-large-font-size-tablet-narrow);
		line-height: var(--media-tiles-tile-type-number-title-large-line-height-tablet-narrow);
	}

	.c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile-title.text-small,
	.c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile-title.text-small {
		font-size: var(--media-tiles-tile-type-number-title-small-font-size-tablet);
		line-height: var(--media-tiles-tile-type-number-title-small-line-height-tablet);
	}

	.c-media-tiles--tile-copy,
	.c-media-tiles--tile-rte-container p {
		font-size: var(--media-tiles-tile-type-number-copy-font-size-tablet-narrow);
		line-height: var(--media-tiles-tile-type-number-copy-line-height-tablet-narrow);
	}

	.c-media-tiles--tile-copy.text-medium {
		font-size: var(--media-tiles-tile-type-number-copy-medium-font-size-tablet);
		line-height: var(--media-tiles-tile-type-number-copy-font-size-mobile);
	}

	.c-media-tiles--tile-copy.text-small {
		font-size: var(--media-tiles-tile-type-number-copy-small-font-size-tablet);
		line-height: var(--media-tiles-tile-type-number-copy-small-font-size);
	}

	.c-media-tiles--tile-dash {
		width: calc(4.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.text-left-aligned .c-media-tiles,
	.text-left-aligned.c-media-tiles {
		padding-left: 12.2rem;
	}

	.c-media-tiles--column {
		width: var(--media-tiles-tile-size-desktop);
	}

	.c-media-tiles--tile {
		min-height: var(--media-tiles-tile-size-desktop);
	}

	/* only half of the min-height for 2 tiles above each other */
	.c-media-tiles--tile:first-child:nth-last-child(2),
	.c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile {
		min-height: calc(var(--media-tiles-tile-size-desktop) / 2);
	}

	/* extra styles for the first 2 of 4 columns in a row */
	.c-media-tiles--column:first-child:nth-last-child(4) {
		margin-left: calc((100% - (2 * var(--media-tiles-tile-size-desktop)) - (1.5 * var(--base-line-height))) / 2);
	}

	.c-media-tiles--column:nth-child(2):nth-last-child(3) {
		margin-right: calc((100% - (2 * var(--media-tiles-tile-size-desktop)) - (1.5 * var(--base-line-height))) / 2);
	}

	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(4) {
		margin-left: 0;
	}

	.text-left-aligned .c-media-tiles--column:nth-child(2):nth-last-child(3) {
		margin-right: calc((100% - (2 * var(--media-tiles-tile-size-desktop)) - (1.5 * var(--base-line-height))));
	}

	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile.bg-transparent.collapsible,
	.c-media-tiles--column:nth-child(2):nth-last-child(3) .c-media-tiles--tile.bg-transparent.collapsible {
		margin-bottom: calc(2.5 * var(--base-line-height));
	}

	/* extra styles for 3 columns in a row */
	/* these width and min-height adjustments are a workaround for left-alignment
	   with 3 columns on desktop(-small); without reducing the size by 1.8rem per column,
	   the last column would wrap in certain scenarios; this is something that was not
	   very well thought through by the design team */
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column {
		width: calc(var(--media-tiles-tile-size-desktop) - 1.8rem);
	}

	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile {
		min-height: calc(var(--media-tiles-tile-size-desktop) - 1.8rem);
	}

	/* only half of the min-height for 2 tiles above each other */
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile {
		min-height: calc((var(--media-tiles-tile-size-desktop) - 1.8rem) / 2);
	}

	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile-title.text-small,
	.c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column .c-media-tiles--tile-title.text-small {
		font-size: var(--media-tiles-tile-type-number-title-small-font-size-desktop-small);
		line-height: var(--media-tiles-tile-type-number-title-small-line-height-desktop-small);
	}

	.c-media-tiles--tile-title.text-small {
		font-size: var(--media-tiles-tile-type-number-title-small-font-size-desktop-small);
		line-height: var(--media-tiles-tile-type-number-title-small-line-height-desktop-small);
	}

	.c-media-tiles--tile-title {
		font-size: var(--media-tiles-tile-type-number-title-font-size-desktop);
		line-height: var(--media-tiles-tile-type-number-title-line-height-desktop);
	}

	.c-media-tiles--tile-title.text-large {
		font-size: var(--media-tiles-tile-type-number-title-large-font-size-desktop);
		line-height: var(--media-tiles-tile-type-number-title-large-line-height-desktop);
	}

	.c-media-tiles--tile-copy,
	.c-media-tiles--tile-rte-container p {
		font-size: var(--media-tiles-tile-type-number-copy-font-size-desktop);
		line-height: var(--media-tiles-tile-type-number-copy-line-height-desktop);
	}
}

@media screen and (min-width: 1365px) {
	.text-left-aligned .c-media-tiles,
	.text-left-aligned.c-media-tiles {
		padding-left: 8.4rem;
	}

	.c-media-tiles--column {
		width: var(--media-tiles-tile-size-desktop-large);
	}

	.c-media-tiles--tile {
		padding: calc(2.5 * var(--base-line-height)) calc(4.5 * var(--base-line-height));
		min-height: var(--media-tiles-tile-size-desktop-large);
	}

	.c-media-tiles.cta-bottom-aligned .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--cta-section {
		margin-left: calc(-4.5 * var(--base-line-height));
	}

	.c-media-tiles.cta-bottom-aligned .c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--cta-section,
	.c-media-tiles.cta-bottom-aligned .c-media-tiles--column:nth-child(2):nth-last-child(3) .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--cta-section,
	.c-media-tiles.cta-bottom-aligned .c-media-tiles--column:nth-child(3):nth-last-child(2) .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--cta-section,
	.c-media-tiles.cta-bottom-aligned .c-media-tiles--column:nth-child(4):last-child .c-media-tiles--tile-type-text .c-media-tiles--tile-type-text--cta-section {
		margin-left: calc(-1 * var(--base-line-height));
	}

	/* only half of the min-height for 2 tiles above each other */
	.c-media-tiles--tile:first-child:nth-last-child(2),
	.c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile {
		min-height: calc(var(--media-tiles-tile-size-desktop-large) / 2);
	}

	/* extra styles for 2 and 3 columns in a row */
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) ~ .c-media-tiles--column,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column {
		width: var(--media-tiles-tile-size-desktop-large);
	}

	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) ~ .c-media-tiles--column .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile {
		padding-right: calc(9 * var(--base-line-height) - 1.5 * var(--base-line-height));
		padding-left: calc(1.5 * var(--base-line-height));
		min-height: var(--media-tiles-tile-size-desktop-large);
	}

	/* only half of the min-height for 2 tiles above each other */
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) .c-media-tiles--tile:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile {
		min-height: calc(var(--media-tiles-tile-size-desktop-large) / 2);
	}

	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) .c-media-tiles--tile.bg-transparent.collapsible,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(2) ~ .c-media-tiles--column .c-media-tiles--tile.bg-transparent.collapsible,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) .c-media-tiles--tile.bg-transparent.collapsible,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(3) ~ .c-media-tiles--column .c-media-tiles--tile.bg-transparent.collapsible {
		padding-right: calc(9 * var(--base-line-height));
		padding-left: 0;
	}

	/* extra styles for 4 columns in a row */
	.c-media-tiles--column:first-child:nth-last-child(4),
	.c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column {
		width: var(--media-tiles-tile-size-desktop-large-narrow);
	}

	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile,
	.c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column .c-media-tiles--tile {
		padding: calc(2.5 * var(--base-line-height)) var(--base-line-height);
		min-height: var(--media-tiles-tile-size-desktop-large-narrow);
	}

	/* only half of the min-height for 2 tiles above each other */
	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile:first-child:nth-last-child(2),
	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile,
	.c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2),
	.c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column .c-media-tiles--tile:first-child:nth-last-child(2) ~ .c-media-tiles--tile {
		min-height: calc(var(--media-tiles-tile-size-desktop-large-narrow) / 2);
	}

	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile.bg-transparent.collapsible,
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column .c-media-tiles--tile.bg-transparent.collapsible {
		padding-right: calc(2 * var(--base-line-height));
		padding-left: 0;
	}

	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile-title,
	.c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column .c-media-tiles--tile-title {
		font-size: var(--media-tiles-tile-type-number-title-font-size-desktop-large-narrow);
		line-height: var(--media-tiles-tile-type-number-title-line-height-desktop-large-narrow);
	}

	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile-title.text-large,
	.c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column .c-media-tiles--tile-title.text-large {
		font-size: var(--media-tiles-tile-type-number-title-large-font-size-desktop-large-narrow);
		line-height: var(--media-tiles-tile-type-number-title-large-line-height-desktop-large-narrow);
	}

	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile-title.text-small,
	.c-media-tiles--column:first-child:nth-last-child(4) ~ .c-media-tiles--column .c-media-tiles--tile-title.text-small {
		font-size: var(--media-tiles-tile-type-number-title-small-font-size-mobile);
		line-height: var(--media-tiles-tile-type-number-title-small-line-height-mobile);
	}

	/* extra styles for the first 2 of 4 columns in a row */
	.c-media-tiles--column:first-child:nth-last-child(4),
	.c-media-tiles--column:nth-child(2):nth-last-child(3),
	.text-left-aligned .c-media-tiles--column:first-child:nth-last-child(4),
	.text-left-aligned .c-media-tiles--column:nth-child(2):nth-last-child(3) {
		margin: 0 calc(1.5 * var(--base-line-height)) 0 0;
	}

	.c-media-tiles--column:first-child:nth-last-child(4) .c-media-tiles--tile.bg-transparent.collapsible,
	.c-media-tiles--column:nth-child(2):nth-last-child(3) .c-media-tiles--tile.bg-transparent.collapsible {
		margin: 0;
	}
}

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/navigation-campaign/clientlib/css/navigation-campaign.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
:root {
	--c-navigation-campaign-flyout-transition-speed: 800ms;
}

.c-navigation-campaign {
	position: fixed;
	padding: calc(1 * var(--base-line-height));
	top: 0;
	z-index: 10000;
	max-width: var(--width-page-max);
	pointer-events: none;
}

.c-navigation-campaign.visible {
	pointer-events: auto;
}

.full-width-grid .c-navigation-campaign {
	max-width: var(--width-page-fullwidth);
}

.c-navigation-campaign.visible .c-navigation-campaign--background-container {
	opacity: 1;
}

.c-navigation-campaign.visible .c-navigation-campaign--logo {
	opacity: 1;
	cursor: pointer;
}

.c-navigation-campaign.visible .c-navigation-campaign--menu,
.c-navigation-campaign.is-visible .c-navigation-campaign--countryselection {
	pointer-events: auto;
}

.c-navigation-campaign--background-container {
	width: 100%;
	height: calc(4 * var(--base-line-height));
	background: var(--linear-gradient-campaign-yellow-to-right);
	position: absolute;
	opacity: 0;
	transition: opacity var(--c-navigation-campaign-flyout-transition-speed) linear;
}

.c-navigation-campaign--container {
	position: relative;
	height: calc(4 * var(--base-line-height));
	width: 100%;
}

.c-navigation-campaign--meta-container {
	height: 100%;
	align-items: center;
	margin-left: calc(1 * var(--base-line-height));
}

.c-navigation-campaign--logo {
	opacity: 0;
}

.c-navigation-campaign--logo,
.c-navigation-campaign--logo img {
	transition: opacity var(--c-navigation-campaign-flyout-transition-speed) linear;
	height: calc(3 * var(--base-line-height));
	max-width: calc(12 * var(--base-line-height));
}

.c-navigation-campaign:not(.visible) .c-navigation-campaign--logo,
.c-navigation-campaign:not(.visible) .c-navigation-campaign--logo img {
	pointer-events: none;
}

.is-editmode .c-navigation-campaign {
	position: relative;
}

/*
 * Menu
 */
.c-navigation-campaign--menu button.color-white,
.c-navigation-campaign--menu span.color-white,
.c-navigation-campaign--menu a.link.color-white,
.c-navigation-campaign--flyout-scrollcontainer a.link.color-white {
	color: var(--color-white-500);
}

.c-navigation-campaign--menu button:hover,
.c-navigation-campaign--menu a.link:hover,
.c-navigation-campaign--flyout-scrollcontainer a.link:hover {
	color: var(--color-red-400);
}

.c-navigation-campaign--menu {
	display: flex;
	margin-left: auto;
	height: calc(3 * var(--base-line-height));
	pointer-events: none;
}

.c-navigation-campaign--menu .c-navigation-campaign--countryselection {
	display: none;
	opacity: 0;
	visibility: hidden;
}

.c-navigation-campaign--countryselection {
	align-items: center;
	transition: opacity var(--c-navigation-campaign-flyout-transition-speed) linear;
	margin-right: calc(2 * var(--base-line-height));
	pointer-events: none;
}

.c-navigation-campaign--countryselection.has-background {
	padding-right: calc(2 * var(--base-line-height));
	padding-left: calc(2 * var(--base-line-height));
	border: 0.1rem solid var(--color-red-500);
	border-radius: 0.4rem;
}

.c-navigation-campaign--country,
.c-navigation-campaign--global {
	background: none;
	border: none;
	display: flex;
	font-weight: normal;
	font-size: var(--font-size-text-small);
	margin-right: calc(2 * var(--base-line-height));
}

.c-navigation-campaign--country::before,
.c-navigation-campaign--global::before {
	border-radius: 1.1rem;
	margin-right: calc(0.5 * var(--base-line-height));
}

.c-navigation-campaign--country::before {
	width: 2.2rem;
	height: 2.2rem;
}

.c-navigation-campaign--global::before {
	width: 2.6rem;
	height: 2.6rem;
	margin-right: 0;
}

.c-navigation-campaign--global {
	align-self: center;
	opacity: 0;
	font-size: var(--font-size-6);
	transition: opacity 250ms linear;
	visibility: hidden;
}

.c-navigation-campaign.is-open .c-navigation-campaign--menu .c-navigation-campaign--countryselection,
.c-navigation-campaign.is-open .c-navigation-campaign--global {
	opacity: 1;
}

.c-navigation-campaign.is-visible .c-navigation-campaign--menu .c-navigation-campaign--countryselection,
.c-navigation-campaign.is-visible .c-navigation-campaign--global {
	visibility: visible;
}

.c-navigation-campaign--languageselection {
	list-style: none;
	margin-bottom: 0;
}

.c-navigation-campaign--languageselection a {
	font-weight: normal;
	margin-right: calc(0.5 * var(--base-line-height));
}

.c-navigation-campaign--flyout-countrylist-container span.is-selected,
.c-navigation-campaign--languageselection span.is-selected,
.c-navigation-campaign--flyout-container a.is-selected {
	font-weight: bold;
}

.c-navigation-campaign--menu-button {
	width: calc(3 * var(--base-line-height));
	min-width: 0;
	margin-bottom: 0;
	pointer-events: auto;
}

.c-navigation-campaign--menu-button.base-button--white span {
	background: var(--color-red-500);
}

.c-navigation-campaign--menu-button span {
	background: var(--color-white-500);
	display: block;
	height: 0.2rem;
	left: 1rem;
	opacity: 1;
	position: absolute;
	width: 2rem;
	transform: rotate(0deg);
	transition: left 250ms ease-in-out, top 250ms ease-in-out, transform 250ms ease-in-out, width 250ms ease-in-out;
}

.c-navigation-campaign--menu-button span:nth-child(1) {
	top: 1.4rem;
}

.c-navigation-campaign--menu-button span:nth-child(2),
.c-navigation-campaign--menu-button span:nth-child(3) {
	top: 2rem;
}

.c-navigation-campaign--menu-button span:nth-child(4) {
	top: 2.6rem;
}

.c-navigation-campaign.is-open .c-navigation-campaign--menu-button span:nth-child(1) {
	top: 2rem;
	width: 0%;
	left: 50%;
}

.c-navigation-campaign.is-open .c-navigation-campaign--menu-button span:nth-child(2),
.c-navigation-campaign.is-open .c-navigation-campaign--menu-button span:nth-child(3) {
	transform: rotate(45deg);
	height: 0.2rem;
	width: 2.2rem;
	top: 1.9rem;
	left: 0.9rem;
}

.c-navigation-campaign.is-open .c-navigation-campaign--menu-button span:nth-child(3) {
	transform: rotate(-45deg);
}

.c-navigation-campaign.is-open .c-navigation-campaign--menu-button span:nth-child(4) {
	top: 2rem;
	width: 0%;
	left: 50%;
}

/*
 * Flyout
 */

.c-navigation-campaign--flyout {
	position: fixed;
	top: 0;
	z-index: 9999;
	height: 100%;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	left: 0;
	transition: opacity var(--c-navigation-campaign-flyout-transition-speed) ease-in-out;
}

html:not(.full-width-grid) .c-navigation-campaign--flyout {
	max-width: var(--width-page-max);
}

.c-navigation-campaign--flyout.is-open {
	opacity: 1;
}

.c-navigation-campaign--flyout.is-visible {
	visibility: visible;
}

.c-navigation-campaign--flyout-container {
	width: var(--grid-cols-12);
	margin: calc(9 * var(--base-line-height)) auto calc(2 * var(--base-line-height));
	height: auto;
	max-height: calc(100vh - 16.5 * var(--base-line-height));
	overflow-x: hidden;
	position: relative;
}

.c-navigation-campaign--link-container {
	width: var(--grid-cols-12);
	margin: 0 auto;
}

.c-navigation-campaign--flyout-container a {
	font-weight: normal;
	margin-bottom: calc(1.5 * var(--base-line-height));
	width: 100%;
}

.c-navigation-campaign--flyout--headline {
	font-weight: 800;
	display: block;
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-navigation-campaign--flyout-copy {
	display: block;
}

.c-navigation-campaign--flyout-countryselection {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: var(--color-white-500);
	display: none;
}

.c-navigation-campaign--flyout.countryselection-open .c-navigation-campaign--flyout-countryselection {
	display: block;
}

.c-navigation-campaign.countryselection-open .c-navigation-campaign--global,
.c-navigation-campaign.countryselection-open .c-navigation-campaign--countryselection {
	display: none;
}

.c-navigation-campaign--flyout-countryselection .c-navigation-campaign--countryselection {
	width: var(--grid-cols-12);
	position: relative;
	border-bottom: 0.1rem solid var(--color-gray-400);
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-navigation-campaign--flyout-countryselection .c-navigation-campaign--country {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-navigation-campaign--flyout-countryselection .c-navigation-campaign--languageselection {
	margin-bottom: calc(1.5 * var(--base-line-height));
	line-height: var(--base-line-height);
}

.c-navigation-campaign--flyout-countryselection-container {
	padding-top: calc(8 * var(--base-line-height));
	padding-bottom: calc(4 * var(--base-line-height));
	height: 100%;
	display: flex;
	flex-direction: column;
}

.c-navigation-campaign--flyout-countrylist-container {
	flex-grow: 1;
	overflow-x: hidden;
	position: relative;
}

.c-navigation-campaign--flyout-countrylist-container a {
	display: block;
	margin-bottom: calc(1.5 * var(--base-line-height));
	font-weight: normal;
}

.c-navigation-campaign--flyout-countrylist-container span {
	display: block;
	margin-bottom: calc(1.5 * var(--base-line-height));
}

@media screen and (max-width: 767px),print {
	.c-navigation-campaign--global {
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.c-navigation-campaign--flyout-countryselection-container {
		padding-top: calc(7.5 * var(--base-line-height));
	}
}

/**
 * Breakpoint  > 768
 */
@media screen and (min-width: 768px),print {
	.c-navigation-campaign {
		padding: calc(1.5 * var(--base-line-height));
	}

	.c-navigation-campaign--container {
		height: calc(5.5 * var(--base-line-height));
	}

	.c-navigation-campaign--background-container {
		height: calc(5.5 * var(--base-line-height));
		background: linear-gradient(90deg, rgba(255, 204, 0, 1) 0, rgba(255, 204, 0, 1) 19.6rem, rgba(255, 204, 0, 0) 75%);
	}

	.c-navigation-campaign--meta-container {
		margin-left: calc(1.5 * var(--base-line-height));
	}

	.c-navigation-campaign--flyout-countryselection .c-navigation-campaign--countryselection {
		display: none;
	}

	.c-navigation-campaign--flyout-container {
		margin-top: calc(12 * var(--base-line-height));
		margin-bottom: calc(2.5 * var(--base-line-height));
		height: auto;
		max-height: calc(100vh - 21 * var(--base-line-height));
	}

	.c-navigation-campaign--flyout-single-column .c-navigation-campaign--flyout-scrollcontainer {
		column-count: 1;
	}

	.c-navigation-campaign--flyout-scrollcontainer {
		column-count: 2;
		column-gap: calc(1.5 * var(--base-line-height));
	}

	.c-navigation-campaign--menu .c-navigation-campaign--countryselection {
		display: flex;
	}

	.c-navigation-campaign--flyout-countryselection-container {
		padding-top: calc(12 * var(--base-line-height));
	}

	.c-navigation-campaign--flyout-countrylist-container,
	.c-navigation-campaign--flyout-countrylist-headline {
		width: var(--grid-cols-10);
		margin-left: auto;
		margin-right: auto;
	}

	.c-navigation-campaign--flyout-countrylist-container a,
	.c-navigation-campaign--flyout-countrylist-container span {
		display: inline-block;
		padding-right: calc(1.5 * var(--base-line-height));
		margin-right: calc(1.5 * var(--base-line-height));
		border-right: 0.1rem solid var(--color-black-400);
	}

	.c-navigation-campaign--flyout-countrylist-container a:last-child {
		padding-right: 0;
		margin-right: 0;
		border-right: none;
	}

	.c-navigation-campaign--global {
		display: none;
	}
}

@media screen and (min-width: 1024px),print {
	.c-navigation-campaign--logo,
	.c-navigation-campaign--logo img {
		height: calc(4 * var(--base-line-height) - 0.4rem);
	}

	.c-navigation-campaign--flyout-container {
		width: var(--grid-cols-10);
	}

	.c-navigation-campaign--link-container {
		width: var(--grid-cols-10);
	}
}

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/non-supported-browser-overlay/clientlib/css/non-supported-browser-overlay.css ***!
  \************************************************************************************************************************************************************************************************************************************************************/
.c-non-supported-browser {
	display: none;
}

.c-non-supported-browser .c-overlay-small--box {
	width: var(--grid-cols-10);
}

.c-non-supported-browser .c-overlay-small--button-container {
	justify-content: flex-start;
}

.c-overlay-small--button-container a {
	margin: 0 1.4rem 0 0;
}

@media screen and (min-width: 1024px) and (max-width: 1364px) {
	.c-non-supported-browser .c-overlay-small--box {
		width: var(--grid-cols-8);
	}
}

@media screen and (min-width: 1365px) {
	.c-non-supported-browser .c-overlay-small--box {
		width: var(--grid-cols-6);
	}
}

/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/overlay/clientlib/css/overlay.css ***!
  \****************************************************************************************************************************************************************************************************************/
.c-overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: none;
	opacity: 0;
	z-index: 10000;
	transition: 200ms opacity ease-in-out;
	background-color: var(--color-white-500);
}

.c-overlay.is-open {
	display: block;
	opacity: 1;
}

.c-overlay-wrapper {
	position: relative;
}

.c-overlay-content {
	margin-top: calc(3 * var(--base-line-height));
	height: calc(100% - 3 * var(--base-line-height));
	overflow: auto;
}

.c-overlay-content--scrollcontainer {
	overflow: hidden;
}

.c-overlay-close {
	position: absolute;
	right: calc(var(--base-line-height) + 0.2rem);
	top: calc(0.5 * var(--base-line-height) - 0.1rem);
	width: calc(2 * var(--base-line-height) + 0.2rem);
	height: calc(2 * var(--base-line-height) + 0.2rem);
}

.c-overlay-close.icon-cancel::before {
	font-size: var(--font-size-3);
}

.c-overlay .c-video {
	margin-bottom: 0;
}

@media screen and (min-width: 768px),print {
	.c-overlay-close {
		right: calc(2.5 * var(--base-line-height) + 0.4rem);
	}
}

@media screen and (min-width: 1024px),print {
	.c-overlay-close {
		width: calc(3 * var(--base-line-height));
		height: calc(3 * var(--base-line-height));
		right: calc(2.5 * var(--base-line-height));
		top: 0;
	}

	.c-overlay-close.icon-cancel::before {
		font-size: calc(2 * var(--base-line-height));
	}
}

@media screen and (min-width: 1365px) {
	.c-overlay-close {
		right: calc(var(--component-page-max-padding));
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/producttable/clientlib/css/producttable.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/**
 * @file producttable.css
 *
 * @description
 * Define Producttable Legend
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* Visibility */

.c-producttable {
	font-size: var(--font-size-text-small);
}

.c-producttable .visible,
.base-button .visible {
	opacity: 1;
}

.c-productcontainer--scrollarrow .visible {
	display: block;
}

.c-producttablecontainer {
	display: flex;
	opacity: 0;
	transition: opacity 300ms ease-in-out;
	color: var(--color-black-400);
}

.c-productcategorycontainer {
	width: calc(12 * var(--base-line-height));
	display: none;
}

.c-productcontainer {
	display: inline-block;
	position: relative;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.c-productcontainer--inner {
	overflow: auto;
	white-space: nowrap;
	display: flex;
}

/* scrollable in Chrome */
.c-doublescrollbar {
	height: 2.4rem;
	margin-top: -2.4rem;
	overflow-x: auto;
	margin-bottom: 0.4rem;
	overflow-y: hidden;
}

.c-productcontainer--inner::-webkit-scrollbar,
.c-doublescrollbar::-webkit-scrollbar {
	appearance: none;
}

.c-productcontainer--inner::-webkit-scrollbar:horizontal,
.c-doublescrollbar::-webkit-scrollbar:horizontal {
	height: 1.1rem;
}

.c-productcontainer--inner::-webkit-scrollbar-thumb,
.c-doublescrollbar::-webkit-scrollbar-thumb {
	border-radius: 0.8rem;
	border: 0.2rem solid var(--color-white-500);
	background-color: rgba(0, 0, 0, 0.5); /* should match background, can't be transparent */
}

.c-productcontainer--inner::-webkit-scrollbar-track,
.c-doublescrollbar::-webkit-scrollbar-track {
	background-color: var(--color-white-500);
	border-radius: 0.8rem;
}

.c-product {
	width: calc(14 * var(--base-line-height));
	flex: 0 0 auto;
	position: relative;
	transition: width 400ms ease-in-out, opacity 101ms ease-in-out 300ms;
}

.c-producttablerow {
	min-height: calc(3 * var(--base-line-height));
	text-align: center;
	white-space: normal;
	overflow: hidden;
}

.c-productcategorycontainer .c-producttablerow {
	text-align: left;
}

.c-producttablerow.grey {
	background-color: var(--color-gray-50);
}

.c-producttablerow.c-headline {
	border-bottom: 0;
	font-size: var(--font-size-1);
	padding-bottom: calc(1 * var(--base-line-height));
	text-align: left;
	position: relative;
}

.c-product .c-producttablerow.c-headline {
	display: block;
	background-color: var(--color-gray-50);
}

.c-producttablerow.c-producttablerow--cta {
	min-height: 0;
	position: relative;
	padding-top: calc(1.5 * var(--base-line-height));
}

.c-producttablerow.c-producttablerow--cta > a.base-button {
	margin: 0.1rem;
}

.c-producttablerow.c-headline .c-producttablerow-headline {
	bottom: 0;
	font-weight: bold;
	display: block;
	padding: calc(1 * var(--base-line-height)) calc(var(--base-line-height)) calc(3 * var(--base-line-height)) 0;
}

.c-producttablerow.c-headline .c-producttablerow-subheadline {
	display: inline-block;
}

.c-producttablerow .c-producttablerow-text {
	display: inline-block;
	vertical-align: middle;
	align-self: center;
	padding-bottom: calc(0.5 * var(--base-line-height));
	padding-top: calc(0.5 * var(--base-line-height));
}

.c-producttablerow .icon-checkmark,
.c-producttablerow .icon-doublecheck-legacy,
.c-producttablerow .icon-close-bold-legacy {
	font-size: var(--font-size-icons-standard);
	display: inline-block;
	vertical-align: middle;
}

.c-producttablerow .icon-checkmark {
	font-size: var(--font-size-4);
}

.c-producttablerow .icon-doublecheck-legacy {
	font-size: var(--font-size-6);
}

.c-producttablerow .icon-checkmark,
.c-producttablerow .icon-doublecheck-legacy {
	color: var(--color-green-500);
}

.c-producttablerow .icon-close-bold-legacy {
	color: var(--color-gray-400);
}

.has-rte a.c-product-close {
	text-decoration: none;
}

.c-product-close,
.c-product-show-all.active {
	opacity: 1;
	cursor: pointer;
}

.c-product-close {
	cursor: default;
	position: absolute;
	top: calc(0.2 * var(--base-line-height));
	right: calc(0.5 * var(--base-line-height));
	z-index: 2;
	opacity: 1;
	text-decoration: none;
}

.c-producttablerow > .c-product-close {
	line-height: 1rem;
	padding: 0.4rem;
	right: 0.5rem;
}

.c-producttablerow-details .c-product-close {
	top: calc(1 * var(--base-line-height));
	right: calc(1.3 * var(--base-line-height));
	padding-top: 0.3rem;
	margin-top: -0.3rem;
	padding-right: 0.5rem;
	margin-right: -0.5rem;
	padding-left: 0.5rem;
}

.c-product-close::before {
	color: var(--color-gray-700);
	font-size: 1rem;
	cursor: pointer;
}

.c-producttablerow-details .c-product-close::before {
	font-size: var(--font-size-icons-standard);
}

.c-product-close:focus::before,
.c-product-close:hover::before {
	color: var(--color-red-500);
}

.c-product-close:focus,
.c-product.is-open .c-producttablerow-details--box .c-product-close:focus {
	outline: 0.1rem solid var(--color-black-500);
}

.c-product-show-all {
	font-size: var(--font-size-1);
	margin-top: calc(0.5 * var(--base-line-height));
	margin-left: 0.1rem;
	color: var(--color-gray-600);
	display: block;
	font-weight: normal;
	cursor: default;
	z-index: 2;
	opacity: 0.2;
	text-decoration: none;
}

.c-product-show-all.active:hover {
	color: var(--color-red-400);
}

.c-product-show-all.active:focus {
	color: var(--color-red-500);
	outline: 0.1rem solid var(--color-red-500);
}

.c-product-show-all .c-product-show-all-icon {
	font-size: var(--font-size-4);
	pointer-events: none;
}

.c-product-show-all .c-product-show-all-icon::before {
	position: relative;
	top: 0.5rem;
}

.c-productcategorycontainer.small {
	width: calc(14 * var(--base-line-height));
}

.c-productcontainer.small {
	max-width: calc(100% - (14 * var(--base-line-height)));
}

.c-producttablerow .base-button.invisible {
	visibility: hidden;
}

.c-producttablerow-details {
	height: 0;
	overflow: hidden;
	text-align: left;
}

.c-product.is-open .c-producttablerow-details {
	height: auto;
}

.c-producttablerow-details--inner h3 {
	text-align: center;
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-producttablerow .base-button span {
	display: block;
	white-space: normal;
	top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	width: 100%;
}

.c-producttablerow-text p {
	margin: calc(0.5 * var(--base-line-height)) 0;
}

.c-product .c-download-box.component-small {
	padding: 0;
	margin: 0;
}

/**
 * Breakpoints
 */

/**
 * Breakpoint  < 768
 */
@media screen and (max-width: 767px),print {
	.c-productcontainer {
		width: 100%;
	}

	.c-productcontainer--inner {
		width: 100%;
		display: block;
		white-space: normal;
		overflow: hidden;
	}

	.c-product,
	.c-product.wide {
		width: 100%;
		border: 0.1rem solid var(--color-gray-400);
		margin-bottom: calc(4 * var(--base-line-height));
	}

	.c-product .sub-h3 {
		font-size: var(--font-size-4);
		line-height: calc(2 * var(--base-line-height));
	}

	.c-product-close.icon-cancel {
		display: none;
	}

	.c-producttablerow.c-headline,
	.c-producttablerow.c-subheadline {
		height: auto;
		min-height: 0;
		padding-bottom: 0;
	}

	.c-producttablerow.c-headline span.c-producttablerow-headline {
		text-align: center;
		position: relative;
		display: block;
		padding: calc(2 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(0.5 * var(--base-line-height));
	}

	.c-producttablerow.c-headline span.c-producttablerow-subheadline {
		text-align: center;
		position: relative;
		display: block;
		padding: calc(0.5 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(2 * var(--base-line-height));
		color: var(--color-gray-600);
	}

	.c-producttablerow {
		border-bottom: 0.2rem solid var(--color-white-500);
		display: flex;
		position: relative;
	}

	.c-producttablerow:not([data-category="headline"])::after {
		content: "";
		position: absolute;
		border-right: 0.2rem solid var(--color-white-500);
		height: 100%;
		width: 100%;
		transform: translateX(-50%);
	}

	.c-producttablerow .c-producttablerow-text {
		padding: calc(0.5 * var(--base-line-height));
	}

	.c-producttablerow .c-producttablerow-text,
	.c-producttablerow .icon-checkmark,
	.c-producttablerow .icon-doublecheck-legacy,
	.c-producttablerow .icon-close-bold-legacy {
		width: 50%;
	}

	.c-producttablerow-text.c-producttablerow-category-text {
		text-align: left;
		align-self: center;
		font-size: var(--font-size-1);
		color: var(--color-gray-600);
	}

	.c-producttablerow.c-producttablerow--cta {
		background-color: var(--color-gray-50);
		padding: 0;
		display: block;
		border-bottom: none;
		padding-top: calc(0.25 * var(--base-line-height));
		padding-bottom: calc(0.25 * var(--base-line-height));
	}

	.c-producttablerow.c-producttablerow--cta-link {
		padding-top: calc(1.5 * var(--base-line-height));
		padding-bottom: calc(1.5 * var(--base-line-height) - 0.25 * var(--base-line-height));
	}

	/* This is for optional buttons */
	.c-producttablerow.c-producttablerow--cta--no-content {
		padding-top: 0;
	}

	.c-producttablerow.c-producttablerow--cta:not(.js--producttablerow) { /* stylelint-disable-line selector-class-pattern */
		height: auto !important; /* stylelint-disable-line declaration-no-important */
	}

	/* This is for optional links */
	.c-producttablerow.c-producttablerow--cta-link--no-content {

		/* This needs to be important to override the inline styles which are adding my the JS */
		padding: 0 !important; /* stylelint-disable-line declaration-no-important */
		margin: 0 !important; /* stylelint-disable-line declaration-no-important */
		height: 0 !important; /* stylelint-disable-line declaration-no-important */
	}

	.c-producttablerow.c-producttablerow--cta--first {
		padding-top: calc(var(--base-line-height));
	}

	.c-producttablerow.c-producttablerow--cta:last-child {
		padding-bottom: calc(var(--base-line-height));
	}

	.c-producttablerow.c-producttablerow--cta::after {
		content: none;
	}

	.c-producttablerow.c-producttablerow--arrow {
		background-color: var(--color-gray-50);
		font-size: var(--font-size-3);
	}

	.c-producttablerow.c-producttablerow--arrow span::before {
		color: var(--color-red-500);
	}

	.c-producttablerow.c-producttablerow--arrow::after {
		border-right: none;
	}

	.c-producttablerow--additionalmobile {
		overflow: hidden;
		max-height: 0;
		transition: max-height 200ms ease-in-out;
	}

	.c-producttablerow .icon-chevron-down {
		margin: auto;
		transition: transform 200ms ease-in-out;
		cursor: pointer;
		transform: translateY(0.4rem);
	}

	.c-product.active-mobile .c-producttablerow--additionalmobile {
		max-height: calc(35 * var(--base-line-height));
	}

	.c-product.active-mobile .icon-chevron-down {
		transform: rotate(180deg) translateY(0.6rem);
	}

	.c-product .base-button {
		margin-left: calc(var(--base-line-height));
		margin-right: calc(var(--base-line-height));
		width: calc(100% - calc(2 * var(--base-line-height)));
	}

	.c-producttablerow .base-button.invisible {
		display: none;
	}

	.c-product .base-button.c-producttablerow-seedetails--expanded span,
	.c-product .base-button.c-producttablerow-seedetails--expanded:hover span {
		color: var(--color-red-500);
		position: relative;
		transform: translate(0, 0);
		left: 0;
		top: 0;
		line-height: calc(2 * var(--base-line-height));
	}

	.c-product.is-open .base-button .c-producttablerow-seedetails--inactive {
		display: none;
	}

	.c-producttablerow--cta .base-button.c-producttablerow-seedetails--overlay {
		display: none;
	}

	.c-producttablerow--cta .base-button .c-producttablerow-seedetails--active {
		display: none;
	}

	.c-product.is-open .base-button .c-producttablerow-seedetails--active {
		display: block;
		pointer-events: none;
	}

	.c-producttablerow-details {
		overflow: hidden;
		text-align: left;
	}

	.c-producttablerow-details--inner {
		padding: calc(2 * var(--base-line-height)) calc(var(--base-line-height));
		background: var(--color-white-500);
		margin-top: calc(1 * var(--base-line-height));
	}

	.c-producttablerow-details--inner .base-button {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	.c-product.is-open .c-producttablerow-details h3,
	.c-product.is-open .c-producttablerow-details .sub-h3 {
		display: none;
	}

	.c-doublescrollbar {
		display: none;
	}

	.c-producttablerow.c-producttablerow--hideonmobile {
		display: none;
	}
}

/**
 * Breakpoint  > 768
 */
@media screen and (min-width: 768px),print {
	.c-productcategorycontainer {
		display: inline-block;
	}

	.c-productcontainer {
		max-width: calc(100% - (12 * var(--base-line-height)));
	}

	.c-producttablerow {
		padding: 0 calc(var(--base-line-height));
		border-right: 0.2rem solid var(--color-white-500);
	}

	.c-productcategorycontainer .c-producttablerow {
		padding: 0 calc(var(--base-line-height)) 0 0;
	}

	.c-producttablerow.c-subheadline span {
		display: inline-block;
	}

	.c-producttablerow-text.c-producttablerow-category-text {
		display: none;
	}

	.c-producttablerow--arrow {
		display: none;
	}

	.c-product .sub-h3 {
		display: block;
		text-align: center;
		margin-bottom: calc(2 * var(--base-line-height));
		font-weight: normal;
		font-size: var(--font-size-text-large);
		line-height: calc(1.5 * var(--base-line-height));
	}

	/*	.c-product .base-button {
		position: absolute;
		top: 2rem;
		left: 50%;
		transform: translateX(-50%);
	} */
	.c-producttablerow .base-button {
		display: block;
	}

	.c-producttablerow.c-headline .c-producttablerow-headline {
		padding-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-producttablerow.c-headline span.c-producttablerow-subheadline {
		padding-top: calc(1.5 * var(--base-line-height));
	}

	.c-product.narrow {
		width: calc(12 * var(--base-line-height));
	}

	.c-product.wide {
		width: calc(22 * var(--base-line-height));
	}

	.c-producttablerow--additionalmobile {
		height: auto;
	}

	.c-producttablerow.c-producttablerow--cta {
		padding: 0 calc(0.25 * var(--base-line-height));
	}

	.c-producttablerow.c-producttablerow--cta.c-producttablerow--nopadding {
		padding: 0.3rem 0.2rem;
	}

	.c-producttablerow.c-producttablerow--cta a.link {
		margin: calc(1.5 * var(--base-line-height)) var(--base-line-height) calc(1.5 * var(--base-line-height) - 0.3rem);
		align-self: center;
	}

	.c-product .base-button.c-producttablerow-seedetails--expanded {
		display: none;
	}

	.c-producttablerow--cta .base-button .c-producttablerow-seedetails--inactive,
	.c-producttablerow--cta .base-button .c-producttablerow-seedetails--active {
		display: none;
	}

	.c-product.inactive {
		opacity: 0;
		width: 0;
		border: none;
		transition: width 400ms ease-in-out, opacity 101ms ease-in-out;
	}

	.c-product.hidden {
		display: none;
	}

	.c-producttablerow-details {
		display: none !important; /* stylelint-disable-line declaration-no-important */
	}

	.c-product.is-open .c-producttablerow-details {
		position: fixed;
		z-index: 1002;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100% !important; /* stylelint-disable-line declaration-no-important */
		top: 0;
		left: 0;
		display: block !important; /* stylelint-disable-line declaration-no-important */
	}

	.c-product.is-open .c-producttablerow-details--box {
		background-color: var(--color-white-500);
		width: calc(54 * var(--base-line-height));
		margin: auto;
		position: relative;
		height: auto;
		max-height: calc(100% - 10rem);
		top: 50%;
		transform: translateY(-50%);
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.c-producttablerow-details--scrollcontainer {
		overflow: hidden;
		padding-bottom: calc(0.5 * var(--base-line-height));
	}

	.c-producttablerow-details--inner {
		overflow: auto;
		margin: calc(3 * var(--base-line-height));
		height: calc(100% - (6 * var(--base-line-height)));
		font-size: var(--font-size-standard);
	}

	.c-product .c-producttablerow-details--inner ul,
	.c-product .c-producttablerow-details--inner ol {
		margin-left: calc(1.5 * var(--base-line-height));
		padding-right: calc(3 * var(--base-line-height));
	}

	.c-product.is-open .c-producttablerow-details--box .c-product-close::before {
		color: var(--color-red-500);
	}

	.c-product.is-open .c-producttablerow-details .base-button {
		position: relative;
	}

	/* order issues with linting */
	.c-product.is-open .c-producttablerow-details .base-button:first-child:nth-last-child(1) {
		min-width: calc(30 * var(--base-line-height));
	}

	.c-product.is-open .c-producttablerow-details .base-button:first-child:nth-last-child(2),
	.c-product.is-open .c-producttablerow-details .base-button:first-child:nth-last-child(2) ~ .base-button {
		min-width: calc(18 * var(--base-line-height));
	}

	.c-producttablerow .c-producttablerow--button-container {
		text-align: center;
		margin-top: calc(2 * var(--base-line-height));
	}

	.c-producttablerow .c-producttablerow--button-container a {
		display: inline-flex;
		margin: 0 calc(var(--base-line-height));
	}

	.c-product .c-download-box.component-small {
		margin-top: calc(2 * var(--base-line-height));
	}

	.c-productcontainer--scrollarrow {
		position: absolute;
		display: block;
		width: calc(2.5 * var(--base-line-height));
		height: calc(100% - 1.2rem);
		z-index: 2;
		background-color: var(--color-gray-opacity-20);
		top: 0;
		transition: background-color 150ms ease-in-out;
		cursor: pointer;
	}

	.c-productcontainer--scrollarrow:hover {
		background-color: rgba(0, 0, 0, 0.5);
	}

	html:not(.is-touch) .c-productcontainer--scrollarrow:focus {
		background-color: var(--color-gray-opacity-20);
		outline: 0.2rem solid var(--color-black-500);
	}

	.c-productcontainer--scrollarrow-icon {
		font-size: calc(4 * var(--base-line-height));
		color: var(--color-white-500);
		position: absolute;
		top: 50%;
	}

	.c-productcontainer--scrollarrow-icon.icon-chevron-forward {
		left: -1.2rem;
	}

	.c-productcontainer--scrollarrow-icon.icon-chevron-back {
		left: -0.9rem;
	}

	.c-productcontainer--scrollarrow-icon.icon-chevron-forward::before,
	.c-productcontainer--scrollarrow-icon.icon-chevron-back::before {
		display: inline-block;
	}

	/* rtl:raw:
	.c-productcontainer--scrollarrow-icon.icon-chevron-forward::before {
	   	transform: scaleX(-1);
	}
	*/

	/* rtl:raw:
	.c-productcontainer--scrollarrow-icon.icon-chevron-back::before {
	  	transform: scaleX(-1);
	}
	*/

	.c-productcontainer--scrollarrow.c-productcontainer--scrollarrow-left {
		left: 0;
	}

	.c-productcontainer--scrollarrow.c-productcontainer--scrollarrow-right {
		right: -0.1rem;
	}
}

/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/producttable/clientlib/css/producttable-nojs.css ***!
  \*******************************************************************************************************************************************************************************************************************************/
/**
 * @file producttable-nojs.css
 *
 * @description
 * Define Producttable No JS
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */

/* NO-JS */

.no-js .c-product-close,
.no-js .c-product-show-all {
	display: none;
}

.no-js .c-producttablerow--additionalmobile {
	max-height: 30rem;
}

.no-js .c-producttablerow .icon-chevron-down {
	display: none;
}

/* nojs */

.no-js .c-producttablerow-details {
	display: block !important; /* stylelint-disable-line declaration-no-important */
	height: auto;
}

.no-js .c-producttablerow-details--inner {
	margin: 0;
}

.no-js .c-producttablerow.c-producttablerow--cta {
	height: auto;
	background-color: var(--color-white-500);
}

.no-js .c-producttablerow.c-producttablerow--cta h2 {
	display: none;
}

.no-js .c-producttablerow.c-producttablerow--cta .c-producttablerow-seedetails {
	display: none;
}

.no-js .c-producttablerow-details .base-button,
.no-js .c-product .c-producttablerow-details--inner ul,
.no-js .c-product .c-producttablerow-details--inner ol {
	margin-left: 0;
	margin-bottom: calc(var(--base-line-height));
}

/* keyframes */

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.no-js .fade-in {
	opacity: 0;
	animation: fade-in ease-in 1;
	animation-fill-mode: forwards;
	animation-duration: 1000ms;
	animation-delay: 700ms;
}

/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/producttable/clientlib/css/producttable-legend.css ***!
  \*********************************************************************************************************************************************************************************************************************************/
/**
 * @file producttable-legend.css
 *
 * @description
 * Define Producttable Legend
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors.
 * 3. Indent your rules, only one rule per line.
 * 4. Keep proprietary properties directly below the proposed property.
 * 5. Comment your css. Especially hacks or tricky parts using cssdoc-comments
 *
 */
.c-producttablecontainer-legend {
	text-align: center;
	width: 100%;
	position: relative;
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-producttablecontainer-legend .icon-doublecheck-legacy::before {
	font-size: var(--font-size-6);
}

.c-producttablecontainer-legend .icon-checkmark::before,
.c-producttablecontainer-legend .icon-doublecheck-legacy::before {
	color: var(--color-green-500);
}

.c-producttablecontainer-legend .icon-close-bold-legacy::before {
	color: var(--color-gray-400);
}

.c-producttablecontainer-legend-title,
.c-producttablecontainer-legend-icon {
	font-size: var(--font-size-text-small);
}

.c-producttablecontainer-legend span {
	white-space: nowrap;
	margin-right: var(--base-line-height);
	position: relative;
}

.c-producttablecontainer-legend span::before {
	padding-right: calc(0.5 * var(--base-line-height));
	vertical-align: bottom;
}

.c-producttablecontainer-footnote {
	display: block;
	color: var(--color-gray-600);
	font-size: var(--font-size-text-small);
}

/**
 * Breakpoints
 */
@media screen and (max-width: 767px),print {
	.c-producttablecontainer-legend {
		text-align: left;
		margin-bottom: calc(1 * var(--base-line-height));
	}

	.c-producttablecontainer-footnotes {
		margin-top: calc(-2 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-producttablecontainer-legend span:last-child {
		margin-right: 0;
	}

	.c-producttablecontainer-footnotes {
		margin-left: calc(12.5 * var(--base-line-height));
		margin-top: calc(1.5 * var(--base-line-height));
	}
}

/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/rotating-teaser/clientlib/css/rotating-teaser-animations.css ***!
  \*******************************************************************************************************************************************************************************************************************************************/
@keyframes c-rotating-teaser-slide-from-right {
	from {
		transform: translateX(5rem);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes c-rotating-teaser-scale-from-right {
	from {
		transform: translateX(10rem) scale(1.3);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes c-rotating-teaser-scale-to-left {
	from {
		transform: none;
		opacity: 1;
	}

	to {
		transform: translateX(-10rem) scale(1.3);
		opacity: 0;
	}
}

@keyframes c-rotating-teaser-slide-to-left {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateX(-5rem);
	}
}

@keyframes c-rotating-teaser-fill {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

@keyframes c-rotating-teaser-unfill {
	from {
		width: 100%;
	}

	to {
		width: 0;
	}
}

@keyframes c-rotating-teaser-arrow {
	from {
		transform: translateX(-10rem);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes c-rotating-teaser-arrow-rtl {
	from {
		transform: translateX(10rem);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes c-rotating-teaser-arrow-appear {
	0% {
		opacity: 0;
	}

	80% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/rotating-teaser/clientlib/css/rotating-teaser.css ***!
  \********************************************************************************************************************************************************************************************************************************/
.c-rotating-teaser {
	height: 56.9rem; /* We start with a fixed height */
	position: relative;
	overflow: hidden;
}

.c-rotating-teaser--gradient-overlay {
	background: var(--linear-gradient-gray-to-top);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.c-rotating-teaser--absolute-left,
.c-rotating-teaser--absolute-right {
	position: absolute;
}

.c-rotating-teaser--absolute-left {
	left: 0;
}

.c-rotating-teaser--absolute-right {
	right: 0;
}

.c-rotating-teaser--content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 100%;
}

.c-rotating-teaser--viewport {
	margin: auto;
	padding-left: calc(1.5 * var(--base-line-height));
	padding-right: calc(1.5 * var(--base-line-height));
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 768px),print {
	.c-rotating-teaser {
		height: 0;
		padding-bottom: calc(9 / 21 * 100%); /* Let's flip to aspect-ratio 21/9 */
	}

	.c-rotating-teaser--viewport {
		padding-left: 10rem;
		padding-right: 10rem;
	}
}

@media screen and (min-width: 1024px),print {
	.c-rotating-teaser--viewport {
		padding-left: 12.2rem;
		padding-right: 12.2rem;
	}
}

@media screen and (min-width: 1365px) {
	.c-rotating-teaser--viewport {
		max-width: 99.5rem;
		padding: 0;
	}
}

@media screen and (min-width: 1920px) {
	.c-rotating-teaser--viewport {
		max-width: 119.7rem;
	}
}

/*!**************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/rotating-teaser/clientlib/css/rotating-teaser-arrow.css ***!
  \**************************************************************************************************************************************************************************************************************************************/
.c-rotating-teaser--navigation-arrow {
	align-items: center;
	background-color: transparent;
	border: 0;
	color: var(--color-white-500);
	cursor: pointer;
	display: none;
	height: 100%;
	opacity: 0.7;
	transition: opacity 500ms;
	z-index: 2;
}

.c-rotating-teaser--navigation-arrow::before {
	content: " ";
	position: absolute;
	background-image: linear-gradient(to right, rgba(25, 25, 25, 0.8), rgba(25, 25, 25, 0));
	display: block;
	width: 0;
	height: 100%;
	transition: width 250ms;
	z-index: -1;
}

/* rtl:raw:
.c-rotating-teaser--navigation-arrow::before {
	right: 0;
	background-image: linear-gradient(to left, rgba(25, 25, 25, 0.8), rgba(25, 25, 25, 0));
}
*/

.c-rotating-teaser--navigation-arrow-icon {
	font-size: 5.6rem;
	position: relative;
}

.c-rotating-teaser--navigation-arrow-icon.icon-chevron-back.c-rotating-teaser--navigation-arrow,
.c-rotating-teaser--navigation-arrow-icon.icon-chevron-forward {
	left: 1.8rem;
}

.c-rotating-teaser--navigation-arrow-left .c-rotating-teaser--navigation-arrow-icon,
.c-rotating-teaser--navigation-arrow-right .c-rotating-teaser--navigation-arrow-icon {
	transform: translateX(-10rem);
	opacity: 0;
}

.c-rotating-teaser--navigation-arrow:focus-visible {
	outline-offset: -0.2rem;
	outline: solid 0.2rem var(--color-red-500);
}

.c-rotating-teaser--navigation-arrow-right {
	transform: rotateY(180deg);
}

/* rtl:raw:
.c-rotating-teaser--navigation-arrow-left .c-rotating-teaser--navigation-arrow-icon,
.c-rotating-teaser--navigation-arrow-right .c-rotating-teaser--navigation-arrow-icon {
	transform: translateX(10rem);
}

.c-rotating-teaser--navigation-arrow-left,
.c-rotating-teaser--navigation-arrow-right {
	transform: rotateY(180deg);
}

.c-rotating-teaser--navigation-arrow-right {
	transform: rotateY(0);
}
*/

@media screen and (min-width: 768px),print {
	.c-rotating-teaser--navigation-arrow {
		display: flex;
	}
}

/*!**************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/rotating-teaser/clientlib/css/rotating-teaser-slide.css ***!
  \**************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable no-unknown-animations */

.is-editmode .c-rotating-teaser--slide {
	position: relative;
	display: block;
}

.c-rotating-teaser--slide {
	display: none;
	flex: 1;
}

.c-rotating-teaser--slide-active {
	display: block;
}

.c-rotating-teaser--slide-active > .c-rotating-teaser--slide-content {
	animation: c-rotating-teaser-slide-from-right 1000ms ease-in-out 750ms backwards;
}

.c-rotating-teaser--slide-active > .c-background-media {
	animation: c-rotating-teaser-scale-from-right 1000ms ease-in-out 0ms backwards;
}

.c-rotating-teaser--slide-exiting {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.c-rotating-teaser--slide-exiting > .c-background-media {
	animation: c-rotating-teaser-scale-to-left 1000ms ease-in-out 0ms backwards;
}

.c-rotating-teaser--slide-exiting .c-rotating-teaser--cta {
	animation: c-rotating-teaser-slide-to-left 500ms ease-in-out 500ms backwards;
}

.c-rotating-teaser--slide-exiting ~ .c-rotating-teaser--gradient-overlay {
	z-index: 10;
}

.c-rotating-teaser--slide-content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	padding-bottom: calc(5 * var(--base-line-height));
	padding-top: calc(5 * var(--base-line-height));
	width: 100%;
	margin-top: 0 important !;
}

.c-rotating-teaser--slide-content-top {
	justify-content: flex-start;
}

.c-rotating-teaser--slide-content-bottom {
	justify-content: flex-end;
}

.c-rotating-teaser--cta {
	padding: 1rem 3rem 1.1rem;
	width: auto;
}

@media screen and (min-width: 480px) and (max-width: 665px), screen and (min-width: 666px) and (max-width: 767px), screen and (min-width: 768px), print {

	/* Non mobile content will always be centered aligned */
	.c-rotating-teaser--slide-content-top,
	.c-rotating-teaser--slide-content-bottom {
		justify-content: center;
	}
}

@media screen and (min-width: 1024px),print {
	.c-rotating-teaser--slide-content {
		padding-bottom: 0;
		padding-top: 0;
	}
}

/*!*****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/rotating-teaser/clientlib/css/rotating-teaser-headline.css ***!
  \*****************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable no-unknown-animations */

.c-rotating-teaser--headline {
	width: 100%;
	user-select: text;
	margin-bottom: var(--base-line-height);
}

.c-rotating-teaser--headline > .c-rotating-teaser--tagline {
	display: block;
	text-transform: uppercase;
	margin-bottom: calc(var(--base-line-height) / 2);
}

.c-rotating-teaser--headline.tiny {
	font-size: var(--font-size-h2-mobile-small);
	line-height: var(--font-size-h2-mobile-small);
}

.c-rotating-teaser--headline.small {
	font-size: var(--font-size-campaign-level2-mobile);
	line-height: var(--font-size-h1-mobile-small);
}

.c-rotating-teaser--headline.tiny > .c-rotating-teaser--tagline,
.c-rotating-teaser--headline.small > .c-rotating-teaser--tagline {
	line-height: 2rem;
}

.c-rotating-teaser--headline.tiny > .c-rotating-teaser--tagline {
	font-size: var(--font-size-h5);
}

.c-rotating-teaser--headline.small > .c-rotating-teaser--tagline {
	font-size: var(--font-size-text-large);
	line-height: 2rem;
}

.c-rotating-teaser--slide-exiting .c-rotating-teaser--tagline {
	animation: c-rotating-teaser-slide-to-left 500ms ease-in-out 0ms backwards;
	opacity: 0;
}

.c-rotating-teaser--slide-exiting .c-rotating-teaser--headline {
	animation: c-rotating-teaser-slide-to-left 500ms ease-in-out 250ms backwards;
	opacity: 0;
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-rotating-teaser--headline {
		width: 36.2rem;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-rotating-teaser--headline {
		width: 40.9rem;
	}
}

@media screen and (min-width: 768px),print {
	.c-rotating-teaser--headline {
		width: 44.9rem;
	}

	.c-rotating-teaser--headline.small {
		font-size: var(--font-size-campaign-level2-tablet);
		line-height: 3.5rem;
	}

	.c-rotating-teaser--headline.small > .c-rotating-teaser--tagline {
		font-size: var(--font-size-h4);
	}
}

@media screen and (min-width: 1024px),print {
	.c-rotating-teaser--headline {
		width: 62rem;
	}

	.c-rotating-teaser--headline.tiny {
		font-size: var(--font-size-h1-mobile-small);
		line-height: var(--font-size-h1-mobile-small);
	}

	.c-rotating-teaser--headline.small {
		font-size: var(--font-size-campaign-level2-desktop-small);
		line-height: var(--font-size-campaign-level2-desktop-small);
	}
}

@media screen and (min-width: 1365px) {
	.c-rotating-teaser--headline {
		width: 69rem;
	}

	.c-rotating-teaser--headline.tiny {
		font-size: var(--font-size-h2-mobile-large);
		line-height: 3.5rem;
	}

	.c-rotating-teaser--headline.small {
		font-size: var(--font-size-campaign-level2-desktop-large);
		line-height: 4.9rem;
	}

	.c-rotating-teaser--headline.tiny > .c-rotating-teaser--tagline {
		font-size: var(--font-size-5);
	}

	.c-rotating-teaser--headline.small > .c-rotating-teaser--tagline {
		font-size: var(--font-size-5);
	}
}

@media screen and (min-width: 1920px) {
	.c-rotating-teaser--headline.tiny {
		font-size: var(--font-size-h1-mobile-large);
		line-height: var(--font-size-h1-mobile-large);
	}

	.c-rotating-teaser--headline.small {
		font-size: var(--font-size-campaign-level1-desktop-large);
		line-height: var(--font-size-campaign-level1-desktop-large);
	}
}

/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/rotating-teaser/clientlib/css/rotating-teasers-navigator.css ***!
  \*******************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable no-unknown-animations */

:root {
	--c-rotating-teaser-button-mobile-padding: calc(var(--base-line-height) / 2);
	--c-rotating-teaser-button-padding: calc(var(--base-line-height) * 1.5 / 2);
}

.c-rotating-teasers--navigator {
	bottom: 0;
	color: var(--color-white-500);
	display: flex;
	list-style: none;
	padding-bottom: calc(1.5 * var(--base-line-height));
	position: absolute;
	width: 100%;
	z-index: 1;
}

.c-rotating-teasers--navigator-item {
	animation: c-rotating-teaser-slide-from-right ease-in-out 1000ms forwards;
	opacity: 0;
}

.c-rotating-teasers--navigator-item:first-child {
	margin-left: calc(-1 * var(--c-rotating-teaser-button-mobile-padding));
}

.c-rotating-teasers--navigator-item:nth-child(2n) {
	animation-delay: 250ms;
}

.c-rotating-teasers--navigator-item:nth-child(3n) {
	animation-delay: 500ms;
}

.c-rotating-teasers--navigator-item:nth-child(4n) {
	animation-delay: 750ms;
}

.c-rotating-teasers--navigator-item-active {
	color: var(--color-white-500);
}

.c-rotating-teasers--navigator-item-active > .c-rotating-teasers--navigator-button {
	opacity: 1;
}

.c-rotating-teasers--navigator-item-active > .c-rotating-teasers--navigator-button > .c-rotating-teaser--progress-bar {
	background-color: var(--color-white-500);
	justify-content: flex-start;
}

.c-rotating-teasers--navigator-item-active > .c-rotating-teasers--navigator-button > .c-rotating-teaser--progress-bar > .c-rotating-teaser--progress {
	animation-delay: 1000ms;
	animation-name: c-rotating-teaser-fill;
}

.c-rotating-teasers--navigator-button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-text-small);
	font-weight: bold;
	height: 100%;
	line-height: 1.9rem;
	opacity: 0.7;
	padding: var(--c-rotating-teaser-button-mobile-padding)
		var(--c-rotating-teaser-button-mobile-padding) 0;
	pointer-events: none;
	text-align: left;
	transition: color 250ms, opacity 250ms;
}

.c-rotating-teasers--navigator-button:hover,
.c-rotating-teaser--radio:focus-visible ~ .c-rotating-teasers--navigator-button {
	color: var(--color-red-500);
	opacity: 1;
}

.c-rotating-teaser--radio {
	position: absolute;
	left: -999rem;
	width: 0;
	height: 0;
	overflow: hidden;
}

.c-rotating-teaser--radio:focus-visible ~ .c-rotating-teasers--navigator-button {
	outline: solid 0.2rem var(--color-red-500);
}

.c-rotating-teasers--navigator-button-content {
	display: none;
	flex-grow: 1;
	width: 14rem;
}

.c-rotating-teaser--progress-bar {
	background-color: var(--color-white-500);
	display: flex;
	height: 0.2rem;
	justify-content: flex-end;
	margin-bottom: -0.2rem;
	margin-top: var(--base-line-height);
	min-width: 4.2rem;
	width: 100%;
}

.c-rotating-teaser--progress {
	animation-delay: 1ms;
	animation-duration: 1000ms;
	animation-fill-mode: forwards;
	animation-name: c-rotating-teaser-unfill;
	animation-play-state: paused;
	animation-timing-function: linear;
	background-color: var(--color-red-500);
	height: 100%;
}

.c-rotating-teaser--animations-paused .c-rotating-teasers--navigator-item-active .c-rotating-teaser--progress {
	animation-play-state: paused !important; /* stylelint-disable-line declaration-no-important */
}

@media screen and (min-width: 1024px),print {
	.c-rotating-teasers--navigator {
		padding-bottom: calc(3 * var(--base-line-height));
		position: static;
	}

	.c-rotating-teasers--navigator-item:first-child {
		margin-left: calc(-1 * var(--c-rotating-teaser-button-padding));
	}

	.c-rotating-teasers--navigator-button {
		pointer-events: all;
		padding: var(--c-rotating-teaser-button-padding)
			var(--c-rotating-teaser-button-padding) 0;
	}

	.c-rotating-teasers--navigator-button-content {
		display: block;
	}

	.c-rotating-teaser--animations-paused .c-rotating-teaser--navigation-arrow {
		opacity: 1;
	}

	.c-rotating-teaser--animations-paused .c-rotating-teaser--navigation-arrow::before {
		width: 100%;
	}

	.c-rotating-teaser--animations-paused .c-rotating-teaser--navigation-arrow-left .c-rotating-teaser--navigation-arrow-icon {
		animation: c-rotating-teaser-arrow-appear 100ms forwards, c-rotating-teaser-arrow 400ms ease-in-out forwards;
	}

	.c-rotating-teaser--animations-paused .c-rotating-teaser--navigation-arrow-right .c-rotating-teaser--navigation-arrow-icon {
		animation: c-rotating-teaser-arrow-appear 100ms forwards, c-rotating-teaser-arrow 400ms ease-in-out forwards;
	}

	/* rtl:raw:
	.c-rotating-teaser--animations-paused .c-rotating-teaser--navigation-arrow-left .c-rotating-teaser--navigation-arrow-icon {
		animation: c-rotating-teaser-arrow-appear 100ms forwards, c-rotating-teaser-arrow-rtl 400ms ease-in-out forwards;
	}

	.c-rotating-teaser--animations-paused .c-rotating-teaser--navigation-arrow-right .c-rotating-teaser--navigation-arrow-icon {
		animation: c-rotating-teaser-arrow-appear 100ms forwards, c-rotating-teaser-arrow-rtl 400ms ease-in-out forwards;
	}
	*/
}

@media screen and (min-width: 1365px) {
	.c-rotating-teasers--navigator-button {
		font-size: var(--font-size-text-large);
		line-height: 2.3rem;
	}

	.c-rotating-teasers--navigator-button-content {
		width: 18.2rem;
	}
}

@media screen and (min-width: 1920px) {
	.c-rotating-teasers--navigator {
		padding-bottom: calc(5 * var(--base-line-height));
	}

	.c-rotating-teasers--navigator-item {
		width: 25%;
	}

	.c-rotating-teasers--navigator-button-content {
		width: 100%;
	}
}

/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/slider-pagination/clientlib/css/slider-pagination.css ***!
  \************************************************************************************************************************************************************************************************************************************/
.c-slider-navigation-wrapper--csb {
	justify-content: center;
	width: 100%;
}

.c-slider-navigation--csb .c-slider--index {
	position: relative;
	top: 0;
	margin-top: 0;
	transition: margin-left 200ms ease-in-out;
}

.c-slider-navigation--csb .c-slider-wrapper {
	overflow: hidden;
	margin: 0.1rem 1.5rem 0;
	padding: 0 1.5rem;
	justify-content: start;
}

.left-aligned-grid .c-slider-navigation--csb .c-slider-wrapper {
	margin-top: 0.3rem;
}

.c-slider-navigation--csb .c-slider-control--csb.is-left {
	position: absolute;
	left: 0;
	font-size: var(--font-size-4);
}

.c-slider-navigation--csb .c-slider-control--csb.is-right {
	position: absolute;
	right: 0;
	font-size: var(--font-size-4);
}

.left-aligned-grid .c-slider-navigation--csb .c-slider-control--csb:focus {
	outline: 0.1rem solid var(--color-black-500);
	outline-offset: -0.1rem;
	color: var(--color-black-400);
}

.left-aligned-grid .c-slider-navigation--csb .c-slider-control--csb span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: 2.4rem;
}

.c-slider-navigation--csb .c-slider--index li.is-small {
	transform: scale(0.6);
}

.c-slider-navigation--csb a.c-slider-control--csb:focus,
.c-slider-navigation--csb a.c-slider-control--csb.is-right:hover span::before,
.c-slider-navigation--csb a.c-slider-control--csb.is-left:hover span::before,
.c-slider-navigation--csb a.c-slider-control--csb.is-right:hover,
.c-slider-navigation--csb a.c-slider-control--csb.is-left:hover,
.left-aligned-grid .c-slider-navigation--csb .c-slider-control--csb:hover:focus {
	color: var(--color-red-500);
	cursor: pointer;
}

/* rtl:raw:
.c-slider-navigation--csb .c-slider-control--csb.is-right span::before,
.c-slider-navigation--csb .c-slider-control--csb.is-left span::before {
    transform: rotateY(180deg);
    display:inline-block;
}
*/

@media screen and (max-width: 767px),print {
	.c-slider-navigation--csb .c-slider-control--csb.is-right,
	.c-slider-navigation--csb .c-slider-control--csb.is-left {
		visibility: hidden;
	}
}

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/smart-horizontal-teaser-campaign/clientlib/css/smart-horizontal-teaser-campaign.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
body.black .c-smart-horizontal-teaser-campaign {
	color: var(--color-white-500);
}

.c-smart-horizontal-teaser-campaign {
	max-width: 192rem;
	width: 100%;
	overflow: hidden;
	display: none;
	margin-top: calc(2.5 * var(--base-line-height));
}

.is-editmode .c-smart-horizontal-teaser-campaign,
.is-editmode .c-smart-horizontal-teaser-campaign--headline.js-hidden {
	display: block;
}

.c-smart-horizontal-teaser-campaign--headline.js-hidden,
.c-smart-horizontal-teaser-campaign--slider-pagination.js-hidden {
	display: none;
}

.c-smart-horizontal-teaser-campaign--headline {
	font-size: var(--font-size-h4);
	line-height: 2.4rem;
	margin-bottom: calc(2.5 * var(--base-line-height));
	margin-left: auto;
	margin-right: auto;
	padding: 0 calc(1.5 * var(--base-line-height));
	text-align: center;
}

.c-smart-horizontal-teaser-campaign--author-preview-cta-container {
	display: none;
	justify-content: center;
}

.is-editmode .c-smart-horizontal-teaser-campaign--author-preview-cta-container {
	display: flex;
}

.c-smart-horizontal-teaser-campaign--author-preview-cta {
	width: 100%;
	min-height: 29.2rem;
}

.c-smart-horizontal-teaser-campaign--loading-indicator {
	margin: calc(6 * var(--base-line-height)) 0;
	min-height: 6rem;
	position: static;
}

.c-smart-horizontal-teaser-campaign--slider-container {

	/* Need important to overwrite the value set by JS code (via style attribute) */
	height: auto !important; /* stylelint-disable-line declaration-no-important */
}

.c-smart-horizontal-teaser-campaign--slider {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	transition: left 400ms, margin-left 200ms;
	display: flex;
}

.c-smart-horizontal-teaser-campaign--slider-pagination {
	margin-top: calc(3.5 * var(--base-line-height));
}

.c-smart-horizontal-teaser-campaign--slider-pagination .c-slider--navigation {
	margin-bottom: 0;
	position: relative;
	min-height: 2.5rem;
}

.is-editmode .c-smart-horizontal-teaser-campaign--slider-pagination {
	display: none;
}

.c-smart-horizontal-teaser-campaign--slider-pagination > .c-slider-navigation-wrapper--csb {
	margin: 0;
}

.c-smart-horizontal-teaser-campaign--slider-pagination .c-slider-wrapper {
	align-items: baseline;
	display: flex;
	margin: 0 calc(var(--base-line-height) + 0.1rem);
	padding: 0 calc(var(--base-line-height) + 0.1rem);
}

.c-smart-horizontal-teaser-campaign--slider-pagination .c-slider--index li {
	background-color: var(--color-gray-200);
	border: 0.1rem solid var(--color-gray-500);
	box-sizing: border-box;
	height: 0.8rem;
	width: 0.8rem;
}

.c-smart-horizontal-teaser-campaign--slider-pagination .c-slider-control--csb[style*="display: none;"] {

	/* I need to overwrite a value set by JS via inline scripts */
	display: block !important; /* stylelint-disable-line declaration-no-important */
	visibility: hidden;
}

.c-smart-horizontal-teaser-campaign--slider-pagination .c-slider--index .is-active {
	border: 0.1rem solid var(--color-red-400-4);
	background-color: var(--color-red-500);
	transform: none;
}

@media screen and (min-width: 666px) and (max-width: 767px), screen and (min-width: 768px), print {
	.c-smart-horizontal-teaser-campaign--headline {
		font-size: var(--font-size-7);
		line-height: calc(2.5 * var(--base-line-height));
		max-width: 40.9rem;
		padding: 0;
	}
}

@media screen and (min-width: 768px),print {
	.c-smart-horizontal-teaser-campaign--headline {
		max-width: 56.7rem;
	}
}

@media screen and (min-width: 1024px),print {
	.c-smart-horizontal-teaser-campaign--headline {
		max-width: 62rem;
	}
}

@media screen and (min-width: 1365px) {
	.c-smart-horizontal-teaser-campaign--headline {
		max-width: 79.1rem;
	}
}

@media screen and (min-width: 768px),print {
	.c-smart-horizontal-teaser-campaign {
		margin-top: calc(3 * var(--base-line-height));
	}

	.c-smart-horizontal-teaser-campaign--slider-pagination {
		margin-top: calc(2 * var(--base-line-height));
	}
}

/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/smart-stage/clientlib/css/smart-stage.css ***!
  \************************************************************************************************************************************************************************************************************************/
.c-smart-stage {
	display: flex;
	position: relative;
	margin-top: 0;
	max-width: var(--width-page-fullwidth);
	margin-left: auto;
	margin-right: auto;
	min-height: 32rem;
}

.c-smart-stage--container {
	display: flex;
	position: relative;
	padding: 3rem calc(1.5 * var(--base-line-height)) 3.4rem calc(1.5 * var(--base-line-height));
	width: 100%;
}

.c-smart-stage--content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.c-smart-stage--content-text {
	width: var(--grid-cols-12);
	color: var(--color-white-500);
}

.c-smart-stage--content-text--color-black {
	color: var(--color-black-400);
}

.c-smart-stage--content-link {
	margin-bottom: 0;
	font-size: var(--font-size-2);
	width: 100%;
}

.c-smart-stage--content-link.link-external::after {
	top: 0;
}

.c-smart-stage--content-button {
	position: relative;
	background-color: var(--color-red-500);
	border-radius: 0.4rem;
	color: var(--color-white-500);
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: var(--font-size-2);
	min-height: 4.4rem;
	min-width: calc(8.5 * var(--base-line-height));
	width: 100%;
	display: inline-block;
	font-weight: bold;
	transition: background-color 200ms;
	cursor: pointer;
}

.c-smart-stage--content-button:hover {
	background-color: var(--color-red-400);
}

.c-smart-stage--content-button-icon {
	display: flex;
	margin-right: 0.7rem;
}

.c-smart-stage--content-button-icon::before {
	top: 0.2rem;
}

.c-smart-stage--content-headline {
	font-size: var(--font-size-h2-mobile-large);
	line-height: 4.6rem;
	margin-bottom: 0.6rem;
}

.c-smart-stage--content-copy-text p {
	font-size: var(--font-size-h1-mobile-small);
	line-height: 3.4rem;
	font-weight: 200;
	margin-bottom: 3.8rem;
}

.c-smart-stage--content-tiles {
	width: var(--grid-cols-12);
	margin-bottom: 0;
	margin-top: 5.2rem;
}

@media screen and (min-width: 768px),print {
	.c-smart-stage--content-button,
	.c-smart-stage--content-link {
		width: fit-content;
	}

	.c-smart-stage--container {
		padding: calc(2 * var(--base-line-height)) calc(3 * var(--base-line-height)) 3.8rem;
	}

	.c-smart-stage--content-headline {
		font-size: 4.8rem;
		line-height: 6.7rem;
	}

	.c-smart-stage--content-copy-text p {
		font-size: var(--font-size-h2-mobile-large);
		line-height: 4.6rem;
	}
}

@media screen and (min-width: 1024px),print {
	.c-smart-stage {
		min-height: 54rem;
	}

	.c-smart-stage--content {
		flex-wrap: nowrap;
	}

	.c-smart-stage--content-text {
		width: calc(var(--grid-cols-8));
		padding-right: 5.6rem;
		margin-bottom: 0;
	}

	.c-smart-stage--content-tiles {
		width: calc(var(--grid-cols-4) + var(--grid-col-gap));
		margin-bottom: 0;
		margin-top: 0;
	}

	.c-smart-stage--container {
		padding: 5.8rem calc(3 * var(--base-line-height)) calc(4 * var(--base-line-height));
	}
}

@media screen and (min-width: 1365px) {
	.c-smart-stage--container {
		padding: 5.8rem calc(6 * var(--base-line-height)) 5.6rem;
	}
}

@media screen and (min-width: 1920px) {
	.c-smart-stage--container {
		padding: 5.8rem 36.2rem 5.6rem;
	}
}

/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/smart-stage/clientlib/css/smart-stage-tile.css ***!
  \*****************************************************************************************************************************************************************************************************************************/
.c-smart-stage-tile-wrapper {
	width: 100%;
}

.c-smart-stage-tile-result {
	margin-bottom: 2.1rem;
}

.c-smart-stage-tile {
	display: flex;
	width: 100%;
	color: var(--color-black-400);
	background-color: var(--color-white-500);
	border-radius: 0.4rem;
}

.c-smart-stage-tile:hover .c-smart-stage-tile--text-title {
	color: var(--color-red-400);
	text-decoration: underline;
}

.c-smart-stage-tile:focus {
	box-shadow: var(--shadow-large);
}

.c-smart-stage-tile--image {
	width: 11.4rem;
	padding: var(--base-line-height) 0 var(--base-line-height) var(--base-line-height);
}

.c-smart-stage-tile--image img {
	width: 10rem;
	height: 10rem;
	object-fit: cover;
}

.c-smart-stage-tile--text {
	width: calc(100% - 15.4rem);
	padding: 2rem 0.8rem;
}

.c-smart-stage-tile--text-title {
	margin-bottom: 0.8rem;
	font-size: var(--font-size-2);
	line-height: 2rem;
}

.c-smart-stage-tile--text-date {
	margin-bottom: 0;
	font-size: var(--font-size-1);
	line-height: 1.8rem;
}

.c-smart-stage-tile--link-icon {
	display: flex;
	width: 4rem;
	align-items: center;
	color: var(--color-red-500);
	font-size: var(--font-size-4);
}

.c-smart-stage-tile--link-icon::after {
	font-size: var(--font-size-4);
	margin: 0;
}

.c-smart-stage-tile-result .c-smart-stage-tile {
	min-height: 15.6rem;
}

@media screen and (max-width: 767px),print {
	.c-smart-stage-tile-result .c-smart-stage-tile {
		min-height: 12.8rem;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-smart-stage-tile-result .c-smart-stage-tile {
		min-height: 12.8rem;
	}
}

@media screen and (min-width: 1024px),print {
	.c-smart-stage-tile-result .c-smart-stage-tile {
		min-height: 12.8rem;
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/static-cards/clientlib/css/static-cards.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/**
 * General styles
 */
.c-static-cards {
	display: flex;
	flex-wrap: wrap;
}

.c-static-cards:not(.component-margin) {
	margin-bottom: 0;
}

.c-static-cards--card {
	width: 100%;
	overflow: hidden;
	border-radius: 0.4rem;
	box-shadow: var(--shadow-small);
	border-left: 0.3rem solid var(--color-yellow-500);
	padding: calc(2 * var(--base-line-height));
	margin: 0 calc(1.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height)) 0;
}

/**
 * Styles specifying the width of a card depending on the number of cards and
 * the current viewport (this CSS classes are dynamically set via Javascript)
 */
.c-static-cards--card-full {
	width: 100%;
}

.c-static-cards--card-half {
	width: calc((100% - 2.1rem ) / 2);
}

.c-static-cards--card-third {
	width: calc((100% - 4.2rem) / 3);
}

.c-static-cards--card-quarter {
	width: calc((100% - 6.3rem) / 4);
}

.c-static-cards--card:last-child,
.c-static-cards--card-full,
.c-static-cards--card-half:nth-child(2n) {
	margin-right: 0;
}

/* Global style for texts */
.c-static-cards--card-text {
	display: block;
}

.c-static-cards--card-text p {
	margin: 0;
}

/* Styles for top line text (used on text cards) */
.c-static-cards--card-top {
	font-size: 1.4rem;
	line-height: 1.8rem;
	color: var(--color-gray-600);
}

/* Styles for bottom line text (used on both text and logo cards) */
.c-static-cards--card-bottom {
	font-size: 1.4rem;
	line-height: 1.8rem;
	color: var(--color-black-400);
}

/* Styles for number (on text cards) and headline (on logo cards) */
.c-static-cards--card-main {
	font-weight: 200;
	font-size: 2.1rem;
	line-height: calc(2 * var(--base-line-height));
	color: var(--color-black-400);
}

/* Styles for the logo */
.c-static-cards--card-image {
	height: calc(5 * var(--base-line-height));
	margin-bottom: calc(2 * var(--base-line-height));
	max-width: 100%;
}

/* Increase font-size for viewport "--tablet-desktop" and larger */
@media screen and (min-width: 768px),print {
	.c-static-cards--card-main {
		font-size: 2.8rem;
		line-height: calc(3 * var(--base-line-height));
	}
}

/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/tracking-handover-link/clientlib/css/tracking-handover-link.css ***!
  \**********************************************************************************************************************************************************************************************************************************************/
.c-tracking-handover-link-fallbacklink {
	display: none;
}

.c-tracking-handover-link > .link-red:hover,
.link-red:focus {
	text-decoration: underline;
}

@media screen and (min-width: 768px),print {
	.c-tracking-handover-link {
		text-align: center;
	}
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/tracking-bar/clientlib/css/tracking-bar.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/**
 * @file components\general\tracking-bar\clientlib\css\tracking-bar.css
 *
 * @description
 * Defines the styles for the tracking-bar component.
 *
 * 1. Break code down into sections, use @section, @subsection
 * 2. Only put one selector per line for a block of rules that apply to multiple selectors
 * 3. Indent your rules, only one rule per line
 * 4. Keep proprietary properties directly below the proposed property
 * 5. Comment your CSS, especially hacks or tricky parts using cssdoc-comments
 */

.c-tracking-bar--form {
	display: flex;
	flex-direction: column;
	padding: var(--base-line-height);
	background-color: var(--color-gray-50);
}

.c-tracking-bar--label {
	padding: 0 0 calc(0.5 * var(--base-line-height));
}

.c-tracking-bar--input-inner-group {
	display: flex;
}

.c-tracking-bar--input {
	flex: 1 1 auto;
	padding: 0 calc(var(--base-line-height) - 0.1rem);
	height: calc(4 * var(--base-line-height));
	border: 0.1rem solid var(--color-gray-400);
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;

	/* see: https://webplatform.github.io/docs/css/properties/text-overflow/#Notes */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.c-tracking-bar--input.invalid {
	border: 0.1rem solid var(--color-red-500);
	border-right: 0;
}

.c-tracking-bar--input:hover,
.c-tracking-bar--input:focus,
.c-tracking-bar--input.invalid:hover,
.c-tracking-bar--input.invalid:focus {
	border: 0.1rem solid var(--color-black-400);
	border-right: 0;
}

.c-tracking-bar--input:focus {
	padding: 0 calc(var(--base-line-height) - 0.2rem);
	border: 0.2rem solid var(--color-black-400);
	border-right: 0;
}

.c-tracking-bar--input::placeholder {
	color: var(--color-gray-600);
}

.c-tracking-bar--input.invalid::placeholder {
	color: var(--color-red-500);
}

.c-tracking-bar--button {
	flex: 0 0 calc(4 * var(--base-line-height));
	margin-bottom: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	min-width: 0;
}

/* separate extended selector to achieve the necessary specificity */
.c-tracking-bar--button.base-button {
	display: flex;
}

/* rtl:raw:
.c-tracking-bar--button.base-button span::before {
	display: inline-block;
    transform: rotateY(180deg);
}
*/

.c-tracking-bar--error {
	padding: calc(0.5 * var(--base-line-height)) 0 0 0;
	line-height: calc(var(--base-line-height) + 0.1rem);
	color: var(--color-red-500);
	font-size: var(--font-size-text-small);
}

.c-tracking-bar--error:not(.visible) {
	display: none;
}

@media screen and (max-width: 767px),print {
	.c-tracking-bar {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-tracking-bar--form {
		flex-direction: row;
		justify-content: center;
	}

	.component-no-padding .c-tracking-bar--form {
		padding-bottom: 0;
	}

	.c-tracking-bar--label {
		padding: calc(1 * var(--base-line-height) + 0.4rem) 0 0;
		margin-right: 2.2rem;
	}

	.c-tracking-bar--input-outer-group {
		flex: 0 1 47.2rem;
	}

	.c-tracking-bar--button {
		flex: 0 0 auto;
		width: calc(6 * var(--base-line-height));
	}
}

/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/video-mi24pro/clientlib/css/video.css ***!
  \********************************************************************************************************************************************************************************************************************/
.c-video--title {
	line-height: var(--font-size-h1-mobile-small);
	margin-bottom: calc(0.5 * var(--base-line-height));
}

.c-video--headline,
.c-video--description,
.c-video--transcript {
	text-align: center;
}

.left-aligned-grid .c-video--headline,
.left-aligned-grid .c-video--transcript {
	text-align: left;
}

.c-video--headline {
	margin: 0 0 var(--base-line-height) 0;
}

.c-video--transcript {
	font-size: var(--font-size-text-large);
	line-height: calc(1.5 * var(--base-line-height));
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.c-video--transcript.small-transcript-text {
	font-size: var(--body-font-size);
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-video--transcript p:last-child,
.c-video--description p:last-child {
	margin-bottom: 0;
}

/*
Dangerous CSS right here!

We are overwriting Moving Image's `.mi-player ` class from our end to fix layout issue
(described by DPDHLPA-30411)[https://tools.publicis.sapient.com/jira/browse/DPDHLPA-30411]. Ideally Moving
Image would have to adjust their CSS to fix the issue but as their response time might take weeks we were
pragmatic about it and implemented the fix here.
*/
.c-video--player > .mi-player {
	overflow: hidden;
}

.c-video--description {
	color: var(--color-gray-600);
	text-align: left;
	opacity: 0.9;
	font-size: var(--base-line-height);
	line-height: var(--body-font-size);
	margin-top: calc(0.5 * var(--base-line-height));
	margin-bottom: 0;
}

.left-aligned-grid .c-video--description {
	color: var(--color-gray-600);
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-navigation/clientlib/css/navigation-fixed.css ***!
  \********************************************************************************************************************************************************************************************************************************/
/* Since most of the styles of fixed and slim navigation are equal,
   navigation-slim.css is heavily based on navigation-fixed.css in order to
   avoid duplicated code.
   Therefore, please always keep in mind that changes in this file could also be
   relevant for the slim navigation (if so, please add the respective slim
   navigation selector, too). */

@media screen and (min-width: 768px),print {
	.is-fixed .c-nav-primary .c-nav--toggle span.c-nav--toggle-more {
		margin-top: 1.3rem;
	}

	.is-fixed .c-nav-primary .c-nav--toggle.c-nav--toggle-less,
	.is-fixed .c-nav-primary .c-nav--toggle.c-nav--toggle-less span {
		height: 2.9rem;
	}

	.is-fixed .c-nav--fixed-searchbar,
	.is-slim .c-nav--fixed-searchbar {
		display: flex;
		position: relative;
		margin: var(--base-line-height) 0 0 calc(2.5 * var(--base-line-height));
	}

	.is-fixed .c-nav-customer-portal,
	.is-slim .c-nav-customer-portal {
		margin-top: 1.35rem;
		margin-left: 0;
	}

	.is-fixed .c-nav-customer-portal-headline,
	.is-slim .c-nav-customer-portal-headline {
		margin: 0.5rem 0 0.5rem calc(1.5 * var(--base-line-height));
		font-size: 0;
	}

	.is-fixed .c-nav-customer-portal-headline span,
	.is-slim .c-nav-customer-portal-headline span {
		padding-right: calc(0.5 * var(--base-line-height));
	}

	.is-fixed .c-nav-customer-portal.is-open .c-nav-flyout,
	.is-slim .c-nav-customer-portal.is-open .c-nav-flyout {
		transform: translate(-20rem);
	}

	.is-fixed .c-nav-login-btn,
	.is-slim .c-nav-login-btn {
		margin-top: calc(0.5 * var(--base-line-height));
	}

	.is-fixed .c-nav-primary > ul:not(.c-nav-list--right),
	.is-slim .c-nav-primary > ul:not(.c-nav-list--right) {
		margin: 1.35rem 0;
	}

	.is-fixed .c-nav-primary > ul:not(.c-nav-list--right) > li > a,
	.is-slim .c-nav-primary > ul:not(.c-nav-list--right) > li > a,
	.is-fixed .c-nav-primary > ul > .c-nav-customer-portal > a,
	.is-slim .c-nav-primary > ul > .c-nav-customer-portal > a {
		display: flex;
		margin-top: 0;
		margin-bottom: 0;
		height: 2.9rem;
		line-height: 2.9rem;
	}

	.is-fixed .c-nav-primary > ul:not(.c-nav-list--right) > li.has-icon > a,
	.is-slim .c-nav-primary > ul:not(.c-nav-list--right) > li.has-icon > a,
	.is-fixed .c-nav-primary > ul > .c-nav-customer-portal > a,
	.is-slim .c-nav-primary > ul > .c-nav-customer-portal > a {
		padding-right: calc(1.5 * var(--base-line-height));
	}

	.is-fixed .c-nav-primary > ul:not(.c-nav-list--right) > li > a::after,
	.is-slim .c-nav-primary > ul:not(.c-nav-list--right) > li > a::after,
	.is-fixed .c-nav-primary > ul > .c-nav-customer-portal > a::after,
	.is-slim .c-nav-primary > ul > .c-nav-customer-portal > a::after {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}

	.is-fixed .c-nav-primary > ul > .has-subnav.is-open::before,
	.is-slim .c-nav-primary > ul > .has-subnav.is-open::before {
		bottom: -1.3rem;
		z-index: 1;
	}

	.is-fixed .c-nav,
	.is-slim .c-nav {
		flex-wrap: nowrap;
		padding: 0 calc(3 * var(--base-line-height));
	}

	.is-fixed .c-nav-primary--meta,
	.is-slim .c-nav-primary--meta {
		display: none;
		opacity: 0;
	}

	.is-fixed .c-nav-primary--meta-container,
	.is-slim .c-nav-primary--meta-container {
		flex: 0 0 auto;
		max-width: none;
		width: auto;
	}

	.is-fixed .c-nav-primary,
	.is-slim .c-nav-primary {
		margin: 0;
		padding: 0;
	}

	.is-fixed .c-nav--logo,
	.is-slim .c-nav--logo {
		height: calc(4 * var(--base-line-height));
	}

	.is-fixed .c-nav--logo img,
	.is-slim .c-nav--logo img {
		width: auto;
		height: 1.75rem;
		max-width: none;
	}

	.is-fixed .c-nav-secondary--headline-container,
	.is-slim .c-nav-secondary--headline-container {
		background: none;
	}

	.is-fixed .c-nav-secondary,
	.is-slim .c-nav-secondary {
		background: var(--color-gray-50);
		left: 0;
		margin: 0 auto;
		max-width: 136.5rem;
		right: 0;
		z-index: 1001;
	}

	.is-fixed .c-nav-secondary {
		position: fixed;
		animation: animation-nav-secondary-fixed 400ms;
	}

	@keyframes animation-nav-secondary-fixed {
		0% {
			top: 0;
		}

		100% {
			top: calc(4 * var(--base-line-height));
		}
	}

	.is-fixed .c-nav--primary-search,
	.is-slim .c-nav--primary-search {
		display: flex;
		align-self: start;
		padding-top: 1.1rem;
	}

	.is-fixed .c-nav-secondary--container,
	.is-slim .c-nav-secondary--container {
		background: none;
	}

	.is-fixed .c-nav-secondary--headline,
	.is-slim .c-nav-secondary--headline {
		min-width: calc(13 * var(--base-line-height));
		display: flex;
		font-size: var(--font-size-2);
		margin-bottom: 0;
		max-height: calc(3.2 * var(--base-line-height));
	}

	.is-fixed .c-nav-secondary--headline span,
	.is-slim .c-nav-secondary--headline span {
		display: block;
		font-weight: bold;
		line-height: var(--base-line-height);
	}

	.is-fixed .c-nav-secondary--headline::after,
	.is-slim .c-nav-secondary--headline::after {
		content: "";
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.is-fixed .c-nav-customer-portal-headline span,
	.is-slim .c-nav-customer-portal-headline span {
		display: none;
	}
}

@media screen and (min-width: 1365px) {
	.full-width-grid .is-fixed .l-header,
	.full-width-grid .is-slim .l-header {
		max-width: none;
	}

	.full-width-grid .is-fixed .c-nav-secondary,
	.full-width-grid .is-slim .c-nav-secondary {
		max-width: none;
		padding-left: calc((100% - var(--width-page-max-nopadding)) / 2 - 4.2rem);
		padding-right: calc((100% - var(--width-page-max-nopadding)) / 2 - 4.2rem);
	}
}

/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-navigation/clientlib/css/navigation-slim.css ***!
  \*******************************************************************************************************************************************************************************************************************************/
/* Since most of the styles of fixed and slim navigation are equal,
   navigation-slim.css is heavily based on navigation-fixed.css in order to
   avoid duplicated code.
   Please do only add additional code which is exclusive to the slim navigation
   into this file. */

@media screen and (min-width: 768px),print {
	.is-slim .c-nav-primary > ul > li.is-nextline {
		opacity: 1;
		visibility: visible;
	}

	.is-slim .c-nav-primary > ul:not(.c-nav-list--right) {
		height: auto !important;/* stylelint-disable-line declaration-no-important */
	}

	.is-slim .c-nav-primary > ul > li > a.c-nav-customer-portal-headline {
		height: 3.2rem;
	}

	.is-slim .c-nav-primary > ul > li.c-nav-slim-more {
		margin-top: 1.35rem;
	}

	.is-slim .c-nav-primary > ul > li.c-nav-slim-more > a {
		display: flex;
		margin: 0 1rem 0 calc(2.5 * var(--base-line-height));
		height: 2.9rem;
	}

	.is-slim .c-nav-primary > ul > li.c-nav-slim-more > a::after {
		content: var(--icon-more-vertical);
		font-size: var(--font-size-4);
		padding-right: calc(0.5 * var(--base-line-height));
		top: 0;
		display: inline-block;
		left: calc(-2 * var(--base-line-height));
		position: absolute;
	}

	.is-slim .c-nav-primary .c-nav--toggle {
		display: none;
	}

	.c-nav-slim-more > a:first-child {
		font-weight: normal;
	}
}

/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-navigation/clientlib/css/navigation-mobile.css ***!
  \*********************************************************************************************************************************************************************************************************************************/
.c-nav--logo {
	display: flex;
	align-items: center;
	margin-right: 1.1rem; /* safe area to the right: 2.1rem = 1.1rem logo margin + 1rem mobile nav icon padding */
	height: calc(4 * var(--base-line-height)); /* needs absolute value instead of 100% for IE11 */
}

.c-nav--logo img {
	width: auto;
	height: 1.75rem;
	max-width: 100%;
}

@media screen and (max-width: 767px),print {
	.c-voc-nav .c-nav-search--headline {
		margin: calc(1.5 * var(--base-line-height)) 0;
	}

	.c-voc-nav .c-tracking-bar--input-outer-group {
		border: 0.1rem solid var(--color-gray-500);
		border-radius: 0.5rem;
	}

	.c-voc-nav .c-nav--menu-container--searchcontainer ul li {
		border-bottom: none;
	}

	.c-voc-nav .c-nav--menu-container--searchcontainer ul li a {
		padding: 0;
	}

	.c-nav--menu-container--infowrapper {
		margin-top: calc(3 * var(--base-line-height));
	}

	.c-voc-nav .c-nav--menu-container--searchcontainer .c-tracking-bar button::before {
		left: 0;
	}

	.c-nav--padding-layer {
		display: none;
	}

	.c-nav {
		flex-wrap: nowrap;
		position: fixed;
		top: 0;
		left: 0;
		padding-left: calc(1.5 * var(--base-line-height));
		width: 100%;
		height: calc(4 * var(--base-line-height));
		background: var(--linear-gradient-yellow-to-right);
	}

	.c-nav-primary,
	.c-nav-primary--meta {
		display: none;
	}

	.c-nav--layer {
		background-color: var(--color-white-500);
		display: none;
		height: 100%;
		left: 0;
		opacity: 1;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1001;
	}

	.c-nav--mobile {
		flex: 1 0 auto;
		margin-bottom: 0;
	}

	.c-nav--mobile--flag {
		border-radius: 50%;
		border: 0.1rem solid var(--color-gray-300);
		height: calc(2 * var(--base-line-height));
		margin-right: var(--base-line-height);
		overflow: hidden;
		width: calc(2 * var(--base-line-height));
	}

	.c-nav--mobile--country-helptext {
		font-weight: 200;
	}

	.c-nav--mobile li {
		list-style-type: none;
	}

	.c-nav--mobile > li {
		max-width: calc(3.5 * var(--base-line-height));
		min-width: calc(3.5 * var(--base-line-height));
		height: 100%;
		max-height: 100%;
	}

	.c-nav--mobile > .is-open {
		background: var(--color-white-500);
	}

	.c-nav--mobile .c-nav--menu-container li > .is-active {
		font-weight: bold;
	}

	.c-nav--mobile > li > a {
		display: block;
		padding: 1rem;
	}

	.c-nav--back-button a::before {
		color: var(--color-red-500);
		left: calc(-0.2 * var(--base-line-height));
		margin-right: calc(0.5 * var(--base-line-height));
		font-size: var(--font-size-text-small);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	/* rtl:raw:
	.c-nav--back-button a::before {
	transform: translateY(-50%) scaleX(-1);
  }
	*/

	.c-nav--mobile > li > a::before {
		color: var(--color-red-500);
		font-size: var(--font-size-h4);
		top: 0.2rem;
		right: 0.4rem;
	}

	.c-nav--mobile > li > .icon-globe::before,
	.c-nav--mobile > li > .icon-search::before {
		font-size: var(--font-size-text-largecondensed);
	}

	.c-nav--mobile > li > .icon-close-bold-legacy::before {
		font-size: 1.4rem;
		left: -0.7rem;
		top: 0.2rem;
	}

	.c-nav--button.type--menu {
		cursor: pointer;
		line-height: 1;
		padding: 1.56rem 1.3rem;
	}

	.c-nav--mobile .has-subnav .c-nav--menu-container {
		margin-top: calc(4 * var(--base-line-height));
		position: absolute;
		right: -100%;
		top: 0;
		width: 100%;
		transition: right 400ms;
	}

	.c-nav--button.type--menu.is-open + .c-nav--menu-container,
	.c-nav--button.type--menu:focus + .c-nav--menu-container {
		display: block;
		right: 0;
	}

	.c-nav--menu-icon {
		color: var(--color-red-500);
		font-size: var(--font-size-3);
		font-weight: 800;
		position: relative;
		width: 2.6rem;
		transform: rotate(0deg);
	}

	.type--menu .c-nav--menu-icon {
		padding: 1rem 0;
	}

	.c-nav--menu-icon span {
		background: var(--color-red-500);
		display: block;
		height: 0.3rem;
		left: 0;
		opacity: 1;
		position: absolute;
		width: 100%;
		transform: rotate(0deg);
		transition: left 250ms ease-in-out, top 250ms ease-in-out, transform 250ms ease-in-out, width 250ms ease-in-out;
	}

	.c-nav--menu-icon span:nth-child(1) {
		top: 0.1rem;
	}

	.c-nav--menu-icon span:nth-child(2),
	.c-nav--menu-icon span:nth-child(3) {
		top: 0.9rem;
	}

	.c-nav--menu-icon span:nth-child(4) {
		top: 1.7rem;
	}

	.type--menu.is-open .c-nav--menu-icon span:nth-child(1) {
		top: 0.9rem;
		width: 0%;
		left: 50%;
	}

	.type--menu.is-open .c-nav--menu-icon span:nth-child(2) {
		transform: rotate(45deg);
		height: 0.2rem;
	}

	.type--menu.is-open .c-nav--menu-icon span:nth-child(3) {
		transform: rotate(-45deg);
		height: 0.2rem;
	}

	.type--menu.is-open .c-nav--menu-icon span:nth-child(4) {
		top: 0.9rem;
		width: 0%;
		left: 50%;
	}

	.c-nav--mobile li ul {
		background: var(--color-white-500);
		display: none;
		margin-bottom: 0;
		position: absolute;
		right: 0;
		transition: right 400ms;
		max-height: calc(100vh - 5.6rem);
	}

	.c-nav--mobile .has-subnav > ul {
		right: -100%;
		top: 0;
		transition: right 400ms;
		max-height: calc(100vh - 5.6rem);

		/* DHLGLOBAL-6308: iOS bottom bar overlaps content */
		padding: 0 calc(1.5 * var(--base-line-height)) calc(7 * var(--base-line-height));
	}

	.c-nav--mobile .has-subnav.is-open > ul {
		display: block;
		position: absolute;
		right: -100%;
		z-index: 1000;
	}

	.c-nav--mobile .c-nav--button.type--country > ul {
		top: calc(4 * var(--base-line-height));
	}

	.c-nav--mobile .has-subnav.is-open .c-nav--menu-container {
		right: 0;
		min-height: calc(33vh - 5.6rem);
		height: auto;
	}

	.c-nav--mobile .has-subnav.is-open .c-nav--menu-container > ul {
		display: block;

		/* DHLGLOBAL-6308: iOS bottom bar overlaps content */
		padding: 0 calc(1.5 * var(--base-line-height)) calc(7 * var(--base-line-height));
	}

	/* DHLGLOBAL-6308 */
	.c-nav--mobile .has-subnav.is-open.c-nav--button.type--country ul {
		padding-bottom: 0;
	}

	.c-nav--mobile ul li {
		border-bottom: 0.1rem solid var(--color-gray-300);
	}

	.c-nav--mobile ul li a,
	.c-nav--mobile ul li .c-nav--country-selector-language {
		background-color: var(--color-white-500);
		color: var(--color-black-400);
		padding: calc(1.5 * var(--base-line-height)) 0 calc(1.5 * var(--base-line-height)) calc(0.5 * var(--base-line-height));
		font-weight: normal;
		line-height: calc(1.5 * var(--base-line-height));
		width: 100%;
		transition: background-color 200ms;
	}

	.c-nav--mobile ul li.c-nav--back-button a {
		padding-top: calc(1 * var(--base-line-height));
		padding-bottom: calc(1 * var(--base-line-height));
	}

	.c-nav--mobile ul .has-subnav > a::after {
		color: var(--color-red-500);
		content: var(--icon-chevron-forward);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	/* rtl:raw:
	.c-nav--mobile ul .has-subnav > a::after {
	  transform: translateY(-50%) scaleX(-1);
	}
	*/

	.c-nav--mobile ul .c-nav--mobile-meta {
		margin-left: calc(-1.5 * var(--base-line-height));
		margin-right: calc(-1.5 * var(--base-line-height));
		width: auto;
		max-width: none;
	}

	.c-nav--mobile ul .c-nav--mobile-meta a {
		background-color: var(--color-gray-50);
		font-weight: normal;
		padding-left: calc(2 * var(--base-line-height));
	}

	.c-nav--mobile ul .c-nav--mobile-meta.c-nav-primary--globalnewsflash a {
		display: flex;
		align-items: center;
	}

	.c-nav--mobile ul .c-nav--mobile-meta.c-nav-primary--globalnewsflash a::before {
		margin: -0.2rem calc(0.5 * var(--base-line-height)) 0 0;
		font-size: var(--font-size-icons-standard);
	}

	.c-nav--mobile ul li:not(.c-nav--mobile-meta) + .c-nav--mobile-meta {
		border-top: 0.1rem solid var(--color-gray-300);
		margin-top: -0.1rem;
	}

	.c-nav--mobile ul li .c-nav--country-selector-language-option {
		cursor: pointer;
		font-weight: bold;
		padding: 0 calc(0.5 * var(--base-line-height));
		width: auto;
		transition: background-color 200ms, color 200ms;
	}

	.c-nav--mobile ul li .c-nav--country-selector-language-option.is-selected {
		background: var(--color-red-500);
		color: var(--color-white-500);
		cursor: auto;
	}

	.c-nav--mobile ul .c-nav--back-button > a {
		padding-left: calc(1 * var(--base-line-height));
		position: relative;
	}

	.c-nav--mobile ul li.c-nav--headline a,
	.c-nav--mobile .c-nav--menu-container > ul > li.c-nav--headline {
		font-weight: 800;
		color: var(--color-red-500);
		font-size: var(--font-size-text-large);
		line-height: var(--font-size-3);
		cursor: default;
		padding: calc(1.5 * var(--base-line-height)) var(--base-line-height) calc(1.5 * var(--base-line-height)) 0;
	}

	.c-nav--mobile .c-nav--menu-container > ul > li.c-nav--headline.no-padding {
		padding: 0;
	}

	.c-nav--mobile ul li.c-nav--headline a::before {
		content: "";
	}
}

@media screen and (max-width: 479px) {
	.c-nav--logo-container {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-nav--logo-container {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-nav--logo-container {
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-navigation/clientlib/css/navigation-primary.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
.c-nav-flyout--container .base-button.link-internal::after {
	top: 0;
}

@media screen and (min-width: 768px),print {
	.c-nav-primary--meta-links-container {
		transform: translateY(-0.3rem); /* vertical alignment with logo */
	}

	.c-nav-primary--meta-others,
	.c-nav-primary--meta-main {
		display: flex;
		align-items: center;
		height: calc(2.3 * var(--base-line-height));
	}

	.c-nav-primary--meta-others {
		margin-right: calc(-1 * var(--base-line-height));
	}

	.c-nav-primary--meta-main {
		margin-left: var(--base-line-height);
	}

	.c--nav-primary--searchcontainer {
		margin-left: calc(2 * var(--base-line-height));
	}

	.c-nav-primary--searchform {
		overflow: hidden;
		display: flex;
	}

	.c-nav-primary--searchbar {
		display: inline-block;
		opacity: 0;
		width: 0;
		transition: width 400ms ease, opacity 400ms ease;
		background: none;
		border: none;
		font-size: var(--font-size-text-small);
		border-bottom: 0.2rem solid var(--color-black-400);
	}

	.c-nav-primary--searchbar::placeholder {
		color: var(--color-black-400);
		padding-bottom: 0.4rem;
	}

	.c-nav-customer-portal-headline span {
		pointer-events: none;
	}

	.c-nav-primary--searchbar-label {
		display: inline-flex;
		max-width: 8rem;
		cursor: pointer;
		margin-left: 0.7rem;
		font-size: var(--font-size-text-small);
		transition: max-width 400ms ease, opacity 400ms ease;
	}

	.c-nav-primary--searchbar.focus + .c-nav-primary--searchbar-label::before {
		pointer-events: none;
		line-height: 2.4rem;
		left: 0;
	}

	header:not(.is-slim):not(.is-fixed) .c-nav-primary--searchbar.focus + .c-nav-primary--searchbar-label::before {
		top: -0.5rem;
	}

	.c-nav-primary--searchbar:not(:focus) + .c-nav-primary--searchbar-label:hover,
	.c-nav-primary--searchbar-label:hover::after {
		color: var(--color-red-400);
	}

	.c-nav-primary--searchbar-label::before {
		position: absolute;
		left: -1.6rem;
		top: 0;
		visibility: visible;
	}

	.c-nav-primary--searchbar-label::after {
		content: "";
		right: -1rem;
		top: 0;
		opacity: 0;
		transition: right 400ms ease, opacity 400ms ease;
	}

	.c-nav-primary--searchbar.focus {
		opacity: 1;
		width: 28.9rem;
		padding-left: calc(1.4 * var(--base-line-height));
		padding-right: calc(1.4 * var(--base-line-height));
		line-height: var(--base-line-height);
	}

	.c-nav-primary--searchbar.focus + .c-nav-primary--searchbar-label {
		max-width: 0;
	}

	header:not(.is-slim):not(.is-fixed) .c-nav-primary--searchbar.focus + .c-nav-primary--searchbar-label {
		margin-left: 0.3rem;
	}

	.c-nav-primary--searchbar.focus + .c-nav-primary--searchbar-label::after {
		content: var(--icon-cancel);
		position: absolute;
		right: 0.4rem;
		line-height: 1.4rem;
		opacity: 1;
		font-size: 1.4rem;
		visibility: visible;
	}

	header:not(.is-slim):not(.is-fixed) .c-nav-primary--searchbar.focus + .c-nav-primary--searchbar-label::after {
		top: -0.5rem;
	}

	.c-nav-primary--searchform .c-nav-primary--searchbar-quicklinks {
		position: absolute;
		margin-top: -0.4rem;
		width: 100%;
		text-align: left;
		padding-right: 0.3rem;
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease;
		transition-delay: 200ms;
		top: calc(2 * var(--base-line-height));
	}

	header:not(.is-slim):not(.is-fixed) .c-nav-primary--searchform .c-nav-primary--searchbar-quicklinks {
		margin-top: -1.1rem;
	}

	.c-nav-primary--searchform .c-nav-primary--searchbar-quicklinks ul {
		padding-right: 0;
	}

	.c-nav-primary--searchform .c-nav-primary--searchbar-quicklinks li {
		background-color: var(--color-white-500);
		margin-bottom: 0;
	}

	.c-nav-primary--searchform .c-nav-primary--searchbar-quicklinks li.c-nav-primary--searchbar-quicklinks-header {
		background-color: var(--color-gray-200);
	}

	.c-nav-primary--searchform .c-nav-primary--searchbar-quicklinks li span {
		padding: calc(0.5 * var(--base-line-height)) 0 calc(0.5 * var(--base-line-height)) calc(1 * var(--base-line-height));
		width: 100%;
		line-height: calc(2.5 * var(--base-line-height));
		font-size: var(--font-size-text-small);
		color: var(--color-gray-600);
	}

	.c-nav-primary--searchform .c-nav-primary--searchbar-quicklinks li a {
		padding: calc(0.5 * var(--base-line-height)) 0 calc(0.5 * var(--base-line-height)) calc(1 * var(--base-line-height));
		width: 100%;
		line-height: calc(1.5 * var(--base-line-height));
		font-size: var(--font-size-standard);
	}

	.c-nav--fixed-searchbar {
		display: none;
	}

	.c-nav--fixed-searchbar .c-nav-primary--searchform .c-nav-primary--searchbar-quicklinks ul li {
		list-style-type: none;
	}

	.c-nav-customer-portal {
		margin-left: auto;
		position: relative;
	}

	.c-nav-customer-portal-headline,
	.has-user-icon {
		padding-left: 2.1rem;
		background: url(../assets/img/7509d647e298ca31d45a.svg) left center no-repeat;
		background-size: 1.2rem 1.2rem;
	}

	.c-nav-customer-portal-headline:focus,
	.has-user-icon:focus {
		background-image: url(../assets/img/ea0a59fe7840b252605f.svg);
	}

	.c-nav-customer-portal-headline:hover,
	.has-user-icon:hover {
		background-image: url(../assets/img/8f63595ff80e0bf0611e.svg);
	}

	.c-nav-primary > ul > li > a.c-nav-customer-portal-headline {
		margin-right: 0;
		position: relative;
	}

	.c-nav {
		background: var(--linear-gradient-yellow-to-right);
		height: 100%;
		padding: calc(2 * var(--base-line-height)) calc(3 * var(--base-line-height)) 0;
		position: relative;
	}

	.c-nav--logo {
		margin-right: 4.6rem; /* safe area to the right: 5.6rem = 4.6rem logo margin + 1rem meta nav item padding */
		height: auto;
		cursor: pointer;
	}

	.c-nav--logo img {
		width: 20.1rem; /* default width of 20.1rem should scale the default DHL logo to a height of exactly 2.8rem */
		height: auto;
		max-height: 6.4rem; /* maximum vertically available space before meta navi starts to stretch */
	}

	header:not(.is-fixed):not(.is-slim) .c-nav--logo.logo-wide img {
		width: auto;
		height: calc(2.5 * var(--base-line-height)); /* overhanging letters (like "p" in "Express") cause another 0.7rem to the 2.8rem height of the default DHL logo (= 3.5rem) */
	}

	.c-nav-primary--meta {
		flex-grow: 1;
		display: flex;
		margin-bottom: 0;
		opacity: 1;
		z-index: 1;
		transition: opacity ease 400ms, display ease 400ms;
	}

	.c-nav-primary--meta-container {
		flex-wrap: nowrap;
	}

	.c-nav-primary--meta li {
		background-color: transparent;
		border-bottom: none;
		list-style-type: none;
		padding: 0;
		position: relative;
		margin-bottom: 0.55rem;
	}

	.c-nav-primary--meta li.c--nav-primary--searchcontainer {
		margin-bottom: 1rem;
	}

	.c-nav-primary--meta > ul > li.c--nav-primary--searchcontainer {
		margin-left: calc(2 * var(--base-line-height));
	}

	.c-nav-primary--meta > ul > li.c--nav-primary--searchcontainer.absolute {
		margin-left: 0;
		position: absolute;
		right: calc(3 * var(--base-line-height));
	}

	.c-nav-primary--meta li a,
	.c-nav-primary--searchbar-quicklinks ul li a {
		display: flex;
		align-items: center;
		padding: 0 calc(var(--base-line-height) - 0.4rem);
	}

	.c-nav-primary--meta li .icon-exception::before,
	.c-nav-primary--meta li .icon-globe::before {
		margin: 0.2rem calc(0.5 * var(--base-line-height)) 0 0;
		display: inline;
	}

	.c-nav-primary--meta li .has-icon::before {
		font-size: var(--font-size-icons-standard);
	}

	.c-nav-primary--meta li:first-child::before {
		border-right: none;
	}

	.c-nav-primary {
		margin-bottom: calc(1 * var(--base-line-height));
		flex: 1 1 auto; /* required for IE11 */
		margin-right: 0.1rem;
	}

	.c-nav-primary.c-nav-has-no-nav-list {
		height: 0;
		margin-bottom: calc(0.5 * var(--base-line-height));
	}

	.c-nav-primary > ul:not(.c-nav-list--right) {
		margin-left: -1rem;
	}

	.c-nav-primary > ul > .has-subnav > a::after,
	.c-nav-primary > ul > li > span::after {
		content: var(--icon-chevron-down);
		font-size: var(--font-size-text-small);
		padding-left: calc(0.5 * var(--base-line-height));
		top: 0.3rem;
		display: inline-block;
	}

	.c-nav-primary .c-nav--toggle.c-nav--toggle-less span {
		padding-left: calc(1 * var(--base-line-height));
		font-weight: normal;
	}

	.c-nav-primary .c-nav--toggle.c-nav--toggle-less span::after {
		content: var(--icon-triangle-up-legacy);
		top: 0.2rem;
		font-size: var(--font-size-0);
	}

	/* No Javascript wrap */
	.no-js .c-nav-primary > ul > .has-subnav > a::after {
		content: "";
	}

	.c-nav-primary--meta li:last-child::after,
	.c-nav-primary > ul > li:last-child::after {
		content: "";
	}

	.c-nav-primary--meta ul {
		line-height: var(--body-font-size);
	}

	.c-nav-primary--meta ul,
	.c-nav-primary > ul {
		margin-bottom: 0;
	}

	.c-nav-primary > ul.c-nav-list--right {
		align-items: flex-start;
	}

	.c-nav-primary > ul {
		min-height: calc(2 * var(--base-line-height));
	}

	.c-nav-primary > ul > li {
		position: relative;
	}

	.c-nav-primary > ul > li.is-nextline {
		opacity: 0;
		visibility: hidden;
	}

	.c-nav-primary--meta ul > li.is-hidden,
	.c-nav-primary > ul > li.c-nav-primary-element.is-hidden,
	.c-nav-primary > ul > li.c-nav--toggle.is-hidden {
		opacity: 0;
		pointer-events: none;
		display: none;
	}

	.c-nav--primary-search {
		display: none;
		padding-top: 0.6rem;
	}

	.c-nav--primary-search a {
		padding: 0 calc(1.5 * var(--base-line-height));
		font-size: 1.8rem;
		display: inline-block;
		padding-left: 4.2rem;
	}

	.c-nav--primary-search .icon-search::before {
		color: var(--color-red-500);
	}

	.c-nav--toggle span {
		align-self: baseline;
		color: var(--color-red-500);
		cursor: pointer;
		display: none;
		font-weight: normal;
		margin-bottom: calc(0.5 * var(--base-line-height));
		margin-top: calc(0.5 * var(--base-line-height));
		opacity: 0;
		padding: 0 calc(1 * var(--base-line-height));
		text-align: right;
	}

	.c-nav-secondary .c-nav--toggle span::after,
	.c-nav-primary .c-nav--toggle span::after {
		content: var(--icon-triangle-down-legacy);
		top: 0.2rem;
		font-size: var(--font-size-0);
		padding-left: calc(0.5 * var(--base-line-height));
		display: inline-block;
	}

	.c-nav-primary .c-nav--toggle span {
		margin: 0;
		align-self: center;
		font-size: var(--font-size-text-small);
		padding: 0;
	}

	.c-nav-primary .c-nav--toggle span.c-nav--toggle-more {
		margin-top: calc(0.5 * var(--base-line-height));
		color: var(--color-red-500);
	}

	.c-nav--toggle .is-visible {
		display: block;
		opacity: 1;
	}

	.c-nav-primary .c-nav--toggle.c-nav--toggle-less .is-visible {
		display: none;
		opacity: 0;
	}

	.c-nav-flyout--listitem-headline,
	.c-nav-flyout--headline {
		margin: calc(2 * var(--base-line-height)) 0 0;
		text-align: left;
		padding: 0;
		line-height: calc(1.5 * var(--base-line-height));
	}

	.c-nav-flyout--headline a {
		font-weight: 800;
	}

	.c-nav-flyout--headline a.link-internal::after {
		font-size: var(--font-size-icon-close);
	}

	.c-nav-flyout--headline h4 {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}

	.c-nav-flyout--listitem-headline p {
		margin-bottom: calc(0.5 * var(--base-line-height));
	}

	.c-nav-primary > ul > li > a {
		align-self: flex-end;
		color: var(--color-black-400);
		font-weight: bold;
		margin: calc(0.5 * var(--base-line-height)) 1rem;
		position: relative;
		font-size: var(--font-size-text-small);
	}

	.c-nav-primary > ul > li.c-nav-login-btn > a,
	.c-nav-primary > ul > li.c-nav-login-link > a {
		margin: calc(0.5 * var(--base-line-height)) 0 calc(0.5 * var(--base-line-height)) 1rem;
	}

	.c-nav-flyout--listitem {
		margin-left: calc(2.5 * var(--base-line-height));
		min-width: 20rem;
	}

	.c-nav-flyout--listitem > ul {
		margin: calc(0.75 * var(--base-line-height)) 0 0 0;
	}

	.c-nav-flyout--listitem:nth-child(3n-2) {
		margin-left: 0;
	}

	.c-nav-flyout--listitem > ul > li {
		border-top: 0.1rem solid var(--color-gray-300);
	}

	.c-nav-customer-portal .c-nav-flyout--listitem > ul > li:first-child,
	.c-nav-slim-more .c-nav-flyout--listitem > ul > li:first-child {
		border-top: none;
	}

	.c-nav-customer-portal .c-nav-flyout--listitem div.c-nav-flyout--headline + ul > li:first-child,
	.c-nav-slim-more .c-nav-flyout--listitem div.c-nav-flyout--headline + ul > li:first-child {
		border-top: 0.1rem solid var(--color-gray-300);
	}

	.c-nav-flyout--listitem > ul > li > .link {
		font-weight: normal;
		text-align: left;
		transition: background-color 200ms;
		font-size: var(--font-size-text-small);
		line-height: calc(1.5 * var(--base-line-height));
		color: var(--color-black-400);
		padding: calc(0.75 * var(--base-line-height)) 0;

		/* IE10 line break fix */
		flex-direction: column;
	}

	.c-nav-flyout--listitem > ul > li > .base-button {
		margin-top: calc(1 * var(--base-line-height));
		width: 100%;
	}

	.c-nav-flyout--listitem > ul > li:last-child {
		border-bottom: none;
	}

	.c-nav-flyout--listitem ul li a.link:focus,
	.c-nav-flyout--listitem .c-nav-flyout--listitem-headline a.link:focus,
	.c-nav-flyout--headline a.link:focus,
	.c-nav-flyout--linkwrapper > a.link:focus,
	.c-nav-flyout--list > li > a.link:focus {
		outline: 0.1rem solid var(--color-black-500);
	}

	.c-nav-flyout--listitem > ul > li > a:hover::after,
	.c-nav-flyout--linkwrapper > a:hover::after,
	.c-nav-flyout--list > li > a:hover::after {
		color: currentColor;
	}

	/* Grouping of selectors */
	.c-nav-primary--meta .c-nav--language {
		padding: 0 calc(0.5 * var(--base-line-height));
	}

	.c-nav-primary--meta li a,
	.c-nav-primary--meta .c-nav--language a,
	.c-nav-primary--meta .c-nav--language span,
	.c-nav-primary--searchbar-quicklinks ul li a {
		cursor: pointer;
		color: var(--color-black-400);
		font-size: var(--font-size-text-small);
		font-weight: normal;
		padding: 0 1rem;
	}

	.c-nav-primary--meta ul:not(.shadow-small) > li > a,
	.c-nav-primary--meta .c-nav--language a,
	.c-nav-primary--meta .c-nav--language span {
		margin-bottom: 0.55rem;
	}

	.c-nav-primary--meta .c-nav--language span.is-selected {
		padding: 0 calc(0.26 * var(--base-line-height)) 0 calc(0.5 * var(--base-line-height));
		display: flex;
		align-items: center;
	}

	/* Grouping of stylings */

	.c-nav-primary > ul > .is-open > .is-active,
	.c-nav-primary > ul > .is-open > a,
	.c-nav-primary > ul > .is-open > a:hover {
		color: var(--color-red-500);
	}

	.c-nav-primary--meta li a:focus,
	.c-nav-primary > ul > li:not(.c-nav-login-btn) > a:focus {
		color: var(--color-red-500);
		outline: 0.1rem solid var(--color-red-500);
		text-decoration: none;
	}

	.c-nav-primary > ul > li.is-open > a:focus {
		color: var(--color-red-500);
		text-decoration: underline;
		outline: none;
	}

	.c-nav-primary .c-nav--primary-search a:focus {
		color: var(--color-red-500);
	}

	.c-nav-primary--meta li > a.is-active,
	.c-nav-primary > ul > li > a.is-active {
		text-decoration: underline;
		outline: none;
		color: var(--color-red-500);
	}

	.c-nav-primary--meta li a:hover,
	.c-nav-primary > ul > li > a:hover,
	.c-nav-primary .c-nav--primary-search a:hover,
	.c-nav--fixed-searchbar .c-nav-primary--searchbar-quicklinks a:hover {
		color: var(--color-red-400);
	}

	.c-nav-primary .c-nav--toggle .is-open {
		display: none;
	}

	.c-nav-primary .c-nav--toggle.c-nav--toggle-less .is-open {
		display: block;
		opacity: 1;
	}

	.c-nav-primary .c-nav--toggle span:hover {
		color: var(--color-red-400);
	}

	html:not(.is-touch) .c-nav-primary .c-nav--toggle span:focus {
		color: var(--color-red-500);
		outline: 0.1rem solid var(--color-red-500);
	}

	.c-nav-primary--meta .c-nav--language .is-selected,
	.c-nav-flyout--container .is-selected {
		font-weight: bold;
		cursor: default;
	}

	.c-nav-flyout--container .is-selected {
		padding: calc(0.75 * var(--base-line-height)) calc(1 * var(--base-line-height)) calc(0.75 * var(--base-line-height)) 0;
		font-size: var(--font-size-text-small);
		line-height: calc(1.5 * var(--base-line-height));
	}

	.c-nav-flyout.c-nav-flyout--tracking {
		min-width: calc(46 * var(--base-line-height));
	}

	.c-nav-flyout--tracking .c-nav-flyout--container {
		padding: 0 calc(2 * var(--base-line-height)) calc(2.5 * var(--base-line-height));
		min-width: calc(46 * var(--base-line-height));
	}

	.c-nav-flyout--tracking .c-nav-flyout--headline {
		padding-left: 0;
	}

	.c-nav-flyout--tracking .c-voc-tracking-bar {
		margin: calc(1.5 * var(--base-line-height)) 0;
	}

	.c-nav-flyout.c-nav-flyout--list {
		min-width: auto;
		max-width: none;
	}

	.c-nav-flyout.c-nav-flyout--list .c-nav-flyout--container {
		padding: 0 calc(2 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
		display: flex;
		flex-wrap: wrap;
	}

	.c-nav-flyout--listitem-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		/* grid-template-rows is required for CSS Grid autoplacement simulation via
		   Autoprefixer and max-width is required to avoid unwanted whitespace in IE11;
		   see: DHLGLOBAL-11749 */
		grid-template-rows: repeat(10, auto);
		max-width: 67rem;
	}

	.c-nav-flyout--copycontainer {
		text-align: center;
		margin-top: calc(2 * var(--base-line-height));
		line-height: calc(1.5 * var(--base-line-height));
	}

	.c-nav-flyout.c-nav-flyout--list .c-nav-flyout--image {
		display: flex;
	}

	.c-nav-flyout.c-nav-flyout--list .c-nav-flyout--image img {
		max-height: calc(6.5 * var(--base-line-height));
		margin: 0 auto;
	}

	/* TRACKING FLYOUT */
	.c-nav-tracking--headline {
		line-height: calc(1.5 * var(--base-line-height));
		display: block;
		margin-bottom: 1rem;
		position: relative;
	}

	.c-nav-flyout--linkwrapper a {
		font-weight: normal;
		line-height: calc(1.5 * var(--base-line-height));
	}

	.c-nav-tracking--copycontainer.warning .c-nav-tracking--headline,
	.c-nav-tracking--copycontainer.warning .c-nav-tracking--copy {
		padding-left: calc(2 * var(--base-line-height));
	}

	.c-nav-tracking--copycontainer.warning .c-nav-tracking--headline::before {
		position: absolute;
		top: -0.2rem;
		left: 0;
		content: url(../assets/img/512c8f560aaf6ff3181a.svg);
	}

	.c-nav-tracking--copycontainer.warning .c-nav-flyout--linkwrapper a:first-child {
		padding-left: calc(2 * var(--base-line-height));
		vertical-align: middle;
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 2.4rem 2.4rem;
		background-image: url(../assets/img/cd863484718656118d02.svg);
	}

	.c-nav-tracking--copycontainer.warning .c-nav-tracking--headline + .c-nav-flyout--linkwrapper,
	.c-nav-tracking--copycontainer.warning .c-nav-tracking--copy + .c-nav-flyout--linkwrapper {
		background: none;
	}

	.c-nav-tracking--copycontainer.warning .c-nav-tracking--headline + .c-nav-flyout--linkwrapper a,
	.c-nav-tracking--copycontainer.warning .c-nav-tracking--copy + .c-nav-flyout--linkwrapper a {
		background: none;
	}

	/* rtl:raw:
	.c-nav-tracking--headline::before {
		display: inline-block;
	    transform: rotateY(180deg);
	}
	*/

	.c-nav-flyout--linkwrapper a:first-child {
		margin-right: calc(2 * var(--base-line-height));
	}

	.c-nav-flyout--container ul li > .is-active,
	.c-nav-flyout--container ul li a.link:hover {
		color: var(--color-red-400);
	}

	.c-nav-primary > ul > .has-subnav.is-open > a::after {
		content: var(--icon-chevron-up);
	}

	.c-nav-flyout {
		background-color: var(--color-white-500);
		border-left: 0.1rem solid var(--color-gray-200);
		display: none;
		border-right: 0.1rem solid var(--color-gray-200);
		max-width: calc(17.5 * var(--base-line-height));
		min-width: calc(17.5 * var(--base-line-height));
		position: absolute;
		z-index: 999;
		border-bottom: 0.1rem solid var(--color-gray-200);
		left: 50%;
		transform: translateX(-50%);
		max-height: 70vh;
		box-shadow: 0 2rem 3.2rem 0 rgba(0, 0, 0, 0.07), 0 0.3rem 0.2rem 0 rgba(0, 0, 0, 0.1);
	}

	.c-nav-primary > ul > .has-subnav.is-open::before {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(-1 * var(--base-line-height) - 0.1rem); /* required due to rounding errors in IE11/Edge (pixel-perfect would be -1.4rem); see: DHLGLOBAL-11755 */
		border-style: solid;
		border-width: 0 var(--base-line-height) var(--base-line-height);
		border-color: transparent transparent var(--color-white-500) transparent;
	}

	.c-nav-additional-more {
		display: none;
	}

	.c-nav-additional-more.is-visible {
		display: flex;
	}

	.c-nav-additional-more .c-nav-flyout .c-nav-flyout--list {
		width: 100%;
		margin-bottom: 0;
	}

	.c-nav-customer-portal .c-nav-flyout.c-nav-flyout--list .c-nav-flyout--container {
		padding: 0;
	}

	.c-nav-customer-portal .c-nav-flyout--listitem {
		min-width: 25rem;
	}

	.c-nav-customer-portal .c-nav-flyout--headline {
		margin-top: calc(1.5 * var(--base-line-height));
		margin-left: calc(2 * var(--base-line-height));
	}

	.c-nav-flyout--container .boldlarge {
		font-size: var(--font-size-standard);
		font-weight: bold;
	}

	.c-nav-customer-portal .c-nav-flyout ul {
		margin: 0;
	}

	.c-nav-customer-portal .c-nav-flyout ul li {
		margin: 0 calc(2 * var(--base-line-height));
	}

	.c-nav-customer-portal .c-nav-flyout .c-nav-flyout--listitem-headline {
		margin: 0 calc(2 * var(--base-line-height));
		padding-bottom: calc(0.75 * var(--base-line-height));
		width: auto;
		margin-top: calc(1 * var(--base-line-height));
	}

	.c-nav-primary .is-open .c-nav-flyout {
		display: block;
	}

	.c-nav-primary--meta li.c-nav--language a {
		padding: 0 calc(0.26 * var(--base-line-height));
	}

	.c-voc-nav .c-voc-tracking-bar--button {
		line-height: calc(1.5 * var(--base-line-height));
	}

	.c-voc-nav .c-voc-tracking-bar--form {
		margin-bottom: calc(2 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-nav--fixed-searchbar-wrapper {
		position: absolute;
		top: 0;
		right: 0;
	}
}

@media screen and (min-width: 1024px),print {
	.c-nav-primary--meta {
		padding-bottom: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1365px) {
	.full-width-grid .c-nav {
		max-width: none;
		padding-left: calc((100% - var(--width-page-max-nopadding)) / 2);
		padding-right: calc((100% - var(--width-page-max-nopadding)) / 2);
	}
}

.is-editmode .c-nav .c-nav-flyout {
	display: none;
}

/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-navigation/clientlib/css/navigation-secondary.css ***!
  \************************************************************************************************************************************************************************************************************************************/
@media screen and (min-width: 768px),print {
	.c-nav-secondary {
		background: var(--linear-gradient-yellow-to-right);
		position: relative;
	}

	.c-nav-secondary--meta-container {
		padding: 0 calc(1.5 * var(--base-line-height));
	}

	.c-nav-secondary .c-nav-secondary--container > ul {
		margin-bottom: 0;
		min-height: calc(3 * var(--base-line-height));
		padding-right: calc(2 * var(--base-line-height));
		background-color: var(--color-gray-50);
	}

	.c-nav-secondary .c-nav-secondary--container > ul > li {
		position: relative;
		transition: opacity 300ms ease;
		transition-delay: 200ms;
	}

	.c-nav-secondary .c-nav-secondary--container > ul > li.is-nextline {
		opacity: 0;
		visibility: hidden;
	}

	.c-nav-secondary .c-nav-secondary--container > ul > li.is-open::before {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		border-style: solid;
		border-width: 0 1.4rem 1.4rem;
		border-color: transparent transparent var(--color-white-500) transparent;
	}

	.c-nav-secondary--headline-container {
		transform: translateY(calc(-0.5 * var(--base-line-height)));
		border-top-right-radius: 0.2rem;
		background-color: var(--color-white-500);
	}

	.c-nav-secondary--headline {
		cursor: pointer;
		font-size: var(--font-size-h5);
		color: var(--color-red-500);
		font-weight: 800;
		outline: 0.1rem solid transparent;
		line-height: calc(1.5 * var(--base-line-height));
		margin: calc(1 * var(--base-line-height) + 0.3rem) calc(1.5 * var(--base-line-height)) 0 calc(3 * var(--base-line-height));
	}

	.c-nav-secondary--headline:hover {
		color: var(--color-red-400);
	}

	.c-nav-secondary--headline span {
		font-weight: 800;
	}

	.c-nav-secondary--meta li {
		list-style-type: none;
		display: inline-block;
		padding-left: calc(1 * var(--base-line-height));
	}

	.c-nav-secondary--meta li a:hover,
	.c-nav-secondary--meta li a:hover::after {
		color: var(--color-red-400);
	}

	.c-nav-secondary--container {
		margin-top: calc(0.5 * var(--base-line-height));
		background: var(--color-white-500);
	}

	.c-nav-secondary--container li {
		list-style-type: none;
	}

	.c-nav-secondary--container > ul > .has-subnav > a::after {
		content: var(--icon-chevron-down);
		font-size: var(--font-size-0);
		vertical-align: middle;
		padding-left: calc(0.5 * var(--base-line-height));
		display: inline-block;
	}

	/* No Javascript wrap */
	.no-js .c-nav-secondary--container > ul > .has-subnav > a::after {
		content: "";
	}

	.c-nav-secondary--dropdown {
		background-color: var(--color-white-500);
		border-left: 0.1rem solid var(--color-gray-200);
		display: none;
		border-right: 0.1rem solid var(--color-gray-200);
		max-width: calc(20 * var(--base-line-height));
		min-width: calc(20 * var(--base-line-height));
		position: absolute;
		z-index: 999;
	}

	.c-nav-secondary--container .is-open .c-nav-secondary--dropdown {
		display: block;
		border-bottom: 0.1rem solid var(--color-gray-200);
		left: 50%;
		transform: translateX(-50%);
		max-height: 60vh;
		box-shadow: 0 2rem 3.2rem 0 rgba(0, 0, 0, 0.07), 0 0.3rem 0.2rem 0 rgba(0, 0, 0, 0.1);
	}

	.c-nav-secondary--dropdown li a {
		color: var(--color-black-400);
		display: block;
		padding: calc(1.2 * var(--base-line-height)) var(--base-line-height);
		width: 100%;
		font-size: var(--font-size-text-small);
		line-height: calc(1 * var(--base-line-height) + 0.1rem);
		transition: background-color 200ms, color 200ms;
		border-bottom: 0.1rem solid var(--color-gray-200);
	}

	.c-nav-secondary--container > ul > li > a {
		outline: 0.1rem solid transparent;
		color: var(--color-black-400);
		display: block;
		margin: 0 calc(1 * var(--base-line-height));
		padding-bottom: 0.8rem;
		margin-top: calc(0.5 * var(--base-line-height));
		position: relative;
		font-size: var(--font-size-text-small);
	}

	.c-nav-secondary--dropdown li:last-child a {
		border-bottom: 0.1rem solid transparent;
	}

	.c-nav-secondary .c-nav--toggle {
		background-color: var(--color-gray-50);
	}

	.c-nav-secondary .c-nav--toggle .is-open {
		display: none;
	}

	.c-nav-secondary .c-nav--toggle.c-nav--toggle-less .is-visible {
		display: none;
		opacity: 0;
	}

	.c-nav-secondary .c-nav--toggle.c-nav--toggle-less .is-open {
		display: block;
		opacity: 1;
		outline: 0.1rem solid transparent;
	}

	.c-nav-secondary .c-nav--toggle.c-nav--toggle-less span {
		padding-left: 0;
	}

	.c-nav-secondary .c-nav--toggle-less span::after {
		content: var(--icon-triangle-up-legacy);
		font-size: var(--font-size-0);
	}

	.c-nav-secondary .c-nav--toggle span {
		margin-bottom: 0;
		margin-top: 0;
		align-self: center;
		font-size: var(--font-size-text-small);
		padding: 0;
	}

	.c-nav-secondary .c-nav--toggle span:not(.is-open) {
		margin: calc(0.5 * var(--base-line-height)) calc(3 * var(--base-line-height));
		outline: 0.1rem solid transparent;
	}

	/* Grouping of stylings */
	.c-nav-secondary--dropdown li > .is-active,
	.c-nav-secondary--dropdown li a:hover {
		color: var(--color-red-400);
	}

	.c-nav-secondary--container .is-open > .is-active,
	.c-nav-secondary--container .is-open > a:hover {
		outline: 0.1rem solid var(--color-gray-50);
		border-left: 0;
		border-bottom: 0;
		color: var(--color-red-500);
	}

	.c-nav-secondary--container .is-open .c-nav-secondary--dropdown li a:focus {
		color: var(--color-red-400);
		box-shadow: inset -0.2rem -0.2rem 0 var(--color-black-500), inset 0.2rem 0.2rem 0 var(--color-black-500);
		outline: none;
	}

	.c-nav-secondary--container :not(.is-open) > a:focus,
	.c-nav-secondary--headline:focus {
		outline: 0.1rem solid var(--color-red-500);
	}

	.c-nav-secondary--container .has-subnav.is-open > a {
		margin-bottom: 0;
		padding-bottom: calc(0.5 * var(--base-line-height));
	}

	.c-nav-secondary--container > ul > li:not(.is-open) > .is-active::before {
		border-bottom: 0.3rem solid var(--color-red-500);
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 0.3rem;
		width: 100%;
	}

	.c-nav-secondary--container > ul > li:not(.is-open) > .is-active.has-icon::before {
		width: calc(100% - var(--font-size-icons-standard));
	}

	.c-nav-secondary--container > ul > li:not(.is-open) > a:hover,
	.c-nav-secondary .c-nav--toggle span:hover {
		color: var(--color-red-400);
	}

	.c-nav-secondary .c-nav--toggle span:focus,
	.c-nav-secondary .c-nav--toggle.c-nav--toggle-less .is-open:focus {
		color: var(--color-red-500);
		outline: 0.1rem solid var(--color-red-500);
	}

	.c-nav-secondary--container > ul > .has-subnav.is-open > a::after {
		content: var(--icon-chevron-up);
	}
}

@media screen and (min-width: 1024px),print {
	.c-nav-secondary--meta li a:focus {
		color: var(--color-red-500);
		outline: 0.1rem solid var(--color-red-500);
	}
}

/**
 * minor breakpoint "m-m"
 * @size < 1364
 */

@media screen and (min-width: 1365px) {
	.full-width-grid .c-nav-secondary--headline-container {
		padding-left: calc((100% - var(--width-page-max-nopadding)) / 2 - 4.2rem);
	}

	.full-width-grid div:not(.is-fixed) .c-nav-secondary .c-nav--toggle {
		padding-right: calc((100% - var(--width-page-max-nopadding)) / 2 - 4.2rem);
	}
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-navigation/clientlib/css/navigation-touch.css ***!
  \********************************************************************************************************************************************************************************************************************************/
/* grouping of selectors */
@media screen and (max-width: 767px),print {
	.is-touch .c-nav--menu-container li > a:active {
		background: var(--color-gray-50);
		color: var(--color-red-500);
	}

	.is-touch .c-nav--mobile > li:active {
		background: var(--color-white-500);
	}

	.is-touch .c-nav--mobile ul li .c-nav--country-selector-language-option:active,
	.is-touch .c-nav--mobile .c-nav--menu-container:not(.c-nav--menu-container--searchcontainer) li:active {
		color: var(--color-red-500);
		background: var(--color-gray-50);
	}
}

@media screen and (min-width: 768px),print {
	.is-touch .c-nav-secondary--dropdown li a:hover,
	.is-touch .c-nav-secondary--dropdown li a:focus {
		background-color: transparent;
		color: var(--color-black-400);
	}

	.is-touch .c-nav-secondary--dropdown li a:active {
		background-color: var(--color-gray-50);
		color: var(--color-red-500);
	}

	.is-touch .c-nav-primary > ul > li:not(.is-open) > a:hover,
	.is-touch .c-nav-primary > ul > li:not(.is-open) > a:focus,
	.is-touch .c-nav-primary--meta li a:hover,
	.is-touch .c-nav-primary--meta li a:focus,
	.is-touch .c-nav-primary--meta .c-nav--language span:not(.is-selected):hover,
	.is-touch .c-nav-primary--meta .c-nav--language span:not(.is-selected):focus {
		background: none;
		color: var(--color-black-400);
	}

	.is-touch .c-nav-secondary .c-nav--toggle span:hover,
	.is-touch .c-nav-secondary .c-nav--toggle span:focus {

		/* No hover on touch devices */
		background: transparent;
		color: var(--color-red-500);
	}

	.is-touch .c-nav-primary--meta li .icon-search:hover,
	.is-touch .c-nav-primary--meta li .icon-search:focus,
	.is-touch .c-nav-primary .c-nav--toggle span:not(.is-open):hover,
	.is-touch .c-nav-primary .c-nav--toggle span:not(.is-open):focus {
		background: none;
		color: var(--color-red-500);
	}

	.is-touch .c-nav-primary > ul > .is-open > a:active {
		color: var(--color-red-500);
	}

	.is-touch .c-nav-flyout--container ul li a:hover,
	.is-touch .c-nav-flyout--container ul li a:focus {

		/* No hover on touch devices */
		background-color: transparent;
		color: var(--color-black-400);
	}

	.is-touch .c-nav-flyout--container ul li a:active {
		color: var(--color-red-500);
		background-color: var(--color-gray-50);
	}

	.is-touch .c-nav-primary--meta li .icon-search:active,
	.is-touch .c-nav-primary > ul > li:not(.is-open) > a:active,
	.is-touch .c-nav-primary--meta li a:active,
	.is-touch .c-nav-primary .c-nav--toggle span:not(.is-open):active {
		color: var(--color-red-500);
	}

	.is-touch .c-nav-secondary--container > ul > li:not(.is-open) > a:hover,
	.is-touch .c-nav-secondary--container > ul > li:not(.is-open) > a:focus {

		/* No hover on touch devices */
		background: transparent;
		border-bottom-color: var(--color-gray-50);
		border-left-color: var(--color-gray-50);
		border-top-color: var(--color-gray-50);
		color: var(--color-black-400);
	}
}

/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-navigation/clientlib/css/navigation-wcag.css ***!
  \*******************************************************************************************************************************************************************************************************************************/
.c-nav-wcag {
	display: none;
	position: relative;
}

@media screen and (min-width: 768px),print {
	.c-nav-wcag {
		display: block;
		min-width: 32rem;
		max-width: 136.5rem;
		margin: 0 auto;
	}

	.c-nav-wcag ul {
		display: block;
		font-size: var(--font-size-2);
		margin-bottom: 0;
		padding: var(--base-line-height);
		position: absolute;
		top: -200rem;
		width: 100%;
		z-index: 1000000;
	}

	.c-nav-wcag ul > li {
		list-style-type: none;
		line-height: var(--base-line-height);
	}

	.c-nav-wcag ul > li > a {
		background: var(--color-white-500);
		color: var(--color-black-400);
		padding: 0 calc(0.5 * var(--base-line-height));
	}

	.c-nav-wcag ul > li > a:focus {
		border: 0.1rem solid var(--color-black-400);
		left: calc(1.5 * var(--base-line-height));

		/* line-height: var(--base-line-height); */
		outline: none;
		position: absolute;
		top: 202.1rem;
	}
}

/*!**************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-portal-teasers/clientlib/css/voc-portal-teasers.css ***!
  \**************************************************************************************************************************************************************************************************************************************/
/**
 * Layout solution mostly based on:
 * https://tobiasahlin.com/blog/masonry-with-css/
 */

.c-voc-portal-teasers {
	display: flex;
	flex-flow: column nowrap;
}

.c-voc-portal-teasers--teaser-group {
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-voc-portal-teasers--teaser-group-header {
	text-transform: uppercase;
	line-height: 1.09;
	letter-spacing: normal;
	color: var(--color-black-400);
	margin-bottom: calc(1.5 * var(--base-line-height));
}

.c-voc-portal-teasers--teaser {
	border-radius: 0.4rem;
	box-shadow: var(--shadow-small);
	background-color: var(--color-white-500);
	padding: var(--base-line-height);
	text-align: center;
	margin-bottom: var(--base-line-height);
}

.c-voc-portal-teasers--teaser-picture img {
	width: 100%;
	height: auto;
}

.c-voc-portal-teasers--teaser-copy {
	font-size: var(--font-size-standard);
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	color: var(--color-black-400);
}

.c-voc-portal-teasers--teaser-headline-grid {
	margin: calc(1.5 * var(--base-line-height)) 0 var(--base-line-height) 0;
}

.c-voc-portal-teasers--teaser-headline {
	color: var(--color-black-400);
	margin: 0 calc(0.5 * var(--base-line-height)) 0 0;
	padding-right: var(--base-line-height);
}

.c-voc-portal-teasers--teaser:hover {
	box-shadow: var(--shadow-medium);
}

.c-voc-portal-teasers--teaser:focus {
	box-shadow: var(--shadow-large);
}

.c-voc-portal-teasers--teaser-headline-right-arrow {
	vertical-align: middle;
}

.c-voc-portal-teasers--teaser-checkout-offer {
	text-align: left;
}

.c-voc-portal-teasers--teaser-checkout-offer-text {
	font-size: var(--font-size-1);
	font-weight: normal;
	font-style: normal;
	text-align: left;
	font-stretch: normal;
	letter-spacing: normal;
	margin-right: var(--base-line-height);
	color: var(--color-gray-600);
}

.c-voc-portal-teasers--teaser-checkout-offer-cards {
	display: inline-block;
	vertical-align: middle;
}

.c-voc-portal-teasers--teaser-checkout-offer-image {
	width: 3rem;
	height: 1.9rem;
}

@media screen and (min-width: 768px),print {
	.c-voc-portal-teasers {
		flex-wrap: wrap;
	}

	.c-voc-portal-teasers--teaser-group:nth-child(odd) {
		order: 1;
		width: calc(50% - 1.8rem);
	}

	.c-voc-portal-teasers--teaser-group:nth-child(even) {
		order: 2;
		align-self: flex-end;
		width: calc(50% - 1.8rem);
	}

	.no-js .c-voc-portal-teasers {
		flex-wrap: nowrap;
		align-items: center;
	}

	.no-js .c-voc-portal-teasers--teaser-group:nth-child(even) {
		align-self: auto;
	}

	.no-js .c-voc-portal-teasers--teaser-group {
		order: 0;
	}
}

@media screen and (min-width: 1024px),print {
	.l-grid--no-wrap-m-m {
		flex-wrap: nowrap;
	}

	.c-voc-portal-teasers--teaser-group:nth-child(odd) {
		width: calc(50% - 2.4rem);
	}

	.c-voc-portal-teasers--teaser-group:nth-child(even) {
		width: calc(50% - 2.4rem);
	}

	.c-voc-portal-teasers--teaser-picture {
		float: left;
		margin-right: var(--base-line-height);
	}

	.c-voc-portal-teasers--teaser-picture img {
		width: 15rem;
	}

	.c-voc-portal-teasers--teaser-headline-grid {
		margin: 0 0 var(--base-line-height) 0;
	}
}

/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/wizard/clientlib/css/wizard.css ***!
  \**************************************************************************************************************************************************************************************************************/
.c-wizard--alternative {
	display: none;
}

.no-js .c-wizard--alternative {
	display: block;
}

.no-js .c-wizard--content {
	display: none;
}

.c-wizard--step {
	background-color: var(--color-white-500);
	padding-top: calc(0.5 * var(--base-line-height));
	transition: opacity 200ms, transform 200ms;
	transition-delay: 110ms;
	transform: translate(0, calc(-1 * var(--base-line-height)));
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-wizard--step,
.c-wizard--step .c-wizard--item-wrapper {
	justify-content: center;
}

.c-wizard--step.hide-step,
.c-wizard--springboard.hide-step {
	opacity: 0;
	display: none;
}

.c-wizard--step.active,
.c-wizard--springboard.active {
	transform: translate(0, 0);
	opacity: 1;
}

.c-wizard .c-wizard--step.stepflex,
.c-wizard .c-wizard--springboard.stepflex {
	display: flex;
}

.c-wizard h3 {
	margin: 0;
}

.c-wizard--step.first-element {
	display: flex;
	transition: opacity 400ms;
}

.c-wizard--standard-image-wrapper,
.c-wizard--standard-image-wrapper .c-wizard--standard-image {
	max-height: calc(4 * var(--base-line-height));
	max-width: calc(4 * var(--base-line-height));
}

.c-wizard--step-headline,
.c-wizard--springboard-headline,
.c-wizard--step-subheadline,
.c-wizard--springboard-subheadline {
	text-align: center;
	display: block;
	width: 100%;
	font-size: var(--font-size-text-large);
	margin-top: calc(0.5 * var(--base-line-height));
	margin-bottom: calc(1 * var(--base-line-height));
	line-height: calc(1.5 * var(--base-line-height));
}

.c-wizard--step-subheadline,
.c-wizard--springboard-subheadline {
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
}

/* automatically generated and added by AEM */
.wizard-choice-step-container-parsys {
	justify-content: center;
}

.c-wizard--springboard-headline {
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-wizard--springboard-copy {
	width: 100%;
	text-align: center;
}

.c-wizard--springboard > .component-small,
.c-wizard--springboard > .component-wide {
	padding-left: 0;
	padding-right: 0;
}

.c-wizard--standard-item {
	position: relative;
	margin-bottom: calc(1 * var(--base-line-height));
	border-radius: 0.4rem;
	transition: background-color 200ms;
	cursor: pointer;
}

.c-wizard--standard-item-wrapper {
	height: 100%;
	padding: var(--base-line-height) calc(1.5 * var(--base-line-height));
}

a.c-wizard--standard-item-wrapper .c-wizard--standard-item-copy {
	font-weight: normal;
	color: var(--color-black-500);
}

.c-wizard--standard-item-wrapper img,
.c-wizard--standard-item-wrapper .c-wizard--standard-image {
	display: block;
	margin: 0 auto;
}

.c-wizard--standard-item-textcontainer {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.c-wizard--standard-item-textcontainer span {
	word-break: break-word;
}

.c-wizard--standard-item-wrapper--icon .c-wizard--standard-item-textcontainer {
	margin-top: var(--base-line-height);
}

.c-wizard--standard-item-headline {
	text-align: center;
	display: block;
	font-weight: bold;
	line-height: calc(1.5 * var(--base-line-height));
	position: relative;
	transition: color 200ms;
}

.c-wizard--standard-item-copy {
	text-align: center;
	display: block;
	transition: color 200ms;
}

.c-wizard--standard-item:hover {
	box-shadow: var(--shadow-medium);
}

.c-wizard--standard-item:focus {
	box-shadow: var(--shadow-large);
}

.c-wizard--standard-item.active {
	box-shadow: inset 0 0 0 0.3rem var(--color-yellow-500), var(--shadow-small);
}

.c-wizard--standard-item.active::after {
	content: var(--icon-checkmark);
	position: absolute;
	font-weight: bold;
	top: calc(0.3 * var(--base-line-height));
	right: calc(0.5 * var(--base-line-height));
	color: var(--color-green-500);
	font-size: var(--font-size-4);
}

.c-wizard--standard-item:hover .c-wizard--standard-item-textcontainer::after {
	width: 100%;
	left: 0;
}

.c-wizard--standard-item.active .c-wizard--standard-item-textcontainer::after,
.c-wizard--standard-item.active:hover .c-wizard--standard-item-textcontainer::after {
	left: 50%;
	width: 0;
}

.c-wizard--checkbox-wrapper {
	width: 100%;
	position: relative;
	display: flex;
}

.c-wizard--checkbox {
	margin: 0 auto;
	position: relative;
	border: 0;
	background-color: transparent;
}

.c-wizard--arrow-down {
	text-align: center;
	display: block;
}

.c-wizard .c-voc-contact-lookup-container {
	flex-basis: 100%;
	max-width: 100%;
	width: 100%;
}

@media screen and (max-width: 767px),print {
	.c-wizard--step {
		margin-bottom: calc(1 * var(--base-line-height));
	}

	.c-wizard--standard-item {
		border-right: none;
	}

	.c-wizard--standard-item-headline,
	.c-wizard--standard-item-copy {
		text-align: center;
		vertical-align: sub;
		display: inline-block;
		width: 100%;
	}

	.c-wizard--standard-item-wrapper div.c-wizard--standard-image-wrapper ~ div span {
		text-align: left;
		padding-left: calc(0.5 * var(--base-line-height));
	}

	.c-wizard--step-headline {
		margin-top: calc(0.5 * var(--base-line-height));
		margin-bottom: calc(1 * var(--base-line-height));
	}

	.c-wizard--step ~ .l-grid.l-grid--w-100pc-s {
		justify-content: center;
	}

	.c-wizard--standard-item-wrapper {
		display: flex;
		align-items: center;
		margin-left: 0;
		text-align: left;
		max-width: 100%;
		height: auto;
	}

	.c-wizard--standard-item-textcontainer {
		margin-bottom: 0;
		display: block;
		flex: 1;
	}

	.c-wizard--standard-image-wrapper {
		display: block;
		width: calc(3 * var(--base-line-height));
		margin-right: calc(1 * var(--base-line-height));
		height: calc(3 * var(--base-line-height));
	}

	.c-wizard--standard-image-wrapper .c-wizard--standard-image {
		width: 100%;
	}

	.c-wizard--standard-item-wrapper .c-wizard--standard-image {
		margin-bottom: 0;
		max-height: calc(3 * var(--base-line-height));
		height: calc(4 * var(--base-line-height));
	}

	.c-wizard--standard-item.l-grid--w-100pc-m .c-wizard--standard-item-wrapper {
		text-align: center;
		margin-left: auto;
	}

	.c-wizard--standard-item.l-grid--w-100pc-m .c-wizard--standard-item-headline {
		padding: 0;
		text-align: center;
	}

	.c-wizard--standard-item-wrapper--icon .c-wizard--standard-item-textcontainer {
		height: auto;
		margin: 0;
	}
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-wizard--standard-item.l-grid--w-50pc-s-l {
		flex-basis: calc(50% - calc(0.5 * var(--base-line-height)));
		margin-left: calc(1 * var(--base-line-height));
	}

	.c-wizard--standard-item.l-grid--w-50pc-s-l:nth-of-type(2n-1) {
		margin-left: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-wizard--standard-item.l-grid--w-50pc-m-s {
		flex-basis: calc(50% - calc(0.5 * var(--base-line-height)));
		margin-left: calc(1 * var(--base-line-height));
	}

	.c-wizard--standard-item.l-grid--w-50pc-m-s:nth-of-type(2n-1) {
		margin-left: 0;
	}

	.c-wizard--standard-image-wrapper {
		display: block;
		width: calc(3 * var(--base-line-height));
		margin-right: calc(1 * var(--base-line-height));
		height: calc(3 * var(--base-line-height));
	}

	.c-wizard--standard-image-wrapper .c-wizard--standard-image {
		width: 100%;
	}

	.c-wizard--standard-item-wrapper .c-wizard--standard-image {
		margin-bottom: 0;
		max-height: calc(3 * var(--base-line-height));
	}

	.c-wizard--standard-item-wrapper--icon .c-wizard--standard-item-textcontainer {
		height: auto;
		margin: 0;
	}

	.c-wizard--standard-item-textcontainer {
		margin-bottom: 0;
		display: block;
		flex: 1;
	}

	.c-wizard--standard-item-wrapper div.c-wizard--standard-image-wrapper ~ div span {
		text-align: left;
		padding-left: calc(0.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-wizard--standard-item-wrapper {
		flex-flow: column;
	}

	.c-wizard--standard-item-textcontainer {
		flex: 1 1 auto;
	}

	.c-wizard--standard-image-wrapper {
		flex-basis: auto;
	}

	.c-wizard--standard-item.l-grid--w-25pc-m {

		/* only 3 of 4 columns have a margin left applied */
		flex-basis: calc(25% - (var(--base-line-height) * 3 / 4));
		margin-left: calc(1 * var(--base-line-height));
	}

	.c-wizard--standard-item.l-grid--w-25pc-m:nth-of-type(4n-3) {
		margin-left: 0;
	}

	.c-wizard--standard-item.l-grid--w-50pc-m {
		flex-basis: calc(50% - calc(0.5 * var(--base-line-height)));
		margin-left: calc(1 * var(--base-line-height));
	}

	.c-wizard--standard-item.l-grid--w-50pc-m:nth-of-type(2n-1) {
		margin-left: 0;
	}
}

/* SPRINGBOARD */

.c-wizard--springboard {
	justify-content: space-around;
	transition: opacity 200ms, transform 200ms;
	transition-delay: 110ms;
	opacity: 0;
}

.c-wizard--springboard h4 {
	margin-bottom: calc(1 * var(--base-line-height));
}

.c-wizard--springboard .c-wizard--springboard-item-subheadline {
	margin-bottom: calc(2 * var(--base-line-height));
}

.c-wizard--springboard-item {
	margin-bottom: calc(1 * var(--base-line-height));
	padding: calc(1.5 * var(--base-line-height));
	position: relative;
}

.c-wizard--springboard-item .c-wizard--springboard-item-button-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
}

.c-wizard--springboard-item .c-wizard--springboard-image-wrapper {
	overflow: hidden;
	position: relative;
	text-align: center;
	height: calc(11 * var(--base-line-height));
	margin: calc(-1.5 * var(--base-line-height)) calc(-1.5 * var(--base-line-height)) calc(2 * var(--base-line-height));
}

.c-wizard--springboard-item .c-wizard--springboard-image {
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	margin: auto;
	position: absolute;
	transform: translateX(-50%);
}

/* rtl:raw:
.c-wizard--springboard-item a[href^="tel:"] {
	direction: ltr;
	unicode-bidi: bidi-override;
}
*/

.c-wizard--springboard-item .c-wizard--springboard-item-button-wrapper .base-button {
	padding: 0 calc(0.5 * var(--base-line-height));
	width: 100%;
}

@media screen and (min-width: 666px) and (max-width: 767px) {
	.c-wizard--springboard-item.l-grid--w-50pc-m {
		flex-basis: auto;
		width: calc(50% - calc(0.5 * var(--base-line-height)));
		margin-left: calc(1 * var(--base-line-height));
	}

	.c-wizard--springboard-item.l-grid--w-50pc-m:nth-of-type(2n-1) {
		margin-left: 0;
	}

	.c-wizard--springboard-item .base-button span {
		white-space: normal;
	}
}

@media screen and (min-width: 768px),print {
	.c-wizard--springboard-item.l-grid--w-50pc-m {
		flex-basis: auto;
		width: calc(50% - calc(0.5 * var(--base-line-height)));
		margin-left: calc(1 * var(--base-line-height));
	}

	.c-wizard--springboard-item.l-grid--w-50pc-m:nth-of-type(2n-1) {
		margin-left: 0;
	}

	.c-wizard--springboard-item .base-button span {
		white-space: normal;
	}
}

/* Safari Flexbox Hack */
_::-webkit-full-page-media,
_:future,
:root .c-wizard--standard-item-wrapper {
	height: auto;
}

/* EDITMODE, no baseline needed here */

.is-editmode .c-wizard--standard-item.l-grid--w-25pc-m,
.is-editmode .c-wizard--standard-item.l-grid--w-33pc-m,
.is-editmode .c-wizard--standard-item.l-grid--w-50pc-m,
.is-editmode .c-wizard--standard-item.l-grid--w-100pc-m,
.is-editmode .wizard-choice-step-container .new {
	flex-basis: 0;
	flex-grow: 1;
	width: auto;
	max-width: none;
}

.is-editmode .wizard-choice-step-container .new {
	flex-basis: 0.1%;
}

.is-editmode .wizard-springboard-step-container {
	margin-bottom: 11rem;
}

.is-editmode .c-wizard--springboard .new {
	width: 100%;
	flex-basis: 100%;
}

.is-editmode .c-wizard--step p,
.is-editmode .c-wizard--springboard-edit p {
	width: 100%;
	padding-left: 2rem;
}

.is-editmode .c-wizard--springboard-edit {
	width: 100%;
}

.is-editmode .c-wizard--springboard-item {
	border: 0.1rem solid #999999 !important; /* stylelint-disable-line declaration-no-important */
}

.is-editmode .c-wizard--springboard-item::after {
	display: none;
}

.is-editmode .c-wizard--step {
	transform: translate(0, 0);
}

.is-editmode .wizard-springboard-container {
	position: relative;
	width: 100%;
	flex-basis: 100%;
	max-width: 100%;
}

.is-editmode .wizard-choice {
	flex: 1 0 0;
	border-radius: 0.4rem;
	margin-right: calc(0.5 * var(--base-line-height));
	box-shadow: var(--shadow-small);
}

.is-editmode .c-wizard--springboard {
	border: 0.1rem solid var(--color-gray-300);
	margin-bottom: calc(3 * var(--base-line-height));
	opacity: 1;
	transform: translate(0, 0);
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/vertical-tabs/clientlib/css/vertical-tabs.css ***!
  \****************************************************************************************************************************************************************************************************************************/
/* START OF TEMPORARY FONT-STYLES OVERRIDE, WILL BE REMOVED WITH DPDHLPA-30649 */
.left-aligned-grid .c-vertical-tabs--copy-wrapper .level4 {
	font-size: 2.1rem;
	line-height: 2.8rem;
	margin-bottom: 1.1rem;
}

.left-aligned-grid .c-vertical-tabs--copy-wrapper p,
.left-aligned-grid .c-vertical-tabs--copy-wrapper li,
.left-aligned-grid .c-vertical-tabs--copy-wrapper a {
	font-size: 1.6rem;
	line-height: 2.8rem;
}

.left-aligned-grid .c-vertical-tabs--copy-wrapper ul {
	padding-left: 2.4rem;
	color: var(--color-black-400);
}

/* END OF TEMPORARY FONT-STYLES OVERRIDE */

.c-vertical-tabs--container {
	display: flex;
	overflow: hidden;
	border-radius: 0.4rem;
	flex-flow: column wrap;
}

.c-vertical-tabs--tablist-desktop,
.c-vertical-tabs--content-desktop,
.c-vertical-tabs--content-mobile {
	display: none;
}

.c-vertical-tabs--container .dynamic-icon-bg-color {
	word-break: break-word;
}

.c-vertical-tabs--label {
	position: relative;
	text-align: left;
	padding: calc(1.5 * var(--base-line-height)) calc(3 * var(--base-line-height)) calc(1.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
	word-break: break-word;
	max-width: 100%;
}

.c-vertical-tabs--label:not(.selected)::before {
	content: var(--icon-chevron-forward);
	position: absolute;
	font-size: 1.7rem;
	right: 0.9rem;
	top: 50%;
	margin-top: -1.1rem;
}

/* rtl:raw:
.c-vertical-tabs--label:not(.selected)::before {
  transform: scaleX(-1);
} */

.c-vertical-tabs--label.c-vertical-tabs--label-mobile::before {
	content: var(--icon-chevron-down);
	position: absolute;
	font-size: 1.8rem;
	right: calc(1.5 * var(--base-line-height));
	top: 50%;
	margin-top: -1.1rem;
}

.c-vertical-tabs--label.c-vertical-tabs--label-mobile.selected::before {
	content: var(--icon-chevron-back);
	font-size: 1.7rem;
}

/* rtl:raw:
.c-vertical-tabs--label.c-vertical-tabs--label-mobile.selected::before {
	transform: scaleX(-1);
} */

.c-vertical-tabs--label.selected {
	background-color: var(--color-yellow-500);
}

.c-vertical-tabs--color-red .c-vertical-tabs--label.selected {
	background-color: var(--color-red-500);
	color: var(--color-white-500);
}

.c-vertical-tabs--label.selected span {
	font-weight: bold;
}

.c-vertical-tabs--label:not(.selected) {
	cursor: pointer;
}

.c-vertical-tabs--label:not(.selected):hover {
	text-decoration: underline;
	background: var(--color-gray-50);
}

.c-vertical-tabs--label:not(.selected):focus {
	box-shadow: inset 0 0 0 0.1rem var(--color-red-500);
}

.c-vertical-tabs--label span {
	font-size: var(--font-size-2);
	line-height: 2.1rem;
	pointer-events: none;
	width: 100%;
}

.c-vertical-tabs--content-desktop {
	display: none;
	height: 100%;
	flex: 1 0 auto;
	background-color: var(--color-gray-50);
}

.c-vertical-tabs--content-mobile.selected {
	display: block;
	border-right: 0.3rem solid var(--color-yellow-500);
}

.c-vertical-tabs--color-red .c-vertical-tabs--label:not(.c-vertical-tabs--label-mobile),
.c-vertical-tabs--color-red .c-vertical-tabs--content-mobile {
	border-right-color: var(--color-red-500);
}

.c-vertical-tabs--content-mobile {
	position: relative;
	background-color: var(--color-gray-50);
	padding: calc(1.5 * var(--base-line-height));
}

.c-download-container--image-wrapper {
	position: relative;
	flex: 1 1 auto;
}

.c-vertical-tabs--copy-wrapper .list {
	list-style-position: inside;
	padding: 0;
}

.c-vertical-tabs--copy-wrapper .list li {
	padding-bottom: var(--base-line-height);
	border-bottom: var(--color-gray-300) solid 0.1rem;
	color: var(--color-black-500);
}

.c-vertical-tabs--copy-wrapper ul.list li {
	list-style: square inside;
}

.c-vertical-tabs--copy-wrapper ol.list li::before {
	content: "";
	width: 0.9rem;
	display: inline-block;
}

.c-vertical-tabs--copy-wrapper .list li:last-child {
	border: 0;
}

.c-vertical-tabs--copy-wrapper {
	word-break: break-word;
}

@media screen and (min-width: 768px),print {
	.c-vertical-tabs--container {
		flex-flow: row wrap;
	}

	.c-vertical-tabs--label-mobile,
	.c-vertical-tabs--content-mobile,
	.c-vertical-tabs--content-mobile.selected {
		display: none;
	}

	.c-vertical-tabs--tablist-desktop {
		display: flex;
		flex-flow: column wrap;
		border-right: 0.3rem solid var(--color-yellow-500);
	}

	.c-vertical-tabs--color-red .c-vertical-tabs--tablist-desktop {
		border-right: 0.3rem solid var(--color-red-500);
	}

	.c-vertical-tabs--content-desktop.selected {
		display: flex;
	}

	.c-vertical-tabs--copy-wrapper {
		overflow: auto;
		margin: calc(3.5 * var(--base-line-height)) calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.c-vertical-tabs--tablist-desktop {
		width: calc(var(--grid-cols-4) + var(--grid-col-gap));
	}

	.c-vertical-tabs--contentlist-desktop {
		width: var(--grid-cols-8);
	}

	.c-vertical-tabs--copy-wrapper {
		width: 100%;
	}

	.c-download-container--image-wrapper {
		display: none;
	}
}

@media screen and (min-width: 1024px),print {
	.c-vertical-tabs--container {
		min-height: calc(40 * var(--base-line-height));
	}

	.has-no-image.c-vertical-tabs--container {
		min-height: calc(40 * var(--base-line-height));
	}

	.c-vertical-tabs--tablist-desktop,
	.has-no-image .c-vertical-tabs--tablist-desktop {
		width: 24rem;
	}

	.c-vertical-tabs--contentlist-desktop {
		width: calc(100% - 24rem);
	}

	.c-vertical-tabs--copy-wrapper {
		width: 36%;
	}

	.has-no-image .c-vertical-tabs--copy-wrapper,
	.c-vertical-tabs--copy-wrapper.has-no-image {
		width: 100%;
	}

	.c-vertical-tabs--wide .has-no-image.c-vertical-tabs--container {
		width: 100%;
	}

	.c-vertical-tabs--wide .c-vertical-tabs--tablist-desktop {
		width: calc(var(--grid-cols-3) + var(--grid-col-gap));
	}

	.c-vertical-tabs--wide .c-vertical-tabs--tablist-desktop ~ .c-vertical-tabs--contentlist-desktop {
		width: var(--grid-cols-9);
	}
}

@media screen and (min-width: 1365px) {
	.has-no-image.c-vertical-tabs--container {
		min-height: calc(40 * var(--base-line-height));
	}

	.has-no-image .c-vertical-tabs--tablist-desktop,
	.c-vertical-tabs--tablist-desktop {
		width: 20.3rem;
	}

	.c-vertical-tabs--contentlist-desktop {
		width: calc(100% - 20.3rem);
	}

	.has-no-image .c-vertical-tabs--contentlist-desktop {
		width: calc(100% - 20.3rem);
	}

	.c-vertical-tabs--copy-wrapper {
		width: 36.5%;
	}

	.c-vertical-tabs--wide .c-vertical-tabs--copy-wrapper {
		width: 29.5%;
	}

	.has-no-image .c-vertical-tabs--copy-wrapper,
	.c-vertical-tabs--copy-wrapper.has-no-image {
		width: 100%;
	}

	.c-vertical-tabs--wide .c-vertical-tabs--tablist-desktop {
		width: calc(var(--grid-cols-3) + var(--grid-col-gap));
	}

	.c-vertical-tabs--wide .c-vertical-tabs--tablist-desktop ~ .c-vertical-tabs--contentlist-desktop {
		width: var(--grid-cols-9);
	}
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-footer/clientlib/css/voc-footer.css ***!
  \**********************************************************************************************************************************************************************************************************************/
.left-aligned-grid .c-voc-footer {
	display: block;
	border-top: 0.1rem solid var(--color-gray-200);
}

/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-footer/clientlib/css/voc-footer-sitemap.css ***!
  \******************************************************************************************************************************************************************************************************************************/
.c-voc-footer--sitemap {
	justify-content: flex-start;
	flex-direction: column;
	padding-top: 3.2rem;
	padding-bottom: 3.2rem;
	background-color: var(--color-white-500);
}

.c-voc-footer--sitemap-section {
	margin: 0;
	line-height: 2rem;
	padding-right: 2.1rem;
}

.c-voc-footer--sitemap-section:not(:last-child) {
	padding-bottom: 2.1rem;
}

.left-aligned-grid .c-voc-footer--sitemap-section:last-child {
	margin-right: 0;
}

.c-voc-footer--sitemap-section li {
	list-style-type: none;
	padding-top: calc(0.5 * var(--base-line-height));
	padding-bottom: var(--base-line-height);
}

.c-voc-footer--sitemap-section li a:focus,
.c-voc-footer--sitemap-section li.group-heading a.link:focus {
	outline: 0.1rem solid var(--color-black-500);
	outline-offset: var(--font-size-input-field-label);
	color: var(--color-red-500);
}

.c-voc-footer--sitemap-section li a:hover,
.c-voc-footer--sitemap-section li.group-heading a.link:hover,
.c-voc-footer--sitemap-section li.group-heading a.link:hover::after {
	color: var(--color-red-400);
}

.c-voc-footer--sitemap-section a.link {
	font-weight: normal;
	width: 100%;
	color: var(--color-gray-600);
	line-height: 1.5rem;
}

.left-aligned-grid .c-voc-footer--sitemap-section a.link {
	font-size: var(--font-size-text-small);
	line-height: 1.8rem;
}

.c-voc-footer--sitemap-section li.group-heading,
.c-voc-footer--sitemap-section li.group-heading a.link {
	font-size: var(--font-size-h5);
	font-weight: 800;
	line-height: 2rem;
	color: var(--color-black-400);
}

.left-aligned-grid .c-voc-footer--sitemap-section li.group-heading,
.left-aligned-grid .c-voc-footer--sitemap-section li.group-heading a.link {
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-voc-footer--sitemap-section li.red,
.c-voc-footer--sitemap-section li.red a.link {
	color: var(--color-red-500);
}

.left-aligned-grid .c-voc-footer--sitemap-section li.group-heading .link-internal::after {
	font-size: 1.7rem;
	line-height: 1.7rem;
	top: 0.4rem;
	margin-left: 0.4rem;
}

.left-aligned-grid .c-voc-footer--sitemap-section li.group-heading .link-external::after {
	font-size: 1.7rem;
	line-height: 1.7rem;
	margin-left: 0.4rem;
}

.c-voc-footer--sitemap-section li:not(.group-heading) .link-external::after {
	color: var(--color-gray-600);
}

.c-voc-footer--sitemap-section li:not(.group-heading) .link-external:hover::after {
	color: var(--color-red-500);
}

.left-aligned-grid .c-voc-footer--sitemap-section li:not(.group-heading) .link-external::after {
	font-size: var(--font-size-1);
	line-height: var(--base-line-height);
	bottom: 0.2rem;
	margin-left: 0.4rem;
	margin-right: 0;
}

@media screen and (min-width: 768px),print {
	.c-voc-footer--sitemap {
		justify-content: space-between;
		flex-direction: row;
	}
}

/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-footer/clientlib/css/voc-footer-branding.css ***!
  \*******************************************************************************************************************************************************************************************************************************/
.c-voc-footer--branding {
	padding-top: 2.1rem;
	padding-bottom: 4.2rem;
	background-color: var(--color-gray-50);
}

.c-voc-footer--branding-links-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.c-voc-footer--branding-links {
	flex-basis: 100%;
	padding-bottom: 0.6rem;
}

.c-voc-footer--branding-social {
	flex-basis: 100%;
	padding-bottom: 4.2rem;
}

.c-voc-footer--branding-links-header {
	flex: 0 0 auto;
	font-weight: 800;
	font-size: var(--font-size-1);
	line-height: 1.5rem;
}

.left-aligned-grid .c-voc-footer--branding-links-header {
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
}

.c-voc-footer--branding-links-header-logo {
	max-width: 100%;
}

.c-voc-footer--branding-link-list {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0.6rem 0 0;
}

.c-voc-footer--branding-link-list li {
	flex: 0 0 auto;
	flex-basis: 50%;
	list-style-type: none;
	padding: var(--base-line-height) var(--base-line-height) calc(1.5 * var(--base-line-height)) 0;
	line-height: 1.5rem;
}

.left-aligned-grid .c-voc-footer--branding-link-list li {
	font-size: var(--font-size-text-small);
	line-height: 1.8rem;
}

.c-voc-footer--branding-link-list li:nth-child(2n) {
	padding-right: 0;
}

.c-voc-footer--branding-link-list li a.link-external::after {
	color: var(--color-gray-600);
	line-height: var(--base-line-height);
	bottom: 0.1rem;
	margin-left: 0.4rem;
	margin-right: 0;
}

.c-voc-footer--branding-link-list li a.link-external:hover::after {
	color: var(--color-red-400);
}

.c-voc-footer--branding-link-list li a:focus {
	outline: 0.1rem solid var(--color-red-500);
	color: var(--color-red-500);
}

.c-voc-footer--branding-link-list li a:hover {
	color: var(--color-red-400);
	text-decoration: underline;
}

.c-voc-footer--branding-link-list a.link {
	font-weight: normal;
	color: var(--color-gray-600);
}

.c-voc-footer--branding-social-list {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.c-voc-footer--branding-social-list li {
	flex: 0 0 auto;
	list-style-type: none;
	padding-top: var(--base-line-height);
	margin: 0 calc(2 * var(--base-line-height)) var(--base-line-height) 0;
}

.c-voc-footer--branding-social-list li a:focus {
	outline: 0.1rem solid var(--color-black-500);
	outline-offset: var(--font-size-input-field-label);
}

.c-voc-footer--branding-social-list li,
.c-voc-footer--branding-social-list img {
	width: calc(2.5 * var(--base-line-height));
	height: calc(2.5 * var(--base-line-height));
}

/**
	The social icons are not available in darkgrey (#666666), but in the footer
	they must be shown with color #666666. To achieve this, we use the existing
	"black" social icons and set the opacity accordingly
 */
.c-voc-footer--branding-social-list img {
	opacity: 0.58;
}

.c-voc-footer--branding-social-list:hover > li:not(:hover) {
	opacity: 0.25;
}

.c-voc-footer--branding-copyright {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	font-size: var(--font-size-1);
	color: var(--color-gray-600);
	text-align: center;
	padding-bottom: 0;
}

.left-aligned-grid .c-voc-footer--branding-copyright {
	line-height: 1.8rem;
}

.c-voc-footer--action-bar ~ .c-voc-footer--branding .c-voc-footer--branding-copyright {
	padding-bottom: 6.6rem;
}

@media screen and (min-width: 480px) and (max-width: 665px) {
	.c-voc-footer--branding-links {
		padding-bottom: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-voc-footer--branding {
		padding-top: 3.5rem;
	}

	.c-voc-footer--branding-links-container {
		flex-flow: row nowrap;
	}

	.c-voc-footer--branding-links {
		flex-basis: 75%;
	}

	.c-voc-footer--branding-social {
		flex-basis: 25%;
		padding-left: 1.2rem;
	}

	.c-voc-footer--branding-link-list {
		margin: 1rem 0 0;
	}

	.c-voc-footer--branding-link-list li {
		flex-basis: auto;
		padding: var(--base-line-height) calc(2.5 * var(--base-line-height)) 0 0;
	}

	.c-voc-footer--branding-link-list li:nth-child(2n) {
		padding-right: calc(2.5 * var(--base-line-height));
	}

	.c-voc-footer--branding-social-list {
		margin: 0.4rem 0 0;
	}

	.c-voc-footer--branding-social-list li {
		width: calc(1.5 * var(--base-line-height));
		margin-right: calc(2 * var(--base-line-height));
	}

	.c-voc-footer--branding-social-list img {
		width: calc(1.5 * var(--base-line-height));
		height: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-voc-footer--branding-link-list li {
		flex-basis: auto;
	}
}

/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-footer/clientlib/css/voc-footer-action-bar.css ***!
  \*********************************************************************************************************************************************************************************************************************************/
.c-voc-footer--action-bar {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	height: calc(5 * var(--base-line-height));
	background-color: var(--color-white-500);
	overflow-x: scroll;
	width: 100%;
	bottom: 0;
	position: fixed;
	overflow-y: hidden;
	transition: height 500ms linear;
	z-index: calc(var(--header-z-index) - 1); /* Making it a bit lower than the header in case the header opens any overlay for menu */
	box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.1), 0 -0.2rem 1.2rem 0 rgba(0, 0, 0, 0.1), 0 -0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

.left-aligned-grid .c-voc-footer--action-bar {
	max-width: var(--width-page-fullwidth);
}

/* Background Colour change for Active State */
.c-voc-footer--action-bar.c-voc-footer--action-bar-scrolling-active {
	background-image: var(--linear-gradient-yellow-to-right);
}

.is-editmode .c-voc-footer--action-bar {
	position: static;
}

.c-voc-footer--action-bar-list-items .base-button {
	padding: 1.1rem calc(2 * var(--base-line-height)) 1rem 1.9rem;
}

.c-voc-footer--action-bar .base-button {
	transition: padding 500ms;
}

.c-voc-footer--action-bar .c-voc-footer--action-bar-list-items .base-button::before {
	transition: font-size 500ms;
}

.c-voc-footer--action-bar-list {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	list-style-type: none;
	line-height: 0;
	margin: 0;
	padding: 1.9rem 0 1.9rem calc(1.5 * var(--base-line-height));
	position: relative;
	flex-basis: 100%;
}

.c-voc-footer--action-bar-list-items {
	flex: 0 0 auto;
	list-style-type: none;
	margin-right: calc(1.5 * var(--base-line-height));
}

.c-voc-footer--action-bar-list-items:last-child .base-button {
	margin-right: calc(1.5 * var(--base-line-height));
}

.c-voc-footer--action-bar-list-items .link > span.c-link--content-container {
	display: none;
}

.c-voc-footer--action-bar-list-items .link > span.c-link--content-container:hover {
	text-decoration: underline;
}

.c-voc-footer--action-bar-list-items .link::before {
	display: block;
	font-size: 4.8rem;
	width: calc(3.2 * var(--font-size-button));
	height: calc(3.2 * var(--font-size-button));
	line-height: calc(3.2 * var(--font-size-button));
}

.c-voc-footer--action-bar-list-items .link:focus {
	border: 0.1rem solid var(--color-red-500);
}

.c-voc-footer--action-bar-list-items .link::after {
	display: none;
}

.c-voc-footer--action-bar-list-items .base-button--white:hover span {
	color: var(--color-white-500);
}

.c-voc-footer--action-bar .base-button > span.c-link--content-container {
	font-size: var(--font-size-1);
	line-height: var(--base-line-height);
	margin-left: calc(0.5 * var(--base-line-height));
}

.c-voc-footer--action-bar-list-items .base-button::before {
	position: relative;
	font-size: var(--font-size-quote-mobile);
	left: 0;
}

.c-voc-footer--action-bar-list-items .base-button:focus {
	border-color: var(--color-red-500);
}

.c-voc-footer--action-bar-list-items .base-button:hover {
	background-color: var(--color-red-500);
}

.c-voc-footer--action-bar-list-items .base-button:hover::before,
.c-voc-footer--action-bar-list-items .base-button:hover::after {
	color: var(--color-white-500);
}

.c-voc-footer--action-bar-scrolling-active {
	height: calc(6 * var(--base-line-height));
}

.c-voc-footer--action-bar-scrolling-active .c-voc-footer--action-bar-list::before {
	opacity: 1;
}

.c-voc-footer--action-bar-scrolling-active .base-button .link {
	padding: 1.6rem calc(2 * var(--base-line-height)) 1.7rem 1.9rem;
}

.c-voc-footer--action-bar-scrolling-active .base-button::before {
	font-size: calc(2 * var(--font-size-button));
}

.c-voc-footer--action-bar-list-items .base-button.link-external::after {
	line-height: var(--base-line-height);
}

.c-voc-footer--action-bar-list-items .base-button.link-external::after,
.c-voc-footer--action-bar-list-items .base-button.link-internal::after {
	top: -0.1rem;
}

.c-voc-footer--action-bar-scrolling-active .base-button.link-external::after {
	top: -0.1rem;
	margin-right: 0;
}

@media screen and (min-width: 768px),print {
	.c-voc-footer--action-bar-list {
		padding-left: calc(3 * var(--base-line-height));
	}
}

@media screen and (min-width: 1024px),print {
	.c-voc-footer--action-bar-list .link > span.c-link--content-container {
		display: block;
	}

	.c-voc-footer--action-bar-list .link::before {
		display: none;
	}

	.c-voc-footer--action-bar-list .link {
		font-weight: bold;
		color: var(--color-red-500);
		font-size: var(--font-size-h4);
		margin-right: calc(1.5 * var(--base-line-height));
	}

	.left-aligned-grid .c-voc-footer--action-bar-list .link {
		font-size: 2.1rem;
		line-height: 2.8rem;
	}
}

@media screen and (min-width: 1365px) {
	.c-voc-footer--action-bar-list {
		padding-left: calc(50% - 59.7rem);
	}
}

@media screen and (min-width: 1920px) {
	.c-voc-footer--action-bar-list {
		width: 100%;
		max-width: 192rem;
		padding-left: 36.2rem;
		padding-right: 36.8rem;
	}
}

/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/custom/voc-tracking-bar/clientlib/css/voc-tracking-bar.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
.c-voc-tracking-bar.c-voc-tracking-bar--cmp-padding {
	padding: 0 1.05rem;
}

.c-voc-tracking-bar--form {
	display: flex;
	flex-flow: column wrap;
}

.c-voc-tracking-bar--input-outer-group {
	border: 0.1rem solid var(--color-gray-500);
	border-radius: 0.5rem;
}

.c-voc-tracking-bar--input-inner-group {
	display: flex;
	background-color: var(--color-white-500);
	border-radius: 0.4rem;
	position: relative;
}

.c-voc-tracking-bar--input {
	flex: 1 1 auto;
	margin-right: 0.1rem;
	padding: calc(var(--base-line-height) + 0.4rem) calc(var(--base-line-height) - 0.1rem) 0;
	height: calc(4 * var(--base-line-height));
	border: none;
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
	width: 100%;

	/* see: https://webplatform.github.io/docs/css/properties/text-overflow/#Notes */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.c-voc-tracking-bar--form.invalid-input .c-voc-tracking-bar--input,
.c-tracking-input--form .invalid-input .c-tracking-input--field {
	box-shadow: 0 0 0 0.1rem var(--color-red-500);
}

.c-voc-tracking-bar--input:hover,
.c-voc-tracking-bar--form.invalid-input .c-voc-tracking-bar--input:hover {
	box-shadow: 0 0 0 0.1rem var(--color-black-500);
}

.c-voc-tracking-bar--input:focus,
.c-voc-tracking-bar--form.invalid-input .c-voc-tracking-bar--input:focus {
	margin-right: 0.2rem;
	box-shadow: 0 0 0 0.2rem var(--color-black-500);
}

.c-voc-tracking-bar--form.invalid-input .c-form-step--error-message {
	display: block;
}

.c-tracking-input--form .invalid-input .c-form-step--error-message {
	display: block;
	background-color: var(--color-gray-50);
}

.c-voc-tracking-bar--input::placeholder {
	color: var(--color-gray-600);
}

.c-voc-tracking-bar--input.invalid-input::placeholder {
	color: var(--color-red-500);
}

.c-voc-tracking-bar--element-label {
	position: absolute;
	padding: calc(1 * var(--base-line-height) + 0.3rem) calc(1 * var(--base-line-height));
	width: calc(100% - var(--base-line-height));
	white-space: nowrap;
	color: var(--color-gray-600);
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: var(--font-size-standard);
	transition: top 200ms ease-out, padding 200ms ease-out, padding-top 200ms ease-out, font-size 200ms ease-out, line-height 200ms ease-out, background-color 1ms 200ms;
}

.left-aligned-grid .c-voc-tracking-bar--element-label {
	padding: calc(1 * var(--base-line-height) + 0.6rem) calc(1 * var(--base-line-height));
	font-size: var(--font-size-2);
	line-height: 1.6rem;
	pointer-events: none;
}

[data-form-value-state="unset"] .c-voc-tracking-bar--input:focus ~ .c-voc-tracking-bar--element-label,
[data-form-value-state="set"] .c-voc-tracking-bar--element-label {
	padding-top: 0.9rem;
	font-size: 1.1rem;
	line-height: 1.4rem;
	padding-bottom: 0;
}

.c-voc-tracking-bar--button {
	flex: 0 0 auto;
	margin: 0.2rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	min-width: 11rem;
	width: auto;
	font-size: var(--font-size-2);
}

.c-voc-tracking-bar--button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* separate extended selector to achieve the necessary specificity */
.c-voc-tracking-bar--button.green-button {
	border: 0.1rem solid var(--color-green-600);
	background-color: var(--color-green-600);
}

.c-voc-tracking-bar--button.green-button:hover,
.c-voc-tracking-bar--button.green-button:active {
	border: 0.1rem solid var(--color-green-600);
	background-color: var(--color-green-600);
}

.c-voc-tracking-bar--button.green-button:not(.is-disabled):focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.94), 0 0 0 0.4rem var(--color-green-600);
	background-color: var(--color-green-600);
	border-color: var(--color-green-600);
}

/* Fix for usage of tracking input component inside of new navigation flyout within aemGrid */
.c-voc-tracking-bar {
	clear: both;
}

@media screen and (max-width: 767px),print {
	.c-voc-tracking-bar {
		margin-bottom: calc(1.5 * var(--base-line-height));
	}
}

@media screen and (min-width: 768px),print {
	.c-voc-tracking-bar--form {
		flex-direction: row;
		justify-content: start;
	}

	.component-no-padding .c-voc-tracking-bar--form {
		padding-bottom: 0;
	}

	.c-voc-tracking-bar--label {
		padding: calc(1 * var(--base-line-height) + 0.4rem) 0 0;
		margin-right: 2.2rem;
	}

	.c-voc-tracking-bar--input-outer-group {
		flex: 0 1 100%;
	}
}

/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-download/clientlib/css/cmp-download.css ***!
  \************************************************************************************************************************************************************************************************************************/
.cmp-download {
	display: block;
	width: 100%;
	position: relative;
	cursor: pointer;
	min-height: 4.4rem;
	height: auto;
	margin-top: calc(1.5 * var(--base-line-height));
}

.cmp-download:focus {
	outline: 0.1rem solid var(--color-red-500);
}

.cmp-download__title {
	line-height: 1;
	font-size: var(--font-size-2);
	margin: 0 0 0.2rem calc(4 * var(--base-line-height));
}

.cmp-download__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4.5rem;
	height: 4.4rem;
	border-radius: 0.4rem;
	background-color: var(--color-red-500);
}

.cmp-download__title-link {
	color: var(--color-red-500);
	font-size: var(--font-size-2);
	font-weight: normal;
	line-height: calc(1.5 * var(--base-line-height));
}

.cmp-download:hover .cmp-download__title-link,
.cmp-download__title-link:hover {
	text-decoration: underline;
	color: var(--color-red-400);
}

.cmp-download__title-link::after {
	content: var(--icon-download-file);
	font-size: var(--font-size-4);
	font-family: "dhlicons";
	color: var(--color-white-500);
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
}

.cmp-download__properties {
	display: flex;
	flex-flow: row-reverse;
	justify-content: flex-end;
	color: var(--color-gray-600);
	font-size: var(--font-size-1);
	line-height: 1.8rem;
	margin-left: calc(3 * var(--base-line-height));
}

.cmp-download__property--format {
	margin: 0 0.6rem 0 1.5rem;
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-accordion/clientlib/css/cmp-accordion.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.cmp-accordion__item {
	display: block;
	cursor: pointer;
	position: relative;
	text-align: left;
	border: 0;
	border-color: var(--color-gray-300);
	border-style: solid;
	border-top-width: 0.1rem;
}

.cmp-accordion__item:last-child {
	border-bottom-width: 0.1rem;
}

.cmp-accordion__header {
	margin: 0;
	cursor: pointer;
}

.cmp-accordion__button {
	color: var(--color-black-400);
	font-weight: normal;
	font-size: var(--font-size-2);
	display: block;
	line-height: calc(1.5 * var(--base-line-height));
	width: 100%;
	text-align: left;
	padding: 1.8rem 4.4rem 1.7rem 0;
	position: relative;
	cursor: pointer;
}

/* rtl:raw:
.is-editmode .cmp-accordion__button  {
   text-align:right;
}
*/

.cmp-accordion__item .cmp-accordion__button:focus::after {
	outline: 0.2rem solid var(--color-black-500);
	height: 100%;
	content: "";
	display: block;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: border-color 200ms;
	width: 100%;
	z-index: 1;
}

.cmp-accordion__item .cmp-accordion__button:active::after {
	outline: none;
}

.cmp-accordion__panel {
	padding: 0.8rem 5rem 2.8rem 0;
	cursor: default;
	display: none;
}

.cmp-accordion__panel--expanded {
	display: block;
}

/**
* In the case we have a download component as the first element
* within the according panel, we need to reduce the margin of
* the first download entry to fit the design
*/
.cmp-accordion__panel--expanded .download:first-child .cmp-download {
	margin-top: 0;
}

.cmp-accordion__panel--hidden {
	display: none;
}

.cmp-accordion__item .cmp-accordion__button .cmp-accordion__icon::after {
	position: absolute;
	color: var(--color-black-400);
	right: calc(1 * var(--base-line-height));
	font-family: "dhlicons";
	content: var(--icon-chevron-down);
	height: auto;
	top: 50%;
	font-size: calc(1.5 * var(--base-line-height));
	transform: translateY(-50%);
}

.cmp-accordion__item.cmp-accordion__item--active .cmp-accordion__icon::after {
	content: var(--icon-chevron-up);
}

.cmp-accordion__item.cmp-accordion__item--active .cmp-accordion__title {
	font-weight: bold;
}

.cmp-accordion__item--active,
.cmp-accordion__item:hover {
	border-color: var(--color-black-400);
}

.cmp-accordion__item--active + .cmp-accordion__item:not(.cmp-accordion__item:last-child),
.cmp-accordion__item:hover + .cmp-accordion__item:not(.cmp-accordion__item:last-child) {
	border-color: var(--color-black-400);
}

.cmp-accordion__item--active + .cmp-accordion__item:last-child,
.cmp-accordion__item:hover + .cmp-accordion__item:last-child {
	border-top-color: var(--color-black-400);
}

.accordion.header-large-font .cmp-accordion__title {
	font-size: var(--font-size-text-large);
	line-height: calc(1.5 * var(--base-line-height));
}

.cmp-accordion .cmp-accordion__title {
	font-size: var(--font-size-2);
	line-height: calc(1.5 * var(--base-line-height));
}

@media screen and (min-width: 1024px),print {
	.accordion.header-large-font .cmp-accordion__title {
		font-size: calc(1.5 * var(--base-line-height));
		line-height: 3.2rem;
	}

	.cmp-accordion .cmp-accordion__title {
		font-size: var(--font-size-2);
		line-height: calc(1.5 * var(--base-line-height));
	}
}

/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-carousel/clientlib/css/cmp-carousel.css ***!
  \************************************************************************************************************************************************************************************************************************/
:root {
	--cmp-carousel-indicators-height: 6rem;
	--cmp-carousel-indicators-underneath-background-color: #e0e0e0;
}

.cmp-carousel--top-margin {
	margin-top: calc(1.5 * var(--base-line-height));
}

.cmp-carousel--align-left {
	text-align: left;
}

.cmp-carousel--align-center {
	text-align: center;
}

.cmp-carousel--align-right {
	text-align: right;
}

.cmp-carousel__content {
	align-items: stretch;
	display: flex;
	overflow: hidden;
	position: relative;
}

.cmp-carousel__item {
	flex-shrink: 0;
	padding-left: calc(3.5 * var(--base-line-height));
	padding-right: calc(3.5 * var(--base-line-height));
	position: relative;
	transition: transform 250ms ease-in-out;
	width: 100%;
}

.cmp-carousel--with-overlay .cmp-carousel__item::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
	bottom: 0;
	box-sizing: border-box;
	content: " ";
	display: block;
	height: 10.5rem;
	left: calc(3.5 * var(--base-line-height));
	pointer-events: none;
	position: absolute;
	right: calc(3.5 * var(--base-line-height));
}

.cmp-carousel--arrows-inside.cmp-carousel--with-overlay .cmp-carousel__item::after {
	left: 0;
	right: 0;
}

.cmp-carousel--pagination-underneath .cmp-carousel__item {
	margin-bottom: var(--cmp-carousel-indicators-height);
}

.cmp-carousel--arrows-inside .cmp-carousel__item {
	padding-left: 0;
	padding-right: 0;
}

.cmp-carousel__action {
	align-items: center;
	background-color: transparent;
	border-radius: 0.4rem;
	border: 0;
	cursor: pointer;
	display: flex;
	height: calc(3 * var(--base-line-height));
	justify-content: center;
	margin: 0 calc(0.5 * var(--base-line-height));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color 200ms, color 200ms, opacity 200ms;
	width: calc(2.5 * var(--base-line-height));
	z-index: 1;
}

.cmp-carousel__action:focus {
	opacity: 1;
	outline: solid 0.1rem var(--color-red-500);
}

.cmp-carousel--arrows-inside .cmp-carousel__action:hover,
.cmp-carousel__action:hover {
	background-color: var(--color-red-500);
	color: var(--color-white-500);
	opacity: 1;
}

.cmp-carousel__action-icon {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: "dhlicons";
	font-size: calc(2 * var(--base-line-height));
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
}

.cmp-carousel--arrows-inside .cmp-carousel__action {
	background-color: var(--color-white-500);
	opacity: 0.9;
}

.cmp-carousel--pagination-underneath .cmp-carousel__action {
	transform: translateY(calc(-50% - (var(--cmp-carousel-indicators-height) / 2)));
}

.cmp-carousel__action--previous {
	left: 0;
}

.cmp-carousel__action--previous > .cmp-carousel__action-icon::before {
	content: var(--icon-chevron-back);
	display: inline-block;
}

/* rtl:raw:
.cmp-carousel__action--previous > .cmp-carousel__action-icon::before {
	transform: scaleX(-1);
} */

.cmp-carousel__action--next {
	right: 0;
}

.cmp-carousel__action--next > .cmp-carousel__action-icon::before {
	content: var(--icon-chevron-forward);
	display: inline-block;
}

/* rtl:raw:
.cmp-carousel__action--next > .cmp-carousel__action-icon::before {
transform: scaleX(-1);
} */

.cmp-carousel__action-text {
	display: none;
}

.cmp-carousel__action--pause,
.cmp-carousel__action--play {
	display: none;
}

.cmp-carousel__indicators {
	align-items: center;
	bottom: 0;
	box-sizing: content-box;
	display: flex;
	height: var(--cmp-carousel-indicators-height);
	justify-content: center;
	list-style: none;
	margin: 0;
	position: absolute;
	width: 100%;
}

.cmp-carousel__indicator {
	background-color: var(--color-white-500);
	border-bottom: solid 0.1rem rgba(0, 0, 0, 0.45);
	cursor: pointer;
	height: 0.4rem;
	margin-left: calc(0.5 * var(--base-line-height));
	overflow: hidden;
	transition: background-color 200ms;
	width: 4rem;
}

.cmp-carousel__indicator:focus {
	outline: solid 0.2rem var(--color-red-500);
	outline-offset: 0.1rem;
}

.cmp-carousel--pagination-underneath .cmp-carousel__indicator {
	background-color: var(--cmp-carousel-indicators-underneath-background-color);
}

.cmp-carousel__indicator.cmp-carousel__indicator--active:hover,
.cmp-carousel__indicator:hover {
	background-color: var(--color-red-400);
}

.cmp-carousel__indicator:first-child {
	margin-left: 0;
}

.cmp-carousel__indicator.cmp-carousel__indicator--active {
	background-color: var(--color-red-500);
}

/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./source/components/core/cmp-container/clientlib/css/cmp-container.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/* stylelint-disable length-zero-no-unit */

/*
We want to have 0 with the `rem` unit so the `calc` operation works. Without it, it simply doesn't work
E.g.: https://codepen.io/moich4no/pen/jOYrdOY

// INVALID, doesn't return 20rem
.class { padding: calc(20rem + 0);  }

// VALID, returns 20rem
.class { padding: calc(20rem + 0rem); }
*/

:root {
	--container-gutter-size: calc(1.5 * var(--base-line-height));
}

.container-border-grey-bottom > .cmp-container {
	border-bottom: solid 0.1rem var(--color-gray-300);
}

.container-border-grey-left > .cmp-container {
	border-left: solid 0.1rem var(--color-gray-300);
}

.container-border-grey-right > .cmp-container {
	border-right: solid 0.1rem var(--color-gray-300);
}

.container-border-grey-top > .cmp-container {
	border-top: solid 0.1rem var(--color-gray-300);
}

.container-border-yellow-left > .cmp-container {
	border-left: solid 0.4rem var(--color-yellow-500);
}

.container-border-red-left > .cmp-container {
	border-left: solid 0.4rem var(--color-red-500);
}

.container-shadow-inset-top-bottom > .cmp-container {
	box-shadow: inset 0 1.1rem 0.8rem -1rem rgba(0, 0, 0, 0.3), inset 0 -1.1rem 0.8rem -1rem rgba(0, 0, 0, 0.3);
}

.container-margin-bottom > .cmp-container {
	margin-bottom: calc(4 * var(--base-line-height));
}

.container-margin-bottom-fixed > .cmp-container {
	margin-bottom: calc(2.5 * var(--base-line-height));
}

.container-margin-top > .cmp-container {
	margin-top: calc(1.5 * var(--base-line-height));
}

/* Nested container */
.container .container-margin-bottom > .cmp-container {
	margin-bottom: calc(1.5 * var(--base-line-height));
}

/*
	Unfortunately we cannot use var(--base-line-height) when creating new CSS variables.
	I think the issue is related to how our postcss loader is generating our variables.
*/
.cmp-container--padding-size-0 {
	--padding: 0rem;
}

.cmp-container--padding-size-14 {
	--padding: 1.4rem;
}

.cmp-container--padding-size-21 {
	--padding: 2.1rem;
}

.cmp-container--padding-size-28 {
	--padding: 2.8rem;
}

.cmp-container--padding-size-35 {
	--padding: 3.5rem;
}

.cmp-container--padding-size-56 {
	--padding: 5.6rem;
}

.cmp-container {

	/* We default to 0 if --padding is not defined */
	--container-padding: var(--padding, 0rem);

	/* Removing margins from each side, hence the `2 * [margin]` */
	max-width: calc(100vw - (2 * 1.5 * var(--base-line-height)));
	margin-left: auto;
	margin-right: auto;
	background-color: var(--color-white-500);
}

.cmp-container:not([class*="cmp-container--padding-position-"]) {
	padding: var(--container-padding);
}

.cmp-container.cmp-container--full-width {
	padding-left: calc(1.5 * var(--base-line-height) + var(--container-padding));
	padding-right: calc(1.5 * var(--base-line-height) + var(--container-padding));
	max-width: 100%;
}

.cmp-container--padding-position-bottom {
	padding-bottom: var(--container-padding);
}

.cmp-container--padding-position-left {
	padding-left: var(--container-padding);
}

.cmp-container--padding-position-right {
	padding-right: var(--container-padding);
}

.cmp-container--padding-position-top {
	padding-top: var(--container-padding);
}

/* stylelint-disable-next-line selector-class-pattern */
.cmp-container--gutter-21 > .aem-Grid {

	/* 1. When we have a gutter, we want to add a negative margin to the grid to compensate it. */
	margin: 0 calc(-1 * var(--container-gutter-size) / 2);
	width: auto;
}

/* stylelint-disable-next-line selector-class-pattern */
.cmp-container--gutter-21 > .aem-Grid > .aem-GridColumn {

	/* 2. And we can add the gutter to the grid elements. */
	padding: 0 calc(var(--container-gutter-size) / 2);
}

/* Adding this quick fix for the Release, but needs a BE change in the follow up ticket: DPDHLPA-32154 */
/* stylelint-disable-next-line selector-class-pattern */
.cmp-container--gutter-21 > .aem-Grid > div {

	/* 2. And we can add the gutter to the grid elements. */
	padding: 0 calc(var(--container-gutter-size) / 2);
}

/*
	For containers inside containers we want to ensure that the left and right margins are always `0`.
	Left and right margins only applies to the outermost container.
*/
.container > .cmp-container .container > .cmp-container {
	margin-left: 0;
	margin-right: 0;
}

.cmp-container--transparent {
	background: transparent;
}

.cmp-container--yellow-gradiant-horizontal {
	background: var(--linear-gradient-yellow-to-right);
}

.cmp-container--yellow-gradiant-vertical {
	background: var(--linear-gradient-yellow-to-bottom);
}

.cmp-container--white {
	background-color: var(--color-white-500);
}

.cmp-container--grey {
	background-color: var(--color-gray-100);
}

.cmp-container--light-grey {
	background-color: var(--color-gray-50);
}

.cmp-container--black {
	background-color: var(--color-black-400);
}

/**
 * STYLES WHEN HAVING A BACKGROUND IMAGE
 */
.cmp-container--has-background-image {
	position: relative;
	background-repeat: no-repeat;
}

.cmp-container--has-background-image > * {
	position: relative;
}

.cmp-container--has-opacity-layer::before {
	position: absolute;
	content: " ";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cmp-container--black-opacity-20::before {
	background: var(--color-black-opacity-20);
}

.cmp-container--black-opacity-40::before {
	background: var(--color-black-opacity-40);
}

.cmp-container--white-opacity-20::before {
	background: var(--color-white-opacity-20);
}

.cmp-container--white-opacity-40::before {
	background: var(--color-white-opacity-40);
}

/**
 * STYLES FOR EXTENSION "BOTTOM-ALIGNMENT"
 */

.cmp-container--bottom-aligned {
	height: 100%;
}

/* stylelint-disable-next-line selector-class-pattern */
.cmp-container--bottom-aligned > .aem-Grid {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* stylelint-disable-next-line selector-class-pattern */
.cmp-container--bottom-aligned > .aem-Grid > div:last-child {
	margin: auto 0 0;
}

/**
 * STYLES FOR EXTENSION "FAQ"
 */
.cmp-container--is-faq .cmp-text__inline-text--large-body-copy {
	margin-top: 1.1rem;
}

/**
 * STYLES FOR EXTENSION "HORIZONTAL-ARROW"
 */

.cmp-container--horizontal-arrow {
	position: relative;
	background-color: var(--color-white-500);
}

.container-shadow-border-round-corner > .cmp-container.cmp-container--horizontal-arrow {
	box-shadow: none;
}

.cmp-container--filter-shadow {
	filter: drop-shadow(0 0.1rem 0.3rem rgba(50, 50, 50, 0.5));
}

.cmp-container--filter-shadow .cmp-container--horizontal-arrow::after {
	box-shadow: none;
}

/* Below value `2.12132rem` results `c=√(a^2+b^2)` where a and b are the measure of the edges of the triangles that defined the arrow */
.cmp-container--horizontal-arrow:not(.cmp-container--no-arrow-top) {
	clip-path: polygon(0 0, calc(100% / 2 - 2.12132rem) 0, 50% 2.12132rem, calc(100% / 2 + 2.32132rem) 0, 100% 0, 100% calc(100% + 2.92132rem), 0 calc(100% + 2.12132rem), 0 0);
}

.cmp-container--horizontal-arrow.cmp-container--no-arrow-top {
	box-shadow: none;
}

/* Styles for the "notch" at the top a container depending on the outer container background */
.cmp-container--yellow-gradiant-horizontal .cmp-container--horizontal-arrow::before,
.cmp-container--yellow-gradiant-vertical .cmp-container--horizontal-arrow::before {
	background: var(--color-yellow-500);
}

.cmp-container--grey .cmp-container--horizontal-arrow::before {
	background-color: var(--color-gray-100);
}

.cmp-container--light-grey .cmp-container--horizontal-arrow::before {
	background-color: var(--color-gray-50);
}

.cmp-container--horizontal-arrow::after {
	content: "";
	position: absolute;
	transition: box-shadow 250ms;
	right: 50%;
	background-color: var(--color-white-500);
	bottom: 0.1rem;
	z-index: 2;
	width: 3rem;
	height: 3rem;
	box-shadow: 0 0 0.4rem 0.1rem rgba(50, 50, 50, 0.5);
	transform: translate(50%, 50%) rotate(45deg);
	clip-path: polygon(50% 50%, 100% 0%, 130% 6%, 130% 130%, 6% 130%, 0% 100%);
}

/* rtl:raw:
.cmp-container--horizontal-overlap-left-on-top .cmp-container--horizontal-arrow::after,
.cmp-container--horizontal-overlap-right-on-top .cmp-container--horizontal-arrow::after{
	left: calc(50% - 27px);
}
.cmp-container--horizontal-arrow::after {
	transform: translate(50%, 50%) rotate(45deg);
	left: calc(50% - 30px);
}
*/

.cmp-container--no-arrow-top.cmp-container--horizontal-arrow::before,
.cmp-container--no-arrow-bottom.cmp-container--horizontal-arrow::after {
	display: none;
}

/* Styles for the arrow background depending on the container background */
.cmp-container--grey.cmp-container--horizontal-arrow,
.cmp-container--grey.cmp-container--horizontal-arrow::after {
	background-color: var(--color-gray-100);
}

.cmp-container--light-grey.cmp-container--horizontal-arrow,
.cmp-container--light-grey.cmp-container--horizontal-arrow::after {
	background-color: var(--color-gray-50);
}

.cmp-container--black.cmp-container--horizontal-arrow,
.cmp-container--black.cmp-container--horizontal-arrow::after {
	background-color: var(--color-black-400);
}

.cmp-container--yellow-gradiant-vertical.cmp-container--horizontal-arrow::after {
	background-color: var(--color-yellow-300);
}

.cmp-container--yellow-gradiant-horizontal.cmp-container--horizontal-arrow::after {
	background-color: var(--color-yellow-500);
}

/* stylelint-disable selector-class-pattern */
.cmp-container--equal-height-desktop > .aem-Grid > .aem-GridColumn,
.cmp-container--equal-height-tablet > .aem-Grid > .aem-GridColumn {
	height: auto;
}
/* stylelint-enable selector-class-pattern */

/** SHADOW TOP CLIP **/
.container-shadow-top:not(.container-shadow-border-round-corner, .container-shadow-none) > .cmp-container {
	box-shadow: var(--shadow-small);
	position: relative;
	top: 0rem;
	clip-path: inset(-0.4rem -0.4rem 0rem -0.4rem);
	border-radius: 0.4rem 0.4rem 0 0;
}

/** SHADOW MIDDLE CLIP **/
.container-shadow-middle:not(.container-shadow-border-round-corner, .container-shadow-none) > .cmp-container {
	box-shadow: var(--shadow-small);
	position: relative;
	top: 0rem;
	clip-path: inset(-0rem -0.4rem 0rem -0.4rem);
	border-radius: 0;
}

/** SHADOW BOTTOM CLIP **/
.container-shadow-bottom:not(.container-shadow-border-round-corner, .container-shadow-none) > .cmp-container {
	box-shadow: var(--shadow-small);
	position: relative;
	top: 0rem;
	clip-path: inset(0rem -0.4rem -0.4rem -0.4rem);
	border-radius: 0 0 0.4rem 0.4rem;
}

.container-shadow-border-round-corner:not(.container-shadow-none) > .cmp-container {
	box-shadow: var(--shadow-small);
	position: static;
	clip-path: none;
	border-radius: 0.4rem;
}

.container-shadow-none > .cmp-container {
	box-shadow: none;
	position: static;
	clip-path: none;
	border-radius: 0;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

	/**
 	* STYLES FOR EXTENSION "EQUAL-HEIGHT TABLET"
 	*/

	/* stylelint-disable-next-line selector-class-pattern */
	.cmp-container--equal-height-tablet > .aem-Grid {
		display: flex;
		flex: 1;
	}

	/* stylelint-disable-next-line selector-class-pattern */
	.cmp-container--equal-height-tablet > .aem-Grid > .aem-GridColumn {
		height: 100%;
	}

	.cmp-container--equal-height-tablet {
		display: flex;
	}

	.cmp-container--equal-height-tablet .cmp-container,
	.cmp-container--equal-height-tablet .cmp-teaser {
		height: 100%;
	}

	/* In the case we have a top margin for a teaser, we need to reduce the height of the teaser accordingly */
	.cmp-container--equal-height-tablet .teaser-top-margin .cmp-teaser {
		height: calc(100% - calc(1.5 * var(--base-line-height)));
	}
}

@media screen and (min-width: 768px),print {
	.cmp-container:not(.cmp-container--full-width) {

		/* Removing margins from each side, hence the `2 * [margin]` */
		max-width: calc(100vw - (2 * 3 * var(--base-line-height)));
	}

	.is-editmode .cmp-container:not(.cmp-container--full-width) {
		max-width: none;
	}

	.cmp-container.cmp-container--full-width {
		padding-left: calc(3 * var(--base-line-height) + var(--container-padding));
		padding-right: calc(3 * var(--base-line-height) + var(--container-padding));
	}

	.container-margin-bottom > .cmp-container {
		margin-bottom: calc(5 * var(--base-line-height));
	}

	/**
	 * STYLES FOR EXTENSION "FLEXIBLE SIZE"
	 */

	/* stylelint-disable-next-line selector-class-pattern */
	.cmp-container--is-flexible-image > .aem-Grid {
		height: 100%;
	}

	.cmp-container--is-flexible-image .image {
		height: 100%;
	}

	.cmp-container--is-flexible-image .cmp-image {
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.cmp-container--is-flexible-image .cmp-image__image {
		position: absolute;
		left: 0;
		width: 100%;
	}

	.cmp-container--flexible-image-center-aligned .cmp-image__image,
	.cmp-container--flexible-image-left-aligned .cmp-image__image,
	.cmp-container--flexible-image-right-aligned .cmp-image__image {
		top: 0;
		height: 100%;
		object-fit: cover;
	}

	.cmp-container--flexible-image-center-aligned .cmp-image__image {
		object-position: center;
	}

	.cmp-container--flexible-image-left-aligned .cmp-image__image {
		object-position: left;
	}

	.cmp-container--flexible-image-right-aligned .cmp-image__image {
		object-position: right;
	}

	.cmp-container--flexible-image-top-aligned .cmp-image__image {
		top: 0;
	}

	.cmp-container--flexible-image-bottom-aligned .cmp-image__image {
		bottom: 0;
	}
}

@media screen and (min-width: 1024px),print {

	/**
 	* STYLES FOR EXTENSION "HORIZONTAL-OVERLAP"
 	*/

	/* stylelint-disable selector-class-pattern */
	.cmp-container--horizontal-overlap-left-on-top > .aem-Grid,
	.cmp-container--horizontal-overlap-right-on-top > .aem-Grid {
		width: calc(100% + 1.5 * var(--base-line-height));
	}
	/* stylelint-enable selector-class-pattern */

	/* stylelint-disable-next-line selector-class-pattern */
	.cmp-container--horizontal-overlap-left-on-top > .aem-Grid > .container:not(:first-child) {
		margin-left: calc(-1.5 * var(--base-line-height));
		padding-bottom: calc(1.5 * var(--base-line-height));
	}

	/* stylelint-disable selector-class-pattern */
	.cmp-container--horizontal-overlap-left-on-top > .aem-Grid > .container:first-child,
	.cmp-container--horizontal-overlap-right-on-top > .aem-Grid > .container:not(:first-child) {
		position: relative;
		z-index: 1;
	}
	/* stylelint-enable selector-class-pattern */

	/* stylelint-disable-next-line selector-class-pattern */
	.cmp-container--horizontal-overlap-right-on-top > .aem-Grid > .container:first-child {
		margin-right: calc(-1.5 * var(--base-line-height));
		padding-bottom: calc(1.5 * var(--base-line-height));
	}

	/**
 	* STYLES FOR EXTENSION "FAQ"
 	*/
	.cmp-container--is-faq .cmp-text,
	.cmp-container--is-faq .cmp-title {
		min-width: 69.9rem;
		max-width: calc(9 / 12 * 100%);
	}

	/**
 	* STYLES FOR EXTENSION "EQUAL-HEIGHT DESKTOP"
 	*/

	/* stylelint-disable-next-line selector-class-pattern */
	.cmp-container--equal-height-desktop > .aem-Grid {
		display: flex;
		flex: 1;
	}

	/* stylelint-disable-next-line selector-class-pattern */
	.cmp-container--equal-height-desktop > .aem-Grid > .aem-GridColumn {
		height: 100%;
	}

	.cmp-container--equal-height-desktop {
		display: flex;
	}

	.cmp-container--equal-height-desktop .cmp-container,
	.cmp-container--equal-height-desktop .cmp-teaser {
		height: 100%;
	}

	/* In the case we have a top margin for a teaser, we need to reduce the height of the teaser accordingly */
	.cmp-container--equal-height-desktop .teaser-top-margin .cmp-teaser {
		height: calc(100% - calc(1.5 * var(--base-line-height)));
	}
}

@media screen and (min-width: 1365px) {
	.cmp-container:not(.cmp-container--full-width) {
		max-width: var(--width-page-max-nopadding);
	}

	.is-editmode .cmp-container:not(.cmp-container--full-width) {
		max-width: none;
	}

	.cmp-container--is-faq .cmp-text,
	.cmp-container--is-faq .cmp-title {
		min-width: 89.3rem;
	}

	.cmp-container.cmp-container--full-width {
		padding-left: calc(calc(var(--component-page-max-padding)) + var(--container-padding));
		padding-right: calc(calc(var(--component-page-max-padding)) + var(--container-padding));
	}
}

@media screen and (max-width: 767px),print, screen and (min-width: 768px) and (max-width: 1023px) {
	/* stylelint-disable-next-line selector-class-pattern */
	.cmp-container--right-on-top > .aem-Grid {
		display: flex;
		flex-direction: column-reverse;
	}

	.cmp-container--right-on-top .cmp-container--is-flexible-image .cmp-image__image,
	.cmp-container--left-on-top .cmp-container--is-flexible-image .cmp-image__image {
		position: relative;
	}
}


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