@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable property-no-vendor-prefix, declaration-block-no-duplicate-properties */
* {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: inherit;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

fieldset,
img {
  border: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

li {
  list-style: none;
}

caption,
th {
  text-align: left;
}

abbr,
acronym {
  font-variant: normal;
  text-decoration: none;
  border: 0;
}

sup {
  vertical-align: baseline;
}

sub {
  vertical-align: baseline;
}

iframe {
  border: 0;
}

button,
input[type=button],
input[type=submit] {
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}

button,
input {
  border-radius: 0;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type=search] {
  -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

code,
kbd,
pre,
samp {
  font-size: 1em;
  font-family: monospace, serif;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,
canvas,
img,
svg,
video {
  vertical-align: middle;
}

mark {
  background-color: transparent;
}

/**
 * Form elements render using OS defaults,
 * so font-family inheritance must be specifically declared
 */
/* stylelint-enable */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

fieldset {
  min-width: auto;
}

s {
  text-decoration: line-through;
}

select {
  z-index: 1;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  background-color: transparent;
  border: none;
  cursor: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@font-face {
  font-weight: 700;
  font-family: Interstate;
  font-style: normal;
  src: local("Interstate-Bold"), local("Interstate Bold"), url("/fonts/Interstate-Bold.woff2") format("woff2"), url("/fonts/Interstate-Bold.woff") format("woff");
}
@font-face {
  font-weight: 400;
  font-family: Interstate;
  font-style: normal;
  src: local("Interstate-Regular"), local("Interstate Regular"), url("/fonts/Interstate-Regular.woff2") format("woff2"), url("/fonts/Interstate-Regular.woff") format("woff");
}
@font-face {
  font-weight: 300;
  font-family: Interstate;
  font-style: normal;
  src: local("Interstate-Light"), local("Interstate Light"), url("/fonts/Interstate-Light.woff2") format("woff2"), url("/fonts/Interstate-Light.woff") format("woff");
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes icon-out-in {
  50% {
    transform: translateX(150%);
    will-change: transform;
  }
  50.01% {
    transform: translateX(-150%);
    will-change: transform;
  }
  0%, 100% {
    transform: translateX(0);
    will-change: transform;
  }
}
@keyframes popup {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1);
    opacity: 0;
  }
  4% {
    transform: matrix3d(0.9676, 0, 0, 0, 0, 0.9676, 0, 0, 0, 0, 1, 0, 0, -6.4659, 0, 1);
  }
  8% {
    transform: matrix3d(0.9618, 0, 0, 0, 0, 0.9618, 0, 0, 0, 0, 1, 0, 0, -2.9176, 0, 1);
  }
  12% {
    transform: matrix3d(0.9696, 0, 0, 0, 0, 0.9696, 0, 0, 0, 0, 1, 0, 0, -0.2522, 0, 1);
    opacity: 1;
  }
  16% {
    transform: matrix3d(0.9814, 0, 0, 0, 0, 0.9814, 0, 0, 0, 0, 1, 0, 0, 1.2621, 0, 1);
  }
  20% {
    transform: matrix3d(0.9919, 0, 0, 0, 0, 0.9919, 0, 0, 0, 0, 1, 0, 0, 1.7694, 0, 1);
  }
  24% {
    transform: matrix3d(0.9988, 0, 0, 0, 0, 0.9988, 0, 0, 0, 0, 1, 0, 0, 1.6011, 0, 1);
  }
  28% {
    transform: matrix3d(1.0023, 0, 0, 0, 0, 1.0023, 0, 0, 0, 0, 1, 0, 0, 1.1071, 0, 1);
  }
  32% {
    transform: matrix3d(1.0032, 0, 0, 0, 0, 1.0032, 0, 0, 0, 0, 1, 0, 0, 0.5601, 0, 1);
  }
  36% {
    transform: matrix3d(1.0028, 0, 0, 0, 0, 1.0028, 0, 0, 0, 0, 1, 0, 0, 0.1215, 0, 1);
  }
  40% {
    transform: matrix3d(1.0018, 0, 0, 0, 0, 1.0018, 0, 0, 0, 0, 1, 0, 0, -0.1478, 0, 1);
  }
  44% {
    transform: matrix3d(1.0009, 0, 0, 0, 0, 1.0009, 0, 0, 0, 0, 1, 0, 0, -0.2573, 0, 1);
  }
  48% {
    transform: matrix3d(1.0002, 0, 0, 0, 0, 1.0002, 0, 0, 0, 0, 1, 0, 0, -0.2523, 0, 1);
  }
  52% {
    transform: matrix3d(0.9999, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, -0.1861, 0, 1);
  }
  56% {
    transform: matrix3d(0.9998, 0, 0, 0, 0, 0.9998, 0, 0, 0, 0, 1, 0, 0, -0.1034, 0, 1);
  }
  60% {
    transform: matrix3d(0.9998, 0, 0, 0, 0, 0.9998, 0, 0, 0, 0, 1, 0, 0, -0.0323, 0, 1);
  }
  64% {
    transform: matrix3d(0.9998, 0, 0, 0, 0, 0.9998, 0, 0, 0, 0, 1, 0, 0, 0.0145, 0, 1);
  }
  68% {
    transform: matrix3d(0.9999, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0.0363, 0, 1);
  }
  72% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0399, 0, 1);
  }
  76% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0308, 0, 1);
  }
  80% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0185, 0, 1);
  }
  84% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0072, 0, 1);
  }
  88% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0008, 0, 1);
  }
  92% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0049, 0, 1);
  }
  96% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0059, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 1;
  }
}
/* stylelint-disable selector-id-pattern, selector-class-pattern */
:root {
  --font-base: Interstate, sans-serif;
  --shadow-default: 0 8px 16px 0 rgba(60, 59, 99, 0.1);
  --shadow-popup: 0 8px 24px 0 rgba(0, 0, 0, 0.16);
  --border-radius-xsmall: 2px;
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --border-radius-default: 10px;
  --border-radius-large: 16px;
  --border-radius-xlarge: 50px;
  --border-radius-circle: 50%;
  --border-radius-pill: 1000px;
  --c-white: 255, 255, 255;
  --c-black: 0, 0, 0;
  --c-grey-ultradark: 52, 52, 52;
  --c-grey-dark: 81, 81, 81;
  --c-grey-text: 118, 118, 118;
  --c-grey: 133, 133, 133;
  --c-grey-medium: 224, 224, 224;
  --c-grey-light: 245, 245, 245;
  --c-yellow: 249, 198, 35;
  --c-yellow-light: 255, 215, 88;
  --c-yellow-ultra-light: 255, 235, 173;
  --c-green-light: 237, 239, 235;
  --c-green-grey: 229, 235, 224;
  --c-orange-light: 246, 229, 221;
  --c-blue-light: 209, 237, 241;
  --c-signal-green: 79, 132, 55;
  --c-signal-green-light: 227, 235, 223;
  --c-signal-red: 180, 27, 27;
  --c-signal-blue: 27, 107, 180;
  --c-signal-blue-dark: 27, 79, 133;
  --c-border-transparent: 0, 0, 0, 0.12;
  --c-border: 224, 224, 224;
  --c-border-dark: 191, 191, 191;
  --c-valid-form-input: 246, 247, 252;
  --c-icon-fill: 255, 255, 255, 0;
  --c-icon-path: 13, 13, 13;
  --theme-background: rgba(var(--c-green-light), 1);
  --theme-background-light: rgba(var(--c-green-light), 0.5);
  --site-padding: 24px;
  --site-padding-reset: calc(-1 * 24px);
  --button-color: rgba(var(--c-black), 1);
  --button-background-color: rgba(var(--c-black), 1);
  --button-border-color: transparent;
  --button-border-radius: 100px;
  --button-hover-color: rgba(var(--c-black), 1);
  --button-hover-background-color: rgba(var(--c-yellow-light), 1);
  --button-hover-border-color: transparent;
  --scrollslider-gap: var(--spacing-8, 8px);
  --scrollslider-base: 100vw - var(--site-padding) * 2;
  --scrollslider-base: 100cqw - var(--site-padding) * 2;
  --scrollsliderbar-gap: var(--spacing-16, 16px);
  --z-index-tooltip: 20;
  --z-index-chat: 40;
  --z-index-header: 50;
  --z-index-search: 60;
  --z-index-cart-notification: 80;
  --z-index-overlay: 85;
  --z-index-notification: 90;
  --z-index-sidebar: 100;
  --z-index-cookiebanner: 150;
  --z-index-page-transition: 200;
  --z-index-max: 65000;
}
@media screen and (min-width: 750px) {
  :root {
    --site-padding: 24px;
    --site-padding-reset: calc(-1 * 24px);
  }
}
@media screen and (min-width: 1000px) {
  :root {
    --site-padding: 32px;
    --site-padding-reset: calc(-1 * 32px);
  }
}
@media screen and (min-width: 1280px) {
  :root {
    --site-padding: 80px;
    --site-padding-reset: calc(-1 * 80px);
  }
}
@media screen and (min-width: 1600px) {
  :root {
    --scrollslider-base: 1440px;
  }
}

/* stylelint-disable-next-line selector-no-vendor-prefix */
::-moz-selection {
  background-color: rgba(125, 193, 207, 0.6);
}

::selection {
  background-color: rgba(125, 193, 207, 0.6);
}

html {
  font-family: var(--font-base);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-hyphens: auto;
          hyphens: auto;
  width: 100%;
  min-height: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  text-rendering: optimizelegibility;
}
html[data-theme=blue-light] {
  --theme-background: rgba(var(--c-blue-light), 1);
  --theme-background-light: rgba(var(--c-blue-light), 0.5);
}
html[data-theme=orange-light] {
  --theme-background: rgba(var(--c-orange-light), 1);
  --theme-background-light: rgba(var(--c-orange-light), 0.2);
}
html[data-theme=yellow] {
  --theme-background: rgba(var(--c-yellow), 1);
  --theme-background-light: rgba(var(--c-yellow), 0.2);
}

body {
  width: 100%;
  min-height: 100%;
  font-family: Interstate, sans-serif;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.4;
  line-height: 1.5;
  letter-spacing: -0.1px;
}
@media (min-width: 750px) {
  body {
    font-size: calc(0.3773584906vw + 11.1698113208px);
  }
}
@media (min-width: 1280px) {
  body {
    font-size: 16px;
  }
}
@media screen and (max-width: 750px) {
  body {
    font-size: 16px;
  }
}

pre {
  font-size: 13px;
  line-height: 1.2;
}

.hidden {
  display: none;
}

.nobr {
  white-space: nowrap;
}

.netlify-label,
.honeypot {
  display: none;
}

.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.grecaptcha-badge {
  visibility: hidden;
}

.splide:not(.is-initialized) {
  visibility: visible;
}

@media screen and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-delay: 0ms !important;
    transition-duration: 0ms !important;
  }
}
/* stylelint-enable selector-id-pattern, selector-class-pattern */
/* stylelint-disable selector-class-pattern */
.page-enter-active,
.page-leave-active {
  transition: transform 0.2s ease-out, opacity 0.2s;
  will-change: transform;
}

.page-enter-from {
  transform: translateY(20px);
  opacity: 0;
}

.page-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

.layout-enter-active,
.layout-leave-active {
  transition: transform 0.2s ease-out, opacity 0.2s;
  will-change: transform;
}

.layout-enter-from {
  transform: translateY(20px);
  opacity: 0;
}

.layout-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

/* Userlike Styles */
/* First ID is the chat button, second one the initial chat popup */
/* DEV */
.umm-i58qga.umm-i58qga,
.umm-v8nh70.umm-v8nh70,
.umm-1cqacbe.umm-1cqacbe,
.umm-9li0um.umm-9li0um,
.umm-ki2j2m.umm-ki2j2m {
  z-index: var(--z-index-chat);
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TransaIcon {
  display: inline-block;
}.dp__input_wrap{position:relative;width:100%;box-sizing:unset}.dp__input_wrap:focus{border-color:var(--dp-border-color-hover);outline:none}.dp__input_valid{box-shadow:0 0 var(--dp-border-radius) var(--dp-success-color);border-color:var(--dp-success-color)}.dp__input_valid:hover{border-color:var(--dp-success-color)}.dp__input_invalid{box-shadow:0 0 var(--dp-border-radius) var(--dp-danger-color);border-color:var(--dp-danger-color)}.dp__input_invalid:hover{border-color:var(--dp-danger-color)}.dp__input{background-color:var(--dp-background-color);border-radius:var(--dp-border-radius);font-family:var(--dp-font-family);border:1px solid var(--dp-border-color);outline:none;transition:border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1);width:100%;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:var(--dp-input-padding);color:var(--dp-text-color);box-sizing:border-box}.dp__input::-moz-placeholder{opacity:.7}.dp__input::placeholder{opacity:.7}.dp__input:hover:not(.dp__input_focus){border-color:var(--dp-border-color-hover)}.dp__input_reg{caret-color:rgba(0,0,0,0)}.dp__input_focus{border-color:var(--dp-border-color-focus)}.dp__disabled{background:var(--dp-disabled-color)}.dp__disabled::-moz-placeholder{color:var(--dp-disabled-color-text)}.dp__disabled::placeholder{color:var(--dp-disabled-color-text)}.dp__input_icons{display:inline-block;width:var(--dp-font-size);height:var(--dp-font-size);stroke-width:0;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:6px 12px;color:var(--dp-icon-color);box-sizing:content-box}.dp__input_icon{cursor:pointer;position:absolute;top:50%;inset-inline-start:0;transform:translateY(-50%);color:var(--dp-icon-color)}.dp--clear-btn{position:absolute;top:50%;inset-inline-end:0;transform:translateY(-50%);cursor:pointer;color:var(--dp-icon-color);background:rgba(0,0,0,0);border:none;display:inline-flex;align-items:center;padding:0;margin:0}.dp__input_icon_pad{padding-inline-start:var(--dp-input-icon-padding)}.dp__menu{background:var(--dp-background-color);border-radius:var(--dp-border-radius);min-width:var(--dp-menu-min-width);font-family:var(--dp-font-family);font-size:var(--dp-font-size);-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid var(--dp-menu-border-color);box-sizing:border-box}.dp__menu::after{box-sizing:border-box}.dp__menu::before{box-sizing:border-box}.dp__menu:focus{border:1px solid var(--dp-menu-border-color);outline:none}.dp--menu-wrapper{position:absolute;z-index:99999}.dp__menu_inner{padding:var(--dp-menu-padding)}.dp--menu--inner-stretched{padding:6px 0}.dp__menu_index{z-index:99999}.dp-menu-loading,.dp__menu_readonly,.dp__menu_disabled{position:absolute;inset:0;z-index:999999}.dp__menu_disabled{background:hsla(0,0%,100%,.5);cursor:not-allowed}.dp__menu_readonly{background:rgba(0,0,0,0);cursor:default}.dp-menu-loading{background:hsla(0,0%,100%,.5);cursor:default}.dp--menu-load-container{display:flex;height:100%;width:100%;justify-content:center;align-items:center}.dp--menu-loader{width:48px;height:48px;border:var(--dp-loader);border-bottom-color:rgba(0,0,0,0);border-radius:50%;display:inline-block;box-sizing:border-box;animation:dp-load-rotation 1s linear infinite;position:absolute}@keyframes dp-load-rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.dp__arrow_top{left:var(--dp-arrow-left);top:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-top:1px solid var(--dp-menu-border-color);transform:translate(-50%, -50%) rotate(-45deg)}.dp__arrow_bottom{left:var(--dp-arrow-left);bottom:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-bottom:1px solid var(--dp-menu-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__action_extra{text-align:center;padding:2px 0}.dp--preset-dates{padding:5px;border-inline-end:1px solid var(--dp-border-color)}.dp--preset-dates[data-dp-mobile]{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}.dp--preset-dates-collapsed{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}.dp__sidebar_left{padding:5px;border-inline-end:1px solid var(--dp-border-color)}.dp__sidebar_right{padding:5px;margin-inline-end:1px solid var(--dp-border-color)}.dp--preset-range{display:block;width:100%;padding:5px;text-align:left;white-space:nowrap;color:var(--dp-text-color);border-radius:var(--dp-border-radius);transition:var(--dp-common-transition)}.dp--preset-range:hover{background-color:var(--dp-hover-color);color:var(--dp-hover-text-color);cursor:pointer}.dp--preset-range[data-dp-mobile]{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range[data-dp-mobile]:first-child{margin-left:0}.dp--preset-range[data-dp-mobile]:last-child{margin-right:0}.dp--preset-range-collapsed{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range-collapsed:first-child{margin-left:0}.dp--preset-range-collapsed:last-child{margin-right:0}.dp__menu_content_wrapper{display:flex}.dp__menu_content_wrapper[data-dp-mobile]{flex-direction:column-reverse}.dp--menu-content-wrapper-collapsed{flex-direction:column-reverse}.dp__calendar_header{position:relative;display:flex;justify-content:center;align-items:center;color:var(--dp-text-color);white-space:nowrap;font-weight:bold}.dp__calendar_header_item{text-align:center;flex-grow:1;height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);box-sizing:border-box}.dp__calendar_row{display:flex;justify-content:center;align-items:center;margin:var(--dp-row-margin)}.dp__calendar_item{text-align:center;flex-grow:1;box-sizing:border-box;color:var(--dp-text-color)}.dp__calendar{position:relative}.dp__calendar_header_cell{border-bottom:thin solid var(--dp-border-color);padding:var(--dp-calendar-header-cell-padding)}.dp__cell_inner{display:flex;align-items:center;text-align:center;justify-content:center;border-radius:var(--dp-cell-border-radius);height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);border:1px solid rgba(0,0,0,0);box-sizing:border-box;position:relative}.dp__cell_inner:hover{transition:all .2s}.dp__cell_auto_range_start,.dp__date_hover_start:hover,.dp__range_start{border-end-end-radius:0;border-start-end-radius:0}.dp__cell_auto_range_end,.dp__date_hover_end:hover,.dp__range_end{border-end-start-radius:0;border-start-start-radius:0}.dp__range_end,.dp__range_start,.dp__active_date{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__date_hover_end:hover,.dp__date_hover_start:hover,.dp__date_hover:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__cell_offset{color:var(--dp-secondary-color)}.dp__cell_disabled{color:var(--dp-secondary-color);cursor:not-allowed}.dp__range_between{background:var(--dp-range-between-dates-background-color);color:var(--dp-range-between-dates-text-color);border-radius:0;border:1px solid var(--dp-range-between-border-color)}.dp__range_between_week{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border-radius:0;border-top:1px solid var(--dp-primary-color);border-bottom:1px solid var(--dp-primary-color)}.dp__today{border:1px solid var(--dp-primary-color)}.dp__week_num{color:var(--dp-secondary-color);text-align:center}.dp__cell_auto_range{border-radius:0;border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_start{border-start-start-radius:var(--dp-cell-border-radius);border-end-start-radius:var(--dp-cell-border-radius);border-inline-start:1px dashed var(--dp-primary-color);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_end{border-start-end-radius:var(--dp-cell-border-radius);border-end-end-radius:var(--dp-cell-border-radius);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color);border-inline-end:1px dashed var(--dp-primary-color)}.dp__calendar_header_separator{width:100%;height:1px;background:var(--dp-border-color)}.dp__calendar_next{margin-inline-start:var(--dp-multi-calendars-spacing)}.dp__marker_line,.dp__marker_dot{height:5px;background-color:var(--dp-marker-color);position:absolute;bottom:0}.dp__marker_dot{width:5px;border-radius:50%;left:50%;transform:translateX(-50%)}.dp__marker_line{width:100%;left:0}.dp__marker_tooltip{position:absolute;border-radius:var(--dp-border-radius);background-color:var(--dp-tooltip-color);padding:5px;border:1px solid var(--dp-border-color);z-index:99999;box-sizing:border-box;cursor:default}.dp__tooltip_content{white-space:nowrap}.dp__tooltip_text{display:flex;align-items:center;flex-flow:row nowrap;color:var(--dp-text-color)}.dp__tooltip_mark{height:5px;width:5px;border-radius:50%;background-color:var(--dp-text-color);color:var(--dp-text-color);margin-inline-end:5px}.dp__arrow_bottom_tp{bottom:0;height:8px;width:8px;background-color:var(--dp-tooltip-color);position:absolute;border-inline-end:1px solid var(--dp-border-color);border-bottom:1px solid var(--dp-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__instance_calendar{position:relative;width:100%}.dp__flex_display[data-dp-mobile]{flex-direction:column}.dp--flex-display-collapsed{flex-direction:column}.dp__cell_highlight{background-color:var(--dp-highlight-color)}.dp__month_year_row{display:flex;align-items:center;height:var(--dp-month-year-row-height);color:var(--dp-text-color);box-sizing:border-box}.dp__inner_nav{display:flex;align-items:center;justify-content:center;cursor:pointer;height:var(--dp-month-year-row-button-size);width:var(--dp-month-year-row-button-size);color:var(--dp-icon-color);text-align:center;border-radius:50%}.dp__inner_nav svg{height:var(--dp-button-icon-height);width:var(--dp-button-icon-height)}.dp__inner_nav:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}[dir=rtl] .dp__inner_nav{transform:rotate(180deg)}.dp__inner_nav_disabled:hover,.dp__inner_nav_disabled{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp--year-select,.dp__month_year_select{text-align:center;cursor:pointer;height:var(--dp-month-year-row-height);display:flex;align-items:center;justify-content:center;border-radius:var(--dp-border-radius);box-sizing:border-box;color:var(--dp-text-color)}.dp--year-select:hover,.dp__month_year_select:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__month_year_select{width:50%}.dp--year-select{width:100%}.dp__month_year_wrap{display:flex;flex-direction:row;width:100%}.dp__year_disable_select{justify-content:space-around}.dp--header-wrap{display:flex;width:100%;flex-direction:column}.dp__overlay{width:100%;background:var(--dp-background-color);transition:opacity 1s ease-out;z-index:99999;font-family:var(--dp-font-family);color:var(--dp-text-color);box-sizing:border-box}.dp--overlay-absolute{position:absolute;height:100%;top:0;left:0}.dp--overlay-relative{position:relative}.dp__overlay_container::-webkit-scrollbar-track{box-shadow:var(--dp-scroll-bar-background);background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar{width:5px;background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar-thumb{background-color:var(--dp-scroll-bar-color);border-radius:10px}.dp__overlay:focus{border:none;outline:none}.dp__container_flex{display:flex}.dp__container_block{display:block}.dp__overlay_container{flex-direction:column;overflow-y:auto;height:var(--dp-overlay-height)}.dp__time_picker_overlay_container{height:100%}.dp__overlay_row{padding:0;box-sizing:border-box;display:flex;margin-inline:auto;flex-wrap:wrap;max-width:100%;width:100%;align-items:center}.dp__flex_row{flex:1}.dp__overlay_col{box-sizing:border-box;width:33%;padding:var(--dp-overlay-col-padding);white-space:nowrap}.dp__overlay_cell_pad{padding:var(--dp-common-padding) 0}.dp__overlay_cell_active{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center;background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__overlay_cell{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center}.dp__overlay_cell:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__cell_in_between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__over_action_scroll{right:5px;box-sizing:border-box}.dp__overlay_cell_disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp__overlay_cell_disabled:hover{background:var(--dp-disabled-color)}.dp__overlay_cell_active_disabled{cursor:not-allowed;background:var(--dp-primary-disabled-color)}.dp__overlay_cell_active_disabled:hover{background:var(--dp-primary-disabled-color)}.dp__btn,.dp--qr-btn,.dp--time-overlay-btn,.dp--time-invalid{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}.dp--tp-wrap{max-width:var(--dp-menu-min-width)}.dp--tp-wrap[data-dp-mobile]{max-width:100%}.dp__time_input{width:100%;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-family:var(--dp-font-family);color:var(--dp-text-color)}.dp__time_col_reg_block{padding:0 20px}.dp__time_col_reg_inline{padding:0 10px}.dp__time_col_reg_with_button{padding:0 15px}.dp__time_col_reg_with_button[data-compact~=true]{padding:0 5px}.dp__time_col_sec{padding:0 10px}.dp__time_col_sec_with_button{padding:0 5px}.dp__time_col_sec_with_button[data-collapsed~=true]{padding:0}.dp__time_col{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}.dp__time_col_block{font-size:var(--dp-time-font-size)}.dp__time_display_block{padding:0 3px}.dp__time_display_inline{padding:5px}.dp__time_picker_inline_container{display:flex;width:100%;justify-content:center}.dp__inc_dec_button{padding:5px;margin:0;height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;color:var(--dp-icon-color);box-sizing:border-box}.dp__inc_dec_button svg{height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size)}.dp__inc_dec_button:hover{background:var(--dp-hover-color);color:var(--dp-primary-color)}.dp__time_display{cursor:pointer;color:var(--dp-text-color);border-radius:var(--dp-border-radius);display:flex;align-items:center;justify-content:center}.dp__time_display:hover:enabled{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__inc_dec_button_inline{width:100%;padding:0;height:8px;cursor:pointer;display:flex;align-items:center}.dp__inc_dec_button_disabled,.dp__inc_dec_button_disabled:hover{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp__pm_am_button{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border:none;padding:var(--dp-common-padding);border-radius:var(--dp-border-radius);cursor:pointer}.dp__pm_am_button[data-compact~=true]{padding:7px}.dp__tp_inline_btn_bar{width:100%;height:4px;background-color:var(--dp-secondary-color);transition:var(--dp-common-transition);border-collapse:collapse}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp--time-overlay-btn{background:none}.dp--time-invalid{background-color:var(--dp-disabled-color)}.dp__action_row{display:flex;align-items:center;width:100%;padding:var(--dp-action-row-padding);box-sizing:border-box;color:var(--dp-text-color);flex-flow:row nowrap}.dp__action_row svg{height:var(--dp-button-icon-height);width:auto}.dp__selection_preview{display:block;color:var(--dp-text-color);font-size:var(--dp-preview-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dp__action_buttons{display:flex;flex:0;white-space:nowrap;align-items:center;justify-content:flex-end;margin-inline-start:auto}.dp__action_button{display:inline-flex;align-items:center;background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:var(--dp-action-buttons-padding);line-height:var(--dp-action-button-height);margin-inline-start:3px;height:var(--dp-action-button-height);cursor:pointer;border-radius:var(--dp-border-radius);font-size:var(--dp-preview-font-size);font-family:var(--dp-font-family)}.dp__action_cancel{color:var(--dp-text-color);border:1px solid var(--dp-border-color)}.dp__action_cancel:hover{border-color:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__action_buttons .dp__action_select:hover{background:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select:disabled{background:var(--dp-primary-disabled-color);cursor:not-allowed}.dp-quarter-picker-wrap{display:flex;flex-direction:column;height:100%;min-width:var(--dp-menu-min-width)}.dp--qr-btn-disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp--qr-btn-disabled:hover{background:var(--dp-disabled-color)}.dp--qr-btn{width:100%;padding:var(--dp-common-padding)}.dp--qr-btn:not(.dp--highlighted,.dp--qr-btn-active,.dp--qr-btn-disabled,.dp--qr-btn-between){background:none}.dp--qr-btn:hover:not(.dp--qr-btn-active,.dp--qr-btn-disabled){background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp--quarter-items{display:flex;flex-direction:column;flex:1;width:100%;height:100%;justify-content:space-evenly}.dp--qr-btn-active{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp--qr-btn-between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}:root{--dp-common-transition: all 0.1s ease-in;--dp-menu-padding: 6px 8px;--dp-animation-duration: 0.1s;--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);--dp-transition-timing: ease-out;--dp-action-row-transtion: all 0.2s ease-in;--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--dp-border-radius: 4px;--dp-cell-border-radius: 4px;--dp-transition-length: 22px;--dp-transition-timing-general: 0.1s;--dp-button-height: 35px;--dp-month-year-row-height: 35px;--dp-month-year-row-button-size: 25px;--dp-button-icon-height: 20px;--dp-calendar-wrap-padding: 0 5px;--dp-cell-size: 35px;--dp-cell-padding: 5px;--dp-common-padding: 10px;--dp-input-icon-padding: 35px;--dp-input-padding: 6px 30px 6px 12px;--dp-menu-min-width: 260px;--dp-action-buttons-padding: 1px 6px;--dp-row-margin: 5px 0;--dp-calendar-header-cell-padding: 0.5rem;--dp-multi-calendars-spacing: 10px;--dp-overlay-col-padding: 3px;--dp-time-inc-dec-button-size: 32px;--dp-font-size: 1rem;--dp-preview-font-size: 0.8rem;--dp-time-font-size: 2rem;--dp-action-button-height: 22px;--dp-action-row-padding: 8px;--dp-direction: ltr}.dp__theme_dark{--dp-background-color: #212121;--dp-text-color: #fff;--dp-hover-color: #484848;--dp-hover-text-color: #fff;--dp-hover-icon-color: #959595;--dp-primary-color: #005cb2;--dp-primary-disabled-color: #61a8ea;--dp-primary-text-color: #fff;--dp-secondary-color: #a9a9a9;--dp-border-color: #2d2d2d;--dp-menu-border-color: #2d2d2d;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #737373;--dp-disabled-color-text: #d0d0d0;--dp-scroll-bar-background: #212121;--dp-scroll-bar-color: #484848;--dp-success-color: #00701a;--dp-success-color-disabled: #428f59;--dp-icon-color: #959595;--dp-danger-color: #e53935;--dp-marker-color: #e53935;--dp-tooltip-color: #3e3e3e;--dp-highlight-color: rgb(0 92 178 / 20%);--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);--dp-range-between-border-color: var(--dp-hover-color, #fff);--dp-loader: 5px solid #005cb2}.dp__theme_light{--dp-background-color: #fff;--dp-text-color: #212121;--dp-hover-color: #f3f3f3;--dp-hover-text-color: #212121;--dp-hover-icon-color: #959595;--dp-primary-color: #1976d2;--dp-primary-disabled-color: #6bacea;--dp-primary-text-color: #fff;--dp-secondary-color: #c0c4cc;--dp-border-color: #ddd;--dp-menu-border-color: #ddd;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #f6f6f6;--dp-scroll-bar-background: #f3f3f3;--dp-scroll-bar-color: #959595;--dp-success-color: #76d275;--dp-success-color-disabled: #a3d9b1;--dp-icon-color: #959595;--dp-danger-color: #ff6f60;--dp-marker-color: #ff6f60;--dp-tooltip-color: #fafafa;--dp-disabled-color-text: #8e8e8e;--dp-highlight-color: rgb(25 118 210 / 10%);--dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);--dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);--dp-loader: 5px solid #1976d2}.dp__flex{display:flex;align-items:center}.dp__btn{background:none}.dp__main{font-family:var(--dp-font-family);-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;position:relative;width:100%}.dp__main *{direction:var(--dp-direction, ltr)}.dp__pointer{cursor:pointer}.dp__icon{stroke:currentcolor;fill:currentcolor}.dp__button{width:100%;text-align:center;color:var(--dp-icon-color);cursor:pointer;display:flex;align-items:center;place-content:center center;padding:var(--dp-common-padding);box-sizing:border-box;height:var(--dp-button-height)}.dp__button.dp__overlay_action{position:absolute;bottom:0}.dp__button:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}.dp__button svg{height:var(--dp-button-icon-height);width:auto}.dp__button_bottom{border-bottom-left-radius:var(--dp-border-radius);border-bottom-right-radius:var(--dp-border-radius)}.dp__flex_display{display:flex}.dp__flex_display_with_input{flex-direction:column;align-items:flex-start}.dp__relative{position:relative}.calendar-next-enter-active,.calendar-next-leave-active,.calendar-prev-enter-active,.calendar-prev-leave-active{transition:all var(--dp-transition-timing-general) ease-out}.calendar-next-enter-from{opacity:0;transform:translateX(var(--dp-transition-length))}.calendar-next-leave-to{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-enter-from{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-leave-to{opacity:0;transform:translateX(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-active,.dp-menu-appear-bottom-leave-active,.dp-menu-appear-top-enter-active,.dp-menu-appear-top-leave-active,.dp-slide-up-enter-active,.dp-slide-up-leave-active,.dp-slide-down-enter-active,.dp-slide-down-leave-active{transition:all var(--dp-animation-duration) var(--dp-transition-timing)}.dp-menu-appear-top-enter-from,.dp-menu-appear-top-leave-to,.dp-slide-down-leave-to,.dp-slide-up-enter-from{opacity:0;transform:translateY(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-from,.dp-menu-appear-bottom-leave-to,.dp-slide-down-enter-from,.dp-slide-up-leave-to{opacity:0;transform:translateY(calc(var(--dp-transition-length) * -1))}.dp--arrow-btn-nav{transition:var(--dp-common-transition)}.dp--highlighted{background-color:var(--dp-highlight-color)}.dp--hidden-el{visibility:hidden}/*# sourceMappingURL=main.css.map */
*, ::before, ::after {--_histoire-color-primary-50: 236 253 245;--_histoire-color-primary-100: 209 250 229;--_histoire-color-primary-200: 167 243 208;--_histoire-color-primary-300: 110 231 183;--_histoire-color-primary-400: 52 211 153;--_histoire-color-primary-500: 16 185 129;--_histoire-color-primary-600: 5 150 105;--_histoire-color-primary-700: 4 120 87;--_histoire-color-primary-800: 6 95 70;--_histoire-color-primary-900: 6 78 59;--_histoire-color-gray-50: 250 250 250;--_histoire-color-gray-100: 244 244 245;--_histoire-color-gray-200: 228 228 231;--_histoire-color-gray-300: 212 212 216;--_histoire-color-gray-400: 161 161 170;--_histoire-color-gray-500: 113 113 122;--_histoire-color-gray-600: 82 82 91;--_histoire-color-gray-700: 63 63 70;--_histoire-color-gray-750: 50 50 56;--_histoire-color-gray-800: 39 39 42;--_histoire-color-gray-850: 31 31 33;--_histoire-color-gray-900: 24 24 27;--_histoire-color-gray-950: 16 16 18;}

.resize-observer[data-v-b329ee4c]{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  border:none;
  background-color:transparent;
  pointer-events:none;
  display:block;
  overflow:hidden;
  opacity:0
}

.resize-observer[data-v-b329ee4c] object{
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:-1
}

.v-popper__popper{
  z-index:10000;
  top:0;
  left:0;
  outline:none
}

.v-popper__popper.v-popper__popper--hidden{
  visibility:hidden;
  opacity:0;
  transition:opacity .15s,visibility .15s;
  pointer-events:none
}

.v-popper__popper.v-popper__popper--shown{
  visibility:visible;
  opacity:1;
  transition:opacity .15s
}

.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{
  transition:none!important
}

.v-popper__backdrop{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none
}

.v-popper__inner{
  position:relative;
  box-sizing:border-box;
  overflow-y:auto
}

.v-popper__inner>div{
  position:relative;
  z-index:1;
  max-width:inherit;
  max-height:inherit
}

.v-popper__arrow-container{
  position:absolute;
  width:10px;
  height:10px
}

.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{
  display:none
}

.v-popper__arrow-inner,.v-popper__arrow-outer{
  border-style:solid;
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0
}

.v-popper__arrow-inner{
  visibility:hidden;
  border-width:7px
}

.v-popper__arrow-outer{
  border-width:6px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  left:-2px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  left:-1px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{
  border-bottom-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{
  top:0
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  border-top-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-top-color:transparent!important
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  top:-4px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  top:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  top:-1px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  border-left-width:0;
  border-left-color:transparent!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  left:-4px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  left:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{
  right:-10px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{
  border-right-width:0;
  border-top-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{
  left:-2px
}

.v-popper--theme-tooltip .v-popper__inner{
  background:rgba(0,0,0,.8);
  color:#fff;
  border-radius:6px;
  padding:7px 12px 6px
}

.v-popper--theme-tooltip .v-popper__arrow-outer{
  border-color:#000c
}

.v-popper--theme-dropdown .v-popper__inner{
  background:#fff;
  color:#000;
  border-radius:6px;
  border:1px solid #ddd;
  box-shadow:0 6px 30px #0000001a
}

.v-popper--theme-dropdown .v-popper__arrow-inner{
  visibility:visible;
  border-color:#fff
}

.v-popper--theme-dropdown .v-popper__arrow-outer{
  border-color:#ddd
}

.htw-bind-col-size{
  grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))
}

.__histoire-json-code[data-v-d4369e5a] .cm-editor{
  height:100%;
  min-width:280px
}

.v-popper{
  line-height:0
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color:rgb(244 244 245 / var(--tw-text-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity: 1;
  border-color:rgb(63 63 70 / var(--tw-border-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{
  transform:scale(.75)
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{
  transform:none;
  transition:transform .15s cubic-bezier(0,1,.5,1)
}

.v-popper__popper:focus-visible{
  outline:none
}

.htw-range-input::-webkit-slider-thumb{
  height:.75rem;
  width:.75rem;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-range-input:is(.htw-dark *)::-webkit-slider-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.htw-range-input:hover::-webkit-slider-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important
}

.htw-range-input::-moz-range-thumb{
  height:.75rem;
  width:.75rem;
  -moz-appearance:none;
  -webkit-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-range-input:is(.htw-dark *)::-moz-range-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.htw-range-input:hover::-moz-range-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important
}

/* @TODO custom themes */

.v-popper {
  line-height: 0;
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-700) / var(--tw-border-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper {
  transform: scale(.75);
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper {
  transform: none;
  transition: transform .15s cubic-bezier(0, 1, .5, 1);
}

.v-popper__popper:focus-visible {
  outline: none;
}

.__histoire-scale-x-enter-active,
  .__histoire-scale-x-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-x-enter-from,
  .__histoire-scale-x-leave-to {
  transform: scaleX(0);
  opacity: 0;
}

.__histoire-scale-y-enter-active,
  .__histoire-scale-y-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-y-enter-from,
  .__histoire-scale-y-leave-to {
  transform: scaleY(0);
  opacity: 0;
}

.__histoire-fade-enter-active,
  .__histoire-fade-leave-active {
  transition: opacity .15s;
}

.__histoire-fade-enter-from,
  .__histoire-fade-leave-to {
  opacity: 0;
}

.__histoire-fade-bottom-enter-active,
  .__histoire-fade-bottom-leave-active {
  transition: transform .15s, opacity .15s;
  transform: translateY(0px);
}

.__histoire-fade-bottom-enter-from,
  .__histoire-fade-bottom-leave-to {
  transform: translateY(32px);
  opacity: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

a,
input,
button {
  color: inherit;
}

a {
  text-decoration: inherit;
}

input, button {
  font-family: inherit;
}

a,
button {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

*, ::before, ::after{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

body,
  pre {
  margin: 0;
}

html,
  body,
  #app {
  height: 100%;
}

html {
  font-family: 'Noto Sans Display', system-ui, sans-serif;
  font-size: 1rem;
}

body {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  body {
    font-size: .875rem;
  }
}

.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}

.__histoire-code .shiki {
  background: transparent !important;
}

.htw-prose h1:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h2:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h3:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h4:not(:hover) .header-anchor[aria-hidden="true"] {
  visibility: hidden;
}

.htw-prose hr {
  margin: 1rem 0;
}

.__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right;
}

.htw-dark .__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

.htw-prose{
  color:var(--tw-prose-body);
  max-width:65ch;
}

.htw-prose :where(p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where([class~="lead"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-lead);
  font-size:1.25em;
  line-height:1.6;
  margin-top:1.2em;
  margin-bottom:1.2em
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:rgb(var(--_histoire-color-primary-500));
  text-decoration:none;
  font-weight:500;
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):hover{
  text-decoration:underline
}

.htw-prose :where(strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-bold);
  font-weight:600
}

.htw-prose :where(a strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-inline-start:1.625em
}

.htw-prose :where(ol[type="A"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="A" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="I"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="I" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="1"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal
}

.htw-prose :where(ul):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:disc;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-inline-start:1.625em
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  font-weight:400;
  color:var(--tw-prose-counters)
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  color:var(--tw-prose-bullets)
}

.htw-prose :where(dt):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.25em
}

.htw-prose :where(hr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-color:var(--tw-prose-hr);
  border-top-width:1px;
  margin-top:3em;
  margin-bottom:3em
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-style:italic;
  color:var(--tw-prose-quotes);
  border-inline-start-width:0.25rem;
  border-inline-start-color:var(--tw-prose-quote-borders);
  quotes:"\201C""\201D""\2018""\2019";
  margin-top:1.6em;
  margin-bottom:1.6em;
  padding-inline-start:1em;
  margin-left:0;
  margin-right:0;
  background-color:rgb(var(--_histoire-color-gray-100));
  padding:.25rem .375rem;
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:first-child{
  margin-top:0
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:last-child{
  margin-bottom:0
}

.htw-dark .htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:rgb(var(--_histoire-color-gray-750))
}

.htw-prose :where(blockquote p:first-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:open-quote
}

.htw-prose :where(blockquote p:last-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:close-quote
}

.htw-prose :where(h1):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:800;
  font-size:2.25em;
  margin-top:0;
  margin-bottom:0.8888889em;
  line-height:1.1111111
}

.htw-prose :where(h1 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:900;
  color:inherit
}

.htw-prose :where(h2):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:700;
  font-size:1.5em;
  margin-top:2em;
  margin-bottom:1em;
  line-height:1.3333333
}

.htw-prose :where(h2 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:800;
  color:inherit
}

.htw-prose :where(h3):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  font-size:1.25em;
  margin-top:1.6em;
  margin-bottom:0.6em;
  line-height:1.6
}

.htw-prose :where(h3 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(h4):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.5em;
  margin-bottom:0.5em;
  line-height:1.5
}

.htw-prose :where(h4 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(picture):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  display:block;
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(video):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(kbd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-family:inherit;
  color:var(--tw-prose-kbd);
  box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size:0.875em;
  border-radius:0.3125rem;
  padding-top:0.1875em;
  padding-inline-end:0.375em;
  padding-bottom:0.1875em;
  padding-inline-start:0.375em
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-code);
  font-weight:normal;
  font-size:0.8rem;
  background-color:rgb(var(--_histoire-color-gray-500) / 20%);
  padding:0.05rem 0.5rem;
  border-radius:0.25rem;
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before, .htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  display:none
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:"`"
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:"`"
}

.htw-prose :where(a code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h1 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h2 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.875em
}

.htw-prose :where(h3 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.9em
}

.htw-prose :where(h4 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(pre):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-pre-code);
  background-color:var(--tw-prose-pre-bg);
  overflow-x:auto;
  font-weight:400;
  font-size:0.875em;
  line-height:1.7142857;
  margin-top:1.7142857em;
  margin-bottom:1.7142857em;
  border-radius:0.375rem;
  padding-top:0.8571429em;
  padding-inline-end:1.1428571em;
  padding-bottom:0.8571429em;
  padding-inline-start:1.1428571em
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:transparent;
  border-width:0;
  border-radius:0;
  padding:0;
  font-weight:inherit;
  color:inherit;
  font-size:inherit;
  font-family:inherit;
  line-height:inherit
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:none
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:none
}

.htw-prose :where(table):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  width:100%;
  table-layout:auto;
  margin-top:2em;
  margin-bottom:2em;
  font-size:0.875em;
  line-height:1.7142857
}

.htw-prose :where(thead):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-th-borders)
}

.htw-prose :where(thead th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  vertical-align:bottom;
  padding-inline-end:0.5714286em;
  padding-bottom:0.5714286em;
  padding-inline-start:0.5714286em
}

.htw-prose :where(tbody tr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-td-borders)
}

.htw-prose :where(tbody tr:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:0
}

.htw-prose :where(tbody td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:baseline
}

.htw-prose :where(tfoot):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-top-width:1px;
  border-top-color:var(--tw-prose-th-borders)
}

.htw-prose :where(tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:top
}

.htw-prose :where(th, td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  text-align:start
}

.htw-prose :where(figure > *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(figcaption):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-captions);
  font-size:0.875em;
  line-height:1.4285714;
  margin-top:0.8571429em
}

.htw-prose{
  --tw-prose-body:#374151;
  --tw-prose-headings:#111827;
  --tw-prose-lead:#4b5563;
  --tw-prose-links:#111827;
  --tw-prose-bold:#111827;
  --tw-prose-counters:#6b7280;
  --tw-prose-bullets:#d1d5db;
  --tw-prose-hr:#e5e7eb;
  --tw-prose-quotes:#111827;
  --tw-prose-quote-borders:#e5e7eb;
  --tw-prose-captions:#6b7280;
  --tw-prose-kbd:#111827;
  --tw-prose-kbd-shadows:17 24 39;
  --tw-prose-code:#111827;
  --tw-prose-pre-code:#e5e7eb;
  --tw-prose-pre-bg:#1f2937;
  --tw-prose-th-borders:#d1d5db;
  --tw-prose-td-borders:#e5e7eb;
  --tw-prose-invert-body:#d1d5db;
  --tw-prose-invert-headings:#fff;
  --tw-prose-invert-lead:#9ca3af;
  --tw-prose-invert-links:#fff;
  --tw-prose-invert-bold:#fff;
  --tw-prose-invert-counters:#9ca3af;
  --tw-prose-invert-bullets:rgb(var(--_histoire-color-gray-500));
  --tw-prose-invert-hr:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-quotes:#f3f4f6;
  --tw-prose-invert-quote-borders:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-captions:#9ca3af;
  --tw-prose-invert-kbd:#fff;
  --tw-prose-invert-kbd-shadows:255 255 255;
  --tw-prose-invert-code:#fff;
  --tw-prose-invert-pre-code:#d1d5db;
  --tw-prose-invert-pre-bg:rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders:#4b5563;
  --tw-prose-invert-td-borders:#374151;
  font-size:1rem;
  line-height:1.75
}

.htw-prose :where(picture > img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.1rem;
  margin-bottom:0.1rem
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0.375em
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0.375em
}

.htw-prose :where(.htw-prose > ul > li p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(.htw-prose > ul > li > p:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ul > li > p:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(.htw-prose > ol > li > p:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ol > li > p:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(dl):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where(dd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.5em;
  padding-inline-start:1.625em
}

.htw-prose :where(hr + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h2 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h3 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h4 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(thead th:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0
}

.htw-prose :where(thead th:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-end:0
}

.htw-prose :where(tbody td, tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-top:0.5714286em;
  padding-inline-end:0.5714286em;
  padding-bottom:0.5714286em;
  padding-inline-start:0.5714286em
}

.htw-prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0
}

.htw-prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-end:0
}

.htw-prose :where(figure):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(.htw-prose > :first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(.htw-prose > :last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0.75rem;
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):not(:first-child){
  margin-top:1.25rem
}

.htw-pointer-events-none{
  pointer-events:none
}

.htw-invisible{
  visibility:hidden
}

.htw-fixed{
  position:fixed
}

.htw-absolute{
  position:absolute
}

.htw-relative{
  position:relative
}

.htw-inset-0{
  inset:0px
}

.htw-bottom-0{
  bottom:0px
}

.htw-bottom-4{
  bottom:1rem
}

.htw-bottom-5{
  bottom:1.25rem
}

.htw-bottom-8{
  bottom:2rem
}

.htw-left-0{
  left:0px
}

.htw-left-5{
  left:1.25rem
}

.htw-left-8{
  left:2rem
}

.htw-right-0{
  right:0px
}

.htw-right-4{
  right:1rem
}

.htw-right-5{
  right:1.25rem
}

.htw-right-8{
  right:2rem
}

.htw-top-0{
  top:0px
}

.htw-top-5{
  top:1.25rem
}

.htw-top-8{
  top:2rem
}

.htw-isolate{
  isolation:isolate
}

.htw-z-10{
  z-index:10
}

.htw-z-20{
  z-index:20
}

.htw-m-0{
  margin:0px
}

.htw-m-1{
  margin:0.25rem
}

.htw-m-4{
  margin:1rem
}

.htw-m-auto{
  margin:auto
}

.-htw-my-1{
  margin-top:-0.25rem;
  margin-bottom:-0.25rem
}

.htw-mx-1{
  margin-left:0.25rem;
  margin-right:0.25rem
}

.htw-mx-2{
  margin-left:0.5rem;
  margin-right:0.5rem
}

.htw-mx-4{
  margin-left:1rem;
  margin-right:1rem
}

.htw-mx-6{
  margin-left:1.5rem;
  margin-right:1.5rem
}

.htw-my-0{
  margin-top:0px;
  margin-bottom:0px
}

.htw-my-2{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

.htw-my-4{
  margin-top:1rem;
  margin-bottom:1rem
}

.htw-my-8{
  margin-top:2rem;
  margin-bottom:2rem
}

.-htw-mt-1{
  margin-top:-0.25rem
}

.htw-mb-2{
  margin-bottom:0.5rem
}

.htw-mb-6{
  margin-bottom:1.5rem
}

.htw-mb-8{
  margin-bottom:2rem
}

.htw-ml-4{
  margin-left:1rem
}

.htw-ml-auto{
  margin-left:auto
}

.htw-mr-2{
  margin-right:0.5rem
}

.htw-mr-auto{
  margin-right:auto
}

.htw-mt-0\.5{
  margin-top:0.125rem
}

.htw-mt-1{
  margin-top:0.25rem
}

.htw-mt-2{
  margin-top:0.5rem
}

.htw-box-border{
  box-sizing:border-box
}

.htw-block{
  display:block
}

.htw-flex{
  display:flex
}

.htw-inline-flex{
  display:inline-flex
}

.htw-grid{
  display:grid
}

.\!htw-hidden{
  display:none !important
}

.htw-hidden{
  display:none
}

.htw-h-1{
  height:0.25rem
}

.htw-h-10{
  height:2.5rem
}

.htw-h-12{
  height:3rem
}

.htw-h-16{
  height:4rem
}

.htw-h-2{
  height:0.5rem
}

.htw-h-20{
  height:5rem
}

.htw-h-3{
  height:0.75rem
}

.htw-h-32{
  height:8rem
}

.htw-h-4{
  height:1rem
}

.htw-h-48{
  height:12rem
}

.htw-h-5{
  height:1.25rem
}

.htw-h-6{
  height:1.5rem
}

.htw-h-64{
  height:16rem
}

.htw-h-8{
  height:2rem
}

.htw-h-9{
  height:2.25rem
}

.htw-h-\[100px\]{
  height:100px
}

.htw-h-\[16px\]{
  height:16px
}

.htw-h-\[1px\]{
  height:1px
}

.htw-h-\[22px\]{
  height:22px
}

.htw-h-\[27px\]{
  height:27px
}

.htw-h-\[2px\]{
  height:2px
}

.htw-h-\[51px\]{
  height:51px
}

.htw-h-fit{
  height:-moz-fit-content;
  height:fit-content
}

.htw-h-full{
  height:100%
}

.htw-h-px{
  height:1px
}

.htw-h-screen{
  height:100vh
}

.htw-max-h-\[400px\]{
  max-height:400px
}

.htw-max-h-\[80vh\]{
  max-height:80vh
}

.htw-max-h-full{
  max-height:100%
}

.htw-min-h-32{
  min-height:8rem
}

.htw-min-h-\[26px\]{
  min-height:26px
}

.htw-w-0{
  width:0px
}

.htw-w-16{
  width:4rem
}

.htw-w-2{
  width:0.5rem
}

.htw-w-20{
  width:5rem
}

.htw-w-28{
  width:7rem
}

.htw-w-3{
  width:0.75rem
}

.htw-w-32{
  width:8rem
}

.htw-w-4{
  width:1rem
}

.htw-w-5{
  width:1.25rem
}

.htw-w-6{
  width:1.5rem
}

.htw-w-64{
  width:16rem
}

.htw-w-8{
  width:2rem
}

.htw-w-\[16px\]{
  width:16px
}

.htw-w-\[2px\]{
  width:2px
}

.htw-w-fit{
  width:-moz-fit-content;
  width:fit-content
}

.htw-w-full{
  width:100%
}

.htw-w-max{
  width:-moz-max-content;
  width:max-content
}

.htw-w-px{
  width:1px
}

.htw-w-screen{
  width:100vw
}

.htw-min-w-0{
  min-width:0px
}

.htw-min-w-16{
  min-width:4rem
}

.htw-min-w-4{
  min-width:1rem
}

.htw-min-w-\[150px\]{
  min-width:150px
}

.htw-min-w-\[80px\]{
  min-width:80px
}

.htw-max-w-6{
  max-width:1.5rem
}

.htw-max-w-\[400px\]{
  max-width:400px
}

.htw-max-w-\[512px\]{
  max-width:512px
}

.htw-max-w-\[63px\]{
  max-width:63px
}

.htw-max-w-\[82px\]{
  max-width:82px
}

.htw-max-w-full{
  max-width:100%
}

.htw-max-w-none{
  max-width:none
}

.htw-flex-1{
  flex:1 1 0%
}

.htw-flex-none{
  flex:none
}

.htw-flex-shrink{
  flex-shrink:1
}

.htw-shrink{
  flex-shrink:1
}

.htw-shrink-0{
  flex-shrink:0
}

.htw-grow{
  flex-grow:1
}

.htw-rotate-90{
  --tw-rotate:90deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-scale-0{
  --tw-scale-x:0;
  --tw-scale-y:0;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-cursor-default{
  cursor:default
}

.htw-cursor-ew-resize{
  cursor:ew-resize
}

.htw-cursor-ns-resize{
  cursor:ns-resize
}

.htw-cursor-nwse-resize{
  cursor:nwse-resize
}

.htw-cursor-pointer{
  cursor:pointer
}

.htw-cursor-text{
  cursor:text
}

.htw-select-none{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.htw-resize-none{
  resize:none
}

.htw-resize-y{
  resize:vertical
}

.htw-appearance-none{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none
}

.htw-grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\]{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
}

.htw-flex-row{
  flex-direction:row
}

.htw-flex-col{
  flex-direction:column
}

.htw-flex-wrap{
  flex-wrap:wrap
}

.htw-flex-nowrap{
  flex-wrap:nowrap
}

.htw-place-content-between{
  place-content:space-between
}

.htw-items-start{
  align-items:flex-start
}

.htw-items-end{
  align-items:flex-end
}

.htw-items-center{
  align-items:center
}

.htw-items-baseline{
  align-items:baseline
}

.htw-items-stretch{
  align-items:stretch
}

.htw-justify-end{
  justify-content:flex-end
}

.htw-justify-center{
  justify-content:center
}

.htw-justify-evenly{
  justify-content:space-evenly
}

.htw-gap-0\.5{
  gap:0.125rem
}

.htw-gap-1{
  gap:0.25rem
}

.htw-gap-12{
  gap:3rem
}

.htw-gap-2{
  gap:0.5rem
}

.htw-gap-4{
  gap:1rem
}

.htw-gap-6{
  gap:1.5rem
}

.htw-gap-px{
  gap:1px
}

.htw-gap-x-2{
  -moz-column-gap:0.5rem;
       column-gap:0.5rem
}

.htw-gap-y-1{
  row-gap:0.25rem
}

.htw-space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
}

.htw-divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse))
}

.htw-divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-divide-opacity, 1))
}

.htw-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-divide-opacity, 1))
}

.htw-overflow-auto{
  overflow:auto
}

.htw-overflow-hidden{
  overflow:hidden
}

.htw-overflow-y-auto{
  overflow-y:auto
}

.htw-overflow-y-scroll{
  overflow-y:scroll
}

.htw-scroll-smooth{
  scroll-behavior:smooth
}

.htw-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.htw-text-ellipsis{
  text-overflow:ellipsis
}

.htw-whitespace-nowrap{
  white-space:nowrap
}

.\!htw-rounded-\[3px\]{
  border-radius:3px !important
}

.htw-rounded{
  border-radius:0.375rem
}

.htw-rounded-full{
  border-radius:9999px
}

.htw-rounded-lg{
  border-radius:0.75rem
}

.htw-rounded-sm{
  border-radius:0.25rem
}

.htw-rounded-b-lg{
  border-bottom-right-radius:0.75rem;
  border-bottom-left-radius:0.75rem
}

.htw-rounded-l{
  border-top-left-radius:0.375rem;
  border-bottom-left-radius:0.375rem
}

.htw-rounded-r{
  border-top-right-radius:0.375rem;
  border-bottom-right-radius:0.375rem
}

.htw-rounded-r-lg{
  border-top-right-radius:0.75rem;
  border-bottom-right-radius:0.75rem
}

.htw-border{
  border-width:1px
}

.htw-border-0{
  border-width:0px
}

.htw-border-2{
  border-width:2px
}

.htw-border-8{
  border-width:8px
}

.htw-border-b{
  border-bottom-width:1px
}

.htw-border-l-2{
  border-left-width:2px
}

.htw-border-r{
  border-right-width:1px
}

.htw-border-t{
  border-top-width:1px
}

.htw-border-solid{
  border-style:solid
}

.htw-border-black\/20{
  border-color:rgb(0 0 0 / 0.2)
}

.htw-border-black\/25{
  border-color:rgb(0 0 0 / 0.25)
}

.htw-border-black\/50{
  border-color:rgb(0 0 0 / 0.5)
}

.htw-border-current{
  border-color:currentColor
}

.htw-border-gray-100{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-border-opacity, 1))
}

.htw-border-gray-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-border-opacity, 1))
}

.htw-border-gray-300\/30{
  border-color:rgb(var(--_histoire-color-gray-300) / 0.3)
}

.htw-border-gray-500\/10{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-border-gray-500\/30{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.htw-border-gray-500\/40{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.4)
}

.htw-border-gray-500\/5{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.htw-border-gray-500\/50{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-border-gray-600{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-600) / var(--tw-border-opacity, 1))
}

.htw-border-gray-800{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity, 1))
}

.htw-border-gray-850{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.htw-border-primary-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-200) / var(--tw-border-opacity, 1))
}

.htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-border-primary-900{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity, 1))
}

.htw-border-transparent{
  border-color:transparent
}

.\!htw-bg-primary-500{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity, 1)) !important
}

.htw-bg-gray-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-100) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-400\/25{
  background-color:rgb(var(--_histoire-color-gray-400) / 0.25)
}

.htw-bg-gray-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-50) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-500\/10{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-bg-gray-500\/50{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-bg-gray-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-500{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-500\/10{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.htw-bg-primary-500\/20{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.2)
}

.htw-bg-primary-500\/25{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.25)
}

.htw-bg-primary-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.htw-bg-transparent{
  background-color:transparent
}

.htw-bg-white{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-bg-white\/80{
  background-color:rgb(255 255 255 / 0.8)
}

.htw-fill-primary-500{
  fill:rgb(var(--_histoire-color-primary-500))
}

.htw-fill-transparent{
  fill:transparent
}

.htw-stroke-white{
  stroke:#fff
}

.htw-stroke-2{
  stroke-width:2
}

.htw-p-1{
  padding:0.25rem
}

.htw-p-2{
  padding:0.5rem
}

.htw-p-4{
  padding:1rem
}

.htw-p-8{
  padding:2rem
}

.htw-p-px{
  padding:1px
}

.htw-px-0\.5{
  padding-left:0.125rem;
  padding-right:0.125rem
}

.htw-px-1{
  padding-left:0.25rem;
  padding-right:0.25rem
}

.htw-px-2{
  padding-left:0.5rem;
  padding-right:0.5rem
}

.htw-px-4{
  padding-left:1rem;
  padding-right:1rem
}

.htw-px-6{
  padding-left:1.5rem;
  padding-right:1.5rem
}

.htw-py-0\.5{
  padding-top:0.125rem;
  padding-bottom:0.125rem
}

.htw-py-1{
  padding-top:0.25rem;
  padding-bottom:0.25rem
}

.htw-py-12{
  padding-top:3rem;
  padding-bottom:3rem
}

.htw-py-2{
  padding-top:0.5rem;
  padding-bottom:0.5rem
}

.htw-py-3{
  padding-top:0.75rem;
  padding-bottom:0.75rem
}

.htw-py-4{
  padding-top:1rem;
  padding-bottom:1rem
}

.htw-pl-0{
  padding-left:0px
}

.htw-pl-0\.5{
  padding-left:0.125rem
}

.htw-pl-2{
  padding-left:0.5rem
}

.htw-pl-4{
  padding-left:1rem
}

.htw-pl-6{
  padding-left:1.5rem
}

.htw-pr-2{
  padding-right:0.5rem
}

.htw-pr-6{
  padding-right:1.5rem
}

.htw-pt-4{
  padding-top:1rem
}

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

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

.htw-font-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.htw-text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.htw-text-5xl{
  font-size:3rem;
  line-height:1
}

.htw-text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.htw-text-sm{
  font-size:0.875rem;
  line-height:1.25rem
}

.htw-text-xs{
  font-size:0.75rem;
  line-height:1rem
}

.htw-font-bold{
  font-weight:700
}

.htw-uppercase{
  text-transform:uppercase
}

.htw-leading-none{
  line-height:1
}

.htw-leading-normal{
  line-height:1.5
}

.htw-text-black\/\[1\%\]{
  color:rgb(0 0 0 / 1%)
}

.htw-text-gray-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-400) / var(--tw-text-opacity, 1))
}

.htw-text-gray-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-500) / var(--tw-text-opacity, 1))
}

.htw-text-gray-500\/20{
  color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.htw-text-gray-700{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-700) / var(--tw-text-opacity, 1))
}

.htw-text-gray-900{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-900) / var(--tw-text-opacity, 1))
}

.htw-text-inherit{
  color:inherit
}

.htw-text-orange-500{
  --tw-text-opacity:1;
  color:rgb(249 115 22 / var(--tw-text-opacity, 1))
}

.htw-text-primary-200{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity, 1))
}

.htw-text-primary-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.htw-text-primary-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity, 1))
}

.htw-text-primary-600{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-600) / var(--tw-text-opacity, 1))
}

.htw-text-primary-800{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-800) / var(--tw-text-opacity, 1))
}

.htw-text-red-500{
  --tw-text-opacity:1;
  color:rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.htw-text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.htw-opacity-0{
  opacity:0
}

.htw-opacity-20{
  opacity:0.2
}

.htw-opacity-25{
  opacity:0.25
}

.htw-opacity-30{
  opacity:0.3
}

.htw-opacity-40{
  opacity:0.4
}

.htw-opacity-50{
  opacity:0.5
}

.htw-opacity-60{
  opacity:0.6
}

.htw-opacity-70{
  opacity:0.7
}

.htw-shadow-xl{
  --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.htw-outline-none{
  outline:2px solid transparent;
  outline-offset:2px
}

.htw-transition-all{
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-border{
  transition-property:border;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-colors{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-none{
  transition-property:none
}

.htw-transition-transform{
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-delay-150{
  transition-delay:150ms
}

.htw-duration-150{
  transition-duration:150ms
}

.htw-duration-200{
  transition-duration:200ms
}

.htw-duration-300{
  transition-duration:300ms
}

.htw-ease-\[cubic-bezier\(0\,1\,\.6\,1\)\]{
  transition-timing-function:cubic-bezier(0,1,.6,1)
}

.htw-ease-in-out{
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
}

.htw-ease-out{
  transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
}

.htw-will-change-transform{
  will-change:transform
}

.dark\:htw-prose-invert:is(.htw-dark *){
  --tw-prose-body:var(--tw-prose-invert-body);
  --tw-prose-headings:var(--tw-prose-invert-headings);
  --tw-prose-lead:var(--tw-prose-invert-lead);
  --tw-prose-links:var(--tw-prose-invert-links);
  --tw-prose-bold:var(--tw-prose-invert-bold);
  --tw-prose-counters:var(--tw-prose-invert-counters);
  --tw-prose-bullets:var(--tw-prose-invert-bullets);
  --tw-prose-hr:var(--tw-prose-invert-hr);
  --tw-prose-quotes:var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);
  --tw-prose-captions:var(--tw-prose-invert-captions);
  --tw-prose-kbd:var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code:var(--tw-prose-invert-code);
  --tw-prose-pre-code:var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders:var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders:var(--tw-prose-invert-td-borders)
}

.first\:htw-mt-0:first-child{
  margin-top:0px
}

.last\:htw-mb-0:last-child{
  margin-bottom:0px
}

.focus-within\:htw-border-primary-500:focus-within{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.focus-within\:htw-bg-gray-500\/5:focus-within{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.hover\:htw-border-primary-500:hover{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.hover\:htw-bg-gray-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-gray-500\/10:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.hover\:htw-bg-gray-500\/20:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.hover\:htw-bg-gray-500\/30:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.hover\:htw-bg-primary-100:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-300:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-300) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-500\/10:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.hover\:htw-bg-primary-500\/30:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.3)
}

.hover\:htw-bg-primary-500\/50:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.hover\:htw-bg-primary-600:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity, 1))
}

.hover\:htw-text-primary-500:hover{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity, 1))
}

.hover\:htw-opacity-100:hover{
  opacity:1
}

.focus\:htw-border-primary-500:focus{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.focus\:htw-border-primary-500\/50:focus{
  border-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.focus\:htw-opacity-100:focus{
  opacity:1
}

.focus-visible\:htw-border-primary-500:focus-visible{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.active\:htw-bg-gray-600\/50:active{
  background-color:rgb(var(--_histoire-color-gray-600) / 0.5)
}

.htw-group:first-child .group-first\:htw-hidden{
  display:none
}

.htw-group:nth-child(odd) .group-odd\:htw-bg-gray-100\/50{
  background-color:rgb(var(--_histoire-color-gray-100) / 0.5)
}

.htw-group:focus-within .group-focus-within\:htw-visible{
  visibility:visible
}

.htw-group:hover .group-hover\:htw-flex{
  display:flex
}

.htw-group:hover .group-hover\:htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:hover .group-hover\:htw-bg-primary-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity, 1))
}

.htw-group:hover .group-hover\:htw-opacity-100{
  opacity:1
}

.htw-group:hover .group-hover\:htw-opacity-90{
  opacity:0.9
}

.htw-group:active .group-active\:htw-bg-gray-500\/20{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.dark\:htw-divide-gray-750:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-divide-opacity, 1))
}

.dark\:htw-divide-gray-800:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-divide-opacity, 1))
}

.dark\:htw-divide-gray-850:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-divide-opacity, 1))
}

.dark\:htw-border-gray-700\/30:is(.htw-dark *){
  border-color:rgb(var(--_histoire-color-gray-700) / 0.3)
}

.dark\:htw-border-gray-750:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-gray-800:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-gray-850:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-primary-900:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-white\/20:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.2)
}

.dark\:htw-border-white\/25:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.25)
}

.dark\:htw-border-white\/50:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.5)
}

.dark\:htw-bg-black:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-600:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-600) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-750:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-750) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-900:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-900) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-900\/80:is(.htw-dark *){
  background-color:rgb(var(--_histoire-color-gray-900) / 0.8)
}

.dark\:htw-bg-primary-400:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-400) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-600:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-800:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.dark\:htw-text-black:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.dark\:htw-text-gray-100:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-gray-300:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-300) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-primary-200:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-primary-400:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-white\/\[1\%\]:is(.htw-dark *){
  color:rgb(255 255 255 / 1%)
}

.dark\:focus-within\:htw-border-primary-500:focus-within:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.dark\:hover\:htw-border-primary-500:hover:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.dark\:hover\:htw-bg-gray-800:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-700:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-800:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-900:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-900) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-text-primary-400:hover:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.dark\:focus\:htw-border-primary-500:focus:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:nth-child(odd) .dark\:group-odd\:htw-bg-gray-750\/40:is(.htw-dark *){
  background-color:rgb(var(--_histoire-color-gray-750) / 0.4)
}

.htw-group:hover .group-hover\:dark\:htw-border-primary-500:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:hover .dark\:group-hover\:htw-bg-primary-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

@media (min-width: 640px){
  .sm\:htw-h-4{
    height:1rem
  }

  .sm\:htw-w-4{
    width:1rem
  }

  .sm\:htw-p-1{
    padding:0.25rem
  }

  .sm\:htw-py-4{
    padding-top:1rem;
    padding-bottom:1rem
  }
}

@media (min-width: 768px){
  .md\:htw-mx-auto{
    margin-left:auto;
    margin-right:auto
  }

  .md\:htw-mt-16{
    margin-top:4rem
  }

  .md\:htw-block{
    display:block
  }

  .md\:htw-max-w-\[600px\]{
    max-width:600px
  }

  .md\:htw-flex-col{
    flex-direction:column
  }

  .md\:htw-p-12{
    padding:3rem
  }

  .md\:htw-py-1\.5{
    padding-top:0.375rem;
    padding-bottom:0.375rem
  }
}

@media (min-width: 1024px){
  .lg\:htw-max-w-\[800px\]{
    max-width:800px
  }
}

@media (min-width: 1280px){
  .xl\:htw-max-w-\[900px\]{
    max-width:900px
  }
}

@media (max-width: 767px){
  .\!md\:htw-flex-col{
    flex-direction:column
  }
}

.histoire-story-list-folder-button:hover .\[\.histoire-story-list-folder-button\:hover_\&\]\:htw-opacity-100{
  opacity:1
}

.bind-tree-margin[data-v-048885b7] {
  margin-left: var(--10fa28ae);
}
.bind-icon-color[data-v-048885b7] {
  color: var(--8aa08936);
}

.bind-tree-padding[data-v-10840b73] {
  padding-left: var(--224f37c4);
}

.bind-icon-color[data-v-d15ecb89] {
  color: var(--a3f02f4e);
}

.landscape > div > .dragger[data-v-4f40a1bb] {
  width: .625rem;
}
.portrait > div > .dragger[data-v-4f40a1bb] {
  height: .625rem;
}
.landscape > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  right: 0;
}
.portrait > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  bottom: 0;
}
.landscape > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  right: -.3125rem;
}
.portrait > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  bottom: -.3125rem;
}
.landscape > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  right: -.625rem;
}
.portrait > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  bottom: -.625rem;
}

.htw-base-empty[data-v-c5ecfead]:not(.no-animation) {
  animation: htw-base-empty-c5ecfead .15s .2s both;
}
@keyframes htw-base-empty-c5ecfead {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

.__histoire-code-placeholder[data-v-96af7f40] {
  color: inherit;
  font-size: inherit;
}

.bind-preview-bg[data-v-c48fb2b2] {
  background-color: var(--627bec82);
  color: var(--35068428);
}

.bind-icon-color[data-v-feff9239] {
  color: var(--60afaf4d);
}
.bind-preview-bg[data-v-feff9239] {
  background-color: var(--3bd99e7e);
}

.bind-icon-color[data-v-1b279b85] {
  color: var(--ab2181a2);
}

.__histoire-hatched-pattern[data-v-91561117] {
  background: repeating-linear-gradient(135deg,
  transparent 0px,
  transparent 32px,
  currentColor 32px,
  currentColor 64px);
}

.bind-preview-bg[data-v-18122333] {
  background-color: var(--5f6f4ee9);
}

.bind-icon-color[data-v-c2a43485] {
  color: var(--41c4d268);
}

.bind-icon-color[data-v-096f6d6e] {
  color: var(--0f021d3c);
}

img.colorize-black[data-v-2114f510] {
  filter: grayscale(100) brightness(0);
}

.bind-icon-color[data-v-9f94ad2b] {
  color: var(--1f9aa6ca);
}
.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-d4369e5a] .cm-editor{height:100%;min-width:280px}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity, 1))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity, 1))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.htw-range-input:is(.htw-dark *)::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.htw-range-input:is(.htw-dark *)::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important}html,
body {
  background: transparent !important;
}body {
  margin: 0;
}html {
  font-size: 1rem;
  font-family: 'Noto Sans Display', system-ui, sans-serif;
}.htw-sandbox-hidden {
  display: none;
}.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}
/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Color[data-v-20ef1a9f] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 48px;
  text-align: center;
}
.Color--example[data-v-20ef1a9f] {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.Color--name[data-v-20ef1a9f] {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Color--name[data-v-20ef1a9f] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Color--name[data-v-20ef1a9f] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Color--name[data-v-20ef1a9f] {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Square[data-v-f55bb665] {
  background-color: lightcoral;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Group + .Group[data-v-c22f472f] {
  margin-top: 64px;
}
.Group--name[data-v-c22f472f] {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 16px;
  opacity: 0.25;
}
@media (min-width: 750px) {
.Group--name[data-v-c22f472f] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Group--name[data-v-c22f472f] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Group--name[data-v-c22f472f] {
    line-height: 1.4;
}
}

/* Headline examples */
.Headline--xxxl[data-v-c22f472f] {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.Headline--xxxl[data-v-c22f472f] {
    font-size: calc(5.2830188679vw - 9.6226415094px);
}
}
@media (min-width: 1280px) {
.Headline--xxxl[data-v-c22f472f] {
    font-size: 58px;
}
}
.Headline--xxl[data-v-c22f472f] {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.Headline--xxl[data-v-c22f472f] {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.Headline--xxl[data-v-c22f472f] {
    font-size: 50px;
}
}
.Headline--xl[data-v-c22f472f] {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.Headline--xl[data-v-c22f472f] {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.Headline--xl[data-v-c22f472f] {
    font-size: 34px;
}
}
.Headline--l[data-v-c22f472f] {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Headline--l[data-v-c22f472f] {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.Headline--l[data-v-c22f472f] {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.Headline--l[data-v-c22f472f] {
    line-height: 1.2;
}
}
.Headline--m[data-v-c22f472f] {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Headline--m[data-v-c22f472f] {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.Headline--m[data-v-c22f472f] {
    font-size: 22px;
}
}
.Headline--s[data-v-c22f472f] {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.Headline--s[data-v-c22f472f] {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Headline--s[data-v-c22f472f] {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Headline--s[data-v-c22f472f] {
    line-height: 1.2;
}
}

/* Text examples */
.Text--base[data-v-c22f472f] {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
}
@media (min-width: 750px) {
.Text--base[data-v-c22f472f] {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.Text--base[data-v-c22f472f] {
    font-size: 16px;
}
}
.Text--xl[data-v-c22f472f] {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 300;
}
@media (min-width: 750px) {
.Text--xl[data-v-c22f472f] {
    font-size: calc(1.1320754717vw + 9.5094339623px);
}
}
@media (min-width: 1280px) {
.Text--xl[data-v-c22f472f] {
    font-size: 24px;
}
}
@media screen and (max-width: 750px) {
.Text--xl[data-v-c22f472f] {
    line-height: 1.4;
}
}
.Text--l[data-v-c22f472f] {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
}
@media (min-width: 750px) {
.Text--l[data-v-c22f472f] {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.Text--l[data-v-c22f472f] {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.Text--l[data-v-c22f472f] {
    line-height: 1.4;
}
}
.Text--m[data-v-c22f472f] {
  font-size: 14px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Text--m[data-v-c22f472f] {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.Text--m[data-v-c22f472f] {
    font-size: 16px;
}
}
.Text--s[data-v-c22f472f] {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.Text--s[data-v-c22f472f] {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Text--s[data-v-c22f472f] {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Text--s[data-v-c22f472f] {
    line-height: 1.2;
}
}
.Text--s-bold[data-v-c22f472f] {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.Text--s-bold[data-v-c22f472f] {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Text--s-bold[data-v-c22f472f] {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Text--s-bold[data-v-c22f472f] {
    line-height: 1.2;
}
}
.Text--xs[data-v-c22f472f] {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Text--xs[data-v-c22f472f] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Text--xs[data-v-c22f472f] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Text--xs[data-v-c22f472f] {
    line-height: 1.4;
}
}
.Text--xs-bold[data-v-c22f472f] {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}
@media (min-width: 750px) {
.Text--xs-bold[data-v-c22f472f] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Text--xs-bold[data-v-c22f472f] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Text--xs-bold[data-v-c22f472f] {
    line-height: 1.4;
}
}
.Text--xxs[data-v-c22f472f] {
  font-size: 10px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Text--xxs[data-v-c22f472f] {
    font-size: 10px;
}
}
@media (min-width: 1280px) {
.Text--xxs[data-v-c22f472f] {
    font-size: 10px;
}
}
@media screen and (max-width: 750px) {
.Text--xxs[data-v-c22f472f] {
    line-height: 1.4;
}
}

/* Navlink examples */
.NavLink[data-v-c22f472f] {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.NavLink[data-v-c22f472f] {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.NavLink[data-v-c22f472f] {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.NavLink[data-v-c22f472f] {
    line-height: 1.2;
}
}
@media screen and (max-width: 1000px) {
.NavLink[data-v-c22f472f] {
    font-size: 14px;
    line-height: 1.4;
}
}
@media screen and (max-width: 1000px) and (min-width: 750px) {
.NavLink[data-v-c22f472f] {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media screen and (max-width: 1000px) and (min-width: 1280px) {
.NavLink[data-v-c22f472f] {
    font-size: 16px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderGroup {
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.OrderGroup {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.OrderGroup {
    margin-bottom: 64px;
}
}
.OrderGroup--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.OrderGroup--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.OrderGroup--title {
    font-size: 22px;
}
}
@media screen and (min-width: 750px) {
.OrderGroup--title {
    margin-bottom: var(--spacing-24, 24px);
}
}
.OrderGroup--body > * {
  padding-top: var(--spacing-20, 20px);
  padding-bottom: var(--spacing-20, 20px);
  border-bottom: 1px solid rgba(var(--c-border));
}
.OrderGroup--body > *:first-child {
  border-top: 1px solid rgba(var(--c-border));
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PriceTable {
  --price-table-row-gap: 0;
  font-size: 14px;
  line-height: 1.2;
  width: 100%;
}
@media (min-width: 750px) {
.PriceTable {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PriceTable {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PriceTable {
    line-height: 1.2;
}
}
.PriceTable tr[data-tax=true] {
  color: rgba(var(--c-grey), 1);
}
.PriceTable tr + tr {
  --price-table-row-gap: var(--spacing-24, 24px);
}
.PriceTable tr + tr[data-tax=true] {
  --price-table-row-gap: var(--spacing-6, 6px);
}
.PriceTable tr[data-discount=true] + tr[data-discount=true] {
  --price-table-row-gap: var(--spacing-6, 6px);
}
.PriceTable--cell {
  padding-top: var(--price-table-row-gap);
}
.PriceTable--cell:not(:last-child) {
  padding-right: var(--spacing-8, 8px);
}
.PriceTable--cell:last-of-type {
  text-align: right;
}
.PriceTable--footer tr:first-child {
  --price-table-row-gap: var(--spacing-24, 24px);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.PriceTable--footer tr:first-child {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PriceTable--footer tr:first-child {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PriceTable--footer tr:first-child {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderSummaryTable {
  font-size: 14px;
  line-height: 1.2;
}
.OrderSummaryTable[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.OrderSummaryTable[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.OrderSummaryTable[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.OrderSummaryTable[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.OrderSummaryTable[data-compose=white] {
    margin-bottom: 96px;
}
}
@media (min-width: 750px) {
.OrderSummaryTable {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.OrderSummaryTable {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.OrderSummaryTable {
    line-height: 1.2;
}
}
.OrderSummaryTable--row {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--spacing-24, 24px);
  border-bottom: 1px solid rgba(var(--c-border));
}
.OrderSummaryTable--row + .OrderSummaryTable--row {
  margin-top: var(--spacing-24, 24px);
}
.OrderSummaryTable--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.OrderSummaryTable--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.OrderSummaryTable--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.OrderSummaryTable--title {
    line-height: 1.2;
}
}
.OrderSummaryTable--attachments {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12, 12px);
  align-items: flex-end;
  text-align: right;
}
.OrderSummaryTable--attachment {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.OrderSummaryTable--attachment:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.OrderSummaryTable--attachment:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.OrderSummaryTable--address {
  text-align: right;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Status {
  position: relative;
  color: rgba(var(--c-black), 1);
}
.Status[data-status=success] {
  color: rgba(var(--c-signal-green), 1);
}
.Status[data-status=warning] {
  color: rgba(var(--c-yellow), 1);
}
.Status[data-status=error] {
  color: rgba(var(--c-signal-red), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProcessInfoTableColumn {
  display: flex;
  gap: var(--spacing-16, 16px);
  justify-content: space-between;
  padding: var(--spacing-12, 12px) 0;
  border-bottom: 1px solid rgba(var(--c-border));
}
@media screen and (min-width: 750px) {
.ProcessInfoTableColumn {
    flex: 1 1 33.33%;
    flex-direction: column;
    gap: var(--spacing-4, 4px);
    padding: 0;
    border: none;
}
}
.ProcessInfoTableColumn--title {
  flex: 0 0 auto;
}
.ProcessInfoTableColumn--text {
  margin-bottom: auto;
}
@media screen and (max-width: 750px) {
.ProcessInfoTableColumn--text {
    text-align: right;
}
}
.ProcessInfoTableColumn--text span {
  display: block;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProcessInfoTable {
  margin-top: 24px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ProcessInfoTable {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 0.75);
}
}
@media screen and (min-width: 1920px) {
.ProcessInfoTable {
    margin-top: 48px;
}
}
@media screen and (min-width: 750px) {
.ProcessInfoTable {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ProcessInfoTable {
    margin-bottom: 64px;
}
}
@media screen and (min-width: 750px) {
.ProcessInfoTable {
    border-bottom: 1px solid rgba(var(--c-border));
}
}
.ProcessInfoTable--body {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ProcessInfoTable--body {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProcessInfoTable--body {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProcessInfoTable--body {
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) {
.ProcessInfoTable--body {
    display: flex;
    gap: var(--spacing-16, 16px);
    justify-content: space-between;
    padding-bottom: var(--spacing-24, 24px);
}
}
@media screen and (min-width: 750px) {
.ProcessInfoTable--body > :last-child:not(:first-child) {
    text-align: right;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Image {
  position: relative;
  text-align: left;
  /*
  	&::after {
  		position: absolute;
  		display: block;
  		background-color: var(--img-color-alpha, transparent);
  		visibility: hidden;
  		opacity: 0;
  		mix-blend-mode: multiply;
  		transition: opacity 300ms, visibility 300ms, transform 300ms;
  		content: "";
  		inset: 0;
  	} */
  /* hide it if the width isn't calculated yet */
}
.Image[data-layout=cover] {
  position: absolute;
  inset: 0;
}
.Image[data-layout=cover] img {
  max-width: inherit;
  max-height: inherit;
}
.Image[data-layout=intrinsic] {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.Image[data-layout=intrinsic] > img {
  width: 100%;
  max-width: inherit;
  height: 100%;
  max-height: inherit;
}
.Image[data-layout=cover] > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.Image[data-layout=cover] > img, .Image[data-layout=contain] > img {
  max-width: inherit;
  max-height: inherit;
}
.Image[data-object-fit=cover] > img {
  -o-object-fit: cover;
     object-fit: cover;
}
.Image[data-object-fit=contain] > img {
  -o-object-fit: contain;
     object-fit: contain;
}
.Image[data-preview] {
  background-size: cover;
}
.Image[data-loading=loaded] {
  background-image: none !important;
}
.Image[data-layout=responsive] {
  width: 100%;
}
.Image[data-layout=responsive] > img {
  width: 100%;
  height: auto;
  min-height: 1px;
  max-height: 100%;
}
.Image[data-layout=responsive][style*="--aspect-ratio"] {
  padding-bottom: var(--aspect-ratio-percent);
}
@supports (aspect-ratio: 1) {
.Image[data-layout=responsive][style*="--aspect-ratio"] {
    padding-bottom: 0;
    aspect-ratio: var(--aspect-ratio);
}
}
.Image[data-layout=responsive][style*="--aspect-ratio"] > img {
  position: absolute;
}
.Image > .Image:not([sizes]) {
  visibility: hidden;
  opacity: 0;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProcessTeaserThumbnails {
  display: flex;
  gap: var(--spacing-4, 4px);
}
.ProcessTeaserThumbnails--card {
  font-size: 10px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 5px;
  overflow: hidden;
  background: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-small);
}
@media (min-width: 750px) {
.ProcessTeaserThumbnails--card {
    font-size: 10px;
}
}
@media (min-width: 1280px) {
.ProcessTeaserThumbnails--card {
    font-size: 10px;
}
}
@media screen and (max-width: 750px) {
.ProcessTeaserThumbnails--card {
    line-height: 1.4;
}
}
.ProcessTeaserThumbnails--image {
  mix-blend-mode: multiply;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProcessTeaser {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.ProcessTeaser {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProcessTeaser {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProcessTeaser {
    line-height: 1.2;
}
}
.ProcessTeaser--head {
  display: flex;
  gap: var(--spacing-16, 16px);
  justify-content: space-between;
}
.ProcessTeaser--main,
.ProcessTeaser--aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6, 6px);
}
.ProcessTeaser--aside {
  text-align: right;
}
.ProcessTeaser--body {
  display: flex;
  gap: var(--spacing-16, 16px);
}
.ProcessTeaser--body[data-layout=column] {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.ProcessTeaser--body[data-layout=column] .ProcessTeaser--action {
  text-align: right;
}
.ProcessTeaser--body[data-layout=row] {
  flex-direction: column;
}
@media screen and (min-width: 750px) {
.ProcessTeaser--body[data-layout=row] {
    gap: var(--spacing-24, 24px);
}
}
.ProcessTeaser--title,
.ProcessTeaser--total {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.ProcessTeaser--title,
  .ProcessTeaser--total {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProcessTeaser--title,
  .ProcessTeaser--total {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProcessTeaser--title,
  .ProcessTeaser--total {
    line-height: 1.2;
}
}
.ProcessTeaser--text,
.ProcessTeaser--totalInfo {
  color: rgba(var(--c-grey-text), 1);
}
.ProcessTeaser--link {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
  flex: 0 0 auto;
}
@media (hover: hover) {
.ProcessTeaser--link:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.ProcessTeaser--link:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProcessSummaryCard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48, 48px);
  height: 100%;
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.ProcessSummaryCard {
    padding: var(--spacing-32, 32px) var(--spacing-32, 32px) var(--spacing-40, 40px);
}
}
.ProcessSummaryCard--title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.ProcessSummaryCard--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProcessSummaryCard--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProcessSummaryCard--title {
    line-height: 1.2;
}
}
.ProcessSummaryCard--items > * + * {
  padding-top: var(--spacing-20, 20px);
  border-top: 1px solid rgba(var(--c-border));
}
.ProcessSummaryCard--items > *:not(:last-child) {
  padding-bottom: var(--spacing-20, 20px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Icon {
  --c-icon-path: currentcolor;
  --c-icon-fill: transparent;
  --c-icon-shape-color: rgba(var(--c-white), 1);
}
.Icon:not([data-icon]) {
  display: none;
}
[data-icon] {
  position: relative;
  display: flex;
  align-items: center;
  vertical-align: middle;
  /* Icon Sizes */
  /* Icon Background Shape */
}
[data-icon][data-display=inline] {
  display: inline-flex;
}
[data-icon] > svg {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  overflow: visible;
}
[data-icon][data-size="12"] {
  font-size: 12px;
}
[data-icon][data-size="16"] {
  font-size: 16px;
}
[data-icon][data-size="24"] {
  font-size: 24px;
}
[data-icon][data-size="32"] {
  font-size: 32px;
}
[data-icon][data-size="40"] {
  font-size: 40px;
}
[data-icon][data-size="48"] {
  font-size: 48px;
}
[data-icon][data-size="80"] {
  font-size: 80px;
}
[data-icon][data-shape] {
  position: relative;
}
[data-icon][data-shape]::before {
  position: absolute;
  display: block;
  background-color: var(--c-icon-shape-color);
  content: "";
  inset: 0;
}
[data-icon][data-shape=circle], [data-icon][data-shape=circle]::before {
  border-radius: var(--border-radius-circle);
}
[data-icon][data-shape=square]::before {
  border-radius: var(--border-radius-small);
}
[data-icon][data-shape-size=xsmall] {
  padding: var(--spacing-4, 4px);
}
[data-icon][data-shape-size=small] {
  padding: var(--spacing-6, 6px);
}
[data-icon][data-shape-size=medium] {
  padding: var(--spacing-10, 10px);
}
[data-icon][data-shape-size=large] {
  padding: var(--spacing-12, 12px);
}
[data-icon][data-shape-size=xlarge] {
  padding: var(--spacing-14, 14px);
}
[data-icon][data-shape-color=white] {
  --c-icon-shape-color: rgba(var(--c-white), 1);
  --c-icon-path: rgba(var(--c-black), 1);
}
[data-icon][data-shape-color=black] {
  --c-icon-shape-color: rgba(var(--c-black), 1);
  --c-icon-path: rgba(var(--c-white), 1);
}
[data-icon][data-shape-color=grey] {
  --c-icon-shape-color: rgba(var(--c-white), 1);
  --c-icon-path: rgba(var(--c-grey), 1);
  --c-icon-shape-border-color: rgba(var(--c-grey-medium), 1);
}
[data-icon][data-shape-border] {
  border: 1px solid var(--c-icon-shape-border-color);
}
[data-icon][data-shape-color=grey-light] {
  --c-icon-shape-color: rgba(var(--c-grey-light), 1);
  --c-icon-path: rgba(var(--c-black), 1);
}
[data-icon][data-shape-color=signal-red] {
  --c-icon-shape-color: rgba(var(--c-signal-red), 1);
  --c-icon-path: rgba(var(--c-white), 1);
}
[data-icon][data-shape-color=signal-green] {
  --c-icon-shape-color: rgba(var(--c-signal-green), 1);
  --c-icon-path: rgba(var(--c-white), 1);
}
[data-icon][data-shape-color=signal-green-light] {
  --c-icon-shape-color: rgba(var(--c-signal-green-light), 1);
  --c-icon-path: rgba(var(--c-black), 1);
}
[data-icon][data-shape-color=green-light] {
  --c-icon-shape-color: rgba(var(--c-green-light), 1);
  --c-icon-path: rgba(var(--c-black), 1);
}
[data-icon][data-shape-color=green-grey] {
  --c-icon-shape-color: rgba(var(--c-green-grey), 1);
  --c-icon-path: rgba(var(--c-black), 1);
}
[data-icon][data-shape-color=yellow] {
  --c-icon-shape-color: rgba(var(--c-yellow), 1);
  --c-icon-path: rgba(var(--c-black), 1);
}
[data-icon][data-shape-color=yellow-ultra-light] {
  --c-icon-shape-color: rgba(var(--c-yellow-ultra-light), 1);
  --c-icon-path: rgba(var(--c-black), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArrowLink {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  display: inline-flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
}
@media (min-width: 750px) {
.ArrowLink {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.ArrowLink {
    font-size: 16px;
}
}
.ArrowLink[data-color=white] {
  color: rgba(var(--c-white), 1);
}
@media (hover: hover) {
.ImageTeaser:hover .ArrowLink .ArrowLink--icon::before, .TeaserListItem:hover .ArrowLink .ArrowLink--icon::before, .CategoryTeaser:hover .ArrowLink .ArrowLink--icon::before, .ArrowLink:hover .ArrowLink--icon::before {
    transform: scale(1.1);
}
.ImageTeaser:hover .ArrowLink .ArrowLink--icon > svg, .TeaserListItem:hover .ArrowLink .ArrowLink--icon > svg, .CategoryTeaser:hover .ArrowLink .ArrowLink--icon > svg, .ArrowLink:hover .ArrowLink--icon > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
.ArrowLink:focus .ArrowLink--icon::before {
    transform: scale(1.1);
}
.ArrowLink:focus .ArrowLink--icon > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
}
.ArrowLink--label {
  display: block;
  margin-top: 0.1em;
}
[data-icon].ArrowLink--icon {
  clip-path: inset(-10%);
  flex: 0 0 auto;
  color: rgba(var(--c-black), 1);
}
[data-icon].ArrowLink--icon::before {
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.BackButton {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
}
@media (hover: hover) {
.BackButton:hover .BackButton--icon {
    transform: translateX(-4px);
}
.BackButton:focus .BackButton--icon {
    transform: translateX(-4px);
}
}
.BackButton--title {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 0.2em;
}
@media (min-width: 750px) {
.BackButton--title {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.BackButton--title {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.BackButton--title {
    line-height: 1.4;
}
}
.BackButton--icon {
  transition: transform 200ms ease-in-out;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Badge {
  position: relative;
  width: clamp(96px, 10vw, 128px);
  aspect-ratio: 1;
  color: rgba(var(--c-black), 1);
  background-color: rgba(var(--c-yellow), 1);
  border-radius: var(--border-radius-circle);
}
.Badge[data-size=xs] {
  width: 74px;
}
.Badge[data-size=large] {
  width: clamp(142px, 15vw, 180px);
}
.Badge[data-color=black] {
  color: rgba(var(--c-white), 1);
  background-color: rgba(var(--c-black), 1);
}
.Badge[data-color=red] {
  color: rgba(var(--c-white), 1);
  background-color: rgba(var(--c-signal-red), 1);
}
.Badge--text {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding-right: 15%;
  padding-left: 15%;
  text-align: center;
  word-wrap: break-word;
  transform: translate(-50%, -50%) rotate(-9deg);
}
@media (min-width: 750px) {
.Badge--text {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.Badge--text {
    font-size: 16px;
}
}
[data-size=xs] > .Badge--text {
  padding-right: 10%;
  padding-left: 10%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Button {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
  --button-color: rgba(var(--c-white), 1);
  --button-background-color: rgba(var(--c-black), 1);
  --button-hover-background-color: rgba(var(--c-grey-ultradark), 1);
  font-size: 14px;
  line-height: 1.2;
  display: inline-flex;
  gap: var(--spacing-12, 12px);
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* Variants */
  /* Sizes */
  /* Widths */
}
.Button::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.Button::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.Button:hover::before {
    border-color: var(--button-hover-border-color);
}
.Button:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.Button:focus::before {
    border-color: var(--button-hover-border-color);
}
.Button:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
@media (min-width: 750px) {
.Button {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Button {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Button {
    line-height: 1.2;
}
}
.Button:disabled {
  --button-color: rgba(var(--c-grey), 1) !important;
  --button-background-color: rgba(var(--c-grey-light), 1) !important;
  --button-border-color: transparent !important;
}
.Button[data-variant=hero] {
  --button-color: rgba(var(--c-black), 1);
  --button-background-color: rgba(var(--c-yellow), 1);
  --button-hover-background-color: rgba(var(--c-yellow-light), 1);
}
.Button[data-variant=primary] {
  --button-color: rgba(var(--c-white), 1);
  --button-background-color: rgba(var(--c-black), 1);
  --button-hover-background-color: rgba(var(--c-grey-ultradark), 1);
}
.Button[data-variant=secondary] {
  --button-color: rgba(var(--c-black), 1);
  --button-background-color: rgba(var(--c-white), 1);
  --button-border-color: rgba(var(--c-border));
  --button-hover-border-color: rgba(var(--c-black), 1);
}
.Button[data-variant=secondary]::after {
  display: none;
}
.Button[data-variant=white] {
  --button-color: rgba(var(--c-black), 1);
  --button-border-color: transparent;
  --button-background-color: rgba(var(--c-white), 1);
  --button-hover-background-color: rgba(var(--c-grey-light), 1);
}
.Button[data-variant=white-themed] {
  --button-color: rgba(var(--c-black), 1);
  --button-border-color: transparent;
  --button-background-color: rgba(var(--c-white), 1);
  --button-hover-background-color: var(--theme-background-light);
}
.Button[data-variant=grey] {
  --button-color: rgba(var(--c-black), 1);
  --button-border-color: transparent;
  --button-background-color: rgba(var(--c-grey-light), 1);
  --button-hover-background-color: rgba(var(--c-grey-medium), 1);
}
.Button[data-size=tiny] {
  font-size: 12px;
  line-height: 1.4;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.Button[data-size=tiny] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Button[data-size=tiny] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Button[data-size=tiny] {
    line-height: 1.4;
}
}
.Button[data-size=small] {
  font-size: 12px;
  line-height: 1.4;
  padding: var(--spacing-10, 10px) var(--spacing-20, 20px);
}
@media (min-width: 750px) {
.Button[data-size=small] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Button[data-size=small] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Button[data-size=small] {
    line-height: 1.4;
}
}
.Button[data-size=medium] {
  font-size: 12px;
  line-height: 1.4;
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.Button[data-size=medium] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Button[data-size=medium] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Button[data-size=medium] {
    line-height: 1.4;
}
}
.Button[data-size=default] {
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
}
.Button[data-width=inline] {
  width: auto;
}
.Button[data-width=wide] {
  min-width: 180px;
  max-width: 100%;
}
.Button[data-width=fullwidth] {
  width: 100%;
}
.Button[data-width=round] {
  padding-left: 0;
  padding-right: 0;
}
.Button[data-width=round][data-size=small] {
  height: 37px;
  width: 37px;
}
.Button[data-width=round][data-size=medium] {
  width: 40px;
  height: 40px;
}
.Button[data-width=round][data-size=default] {
  width: 48px;
  height: 48px;
}
.Button > [data-icon] {
  position: relative;
  z-index: 1;
}
.Button--label {
  position: relative;
  z-index: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.HStack[data-v-73dc72d5] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Card {
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  padding: var(--spacing-20, 20px) var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.Card {
    padding: var(--spacing-32, 32px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.IconListItem {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
}
.IconListItem--icon {
  flex: 0 0 24px;
}
.IconListItem--content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
}
.IconListItem--title {
  font-weight: 400;
}
.IconListItem--text > *:first-child {
  margin-top: 0;
}
.IconListItem--text > *:last-child {
  margin-bottom: 0;
}
.IconListItem--text > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.IconListItem--text > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.IconListItem--text .Button + .Button {
  margin-left: 16px;
}
.IconListItem--text p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.IconListItem--text a:not([class]),
.IconListItem--text a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.IconListItem--text a:not([class]):hover,
  .IconListItem--text a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.IconListItem--text a:not([class]):focus,
  .IconListItem--text a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.IconListItem--text small {
  display: inline-block;
  font-size: 0.75em;
}
.IconListItem--text strong,
.IconListItem--text b {
  font-weight: bold;
}
.IconListItem--text em,
.IconListItem--text i {
  font-style: italic;
}
.IconListItem--text > *:first-child {
  margin-top: 0;
}
.IconListItem--text > *:last-child {
  margin-bottom: 0;
}
.IconListItem--textLink {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.IconListItem--textLink:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.IconListItem--textLink:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.IconListItem--textLink > .html > *:first-child {
  margin-top: 0;
}
.IconListItem--textLink > .html > *:last-child {
  margin-bottom: 0;
}
.IconListItem--action {
  flex: 0 0 auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.IconList {
  display: flex;
  flex-flow: column nowrap;
  row-gap: 24px;
}
.IconList[data-flow=horizontal] {
  flex-flow: row;
  gap: var(--spacing-8, 8px);
}
.IconList[data-flow=horizontal] > * {
  flex: 1;
  width: 100%;
}
@media screen and (max-width: 750px) {
.IconList[data-flow=horizontal] {
    flex-flow: column nowrap;
}
}
.IconList .IconListItem--text {
  color: rgba(var(--c-grey), 1);
}
.IconList[data-size=default] {
  font-size: 14px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.IconList[data-size=default] {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.IconList[data-size=default] {
    font-size: 16px;
}
}
.IconList[data-size=small] {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.IconList[data-size=small] {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.IconList[data-size=small] {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.IconList[data-size=small] {
    line-height: 1.2;
}
}
.IconList[data-size=xsmall] {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.IconList[data-size=xsmall] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.IconList[data-size=xsmall] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.IconList[data-size=xsmall] {
    line-height: 1.4;
}
}
.IconList[data-size=xsmall] .IconListItem--text {
  color: rgba(var(--c-black), 1);
}
.IconList[data-size=xsmall] .IconListItem--title {
  font-weight: bold;
}
.IconList[data-size=xsmall] .IconListItem {
  gap: var(--spacing-8, 8px);
}
.IconList[data-info=compact] .IconListItem--text {
  display: none;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Fab {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  display: inline-flex;
  padding: var(--spacing-16, 16px);
  /* Variants */
  /* &[data-variant="primary"] {
  	@include button-variant-primary;
  }

  &[data-variant="secondary"] {
  	@include button-variant-secondary;
  }

  &[data-variant="white"] {
  	@include button-variant-white;
  }

  &[data-variant="grey"] {
  	@include button-variant-grey;
  } */
}
.Fab::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.Fab::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.Fab:hover::before {
    border-color: var(--button-hover-border-color);
}
.Fab:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.Fab:focus::before {
    border-color: var(--button-hover-border-color);
}
.Fab:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
.Fab[data-variant=hero] {
  --button-color: rgba(var(--c-black), 1);
  --button-background-color: rgba(var(--c-yellow), 1);
  --button-hover-background-color: rgba(var(--c-yellow-light), 1);
}
.Fab > [data-icon] {
  position: relative;
  z-index: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Example[data-v-37741118] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  margin: 48px;
  text-align: center;
}
.Example--name[data-v-37741118] {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 16px;
  text-transform: capitalize;
}
@media (min-width: 750px) {
.Example--name[data-v-37741118] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Example--name[data-v-37741118] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Example--name[data-v-37741118] {
    line-height: 1.4;
}
}
.VariantTitle[data-v-37741118] {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  margin-top: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.VariantTitle[data-v-37741118] {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.VariantTitle[data-v-37741118] {
    font-size: 16px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.IconLink {
  display: inline-flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  color: rgba(var(--c-signal-blue), 1);
}
.IconLink--label {
  display: block;
  margin-top: 0.1em;
}
[data-icon].IconLink--icon {
  --c-icon-path: currentColor;
  flex: 0 0 auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.HStack[data-v-32ce8804] {
  display: flex;
  flex-direction: row;
  gap: 1em;
}
.HStack[data-gap=none][data-v-32ce8804] {
  gap: 0;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PillButton {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
  --button-color: rgba(var(--c-white), 1);
  --button-background-color: rgba(var(--c-black), 1);
  --button-hover-background-color: rgba(var(--c-grey-ultradark), 1);
  font-size: 14px;
  line-height: 1.2;
  display: inline-flex;
  gap: var(--spacing-12, 12px);
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  padding: var(--spacing-10, 10px) var(--spacing-20, 20px);
  position: relative;
  display: inline-flex;
  gap: var(--spacing-8, 8px);
  --button-color: rgba(var(--c-black), 1);
  --button-background-color: rgba(var(--c-grey-light), 1);
  --button-border-color: transparent;
  --button-hover-background-color: rgba(var(--c-white), 1);
  --button-hover-border-color: rgba(var(--c-black), 1);
}
.PillButton::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.PillButton::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.PillButton:hover::before {
    border-color: var(--button-hover-border-color);
}
.PillButton:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.PillButton:focus::before {
    border-color: var(--button-hover-border-color);
}
.PillButton:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
@media (min-width: 750px) {
.PillButton {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PillButton {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PillButton {
    line-height: 1.2;
}
}
.PillButton:disabled {
  --button-color: rgba(var(--c-grey), 1) !important;
  --button-background-color: rgba(var(--c-grey-light), 1) !important;
  --button-border-color: transparent !important;
}
@media (min-width: 750px) {
.PillButton {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.PillButton {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.PillButton {
    line-height: 1.4;
}
}
.PillButton--values {
  font-size: 12px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--spacing-4, 4px);
  white-space: nowrap;
}
@media (min-width: 750px) {
.PillButton--values {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.PillButton--values {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.PillButton--values {
    line-height: 1.4;
}
}
@media screen and (max-width: 580px) {
.PillButton--values {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
}
.PillButton--clear {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease-in-out;
}
.PillButton:hover .PillButton--clear {
  transform: rotate(90deg);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Popup {
  width: 300px;
  max-width: 100vw;
  overflow: auto;
  background: rgba(var(--c-white), 1);
  border-radius: var(--border-radius-default);
  box-shadow: var(--shadow-popup);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Richtext > *:first-child {
  margin-top: 0;
}
.Richtext > *:last-child {
  margin-bottom: 0;
}
.Richtext > *:first-child {
  margin-top: 0;
}
.Richtext > *:last-child {
  margin-bottom: 0;
}
.Richtext > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.Richtext > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.Richtext pre {
  margin: 1em 0;
}
.Richtext table {
  width: 100%;
  table-layout: auto;
  border: none;
}
.Richtext table tr {
  border: none;
  border-bottom: 1px solid rgba(var(--c-border));
}
.Richtext table tr:first-child {
  border-top: 1px solid rgba(var(--c-border));
}
.Richtext table th {
  font-weight: bold;
}
.Richtext table td,
.Richtext table th {
  padding: 1.2em 0.6em;
  vertical-align: top;
  border: none;
}
.Richtext table td:first-child,
.Richtext table th:first-child {
  padding-left: 0;
}
.Richtext table td:last-child,
.Richtext table th:last-child {
  padding-right: 0;
}
.Richtext code {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.Richtext pre code,
.Richtext pre pre,
.Richtext code pre {
  background: transparent;
}
.Richtext h1:not([class]) {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin-top: 1.75em;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.Richtext h1:not([class]) {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.Richtext h1:not([class]) {
    font-size: 34px;
}
}
.Richtext h2:not([class]) {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.Richtext h2:not([class]) {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.Richtext h2:not([class]) {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.Richtext h2:not([class]) {
    line-height: 1.2;
}
}
.Richtext h3:not([class]) {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.Richtext h3:not([class]) {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.Richtext h3:not([class]) {
    font-size: 22px;
}
}
.Richtext h4:not([class]),
.Richtext h5:not([class]),
.Richtext h6:not([class]) {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
  text-transform: none;
}
@media (min-width: 750px) {
.Richtext h4:not([class]),
  .Richtext h5:not([class]),
  .Richtext h6:not([class]) {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Richtext h4:not([class]),
  .Richtext h5:not([class]),
  .Richtext h6:not([class]) {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Richtext h4:not([class]),
  .Richtext h5:not([class]),
  .Richtext h6:not([class]) {
    line-height: 1.2;
}
}
.Richtext ul:not([class]),
.Richtext ol:not([class]) {
  margin-top: 1em;
  margin-bottom: 1em;
}
.Richtext ul:not([class]) {
  display: block;
}
.Richtext ul:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.Richtext ul:not([class]) > li:last-child {
  margin-bottom: 0;
}
.Richtext ul:not([class]) > li > *:first-child {
  margin-top: 0;
}
.Richtext ul:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.Richtext ul:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.Richtext ul:not([class]) > li {
    padding-left: 25px;
}
}
.Richtext ul:not([class]) > li::before {
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  color: rgba(var(--c-black), 1);
  background-color: currentcolor;
  border-radius: 100%;
}
.Richtext ol:not([class]) {
  display: block;
  counter-reset: ol--counter;
}
.Richtext ol:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.Richtext ol:not([class]) > li:last-child {
  margin-bottom: 0;
}
.Richtext ol:not([class]) > li > *:first-child {
  margin-top: 0;
}
.Richtext ol:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.Richtext ol:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.Richtext ol:not([class]) > li {
    padding-left: 25px;
}
}
.Richtext ol:not([class]) > li::before {
  left: 0;
  width: 4ex;
  text-align: left;
  content: counter(ol--counter) ".";
  counter-increment: ol--counter;
}
.Richtext hr {
  margin-top: 1em;
  margin-bottom: 1em;
  border: 0;
  border-top: 1px solid rgba(var(--c-black), 1);
}
.Richtext .Button + .Button {
  margin-left: 16px;
}
.Richtext p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.Richtext a:not([class]),
.Richtext a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.Richtext a:not([class]):hover,
  .Richtext a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.Richtext a:not([class]):focus,
  .Richtext a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.Richtext small {
  display: inline-block;
  font-size: 0.75em;
}
.Richtext strong,
.Richtext b {
  font-weight: bold;
}
.Richtext em,
.Richtext i {
  font-style: italic;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-pill);
  /* Sizes */
}
.Tag[data-color=green-grey] {
  background-color: rgba(var(--c-green-grey), 1);
}
.Tag[data-color=signal-green-light] {
  background-color: rgba(var(--c-signal-green-light), 1);
}
.Tag[data-color=signal-red] {
  color: rgba(var(--c-white), 1);
  background-color: rgba(var(--c-signal-red), 1);
}
.Tag[data-color=yellow-ultra-light] {
  color: rgba(var(--c-black), 1);
  background-color: rgba(var(--c-yellow-ultra-light), 1);
}
.Tag[data-size=tiny] {
  padding: var(--spacing-5, 5px) var(--spacing-12, 12px);
}
.Tag--icon {
  margin-right: var(--spacing-4, 4px);
}
.Tag--text {
  font-size: 10px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Tag--text {
    font-size: 10px;
}
}
@media (min-width: 1280px) {
.Tag--text {
    font-size: 10px;
}
}
@media screen and (max-width: 750px) {
.Tag--text {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TagList {
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-8, 8px) var(--spacing-6, 6px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.BasketNav {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.BasketNav {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.BasketNav {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.BasketNav {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.BasketNav {
    margin-bottom: 64px;
}
}
.BasketNav--navScroll {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--spacing-24, 24px);
  padding-bottom: var(--spacing-8, 8px);
  overflow-x: scroll;
}
@media screen and (min-width: 580px) {
.BasketNav--navScroll {
    justify-content: center;
}
}
@media screen and (min-width: 1000px) {
.BasketNav--navScroll {
    margin-bottom: var(--spacing-56, 56px);
    overflow-x: auto;
}
}
.BasketNav--navigation {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--spacing-32, 32px);
}
.BasketNav--navigationLink {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  flex: 1 0 auto;
  padding-bottom: var(--spacing-6, 6px);
  color: rgba(var(--c-grey), 1);
  border-bottom: 2px solid transparent;
  transition: border-bottom-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
@media (min-width: 750px) {
.BasketNav--navigationLink {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.BasketNav--navigationLink {
    font-size: 22px;
}
}
.BasketNav--navigationLink.isActive, .BasketNav--navigationLink:hover {
  color: rgba(var(--c-black), 1);
  border-bottom-color: rgba(var(--c-black), 1);
}
@media screen and (min-width: 1000px) {
.BasketNav--navigationLink {
    flex: 0 1 auto;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemDetails {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-6, 6px);
}
@media (min-width: 750px) {
.ProductItemDetails {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductItemDetails {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductItemDetails {
    line-height: 1.4;
}
}
.ProductItemDetails--brand {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.ProductItemDetails--brand {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductItemDetails--brand {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductItemDetails--brand {
    line-height: 1.2;
}
}
.ProductItemDetails--name {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ProductItemDetails--name {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductItemDetails--name {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductItemDetails--name {
    line-height: 1.2;
}
}
.ProductItemDetails--sku,
.ProductItemDetails--attributes {
  color: rgba(var(--c-grey), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FavouriteToggle {
  position: relative;
}
@media (hover: hover) {
.FavouriteToggle:hover .FavouriteToggle--fab {
    border-color: rgba(var(--c-black), 1);
}
.FavouriteToggle:focus .FavouriteToggle--fab {
    border-color: rgba(var(--c-black), 1);
}
}
.FavouriteToggle--input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.FavouriteToggle--fab {
  display: inline-flex;
  padding: var(--spacing-12, 12px);
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
}
[data-variant=fab] .FavouriteToggle--fab {
  padding: 0.5em;
  font-size: 24px;
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-circle);
}
@media screen and (min-width: 1000px) {
[data-variant=iconMobile] .FavouriteToggle--fab {
    gap: var(--spacing-8, 8px);
    align-items: flex-start;
    padding: var(--spacing-10, 10px) var(--spacing-16, 16px);
    border: 1px solid rgba(var(--c-border));
    border-radius: 100px;
}
[data-variant=iconMobile] .FavouriteToggle--fab [data-icon] {
    font-size: 16px;
}
}
.FavouriteToggle--fab svg {
  --c-icon-path: rgba(var(--c-black), 1);
  --c-icon-fill: transparent;
}
.FavouriteToggle--fab svg path {
  transition: fill 0.2s ease-in-out;
}
.FavouriteToggle--input:checked + .FavouriteToggle--fab {
  border-color: rgba(var(--c-black), 1);
}
.FavouriteToggle--input:checked + .FavouriteToggle--fab svg {
  --c-icon-fill: rgba(var(--c-black), 1);
}
.FavouriteToggle--label {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.FavouriteToggle--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.FavouriteToggle--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.FavouriteToggle--label {
    line-height: 1.4;
}
}
@media screen and (max-width: 1000px) {
[data-variant=iconMobile] .FavouriteToggle--label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductPrice {
  display: flex;
  align-items: center;
  -moz-column-gap: var(--spacing-4, 4px);
       column-gap: var(--spacing-4, 4px);
}
.ProductPrice[data-size=small] {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ProductPrice[data-size=small] {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductPrice[data-size=small] {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductPrice[data-size=small] {
    line-height: 1.2;
}
}
.ProductPrice[data-size=xsmall] {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ProductPrice[data-size=xsmall] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductPrice[data-size=xsmall] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductPrice[data-size=xsmall] {
    line-height: 1.4;
}
}
@media screen and (max-width: 320px) {
.ProductPrice {
    flex-direction: column;
    align-items: flex-start;
}
}
.ProductPrice[data-size=xsmall] .ProductPrice--current, .ProductPrice[data-total=true] .ProductPrice--current {
  font-weight: 700;
}
.ProductPrice--discount {
  flex: 0 1 auto;
  color: rgba(var(--c-signal-red), 1);
}
.ProductPrice[data-total=true] .ProductPrice--discount {
  font-weight: 700;
}
.ProductPrice--oldPrice {
  flex: 0 1 auto;
  color: rgba(var(--c-grey), 1);
  text-decoration: line-through;
}
.ProductPrice[data-size=small] .ProductPrice--oldPrice {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ProductPrice[data-size=small] .ProductPrice--oldPrice {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductPrice[data-size=small] .ProductPrice--oldPrice {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductPrice[data-size=small] .ProductPrice--oldPrice {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.QuantityToggle {
  display: inline-flex;
  align-items: center;
}
.QuantityToggle--input {
  font-size: 12px;
  line-height: 1.4;
  width: 30px;
  margin: 0 var(--spacing-6, 6px);
  text-align: center;
  background-color: transparent;
  border: none;
}
@media (min-width: 750px) {
.QuantityToggle--input {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.QuantityToggle--input {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.QuantityToggle--input {
    line-height: 1.4;
}
}
.QuantityToggle--decrementButton,
.QuantityToggle--incrementButton {
  display: inline-flex;
  padding: var(--spacing-6, 6px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-circle);
}
.QuantityToggle--decrementButton:disabled,
.QuantityToggle--incrementButton:disabled {
  color: rgba(var(--c-border));
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemRemove {
  font-size: 12px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  color: rgba(var(--c-signal-red), 1);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.ProductItemRemove {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductItemRemove {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductItemRemove {
    line-height: 1.4;
}
}
.ProductItemRemove:hover {
  border-color: rgba(var(--c-signal-red), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.InfoMessage[data-v-03b9d2c4] {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  gap: var(--spacing-8, 8px);
  padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
  color: rgba(var(--c-grey-dark), 1);
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: var(--spacing-4, 4px);
}
@media (min-width: 750px) {
.InfoMessage[data-v-03b9d2c4] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.InfoMessage[data-v-03b9d2c4] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.InfoMessage[data-v-03b9d2c4] {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemNotifications {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 4px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemImage {
  width: clamp(72px, 20%, 140px);
}
.ProductItemImage[data-image-variant=small] {
  width: clamp(48px, 20%, 72px);
}
.ProductItemImage[data-image-variant=boxed] {
  width: clamp(84px, 20%, 108px);
}
.ProductItemImage--inner {
  aspect-ratio: 1;
}
.ProductItemImage[data-image-variant=boxed] .ProductItemImage--inner {
  padding: clamp(14px, 15%, 20px);
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-small);
}
.ProductItemImage--image > img {
  mix-blend-mode: multiply;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItem {
  position: relative;
  padding: var(--spacing-24, 24px) 0;
  border-bottom: 1px solid rgba(var(--c-border));
}
.ProductItem:first-child {
  border-top: 1px solid rgba(var(--c-border));
}
.ProductItem--inner {
  display: flex;
  gap: var(--spacing-24, 24px);
  justify-content: space-between;
}
.ProductItem--image {
  flex: 0 0 auto;
}
.ProductItem--badge {
  position: absolute;
  top: var(--spacing-12, 12px);
  left: 0;
  z-index: 1;
  display: flex;
  gap: var(--spacing-8, 8px);
  pointer-events: none;
}
.ProductItem--main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-12, 12px);
  justify-content: space-between;
}
.ProductItem--footer > * {
  margin-top: var(--spacing-16, 16px);
}
.ProductItem--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemCart--product {
  position: relative;
}
@media screen and (max-width: 750px) {
.ProductItemCart--product {
    padding-right: var(--spacing-32, 32px);
}
}
@media screen and (min-width: 750px) {
.ProductItemCart--product {
    display: flex;
    gap: var(--spacing-24, 24px);
    align-items: flex-start;
    justify-content: space-between;
}
}
.ProductItemCart--favouriteToggle {
  position: absolute;
  top: var(--spacing--12, -12px);
  right: var(--spacing--12, -12px);
  z-index: 2;
}
@media screen and (min-width: 1000px) {
.ProductItemCart--favouriteToggle {
    right: 0;
}
}
@media screen and (min-width: 1000px) {
.ProductItemCart--footer {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-24, 24px);
    align-items: center;
    justify-content: space-between;
}
}
.ProductItemCart--quantity {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1000px) {
.ProductItemCart--quantity {
    flex-direction: row-reverse;
    gap: var(--spacing-24, 24px);
}
}
.ProductItemCart--quantityToggle {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 580px) {
.ProductItemCart--price {
    flex-wrap: wrap;
}
}
@media screen and (max-width: 750px) {
.ProductItemCart--notifications.desktop {
    display: none;
}
}
@media screen and (min-width: 750px) {
.ProductItemCart--notifications.mobile {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductList[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ProductList[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ProductList[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ProductList[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ProductList[data-compose=white] {
    margin-bottom: 64px;
}
}
@media screen and (min-width: 750px) {
.ProductList[data-with-layout=true] {
    max-width: 860px;
    max-width: calc(860px + var(--site-padding) * 2);
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    margin-right: auto;
    margin-left: auto;
}
}
.ProductList--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ProductList--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.ProductList--title {
    font-size: 22px;
}
}
* + .ProductList--list {
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SectionTitle {
  text-align: center;
}
.SectionTitle[data-layout=content-wide] {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.SectionTitle[data-layout=content-medium] {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.SectionTitle[data-layout=content-narrow] {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.SectionTitle--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.SectionTitle--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.SectionTitle--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.SectionTitle--title {
    line-height: 1.2;
}
}
.SectionTitle[data-font-size=xxl] .SectionTitle--title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.SectionTitle[data-font-size=xxl] .SectionTitle--title {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.SectionTitle[data-font-size=xxl] .SectionTitle--title {
    font-size: 50px;
}
}
.SectionTitle[data-font-size=xl] .SectionTitle--title {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.SectionTitle[data-font-size=xl] .SectionTitle--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.SectionTitle[data-font-size=xl] .SectionTitle--title {
    font-size: 34px;
}
}
.SectionTitle[data-font-size=m] .SectionTitle--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.SectionTitle[data-font-size=m] .SectionTitle--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.SectionTitle[data-font-size=m] .SectionTitle--title {
    font-size: 22px;
}
}
.SectionTitle[data-font-size=s] .SectionTitle--title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.SectionTitle[data-font-size=s] .SectionTitle--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.SectionTitle[data-font-size=s] .SectionTitle--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.SectionTitle[data-font-size=s] .SectionTitle--title {
    line-height: 1.2;
}
}
.SectionTitle[data-align=left] .SectionTitle--title {
  text-align: left;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ScrollSliderItem {
  display: block;
  flex: 0 0 auto;
}
.ScrollSlider[data-snap=left] .ScrollSliderItem {
  scroll-snap-align: start;
}
.ScrollSlider[data-snap=center] .ScrollSliderItem {
  scroll-snap-align: center;
}
.ScrollSlider[data-snap=right] .ScrollSliderItem {
  scroll-snap-align: end;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ScrollSliderArrow {
  cursor: pointer;
  margin-left: -24px;
  margin-top: -24px;
}
.ScrollSliderArrow [data-icon] {
  transition: transform 0.2s ease-in-out;
}
.ScrollSliderArrow:hover [data-icon] {
  transform: scale(1.1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ScrollSliderBar {
  --scroll-slider-progress: 0;
  --scroll-slider-size: 0;
}
.ScrollSliderBar[data-has-hscroll=false] {
  visibility: hidden;
}
.ScrollSliderBar--inner {
  position: relative;
  width: 100%;
  height: 1px;
  margin-right: auto;
  margin-left: auto;
  background-color: rgba(var(--c-border-transparent));
}
@media screen and (min-width: 580px) {
.ScrollSliderBar[data-bar-width=default] .ScrollSliderBar--inner {
    width: 50%;
    max-width: 628px;
}
}
.ScrollSliderBar--bar {
  width: calc(var(--scroll-slider-size) * 100%);
  height: 100%;
  margin-left: calc(var(--scroll-slider-progress) * (1 - var(--scroll-slider-size)) * 100%);
  background-color: rgba(var(--c-black), 1);
  transition: margin-left 0.1s ease-out;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ScrollSlider[data-align=center] {
  text-align: center;
}
.ScrollSlider[data-align=center] > * {
  text-align: start;
}
.ScrollSlider[data-is-scrolling=true] .ScrollSliderItem > * {
  pointer-events: none;
}
.ScrollSlider--inner {
  position: relative;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  text-align: left;
  vertical-align: middle;
}
.ScrollSlider[data-align=center] .ScrollSlider--inner {
  width: auto;
}
.ScrollSlider--overflow {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  width: inherit;
  max-width: inherit;
}
.ScrollSlider--track {
  display: flex;
  gap: var(--scrollslider-gap);
  min-width: 100%;
  padding-top: 1px;
  padding-bottom: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.ScrollSlider--track::-webkit-scrollbar {
  display: none;
}
.ScrollSlider[data-snap] .ScrollSlider--track {
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.ScrollSlider[data-snap-type=proximity] .ScrollSlider--track {
  scroll-snap-type: x proximity;
}
.ScrollSlider[data-layout=content-wide] .ScrollSlider--track {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}
@media screen and (min-width: 1600px) {
.ScrollSlider[data-layout=content-wide] .ScrollSlider--track {
    padding-right: calc((100vw - 1440px) / 2);
    padding-left: calc((100vw - 1440px) / 2);
    padding-right: calc((100cqw - 1440px) / 2);
    padding-left: calc((100cqw - 1440px) / 2);
}
}
.ScrollSlider[data-layout=content-wide][data-snap] .ScrollSlider--track {
  scroll-padding: var(--site-padding);
}
@media screen and (min-width: 1600px) {
.ScrollSlider[data-layout=content-wide][data-snap] .ScrollSlider--track {
    scroll-padding: calc((100vw - 1440px) / 2);
    scroll-padding: calc((100cqw - 1440px) / 2);
}
}
.ScrollSlider--prev,
.ScrollSlider--next {
  position: absolute;
  top: 50%;
}
@media screen and (max-width: 750px) {
.ScrollSlider--prev,
  .ScrollSlider--next {
    display: none;
}
}
.ScrollSlider--prev {
  left: 0;
}
.ScrollSlider[data-layout=content-wide] .ScrollSlider--prev {
  left: var(--site-padding);
}
@media screen and (min-width: 1600px) {
.ScrollSlider[data-layout=content-wide] .ScrollSlider--prev {
    left: calc((100vw - 1440px) / 2);
    left: calc((100cqw - 1440px) / 2);
}
}
.ScrollSlider--next {
  left: 100%;
}
.ScrollSlider[data-layout=content-wide] .ScrollSlider--next {
  right: var(--site-padding);
}
@media screen and (min-width: 1600px) {
.ScrollSlider[data-layout=content-wide] .ScrollSlider--next {
    right: calc((100vw - 1440px) / 2);
    right: calc((100cqw - 1440px) / 2);
}
}
.ScrollSlider--bar {
  margin-top: var(--scrollsliderbar-gap);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
.slider-arrow-fade-enter-active {
  transition: opacity 0.1s, visibility 0.15s, transform 0.15s;
}
.slider-arrow-fade-leave-active {
  transition: opacity 0.1s 0.05s, visibility 0.15s, transform 0.15s;
}
.slider-arrow-fade-enter-from,
.slider-arrow-fade-leave-to {
  transform: scale(0.9);
  visibility: hidden;
  opacity: 0;
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.EmptyList {
  max-width: 628px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.EmptyList > *:first-child {
  margin-top: 0;
}
.EmptyList > *:last-child {
  margin-bottom: 0;
}
.EmptyList--icon {
  margin-bottom: var(--spacing-24, 24px);
}
.EmptyList--content {
  margin-bottom: var(--spacing-40, 40px);
}
.EmptyList--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.EmptyList--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.EmptyList--title {
    font-size: 22px;
}
}
.EmptyList--description {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.EmptyList--description {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.EmptyList--description {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.EmptyList--description {
    line-height: 1.2;
}
}
.EmptyList--actionBar {
  display: flex;
  gap: var(--spacing-16, 16px);
  justify-content: center;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.RecommendationTeaser {
  font-size: 14px;
  line-height: 1.2;
  padding: var(--spacing-16, 16px);
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius-default);
  border: 1px solid rgba(var(--c-border));
}
@media (min-width: 750px) {
.RecommendationTeaser {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.RecommendationTeaser {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.RecommendationTeaser {
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) {
.RecommendationTeaser {
    padding: var(--spacing-24, 24px);
}
}
.RecommendationTeaser--link {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}
.RecommendationTeaser--actions {
  display: inline-flex;
  gap: 8px;
}
.RecommendationTeaser--image {
  background-color: rgba(var(--c-grey-light), 1);
  padding: 10px;
  width: 70px;
  height: 70px;
  border-radius: var(--border-radius-medium);
}
.RecommendationTeaser--image img {
  mix-blend-mode: multiply;
}
.RecommendationTeaser--title {
  margin-bottom: 0.55em;
}
.RecommendationTeaser--title > .brand {
  font-weight: bold;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.RecommendationSlider {
  margin-top: 32px;
  margin-bottom: 32px;
  max-width: 100%;
}
@media screen and (min-width: 750px) {
.RecommendationSlider {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.RecommendationSlider {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.RecommendationSlider {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.RecommendationSlider {
    margin-bottom: 64px;
}
}
.RecommendationSlider:not([data-inline=true]) {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.RecommendationSlider--item {
  width: calc((100% - var(--scrollslider-gap) * (1.1 - 1)) / 1.1);
}
@media screen and (min-width: 580px) {
.RecommendationSlider--item {
    width: calc((100% - var(--scrollslider-gap) * (1.5 - 1)) / 1.5);
}
}
@media screen and (min-width: 750px) {
.RecommendationSlider--item {
    width: calc((100% - var(--scrollslider-gap) * (2 - 1)) / 2);
}
}
.RecommendationSlider--title {
  padding-left: var(--spacing-24, 24px);
  padding-right: var(--spacing-24, 24px);
}
@media screen and (min-width: 750px) {
.RecommendationSlider--title {
    padding-left: var(--spacing-48, 48px);
    padding-right: var(--spacing-48, 48px);
}
}
.RecommendationSlider--inner {
  background-color: rgba(var(--c-green-light), 1);
  border-radius: var(--border-radius-default);
  padding-top: var(--spacing-32, 32px);
  padding-bottom: var(--spacing-32, 32px);
}
@media screen and (min-width: 750px) {
.RecommendationSlider--inner {
    padding-top: var(--spacing-56, 56px);
    padding-bottom: var(--spacing-56, 56px);
}
}
[data-inline=true] .RecommendationSlider--inner {
  padding-left: 20px;
  padding-right: 20px;
}
.RecommendationSlider--inner .RecommendationSlider:not([data-inline=true]) .ScrollSlider--track > *:first-child {
  margin-left: var(--spacing-24, 24px);
}
@media screen and (min-width: 750px) {
.RecommendationSlider--inner .RecommendationSlider:not([data-inline=true]) .ScrollSlider--track > *:first-child {
    margin-left: var(--spacing-48, 48px);
}
}
.RecommendationSlider--inner .RecommendationSlider:not([data-inline=true]) .ScrollSlider--track > *:last-child {
  margin-right: var(--spacing-24, 24px);
}
@media screen and (min-width: 750px) {
.RecommendationSlider--inner .RecommendationSlider:not([data-inline=true]) .ScrollSlider--track > *:last-child {
    margin-right: var(--spacing-48, 48px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ShoppingCart {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: stretch;
  margin-right: auto;
  margin-left: auto;
  max-width: 100%;
}
@media screen and (min-width: 1000px) {
.ShoppingCart {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
}
.ShoppingCart--main {
  flex: 1;
  min-width: 0;
}
.ShoppingCart--sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8, 8px);
}
@media screen and (min-width: 1000px) {
.ShoppingCart--sidebar {
    flex: 0 1 30%;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ShoppingCartSummary {
  margin-bottom: var(--spacing-40, 40px);
}
.ShoppingCartSummary[data-variant=checkoutOverview] {
  padding-top: var(--spacing-40, 40px);
}
@media screen and (min-width: 1000px) {
.ShoppingCartSummary[data-variant=shoppingCart] {
    padding: var(--spacing-48, 48px) var(--spacing-32, 32px);
    border: 1px solid rgba(var(--c-border));
    border-radius: var(--border-radius-default);
}
}
.ShoppingCartSummary[data-variant=orderDetail] {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ShoppingCartSummary--priceTable {
  width: 100%;
}
.ShoppingCartSummary--priceTable tr[data-discount=true] .Price {
  color: rgba(var(--c-signal-green), 1);
}
@media screen and (min-width: 1000px) {
.ShoppingCartSummary--priceTable tr:not(:first-of-type) .ShoppingCartSummary--tableCell {
    padding-top: var(--spacing-24, 24px);
}
}
.ShoppingCartSummary--priceTable tr:last-of-type .ShoppingCartSummary--tableCell {
  padding-bottom: var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.ShoppingCartSummary--priceTable tr:last-of-type .ShoppingCartSummary--tableCell {
    padding-bottom: var(--spacing-16, 16px);
}
}
.ShoppingCartSummary--tableCell:not(:last-child) {
  padding-right: var(--spacing-8, 8px);
}
.ShoppingCartSummary--tableCell:last-of-type {
  text-align: right;
}
.ShoppingCartSummary--tableBody .ShoppingCartSummary--tableCell {
  font-size: 14px;
  line-height: 1.2;
  padding-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.ShoppingCartSummary--tableBody .ShoppingCartSummary--tableCell {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ShoppingCartSummary--tableBody .ShoppingCartSummary--tableCell {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ShoppingCartSummary--tableBody .ShoppingCartSummary--tableCell {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.ShoppingCartSummary--tableBody .ShoppingCartSummary--tableCell {
    border-bottom: 1px solid rgba(var(--c-border));
}
}
.ShoppingCartSummary--tableFooter {
  vertical-align: top;
}
.ShoppingCartSummary--tableFooter .ShoppingCartSummary--tableCell {
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 750px) {
.ShoppingCartSummary--tableFooter .ShoppingCartSummary--tableCell {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.ShoppingCartSummary--tableFooter .ShoppingCartSummary--tableCell {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.ShoppingCartSummary--tableFooter .ShoppingCartSummary--tableCell {
    line-height: 1.5;
}
}
@media screen and (min-width: 1000px) {
.ShoppingCartSummary--tableFooter .ShoppingCartSummary--tableCell {
    padding-top: var(--spacing-24, 24px);
}
}
@media screen and (min-width: 1000px) {
[data-variant=checkoutOverview] .ShoppingCartSummary--tableFooter .ShoppingCartSummary--tableCell {
    border-bottom: 1px solid rgba(var(--c-border));
}
}
.ShoppingCartSummary--totalCostLabel,
.ShoppingCartSummary--taxLabel {
  display: block;
}

/* .ShoppingCartSummary--totalCostLabel {
} */
.ShoppingCartSummary--taxLabel {
  font-size: 14px;
  line-height: 1.2;
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.ShoppingCartSummary--taxLabel {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ShoppingCartSummary--taxLabel {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ShoppingCartSummary--taxLabel {
    line-height: 1.2;
}
}
.ShoppingCartSummary--actionBar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16, 16px);
  margin-top: var(--spacing-32, 32px);
}
@media screen and (min-width: 1000px) {
.ShoppingCartSummary--actionBar {
    flex-direction: row;
    gap: var(--spacing-8, 8px);
    margin-top: var(--spacing-40, 40px);
}
}
.ShoppingCartSummary--continueShoppingButton,
.ShoppingCartSummary--checkoutButton {
  flex: 1 0 auto;
}
@media screen and (min-width: 1000px) {
.ShoppingCartSummary--continueShoppingButton,
  .ShoppingCartSummary--checkoutButton {
    flex-basis: calc(50% - 4px);
}
}
.ShoppingCartSummary--giftCertificateInformation {
  margin-top: var(--spacing-40, 40px);
}
@media screen and (min-width: 1000px) {
.ShoppingCartSummary--giftCertificateInformation {
    margin-top: var(--spacing-32, 32px);
}
}
[data-variant=checkoutOverview] .ShoppingCartSummary--giftCertificateInformation {
  display: none;
}
@media screen and (min-width: 1000px) {
[data-variant=checkoutOverview] .ShoppingCartSummary--giftCertificateInformation {
    display: block;
    padding-bottom: var(--spacing-40, 40px);
    border-bottom: 1px solid rgba(var(--c-border));
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
.expand-enter-active[data-v-e1aac5a0],
.expand-leave-active[data-v-e1aac5a0] {
  overflow: hidden;
  transition: height 250ms ease-in-out;
}
.expand-enter[data-v-e1aac5a0],
.expand-leave-to[data-v-e1aac5a0] {
  height: 0;
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AccordionPanel {
  border-bottom: 1px solid rgba(var(--c-border));
}
.AccordionPanel[data-variant=secondary] {
  margin-bottom: var(--spacing-8, 8px);
  border-bottom-color: transparent;
}
.AccordionPanel:first-child {
  border-top: 1px solid rgba(var(--c-border));
}
.AccordionPanel:first-child[data-variant=secondary] {
  border-top-color: transparent;
}
.AccordionPanel--trigger {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  position: relative;
  display: flex;
  gap: var(--spacing-24, 24px);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-24, 24px) 0;
  text-align: left;
  background-color: rgba(var(--c-white), 1);
}
@media (min-width: 750px) {
.AccordionPanel--trigger {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.AccordionPanel--trigger {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.AccordionPanel--trigger {
    line-height: 1.2;
}
}
[data-font-size=m] .AccordionPanel--trigger {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
[data-font-size=m] .AccordionPanel--trigger {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
[data-font-size=m] .AccordionPanel--trigger {
    font-size: 22px;
}
}
.AccordionPanel[data-variant=secondary] .AccordionPanel--trigger {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  gap: var(--spacing-8, 8px);
  padding: var(--spacing-16, 16px) var(--spacing-16, 16px) var(--spacing-16, 16px) var(--spacing-8, 8px);
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-default);
}
@media (min-width: 750px) {
.AccordionPanel[data-variant=secondary] .AccordionPanel--trigger {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.AccordionPanel[data-variant=secondary] .AccordionPanel--trigger {
    font-size: 16px;
}
}
[data-variant=secondary] .AccordionPanel--trigger {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
[data-variant=secondary] .AccordionPanel--trigger {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
[data-variant=secondary] .AccordionPanel--trigger {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
[data-variant=secondary] .AccordionPanel--trigger {
    line-height: 1.2;
}
}
.AccordionPanel--trigger--icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.AccordionPanel--trigger--icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: currentcolor;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.2s ease-in-out;
}
.AccordionPanel--trigger--icon span:first-child {
  transform: translate(-50%, -50%) rotate(90deg);
}
.AccordionPanel--trigger[aria-expanded=true] .AccordionPanel--trigger--icon span {
  transform: translate(-50%, -50%) rotate(180deg);
}
.AccordionPanel--title {
  flex: 1 1 auto;
}
.AccordionPanel--content--inner.AccordionPanel--content--inner {
  position: relative;
  padding-bottom: var(--spacing-40, 40px);
}
.AccordionPanel--content--inner.AccordionPanel--content--inner > *:first-child {
  margin-top: 0;
}
.AccordionPanel--content--inner.AccordionPanel--content--inner > *:last-child {
  margin-bottom: 0;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AccordionArea[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.AccordionArea[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.AccordionArea[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.AccordionArea[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.AccordionArea[data-compose=white] {
    margin-bottom: 96px;
}
}
.AccordionArea:not([data-layout=inline]) {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ActivityGridTeaser {
  --border-radius: var(--border-radius-default);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius);
  clip-path: inset(0 round var(--border-radius));
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
}
@media (hover: hover) {
.ActivityGridTeaser:hover {
    clip-path: inset(1% round calc(var(--border-radius) * 1.8));
}
.ActivityGridTeaser:hover .ActivityGridTeaser--image .Image {
    transform: scale(1.05);
}
.ActivityGridTeaser:focus {
    clip-path: inset(1% round calc(var(--border-radius) * 1.8));
}
.ActivityGridTeaser:focus .ActivityGridTeaser--image .Image {
    transform: scale(1.05);
}
}
.ActivityGridTeaser--image {
  position: relative;
  display: flex;
  flex: 0 0 33.33%;
  align-items: center;
  justify-content: center;
  max-width: clamp(100px, 33.33%, 160px);
  overflow: hidden;
  background: rgba(var(--c-grey-light), 1);
  aspect-ratio: 1;
}
@media screen and (min-width: 750px) {
.ActivityGridTeaser--image {
    flex: 0 0 42%;
    max-width: clamp(100px, 42%, 160px);
}
}
.ActivityGridTeaser--image .Image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-variant=grey] .ActivityGridTeaser--image .Image {
  max-width: 55%;
  max-height: 55%;
  mix-blend-mode: multiply;
}
.ActivityGridTeaser--body {
  flex: 1 1 auto;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.ActivityGridTeaser--body {
    padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
}
}
.ActivityGridTeaser--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  word-wrap: break-word;
}
@media (min-width: 750px) {
.ActivityGridTeaser--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.ActivityGridTeaser--title {
    font-size: 22px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ActivityGrid[data-compose=green-light] {
  background-color: rgba(var(--c-green-light), 1);
  padding-top: 48px;
  padding-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ActivityGrid[data-compose=green-light] {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ActivityGrid[data-compose=green-light] {
    padding-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ActivityGrid[data-compose=green-light] {
    padding-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ActivityGrid[data-compose=green-light] {
    padding-bottom: 96px;
}
}
.ActivityGrid--inner {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ActivityGrid--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-16, 16px);
  align-items: start;
}
@media screen and (min-width: 580px) {
.ActivityGrid--grid {
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 750px) {
.ActivityGrid--grid {
    gap: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1000px) {
.ActivityGrid--grid {
    grid-template-columns: repeat(3, 1fr);
}
.ActivityGrid--grid[data-layout="4"] > :last-child {
    grid-column: 2;
}
.ActivityGrid--grid[data-layout="5"] > :nth-last-child(2) {
    grid-column: 2;
}
.ActivityGrid--grid[data-layout="5"] > :last-child {
    grid-column: 3;
}
}
@media screen and (min-width: 1280px) {
.ActivityGrid--grid {
    gap: var(--spacing-80, 80px) var(--spacing-64, 64px);
}
}
@media screen and (max-width: 580px) {
.ActivityGrid--intro {
    margin-bottom: var(--spacing-16, 16px);
}
}
.ActivityGrid--title {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.ActivityGrid--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.ActivityGrid--title {
    font-size: 34px;
}
}
.ActivityGrid--button {
  margin-top: var(--spacing-8, 8px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AnchorNav {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.AnchorNav--card {
  padding: var(--spacing-24, 24px) var(--spacing-24, 24px) var(--spacing-8, 8px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
.AnchorNav--list {
  position: relative;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.AnchorNav--list li {
  padding-bottom: var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.AnchorNav[data-columns="2"] .AnchorNav--list {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: var(--spacing-48, 48px);
         column-gap: var(--spacing-48, 48px);
}
.AnchorNav[data-columns="2"] .AnchorNav--list::before {
    position: absolute;
    left: 50%;
    width: 0;
    height: calc(100% - 16px);
    border-right: 1px solid rgba(var(--c-border));
    content: "";
}
}
.AnchorNav--link {
  font-size: 14px;
  line-height: 1.2;
  position: relative;
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: space-between;
  color: rgba(var(--c-grey-dark), 1);
  transition: color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.AnchorNav--link {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.AnchorNav--link {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.AnchorNav--link {
    line-height: 1.2;
}
}
.AnchorNav--link:hover, .AnchorNav--link.isActive {
  color: rgba(var(--c-black), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Anchor[data-v-a44c086d] {
  margin: 40vw;
  text-align: center;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleShare {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.ArticleShare[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ArticleShare[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleShare[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ArticleShare[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleShare[data-compose=white] {
    margin-bottom: 64px;
}
}
.ArticleShare--tags {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  gap: var(--spacing-8, 8px);
  justify-content: center;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.ArticleShare--tags {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ArticleShare--tags {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ArticleShare--tags {
    line-height: 1.2;
}
}
.ArticleShare--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.ArticleShare--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.ArticleShare--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.ArticleShare--title {
    line-height: 1.2;
}
}
.ArticleShare--socials {
  display: flex;
  gap: var(--spacing-4, 4px);
  justify-content: center;
}
.ArticleShare--social {
  position: relative;
  display: block;
  padding: var(--spacing-8, 8px);
}
.ArticleShare--social::before {
  position: absolute;
  display: block;
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-circle);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  content: "";
  inset: 0;
}
.ArticleShare--social:hover {
  cursor: pointer;
}
.ArticleShare--social:hover::before {
  opacity: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleTable[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ArticleTable[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ArticleTable[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ArticleTable[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ArticleTable[data-compose=white] {
    margin-bottom: 96px;
}
}
.ArticleTable:not([data-layout=inline]) {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ArticleTable--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.ArticleTable--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.ArticleTable--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.ArticleTable--title {
    line-height: 1.2;
}
}
.ArticleTable[data-layout=inline] .ArticleTable--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ArticleTable[data-layout=inline] .ArticleTable--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.ArticleTable[data-layout=inline] .ArticleTable--title {
    font-size: 22px;
}
}
.ArticleTable--inner {
  max-width: 100%;
  overflow: auto;
}
.ArticleTable--table {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  width: 100%;
  table-layout: auto;
  border: none;
}
@media (min-width: 750px) {
.ArticleTable--table {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.ArticleTable--table {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.ArticleTable--table {
    line-height: 1.4;
}
}
.ArticleTable--table tr {
  border: none;
  border-bottom: 1px solid rgba(var(--c-border));
}
.ArticleTable--table tr:first-child {
  border-top: 1px solid rgba(var(--c-border));
}
.ArticleTable--table th {
  font-weight: bold;
}
.ArticleTable--table td,
.ArticleTable--table th {
  padding: 1.2em 0.6em;
  vertical-align: top;
  border: none;
}
.ArticleTable--table td:first-child,
.ArticleTable--table th:first-child {
  padding-left: 0;
}
.ArticleTable--table td:last-child,
.ArticleTable--table th:last-child {
  padding-right: 0;
}
.ArticleTable--table thead.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.ArticleTable--table td > *:first-child, .ArticleTable--table th > *:first-child {
  margin-top: 0;
}
.ArticleTable--table td > *:last-child, .ArticleTable--table th > *:last-child {
  margin-bottom: 0;
}
.ArticleTable--table td > [data-slate-fragment] > *:first-child, .ArticleTable--table th > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.ArticleTable--table td > [data-slate-fragment] > *:last-child, .ArticleTable--table th > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.ArticleTable--table td .Button + .Button, .ArticleTable--table th .Button + .Button {
  margin-left: 16px;
}
.ArticleTable--table td p, .ArticleTable--table th p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.ArticleTable--table td a:not([class]),
.ArticleTable--table td a[class=""], .ArticleTable--table th a:not([class]),
.ArticleTable--table th a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.ArticleTable--table td a:not([class]):hover,
  .ArticleTable--table td a[class=""]:hover, .ArticleTable--table th a:not([class]):hover,
  .ArticleTable--table th a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.ArticleTable--table td a:not([class]):focus,
  .ArticleTable--table td a[class=""]:focus, .ArticleTable--table th a:not([class]):focus,
  .ArticleTable--table th a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.ArticleTable--table td small, .ArticleTable--table th small {
  display: inline-block;
  font-size: 0.75em;
}
.ArticleTable--table td strong,
.ArticleTable--table td b, .ArticleTable--table th strong,
.ArticleTable--table th b {
  font-weight: bold;
}
.ArticleTable--table td em,
.ArticleTable--table td i, .ArticleTable--table th em,
.ArticleTable--table th i {
  font-style: italic;
}
.ArticleTable[data-column-align=last-right] .ArticleTable--table th:last-child,
.ArticleTable[data-column-align=last-right] .ArticleTable--table td:last-child {
  text-align: right;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
@media (hover: hover) {
.ArticleTeaser:hover .ArticleTeaser--image {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.ArticleTeaser:hover .ArticleTeaser--image .Image {
    transform: scale(1.05);
}
.ArticleTeaser:focus .ArticleTeaser--image {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.ArticleTeaser:focus .ArticleTeaser--image .Image {
    transform: scale(1.05);
}
}
.ArticleTeaser--image {
  --border-radius: var(--border-radius-default);
  margin-bottom: var(--spacing-16, 16px);
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
}
.ArticleTeaser--image > .Image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ArticleTeaser--tags {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-6, 6px) var(--spacing-16, 16px);
  height: 1.4em;
  margin-bottom: var(--spacing-8, 8px);
  overflow: hidden;
}
@media (min-width: 750px) {
.ArticleTeaser--tags {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ArticleTeaser--tags {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ArticleTeaser--tags {
    line-height: 1.2;
}
}
.ArticleTeaser--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ArticleTeaser--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.ArticleTeaser--title {
    font-size: 22px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleTeaserGridItem {
  position: relative;
}
.ArticleTeaserGridItem::before {
  position: absolute;
  top: 0;
  left: calc((var(--articleteasergrid-gap)) / 2 * -1);
  width: 1px;
  height: 100%;
  background: rgba(var(--c-border));
  content: "";
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
:root {
  --articleteasergrid-gap: var(--spacing-32, 32px);
  --articleteasergrid-row-gap: var(--spacing-32, 32px);
}
@media screen and (min-width: 750px) {
:root {
    --articleteasergrid-gap: var(--spacing-56, 56px);
}
}
@media screen and (min-width: 1000px) {
:root {
    --articleteasergrid-row-gap: var(--spacing-56, 56px);
}
}
@media screen and (min-width: 1280px) {
:root {
    --articleteasergrid-gap: var(--spacing-80, 80px);
}
}
.ArticleTeaserGrid {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ArticleTeaserGrid--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--articleteasergrid-row-gap) var(--articleteasergrid-gap);
  overflow: hidden;
  /* @include above-tablet-portrait {
  	grid-template-columns: repeat(4, 1fr);
  } */
}
@media screen and (min-width: 580px) {
.ArticleTeaserGrid--grid {
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 750px) {
.ArticleTeaserGrid--grid {
    grid-template-columns: repeat(3, 1fr);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleTeaserListItem {
  position: relative;
  border-bottom: 1px solid rgba(var(--c-border));
}
.ArticleTeaserListItem--inner {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: flex-start;
  padding-top: var(--spacing-16, 16px);
  padding-bottom: var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.ArticleTeaserListItem--inner {
    gap: var(--spacing-24, 24px);
    padding-top: var(--spacing-32, 32px);
    padding-bottom: var(--spacing-32, 32px);
}
}
.ArticleTeaserListItem--image {
  --border-radius: var(--border-radius-medium);
  position: relative;
  flex-shrink: 0;
  width: clamp(85px, 20%, 136px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
}
.ArticleTeaserListItem--image .Image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
.ArticleTeaserListItem:hover .ArticleTeaserListItem--image, .ArticleTeaserListItem--image:hover {
    clip-path: inset(1% round calc(var(--border-radius) * 1.8));
}
.ArticleTeaserListItem:hover .ArticleTeaserListItem--image .Image, .ArticleTeaserListItem--image:hover .Image {
    transform: scale(1.05);
}
.ArticleTeaserListItem--image:focus {
    clip-path: inset(1% round calc(var(--border-radius) * 1.8));
}
.ArticleTeaserListItem--image:focus .Image {
    transform: scale(1.05);
}
}
.ArticleTeaserListItem--main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-12, 12px);
  align-items: flex-start;
}
@media screen and (min-width: 750px) {
.ArticleTeaserListItem--main {
    flex-direction: row;
    gap: var(--spacing-24, 24px);
    justify-content: space-between;
}
}
.ArticleTeaserListItem--tags {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8, 8px) var(--spacing-16, 16px);
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.ArticleTeaserListItem--tags {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ArticleTeaserListItem--tags {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ArticleTeaserListItem--tags {
    line-height: 1.2;
}
}
.ArticleTeaserListItem--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ArticleTeaserListItem--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.ArticleTeaserListItem--title {
    font-size: 22px;
}
}
.ArticleTeaserListItem--date {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.ArticleTeaserListItem--date {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ArticleTeaserListItem--date {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ArticleTeaserListItem--date {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleTeaserList {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ArticleTeaserList[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ArticleTeaserList[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleTeaserList[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ArticleTeaserList[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleTeaserList[data-compose=white] {
    margin-bottom: 64px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleTeaserSliderItem {
  width: 100%;
  max-width: 85%;
}
@media screen and (min-width: 580px) {
.ArticleTeaserSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
}
@media screen and (min-width: 1000px) {
.ArticleTeaserSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (4 - 1)) / 4);
}
}
.ArticleTeaserSliderItem:not(:first-child) {
  position: relative;
}
.ArticleTeaserSliderItem:not(:first-child)::before {
  position: absolute;
  top: 0;
  left: calc((var(--scrollslider-gap)) / 2 * -1);
  width: 1px;
  height: 100%;
  background: rgba(var(--c-border));
  content: "";
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleTeaserSlider {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ArticleTeaserSlider[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ArticleTeaserSlider[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ArticleTeaserSlider[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ArticleTeaserSlider[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ArticleTeaserSlider[data-compose=white] {
    margin-bottom: 96px;
}
}
.ArticleTeaserSlider--title {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin-bottom: var(--spacing-16, 16px);
  text-align: center;
}
@media (min-width: 750px) {
.ArticleTeaserSlider--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.ArticleTeaserSlider--title {
    font-size: 34px;
}
}
@media screen and (min-width: 1000px) {
.ArticleTeaserSlider--title {
    margin-bottom: var(--spacing-40, 40px);
}
}
.ArticleTeaserSlider--slider {
  --scrollslider-gap: var(--spacing-52, 52px);
  --scrollsliderbar-gap: var(--spacing-32, 32px);
}
@media screen and (min-width: 1000px) {
.ArticleTeaserSlider--slider {
    --scrollslider-gap: var(--spacing-82, 82px);
    --scrollsliderbar-gap: var(--spacing-40, 40px);
}
}
@media screen and (max-width: 1280px) {
.ArticleTeaserSlider--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.ArticleTeaserSlider--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.ArticleTeaserSlider--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.ArticleTeaserSlider--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.ArticleTeaserSlider--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleText {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
}
.ArticleText[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ArticleText[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleText[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ArticleText[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleText[data-compose=white] {
    margin-bottom: 64px;
}
}
@media (min-width: 750px) {
.ArticleText {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.ArticleText {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.ArticleText {
    line-height: 1.4;
}
}
.ArticleText:not([data-layout=inline]) {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.BrandTeaserCard {
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  transition: border-color 0.2s ease-out;
  position: relative;
  display: flex;
  padding: var(--spacing-24, 24px);
  overflow: hidden;
  aspect-ratio: 3/2;
}
@media (hover: hover) {
.BrandTeaserCard:hover {
    border-color: rgba(var(--c-black), 1);
}
.BrandTeaserCard:focus {
    border-color: rgba(var(--c-black), 1);
}
}
.BrandTeaserCard--imageWrapper {
  position: relative;
  display: flex;
  flex: 1 1 auto;
}
.BrandTeaserCard--image {
  position: absolute;
  top: 50%;
  left: 50%;
  flex: none; /* Prevent flexbox issues on iOS Safari */
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translate(-50%, -50%);
}
.BrandTeaserCard--image > img {
  position: inherit;
  top: inherit;
  left: inherit;
  transform: inherit;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.BrandTeaserSlider {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.BrandTeaserSlider[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.BrandTeaserSlider[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.BrandTeaserSlider[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.BrandTeaserSlider[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.BrandTeaserSlider[data-compose=white] {
    margin-bottom: 96px;
}
}
@media screen and (max-width: 1280px) {
.BrandTeaserSlider--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.BrandTeaserSlider--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.BrandTeaserSlider--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.BrandTeaserSlider--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.BrandTeaserSlider--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
.BrandTeaserSlider--item {
  aspect-ratio: 3/2;
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
@media screen and (min-width: 580px) {
.BrandTeaserSlider--item {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (3 - 1)) / 3);
}
}
@media screen and (min-width: 750px) {
.BrandTeaserSlider--item {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (4 - 1)) / 4);
}
}
@media screen and (min-width: 1000px) {
.BrandTeaserSlider--item {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (5 - 1)) / 5);
}
}
@media screen and (min-width: 1280px) {
.BrandTeaserSlider--item {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (6 - 1)) / 6);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CardTeaser {
  --border-radius: var(--border-radius-default);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius);
  clip-path: inset(0 round var(--border-radius));
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
}
.CardTeaser[data-color=grey] {
  background-color: rgba(var(--c-grey-light), 1);
}
@media (hover: hover) {
.CardTeaser:hover {
    clip-path: inset(1% round calc(var(--border-radius) * 1.8));
}
.CardTeaser:hover .CardTeaser--image .Image {
    transform: scale(1.05);
}
.CardTeaser:focus {
    clip-path: inset(1% round calc(var(--border-radius) * 1.8));
}
.CardTeaser:focus .CardTeaser--image .Image {
    transform: scale(1.05);
}
}
.CardTeaser--image {
  position: relative;
  display: flex;
  flex: 0 0 33.33%;
  align-items: center;
  justify-content: center;
  max-width: clamp(100px, 33.33%, 160px);
  overflow: hidden;
  background: rgba(var(--c-grey-light), 1);
  aspect-ratio: 1;
}
.CardTeaser--image .Image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-variant=product] .CardTeaser--image .Image {
  max-width: 55%;
  max-height: 55%;
  mix-blend-mode: multiply;
}
.CardTeaser--body {
  display: flex;
  flex: 1 1 auto;
  gap: var(--spacing-16, 16px);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-8, 8px) var(--spacing-24, 24px) var(--spacing-8, 8px) var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.CardTeaser--body {
    gap: var(--spacing-32, 32px);
    padding: var(--spacing-16, 16px) var(--spacing-40, 40px) var(--spacing-16, 16px) var(--spacing-32, 32px);
}
}
.CardTeaser--title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  word-wrap: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
@media (min-width: 750px) {
.CardTeaser--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.CardTeaser--title {
    font-size: 16px;
}
}
[data-icon].CardTeaser--arrow {
  clip-path: inset(-10%);
  flex: 0 0 auto;
}
[data-icon].CardTeaser--arrow::before {
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}
@media screen and (max-width: 750px) {
[data-icon].CardTeaser--arrow {
    font-size: 16px;
}
}
@media (hover: hover) {
.CardTeaser:hover [data-icon].CardTeaser--arrow::before, [data-icon].CardTeaser--arrow:hover::before {
    transform: scale(1.1);
}
.CardTeaser:hover [data-icon].CardTeaser--arrow > svg, [data-icon].CardTeaser--arrow:hover > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
[data-icon].CardTeaser--arrow:focus::before {
    transform: scale(1.1);
}
[data-icon].CardTeaser--arrow:focus > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CardTeaserGrid[data-compose=green-light] {
  background-color: rgba(var(--c-green-light), 1);
  padding-top: 48px;
  padding-bottom: 48px;
}
@media screen and (min-width: 750px) {
.CardTeaserGrid[data-compose=green-light] {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CardTeaserGrid[data-compose=green-light] {
    padding-top: 96px;
}
}
@media screen and (min-width: 750px) {
.CardTeaserGrid[data-compose=green-light] {
    padding-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CardTeaserGrid[data-compose=green-light] {
    padding-bottom: 96px;
}
}
.CardTeaserGrid[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.CardTeaserGrid[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CardTeaserGrid[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.CardTeaserGrid[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CardTeaserGrid[data-compose=white] {
    margin-bottom: 96px;
}
}
.CardTeaserGrid[data-compose=white] {
  scroll-margin-top: 48px;
}
@media screen and (min-width: 750px) {
.CardTeaserGrid[data-compose=white] {
    scroll-margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CardTeaserGrid[data-compose=white] {
    scroll-margin-top: 96px;
}
}
.CardTeaserGrid--inner {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.CardTeaserGrid--inner > * + * {
  margin-top: var(--spacing-32, 32px);
}
@media screen and (min-width: 750px) {
.CardTeaserGrid--inner > * + * {
    margin-top: var(--spacing-40, 40px);
}
}
.CardTeaserGrid--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8, 8px);
  align-items: start;
}
@media screen and (min-width: 750px) {
.CardTeaserGrid--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-32, 32px);
}
}
.CardTeaserGrid--action {
  text-align: center;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Tooltip {
  display: inline;
}
.Tooltip--trigger {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
.Tooltip--trigger:focus, .Tooltip:hover .Tooltip--trigger {
  background-image: linear-gradient(currentcolor, currentcolor);
}
.Tooltip--popup {
  position: absolute;
  width: 285px;
  padding-bottom: 8px;
  transform: translateY(10px);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
.Tooltip:hover .Tooltip--popup, .Tooltip--trigger:focus + .Tooltip--popup {
  z-index: 10;
  transform: none;
  visibility: visible;
  opacity: 1;
}
.Tooltip--popup--arrow {
  position: absolute;
  top: 100%;
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  background: rgba(var(--c-grey-light), 1);
  border-bottom: 1px solid rgba(var(--c-border));
  border-left: 1px solid rgba(var(--c-border));
  transform: translateY(-50%) rotate(-45deg);
  content: "";
}
.Tooltip--popup--inner {
  font-size: 12px;
  line-height: 1.4;
  padding: var(--spacing-16, 16px);
  overflow: hidden;
  text-align: left;
  background: rgba(var(--c-grey-light), 1);
  border: 1px solid rgba(var(--c-border));
  border-radius: 4px;
}
.Tooltip--popup--inner > *:first-child {
  margin-top: 0;
}
.Tooltip--popup--inner > *:last-child {
  margin-bottom: 0;
}
.Tooltip--popup--inner > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.Tooltip--popup--inner > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.Tooltip--popup--inner .Button + .Button {
  margin-left: 16px;
}
.Tooltip--popup--inner p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.Tooltip--popup--inner a:not([class]),
.Tooltip--popup--inner a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.Tooltip--popup--inner a:not([class]):hover,
  .Tooltip--popup--inner a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.Tooltip--popup--inner a:not([class]):focus,
  .Tooltip--popup--inner a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.Tooltip--popup--inner small {
  display: inline-block;
  font-size: 0.75em;
}
.Tooltip--popup--inner strong,
.Tooltip--popup--inner b {
  font-weight: bold;
}
.Tooltip--popup--inner em,
.Tooltip--popup--inner i {
  font-style: italic;
}
@media (min-width: 750px) {
.Tooltip--popup--inner {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Tooltip--popup--inner {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Tooltip--popup--inner {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.StructuredText > *:first-child {
  margin-top: 0;
}
.StructuredText > *:last-child {
  margin-bottom: 0;
}
.StructuredText > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.StructuredText > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.StructuredText pre {
  margin: 1em 0;
}
.StructuredText table {
  width: 100%;
  table-layout: auto;
  border: none;
}
.StructuredText table tr {
  border: none;
  border-bottom: 1px solid rgba(var(--c-border));
}
.StructuredText table tr:first-child {
  border-top: 1px solid rgba(var(--c-border));
}
.StructuredText table th {
  font-weight: bold;
}
.StructuredText table td,
.StructuredText table th {
  padding: 1.2em 0.6em;
  vertical-align: top;
  border: none;
}
.StructuredText table td:first-child,
.StructuredText table th:first-child {
  padding-left: 0;
}
.StructuredText table td:last-child,
.StructuredText table th:last-child {
  padding-right: 0;
}
.StructuredText code {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.StructuredText pre code,
.StructuredText pre pre,
.StructuredText code pre {
  background: transparent;
}
.StructuredText h1:not([class]) {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin-top: 1.75em;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.StructuredText h1:not([class]) {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.StructuredText h1:not([class]) {
    font-size: 34px;
}
}
.StructuredText h2:not([class]) {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.StructuredText h2:not([class]) {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.StructuredText h2:not([class]) {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.StructuredText h2:not([class]) {
    line-height: 1.2;
}
}
.StructuredText h3:not([class]) {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.StructuredText h3:not([class]) {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.StructuredText h3:not([class]) {
    font-size: 22px;
}
}
.StructuredText h4:not([class]),
.StructuredText h5:not([class]),
.StructuredText h6:not([class]) {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
  text-transform: none;
}
@media (min-width: 750px) {
.StructuredText h4:not([class]),
  .StructuredText h5:not([class]),
  .StructuredText h6:not([class]) {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.StructuredText h4:not([class]),
  .StructuredText h5:not([class]),
  .StructuredText h6:not([class]) {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.StructuredText h4:not([class]),
  .StructuredText h5:not([class]),
  .StructuredText h6:not([class]) {
    line-height: 1.2;
}
}
.StructuredText ul:not([class]),
.StructuredText ol:not([class]) {
  margin-top: 1em;
  margin-bottom: 1em;
}
.StructuredText ul:not([class]) {
  display: block;
}
.StructuredText ul:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.StructuredText ul:not([class]) > li:last-child {
  margin-bottom: 0;
}
.StructuredText ul:not([class]) > li > *:first-child {
  margin-top: 0;
}
.StructuredText ul:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.StructuredText ul:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.StructuredText ul:not([class]) > li {
    padding-left: 25px;
}
}
.StructuredText ul:not([class]) > li::before {
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  color: rgba(var(--c-black), 1);
  background-color: currentcolor;
  border-radius: 100%;
}
.StructuredText ol:not([class]) {
  display: block;
  counter-reset: ol--counter;
}
.StructuredText ol:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.StructuredText ol:not([class]) > li:last-child {
  margin-bottom: 0;
}
.StructuredText ol:not([class]) > li > *:first-child {
  margin-top: 0;
}
.StructuredText ol:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.StructuredText ol:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.StructuredText ol:not([class]) > li {
    padding-left: 25px;
}
}
.StructuredText ol:not([class]) > li::before {
  left: 0;
  width: 4ex;
  text-align: left;
  content: counter(ol--counter) ".";
  counter-increment: ol--counter;
}
.StructuredText hr {
  margin-top: 1em;
  margin-bottom: 1em;
  border: 0;
  border-top: 1px solid rgba(var(--c-black), 1);
}
.StructuredText .Button + .Button {
  margin-left: 16px;
}
.StructuredText p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.StructuredText a:not([class]),
.StructuredText a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.StructuredText a:not([class]):hover,
  .StructuredText a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.StructuredText a:not([class]):focus,
  .StructuredText a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.StructuredText small {
  display: inline-block;
  font-size: 0.75em;
}
.StructuredText strong,
.StructuredText b {
  font-weight: bold;
}
.StructuredText em,
.StructuredText i {
  font-style: italic;
}
.StructuredText.StructuredText > *:first-child {
  margin-top: 0;
}
.StructuredText.StructuredText > *:last-child {
  margin-bottom: 0;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Sidebar {
  z-index: 100;
  position: fixed;
  inset: 0;
  transition: 0.2s;
}
.Sidebar--backdrop {
  position: fixed;
  background: rgba(var(--c-black), 0.2);
  content: "";
  inset: 0;
}
.Sidebar--flyout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden auto;
  background: rgba(var(--c-white), 1);
  -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 580px) {
.Sidebar--flyout {
    width: 480px;
}
}
.Sidebar--flyout--head {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--spacing-24, 24px) var(--spacing-48, 48px);
  text-align: center;
  background: rgba(var(--c-white), 1);
  border-bottom: 1px solid rgba(var(--c-border));
}
@media (min-width: 750px) {
.Sidebar--flyout--head {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Sidebar--flyout--head {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Sidebar--flyout--head {
    line-height: 1.2;
}
}
.Sidebar--flyout--head[data-empty=true] {
  border-bottom: 0;
}
.Sidebar--flyout--close {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  margin-top: -12px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.Sidebar--flyout--close:hover {
  transform: rotate(90deg);
}
.Sidebar--flyout--body {
  flex: 1 0 auto;
  padding: var(--spacing-32, 32px);
}
.Sidebar--flyout--body > *:first-child {
  margin-top: 0;
}
.Sidebar--flyout--body > *:last-child {
  margin-bottom: 0;
}
.Sidebar--flyout--body > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.Sidebar--flyout--body > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.Sidebar--flyout--body pre {
  margin: 1em 0;
}
.Sidebar--flyout--body table {
  width: 100%;
  table-layout: auto;
  border: none;
}
.Sidebar--flyout--body table tr {
  border: none;
  border-bottom: 1px solid rgba(var(--c-border));
}
.Sidebar--flyout--body table tr:first-child {
  border-top: 1px solid rgba(var(--c-border));
}
.Sidebar--flyout--body table th {
  font-weight: bold;
}
.Sidebar--flyout--body table td,
.Sidebar--flyout--body table th {
  padding: 1.2em 0.6em;
  vertical-align: top;
  border: none;
}
.Sidebar--flyout--body table td:first-child,
.Sidebar--flyout--body table th:first-child {
  padding-left: 0;
}
.Sidebar--flyout--body table td:last-child,
.Sidebar--flyout--body table th:last-child {
  padding-right: 0;
}
.Sidebar--flyout--body code {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.Sidebar--flyout--body pre code,
.Sidebar--flyout--body pre pre,
.Sidebar--flyout--body code pre {
  background: transparent;
}
.Sidebar--flyout--body h1:not([class]) {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin-top: 1.75em;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.Sidebar--flyout--body h1:not([class]) {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.Sidebar--flyout--body h1:not([class]) {
    font-size: 34px;
}
}
.Sidebar--flyout--body h2:not([class]) {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.Sidebar--flyout--body h2:not([class]) {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.Sidebar--flyout--body h2:not([class]) {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.Sidebar--flyout--body h2:not([class]) {
    line-height: 1.2;
}
}
.Sidebar--flyout--body h3:not([class]) {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.Sidebar--flyout--body h3:not([class]) {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.Sidebar--flyout--body h3:not([class]) {
    font-size: 22px;
}
}
.Sidebar--flyout--body h4:not([class]),
.Sidebar--flyout--body h5:not([class]),
.Sidebar--flyout--body h6:not([class]) {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
  text-transform: none;
}
@media (min-width: 750px) {
.Sidebar--flyout--body h4:not([class]),
  .Sidebar--flyout--body h5:not([class]),
  .Sidebar--flyout--body h6:not([class]) {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Sidebar--flyout--body h4:not([class]),
  .Sidebar--flyout--body h5:not([class]),
  .Sidebar--flyout--body h6:not([class]) {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Sidebar--flyout--body h4:not([class]),
  .Sidebar--flyout--body h5:not([class]),
  .Sidebar--flyout--body h6:not([class]) {
    line-height: 1.2;
}
}
.Sidebar--flyout--body ul:not([class]),
.Sidebar--flyout--body ol:not([class]) {
  margin-top: 1em;
  margin-bottom: 1em;
}
.Sidebar--flyout--body ul:not([class]) {
  display: block;
}
.Sidebar--flyout--body ul:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.Sidebar--flyout--body ul:not([class]) > li:last-child {
  margin-bottom: 0;
}
.Sidebar--flyout--body ul:not([class]) > li > *:first-child {
  margin-top: 0;
}
.Sidebar--flyout--body ul:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.Sidebar--flyout--body ul:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.Sidebar--flyout--body ul:not([class]) > li {
    padding-left: 25px;
}
}
.Sidebar--flyout--body ul:not([class]) > li::before {
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  color: rgba(var(--c-black), 1);
  background-color: currentcolor;
  border-radius: 100%;
}
.Sidebar--flyout--body ol:not([class]) {
  display: block;
  counter-reset: ol--counter;
}
.Sidebar--flyout--body ol:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.Sidebar--flyout--body ol:not([class]) > li:last-child {
  margin-bottom: 0;
}
.Sidebar--flyout--body ol:not([class]) > li > *:first-child {
  margin-top: 0;
}
.Sidebar--flyout--body ol:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.Sidebar--flyout--body ol:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.Sidebar--flyout--body ol:not([class]) > li {
    padding-left: 25px;
}
}
.Sidebar--flyout--body ol:not([class]) > li::before {
  left: 0;
  width: 4ex;
  text-align: left;
  content: counter(ol--counter) ".";
  counter-increment: ol--counter;
}
.Sidebar--flyout--body hr {
  margin-top: 1em;
  margin-bottom: 1em;
  border: 0;
  border-top: 1px solid rgba(var(--c-black), 1);
}
.Sidebar--flyout--body .Button + .Button {
  margin-left: 16px;
}
.Sidebar--flyout--body p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.Sidebar--flyout--body a:not([class]),
.Sidebar--flyout--body a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.Sidebar--flyout--body a:not([class]):hover,
  .Sidebar--flyout--body a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.Sidebar--flyout--body a:not([class]):focus,
  .Sidebar--flyout--body a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.Sidebar--flyout--body small {
  display: inline-block;
  font-size: 0.75em;
}
.Sidebar--flyout--body strong,
.Sidebar--flyout--body b {
  font-weight: bold;
}
.Sidebar--flyout--body em,
.Sidebar--flyout--body i {
  font-style: italic;
}
.Sidebar--flyout--body.Sidebar--flyout--body > *:first-child {
  margin-top: 0;
}
.Sidebar--flyout--body.Sidebar--flyout--body > *:last-child {
  margin-bottom: 0;
}
.Sidebar--flyout--actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--spacing-10, 10px);
  padding: var(--spacing-16, 16px);
  background-color: rgba(var(--c-white), 1);
  border-top: 1px solid rgb(var(--c-border));
}
.Sidebar--flyout--actions > * {
  flex: 1 0 auto;
}

/*
 * "Sub-Component" is used on product page
 * The component is used as plain html string
 */
.SidebarFlyoutInfo {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
}
.SidebarFlyoutInfo--image {
  width: 60px;
}
.SidebarFlyoutInfo--content > * + * {
  margin-top: var(--spacing-4, 4px);
}
.SidebarFlyoutInfo--title {
  font-weight: bold;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
.sidebar-enter-active .Sidebar--backdrop[data-v-4d4c1c47] {
  transition: opacity 0.2s ease-out, visibility 0.2s;
  transition-delay: 0.05s;
  will-change: opacity;
}
.sidebar-enter-active .Sidebar--flyout[data-v-4d4c1c47] {
  transition: transform 0.2s ease-out;
  will-change: transform;
}
.sidebar-leave-active .Sidebar--backdrop[data-v-4d4c1c47] {
  transition: opacity 0.2s ease-out, visibility 0.2s;
  will-change: opacity;
}
.sidebar-leave-active .Sidebar--flyout[data-v-4d4c1c47] {
  transition: transform 0.2s ease-in;
  will-change: transform;
}
.sidebar-enter-from .Sidebar--backdrop[data-v-4d4c1c47],
.sidebar-leave-to .Sidebar--backdrop[data-v-4d4c1c47] {
  visibility: hidden;
  opacity: 0;
}
.sidebar-enter-from .Sidebar--flyout[data-v-4d4c1c47],
.sidebar-leave-to .Sidebar--flyout[data-v-4d4c1c47] {
  transform: translateX(100%);
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.InfoPanel {
  cursor: pointer;
}
@media (hover: hover) {
.InfoPanel:hover [data-icon] {
    --c-icon-path: rgba(var(--c-white), 1);
    --c-icon-shape-color: rgba(var(--c-black), 1);
}
.InfoPanel:focus [data-icon] {
    --c-icon-path: rgba(var(--c-white), 1);
    --c-icon-shape-color: rgba(var(--c-black), 1);
}
}
.InfoPanel--icon svg path {
  transition: fill 0.2s ease-in-out;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CategoryTeaserCard {
  position: relative;
  z-index: 0;
  display: flex;
  height: 100%;
  overflow: hidden;
  background-color: rgba(var(--c-green-light), 1);
  border: 1px solid rgba(var(--c-green-light), 1);
  border-radius: var(--border-radius-default);
  transition: border-color 200ms;
}
.CategoryTeaserCard::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  padding-bottom: 100%;
  background-color: rgba(var(--c-white), 1);
  border-radius: 100%;
  transform: translate(-50%, -50%) scale(0.2);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.1s ease-out, opacity 0.05s ease-out, visibility 0.1s;
}
.CategoryTeaserCard::after {
  width: 0;
  padding-top: 66.66%;
  content: "";
}
@media (hover: hover) {
.CategoryTeaserCard:hover {
    border-color: rgba(var(--c-black), 1);
}
.CategoryTeaserCard:hover::before {
    transform: translate(-50%, -50%) scale(1.41);
    visibility: visible;
    opacity: 1;
}
.CategoryTeaserCard:focus {
    border-color: rgba(var(--c-black), 1);
}
.CategoryTeaserCard:focus::before {
    transform: translate(-50%, -50%) scale(1.41);
    visibility: visible;
    opacity: 1;
}
}
.CategoryTeaserCard--inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: var(--spacing-12, 12px);
}
.CategoryTeaserCard--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.CategoryTeaserCard--image {
  max-width: clamp(40px, 30%, 64px);
  aspect-ratio: 1/1;
  margin-bottom: var(--spacing-8, 8px);
}
.CategoryTeaserCard--image > img {
  mix-blend-mode: multiply;
}
.CategoryTeaserCard--title {
  font-size: 14px;
  line-height: 1.2;
  margin-top: auto;
}
@media (min-width: 750px) {
.CategoryTeaserCard--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.CategoryTeaserCard--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.CategoryTeaserCard--title {
    line-height: 1.2;
}
}
.CategoryTeaserCard--info {
  position: absolute;
  top: var(--spacing-12, 12px);
  right: var(--spacing-12, 12px);
  z-index: 5;
}
.CategoryTeaserCard--info [data-icon] {
  --c-icon-path: rgba(var(--c-black), 1);
  --c-icon-shape-color: rgba(var(--c-white), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CategorySlider {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.CategorySlider[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.CategorySlider[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CategorySlider[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.CategorySlider[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CategorySlider[data-compose=white] {
    margin-bottom: 96px;
}
}
.CategorySlider[data-align=center] {
  text-align: center;
}
.CategorySlider[data-align=left] .ScrollSlider {
  text-align: left;
}
@media screen and (max-width: 1280px) {
.CategorySlider--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.CategorySlider--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.CategorySlider--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.CategorySlider--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.CategorySlider--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
.CategorySliderItem {
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
@media screen and (min-width: 580px) {
.CategorySliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (3 - 1)) / 3);
}
}
@media screen and (min-width: 750px) {
.CategorySliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (4 - 1)) / 4);
}
}
@media screen and (min-width: 1000px) {
.CategorySliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (6 - 1)) / 6);
}
}
@media screen and (min-width: 1280px) {
.CategorySlider[data-columns="8"] .CategorySliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (8 - 1)) / 8);
}
}
.CategorySliderItem--dato {
  margin-top: 2em;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ConfirmationMessage {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: var(--spacing-40, 40px);
  margin-bottom: var(--spacing-96, 96px);
}
@media screen and (min-width: 1000px) {
.ConfirmationMessage {
    margin-bottom: var(--spacing-184, 184px);
}
.ConfirmationMessage[data-variant=registration] {
    margin-top: 0;
}
.ConfirmationMessage[data-variant=checkout] {
    margin-top: var(--spacing-84, 84px);
}
.ConfirmationMessage[data-variant=form] .ConfirmationMessage--description {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
}
}
@media screen and (min-width: 1000px) and (min-width: 750px) {
.ConfirmationMessage[data-variant=form] .ConfirmationMessage--description {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media screen and (min-width: 1000px) and (min-width: 1280px) {
.ConfirmationMessage[data-variant=form] .ConfirmationMessage--description {
    font-size: 18px;
}
}
@media screen and (min-width: 1000px) and (max-width: 750px) {
.ConfirmationMessage[data-variant=form] .ConfirmationMessage--description {
    line-height: 1.4;
}
}
.ConfirmationMessage--inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-40, 40px) var(--spacing-24, 24px) var(--spacing-48, 48px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 1000px) {
.ConfirmationMessage--inner {
    padding: var(--spacing-64, 64px) var(--spacing-56, 56px) var(--spacing-80, 80px) var(--spacing-56, 56px);
}
}
.ConfirmationMessage--icon {
  margin-bottom: var(--spacing-32, 32px);
  color: rgba(var(--c-signal-blue), 1);
}
@media screen and (min-width: 1000px) {
.ConfirmationMessage--icon {
    margin-bottom: var(--spacing-48, 48px);
}
}
.ConfirmationMessage--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.ConfirmationMessage--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.ConfirmationMessage--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.ConfirmationMessage--title {
    line-height: 1.2;
}
}
.ConfirmationMessage--subtitle {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.ConfirmationMessage--subtitle {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.ConfirmationMessage--subtitle {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.ConfirmationMessage--subtitle {
    line-height: 1.4;
}
}
.ConfirmationMessage--orderInfo {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  width: 100%;
  border-top: 1px solid rgba(var(--c-border));
  border-bottom: 1px solid rgba(var(--c-border));
  text-align: center;
  padding: var(--spacing-24, 24px) 0;
  margin-bottom: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.ConfirmationMessage--orderInfo {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.ConfirmationMessage--orderInfo {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.ConfirmationMessage--orderInfo {
    line-height: 1.4;
}
}
.ConfirmationMessage--orderNumber {
  font-weight: 700;
}
.ConfirmationMessage--title,
.ConfirmationMessage--orderLead,
.ConfirmationMessage--orderNumber {
  margin-bottom: var(--spacing-32, 32px);
  text-align: center;
}
@media screen and (min-width: 1000px) {
.ConfirmationMessage--title,
  .ConfirmationMessage--orderLead,
  .ConfirmationMessage--orderNumber {
    margin-bottom: var(--spacing-24, 24px);
}
}
.ConfirmationMessage--registration {
  margin-bottom: var(--spacing-48, 48px);
  text-align: center;
}
@media screen and (min-width: 1000px) {
.ConfirmationMessage--registration {
    margin-bottom: var(--spacing-64, 64px);
}
}
.ConfirmationMessage--registration--text {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.ConfirmationMessage--registration--text {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.ConfirmationMessage--registration--text {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.ConfirmationMessage--registration--text {
    line-height: 1.4;
}
}
.ConfirmationMessage--ctas {
  display: flex;
  gap: 1em;
}
.ConfirmationMessage--description {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: var(--spacing-48, 48px);
  text-align: center;
  overflow-wrap: anywhere;
}
@media (min-width: 750px) {
.ConfirmationMessage--description {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.ConfirmationMessage--description {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.ConfirmationMessage--description {
    line-height: 1.4;
}
}
.ConfirmationMessage--description > *:first-child {
  margin-top: 0;
}
.ConfirmationMessage--description > *:last-child {
  margin-bottom: 0;
}
.ConfirmationMessage--description > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.ConfirmationMessage--description > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.ConfirmationMessage--description .Button + .Button {
  margin-left: 16px;
}
.ConfirmationMessage--description p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.ConfirmationMessage--description a:not([class]),
.ConfirmationMessage--description a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.ConfirmationMessage--description a:not([class]):hover,
  .ConfirmationMessage--description a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.ConfirmationMessage--description a:not([class]):focus,
  .ConfirmationMessage--description a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.ConfirmationMessage--description small {
  display: inline-block;
  font-size: 0.75em;
}
.ConfirmationMessage--description strong,
.ConfirmationMessage--description b {
  font-weight: bold;
}
.ConfirmationMessage--description em,
.ConfirmationMessage--description i {
  font-style: italic;
}
@media screen and (min-width: 1000px) {
.ConfirmationMessage--description {
    margin-bottom: var(--spacing-64, 64px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CtaBox[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.CtaBox[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CtaBox[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.CtaBox[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.CtaBox[data-compose=white] {
    margin-bottom: 96px;
}
}
.CtaBox:not([data-layout=inline]) {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.CtaBox--box {
  position: relative;
  padding: var(--spacing-24, 24px);
  background-color: rgba(var(--c-yellow), 1);
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.CtaBox--box {
    padding: var(--spacing-48, 48px);
}
}
.CtaBox[data-color=grey] .CtaBox--box {
  background-color: rgba(var(--c-grey-light), 1);
}
.CtaBox--head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32, 32px);
}
@media screen and (min-width: 580px) {
.CtaBox--head {
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
}
}
.CtaBox--picto > .Icon {
  font-size: 80px;
}
.CtaBox--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  flex: 1 1 auto;
}
@media (min-width: 750px) {
.CtaBox--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.CtaBox--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.CtaBox--title {
    line-height: 1.2;
}
}
.CtaBox--text {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-top: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.CtaBox--text {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.CtaBox--text {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.CtaBox--text {
    line-height: 1.4;
}
}
.CtaBox--action {
  width: 100%;
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ErrorMessage {
  font-size: 12px;
  line-height: 1.4;
  margin-top: var(--spacing-4, 4px);
  color: rgba(var(--c-signal-red), 1);
}
@media (min-width: 750px) {
.ErrorMessage {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ErrorMessage {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ErrorMessage {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* .TextInput {
} */
.TextInput--inner {
  position: relative;
}
.TextInput--input {
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
  padding: var(--spacing-16, 16px);
  background: transparent;
  border: 1px solid rgba(var(--c-border-dark));
  border-radius: var(--border-radius-xsmall);
  outline: none;
  transition: border-color 0.2s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
@media (min-width: 750px) {
.TextInput--input {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.TextInput--input {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.TextInput--input {
    line-height: 1.4;
}
}
.TextInput--input:focus {
  border-color: rgba(var(--c-black), 1);
}
.TextInput--input::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.TextInput--input::placeholder {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.TextInput--input:-webkit-autofill, .TextInput--input:-webkit-autofill:hover, .TextInput--input:-webkit-autofill:focus, .TextInput--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-white), 1) inset;
}
.TextInput--input.hasPlaceholder:focus::-moz-placeholder {
  opacity: 1;
}
.TextInput--input.hasPlaceholder:focus::placeholder {
  opacity: 1;
}
.TextInput.isValid .TextInput--input {
  background-color: rgba(var(--c-valid-form-input));
}
.TextInput.isValid .TextInput--input:-webkit-autofill, .TextInput.isValid .TextInput--input:-webkit-autofill:hover, .TextInput.isValid .TextInput--input:-webkit-autofill:focus, .TextInput.isValid .TextInput--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-valid-form-input)) inset;
}
.TextInput.hasError .TextInput--input {
  border-color: rgba(var(--c-signal-red), 1);
}
.TextInput--label {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: var(--spacing-16, 16px);
  padding: 0 var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
@media (min-width: 750px) {
.TextInput--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TextInput--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TextInput--label {
    line-height: 1.2;
}
}
.TextInput--input:not(:-moz-placeholder) + .TextInput--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
.TextInput--input:focus + .TextInput--label, .TextInput--input:not(:placeholder-shown) + .TextInput--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
@media (min-width: 750px) {
.TextInput--input:not(:-moz-placeholder) + .TextInput--label {
    font-size: 12px;
}
.TextInput--input:focus + .TextInput--label, .TextInput--input:not(:placeholder-shown) + .TextInput--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.TextInput--input:not(:-moz-placeholder) + .TextInput--label {
    font-size: 12px;
}
.TextInput--input:focus + .TextInput--label, .TextInput--input:not(:placeholder-shown) + .TextInput--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.TextInput--input:not(:-moz-placeholder) + .TextInput--label {
    line-height: 1.4;
}
.TextInput--input:focus + .TextInput--label, .TextInput--input:not(:placeholder-shown) + .TextInput--label {
    line-height: 1.4;
}
}
.TextInput.hasError .TextInput--input:not(:-moz-placeholder) + .TextInput--label {
  color: rgba(var(--c-signal-red), 1);
}
.TextInput.hasError .TextInput--input:focus + .TextInput--label, .TextInput.hasError .TextInput--input:not(:placeholder-shown) + .TextInput--label {
  color: rgba(var(--c-signal-red), 1);
}
.TextInput--iconWrapper {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  transform: translateY(-50%);
}
.TextInput--additionalInformation {
  font-size: 12px;
  line-height: 1.4;
  margin-top: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.TextInput--additionalInformation {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.TextInput--additionalInformation {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.TextInput--additionalInformation {
    line-height: 1.4;
}
}
.TextInput--additionalInformation a {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.TextInput--additionalInformation a:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.TextInput--additionalInformation a:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Newsletter {
  width: 530px;
  max-width: 100%;
}
.Newsletter--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.Newsletter--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Newsletter--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Newsletter--title {
    line-height: 1.2;
}
}
.Newsletter--input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16, 16px);
}
.Newsletter--input--field {
  flex: 1 1 auto;
  margin-top: 0;
}
.Newsletter--input--field input {
  border: 1px solid rgba(var(--c-border));
  border-radius: 100px;
  outline: none;
}
.Newsletter--input--field.isValid .TextInput--input,
.Newsletter--input--field input {
  background-color: rgba(var(--c-white), 1);
}
.Newsletter--input--field:focus {
  background-color: rgba(var(--c-white), 1);
}
@media screen and (max-width: 580px) {
.Newsletter--input--button {
    flex: 1 1 100%;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CtaTeaser {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.CtaTeaser[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.CtaTeaser[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.CtaTeaser[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.CtaTeaser[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.CtaTeaser[data-compose=white] {
    margin-bottom: 64px;
}
}
.CtaTeaser--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.CtaTeaser--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.CtaTeaser--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.CtaTeaser--title {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.HighlightBox {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.HighlightBox[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.HighlightBox[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.HighlightBox[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.HighlightBox[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.HighlightBox[data-compose=white] {
    margin-bottom: 96px;
}
}
.HighlightBox--box {
  font-size: 14px;
  line-height: 1.4;
  padding: var(--spacing-40, 40px) var(--spacing-24, 24px);
  background: rgba(var(--c-green-light), 1);
  border-radius: var(--border-radius-default);
}
.HighlightBox--box > *:first-child {
  margin-top: 0;
}
.HighlightBox--box > *:last-child {
  margin-bottom: 0;
}
.HighlightBox--box > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.HighlightBox--box > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.HighlightBox--box pre {
  margin: 1em 0;
}
.HighlightBox--box table {
  width: 100%;
  table-layout: auto;
  border: none;
}
.HighlightBox--box table tr {
  border: none;
  border-bottom: 1px solid rgba(var(--c-border));
}
.HighlightBox--box table tr:first-child {
  border-top: 1px solid rgba(var(--c-border));
}
.HighlightBox--box table th {
  font-weight: bold;
}
.HighlightBox--box table td,
.HighlightBox--box table th {
  padding: 1.2em 0.6em;
  vertical-align: top;
  border: none;
}
.HighlightBox--box table td:first-child,
.HighlightBox--box table th:first-child {
  padding-left: 0;
}
.HighlightBox--box table td:last-child,
.HighlightBox--box table th:last-child {
  padding-right: 0;
}
.HighlightBox--box code {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.HighlightBox--box pre code,
.HighlightBox--box pre pre,
.HighlightBox--box code pre {
  background: transparent;
}
.HighlightBox--box h1:not([class]) {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin-top: 1.75em;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.HighlightBox--box h1:not([class]) {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.HighlightBox--box h1:not([class]) {
    font-size: 34px;
}
}
.HighlightBox--box h2:not([class]) {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.HighlightBox--box h2:not([class]) {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.HighlightBox--box h2:not([class]) {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.HighlightBox--box h2:not([class]) {
    line-height: 1.2;
}
}
.HighlightBox--box h3:not([class]) {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.HighlightBox--box h3:not([class]) {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.HighlightBox--box h3:not([class]) {
    font-size: 22px;
}
}
.HighlightBox--box h4:not([class]),
.HighlightBox--box h5:not([class]),
.HighlightBox--box h6:not([class]) {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
  text-transform: none;
}
@media (min-width: 750px) {
.HighlightBox--box h4:not([class]),
  .HighlightBox--box h5:not([class]),
  .HighlightBox--box h6:not([class]) {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.HighlightBox--box h4:not([class]),
  .HighlightBox--box h5:not([class]),
  .HighlightBox--box h6:not([class]) {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.HighlightBox--box h4:not([class]),
  .HighlightBox--box h5:not([class]),
  .HighlightBox--box h6:not([class]) {
    line-height: 1.2;
}
}
.HighlightBox--box ul:not([class]),
.HighlightBox--box ol:not([class]) {
  margin-top: 1em;
  margin-bottom: 1em;
}
.HighlightBox--box ul:not([class]) {
  display: block;
}
.HighlightBox--box ul:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.HighlightBox--box ul:not([class]) > li:last-child {
  margin-bottom: 0;
}
.HighlightBox--box ul:not([class]) > li > *:first-child {
  margin-top: 0;
}
.HighlightBox--box ul:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.HighlightBox--box ul:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.HighlightBox--box ul:not([class]) > li {
    padding-left: 25px;
}
}
.HighlightBox--box ul:not([class]) > li::before {
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  color: rgba(var(--c-black), 1);
  background-color: currentcolor;
  border-radius: 100%;
}
.HighlightBox--box ol:not([class]) {
  display: block;
  counter-reset: ol--counter;
}
.HighlightBox--box ol:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.HighlightBox--box ol:not([class]) > li:last-child {
  margin-bottom: 0;
}
.HighlightBox--box ol:not([class]) > li > *:first-child {
  margin-top: 0;
}
.HighlightBox--box ol:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.HighlightBox--box ol:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.HighlightBox--box ol:not([class]) > li {
    padding-left: 25px;
}
}
.HighlightBox--box ol:not([class]) > li::before {
  left: 0;
  width: 4ex;
  text-align: left;
  content: counter(ol--counter) ".";
  counter-increment: ol--counter;
}
.HighlightBox--box hr {
  margin-top: 1em;
  margin-bottom: 1em;
  border: 0;
  border-top: 1px solid rgba(var(--c-black), 1);
}
.HighlightBox--box .Button + .Button {
  margin-left: 16px;
}
.HighlightBox--box p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.HighlightBox--box a:not([class]),
.HighlightBox--box a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.HighlightBox--box a:not([class]):hover,
  .HighlightBox--box a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.HighlightBox--box a:not([class]):focus,
  .HighlightBox--box a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.HighlightBox--box small {
  display: inline-block;
  font-size: 0.75em;
}
.HighlightBox--box strong,
.HighlightBox--box b {
  font-weight: bold;
}
.HighlightBox--box em,
.HighlightBox--box i {
  font-style: italic;
}
@media (min-width: 750px) {
.HighlightBox--box {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.HighlightBox--box {
    font-size: 16px;
}
}
@media screen and (min-width: 580px) {
.HighlightBox--box {
    padding: var(--spacing-48, 48px);
}
}
@media screen and (min-width: 750px) {
.HighlightBox--box {
    padding: var(--spacing-64, 64px);
}
}
.HighlightBox--box p {
  color: rgba(var(--c-grey), 1);
}
.HighlightBox--box p b,
.HighlightBox--box p strong {
  color: rgba(var(--c-black), 1);
}
.HighlightBox--box .IconList {
  margin: var(--spacing-32, 32px) 0;
}
@media screen and (min-width: 580px) {
.HighlightBox--box .IconList {
    margin: var(--spacing-48, 48px) 0;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.HighlightListItem {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: flex-start;
  padding: var(--spacing-24, 24px) 0;
  border-bottom: 1px solid rgba(var(--c-border));
}
.HighlightListItem--icon,
.HighlightListItem--info {
  flex: 0 0 auto;
}
.HighlightListItem--content {
  flex: 1 1 auto;
}
.HighlightListItem--title {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.HighlightListItem--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.HighlightListItem--title {
    font-size: 16px;
}
}
.HighlightListItem--text {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(var(--c-grey), 1);
}
.HighlightListItem--text > *:first-child {
  margin-top: 0;
}
.HighlightListItem--text > *:last-child {
  margin-bottom: 0;
}
.HighlightListItem--text > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.HighlightListItem--text > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.HighlightListItem--text .Button + .Button {
  margin-left: 16px;
}
.HighlightListItem--text p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.HighlightListItem--text a:not([class]),
.HighlightListItem--text a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.HighlightListItem--text a:not([class]):hover,
  .HighlightListItem--text a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.HighlightListItem--text a:not([class]):focus,
  .HighlightListItem--text a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.HighlightListItem--text small {
  display: inline-block;
  font-size: 0.75em;
}
.HighlightListItem--text strong,
.HighlightListItem--text b {
  font-weight: bold;
}
.HighlightListItem--text em,
.HighlightListItem--text i {
  font-style: italic;
}
@media (min-width: 750px) {
.HighlightListItem--text {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.HighlightListItem--text {
    font-size: 16px;
}
}
.HighlightListItem--text a:not([class]),
.HighlightListItem--text a[class=""] {
  color: rgba(var(--c-black), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.HighlightList[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.HighlightList[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.HighlightList[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.HighlightList[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.HighlightList[data-compose=white] {
    margin-bottom: 96px;
}
}
.HighlightList:not([data-layout=inline]) {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.HighlightList--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.HighlightList--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.HighlightList--title {
    font-size: 22px;
}
}
@media screen and (min-width: 750px) {
.HighlightList--title {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
}
}
@media screen and (min-width: 750px) and (min-width: 750px) {
.HighlightList--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media screen and (min-width: 750px) and (min-width: 1280px) {
.HighlightList--title {
    font-size: 28px;
}
}
@media screen and (min-width: 750px) and (max-width: 750px) {
.HighlightList--title {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.HighlightListArea {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.HighlightListArea {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.HighlightListArea {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.HighlightListArea {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.HighlightListArea {
    margin-bottom: 64px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.IFrameArea[data-compose=white] {
  margin-top: 64px;
  margin-bottom: 64px;
}
@media screen and (min-width: 750px) {
.IFrameArea[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.IFrameArea[data-compose=white] {
    margin-top: 128px;
}
}
@media screen and (min-width: 750px) {
.IFrameArea[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.IFrameArea[data-compose=white] {
    margin-bottom: 128px;
}
}
.IFrameArea--body {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}
[data-layout=wide] > .IFrameArea--body {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
[data-layout=medium] > .IFrameArea--body {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.IconCards:not([data-display=inline])[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.IconCards:not([data-display=inline])[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.IconCards:not([data-display=inline])[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.IconCards:not([data-display=inline])[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.IconCards:not([data-display=inline])[data-compose=white] {
    margin-bottom: 64px;
}
}
.IconCards:not([data-layout=horizontal]) {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.IconCards--grid {
  display: grid;
  grid-auto-rows: 1fr;
  grid-gap: var(--spacing-20, 20px);
  grid-template-columns: 1fr;
  justify-content: center;
}
@media screen and (min-width: 750px) {
.IconCards--grid {
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
}
}
.IconCards--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24, 24px);
  overflow: hidden;
  text-align: center;
  background: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.IconCards--card {
    padding: var(--spacing-48, 48px) var(--spacing-24, 24px);
}
}
.IconCards--card--icon {
  margin-bottom: var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.IconCards--card--icon {
    margin-bottom: var(--spacing-24, 24px);
}
}
.IconCards--card--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.IconCards--card--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.IconCards--card--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.IconCards--card--title {
    line-height: 1.2;
}
}
.IconCards--card--text {
  font-size: 14px;
  line-height: 1.2;
  margin-top: var(--spacing-4, 4px);
}
.IconCards--card--text > *:first-child {
  margin-top: 0;
}
.IconCards--card--text > *:last-child {
  margin-bottom: 0;
}
.IconCards--card--text > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.IconCards--card--text > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.IconCards--card--text .Button + .Button {
  margin-left: 16px;
}
.IconCards--card--text p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.IconCards--card--text a:not([class]),
.IconCards--card--text a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.IconCards--card--text a:not([class]):hover,
  .IconCards--card--text a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.IconCards--card--text a:not([class]):focus,
  .IconCards--card--text a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.IconCards--card--text small {
  display: inline-block;
  font-size: 0.75em;
}
.IconCards--card--text strong,
.IconCards--card--text b {
  font-weight: bold;
}
.IconCards--card--text em,
.IconCards--card--text i {
  font-style: italic;
}
@media (min-width: 750px) {
.IconCards--card--text {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.IconCards--card--text {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.IconCards--card--text {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ImageWithCaption {
  position: relative;
  clip-path: inset(0 round var(--border-radius-default));
}
@media screen and (hover: hover) and (max-width: 750px) {
.ImageWithCaption:hover .ImageWithCaption--caption {
    transform: none;
    visibility: visible;
    opacity: 1;
    transition: opacity 150ms, visibility 200ms, transform 150ms ease-in-out;
}
}
@media screen and (hover: hover) and (max-width: 750px) {
.ImageWithCaption:focus .ImageWithCaption--caption {
    transform: none;
    visibility: visible;
    opacity: 1;
    transition: opacity 150ms, visibility 200ms, transform 150ms ease-in-out;
}
}
@media screen and (max-width: 750px) {
.ImageWithCaption[data-is-active=true] .ImageWithCaption--caption {
    transform: none;
    visibility: visible;
    opacity: 1;
    transition: opacity 150ms, visibility 200ms, transform 150ms ease-in-out;
}
}
.ImageWithCaption--image {
  overflow: hidden;
  border-radius: var(--border-radius-default);
}
.ImageWithCaption--caption {
  font-size: 14px;
  line-height: 1.2;
  transition: opacity 200ms, visibility 200ms;
}
@media (min-width: 750px) {
.ImageWithCaption--caption {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ImageWithCaption--caption {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ImageWithCaption--caption {
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) {
.ImageWithCaption--caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    color: rgba(var(--c-white), 1);
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
}
}
@media screen and (max-width: 750px) {
.ImageWithCaption--caption {
    position: relative;
    margin-top: var(--spacing-8, 8px);
    color: rgba(var(--c-grey), 1);
}
}
.ImageWithCaption--caption::before {
  display: block;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: calc(100% + 20px);
  min-height: 100px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
@media screen and (max-width: 750px) {
.ImageWithCaption--caption::before {
    display: none;
}
}
@media screen and (min-width: 750px) {
.ImageWithCaption:hover .ImageWithCaption--caption {
    visibility: visible;
    opacity: 1;
}
}
[data-layout=landscape_fullwidth] .ImageWithCaption--caption {
  max-width: 860px;
}
[data-layout=landscape_fullwidth] .ImageWithCaption--caption::before {
  right: -50vw;
  left: -50vw;
}
.ImageWithCaption--caption--inner {
  position: sticky;
  left: 0;
  width: max(60%, 628px);
  max-width: min(100%, 100vw - var(--site-padding) * 2);
  max-width: min(100%, 100cqw - var(--site-padding) * 2);
}
@media screen and (min-width: 750px) {
.ImageWithCaption--caption--inner {
    padding: var(--spacing-20, 20px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ImageGrid {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ImageGrid[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ImageGrid[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ImageGrid[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ImageGrid[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ImageGrid[data-compose=white] {
    margin-bottom: 96px;
}
}
.ImageGrid--list {
  --image-grid--gap: 80px;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--image-grid--gap);
}
@media screen and (max-width: 1280px) {
.ImageGrid--list {
    --image-grid--gap: 60px;
}
}
@media screen and (max-width: 750px) {
.ImageGrid--list {
    --image-grid--gap: 40px;
}
}
@media screen and (max-width: 580px) {
.ImageGrid--list {
    --image-grid--gap: 0;
}
}
.ImageGrid--list > li {
  position: relative;
  display: flex;
  align-items: center;
}
.ImageGrid--list > li > * {
  width: 100%;
}
.ImageGrid--list > li:nth-child(4n+1),
.ImageGrid--list > li:nth-child(4n+4) {
  width: 70%;
}
@media screen and (max-width: 580px) {
.ImageGrid--list > li:nth-child(4n+1),
  .ImageGrid--list > li:nth-child(4n+4) {
    width: 100%;
}
}
.ImageGrid--list > li:nth-child(4n+3),
.ImageGrid--list > li:nth-child(4n+1) {
  padding-right: calc(var(--image-grid--gap) * 0.5);
}
.ImageGrid--list > li:nth-child(4n+2),
.ImageGrid--list > li:nth-child(4n+4) {
  padding-left: calc(var(--image-grid--gap) * 0.5);
}
.ImageGrid--list > li:nth-child(4n+2),
.ImageGrid--list > li:nth-child(4n+3) {
  width: 30%;
}
@media screen and (max-width: 580px) {
.ImageGrid--list > li:nth-child(4n+2),
  .ImageGrid--list > li:nth-child(4n+3) {
    width: 50%;
    margin: var(--spacing-32, 32px) var(--spacing-32, 32px) var(--spacing-24, 24px) auto;
}
}
@media screen and (max-width: 580px) {
.ImageGrid--list > li:nth-child(4n+3) {
    z-index: 1;
    order: 1;
    margin-right: auto;
    margin-left: var(--spacing-32, 32px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ImageSlider {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ImageSlider[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ImageSlider[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ImageSlider[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ImageSlider[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ImageSlider[data-compose=white] {
    margin-bottom: 96px;
}
}
@media screen and (max-width: 750px) {
.ImageSlider--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.ImageSlider--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.ImageSlider--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.ImageSlider--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.ImageSlider--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
.ImageSlider--image {
  height: calc((100vw - var(--site-padding) * 2) / 3 * 4);
}
@media screen and (min-width: 580px) {
.ImageSlider--image {
    height: calc((100vw - var(--site-padding)) / 2);
}
}
@media screen and (min-width: 1280px) {
.ImageSlider--image {
    height: calc(1440px / 2);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ImageTeaser {
  --border-radius: var(--border-radius-default);
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
  position: relative;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
  clip-path: inset(0 round var(--border-radius));
}
.ImageTeaser[data-plain=true] {
  background-color: rgba(var(--c-green-light), 1);
}
@media (hover: hover) {
.ImageTeaser:hover {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.ImageTeaser:hover .ImageTeaser--image {
    transform: scale(1.05);
}
.ImageTeaser:focus {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.ImageTeaser:focus .ImageTeaser--image {
    transform: scale(1.05);
}
}
.ImageTeaser--inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: var(--spacing-24, 24px);
}
@media screen and (min-width: 750px) {
.ImageTeaser--inner {
    padding: var(--spacing-40, 40px);
}
.ImageTeaser[data-variant=small] .ImageTeaser--inner {
    padding: var(--spacing-24, 24px);
}
.ImageTeaser[data-variant=xsmall] .ImageTeaser--inner {
    padding: var(--spacing-32, 32px);
}
.ImageTeaser[data-variant=hero] .ImageTeaser--inner {
    padding: var(--spacing-48, 48px) var(--spacing-56, 56px);
}
}
.ImageTeaser--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ImageTeaser--image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ImageTeaser--image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  /* mix-blend-mode: soft-light; */
  content: "";
}
.ImageTeaser--badge {
  justify-self: flex-start;
  margin-bottom: var(--spacing-32, 32px);
}
@media screen and (min-width: 1000px) {
.ImageTeaser--badge {
    margin-bottom: var(--spacing-64, 64px);
}
}
.ImageTeaser--content {
  position: relative;
  justify-self: flex-end;
  width: 100%;
  max-width: 580px;
  color: rgba(var(--c-white), 1);
  word-wrap: break-word;
}
.ImageTeaser[data-plain=true] .ImageTeaser--content {
  color: rgba(var(--c-black), 1);
}
.ImageTeaser:not([data-plain]) .ImageTeaser--content, .ImageTeaser[data-plain=false] .ImageTeaser--content {
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}
.ImageTeaser--topic {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.ImageTeaser--topic {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ImageTeaser--topic {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ImageTeaser--topic {
    line-height: 1.2;
}
}
.ImageTeaser[data-variant=xsmall] .ImageTeaser--topic {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.ImageTeaser[data-variant=xsmall] .ImageTeaser--topic {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ImageTeaser[data-variant=xsmall] .ImageTeaser--topic {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ImageTeaser[data-variant=xsmall] .ImageTeaser--topic {
    line-height: 1.2;
}
}
.ImageTeaser--title {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.ImageTeaser--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.ImageTeaser--title {
    font-size: 34px;
}
}
.ImageTeaser[data-variant=xsmall] .ImageTeaser--title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
@media (min-width: 750px) {
.ImageTeaser[data-variant=xsmall] .ImageTeaser--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.ImageTeaser[data-variant=xsmall] .ImageTeaser--title {
    font-size: 16px;
}
}
.ImageTeaser[data-variant=small] .ImageTeaser--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ImageTeaser[data-variant=small] .ImageTeaser--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.ImageTeaser[data-variant=small] .ImageTeaser--title {
    font-size: 22px;
}
}
.ImageTeaser[data-variant=hero] .ImageTeaser--title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.ImageTeaser[data-variant=hero] .ImageTeaser--title {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.ImageTeaser[data-variant=hero] .ImageTeaser--title {
    font-size: 50px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ImageTeaserArea {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ImageTeaserArea[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ImageTeaserArea[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ImageTeaserArea[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ImageTeaserArea[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ImageTeaserArea[data-compose=white] {
    margin-bottom: 96px;
}
}
.ImageTeaserArea--teaser {
  height: calc((100vw - var(--site-padding) * 2) / 3 * 4);
}
@media screen and (min-width: 580px) {
.ImageTeaserArea--teaser {
    height: calc((100vw - var(--site-padding)) / 2);
}
}
@media screen and (min-width: 1280px) {
.ImageTeaserArea--teaser {
    height: calc(1440px / 2);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.VideoEmbed {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--border-radius-default);
  aspect-ratio: 16/9;
}
.VideoEmbed[data-layout=portrait] {
  aspect-ratio: 9/16;
}
.VideoEmbed > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (hover: hover) {
.VideoEmbed:hover .VideoEmbed--button {
    transform: scale(1.1);
}
.VideoEmbed:hover .VideoEmbed--button::after {
    transform: scale(0.9);
}
.VideoEmbed:hover .VideoEmbed--poster {
    transform: scale(1.05);
}
.VideoEmbed:focus .VideoEmbed--button {
    transform: scale(1.1);
}
.VideoEmbed:focus .VideoEmbed--button::after {
    transform: scale(0.9);
}
.VideoEmbed:focus .VideoEmbed--poster {
    transform: scale(1.05);
}
}
.VideoEmbed--poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-playing=true] .VideoEmbed--poster {
  z-index: -1;
  pointer-events: none;
}
.VideoEmbed--button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  margin-left: -24px;
  background-color: rgba(var(--c-white), 1);
  border-radius: 100%;
  transition: transform 0.1s ease-in-out;
}
.VideoEmbed--button::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin-top: -8px;
  margin-left: -5px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentcolor;
  transition: inherit;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.MediaArea[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.MediaArea[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.MediaArea[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.MediaArea[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.MediaArea[data-compose=white] {
    margin-bottom: 96px;
}
}
.MediaArea[data-layout=landscape_fullwidth] {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}
.MediaArea[data-layout=landscape] {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.MediaArea[data-layout=portrait] {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.MediaArea[data-layout=portrait] .MediaArea--media {
  max-width: 360px;
  margin: 0 auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.MediaTextArea {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  --row-gap: var(--spacing-24, 24px);
  --column-gap: var(--spacing-24, 24px);
  display: grid;
  grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  --media-text-area--order: -1;
}
.MediaTextArea[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.MediaTextArea[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.MediaTextArea[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.MediaTextArea[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.MediaTextArea[data-compose=white] {
    margin-bottom: 96px;
}
}
.MediaTextArea[data-layout=switched] {
  --media-text-area--order: 1;
}
.MediaTextArea + .MediaTextArea {
  margin-top: 32px;
}
@media screen and (min-width: 750px) {
.MediaTextArea + .MediaTextArea {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.MediaTextArea + .MediaTextArea {
    margin-top: 64px;
}
}
.MediaTextArea--media {
  grid-column-start: auto;
  grid-column-end: span 12;
  top: 32px;
  overflow: hidden;
  border-radius: var(--border-radius-default);
}
@media screen and (width > 581px) {
.MediaTextArea--media {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
@media screen and (min-width: 750px) {
.MediaTextArea--media {
    top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.MediaTextArea--media {
    top: 64px;
}
}
.MediaTextArea--media[data-type=image] {
  aspect-ratio: 3/2;
}
@media screen and (min-width: 580px) {
.MediaTextArea--media {
    position: sticky;
}
.MediaTextArea[data-layout=switched] .MediaTextArea--media {
    order: 1;
}
}
.MediaTextArea--content--inner,
.MediaTextArea--media--inner {
  transform: translateX(calc(-70% * var(--media-text-area--order, -1)));
  visibility: hidden;
  opacity: 0;
  transition: transform 0.95s cubic-bezier(0.25, 1, 0.5, 1), opacity 500ms ease-in, visibility 0.95s;
  will-change: transform;
}
[data-did-appear=true] .MediaTextArea--content--inner,
[data-did-appear=true] .MediaTextArea--media--inner {
  transform: none;
  visibility: visible;
  opacity: 1;
}
.MediaTextArea--content--inner {
  transform: translateX(calc(70% * var(--media-text-area--order, -1)));
  transition-delay: 200ms;
}
.MediaTextArea--content {
  grid-column-start: auto;
  grid-column-end: span 12;
  padding-right: var(--site-padding);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
  overflow: hidden;
}
@media screen and (width > 581px) {
.MediaTextArea--content {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
@media (min-width: 750px) {
.MediaTextArea--content {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.MediaTextArea--content {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.MediaTextArea--content {
    line-height: 1.4;
}
}
@media screen and (min-width: 580px) {
.MediaTextArea--content {
    padding-right: var(--site-padding);
    padding-left: calc(var(--site-padding) - var(--spacing-24, 24px));
}
.MediaTextArea[data-layout=switched] .MediaTextArea--content {
    padding-right: calc(var(--site-padding) - var(--spacing-24, 24px));
    padding-left: var(--site-padding);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.MediaTextBox[data-compose=white] {
  margin-top: 64px;
  margin-bottom: 64px;
}
@media screen and (min-width: 750px) {
.MediaTextBox[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.MediaTextBox[data-compose=white] {
    margin-top: 128px;
}
}
@media screen and (min-width: 750px) {
.MediaTextBox[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.MediaTextBox[data-compose=white] {
    margin-bottom: 128px;
}
}
@media screen and (min-width: 580px) {
.MediaTextBox {
    max-width: 1440px;
    max-width: calc(1440px + var(--site-padding) * 2);
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    margin-right: auto;
    margin-left: auto;
}
}
.MediaTextBox--inner {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40, 40px);
  align-items: center;
  padding-top: var(--spacing-40, 40px);
  padding-bottom: var(--spacing-40, 40px);
  overflow: hidden;
  background-color: rgba(var(--c-green-light), 1);
}
@media screen and (min-width: 580px) {
.MediaTextBox--inner {
    flex-direction: row;
    padding: var(--spacing-60, 60px);
    border-radius: var(--border-radius-default);
}
.MediaTextBox[data-layout=switched] .MediaTextBox--inner {
    flex-direction: row-reverse;
}
}
@media screen and (min-width: 1000px) {
.MediaTextBox--inner {
    gap: var(--spacing-80, 80px);
}
}
.MediaTextBox--media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-default);
}
.MediaTextBox--media[data-type=image] {
  aspect-ratio: 3/2;
}
@media screen and (min-width: 580px) {
.MediaTextBox--media {
    flex: 0 0 calc(50% + var(--spacing-60, 60px) - var(--spacing-12, 12px));
}
}
.MediaTextBox--content {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
  width: 100%;
}
@media (min-width: 750px) {
.MediaTextBox--content {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.MediaTextBox--content {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.MediaTextBox--content {
    line-height: 1.4;
}
}
@media screen and (min-width: 580px) {
.MediaTextBox--content {
    flex: 1 0 0px;
}
}
@media screen and (min-width: 1000px) {
.MediaTextBox--content {
    padding-right: var(--site-padding);
}
.MediaTextBox[data-layout=switched] .MediaTextBox--content {
    padding-right: 0;
    padding-left: var(--site-padding);
}
}
.MediaTextBox--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.MediaTextBox--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.MediaTextBox--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.MediaTextBox--title {
    line-height: 1.2;
}
}
.MediaTextBox--title[data-size=small] {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.MediaTextBox--title[data-size=small] {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.MediaTextBox--title[data-size=small] {
    font-size: 22px;
}
}
.MediaTextBox--text {
  font-size: 14px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.MediaTextBox--text {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.MediaTextBox--text {
    font-size: 16px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderStatusSteps--list {
  display: flex;
  gap: var(--spacing-14, 14px);
  align-items: center;
  max-width: 100%;
}
.OrderStatusSteps--item {
  position: relative;
}
.OrderStatusSteps--item:not(:last-child)::after {
  --steps-border-width: 12px;
  position: absolute;
  top: 50%;
  right: -1px;
  left: auto;
  width: var(--steps-border-width);
  height: 1px;
  background-color: rgba(var(--c-grey), 1);
  transform: translateX(var(--steps-border-width));
  opacity: 0.4;
  content: "";
}
.OrderStatusSteps--status {
  position: absolute;
  right: var(--spacing-8, 8px);
  bottom: var(--spacing-8, 8px);
}
.OrderStatusSteps--icon {
  border: 1px solid rgba(var(--c-white), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderStatus {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16, 16px);
}
.OrderStatus--details {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8, 8px);
  align-items: flex-start;
}
@media (min-width: 750px) {
.OrderStatus--details {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.OrderStatus--details {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.OrderStatus--details {
    line-height: 1.2;
}
}
.OrderStatus--link {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.OrderStatus--link:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.OrderStatus--link:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderStatusArea {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
}
.OrderStatusArea[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.OrderStatusArea[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.OrderStatusArea[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.OrderStatusArea[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.OrderStatusArea[data-compose=white] {
    margin-bottom: 64px;
}
}
.OrderStatusArea--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.OrderStatusArea--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.OrderStatusArea--title {
    font-size: 22px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderStatusEvent {
  display: flex;
  gap: var(--spacing-24, 24px);
  align-items: center;
}
.OrderStatusEvent--icon {
  flex: 0 0 auto;
}
.OrderStatusEvent--icon[data-shape-color=grey-light] {
  --c-icon-path: rgba(var(--c-grey), 1);
}
.OrderStatusEvent--content {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.OrderStatusEvent--content {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.OrderStatusEvent--content {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.OrderStatusEvent--content {
    line-height: 1.2;
}
}
.OrderStatusEvent--date {
  color: rgba(var(--c-grey), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderStatusEvents li + li::before {
  display: block;
  width: 1px;
  height: 40px;
  margin-top: var(--spacing-8, 8px);
  margin-bottom: var(--spacing-8, 8px);
  margin-left: 18px;
  background-color: rgba(var(--c-grey), 1);
  opacity: 0.4;
  content: "";
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderStatusEventsArea {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32, 32px);
}
.OrderStatusEventsArea[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.OrderStatusEventsArea[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.OrderStatusEventsArea[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.OrderStatusEventsArea[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.OrderStatusEventsArea[data-compose=white] {
    margin-bottom: 64px;
}
}
.OrderStatusEventsArea--head > * + * {
  margin-top: var(--spacing-8, 8px);
}
.OrderStatusEventsArea--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.OrderStatusEventsArea--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.OrderStatusEventsArea--title {
    font-size: 22px;
}
}
.OrderStatusEventsArea--text {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.OrderStatusEventsArea--text {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.OrderStatusEventsArea--text {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.OrderStatusEventsArea--text {
    line-height: 1.2;
}
}
.OrderStatusEventsArea--link {
  font-size: 14px;
  line-height: 1.2;
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
  display: inline-block;
}
@media (min-width: 750px) {
.OrderStatusEventsArea--link {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.OrderStatusEventsArea--link {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.OrderStatusEventsArea--link {
    line-height: 1.2;
}
}
@media (hover: hover) {
.OrderStatusEventsArea--link:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.OrderStatusEventsArea--link:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PageIntro[data-layout=content-medium] {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.PageIntro[data-layout=content-medium][data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.PageIntro[data-layout=content-medium][data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.PageIntro[data-layout=content-medium][data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.PageIntro[data-layout=content-medium][data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.PageIntro[data-layout=content-medium][data-compose=white] {
    margin-bottom: 64px;
}
}
.PageIntro[data-layout=content-narrow] {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.PageIntro[data-layout=content-narrow][data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.PageIntro[data-layout=content-narrow][data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.PageIntro[data-layout=content-narrow][data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.PageIntro[data-layout=content-narrow][data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.PageIntro[data-layout=content-narrow][data-compose=white] {
    margin-bottom: 64px;
}
}
.PageIntro--inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
  margin-top: var(--spacing-64, 64px);
  margin-bottom: var(--spacing-64, 64px);
}
.PageIntro--title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.PageIntro--title {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.PageIntro--title {
    font-size: 50px;
}
}
.PageIntro--lead {
  font-size: 14px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.PageIntro--lead {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.PageIntro--lead {
    font-size: 16px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Profile {
  display: flex;
  gap: var(--spacing-12, 12px);
  align-items: center;
}
@media (hover: hover) {
a.Profile:hover .Profile--image .Image {
    transform: scale(1.1);
}
a.Profile:focus .Profile--image .Image {
    transform: scale(1.1);
}
}
.Profile--image {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--border-radius-circle);
}
.Profile--image > .Image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.Profile--info {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.Profile--info {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Profile--info {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Profile--info {
    line-height: 1.2;
}
}
.Profile--name {
  margin-bottom: 2px;
}
.Profile--role {
  color: rgba(var(--c-grey), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Quote[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.Quote[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.Quote[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.Quote[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.Quote[data-compose=white] {
    margin-bottom: 96px;
}
}
.Quote:not([data-layout=inline]) {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.Quote--inner {
  padding: var(--spacing-48, 48px);
  overflow: hidden;
  background-color: rgba(var(--c-green-light), 1);
  border-radius: var(--border-radius-default);
}
.Quote--blockquote {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 300;
}
@media (min-width: 750px) {
.Quote--blockquote {
    font-size: calc(1.1320754717vw + 9.5094339623px);
}
}
@media (min-width: 1280px) {
.Quote--blockquote {
    font-size: 24px;
}
}
@media screen and (max-width: 750px) {
.Quote--blockquote {
    line-height: 1.4;
}
}
.Quote--author {
  display: block;
  margin-top: var(--spacing-40, 40px);
}
.Quote--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.Quote--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.Quote--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.Quote--title {
    line-height: 1.2;
}
}
.Quote[data-layout=inline] .Quote--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Quote[data-layout=inline] .Quote--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.Quote[data-layout=inline] .Quote--title {
    font-size: 22px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
:root {
  --spinner-size: 50px;
}
.LoadingIndicator {
  text-align: center;
}
.LoadingIndicator[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.LoadingIndicator[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.LoadingIndicator[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.LoadingIndicator[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.LoadingIndicator[data-compose=white] {
    margin-bottom: 64px;
}
}
.LoadingIndicator--spinner {
  display: inline-block;
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: 2px solid currentcolor;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  will-change: transform;
  /* Sizes */
}
.LoadingIndicator--spinner[data-size=small] {
  --spinner-size: 16px;
}
.LoadingIndicator--spinner[data-size=large] {
  --spinner-size: 75px;
}
@keyframes spin {
to {
    transform: rotate(360deg);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ScriptArea[data-compose=white] {
  margin-top: 64px;
  margin-bottom: 64px;
}
@media screen and (min-width: 750px) {
.ScriptArea[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.ScriptArea[data-compose=white] {
    margin-top: 128px;
}
}
@media screen and (min-width: 750px) {
.ScriptArea[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.ScriptArea[data-compose=white] {
    margin-bottom: 128px;
}
}
.ScriptArea--body {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}
[data-layout=wide] > .ScriptArea--body {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
[data-layout=medium] > .ScriptArea--body {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceCard {
  position: relative;
  z-index: 0;
  display: flex;
  height: 150px;
  padding: var(--spacing-24, 24px);
  overflow: hidden;
  background-color: rgba(var(--c-green-light), 1);
  border: 1px solid rgba(var(--c-green-light), 1);
  border-radius: var(--border-radius-medium);
  transition: border-color 200ms;
}
.ServiceCard::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  padding-bottom: 100%;
  background-color: rgba(var(--c-white), 1);
  border-radius: 100%;
  transform: translate(-50%, -50%) scale(0.2);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.1s ease-out, opacity 0.05s ease-out, visibility 0.1s;
}
@media (hover: hover) {
.ServiceCard:hover {
    border-color: rgba(var(--c-black), 1);
}
.ServiceCard:hover::before {
    transform: translate(-50%, -50%) scale(1.41);
    visibility: visible;
    opacity: 1;
}
.ServiceCard:focus {
    border-color: rgba(var(--c-black), 1);
}
.ServiceCard:focus::before {
    transform: translate(-50%, -50%) scale(1.41);
    visibility: visible;
    opacity: 1;
}
}
.ServiceCard--inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.ServiceCard--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.ServiceCard--icon {
  margin-bottom: var(--spacing-8, 8px);
}
.ServiceCard--title {
  font-size: 14px;
  line-height: 1.2;
  margin-top: auto;
}
@media (min-width: 750px) {
.ServiceCard--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ServiceCard--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ServiceCard--title {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceCardsGrid {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ServiceCardsGrid[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ServiceCardsGrid[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ServiceCardsGrid[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ServiceCardsGrid[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ServiceCardsGrid[data-compose=white] {
    margin-bottom: 96px;
}
}
.ServiceCardsGrid--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.ServiceCardsGrid--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.ServiceCardsGrid--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.ServiceCardsGrid--title {
    line-height: 1.2;
}
}
.ServiceCardsGrid--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-8, 8px);
}
@media screen and (min-width: 580px) {
.ServiceCardsGrid--grid {
    grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 580px) {
.ServiceCardsGrid--item:last-child:nth-child(odd) {
    grid-column: 1/span 2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceCardsSlider {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ServiceCardsSlider[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ServiceCardsSlider[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ServiceCardsSlider[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ServiceCardsSlider[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ServiceCardsSlider[data-compose=white] {
    margin-bottom: 96px;
}
}
@media screen and (max-width: 1280px) {
.ServiceCardsSlider--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.ServiceCardsSlider--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.ServiceCardsSlider--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.ServiceCardsSlider--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.ServiceCardsSlider--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
.ServiceCardsSliderItem {
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
@media screen and (min-width: 580px) {
.ServiceCardsSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (3 - 1)) / 3);
}
}
@media screen and (min-width: 750px) {
.ServiceCardsSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (4 - 1)) / 4);
}
}
@media screen and (min-width: 1000px) {
.ServiceCardsSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (6 - 1)) / 6);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserClusterItem {
  --teaser-cluster-item-base: (100vw- var(--site-padding) * 2);
  --teaser-cluster-item-base: (100cqw - var(--site-padding) * 2);
  max-width: 85%;
  min-height: calc(var(--teaser-cluster-item-base) / 3 * 4);
}
@media screen and (min-width: 1600px) {
.TeaserClusterItem {
    --teaser-cluster-item-base: 1440px;
}
}
@media screen and (max-width: 580px) {
.TeaserClusterItem {
    aspect-ratio: 3/4;
}
}
@media screen and (min-width: 580px) {
.TeaserClusterItem {
    max-width: none;
    min-height: calc(var(--teaser-cluster-item-base) / 2);
}
}
.TeaserClusterItem[data-grid-size="1"] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
.TeaserClusterItem[data-grid-size="1/2"] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 581px) {
.TeaserClusterItem[data-grid-size="1/2"] {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserCluster {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}
.TeaserCluster[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.TeaserCluster[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserCluster[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.TeaserCluster[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserCluster[data-compose=white] {
    margin-bottom: 96px;
}
}
@media screen and (min-width: 580px) {
.TeaserCluster {
    display: flex;
    justify-content: center;
}
}
@media screen and (min-width: 580px) {
.TeaserCluster .ScrollSlider--bar {
    display: none;
}
}
.TeaserCluster--slider {
  --scrollslider-gap: var(--spacing-16, 16px);
}
@media screen and (max-width: 580px) {
.TeaserCluster--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.TeaserCluster--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.TeaserCluster--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.TeaserCluster--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.TeaserCluster--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
@media screen and (min-width: 580px) {
.TeaserCluster--slider {
    max-width: 1440px;
    width: 100%;
}
}
.TeaserCluster--slider .ScrollSlider--inner {
  width: 100%;
}
.TeaserCluster--slider .ScrollSlider--track {
  scroll-padding: var(--site-padding);
}
@media screen and (min-width: 580px) {
.TeaserCluster--slider .ScrollSlider--track {
    --row-gap: var(--spacing-24, 24px);
    --column-gap: var(--spacing-24, 24px);
    display: grid;
    grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    display: grid !important;
    grid-auto-rows: 1fr;
    width: 100%;
}
}
.Page > h1:first-child + .TeaserCluster {
  position: relative;
  margin-top: 0;
  padding-top: var(--spacing-24, 24px);
}
.Page > h1:first-child + .TeaserCluster::before {
  display: block;
  content: "";
  position: absolute;
  top: -100px;
  right: 0;
  left: 0;
  height: 50%;
  background-color: rgba(var(--c-green-light), 1);
}
@media screen and (min-width: 750px) {
.Page > h1:first-child + .TeaserCluster::before {
    height: 40%;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserGalleryItem {
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (1.175 - 1)) / 1.175);
  max-width: 85%;
  min-height: calc(var(--scrollslider-base) / 4 * 5);
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (min-width: 580px) {
.TeaserGalleryItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (1.5 - 1)) / 1.5);
}
}
@media screen and (min-width: 750px) {
.TeaserGalleryItem {
    aspect-ratio: 4/5;
    width: 100%;
    max-width: none;
    min-height: auto;
}
}
@media screen and (width > 581px) {
.TeaserGalleryItem {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
@media screen and (width > 751px) {
.TeaserGalleryItem {
    grid-column-start: auto;
    grid-column-end: span 4;
}
}
@media screen and (min-width: 750px) {
.TeaserGalleryItem:nth-child(1), .TeaserGalleryItem:nth-child(3), .TeaserGalleryItem:nth-child(4):not(:last-child), .TeaserGalleryItem:nth-child(6) {
    transform: translateY(80px);
    transform: translateY(calc(80px - var(--teaser-gallery-item-progress) * 80px));
}
}
/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserGallery {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  --teaser-gallery-progress: 0;
  --teaser-gallery-item-progress: max(0, min(1, var(--teaser-gallery-progress)));
}
.TeaserGallery[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.TeaserGallery[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserGallery[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.TeaserGallery[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserGallery[data-compose=white] {
    margin-bottom: 96px;
}
}
@media screen and (min-width: 750px) {
.TeaserGallery--grid {
    display: flex;
    justify-content: center;
    padding-bottom: 60px;
    /* dynamic padding-bottom to maintain consistent section spacing works with natural scroll but not with scroll snapping – repaint and reflow creates visual flickering */
    /* padding-bottom: calc(80px - (var(--teaser-gallery-item-progress) * 80px)); */
}
}
.TeaserGallery--slider {
  --scrollslider-gap: var(--spacing-16, 16px);
}
@media screen and (max-width: 750px) {
.TeaserGallery--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.TeaserGallery--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.TeaserGallery--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.TeaserGallery--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.TeaserGallery--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
@media screen and (min-width: 750px) {
.TeaserGallery--slider {
    max-width: 1000px;
    width: 100%;
}
}
.TeaserGallery--slider .ScrollSlider--inner {
  width: 100%;
}
@media screen and (min-width: 750px) {
.TeaserGallery--slider .ScrollSlider--overflow {
    overflow: visible;
}
}
.TeaserGallery--slider .ScrollSlider--track {
  scroll-padding: var(--site-padding);
}
@media screen and (min-width: 750px) {
.TeaserGallery--slider .ScrollSlider--track {
    --row-gap: var(--spacing-24, 24px);
    --column-gap: var(--spacing-24, 24px);
    display: grid;
    grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    display: grid !important;
    grid-auto-rows: 1fr;
    width: 100%;
    overflow: visible;
}
}
@media screen and (min-width: 1000px) {
.TeaserGallery--slider .ScrollSlider--track {
    gap: var(--spacing-40, 40px);
}
}
@media screen and (min-width: 750px) {
.TeaserGallery--slider .ScrollSlider--bar {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserGridItem {
  grid-column-start: auto;
  grid-column-end: span 12;
  --teaser-grid-item-base: (100vw - var(--site-padding) * 2);
  --teaser-grid-item-base: (100cqw - var(--site-padding) * 2);
  min-height: calc(var(--teaser-grid-item-base) / 3 * 4);
}
@media screen and (width > 581px) {
.TeaserGridItem {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
@media screen and (min-width: 1600px) {
.TeaserGridItem {
    --teaser-grid-item-base: 1440px;
}
}
@media screen and (min-width: 580px) {
.TeaserGridItem[data-grid-size="1"], .TeaserGridItem[data-grid-size="1/2"] {
    min-height: calc(var(--teaser-grid-item-base) / 2);
}
}
.TeaserGridItem[data-grid-size="1"] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
.TeaserGridItem[data-grid-size="1/2"] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 581px) {
.TeaserGridItem[data-grid-size="1/2"] {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
.TeaserGridItem[data-grid-size="1/4"] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 581px) {
.TeaserGridItem[data-grid-size="1/4"] {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
@media screen and (width > 751px) {
.TeaserGridItem[data-grid-size="1/4"] {
    grid-column-start: auto;
    grid-column-end: span 4;
}
}
@media screen and (width > 1001px) {
.TeaserGridItem[data-grid-size="1/4"] {
    grid-column-start: auto;
    grid-column-end: span 3;
}
}
@media screen and (min-width: 580px) {
.TeaserGridItem[data-grid-size="1/4"] {
    min-height: calc(var(--teaser-grid-item-base) / 3 * 2);
}
}
@media screen and (min-width: 750px) {
.TeaserGridItem[data-grid-size="1/4"] {
    min-height: calc(var(--teaser-grid-item-base) / 3 * 4 / 3);
}
}
@media screen and (min-width: 1000px) {
.TeaserGridItem[data-grid-size="1/4"] {
    min-height: calc(var(--teaser-grid-item-base) / 3);
}
}
.TeaserGridItem[data-row-height=auto] {
  min-height: auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserGrid[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.TeaserGrid[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserGrid[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.TeaserGrid[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserGrid[data-compose=white] {
    margin-bottom: 96px;
}
}
.TeaserGrid:not([data-layout=account]) {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 1000px) {
.TeaserGrid[data-layout=account] .TeaserGridItem {
    --teaser-grid-item-base: ((100vw / 12 * 8) - var(--site-padding) * 2);
}
}
@media screen and (min-width: 1600px) {
.TeaserGrid[data-layout=account] .TeaserGridItem {
    --teaser-grid-item-base: calc(1440px / 12 * 8);
}
}
.TeaserGrid--grid {
  --row-gap: var(--spacing-24, 24px);
  --column-gap: var(--spacing-24, 24px);
  display: grid;
  grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CategoryTeaser {
  --border-radius: var(--border-radius-default);
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius);
}
@media screen and (max-width: 580px) {
.CategoryTeaser[data-variant=mood] {
    border: 1px solid rgba(var(--c-border));
}
}
@media (hover: hover) {
.CategoryTeaser:hover {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.CategoryTeaser:hover .CategoryTeaser--mood {
    transform: scale(1.05);
}
.CategoryTeaser:focus {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.CategoryTeaser:focus .CategoryTeaser--mood {
    transform: scale(1.05);
}
}
.CategoryTeaser--link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.CategoryTeaser[data-variant=mood] .CategoryTeaser--link {
  padding: var(--spacing-16, 16px);
}
@media screen and (min-width: 580px) {
.CategoryTeaser[data-variant=mood] .CategoryTeaser--link {
    padding: var(--spacing-24, 24px);
}
}
@media screen and (min-width: 750px) {
.CategoryTeaser[data-variant=mood] .CategoryTeaser--link {
    padding: var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1280px) {
.CategoryTeaser[data-variant=mood] .CategoryTeaser--link {
    padding: var(--spacing-40, 40px);
}
}
.CategoryTeaser--mood {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.CategoryTeaser--card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  justify-self: flex-end;
  padding: var(--spacing-24, 24px);
  overflow: hidden;
}
.CategoryTeaser[data-variant=mood] .CategoryTeaser--card {
  flex: 0 0 auto;
  width: 100%;
  max-width: 360px;
  margin-top: auto;
  background-color: white;
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.CategoryTeaser[data-variant=mood] .CategoryTeaser--card {
    padding: var(--spacing-32, 32px);
}
}
.CategoryTeaser[data-variant=grey] .CategoryTeaser--card {
  flex: 1 0 auto;
}
@media screen and (min-width: 750px) {
.CategoryTeaser[data-variant=grey] .CategoryTeaser--card {
    padding: var(--spacing-40, 40px);
}
}
.CategoryTeaser--image {
  mix-blend-mode: multiply;
}
.CategoryTeaser[data-variant=mood] .CategoryTeaser--image {
  max-width: 75px;
}
@media screen and (min-width: 580px) {
.CategoryTeaser[data-variant=mood] .CategoryTeaser--image {
    max-width: 100px;
}
}
.CategoryTeaser[data-variant=grey] .CategoryTeaser--image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  display: flex;
  justify-content: center;
  margin-top: auto;
  margin-bottom: auto;
  padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
}
.CategoryTeaser[data-variant=grey] .CategoryTeaser--image .Image {
  width: 80%;
  max-width: 264px;
}
.CategoryTeaser[data-variant=grey]:hover .CategoryTeaser--image {
  transform: scale(1.05);
}
.CategoryTeaser--info {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-8, 8px);
}
.TeaserSlider.TeaserSlider .CategoryTeaser--info {
  align-items: flex-end;
}
.CategoryTeaser--title {
  min-width: 0;
}
.CategoryTeaser[data-variant=mood] .CategoryTeaser--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.CategoryTeaser[data-variant=mood] .CategoryTeaser--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.CategoryTeaser[data-variant=mood] .CategoryTeaser--title {
    font-size: 22px;
}
}
.CategoryTeaser[data-variant=grey] .CategoryTeaser--title {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.CategoryTeaser[data-variant=grey] .CategoryTeaser--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.CategoryTeaser[data-variant=grey] .CategoryTeaser--title {
    font-size: 34px;
}
}
.TeaserSlider.TeaserSlider .CategoryTeaser--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 2px;
}
@media (min-width: 750px) {
.TeaserSlider.TeaserSlider .CategoryTeaser--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.TeaserSlider.TeaserSlider .CategoryTeaser--title {
    font-size: 22px;
}
}
[data-icon].CategoryTeaser--arrow {
  clip-path: inset(-10%);
  flex: 0 0 auto;
}
[data-icon].CategoryTeaser--arrow::before {
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}
@media (hover: hover) {
.CategoryTeaser:hover [data-icon].CategoryTeaser--arrow::before, [data-icon].CategoryTeaser--arrow:hover::before {
    transform: scale(1.1);
}
.CategoryTeaser:hover [data-icon].CategoryTeaser--arrow > svg, [data-icon].CategoryTeaser--arrow:hover > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
[data-icon].CategoryTeaser--arrow:focus::before {
    transform: scale(1.1);
}
[data-icon].CategoryTeaser--arrow:focus > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductCardVariations {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  gap: var(--spacing-8, 8px);
  height: 1.4em;
  overflow: hidden;
}
@media (min-width: 750px) {
.ProductCardVariations {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductCardVariations {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductCardVariations {
    line-height: 1.4;
}
}
.ProductCardVariations > li {
  white-space: nowrap;
  z-index: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductCardVariant {
  position: relative;
  display: block;
  padding-right: var(--spacing-4, 4px);
  padding-left: var(--spacing-4, 4px);
}
@media (hover: hover) {
.ProductCardVariant.isActive .ProductCardVariant--inner, .ProductCardVariant:hover .ProductCardVariant--inner {
    border-color: rgba(var(--c-black), 1);
}
.ProductCardVariant:focus .ProductCardVariant--inner {
    border-color: rgba(var(--c-black), 1);
}
}
.ProductCardVariant--inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 33px;
  padding-top: 2px;
  padding-bottom: var(--spacing-8, 8px);
  overflow: hidden;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.ProductCardVariant--image {
  max-width: 100%;
  max-height: 100%;
  transition: transform 200ms ease-in-out;
}
.ProductCardVariant:hover .ProductCardVariant--image {
  transform: translateY(-2px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductCardVariantSelect {
  display: flex;
  align-items: flex-start;
  max-height: 33px;
  overflow: hidden;
}
.ProductCardVariantSelect--list {
  display: flex;
  flex-wrap: wrap;
  margin-left: var(--spacing--4, -4px);
  page-break-inside: avoid;
}
.ProductCardVariantSelect--additional {
  font-size: 12px;
  line-height: 1.4;
  padding-left: var(--spacing-12, 12px);
}
@media (min-width: 750px) {
.ProductCardVariantSelect--additional {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductCardVariantSelect--additional {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductCardVariantSelect--additional {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductCard {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-24, 24px);
  background-color: rgba(var(--c-white), 1);
}
.ProductCard[data-with-border=true] {
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  transition: border-color 0.2s ease-out;
}
@media (hover: hover) {
.ProductCard[data-with-border=true]:hover {
    border-color: rgba(var(--c-black), 1);
}
.ProductCard[data-with-border=true]:focus {
    border-color: rgba(var(--c-black), 1);
}
}
@media screen and (min-width: 750px) {
.ProductCard[data-variant=large] {
    flex-direction: row-reverse;
    gap: var(--spacing-32, 32px);
    justify-content: space-between;
    padding: var(--spacing-32, 32px);
}
}
.ProductCard[data-layout=fill] {
  flex-grow: 1;
  width: 100%;
  min-height: 100%;
}
.ProductCard[data-layout=fill] .ProductCard--imageWrapper {
  margin-top: auto;
  margin-bottom: auto;
}
.ProductCard[data-layout=fill] .ProductCard--content {
  margin-top: 0;
}
.ProductCard:not([data-with-border=true])::after {
  display: block;
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--c-black), 1);
  border-radius: var(--border-radius-default);
  visibility: hidden;
  opacity: 0;
  transition: border-color 70ms ease-out, visibility 70ms ease-out, opacity 70ms ease-out;
  pointer-events: none;
  inset: -16px -1px;
}
@media screen and (max-width: 1000px) {
.ProductCard:not([data-with-border=true])::after {
    border: none;
    border-radius: 0;
}
}
@media (hover: hover) {
.ProductCard:focus-within::after, .ProductCard:hover::after {
    transform: none;
    visibility: visible;
    opacity: 1;
}
.ProductCard:focus-within .ProductCard--image, .ProductCard:hover .ProductCard--image {
    transform: translateY(-4px);
}
.ProductCard:focus-within .ProductCard--link, .ProductCard:hover .ProductCard--link {
    inset: -16px 0;
}
}
@media screen and (hover: hover) and (max-width: 1000px) {
.ProductCard:focus-within .ProductCard--link, .ProductCard:hover .ProductCard--link {
    inset: 0;
}
}
@media (hover: hover) {
.ProductCard:focus::after {
    transform: none;
    visibility: visible;
    opacity: 1;
}
.ProductCard:focus .ProductCard--image {
    transform: translateY(-4px);
}
.ProductCard:focus .ProductCard--link {
    inset: -16px 0;
}
}
@media screen and (hover: hover) and (max-width: 1000px) {
.ProductCard:focus .ProductCard--link {
    inset: 0;
}
}
.ProductCard--badge {
  position: absolute;
  top: var(--spacing-12, 12px);
  left: var(--spacing-24, 24px);
  z-index: 1;
  display: flex;
  gap: var(--spacing-8, 8px);
}
@media screen and (min-width: 750px) {
.ProductCard[data-variant=large] .ProductCard--badge {
    top: var(--spacing-24, 24px);
    left: var(--spacing-32, 32px);
}
}

/* .ProductCard--whishlist {} */
.ProductCard--imageWrapper > .Image {
  width: 200px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 750px) {
.ProductCard[data-variant=large] .ProductCard--imageWrapper {
    flex: 1 1 50%;
    padding: var(--spacing-24, 24px);
}
.ProductCard[data-variant=large] .ProductCard--imageWrapper > .Image {
    width: 100%;
}
}
.ProductCard--image {
  transition: transform 200ms ease-in-out;
}
.ProductCard--content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.ProductCard[data-variant=large] .ProductCard--content {
    flex: 1 1 50%;
}
}
.ProductCard--prices {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ProductCard--prices {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductCard--prices {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductCard--prices {
    line-height: 1.2;
}
}
.ProductCard--prices .ProductPrice {
  flex-wrap: wrap;
}
.ProductCard--prices .ProductPrice > span {
  flex: 0 1 85px;
}
.ProductCard--title .ProductCard--brand {
  font-weight: 700;
}
.ProductCard--variations {
  visibility: hidden;
  opacity: 0;
  transition: opacity 70ms ease-out, visibility 70ms ease-out;
}
.ProductCard:hover .ProductCard--variations {
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 1000px) {
.ProductCard--variations {
    display: none;
}
}
.ProductCard--variantSelect {
  position: relative;
  z-index: 1;
}
.ProductCard--variantSale {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  gap: var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.ProductCard--variantSale {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductCard--variantSale {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductCard--variantSale {
    line-height: 1.4;
}
}
.ProductCard--variantSale [data-icon] {
  color: rgba(var(--c-signal-red), 1);
}
.ProductCard--link {
  position: absolute;
  inset: 0;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductSliderBox:not([data-layout=grid-item]) {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ProductSliderBox:not([data-layout=grid-item])[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ProductSliderBox:not([data-layout=grid-item])[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ProductSliderBox:not([data-layout=grid-item])[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ProductSliderBox:not([data-layout=grid-item])[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ProductSliderBox:not([data-layout=grid-item])[data-compose=white] {
    margin-bottom: 64px;
}
}
@media screen and (max-width: 750px) {
.ProductSliderBox {
    margin-left: var(--site-padding-reset);
    margin-right: var(--site-padding-reset);
}
}
.ProductSliderBox--inner {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40, 40px);
  height: 100%;
  padding-top: var(--spacing-64, 64px);
  padding-bottom: var(--spacing-64, 64px);
  background-color: rgba(var(--c-green-light), 1);
}
@media screen and (min-width: 750px) {
.ProductSliderBox--inner {
    gap: var(--site-padding);
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    border-radius: var(--border-radius-default);
}
}
.ProductSliderBox--content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-16, 16px);
}
.ProductSliderBox--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ProductSliderBox--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.ProductSliderBox--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.ProductSliderBox--title {
    line-height: 1.2;
}
}
.ProductSliderBox--text {
  font-size: 14px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ProductSliderBox--text {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.ProductSliderBox--text {
    font-size: 16px;
}
}
@media screen and (min-width: 750px) {
.ProductSliderBox--products {
    /* calculated based on design */
    flex: 0 0 67.2%;
    max-width: 67.2%;
}
}
.ProductSliderBox--slider {
  max-width: 100%;
  --scrollslider-base: 100%;
}
@media screen and (max-width: 750px) {
.ProductSliderBox--slider {
    max-width: 100vw;
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.ProductSliderBox--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.ProductSliderBox--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.ProductSliderBox--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.ProductSliderBox--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
.ProductSliderBoxItem {
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (1.5 - 1)) / 1.5);
}
@media screen and (min-width: 580px) {
.ProductSliderBoxItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2.5 - 1)) / 2.5);
}
}
@media screen and (min-width: 750px) {
.ProductSliderBoxItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
}
@media screen and (min-width: 1000px) {
.ProductSliderBoxItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (3 - 1)) / 3);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.EventTeaser {
  --border-radius: var(--border-radius-default);
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
  position: relative;
  height: 100%;
  padding: var(--spacing-16, 16px);
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius);
}
@media screen and (min-width: 580px) {
.EventTeaser {
    padding: var(--spacing-16, 16px);
}
}
@media screen and (min-width: 1280px) {
.EventTeaser {
    padding: var(--spacing-16, 16px);
}
}
@media screen and (min-width: 750px) {
.EventTeaser[data-variant=small] {
    padding: var(--spacing-16, 16px);
}
}
@media screen and (min-width: 1280px) {
.EventTeaser[data-variant=small] {
    padding: var(--spacing-32, 32px);
}
}
@media (hover: hover) {
.EventTeaser:hover {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.EventTeaser:hover .EventTeaser--image {
    transform: scale(1.05);
}
.EventTeaser:focus {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.EventTeaser:focus .EventTeaser--image {
    transform: scale(1.05);
}
}
.EventTeaser--link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.EventTeaser--card {
  position: relative;
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: 360px;
  margin-top: auto;
  padding: var(--spacing-24, 24px);
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.EventTeaser--card {
    padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
}
}
[data-variant=grid] .EventTeaser--card {
  padding-top: var(--spacing-52, 52px);
}
@media screen and (min-width: 750px) {
[data-variant=grid] .EventTeaser--card {
    padding-top: var(--spacing-68, 68px);
}
}
@media screen and (min-width: 750px) {
[data-variant=small] .EventTeaser--card {
    padding: var(--spacing-24, 24px);
}
}
@media screen and (min-width: 1280px) {
[data-variant=small] .EventTeaser--card {
    padding: var(--spacing-16, 16px);
}
}
.EventTeaser--topTitle {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  margin-bottom: var(--spacing-4, 4px);
}
@media (min-width: 750px) {
.EventTeaser--topTitle {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.EventTeaser--topTitle {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.EventTeaser--topTitle {
    line-height: 1.2;
}
}
.EventTeaser--date {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.EventTeaser--date {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.EventTeaser--date {
    font-size: 34px;
}
}
.EventTeaser[data-variant=small] .EventTeaser--date {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.EventTeaser[data-variant=small] .EventTeaser--date {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.EventTeaser[data-variant=small] .EventTeaser--date {
    font-size: 22px;
}
}
.EventTeaser--title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
@media (min-width: 750px) {
.EventTeaser--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.EventTeaser--title {
    font-size: 16px;
}
}
.EventTeaser[data-variant=small] .EventTeaser--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.EventTeaser[data-variant=small] .EventTeaser--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.EventTeaser[data-variant=small] .EventTeaser--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.EventTeaser[data-variant=small] .EventTeaser--title {
    line-height: 1.2;
}
}
.EventTeaser--arrow {
  clip-path: inset(-10%);
  flex: 0 0 auto;
}
.EventTeaser--arrow::before {
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}
@media (hover: hover) {
.EventTeaser:hover .EventTeaser--arrow::before, .EventTeaser--arrow:hover::before {
    transform: scale(1.1);
}
.EventTeaser:hover .EventTeaser--arrow > svg, .EventTeaser--arrow:hover > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
.EventTeaser--arrow:focus::before {
    transform: scale(1.1);
}
.EventTeaser--arrow:focus > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
}
.EventTeaser--image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserListItem {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  width: 100%;
  text-align: left;
}
@media screen and (min-width: 750px) {
.TeaserListItem {
    gap: var(--spacing-24, 24px);
}
}
@media (hover: hover) {
.TeaserListItem:hover .TeaserListItem--image .Image {
    transform: scale(1.05);
}
.TeaserListItem:focus .TeaserListItem--image .Image {
    transform: scale(1.05);
}
}
.TeaserListItem--imagePlaceholder,
.TeaserListItem--image {
  flex: 1 0 25%;
  align-self: flex-start;
  max-width: 200px;
  overflow: hidden;
  border-radius: var(--border-radius-default);
}
.TeaserListItem--imagePlaceholder > .Image,
.TeaserListItem--image > .Image {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.TeaserListItem--imagePlaceholder {
  background-color: rgba(var(--c-grey-light), 1);
  aspect-ratio: 1/1;
  border-radius: var(--border-radius-0);
}
.TeaserListItem--content {
  flex: 1 1 75%;
}
.TeaserListItem--topic {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: var(--spacing-4, 4px);
}
@media (min-width: 750px) {
.TeaserListItem--topic {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TeaserListItem--topic {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TeaserListItem--topic {
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) {
.TeaserListItem--topic {
    margin-bottom: var(--spacing-16, 16px);
}
}
.TeaserListItem--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.TeaserListItem--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.TeaserListItem--title {
    font-size: 22px;
}
}
@media screen and (min-width: 580px) {
.TeaserListItem--title {
    margin-bottom: var(--spacing-16, 16px);
}
}
@media screen and (min-width: 750px) {
.TeaserListItem--title {
    margin-bottom: var(--spacing-24, 24px);
}
}

/* stylelint-disable-next-line no-duplicate-selectors */
.Sidebar .TeaserListItem, .TeaserListItem[data-size=small] {
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.Sidebar .TeaserListItem, .TeaserListItem[data-size=small] {
    gap: var(--spacing-16, 16px);
}
}
.Sidebar .TeaserListItem .TeaserListItem--title, .TeaserListItem[data-size=small] .TeaserListItem--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0;
}
@media (min-width: 750px) {
.Sidebar .TeaserListItem .TeaserListItem--title, .TeaserListItem[data-size=small] .TeaserListItem--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.Sidebar .TeaserListItem .TeaserListItem--title, .TeaserListItem[data-size=small] .TeaserListItem--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.Sidebar .TeaserListItem .TeaserListItem--title, .TeaserListItem[data-size=small] .TeaserListItem--title {
    line-height: 1.2;
}
}
.Sidebar .TeaserListItem .TeaserListItem--image, .TeaserListItem[data-size=small] .TeaserListItem--image {
  flex: auto;
  width: 100px;
  border-radius: 0;
}
.Sidebar .TeaserListItem .TeaserListItem--topic, .TeaserListItem[data-size=small] .TeaserListItem--topic {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 0.33em;
}
@media (min-width: 750px) {
.Sidebar .TeaserListItem .TeaserListItem--topic, .TeaserListItem[data-size=small] .TeaserListItem--topic {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Sidebar .TeaserListItem .TeaserListItem--topic, .TeaserListItem[data-size=small] .TeaserListItem--topic {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Sidebar .TeaserListItem .TeaserListItem--topic, .TeaserListItem[data-size=small] .TeaserListItem--topic {
    line-height: 1.2;
}
}
.Sidebar .TeaserListItem .TeaserListItem--content, .TeaserListItem[data-size=small] .TeaserListItem--content {
  padding-top: 1em;
  padding-right: 0.5em;
  padding-bottom: 1em;
}
.Sidebar .TeaserListItem .TeaserListItem--cta, .TeaserListItem[data-size=small] .TeaserListItem--cta {
  display: none;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserList[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.TeaserList[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserList[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.TeaserList[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserList[data-compose=white] {
    margin-bottom: 96px;
}
}
.TeaserList:not([data-layout=inline]) {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.TeaserList--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.TeaserList--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.TeaserList--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.TeaserList--title {
    line-height: 1.2;
}
}
.TeaserList[data-layout=inline] .TeaserList--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.TeaserList[data-layout=inline] .TeaserList--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.TeaserList[data-layout=inline] .TeaserList--title {
    font-size: 22px;
}
}
.TeaserList--list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserSliderItem {
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (1.175 - 1)) / 1.175);
  aspect-ratio: 3/4;
}
.TeaserSliderItem[data-slider-size=auto] {
  aspect-ratio: auto;
}
.TeaserSliderItem:empty {
  display: none;
}
.TeaserSliderItem[data-width="1/3"] {
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (1 - 1)) / 1);
}
@media screen and (min-width: 580px) {
.TeaserSliderItem[data-width="1/3"] {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (1.5 - 1)) / 1.5);
}
}
@media screen and (min-width: 750px) {
.TeaserSliderItem[data-width="1/3"] {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
}
@media screen and (min-width: 1000px) {
.TeaserSliderItem[data-width="1/3"] {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (3 - 1)) / 3);
}
}
@media screen and (min-width: 580px) {
.TeaserSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
}
@media screen and (min-width: 1000px) {
.TeaserSliderItem {
    aspect-ratio: 1;
}
.TeaserSliderItem[data-slider-size="1/4"] {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (4 - 1)) / 4);
    aspect-ratio: 2/3;
}
.TeaserSliderItem[data-slider-size="2/4"] {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
    aspect-ratio: 4/3;
}
}
@media screen and (min-width: 1600px) {
.TeaserSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
.TeaserSliderItem[data-slider-size="1/4"] {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (4 - 1)) / 4);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TeaserSlider {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.TeaserSlider[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.TeaserSlider[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserSlider[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.TeaserSlider[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserSlider[data-compose=white] {
    margin-bottom: 96px;
}
}
.TeaserSlider[data-variant=hero] {
  padding-top: 32px;
  position: relative;
  z-index: 0;
  margin-top: 0;
  padding-bottom: var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.TeaserSlider[data-variant=hero] {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.TeaserSlider[data-variant=hero] {
    padding-top: 64px;
}
}
.TeaserSlider[data-variant=hero] + .TeaserGrid,
.TeaserSlider[data-variant=hero] + .TeaserCluster {
  margin-top: -48px;
}
@media screen and (min-width: 750px) {
.TeaserSlider[data-variant=hero] + .TeaserGrid,
  .TeaserSlider[data-variant=hero] + .TeaserCluster {
    margin-top: calc((11.4871794872px + 2.735042735vw) * -1.5);
}
}
@media screen and (min-width: 1920px) {
.TeaserSlider[data-variant=hero] + .TeaserGrid,
  .TeaserSlider[data-variant=hero] + .TeaserCluster {
    margin-top: -96px;
}
}
.TeaserSlider[data-variant=hero]::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  width: 100cqw;
  margin-left: -50vw;
  margin-left: -50cqw;
  background-color: var(--theme-background);
  z-index: -1;
  height: 85%;
  transition: transform 0.3s ease-out, opacity 0.3s;
  will-change: transform;
}
.page-enter-from .TeaserSlider[data-variant=hero]::before {
  transform: translateY(-40px);
}
.page-leave-to .TeaserSlider[data-variant=hero]::before {
  transform: translateY(40px);
}
.HeroTeaserSliderWrapper + .TeaserGrid,
.HeroTeaserSliderWrapper + .TeaserCluster {
  margin-top: -48px;
}
@media screen and (min-width: 750px) {
.HeroTeaserSliderWrapper + .TeaserGrid,
  .HeroTeaserSliderWrapper + .TeaserCluster {
    margin-top: calc((11.4871794872px + 2.735042735vw) * -1.5);
}
}
@media screen and (min-width: 1920px) {
.HeroTeaserSliderWrapper + .TeaserGrid,
  .HeroTeaserSliderWrapper + .TeaserCluster {
    margin-top: -96px;
}
}
.HeroTeaserSliderWrapper + .HeroTeaserSliderWrapper .TeaserSlider {
  padding-top: -32px;
}
@media screen and (min-width: 750px) {
.HeroTeaserSliderWrapper + .HeroTeaserSliderWrapper .TeaserSlider {
    padding-top: calc((11.4871794872px + 2.735042735vw) * -1);
}
}
@media screen and (min-width: 1920px) {
.HeroTeaserSliderWrapper + .HeroTeaserSliderWrapper .TeaserSlider {
    padding-top: -64px;
}
}
.HeroTeaserSliderWrapper + .HeroTeaserSliderWrapper .TeaserSlider::before {
  content: none;
}
.TeaserSlider--slider {
  --scrollslider-gap: var(--spacing-16, 16px);
}
@media screen and (min-width: 1000px) {
.TeaserSlider--slider {
    --scrollslider-gap: var(--spacing-24, 24px);
}
}
@media screen and (max-width: 1280px) {
.TeaserSlider--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.TeaserSlider--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.TeaserSlider--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.TeaserSlider--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.TeaserSlider--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TextMediaSliderItem {
  width: calc(100vw - var(--site-padding) * 2);
  width: calc(100cqw - var(--site-padding) * 2);
}
@media screen and (min-width: 1280px) {
.TextMediaSliderItem {
    width: 1440px;
}
}
.TextMediaSliderItem--inner {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32, 32px);
  height: 100%;
}
@media screen and (max-width: 750px) {
.TextMediaSliderItem--inner {
    padding-bottom: var(--spacing-32, 32px);
}
}
@media screen and (min-width: 750px) {
.TextMediaSliderItem--inner {
    flex-direction: row-reverse;
    gap: var(--spacing-32, 32px);
    align-items: center;
    justify-content: space-between;
    padding-right: var(--spacing-60, 60px);
    padding-left: var(--spacing-60, 60px);
}
}
.TextMediaSliderItem--media {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--border-radius-default);
  aspect-ratio: 1/1;
}
@media screen and (min-width: 750px) {
.TextMediaSliderItem--media {
    flex: 0 0 62.5%;
    aspect-ratio: 16/9;
}
}
.TextMediaSliderItem--content {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.TextMediaSliderItem--content {
    flex: 0 0 27.5%;
}
}
.TextMediaSliderItem--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.TextMediaSliderItem--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.TextMediaSliderItem--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.TextMediaSliderItem--title {
    line-height: 1.2;
}
}
.TextMediaSliderItem--text {
  font-size: 14px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.TextMediaSliderItem--text {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.TextMediaSliderItem--text {
    font-size: 16px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TextMediaSlider {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.TextMediaSlider--inner {
  margin-top: 32px;
  margin-bottom: 32px;
  position: relative;
  padding-top: var(--spacing-40, 40px);
  padding-bottom: var(--spacing-40, 40px);
}
@media screen and (min-width: 750px) {
.TextMediaSlider--inner {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.TextMediaSlider--inner {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.TextMediaSlider--inner {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.TextMediaSlider--inner {
    margin-bottom: 64px;
}
}
@media screen and (min-width: 750px) {
.TextMediaSlider--inner {
    padding-top: var(--spacing-60, 60px);
    padding-bottom: var(--spacing-60, 60px);
}
}
.TextMediaSlider--inner::before {
  position: absolute;
  display: block;
  overflow: hidden;
  background-color: rgba(var(--c-green-light), 1);
  border-radius: var(--border-radius-default);
  content: "";
  inset: 0;
}
.TextMediaSlider--slider .ScrollSliderBar {
  max-width: 400px;
}
@media screen and (min-width: 750px) {
.TextMediaSlider--slider .ScrollSliderBar {
    margin-top: var(--spacing-48, 48px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
:root {
  --checkout-toggle-height: 72px;
}
@media screen and (min-width: 1000px) {
:root {
    --checkout-toggle-height: 80px;
}
}
@media screen and (max-width: 750px) {
.CheckoutAside {
    position: relative;
    z-index: var(--z-index-sidebar);
}
}
.CheckoutAside--backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--c-black), 0.5);
}
@media screen and (min-width: 750px) {
.CheckoutAside--backdrop {
    display: none !important;
}
}
.CheckoutAside--toggle {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  width: 100%;
  padding: var(--spacing-16, 16px) var(--site-padding);
  background-color: rgba(var(--c-white), 1);
  border-bottom: 1px solid rgba(var(--c-border));
}
@media (min-width: 750px) {
.CheckoutAside--toggle {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.CheckoutAside--toggle {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.CheckoutAside--toggle {
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) {
.CheckoutAside--toggle {
    display: none !important;
}
}
.CheckoutAside--toggle--icon {
  transition: transform 0.2s ease-in-out;
}
.CheckoutAside.isOpen .CheckoutAside--toggle--icon {
  transform: rotate(180deg);
}
.CheckoutAside--toggle--total {
  margin-left: auto;
}
@media screen and (max-width: 750px) {
.CheckoutAside--body {
    position: absolute;
    width: 100%;
    max-height: calc(100vh - var(--checkout-toggle-height));
    max-height: calc(100dvh - var(--checkout-toggle-height));
    overflow: auto;
    background-color: rgba(var(--c-white), 1);
    -webkit-overflow-scrolling: touch;
}
}
@media screen and (min-width: 750px) {
.CheckoutAside--body {
    display: block !important;
}
}
@media screen and (max-width: 750px) {
.CheckoutAside--inner {
    padding: 0 var(--site-padding);
}
.CheckoutAside--inner .IconList {
    display: none;
}
}
.CheckoutAside--close {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-16, 16px);
  text-align: center;
  border-top: 1px solid rgba(var(--c-border));
}
@media screen and (min-width: 750px) {
.CheckoutAside--close {
    display: none;
}
}
.CheckoutAside--close [data-icon] {
  transition: transform 0.2s ease-in-out;
}
.CheckoutAside--close:hover [data-icon] {
  transform: rotate(90deg);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
@media screen and (max-width: 750px) {
  /* Flyout animation */
.show-checkout-aside-enter-active,
  .show-checkout-aside-leave-active {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.show-checkout-aside-enter-active {
    transition-delay: 0.1s;
}
.show-checkout-aside-enter-from,
  .show-checkout-aside-leave-to {
    transform: translate(0, -100%);
}
  /* Backdrop animation */
.show-checkout-aside-backdrop-enter-active {
    transition: opacity 0.2s ease-out, visibility 0.2s;
    will-change: opacity, transform;
}
.show-checkout-aside-backdrop-leave-active {
    transition: opacity 0.5s ease-in, visibility 0.5s;
    will-change: opacity, transform;
}
.show-checkout-aside-backdrop-enter-from,
  .show-checkout-aside-backdrop-leave-to {
    visibility: hidden;
    opacity: 0;
}
}
/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CheckoutStepLabel {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: var(--spacing-24, 24px);
  color: rgba(var(--c-grey), 1);
  border-bottom: 1px solid rgba(var(--c-border));
}
@media (min-width: 750px) {
.CheckoutStepLabel {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.CheckoutStepLabel {
    font-size: 22px;
}
}
.CheckoutStepLabel:not(:first-of-type) {
  margin-top: var(--spacing-24, 24px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PaymentMethodLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.PaymentMethodLabel--labelIcon {
  display: flex;
  gap: 0.9375rem;
  align-items: center;
}
.PaymentMethodLabel--labelText {
  font-size: 14px;
  line-height: 1.2;
  text-align: right;
}
@media (min-width: 750px) {
.PaymentMethodLabel--labelText {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PaymentMethodLabel--labelText {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PaymentMethodLabel--labelText {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CheckoutSummary[data-with-layout=true] {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.CheckoutSummary--inner {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  position: relative;
  display: flex;
  margin-bottom: var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.CheckoutSummary--inner {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.CheckoutSummary--inner[data-style=sale-week] {
  background-color: rgba(var(--c-blue-light), 1);
}
.CheckoutSummary--title {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin-bottom: var(--spacing-40, 40px);
}
@media (min-width: 750px) {
.CheckoutSummary--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.CheckoutSummary--title {
    font-size: 34px;
}
}
.CheckoutSummary--section {
  display: grid;
  flex: 1;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 1fr;
}
.CheckoutSummary--sectionTitle {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  grid-row: 1/1;
  grid-column: 1/-1;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.CheckoutSummary--sectionTitle {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.CheckoutSummary--sectionTitle {
    font-size: 16px;
}
}
.CheckoutSummary--sectionSubtitle {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  grid-column: 1/-1;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.CheckoutSummary--sectionSubtitle {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.CheckoutSummary--sectionSubtitle {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.CheckoutSummary--sectionSubtitle {
    line-height: 1.2;
}
}
.CheckoutSummary--sectionSubtitle:not(:first-of-type) {
  margin-top: var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.CheckoutSummary--sectionSubtitle:not(:first-of-type) {
    margin-top: 0;
}
}
.CheckoutSummary--sectionDetails {
  font-size: 14px;
  line-height: 1.2;
  grid-column: 1/-1;
}
@media (min-width: 750px) {
.CheckoutSummary--sectionDetails {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.CheckoutSummary--sectionDetails {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.CheckoutSummary--sectionDetails {
    line-height: 1.2;
}
}
.CheckoutSummary--sectionDetails span {
  display: block;
}
.CheckoutSummary--sectionFooter {
  grid-column: 1/-1;
  margin-top: var(--spacing-24, 24px);
}
.CheckoutSummary--inlineLink {
  font-size: 14px;
  line-height: 1.2;
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (min-width: 750px) {
.CheckoutSummary--inlineLink {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.CheckoutSummary--inlineLink {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.CheckoutSummary--inlineLink {
    line-height: 1.2;
}
}
@media (hover: hover) {
.CheckoutSummary--inlineLink:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.CheckoutSummary--inlineLink:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.CheckoutSummary--changeLink {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.CheckoutSummary--changeLink {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.CheckoutSummary--changeLink {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.CheckoutSummary--changeLink {
    line-height: 1.4;
}
}
.CheckoutSummary--longtail {
  margin-top: var(--spacing-8, 8px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.GuestOrderForm--main {
  display: flex;
  flex-direction: column;
}
.GuestOrderForm--formWrapper {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.GuestOrderForm--formWrapper {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.GuestOrderForm--legend {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.GuestOrderForm--legend {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.GuestOrderForm--legend {
    font-size: 22px;
}
}
.GuestOrderForm--lead {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.GuestOrderForm--lead {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.GuestOrderForm--lead {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.GuestOrderForm--lead {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.GuestOrderForm--lead {
    margin-bottom: var(--spacing-32, 32px);
}
}
.GuestOrderForm--actionBar {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-32, 32px);
}
.GuestOrderForm--actionBar button {
  flex: 1 0 100%;
}
@media screen and (min-width: 1000px) {
.GuestOrderForm--actionBar {
    margin-top: var(--spacing-40, 40px);
}
.GuestOrderForm--actionBar button {
    flex: 0 1 auto;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.RegistrationTeaser {
  display: flex;
  flex-direction: column;
}
.RegistrationTeaser[data-variant=main] {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.RegistrationTeaser[data-variant=main] {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1000px) {
.RegistrationTeaser[data-variant=main] {
    padding: 0;
    border: none;
}
}
.RegistrationTeaser--title {
  margin-bottom: var(--spacing-16, 16px);
}
[data-variant=main] .RegistrationTeaser--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
[data-variant=main] .RegistrationTeaser--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
[data-variant=main] .RegistrationTeaser--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
[data-variant=main] .RegistrationTeaser--title {
    line-height: 1.2;
}
}
[data-variant=checkout] .RegistrationTeaser--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
[data-variant=checkout] .RegistrationTeaser--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
[data-variant=checkout] .RegistrationTeaser--title {
    font-size: 22px;
}
}
.RegistrationTeaser--lead {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.RegistrationTeaser--lead {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.RegistrationTeaser--lead {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.RegistrationTeaser--lead {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.RegistrationTeaser--lead {
    margin-bottom: var(--spacing-32, 32px);
}
}
.RegistrationTeaser--text {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.RegistrationTeaser--text {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.RegistrationTeaser--text {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.RegistrationTeaser--text {
    line-height: 1.2;
}
}
.RegistrationTeaser--text > *:first-child {
  margin-top: 0;
}
.RegistrationTeaser--text > *:last-child {
  margin-bottom: 0;
}
.RegistrationTeaser--text > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.RegistrationTeaser--text > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.RegistrationTeaser--text h1:not([class]) {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  margin-top: 1.75em;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.RegistrationTeaser--text h1:not([class]) {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.RegistrationTeaser--text h1:not([class]) {
    font-size: 34px;
}
}
.RegistrationTeaser--text h2:not([class]) {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.RegistrationTeaser--text h2:not([class]) {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.RegistrationTeaser--text h2:not([class]) {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.RegistrationTeaser--text h2:not([class]) {
    line-height: 1.2;
}
}
.RegistrationTeaser--text h3:not([class]) {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
@media (min-width: 750px) {
.RegistrationTeaser--text h3:not([class]) {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.RegistrationTeaser--text h3:not([class]) {
    font-size: 22px;
}
}
.RegistrationTeaser--text h4:not([class]),
.RegistrationTeaser--text h5:not([class]),
.RegistrationTeaser--text h6:not([class]) {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
  text-transform: none;
}
@media (min-width: 750px) {
.RegistrationTeaser--text h4:not([class]),
  .RegistrationTeaser--text h5:not([class]),
  .RegistrationTeaser--text h6:not([class]) {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.RegistrationTeaser--text h4:not([class]),
  .RegistrationTeaser--text h5:not([class]),
  .RegistrationTeaser--text h6:not([class]) {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.RegistrationTeaser--text h4:not([class]),
  .RegistrationTeaser--text h5:not([class]),
  .RegistrationTeaser--text h6:not([class]) {
    line-height: 1.2;
}
}
.RegistrationTeaser--text ul:not([class]),
.RegistrationTeaser--text ol:not([class]) {
  margin-top: 1em;
  margin-bottom: 1em;
}
.RegistrationTeaser--text ul:not([class]) {
  display: block;
}
.RegistrationTeaser--text ul:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.RegistrationTeaser--text ul:not([class]) > li:last-child {
  margin-bottom: 0;
}
.RegistrationTeaser--text ul:not([class]) > li > *:first-child {
  margin-top: 0;
}
.RegistrationTeaser--text ul:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.RegistrationTeaser--text ul:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.RegistrationTeaser--text ul:not([class]) > li {
    padding-left: 25px;
}
}
.RegistrationTeaser--text ul:not([class]) > li::before {
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  color: rgba(var(--c-black), 1);
  background-color: currentcolor;
  border-radius: 100%;
}
.RegistrationTeaser--text ol:not([class]) {
  display: block;
  counter-reset: ol--counter;
}
.RegistrationTeaser--text ol:not([class]) > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 20px;
  list-style-type: none;
}
.RegistrationTeaser--text ol:not([class]) > li:last-child {
  margin-bottom: 0;
}
.RegistrationTeaser--text ol:not([class]) > li > *:first-child {
  margin-top: 0;
}
.RegistrationTeaser--text ol:not([class]) > li > *:last-child {
  margin-bottom: 0;
}
.RegistrationTeaser--text ol:not([class]) > li::before {
  position: absolute;
  display: inline-block;
  content: " ";
}
@media screen and (max-width: 750px) {
.RegistrationTeaser--text ol:not([class]) > li {
    padding-left: 25px;
}
}
.RegistrationTeaser--text ol:not([class]) > li::before {
  left: 0;
  width: 4ex;
  text-align: left;
  content: counter(ol--counter) ".";
  counter-increment: ol--counter;
}
.RegistrationTeaser--text hr {
  margin-top: 1em;
  margin-bottom: 1em;
  border: 0;
  border-top: 1px solid rgba(var(--c-black), 1);
}
.RegistrationTeaser--text .Button + .Button {
  margin-left: 16px;
}
.RegistrationTeaser--text p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.RegistrationTeaser--text a:not([class]),
.RegistrationTeaser--text a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.RegistrationTeaser--text a:not([class]):hover,
  .RegistrationTeaser--text a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.RegistrationTeaser--text a:not([class]):focus,
  .RegistrationTeaser--text a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.RegistrationTeaser--text small {
  display: inline-block;
  font-size: 0.75em;
}
.RegistrationTeaser--text strong,
.RegistrationTeaser--text b {
  font-weight: bold;
}
.RegistrationTeaser--text em,
.RegistrationTeaser--text i {
  font-style: italic;
}
@media screen and (min-width: 1000px) {
.RegistrationTeaser--text {
    margin-bottom: var(--spacing-40, 40px);
}
}
@media screen and (min-width: 1000px) {
.RegistrationTeaser--cta {
    align-self: flex-start;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.GuestOrderTeaser {
  display: flex;
  flex-direction: column;
}
.GuestOrderTeaser--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.GuestOrderTeaser--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.GuestOrderTeaser--title {
    font-size: 22px;
}
}
.GuestOrderTeaser--lead {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.GuestOrderTeaser--lead {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.GuestOrderTeaser--lead {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.GuestOrderTeaser--lead {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.GuestOrderTeaser--lead {
    margin-bottom: var(--spacing-32, 32px);
}
}
.GuestOrderTeaser--cta {
  margin-top: var(--spacing-8, 8px);
}
@media screen and (min-width: 1000px) {
.GuestOrderTeaser--cta {
    align-self: flex-start;
    margin-top: var(--spacing-16, 16px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.NewCustomerOrderOptions {
  position: relative;
}
.NewCustomerOrderOptions--inner {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.NewCustomerOrderOptions--inner {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.NewCustomerOrderOptions--upper,
.NewCustomerOrderOptions--lower {
  display: flex;
  flex-direction: column;
}
.NewCustomerOrderOptions--upper {
  margin-bottom: var(--spacing-32, 32px);
}
@media screen and (min-width: 1000px) {
.NewCustomerOrderOptions--upper {
    margin-bottom: var(--spacing-40, 40px);
}
}
.NewCustomerOrderOptions--lower {
  padding-top: var(--spacing-32, 32px);
  border-top: 1px solid rgba(var(--c-border));
}
@media screen and (min-width: 1000px) {
.NewCustomerOrderOptions--lower {
    padding-top: var(--spacing-40, 40px);
}
}
.NewCustomerOrderOptions--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.NewCustomerOrderOptions--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.NewCustomerOrderOptions--title {
    font-size: 22px;
}
}
.NewCustomerOrderOptions--lead {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.NewCustomerOrderOptions--lead {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.NewCustomerOrderOptions--lead {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.NewCustomerOrderOptions--lead {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.NewCustomerOrderOptions--lead {
    margin-bottom: var(--spacing-32, 32px);
}
}
.NewCustomerOrderOptions--benefitsList {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-32, 32px);
  margin-left: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.NewCustomerOrderOptions--benefitsList {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.NewCustomerOrderOptions--benefitsList {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.NewCustomerOrderOptions--benefitsList {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.NewCustomerOrderOptions--benefitsList {
    margin-bottom: var(--spacing-40, 40px);
}
}
.NewCustomerOrderOptions--benefit {
  list-style: disc;
}
.NewCustomerOrderOptions--cta {
  margin-top: var(--spacing-8, 8px);
}
@media screen and (min-width: 1000px) {
.NewCustomerOrderOptions--cta {
    align-self: flex-start;
    margin-top: var(--spacing-16, 16px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.OrderDetails {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.OrderDetails {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.OrderDetails {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.OrderDetails {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.OrderDetails {
    margin-bottom: 64px;
}
}
.OrderDetails--card {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.OrderDetails--card {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.OrderDetails--section + .OrderDetails--section {
  margin-top: var(--spacing-32, 32px);
  padding-top: var(--spacing-40, 40px);
  border-top: 1px solid rgba(var(--c-border));
}
.OrderDetails--section--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-40, 40px);
}
@media (min-width: 750px) {
.OrderDetails--section--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.OrderDetails--section--title {
    font-size: 22px;
}
}
.OrderDetails--block--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.OrderDetails--block--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.OrderDetails--block--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.OrderDetails--block--title {
    line-height: 1.2;
}
}
.OrderDetails--block--details {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.OrderDetails--block--details {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.OrderDetails--block--details {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.OrderDetails--block--details {
    line-height: 1.2;
}
}
.OrderDetails--block--details > span {
  display: block;
}
.OrderDetails--address {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32, 32px);
}
@media screen and (min-width: 580px) {
.OrderDetails--address {
    flex-direction: row;
    gap: var(--spacing-24, 24px);
}
.OrderDetails--address > * {
    flex: 1 1 50%;
}
}
* + .OrderDetails--shipping {
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.VoucherForm--legend {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.VoucherForm--legend {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.VoucherForm--legend {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.VoucherForm--legend {
    line-height: 1.2;
}
}
.VoucherForm--problems {
  margin-top: 2em;
}
.VoucherForm--voucher {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
  --button-color: rgba(var(--c-white), 1);
  --button-background-color: rgba(var(--c-black), 1);
  --button-hover-background-color: rgba(var(--c-grey-ultradark), 1);
  font-size: 14px;
  line-height: 1.2;
  display: inline-flex;
  gap: var(--spacing-12, 12px);
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  padding: var(--spacing-10, 10px) var(--spacing-20, 20px);
  position: relative;
  display: inline-flex;
  gap: var(--spacing-8, 8px);
  color: rgba(var(--c-black), 1);
  white-space: nowrap;
}
.VoucherForm--voucher::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.VoucherForm--voucher::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.VoucherForm--voucher:hover::before {
    border-color: var(--button-hover-border-color);
}
.VoucherForm--voucher:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.VoucherForm--voucher:focus::before {
    border-color: var(--button-hover-border-color);
}
.VoucherForm--voucher:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
@media (min-width: 750px) {
.VoucherForm--voucher {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.VoucherForm--voucher {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.VoucherForm--voucher {
    line-height: 1.2;
}
}
.VoucherForm--voucher:disabled {
  --button-color: rgba(var(--c-grey), 1) !important;
  --button-background-color: rgba(var(--c-grey-light), 1) !important;
  --button-border-color: transparent !important;
}
@media (min-width: 750px) {
.VoucherForm--voucher {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.VoucherForm--voucher {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.VoucherForm--voucher {
    line-height: 1.4;
}
}
.VoucherForm--voucher::before {
  background-color: rgba(var(--c-grey-light), 1);
  border-color: transparent;
}
.VoucherForm--voucher::after {
  background-color: rgba(var(--c-white), 1);
  border: 1px solid transparent;
  transition: border-color 0.2s ease-out;
}
@media (hover: hover) {
.VoucherForm--voucher:hover {
    color: rgba(var(--c-black), 1);
}
.VoucherForm--voucher:hover::before {
    border-color: rgba(var(--c-black), 1);
}
.VoucherForm--voucher:hover::after {
    border-color: rgba(var(--c-black), 1);
}
.VoucherForm--voucher:focus {
    color: rgba(var(--c-black), 1);
}
.VoucherForm--voucher:focus::before {
    border-color: rgba(var(--c-black), 1);
}
.VoucherForm--voucher:focus::after {
    border-color: rgba(var(--c-black), 1);
}
}
.VoucherForm--voucher--clear {
  position: relative;
  z-index: 1;
  margin-left: var(--spacing-8, 8px);
}
.VoucherForm--voucher--label {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.VoucherForm--actionBar {
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.GiftCardForm > fieldset + fieldset {
  display: block;
  width: 100%;
  min-width: 100%;
  margin-top: var(--spacing-32, 32px);
}
@media screen and (min-width: 750px) {
.GiftCardForm > fieldset + fieldset {
    max-width: var(--spacing-40, 40px);
}
}
.GiftCardForm--row {
  margin-top: var(--spacing-8, 8px);
}
.GiftCardForm--legend {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.GiftCardForm--legend {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.GiftCardForm--legend {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.GiftCardForm--legend {
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) {
.GiftCardForm--panelInputs {
    --row-gap: var(--spacing-0, 0px);
    --column-gap: var(--spacing-24, 24px);
    display: grid;
    grid-gap: var(--spacing-0, 0px) var(--spacing-24, 24px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.GiftCardForm--panelInput {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.GiftCardForm--panelInput {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
.GiftCardForm--actionBar {
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TransaPointRedeem--boxedText {
  margin-bottom: var(--spacing-24, 24px);
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  background-color: rgba(var(--c-green-light), 1);
  border-radius: var(--border-radius-small);
}
.TransaPointRedeem--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--spacing-12, 12px);
}
@media (min-width: 750px) {
.TransaPointRedeem--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TransaPointRedeem--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TransaPointRedeem--title {
    line-height: 1.2;
}
}
.TransaPointRedeem--description {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.TransaPointRedeem--description {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TransaPointRedeem--description {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TransaPointRedeem--description {
    line-height: 1.2;
}
}
.TransaPointRedeem--actionBar {
  display: flex;
  justify-content: flex-end;
}
.TransaPointRedeem--actionBar button {
  flex: 1 1 auto;
}
@media screen and (min-width: 1000px) {
.TransaPointRedeem--actionBar button {
    flex: 0 0 auto;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.DropdownOption {
  font-size: 12px;
  line-height: 1.4;
  position: relative;
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  padding: var(--spacing-12, 12px) var(--spacing-32, 32px) var(--spacing-12, 12px) var(--spacing-24, 24px);
  border-top: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.DropdownOption {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.DropdownOption {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.DropdownOption {
    line-height: 1.4;
}
}
.DropdownOption + .DropdownOption {
  border-color: rgba(var(--c-border));
}
.DropdownOption:last-child {
  border-bottom: 1px solid transparent;
}
@media (hover: hover) {
.DropdownOption:hover {
    background-color: rgba(var(--c-grey-light), 1);
    border-color: rgba(var(--c-border));
}
.DropdownOption:focus {
    background-color: rgba(var(--c-grey-light), 1);
    border-color: rgba(var(--c-border));
}
}
.DropdownOption--label {
  display: block;
  flex: 1 1 calc(50% - 8px);
  min-height: 1.4em;
}
.DropdownOption--checkmark {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
[data-selected=true] .DropdownOption--checkmark {
  opacity: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.DropdownHeader {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  position: relative;
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  padding: var(--spacing-12, 12px) var(--spacing-32, 32px) var(--spacing-12, 12px) var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.DropdownHeader {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.DropdownHeader {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.DropdownHeader {
    line-height: 1.4;
}
}

/* Similar to .DropdownOption--label */
.DropdownHeader--label {
  flex: 1 1 calc(50% - 8px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  max-height: 420px;
  margin-top: var(--spacing-8, 8px);
  padding-top: var(--spacing-12, 12px);
  overflow: auto;
  background: rgba(var(--c-white), 1);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  box-shadow: var(--shadow-popup);
  transform: translateY(-10px);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
.Dropdown.isOpen {
  transform: none;
  visibility: visible;
  opacity: 1;
}
.Dropdown--options {
  padding-bottom: var(--spacing-12, 12px);
}
.Dropdown--close {
  font-size: 12px;
  line-height: 1.4;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
@media (min-width: 750px) {
.Dropdown--close {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Dropdown--close {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Dropdown--close {
    line-height: 1.4;
}
}
.Dropdown--close:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  white-space: inherit;
  clip: auto;
  clip-path: none;
  width: 100%;
  padding: var(--spacing-12, 12px) var(--spacing-24, 24px);
  text-align: center;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* .DropdownSelect {
} */
.DropdownSelect--inner {
  position: relative;
}
.DropdownSelect--label {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: var(--spacing-16, 16px);
  padding: 0 var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
@media (min-width: 750px) {
.DropdownSelect--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.DropdownSelect--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.DropdownSelect--label {
    line-height: 1.2;
}
}
[data-size=small] .DropdownSelect--label {
  left: var(--spacing-12, 12px);
}
.DropdownSelect--label[data-visuallyhidden=true] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.DropdownSelect--trigger:focus .DropdownSelect--label, .DropdownSelect--trigger:not([data-selected=""]) .DropdownSelect--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
@media (min-width: 750px) {
.DropdownSelect--trigger:focus .DropdownSelect--label, .DropdownSelect--trigger:not([data-selected=""]) .DropdownSelect--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.DropdownSelect--trigger:focus .DropdownSelect--label, .DropdownSelect--trigger:not([data-selected=""]) .DropdownSelect--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.DropdownSelect--trigger:focus .DropdownSelect--label, .DropdownSelect--trigger:not([data-selected=""]) .DropdownSelect--label {
    line-height: 1.4;
}
}
.DropdownSelect.hasError .DropdownSelect--trigger:focus .DropdownSelect--label, .DropdownSelect.hasError .DropdownSelect--trigger:not([data-selected=""]) .DropdownSelect--label {
  color: rgba(var(--c-signal-red), 1);
}
.DropdownSelect--trigger {
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
  padding: var(--spacing-16, 16px);
  background: transparent;
  border: 1px solid rgba(var(--c-border-dark));
  border-radius: var(--border-radius-xsmall);
  outline: none;
  transition: border-color 0.2s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 750px) {
.DropdownSelect--trigger {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.DropdownSelect--trigger {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.DropdownSelect--trigger {
    line-height: 1.4;
}
}
.DropdownSelect--trigger:focus {
  border-color: rgba(var(--c-black), 1);
}
.DropdownSelect--trigger::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.DropdownSelect--trigger::placeholder {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.DropdownSelect--trigger:-webkit-autofill, .DropdownSelect--trigger:-webkit-autofill:hover, .DropdownSelect--trigger:-webkit-autofill:focus, .DropdownSelect--trigger:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-white), 1) inset;
}
.DropdownSelect--trigger.hasPlaceholder:focus::-moz-placeholder {
  opacity: 1;
}
.DropdownSelect--trigger.hasPlaceholder:focus::placeholder {
  opacity: 1;
}
.DropdownSelect.isValid .DropdownSelect--trigger {
  background-color: rgba(var(--c-valid-form-input));
}
.DropdownSelect.isValid .DropdownSelect--trigger:-webkit-autofill, .DropdownSelect.isValid .DropdownSelect--trigger:-webkit-autofill:hover, .DropdownSelect.isValid .DropdownSelect--trigger:-webkit-autofill:focus, .DropdownSelect.isValid .DropdownSelect--trigger:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-valid-form-input)) inset;
}
.DropdownSelect.hasError .DropdownSelect--trigger {
  border-color: rgba(var(--c-signal-red), 1);
}
[data-size=small] .DropdownSelect--trigger {
  padding: var(--spacing-12, 12px);
}
[data-variant=pill] .DropdownSelect--trigger {
  padding-left: var(--spacing-20, 20px);
  border-radius: var(--border-radius-pill);
}
.DropdownSelect--value {
  display: block;
  min-height: 1.4em;
}
[data-icon].DropdownSelect--arrow {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  transform: translateY(-50%);
  transition: transform 0.2s ease-in-out;
  pointer-events: none;
}
[aria-expanded=true] > [data-icon].DropdownSelect--arrow {
  transform: translateY(-50%) scale(1, -1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SelectDateInput {
  display: flex;
  gap: var(--spacing-24, 24px);
}
.SelectDateInput > * {
  flex-shrink: 0;
  min-width: 3em;
}
.SelectDateInput--day {
  min-width: calc(2ch + 44px);
}
.SelectDateInput--month {
  min-width: calc(2ch + 44px);
}
.SelectDateInput--year {
  min-width: calc(4ch + 44px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SolvencyCheckForm--form {
  margin-top: var(--spacing-24, 24px);
}
.SolvencyCheckForm--validCreditCheckMessage {
  font-size: 14px;
  line-height: 1.2;
  color: rgba(var(--c-signal-green), 1);
}
@media (min-width: 750px) {
.SolvencyCheckForm--validCreditCheckMessage {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.SolvencyCheckForm--validCreditCheckMessage {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.SolvencyCheckForm--validCreditCheckMessage {
    line-height: 1.2;
}
}
.SolvencyCheckForm--invalidCreditCheckMessage {
  font-size: 14px;
  line-height: 1.2;
  color: rgba(var(--c-signal-red), 1);
}
@media (min-width: 750px) {
.SolvencyCheckForm--invalidCreditCheckMessage {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.SolvencyCheckForm--invalidCreditCheckMessage {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.SolvencyCheckForm--invalidCreditCheckMessage {
    line-height: 1.2;
}
}
.SolvencyCheckForm--pendingCreditCheckMessage {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.SolvencyCheckForm--pendingCreditCheckMessage {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.SolvencyCheckForm--pendingCreditCheckMessage {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.SolvencyCheckForm--pendingCreditCheckMessage {
    line-height: 1.2;
}
}
.SolvencyCheckForm--birthdateInput {
  margin-top: var(--spacing-24, 24px);
}
.SolvencyCheckForm--creditCheckBirthdateError {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--c-signal-red), 1);
}
@media (min-width: 750px) {
.SolvencyCheckForm--creditCheckBirthdateError {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.SolvencyCheckForm--creditCheckBirthdateError {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.SolvencyCheckForm--creditCheckBirthdateError {
    line-height: 1.4;
}
}
.SolvencyCheckForm--creditCheckBirthdateError.isActive {
  margin-top: var(--spacing-4, 4px);
}
.SolvencyCheckForm--creditCheckAgb {
  font-size: 12px;
  line-height: 1.4;
  margin-top: var(--spacing-12, 12px);
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.SolvencyCheckForm--creditCheckAgb {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.SolvencyCheckForm--creditCheckAgb {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.SolvencyCheckForm--creditCheckAgb {
    line-height: 1.4;
}
}
.SolvencyCheckForm--buttonWrapper {
  display: flex;
  margin-top: var(--spacing-24, 24px);
}
.SolvencyCheckForm--buttonWrapper .SolvencyCheckForm--submit {
  flex: 1 1 100%;
}
@media screen and (min-width: 1000px) {
.SolvencyCheckForm--buttonWrapper .SolvencyCheckForm--submit {
    flex: 0 1 auto;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PaymentOptionsInput--paymentOption {
  border-bottom: 1px solid rgba(var(--c-border));
}
.PaymentOptionsInput--radioButton {
  display: none;
}
.PaymentOptionsInput--condition {
  font-size: 14px;
  line-height: 1.2;
  display: block;
  margin-top: var(--spacing-12, 12px);
  color: rgba(var(--c-grey-text), 1);
}
@media (min-width: 750px) {
.PaymentOptionsInput--condition {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PaymentOptionsInput--condition {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PaymentOptionsInput--condition {
    line-height: 1.2;
}
}
.PaymentOptionsInput--label {
  position: relative;
  display: block;
  padding: var(--spacing-24, 24px) 0 var(--spacing-24, 24px) var(--spacing-40, 40px);
}
.PaymentOptionsInput--label::after {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 100%;
  transform: translateY(-50%);
  transition: background-color 0.2s ease-in;
  content: "";
}
.PaymentOptionsInput--label::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(var(--c-grey), 1);
  border-radius: 100%;
  transform: translateY(-50%);
  transition: border-color 0.2s ease-in;
  content: "";
}
.PaymentOptionsInput--label:hover {
  cursor: pointer;
}
.PaymentOptionsInput--radioButton:checked + .PaymentOptionsInput--label::before {
  border-color: rgba(var(--c-black), 1);
}
.PaymentOptionsInput--radioButton:checked + .PaymentOptionsInput--label::after {
  background-color: rgba(var(--c-black), 1);
}
.PaymentOptionsInput--radioButton:disabled + .PaymentOptionsInput--label {
  color: rgba(var(--c-grey), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PaymentOptionsForm--wrapper {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  margin-bottom: var(--spacing-32, 32px);
}
@media screen and (min-width: 750px) {
.PaymentOptionsForm--wrapper {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1000px) {
.PaymentOptionsForm--wrapper {
    margin-bottom: var(--spacing-40, 40px);
}
}
.PaymentOptionsForm--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.PaymentOptionsForm--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.PaymentOptionsForm--title {
    font-size: 22px;
}
}
.PaymentOptionsForm--discountAccordion {
  margin-bottom: var(--spacing-16, 16px);
}
.PaymentOptionsForm--discountAccordion > .AccordionPanel:first-child {
  border-top: 0;
}
.PaymentOptionsForm--transaPointTriggerTitle {
  display: flex;
  flex-direction: column;
}
.PaymentOptionsForm--transaPointBalance {
  font-weight: 400;
  color: rgba(var(--c-grey), 1);
}
.PaymentOptionsForm--creditCheck {
  padding-top: var(--spacing-16, 16px);
  padding-bottom: var(--spacing-16, 16px);
}
.PaymentOptionsForm--actionBar {
  display: flex;
  justify-content: flex-end;
}
.PaymentOptionsForm--actionBar .PaymentOptionsForm--submit {
  flex: 1 1 auto;
}
@media screen and (min-width: 1000px) {
.PaymentOptionsForm--actionBar .PaymentOptionsForm--submit {
    flex: 0 0 auto;
}
}
.PaymentOptionsForm--billNote {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.PaymentOptionsForm--billNote {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PaymentOptionsForm--billNote {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PaymentOptionsForm--billNote {
    line-height: 1.2;
}
}
.PaymentOptionsForm--billNote span {
  display: block;
}
.PaymentOptionsForm--registrationLink {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
  margin-top: var(--spacing-4, 4px);
}
@media (hover: hover) {
.PaymentOptionsForm--registrationLink:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.PaymentOptionsForm--registrationLink:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AutocompleteList {
  position: absolute;
  z-index: 1;
  width: 100%;
  max-height: 200px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style-type: none;
  background-color: rgba(var(--c-white), 1);
  border: 1px solid rgba(var(--c-border-dark));
  border-top: none;
}
.AutocompleteList--itemButton {
  width: 100%;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  text-align: left;
}
.isActive .AutocompleteList--itemButton, .AutocompleteList--itemButton:hover {
  background-color: rgba(var(--c-grey-light), 1);
}
.AutocompleteList--itemButton mark {
  background-color: rgba(var(--c-yellow-light), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* .TextInput {
} */
.TextInput--inner {
  position: relative;
}
.TextInput--input {
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
  padding: var(--spacing-16, 16px);
  background: transparent;
  border: 1px solid rgba(var(--c-border-dark));
  border-radius: var(--border-radius-xsmall);
  outline: none;
  transition: border-color 0.2s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
@media (min-width: 750px) {
.TextInput--input {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.TextInput--input {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.TextInput--input {
    line-height: 1.4;
}
}
.TextInput--input:focus {
  border-color: rgba(var(--c-black), 1);
}
.TextInput--input::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.TextInput--input::placeholder {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.TextInput--input:-webkit-autofill, .TextInput--input:-webkit-autofill:hover, .TextInput--input:-webkit-autofill:focus, .TextInput--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-white), 1) inset;
}
.TextInput--input.hasPlaceholder:focus::-moz-placeholder {
  opacity: 1;
}
.TextInput--input.hasPlaceholder:focus::placeholder {
  opacity: 1;
}
.TextInput.isValid .TextInput--input {
  background-color: rgba(var(--c-valid-form-input));
}
.TextInput.isValid .TextInput--input:-webkit-autofill, .TextInput.isValid .TextInput--input:-webkit-autofill:hover, .TextInput.isValid .TextInput--input:-webkit-autofill:focus, .TextInput.isValid .TextInput--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-valid-form-input)) inset;
}
.TextInput.hasError .TextInput--input {
  border-color: rgba(var(--c-signal-red), 1);
}
.TextInput--label {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: var(--spacing-16, 16px);
  padding: 0 var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
@media (min-width: 750px) {
.TextInput--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TextInput--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TextInput--label {
    line-height: 1.2;
}
}
.TextInput--input:not(:-moz-placeholder) + .TextInput--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
.TextInput--input:focus + .TextInput--label, .TextInput--input:not(:placeholder-shown) + .TextInput--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
@media (min-width: 750px) {
.TextInput--input:not(:-moz-placeholder) + .TextInput--label {
    font-size: 12px;
}
.TextInput--input:focus + .TextInput--label, .TextInput--input:not(:placeholder-shown) + .TextInput--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.TextInput--input:not(:-moz-placeholder) + .TextInput--label {
    font-size: 12px;
}
.TextInput--input:focus + .TextInput--label, .TextInput--input:not(:placeholder-shown) + .TextInput--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.TextInput--input:not(:-moz-placeholder) + .TextInput--label {
    line-height: 1.4;
}
.TextInput--input:focus + .TextInput--label, .TextInput--input:not(:placeholder-shown) + .TextInput--label {
    line-height: 1.4;
}
}
.TextInput.hasError .TextInput--input:not(:-moz-placeholder) + .TextInput--label {
  color: rgba(var(--c-signal-red), 1);
}
.TextInput.hasError .TextInput--input:focus + .TextInput--label, .TextInput.hasError .TextInput--input:not(:placeholder-shown) + .TextInput--label {
  color: rgba(var(--c-signal-red), 1);
}
.TextInput--iconWrapper {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  transform: translateY(-50%);
}
.TextInput--additionalInformation {
  font-size: 12px;
  line-height: 1.4;
  margin-top: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.TextInput--additionalInformation {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.TextInput--additionalInformation {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.TextInput--additionalInformation {
    line-height: 1.4;
}
}
.TextInput--additionalInformation a {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.TextInput--additionalInformation a:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.TextInput--additionalInformation a:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ShippingFormFields--grid {
  --row-gap: var(--spacing-24, 24px);
  --column-gap: var(--spacing-24, 24px);
  display: grid;
  grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media screen and (max-width: 750px) {
.ShippingFormFields--grid {
    grid-gap: var(--spacing-16, 16px);
}
}
.ShippingFormFields--half {
  max-width: calc(50% - 12px);
}
.ShippingFormFields--gridItemFull {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.ShippingFormFields--gridItemFull {
    grid-column-start: auto;
    grid-column-end: span 12;
}
}
.ShippingFormFields--gridItemMini {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.ShippingFormFields--gridItemMini {
    grid-column-start: auto;
    grid-column-end: span 2;
}
}
.ShippingFormFields--gridItemLarge {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.ShippingFormFields--gridItemLarge {
    grid-column-start: auto;
    grid-column-end: span 10;
}
}
.ShippingFormFields--gridItemHalf {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.ShippingFormFields--gridItemHalf {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.InputOptions {
  width: 100%;
}
.InputOptions--inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12, 12px);
}
.InputOptions--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  display: block;
}
@media (min-width: 750px) {
.InputOptions--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.InputOptions--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.InputOptions--title {
    line-height: 1.2;
}
}
.InputOption {
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
@media (min-width: 750px) {
.InputOption {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.InputOption {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.InputOption {
    line-height: 1.4;
}
}
.InputOption strong,
.InputOption b {
  font-weight: bold;
}
.InputOption[data-disabled=true] {
  color: rgba(var(--c-grey), 1);
}
[data-variant=default] .InputOption {
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
}
.InputOption > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
[data-variant=default] .InputOption--box {
  margin-right: var(--spacing-16, 16px);
}
[data-variant=filter] .InputOption--box {
  margin-left: var(--spacing-16, 16px);
}
input[type=checkbox] ~ .InputOption--box {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: rgba(var(--c-white), 1);
  border: 1px solid rgba(var(--c-border-dark));
  outline: none;
  transition: outline 0.2s ease-in-out, border 0.2s ease-in-out;
  border-radius: var(--border-radius-xsmall);
}
input[type=checkbox] ~ .InputOption--box > [data-icon] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
}
input[type=radio] ~ .InputOption--box {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: rgba(var(--c-white), 1);
  border: 1px solid rgba(var(--c-border-dark));
  outline: none;
  transition: outline 0.2s ease-in-out, border 0.2s ease-in-out;
  border-radius: 100%;
}
input[type=radio] ~ .InputOption--box::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: rgba(var(--c-black), 1);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  content: "";
}
.hasError input[type=radio] ~ .InputOption--box, .hasError input[type=checkbox] ~ .InputOption--box {
  border-color: rgba(var(--c-signal-red), 1);
}
input[type=checkbox]:checked ~ .InputOption--box {
  border-color: rgba(var(--c-black), 1);
}
input[type=checkbox]:checked ~ .InputOption--box > [data-icon] {
  visibility: visible;
  opacity: 1;
  transition: visibility 50ms ease-in-out, opacity 50ms ease-in-out;
}
input[type=radio]:checked ~ .InputOption--box {
  border-color: rgba(var(--c-black), 1) !important;
}
input[type=radio]:checked ~ .InputOption--box::after {
  visibility: visible;
  opacity: 1;
}
.InputOption:hover input[type=checkbox] ~ .InputOption--box, .InputOption:focus input[type=checkbox] ~ .InputOption--box {
  border-color: rgba(var(--c-black), 1);
}
.InputOption:hover input[type=radio] ~ .InputOption--box, .InputOption:focus input[type=radio] ~ .InputOption--box {
  border-color: rgba(var(--c-black), 1);
}
.InputOption--label a {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.InputOption--label a:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.InputOption--label a:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.InputOption--count {
  color: rgba(var(--c-grey), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ShippingInformation {
  margin-top: var(--spacing-24, 24px);
  padding-top: var(--spacing-24, 24px);
  border-top: 1px solid rgba(var(--c-border));
}
@media screen and (min-width: 1000px) {
.ShippingInformation {
    margin-top: var(--spacing-32, 32px);
    padding-top: var(--spacing-32, 32px);
}
}
.ShippingInformationTitle {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.ShippingInformationTitle {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.ShippingInformationTitle {
    font-size: 16px;
}
}
.ShippingInformationDetail {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.ShippingInformationDetail {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ShippingInformationDetail {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ShippingInformationDetail {
    line-height: 1.2;
}
}
.ShippingInformationPrice {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ShippingInformationPrice {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ShippingInformationPrice {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ShippingInformationPrice {
    line-height: 1.2;
}
}
.ShippingInformationLongtail {
  margin-top: var(--spacing-16, 16px);
  max-width: 375px;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ShippingForm {
  display: flex;
  flex-direction: column;
}
.ShippingForm--section {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.ShippingForm--section {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.ShippingForm--legendWrapper {
  margin-bottom: var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.ShippingForm--legendWrapper {
    margin-bottom: var(--spacing-32, 32px);
}
}
.ShippingForm--legend {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ShippingForm--legend {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.ShippingForm--legend {
    font-size: 22px;
}
}
.ShippingForm--billingAddress .ShippingForm--legend {
  margin-bottom: var(--spacing-16, 16px);
}
.ShippingForm--subLegend {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ShippingForm--subLegend {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ShippingForm--subLegend {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ShippingForm--subLegend {
    line-height: 1.2;
}
}
.ShippingForm--shippingBillingWrapper {
  margin-top: var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.ShippingForm--shippingBillingWrapper {
    margin-top: var(--spacing-32, 32px);
}
}
.ShippingForm--shippingBillingWrapper .InputOption {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ShippingForm--shippingBillingWrapper .InputOption {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ShippingForm--shippingBillingWrapper .InputOption {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ShippingForm--shippingBillingWrapper .InputOption {
    line-height: 1.2;
}
}
.ShippingForm--billingAddress {
  margin-top: var(--spacing-24, 24px);
  padding-top: var(--spacing-24, 24px);
  border-top: 1px solid rgba(var(--c-border));
}
@media screen and (min-width: 1000px) {
.ShippingForm--billingAddress {
    margin-top: var(--spacing-32, 32px);
    padding-top: var(--spacing-32, 32px);
}
}
.ShippingForm--actionBar {
  display: flex;
  justify-content: flex-end;
  margin: var(--spacing-40, 40px) 0;
}
.ShippingForm--submitButton {
  flex: 1 0 100%;
}
@media screen and (min-width: 1000px) {
.ShippingForm--submitButton {
    flex: 0 1 50%;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SubmitOrderForm {
  margin-top: var(--spacing-16, 16px);
}
.SubmitOrderForm--section {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.SubmitOrderForm--section {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.SubmitOrderForm--section:not(:last-of-type) {
  margin-bottom: var(--spacing-16, 16px);
}
.SubmitOrderForm--actionBar {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-32, 32px);
}
.SubmitOrderForm--actionBar button {
  flex: 1 1 100%;
}
@media screen and (min-width: 1000px) {
.SubmitOrderForm--actionBar {
    margin-top: var(--spacing-40, 40px);
}
.SubmitOrderForm--actionBar button {
    flex: 0 1 auto;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* .BrandTeaserGrid {
} */
.BrandTeaserGrid--title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.BrandTeaserGrid--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.BrandTeaserGrid--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.BrandTeaserGrid--title {
    line-height: 1.2;
}
}
.BrandTeaserGrid--items {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-8, 8px);
}
@media screen and (min-width: 1000px) {
.BrandTeaserGrid--items {
    grid-template-columns: repeat(7, 1fr);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Breadcrumb {
  --breadcrumb-mask: 60px;
  --breadcrumb-color: rgba(var(--c-grey), 1);
  --breadcrumb-color-accent: rgba(var(--c-black), 1);
  font-size: 12px;
  line-height: 1.4;
  position: relative;
  max-width: 100%;
  color: var(--breadcrumb-color);
  -webkit-mask: linear-gradient(90deg, black 0%, black calc(100% - var(--breadcrumb-mask)), transparent 100%);
          mask: linear-gradient(90deg, black 0%, black calc(100% - var(--breadcrumb-mask)), transparent 100%);
}
@media (min-width: 750px) {
.Breadcrumb {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Breadcrumb {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Breadcrumb {
    line-height: 1.4;
}
}
.Breadcrumb[data-color=white] {
  --breadcrumb-color: rgba(var(--c-grey-light), 1);
  --breadcrumb-color-accent: rgba(var(--c-white), 1);
}
.Breadcrumb:not([data-inline=true]) {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 32px;
  -webkit-mask: linear-gradient(90deg, black 0%, black calc(100% - var(--breadcrumb-mask) - var(--site-padding)), transparent 100%);
          mask: linear-gradient(90deg, black 0%, black calc(100% - var(--breadcrumb-mask) - var(--site-padding)), transparent 100%);
}
@media screen and (min-width: 750px) {
.Breadcrumb:not([data-inline=true]) {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.Breadcrumb:not([data-inline=true]) {
    margin-top: 64px;
}
}
.Breadcrumb--list {
  display: flex;
  align-items: center;
  max-width: 100%;
  padding-right: var(--breadcrumb-mask);
  padding-bottom: 1.33em;
  overflow: auto;
}
.Breadcrumb--item {
  display: inline-flex;
  align-items: center;
}
.Breadcrumb--item + .Breadcrumb--item::before {
  display: block;
  width: 2px;
  height: 2px;
  margin: 0 var(--spacing-10, 10px);
  background-color: var(--breadcrumb-color-accent);
  border-radius: 100%;
  content: "";
}
.Breadcrumb--item:last-child {
  color: var(--breadcrumb-color-accent);
}
.Breadcrumb--link {
  white-space: nowrap;
  transition: color 0.2s ease-in-out;
}
@media (hover: hover) {
.Breadcrumb--link:hover {
    color: var(--breadcrumb-color-accent);
}
.Breadcrumb--link:focus {
    color: var(--breadcrumb-color-accent);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.DataList {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.DataList {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.DataList {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.DataList {
    line-height: 1.2;
}
}
@media screen and (min-width: 580px) {
.DataList {
    gap: var(--spacing-16, 16px);
}
}
@media screen and (min-width: 580px) {
.DataList--row {
    display: flex;
    gap: var(--spacing-12, 12px);
    justify-content: space-between;
    padding-bottom: var(--spacing-24, 24px);
    border-bottom: 1px solid rgba(var(--c-border));
}
.DataList--row:not(:first-child) {
    padding-top: var(--spacing-24, 24px);
}
}
.DataList--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.DataList--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.DataList--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.DataList--title {
    line-height: 1.2;
}
}
@media screen and (max-width: 580px) {
.DataList--content {
    margin-top: var(--spacing-6, 6px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.NavigationLink {
  position: relative;
  transition: color 0.2s ease-in-out;
}
.NavigationLink:hover {
  color: rgba(var(--c-black), 1);
}
.NavigationLink--inner {
  display: flex;
  gap: var(--spacing-4, 4px);
  align-items: center;
  overflow: hidden;
}
.NavigationLink--arrow {
  transform: translateX(-4px);
  opacity: 0;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.NavigationLink:hover .NavigationLink--arrow {
  transform: translateX(0);
  opacity: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.DictionaryGrid {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40, 40px);
}
@media screen and (min-width: 750px) {
.DictionaryGrid {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.DictionaryGrid {
    margin-bottom: 64px;
}
}
@media screen and (min-width: 1000px) {
.DictionaryGrid {
    gap: var(--spacing-80, 80px);
}
}
.DictionaryGrid--group {
  position: relative;
  display: grid;
  grid-gap: var(--spacing-12, 12px);
  grid-template-columns: 1fr;
  align-items: flex-start;
  justify-content: flex-start;
  scroll-margin-top: var(--spacing-48, 48px);
}
@media screen and (min-width: 580px) {
.DictionaryGrid--group {
    grid-gap: var(--spacing-24, 24px);
    grid-template-columns: 1fr 2fr;
}
}
@media screen and (min-width: 750px) {
.DictionaryGrid--group {
    grid-template-columns: 1fr 3fr;
}
}
@media screen and (min-width: 1000px) {
.DictionaryGrid--group {
    grid-template-columns: 1fr 4fr;
}
}
.DictionaryGrid--group--title {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  position: sticky;
  top: 0;
  bottom: var(--spacing-80, 80px);
}
@media (min-width: 750px) {
.DictionaryGrid--group--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.DictionaryGrid--group--title {
    font-size: 34px;
}
}
@media screen and (max-width: 750px) {
.DictionaryGrid--group--title {
    z-index: 1;
    margin-bottom: var(--spacing--12, -12px);
    padding: var(--spacing-8, 8px) 0 var(--spacing-24, 24px);
    background: linear-gradient(180deg, rgba(var(--c-white), 1) 0%, rgba(var(--c-white), 1) 75%, rgba(255, 255, 255, 0) 100%);
}
}
.DictionaryGrid--group--list {
  margin-top: var(--spacing--4, -4px);
  margin-bottom: var(--spacing--4, -4px);
}
@media screen and (min-width: 580px) {
.DictionaryGrid--group--list {
    -moz-columns: 2;
         columns: 2;
    -moz-column-gap: var(--spacing-24, 24px);
         column-gap: var(--spacing-24, 24px);
}
}
@media screen and (min-width: 750px) {
.DictionaryGrid--group--list {
    -moz-columns: 3;
         columns: 3;
}
}
@media screen and (min-width: 1000px) {
.DictionaryGrid--group--list {
    -moz-columns: 4;
         columns: 4;
}
}
.DictionaryGrid--group--link {
  font-size: 14px;
  line-height: 1.2;
  display: block;
  padding: var(--spacing-4, 4px) 0;
}
@media (min-width: 750px) {
.DictionaryGrid--group--link {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.DictionaryGrid--group--link {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.DictionaryGrid--group--link {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.DictionaryTeaser {
  margin-bottom: 32px;
  margin-top: var(--spacing-24, 24px);
}
@media screen and (min-width: 750px) {
.DictionaryTeaser {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.DictionaryTeaser {
    margin-bottom: 64px;
}
}
.NavigationFlyout .DictionaryTeaser {
  margin-bottom: 0;
}
.DictionaryTeaser:not([data-layout=header]) {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 750px) {
.DictionaryTeaser {
    margin-top: var(--spacing-64, 64px);
}
}
.DictionaryTeaser--title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.DictionaryTeaser--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.DictionaryTeaser--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.DictionaryTeaser--title {
    line-height: 1.2;
}
}
.DictionaryTeaser--list {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  display: flex;
  flex-wrap: nowrap;
  gap: -5px;
  align-items: center;
  overflow-x: auto;
}
@media (min-width: 750px) {
.DictionaryTeaser--list {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.DictionaryTeaser--list {
    font-size: 22px;
}
}
@media screen and (min-width: 1280px) {
.DictionaryTeaser--list {
    overflow-x: hidden;
    width: 100%;
}
.DictionaryTeaser--list > * {
    flex: 1 1 0;
}
}
.DictionaryTeaser--list:has(.DictionaryTeaser--item:hover) {
  color: rgba(var(--c-grey), 1);
}
.DictionaryTeaser--item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: var(--border-radius-small);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
@media screen and (min-width: 1280px) {
.DictionaryTeaser--item {
    width: 100%;
}
}
.DictionaryTeaser--item:hover {
  color: rgba(var(--c-black), 1);
  background-color: rgba(var(--c-green-light), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.InfoBox {
  padding: var(--spacing-20, 20px);
  background-color: rgba(var(--c-white), 1);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  box-shadow: var(--shadow-default);
}
.InfoBox--inner {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
}
.InfoBox--content {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.InfoBox--content {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.InfoBox--content {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.InfoBox--content {
    line-height: 1.4;
}
}
.InfoBox--content a {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
  margin-left: var(--spacing-4, 4px);
}
@media (hover: hover) {
.InfoBox--content a:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.InfoBox--content a:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.LoadMore {
  margin-top: 32px;
  text-align: center;
}
@media screen and (min-width: 750px) {
.LoadMore {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.LoadMore {
    margin-top: 64px;
}
}
.LoadMore--text {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.LoadMore--text {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.LoadMore--text {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.LoadMore--text {
    line-height: 1.4;
}
}
.LoadMore--buttonWrapper {
  display: inline-block;
  position: relative;
  margin-top: var(--spacing-12, 12px);
}
.LoadMore--buttonWrapper::after {
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 100%;
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -15px;
  margin-left: -15px;
}
[data-state=loading] .LoadMore--buttonWrapper::after {
  visibility: visible;
  animation: rotate 1.2s linear infinite;
}
[data-state=loading] .LoadMore--buttonWrapper > .LoadMore--button {
  pointer-events: none;
  opacity: 0.5;
}
.LoadMore--button {
  position: relative;
  transition: opacity 0.2s;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PaymentMethodsIconGrid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-42, 42px);
}
.PaymentMethodsIconGrid[data-variant=border] {
  padding: var(--spacing-28, 28px) var(--spacing-20, 20px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.PaymentMethodsIconGrid[data-variant=border] {
    padding: var(--spacing-48, 48px) var(--spacing-32, 32px);
}
}
.PaymentMethodsIconGrid--row {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: space-between;
}
.PaymentMethodsIconGrid--item {
  flex: 0 1 auto;
}
.PaymentMethodsIconGrid--item svg {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SearchSuggestions--item {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(var(--c-grey-text), 1);
}
@media (min-width: 750px) {
.SearchSuggestions--item {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.SearchSuggestions--item {
    font-size: 16px;
}
}
.SearchSuggestions--link {
  font-weight: bold;
  display: block;
  padding-top: var(--spacing-4, 4px);
  padding-bottom: var(--spacing-4, 4px);
  text-align: left;
}
.SearchSuggestions--link > em {
  font-weight: initial;
}
.SearchSuggestions--link:hover, .SearchSuggestions--link:focus {
  color: rgba(var(--c-black), 1);
}
.SearchSuggestions--category {
  color: rgba(var(--c-black), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductSuggestions--link {
  position: relative;
  display: flex;
  gap: var(--spacing-12, 12px);
  align-items: center;
  margin: var(--spacing-10, 10px) 0;
}
.ProductSuggestions--link:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
.ProductSuggestions--aside {
  position: relative;
  flex: 0 0 auto;
}
.ProductSuggestions--badge {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.ProductSuggestions--badge > [data-icon] {
  font-size: 8px;
}
.ProductSuggestions--image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-40, 40px);
  height: var(--spacing-40, 40px);
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius-small);
}
@media screen and (max-width: 1000px) {
.ProductSuggestions--image {
    background-color: rgba(var(--c-grey-light), 1);
}
}
.ProductSuggestions--image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  mix-blend-mode: multiply;
}
.ProductSuggestions--content {
  display: flex;
  flex-direction: column;
}
.ProductSuggestions--name {
  font-size: 14px;
  line-height: 1.2;
  color: rgba(var(--c-black), 1);
}
@media (min-width: 750px) {
.ProductSuggestions--name {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductSuggestions--name {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductSuggestions--name {
    line-height: 1.2;
}
}
.ProductSuggestions--brand {
  font-weight: 700;
}
.ProductSuggestions--brand::after {
  content: " ";
}
.ProductSuggestions--price {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--c-grey-text), 1);
}
@media (min-width: 750px) {
.ProductSuggestions--price {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductSuggestions--price {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductSuggestions--price {
    line-height: 1.4;
}
}
.ProductSuggestions--price {
  margin-top: 0.25em;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SearchResults--item {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(var(--c-grey-text), 1);
}
@media (min-width: 750px) {
.SearchResults--item {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.SearchResults--item {
    font-size: 16px;
}
}
.SearchResults--link {
  display: block;
  padding-top: var(--spacing-4, 4px);
  padding-bottom: var(--spacing-4, 4px);
}
.SearchResults--link:hover, .SearchResults--link:focus {
  color: rgba(var(--c-black), 1);
}
.SearchResults--category {
  font-size: 12px;
  line-height: 1.4;
  display: block;
}
@media (min-width: 750px) {
.SearchResults--category {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.SearchResults--category {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.SearchResults--category {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SearchDirectLink {
  display: flex;
  gap: 1em;
  align-items: center;
  padding: var(--spacing-16, 16px);
}
@media screen and (min-width: 1000px) {
.SearchDirectLink {
    padding: var(--spacing-16, 16px) var(--spacing-32, 32px);
}
}
.SearchDirectLink:hover {
  background-color: rgba(var(--c-grey-light), 1);
}
.SearchDirectLink--image {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: rgba(var(--c-white), 1);
  border-radius: 10px;
}
.SearchDirectLink--image:not(img) {
  background-color: rgba(var(--c-grey-light), 1);
}
.SearchDirectLink--keystroke {
  width: 34px;
  height: 34px;
  margin-left: auto;
  line-height: 34px;
  text-align: center;
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: 5px;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SearchFlyout {
  z-index: 60;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: var(--spacing-8, 8px);
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 1000px) {
.SearchFlyout {
    min-width: min(800px, 100vw - 352px);
}
}
.SearchFlyout--grid {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 1000px) {
.SearchFlyout--grid {
    grid-template-columns: 1fr 1fr;
}
}
.SearchFlyout--section {
  padding: var(--spacing-16, 16px);
}
.SearchFlyout--section:not(:last-child) {
  border-bottom: 1px solid rgba(var(--c-border));
}
@media screen and (min-width: 1000px) {
.SearchFlyout--section {
    padding: var(--spacing-32, 32px) var(--spacing-32, 32px) var(--spacing-16, 16px);
}
.SearchFlyout--section:not(:first-child) {
    padding-top: var(--spacing-24, 24px);
}
.SearchFlyout--section:not(:last-child) {
    border-bottom: none;
}
}
.SearchFlyout--suggestions {
  grid-column: 1/2;
}
.SearchFlyout--product {
  grid-column: 1/2;
}
@media screen and (min-width: 1000px) {
.SearchFlyout--product {
    grid-row: 1/span 4;
    grid-column: 2/3;
    background-color: rgba(var(--c-grey-light), 1);
}
.SearchFlyout--product.SearchFlyout--section {
    padding-top: var(--spacing-32, 32px);
}
}
.SearchFlyout--guide {
  grid-column: 1/2;
}
.SearchFlyout--blog {
  grid-column: 1/2;
}
.SearchFlyout--brands {
  grid-column: 1/2;
}
.SearchFlyout--empty {
  grid-column: 1/3;
}
.SearchFlyout--sectionTitle {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: var(--spacing-12, 12px);
  color: rgba(var(--c-grey-text), 1);
}
@media (min-width: 750px) {
.SearchFlyout--sectionTitle {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.SearchFlyout--sectionTitle {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.SearchFlyout--sectionTitle {
    line-height: 1.4;
}
}
.SearchFlyout--product .SearchFlyout--sectionTitle {
  margin-bottom: var(--spacing-8, 8px);
}
* + .SearchFlyout--directlink {
  border-top: 2px solid rgba(var(--c-grey-light), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Demo {
  position: relative;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TrustIconGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media screen and (min-width: 750px) {
.TrustIconGrid {
    display: flex;
    flex-wrap: wrap;
}
}
.TrustIconGrid--item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  background: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-small);
}
.TrustIconGrid--item svg {
  max-width: 100%;
  max-height: 100%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PageHeroBackground {
  position: relative;
  z-index: 0;
}
.PageHeroBackground::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--1d210a97-height);
  background-color: var(--theme-background);
  z-index: -1;
  transition: transform 0.3s ease-out, opacity 0.3s;
  will-change: transform;
}
.page-enter-from .PageHeroBackground::before {
  transform: translateY(-40px);
}
.page-leave-to .PageHeroBackground::before {
  transform: translateY(40px);
}
[data-with-image=false] .PageHeroBackground::before {
  height: 100%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FilterButtonSelect--label {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.FilterButtonSelect--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FilterButtonSelect--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FilterButtonSelect--label {
    line-height: 1.2;
}
}
.FilterButtonSelect--options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8, 8px);
}
.FilterButtonSelect[data-align=center] .FilterButtonSelect--options {
  justify-content: center;
}
.FilterButtonSelect--option {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  font-size: 12px;
  line-height: 1.4;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
  --button-color: rgba(var(--c-black), 1);
  --button-border-color: transparent;
  --button-background-color: rgba(var(--c-grey-light), 1);
  --button-hover-background-color: rgba(var(--c-grey-medium), 1);
  font-size: 14px;
  line-height: 1.2;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.FilterButtonSelect--option::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.FilterButtonSelect--option::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.FilterButtonSelect--option:hover::before {
    border-color: var(--button-hover-border-color);
}
.FilterButtonSelect--option:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.FilterButtonSelect--option:focus::before {
    border-color: var(--button-hover-border-color);
}
.FilterButtonSelect--option:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
@media (min-width: 750px) {
.FilterButtonSelect--option {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.FilterButtonSelect--option {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.FilterButtonSelect--option {
    line-height: 1.4;
}
}
@media (min-width: 750px) {
.FilterButtonSelect--option {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FilterButtonSelect--option {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FilterButtonSelect--option {
    line-height: 1.2;
}
}
.FilterButtonSelect--option.isActive {
  --button-border-color: rgba(var(--c-black), 1);
  --button-hover-border-color: rgba(var(--c-black), 1);
}
.FilterButtonSelect--option.isDisabled {
  --button-color: rgba(var(--c-grey), 1) !important;
  --button-background-color: rgba(var(--c-grey-light), 1) !important;
  --button-border-color: transparent !important;
  pointer-events: none;
}
.FilterButtonSelect--option.isDisabled::after {
  display: none;
}
.FilterButtonSelect[data-variant=activity] .FilterButtonSelect--option {
  min-width: 130px;
  padding: var(--spacing-16, 16px) var(--spacing-8, 8px);
  --button-border-radius: var(--border-radius-medium);
  --button-background-color: rgba(var(--c-white), 1);
  --button-hover-background-color: var(--theme-background-light);
}
.FilterButtonSelect--option--label {
  position: relative;
  z-index: 1;
}
.FilterButtonSelect--input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FilterClear {
  font-size: 14px;
  line-height: 1.2;
  display: inline-flex;
  gap: var(--spacing-4, 4px);
  align-items: center;
  color: rgba(var(--c-grey), 1);
  transition: color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.FilterClear {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FilterClear {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FilterClear {
    line-height: 1.2;
}
}
@media (hover: hover) {
.FilterClear:hover {
    color: rgba(var(--c-black), 1);
}
.FilterClear:focus {
    color: rgba(var(--c-black), 1);
}
}
.FilterClear--icon {
  margin-top: -2px;
  transition: transform 0.2s ease-in-out;
}
.FilterClear:hover .FilterClear--icon {
  transform: rotate(90deg);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ActivityFilter {
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ActivityFilter {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ActivityFilter {
    margin-bottom: 64px;
}
}
.ActivityFilter--head--before {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  padding-top: 16px;
}
@media screen and (min-width: 750px) {
.ActivityFilter--head--before {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.ActivityFilter--head--before {
    padding-top: 32px;
}
}
.ActivityFilter--head--inner {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  padding-top: 32px;
  padding-bottom: 32px;
  text-align: center;
}
@media screen and (min-width: 750px) {
.ActivityFilter--head--inner {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ActivityFilter--head--inner {
    padding-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ActivityFilter--head--inner {
    padding-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ActivityFilter--head--inner {
    padding-bottom: 64px;
}
}
.ActivityFilter--title {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.ActivityFilter--title {
    font-size: calc(5.2830188679vw - 9.6226415094px);
}
}
@media (min-width: 1280px) {
.ActivityFilter--title {
    font-size: 58px;
}
}
.ActivityFilter--primary {
  margin-top: var(--spacing-32, 32px);
}
@media screen and (max-width: 750px) {
.ActivityFilter--primary {
    display: none;
}
}
.ActivityFilter--bar {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 750px) {
.ActivityFilter--bar {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.ActivityFilter--bar {
    margin-top: 32px;
}
}
@media screen and (min-width: 750px) {
.ActivityFilter--bar {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.ActivityFilter--bar {
    margin-bottom: 32px;
}
}
.ActivityFilter--bar--aside {
  display: flex;
  align-items: center;
}
.Button.ActivityFilter--toggle {
  position: sticky;
  bottom: var(--spacing-24, 24px);
  left: 50%;
  margin-top: var(--spacing-8, 8px);
  transform: translate(-50%, 0);
}
@media screen and (min-width: 750px) {
.Button.ActivityFilter--toggle {
    display: none;
}
}
.ActivityFilter--toggle--count {
  margin-left: var(--spacing-4, 4px);
  color: rgba(var(--c-black), 0.5);
}
@media screen and (max-width: 750px) {
.ActivityFilter--tags {
    display: none;
}
}
.ActivityFilter--total {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ActivityFilter--total {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ActivityFilter--total {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ActivityFilter--total {
    line-height: 1.2;
}
}
* + .ActivityFilter--total::before {
  display: inline-block;
  margin-right: 16px;
  margin-left: 16px;
  color: rgba(var(--c-grey), 1);
  content: "|";
}
.ActivityFilter--sidebar--row {
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FilterPopup {
  font-size: 14px;
  line-height: 1.2;
  z-index: 20;
  position: relative;
  display: inline;
}
@media (min-width: 750px) {
.FilterPopup {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FilterPopup {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FilterPopup {
    line-height: 1.2;
}
}
.FilterPopup--button--arrow {
  transition: transform 0.2s ease-in-out;
}
[aria-expanded=true] .FilterPopup--button--arrow {
  transform: scale(1, -1);
}
.FilterPopup--popup {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
  align-items: flex-start;
  width: 300px;
  max-height: 420px;
  margin-top: var(--spacing-20, 20px);
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  transform: translateY(10px);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
.FilterPopup--popup > * {
  width: 100%;
}
[aria-expanded=true] + .FilterPopup--popup {
  transform: none;
  visibility: visible;
  opacity: 1;
}
.FilterPopup--popup--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.FilterPopup--popup--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.FilterPopup--popup--title {
    font-size: 22px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FilterReset {
  font-size: 14px;
  line-height: 1.2;
  display: inline-flex;
  gap: var(--spacing-4, 4px);
  align-items: center;
  color: rgba(var(--c-signal-blue), 1);
  transition: color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.FilterReset {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FilterReset {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FilterReset {
    line-height: 1.2;
}
}
@media (hover: hover) {
.FilterReset:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
}
.FilterReset:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
}
}
.FilterReset--icon {
  transition: transform 0.2s ease-in-out;
}
.FilterReset:hover .FilterReset--icon {
  transform: rotate(270deg);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FilterSort {
  font-size: 14px;
  line-height: 1.2;
  z-index: 20;
  position: relative;
  display: inline;
}
@media (min-width: 750px) {
.FilterSort {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FilterSort {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FilterSort {
    line-height: 1.2;
}
}
.FilterSort--button {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
}
.FilterSort--button--arrow {
  transition: transform 0.2s ease-in-out;
}
[aria-expanded=true] .FilterSort--button--arrow {
  transform: scale(1, -1);
}
.FilterSort--popup {
  width: 220px;
  max-height: 420px;
  margin-top: var(--spacing-20, 20px);
  border: 1px solid rgba(var(--c-border));
  transform: translateY(10px);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
.FilterSort--popup > * {
  width: 100%;
}
[aria-expanded=true] + .FilterSort--popup {
  transform: none;
  visibility: visible;
  opacity: 1;
}
.FilterSort--option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
  transition: background-color 0.2s ease-in-out;
}
.FilterSort--option + .FilterSort--option {
  border-top: 1px solid rgba(var(--c-black), 0.1);
}
@media (hover: hover) {
.FilterSort--option:hover {
    background-color: rgba(var(--c-grey-light), 1);
    cursor: pointer;
}
.FilterSort--option:focus {
    background-color: rgba(var(--c-grey-light), 1);
    cursor: pointer;
}
}
.FilterSort--field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FilterTag {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
  --button-color: rgba(var(--c-white), 1);
  --button-background-color: rgba(var(--c-black), 1);
  --button-hover-background-color: rgba(var(--c-grey-ultradark), 1);
  font-size: 14px;
  line-height: 1.2;
  display: inline-flex;
  gap: var(--spacing-12, 12px);
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  padding: var(--spacing-10, 10px) var(--spacing-20, 20px);
  position: relative;
  display: inline-flex;
  gap: var(--spacing-8, 8px);
  color: rgba(var(--c-black), 1);
}
.FilterTag::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.FilterTag::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.FilterTag:hover::before {
    border-color: var(--button-hover-border-color);
}
.FilterTag:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.FilterTag:focus::before {
    border-color: var(--button-hover-border-color);
}
.FilterTag:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
@media (min-width: 750px) {
.FilterTag {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FilterTag {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FilterTag {
    line-height: 1.2;
}
}
.FilterTag:disabled {
  --button-color: rgba(var(--c-grey), 1) !important;
  --button-background-color: rgba(var(--c-grey-light), 1) !important;
  --button-border-color: transparent !important;
}
@media (min-width: 750px) {
.FilterTag {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.FilterTag {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.FilterTag {
    line-height: 1.4;
}
}
.FilterTag::before {
  background-color: rgba(var(--c-grey-light), 1);
  border-color: transparent;
}
.FilterTag::after {
  background-color: rgba(var(--c-white), 1);
  border: 1px solid transparent;
  transition: border-color 0.2s ease-out;
}
@media (hover: hover) {
.FilterTag:hover::before {
    border-color: rgba(var(--c-black), 1);
}
.FilterTag:hover::after {
    border-color: rgba(var(--c-black), 1);
}
.FilterTag:focus::before {
    border-color: rgba(var(--c-black), 1);
}
.FilterTag:focus::after {
    border-color: rgba(var(--c-black), 1);
}
}
.FilterTag--values {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--spacing-4, 4px);
  white-space: nowrap;
}
.FilterTag--clickable {
  cursor: pointer;
}
.FilterTag--visible {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.FilterTag--visible {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.FilterTag--visible {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.FilterTag--visible {
    line-height: 1.4;
}
}
.FilterTag--additional {
  font-size: 10px;
  line-height: 1.4;
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.FilterTag--additional {
    font-size: 10px;
}
}
@media (min-width: 1280px) {
.FilterTag--additional {
    font-size: 10px;
}
}
@media screen and (max-width: 750px) {
.FilterTag--additional {
    line-height: 1.4;
}
}
.FilterTag--clear {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}
.FilterTag:hover .FilterTag--clear {
  transform: rotate(90deg);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductFilterRenderer--Search {
  position: relative;
  margin-bottom: var(--spacing-24, 24px);
}
.ProductFilterRenderer--Input {
  width: 100%;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  padding-right: var(--spacing-45, 45px);
  background-color: rgba(var(--c-grey-light), 1);
  border: none;
  border-radius: var(--spacing-56, 56px);
}
.ProductFilterRenderer--IconWrapper {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  transform: translateY(-50%);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductFilter {
  position: relative;
}
.ProductFilter[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.ProductFilter[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ProductFilter[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ProductFilter[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ProductFilter[data-compose=white] {
    margin-bottom: 96px;
}
}
.ProductFilter--head {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16, 16px);
  width: 100%;
  padding-top: var(--spacing-24, 24px);
  padding-bottom: var(--spacing-24, 24px);
}
@media screen and (max-width: 750px) {
.ProductFilter--head {
    display: none;
}
}
.ProductFilter--main {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8, 8px);
  align-items: center;
  width: 100%;
}
.ProductFilter--main--label {
  font-size: 14px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 750px) {
.ProductFilter--main--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductFilter--main--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductFilter--main--label {
    line-height: 1.2;
}
}
@media screen and (max-width: 1000px) {
.ProductFilter--main--filter {
    display: none;
}
}
.ProductFilter--main--sort {
  margin-left: auto;
}
.ProductFilter--state {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8, 8px);
  align-items: center;
}
.Button.ProductFilter--toggle {
  position: sticky;
  bottom: var(--spacing-24, 24px);
  left: 50%;
  margin-top: var(--spacing-8, 8px);
  transform: translate(-50%, 0);
  z-index: 10;
}
@media screen and (min-width: 750px) {
.Button.ProductFilter--toggle {
    display: none;
}
}
.ProductFilter--toggle--count {
  margin-left: var(--spacing-4, 4px);
  color: rgba(var(--c-black), 0.5);
}
.ProductFilter--accordion--item {
  border-bottom: 1px solid rgba(var(--c-border));
}
.ProductFilter--accordion--item:last-child {
  border-bottom: none;
}
.ProductFilter--accordion--trigger {
  display: grid;
  grid-template-areas: "label arrow" "state state";
  grid-template-columns: 1fr auto;
  width: 100%;
  padding-top: var(--spacing-24, 24px);
  padding-bottom: var(--spacing-24, 24px);
  text-align: left;
}
.ProductFilter--accordion--trigger:disabled {
  opacity: 0.3;
}
.ProductFilter--accordion--label {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  grid-area: label;
}
@media (min-width: 750px) {
.ProductFilter--accordion--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductFilter--accordion--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductFilter--accordion--label {
    line-height: 1.2;
}
}
.ProductFilter--accordion--state,
.ProductFilter--accordion--sortState {
  display: block;
  grid-area: state;
}
.ProductFilter--accordion--state--inner {
  padding-top: var(--spacing-8, 8px);
}
.ProductFilter--accordion--sortState {
  font-size: 14px;
  line-height: 1.2;
  margin-top: var(--spacing-8, 8px);
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.ProductFilter--accordion--sortState {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductFilter--accordion--sortState {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductFilter--accordion--sortState {
    line-height: 1.2;
}
}
.ProductFilter--accordion--arrow {
  grid-area: arrow;
}
.ProductFilter--accordion--arrow > [data-icon] {
  transition: transform 0.3s ease-in-out;
}
.ProductFilter--accordion--body > * {
  padding-bottom: var(--spacing-24, 24px);
}
.ProductFilter--sidebar--reset [data-icon=reset] {
  transition: transform 0.3s ease-in-out;
}
@media (hover: hover) {
.ProductFilter--sidebar--reset:hover [data-icon=reset] {
    transform: rotate(360deg);
}
.ProductFilter--sidebar--reset:focus [data-icon=reset] {
    transform: rotate(360deg);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.BaseForm:not([data-layout=inline], [data-width=full-width]) {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.BaseForm:not([data-layout=inline], [data-width=full-width])[data-compose=white] {
  margin-top: 64px;
  margin-bottom: 64px;
}
@media screen and (min-width: 750px) {
.BaseForm:not([data-layout=inline], [data-width=full-width])[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.BaseForm:not([data-layout=inline], [data-width=full-width])[data-compose=white] {
    margin-top: 128px;
}
}
@media screen and (min-width: 750px) {
.BaseForm:not([data-layout=inline], [data-width=full-width])[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.BaseForm:not([data-layout=inline], [data-width=full-width])[data-compose=white] {
    margin-bottom: 128px;
}
}
.BaseForm[data-width=content-narrow] {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.BaseForm--inner + .BaseForm--inner {
  margin-top: var(--spacing-16, 16px);
}
.BaseForm:not([data-layout=inline]) .BaseForm--inner {
  padding: var(--spacing-40, 40px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.BaseForm:not([data-layout=inline]) .BaseForm--inner {
    padding: var(--spacing-64, 64px) var(--spacing-32, 32px);
}
}
.BaseForm[data-width=content-narrow] .BaseForm--inner {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.BaseForm[data-width=content-narrow] .BaseForm--inner {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.BaseForm--layout {
  --row-gap: var(--spacing-24, 24px);
  --column-gap: var(--spacing-24, 24px);
  display: grid;
  grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.BaseForm:not([data-layout=inline]) .BaseForm--layout {
  max-width: 628px;
  margin-right: auto;
  margin-left: auto;
}
.BaseForm--header {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--header {
    grid-column-start: auto;
    grid-column-end: span 12;
}
}
.BaseForm--row {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--row {
    grid-column-start: auto;
    grid-column-end: span 12;
}
}
.BaseForm--row[data-size=half] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--row[data-size=half] {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
.BaseForm--row[data-size=large] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--row[data-size=large] {
    grid-column-start: auto;
    grid-column-end: span 10;
}
}
.BaseForm--row[data-size=mini] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--row[data-size=mini] {
    grid-column-start: auto;
    grid-column-end: span 2;
}
}
.BaseForm--row[data-size="3/4"] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--row[data-size="3/4"] {
    grid-column-start: auto;
    grid-column-end: span 9;
}
}
.BaseForm--row[data-size="1/4"] {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--row[data-size="1/4"] {
    grid-column-start: auto;
    grid-column-end: span 3;
}
}
.BaseForm--row[data-size=full-half] > * {
  --gap: calc(var(--column-gap) * 0.5);
  width: calc(50% - var(--gap));
}
.BaseForm--gridItemFull {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--gridItemFull {
    grid-column-start: auto;
    grid-column-end: span 12;
}
}
.BaseForm--gridItemHalf {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.BaseForm--gridItemHalf {
    grid-column-start: auto;
    grid-column-end: span 6;
}
}
.BaseForm--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 0.5em;
}
@media (min-width: 750px) {
.BaseForm--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.BaseForm--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.BaseForm--title {
    line-height: 1.2;
}
}
.BaseForm[data-width=content-narrow] .BaseForm--title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  font-weight: bold;
}
@media (min-width: 750px) {
.BaseForm[data-width=content-narrow] .BaseForm--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.BaseForm[data-width=content-narrow] .BaseForm--title {
    font-size: 16px;
}
}
.BaseForm--lead {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.BaseForm--lead {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.BaseForm--lead {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.BaseForm--lead {
    line-height: 1.4;
}
}
.BaseForm--richtext > *:first-child {
  margin-top: 0;
}
.BaseForm--richtext > *:last-child {
  margin-bottom: 0;
}
.BaseForm--richtext > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.BaseForm--richtext > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.BaseForm--richtext .Button + .Button {
  margin-left: 16px;
}
.BaseForm--richtext p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.BaseForm--richtext a:not([class]),
.BaseForm--richtext a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.BaseForm--richtext a:not([class]):hover,
  .BaseForm--richtext a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.BaseForm--richtext a:not([class]):focus,
  .BaseForm--richtext a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.BaseForm--richtext small {
  display: inline-block;
  font-size: 0.75em;
}
.BaseForm--richtext strong,
.BaseForm--richtext b {
  font-weight: bold;
}
.BaseForm--richtext em,
.BaseForm--richtext i {
  font-style: italic;
}
.BaseForm--actionBar {
  display: flex;
  gap: var(--spacing-16, 16px);
  justify-content: flex-end;
  margin-top: var(--spacing-40, 40px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FormBoxHeader {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-32, 32px);
}
.FormBoxHeader--main > *:last-child {
  margin-bottom: 0;
}
.FormBoxHeader--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 0.5em;
}
@media (min-width: 750px) {
.FormBoxHeader--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.FormBoxHeader--title {
    font-size: 22px;
}
}
.FormBoxHeader[data-size=medium] .FormBoxHeader--title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
@media (min-width: 750px) {
.FormBoxHeader[data-size=medium] .FormBoxHeader--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.FormBoxHeader[data-size=medium] .FormBoxHeader--title {
    font-size: 16px;
}
}
.FormBoxHeader--lead {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.FormBoxHeader--lead {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FormBoxHeader--lead {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FormBoxHeader--lead {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FormBoxActions {
  display: flex;
  gap: var(--spacing-16, 16px);
  justify-content: space-between;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FormBox {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.FormBox {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.FormBox > * + * {
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TextArea {
  margin-top: var(--spacing-8, 8px);
}
.TextArea--inner {
  position: relative;
}
.TextArea--input {
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
  padding: var(--spacing-16, 16px);
  background: transparent;
  border: 1px solid rgba(var(--c-border-dark));
  border-radius: var(--border-radius-xsmall);
  outline: none;
  transition: border-color 0.2s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
@media (min-width: 750px) {
.TextArea--input {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.TextArea--input {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.TextArea--input {
    line-height: 1.4;
}
}
.TextArea--input:focus {
  border-color: rgba(var(--c-black), 1);
}
.TextArea--input::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.TextArea--input::placeholder {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.TextArea--input:-webkit-autofill, .TextArea--input:-webkit-autofill:hover, .TextArea--input:-webkit-autofill:focus, .TextArea--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-white), 1) inset;
}
.TextArea--input.hasPlaceholder:focus::-moz-placeholder {
  opacity: 1;
}
.TextArea--input.hasPlaceholder:focus::placeholder {
  opacity: 1;
}
.TextArea.isValid .TextArea--input {
  background-color: rgba(var(--c-valid-form-input));
}
.TextArea.isValid .TextArea--input:-webkit-autofill, .TextArea.isValid .TextArea--input:-webkit-autofill:hover, .TextArea.isValid .TextArea--input:-webkit-autofill:focus, .TextArea.isValid .TextArea--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-valid-form-input)) inset;
}
.TextArea.hasError .TextArea--input {
  border-color: rgba(var(--c-signal-red), 1);
}
.TextArea--label {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: var(--spacing-16, 16px);
  padding: 0 var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  top: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.TextArea--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TextArea--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TextArea--label {
    line-height: 1.2;
}
}
.TextArea--input:not(:-moz-placeholder) + .TextArea--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
.TextArea--input:focus + .TextArea--label, .TextArea--input:not(:placeholder-shown) + .TextArea--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
@media (min-width: 750px) {
.TextArea--input:not(:-moz-placeholder) + .TextArea--label {
    font-size: 12px;
}
.TextArea--input:focus + .TextArea--label, .TextArea--input:not(:placeholder-shown) + .TextArea--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.TextArea--input:not(:-moz-placeholder) + .TextArea--label {
    font-size: 12px;
}
.TextArea--input:focus + .TextArea--label, .TextArea--input:not(:placeholder-shown) + .TextArea--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.TextArea--input:not(:-moz-placeholder) + .TextArea--label {
    line-height: 1.4;
}
.TextArea--input:focus + .TextArea--label, .TextArea--input:not(:placeholder-shown) + .TextArea--label {
    line-height: 1.4;
}
}
.TextArea.hasError .TextArea--input:not(:-moz-placeholder) + .TextArea--label {
  color: rgba(var(--c-signal-red), 1);
}
.TextArea.hasError .TextArea--input:focus + .TextArea--label, .TextArea.hasError .TextArea--input:not(:placeholder-shown) + .TextArea--label {
  color: rgba(var(--c-signal-red), 1);
}
.TextArea--count {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  right: var(--spacing-8, 8px);
  bottom: var(--spacing-8, 8px);
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.TextArea--count {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TextArea--count {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TextArea--count {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* .PasswordInput {
} */
.PasswordInput--inner {
  position: relative;
}
.PasswordInput--input {
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
  padding: var(--spacing-16, 16px);
  background: transparent;
  border: 1px solid rgba(var(--c-border-dark));
  border-radius: var(--border-radius-xsmall);
  outline: none;
  transition: border-color 0.2s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: var(--spacing-40, 40px);
}
@media (min-width: 750px) {
.PasswordInput--input {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.PasswordInput--input {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.PasswordInput--input {
    line-height: 1.4;
}
}
.PasswordInput--input:focus {
  border-color: rgba(var(--c-black), 1);
}
.PasswordInput--input::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.PasswordInput--input::placeholder {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.PasswordInput--input:-webkit-autofill, .PasswordInput--input:-webkit-autofill:hover, .PasswordInput--input:-webkit-autofill:focus, .PasswordInput--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-white), 1) inset;
}
.PasswordInput--input.hasPlaceholder:focus::-moz-placeholder {
  opacity: 1;
}
.PasswordInput--input.hasPlaceholder:focus::placeholder {
  opacity: 1;
}
.PasswordInput.isValid .PasswordInput--input {
  background-color: rgba(var(--c-valid-form-input));
}
.PasswordInput.isValid .PasswordInput--input:-webkit-autofill, .PasswordInput.isValid .PasswordInput--input:-webkit-autofill:hover, .PasswordInput.isValid .PasswordInput--input:-webkit-autofill:focus, .PasswordInput.isValid .PasswordInput--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-valid-form-input)) inset;
}
.PasswordInput.hasError .PasswordInput--input {
  border-color: rgba(var(--c-signal-red), 1);
}
.PasswordInput--label {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: var(--spacing-16, 16px);
  padding: 0 var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
@media (min-width: 750px) {
.PasswordInput--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PasswordInput--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PasswordInput--label {
    line-height: 1.2;
}
}
.PasswordInput--input:not(:-moz-placeholder) + .PasswordInput--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
.PasswordInput--input:focus + .PasswordInput--label, .PasswordInput--input:not(:placeholder-shown) + .PasswordInput--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
@media (min-width: 750px) {
.PasswordInput--input:not(:-moz-placeholder) + .PasswordInput--label {
    font-size: 12px;
}
.PasswordInput--input:focus + .PasswordInput--label, .PasswordInput--input:not(:placeholder-shown) + .PasswordInput--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.PasswordInput--input:not(:-moz-placeholder) + .PasswordInput--label {
    font-size: 12px;
}
.PasswordInput--input:focus + .PasswordInput--label, .PasswordInput--input:not(:placeholder-shown) + .PasswordInput--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.PasswordInput--input:not(:-moz-placeholder) + .PasswordInput--label {
    line-height: 1.4;
}
.PasswordInput--input:focus + .PasswordInput--label, .PasswordInput--input:not(:placeholder-shown) + .PasswordInput--label {
    line-height: 1.4;
}
}
.PasswordInput.hasError .PasswordInput--input:not(:-moz-placeholder) + .PasswordInput--label {
  color: rgba(var(--c-signal-red), 1);
}
.PasswordInput.hasError .PasswordInput--input:focus + .PasswordInput--label, .PasswordInput.hasError .PasswordInput--input:not(:placeholder-shown) + .PasswordInput--label {
  color: rgba(var(--c-signal-red), 1);
}
.PasswordInput--iconWrapper {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  transform: translateY(-35%);
}
.PasswordInput--requirements {
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-8, 8px);
  margin-top: var(--spacing-4, 4px);
}
.PasswordInput--requirement {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.PasswordInput--requirement {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.PasswordInput--requirement {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.PasswordInput--requirement {
    line-height: 1.4;
}
}
.PasswordInput--requirement[data-valid=true] {
  color: rgba(var(--c-black), 1);
}
.PasswordInput--additionalInformation {
  font-size: 12px;
  line-height: 1.4;
  margin-top: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.PasswordInput--additionalInformation {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.PasswordInput--additionalInformation {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.PasswordInput--additionalInformation {
    line-height: 1.4;
}
}
.PasswordInput--additionalInformation a {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.PasswordInput--additionalInformation a:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.PasswordInput--additionalInformation a:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.DateInput--inner {
  position: relative;
}
.DateInput--input {
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
  padding: var(--spacing-16, 16px);
  background: transparent;
  border: 1px solid rgba(var(--c-border-dark));
  border-radius: var(--border-radius-xsmall);
  outline: none;
  transition: border-color 0.2s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
}
@media (min-width: 750px) {
.DateInput--input {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.DateInput--input {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.DateInput--input {
    line-height: 1.4;
}
}
.DateInput--input:focus {
  border-color: rgba(var(--c-black), 1);
}
.DateInput--input::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.DateInput--input::placeholder {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.DateInput--input:-webkit-autofill, .DateInput--input:-webkit-autofill:hover, .DateInput--input:-webkit-autofill:focus, .DateInput--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-white), 1) inset;
}
.DateInput--input.hasPlaceholder:focus::-moz-placeholder {
  opacity: 1;
}
.DateInput--input.hasPlaceholder:focus::placeholder {
  opacity: 1;
}
.DateInput.isValid .DateInput--input {
  background-color: rgba(var(--c-valid-form-input));
}
.DateInput.isValid .DateInput--input:-webkit-autofill, .DateInput.isValid .DateInput--input:-webkit-autofill:hover, .DateInput.isValid .DateInput--input:-webkit-autofill:focus, .DateInput.isValid .DateInput--input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-valid-form-input)) inset;
}
.DateInput.hasError .DateInput--input {
  border-color: rgba(var(--c-signal-red), 1);
}
.DateInput--input input {
  padding: var(--spacing-16, 16px);
}
.DateInput--label {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: var(--spacing-16, 16px);
  padding: 0 var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
@media (min-width: 750px) {
.DateInput--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.DateInput--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.DateInput--label {
    line-height: 1.2;
}
}
.DateInput--input input:not(:-moz-placeholder) + .DateInput--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
.DateInput--input.hasValue + .DateInput--label, .DateInput--input input:not(:placeholder-shown) + .DateInput--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
@media (min-width: 750px) {
.DateInput--input input:not(:-moz-placeholder) + .DateInput--label {
    font-size: 12px;
}
.DateInput--input.hasValue + .DateInput--label, .DateInput--input input:not(:placeholder-shown) + .DateInput--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.DateInput--input input:not(:-moz-placeholder) + .DateInput--label {
    font-size: 12px;
}
.DateInput--input.hasValue + .DateInput--label, .DateInput--input input:not(:placeholder-shown) + .DateInput--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.DateInput--input input:not(:-moz-placeholder) + .DateInput--label {
    line-height: 1.4;
}
.DateInput--input.hasValue + .DateInput--label, .DateInput--input input:not(:placeholder-shown) + .DateInput--label {
    line-height: 1.4;
}
}
.DateInput.hasError .DateInput--input input:not(:-moz-placeholder) + .DateInput--label {
  color: rgba(var(--c-signal-red), 1);
}
.DateInput.hasError .DateInput--input.hasValue + .DateInput--label, .DateInput.hasError .DateInput--input input:not(:placeholder-shown) + .DateInput--label {
  color: rgba(var(--c-signal-red), 1);
}
.DateInput--iconWrapper {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  transform: translateY(-50%);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SocialList {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12, 12px);
}
@media (min-width: 750px) {
.SocialList {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.SocialList {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.SocialList {
    line-height: 1.2;
}
}
.SocialList--link {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  transition: color 0.2s ease-in-out;
}
@media (hover: hover) {
.SocialList--link:hover {
    color: rgba(var(--c-black), 1);
}
.SocialList--link:focus {
    color: rgba(var(--c-black), 1);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TrustedFooter {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
  justify-content: space-between;
  padding-top: var(--spacing-24, 24px);
  padding-bottom: var(--spacing-24, 24px);
}
@media screen and (min-width: 750px) {
.TrustedFooter {
    flex-direction: row;
    gap: var(--spacing-16, 16px);
    padding-top: var(--spacing-32, 32px);
    padding-bottom: var(--spacing-32, 32px);
}
}
.TrustedFooter--group--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--spacing-16, 16px);
  white-space: nowrap;
}
@media (min-width: 750px) {
.TrustedFooter--group--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TrustedFooter--group--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TrustedFooter--group--title {
    line-height: 1.2;
}
}
.TrustedFooter--warranty {
  max-width: 64px;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.LanguageSwitchList {
  position: relative;
  display: inline-flex;
  gap: var(--spacing-8, 8px);
}
.LanguageSwitchList--link {
  font-size: 12px;
  line-height: 1.4;
  display: block;
  padding: 0.55em 1em 0.45em;
  color: rgba(var(--c-black), 1);
  text-align: center;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2em;
  transition: border-color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.LanguageSwitchList--link {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.LanguageSwitchList--link {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.LanguageSwitchList--link {
    line-height: 1.4;
}
}
.LanguageSwitchList--link.isActive {
  border-color: rgba(var(--c-black), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceFooter {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-16, 16px);
  align-items: flex-end;
  justify-content: space-between;
  padding-top: var(--spacing-40, 40px);
  padding-bottom: var(--spacing-24, 24px);
}
@media screen and (min-width: 580px) {
.ServiceFooter {
    padding-top: var(--spacing-32, 32px);
    padding-bottom: var(--spacing-32, 32px);
}
}
@media screen and (min-width: 750px) {
.ServiceFooter {
    align-items: center;
}
}
.ServiceFooter--nav {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16, 16px);
  color: rgba(var(--c-grey-dark), 1);
}
@media (min-width: 750px) {
.ServiceFooter--nav {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ServiceFooter--nav {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ServiceFooter--nav {
    line-height: 1.4;
}
}
@media screen and (min-width: 750px) {
.ServiceFooter--nav {
    flex-direction: row;
}
}
@media screen and (max-width: 750px) {
.ServiceFooter--nav {
    padding-bottom: var(--spacing-8, 8px);
}
}
.ServiceFooter--link {
  transition: color 0.2s ease-in-out;
}
@media (hover: hover) {
.ServiceFooter--link:hover {
    color: rgba(var(--c-black), 1);
}
.ServiceFooter--link:focus {
    color: rgba(var(--c-black), 1);
}
}
.ServiceFooter--copyright {
  color: rgba(var(--c-grey), 1);
}
@media screen and (max-width: 750px) {
.ServiceFooter--copyright {
    order: 1;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FooterGroup {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.FooterGroup {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FooterGroup {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FooterGroup {
    line-height: 1.2;
}
}
@media screen and (max-width: 580px) {
.FooterGroup {
    border-bottom: 1px solid rgba(var(--c-border));
}
}
.FooterGroup--link {
  font-weight: bold;
  position: relative;
  display: flex;
  gap: var(--spacing-2, 2px);
  align-items: center;
  margin-bottom: var(--spacing-16, 16px);
}
@media screen and (max-width: 580px) {
.FooterGroup--link {
    gap: var(--spacing-8, 8px);
    justify-content: space-between;
    margin-bottom: var(--spacing-8, 8px);
    padding: var(--spacing-16, 16px) 0;
}
}
.FooterGroup--link--icon {
  flex: 0 0 auto;
}
.FooterGroup--link--icon--arrow {
  display: none;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
@media screen and (min-width: 580px) {
.FooterGroup--link--icon--arrow {
    display: block;
    margin-top: -2px;
    transform: translateX(-4px);
    opacity: 0;
}
}
@media screen and (min-width: 580px) {
.FooterGroup--link:hover .FooterGroup--link--icon--arrow {
    transform: translateX(0);
    opacity: 1;
}
}
.FooterGroup--link--icon--plus {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}
@media screen and (min-width: 580px) {
.FooterGroup--link--icon--plus {
    display: none;
}
}
.FooterGroup--link--icon--plus::before, .FooterGroup--link--icon--plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: currentcolor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-in-out;
  content: "";
}
.FooterGroup--link--icon--plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.FooterGroup--link.isOpen .FooterGroup--link--icon--plus::after {
  transform: translate(-50%, -50%) rotate(180deg);
}
.FooterGroup--items {
  color: rgba(var(--c-grey-dark), 1);
}
@media screen and (max-width: 580px) {
.FooterGroup--items {
    padding-bottom: var(--spacing-16, 16px);
}
}
@media screen and (min-width: 580px) {
.FooterGroup--items {
    display: block !important;
    height: auto !important;
}
}
.FooterGroup--item {
  display: block;
  padding: var(--spacing-6, 6px) 0;
}
@media screen and (min-width: 580px) {
.FooterGroup--itemAll {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Footer {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 580px) {
.Footer {
    padding-right: 0;
    padding-left: 0;
}
}
.Footer--section {
  border-top: 1px solid rgba(var(--c-border));
}
@media screen and (max-width: 580px) {
.Footer--section {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
}
.Footer--body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40, 40px);
  padding-top: var(--spacing-64, 64px);
  padding-bottom: var(--spacing-40, 40px);
}
@media screen and (min-width: 750px) {
.Footer--body {
    gap: var(--spacing-72, 72px);
    padding-bottom: var(--spacing-32, 32px);
}
}
.Footer--main {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 580px) {
.Footer--main {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-48, 48px) var(--spacing-32, 32px);
}
}
@media screen and (min-width: 750px) {
.Footer--main {
    grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 1000px) {
.Footer--main {
    grid-template-columns: repeat(5, 1fr);
}
}
.Footer--social {
  display: inline-flex;
  min-width: 140px;
  margin-top: var(--spacing-10, 10px);
  padding-top: var(--spacing-16, 16px);
  color: rgba(var(--c-grey-dark), 1);
  border-top: 1px solid rgba(var(--c-border));
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Logo {
  position: relative;
  display: inline-block;
}
.Logo--link > svg,
.Logo--link > img {
  width: auto;
  max-width: 100%;
  max-height: 32px;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.LanguageSwitch {
  font-size: 14px;
  line-height: 1.2;
  position: relative;
  display: inline;
}
@media (min-width: 750px) {
.LanguageSwitch {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.LanguageSwitch {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.LanguageSwitch {
    line-height: 1.2;
}
}
.LanguageSwitch--current {
  display: inline-flex;
  gap: var(--spacing-4, 4px);
  align-items: center;
  padding-top: var(--spacing-10, 10px);
  padding-bottom: var(--spacing-10, 10px);
  text-transform: capitalize;
  transition: color 0.2s ease-in-out;
}
@media screen and (min-width: 1000px) {
.LanguageSwitch--current {
    position: relative;
    z-index: 0;
    text-align: center;
    text-decoration: none;
    outline: none;
    transition: color 0.2s ease-out;
    /* stylelint-disable-next-line selector-class-pattern */
    padding: var(--spacing-6, 6px) var(--spacing-12, 12px);
}
.LanguageSwitch--current::before {
    position: absolute;
    background-color: transparent;
    border-radius: 100px;
    transform: translate3d(0, 0, 0);
    transition: background-color 0.2s ease-out;
    content: "";
    inset: 0;
}
.LanguageSwitch--current::after {
    position: absolute;
    overflow: hidden;
    background-color: var(--theme-background-light);
    border-radius: 100px;
    visibility: hidden;
    opacity: 0;
    transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
    content: "";
    clip-path: circle(0% at 50% 50%);
    inset: 0;
}
}
@media screen and (min-width: 1000px) and (hover: hover) {
.LanguageSwitch--current:hover::before {
    background-color: rgba(var(--c-white), 1);
}
.LanguageSwitch--current:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.LanguageSwitch--current:focus::before {
    background-color: rgba(var(--c-white), 1);
}
.LanguageSwitch--current:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
@media screen and (min-width: 1000px) {
.LanguageSwitch--current.router-link-active::before, .LanguageSwitch--current[aria-expanded=true]::before {
    background-color: rgba(var(--c-white), 1);
}
}
.LanguageSwitch--current:hover {
  cursor: pointer;
}
.LanguageSwitch--current--label {
  position: relative;
  z-index: 1;
}
.LanguageSwitch--current--arrow {
  transition: transform 0.2s ease-in-out;
}
.LanguageSwitch--current:hover .LanguageSwitch--current--arrow {
  transform: translateY(1px);
}
.LanguageSwitch.isOpen .LanguageSwitch--current--arrow {
  transform: scale(1, -1);
}
.LanguageSwitch.isOpen .LanguageSwitch--current:hover .LanguageSwitch--current--arrow {
  transform: translateY(-1px) scale(1, -1);
}
.LanguageSwitch--popup {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  border: 1px solid rgba(var(--c-border));
  visibility: hidden;
  opacity: 0;
}
.LanguageSwitch.isOpen .LanguageSwitch--popup {
  visibility: visible;
  opacity: 1;
  animation: popup 500ms linear both;
}
.LanguageSwitch--link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
  text-transform: capitalize;
  transition: background-color 0.2s ease-in-out;
}
@media (hover: hover) {
.LanguageSwitch--link:hover {
    background-color: rgba(var(--c-grey-light), 1);
}
.LanguageSwitch--link:focus {
    background-color: rgba(var(--c-grey-light), 1);
}
}
.LanguageSwitch--close {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.LanguageSwitch--close:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  white-space: inherit;
  clip: auto;
  clip-path: none;
  width: 100%;
  padding: var(--spacing-12, 12px) var(--spacing-24, 24px);
  text-align: center;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemSmall {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--spacing-8, 8px);
  align-items: center;
  width: 100%;
}
.ProductItemSmall--image {
  flex: 0 0 48px;
  width: var(--spacing-48, 48px);
  aspect-ratio: 1/1;
}
.ProductItemSmall--details {
  font-size: 12px;
  line-height: 1.4;
  flex: 1 1 auto;
}
@media (min-width: 750px) {
.ProductItemSmall--details {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductItemSmall--details {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductItemSmall--details {
    line-height: 1.4;
}
}
.ProductItemSmall--brand {
  font-weight: 700;
}
.ProductItemSmall--price {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Notification {
  --c-notification-color: rgba(var(--c-black), 1);
  position: relative;
  padding: var(--spacing-24, 24px);
  background-color: rgba(var(--c-white), 1);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-default);
}
.Notification[data-variant=simple] {
  max-width: 420px;
}
@media screen and (min-width: 580px) {
.Notification[data-variant=cart] {
    max-width: 340px;
}
}
.Notification[data-type=info] {
  --c-notification-color: rgba(var(--c-black), 1);
}
.Notification[data-type=success] {
  --c-notification-color: rgba(var(--c-signal-green), 1);
}
.Notification[data-type=error] {
  --c-notification-color: rgba(var(--c-signal-red), 1);
}
.Notification--header {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
}
.Notification--close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: rgba(var(--c-grey), 1);
  transition: transform 0.2s ease-in-out;
}
.Notification--close:hover {
  transform: rotate(90deg);
}
.Notification--column {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--spacing-24, 24px);
}
.Notification--header + .Notification--row {
  padding-top: var(--spacing-24, 24px);
  border-top: 1px solid rgba(var(--c-border));
}
[data-variant=cart] .Notification--row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8, 8px);
  align-items: center;
}
.Notification--icon {
  align-self: flex-start;
  color: var(--c-notification-color);
}
.Notification--message {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.Notification--message {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Notification--message {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Notification--message {
    line-height: 1.4;
}
}
[data-variant=simple] .Notification--message {
  margin-right: var(--spacing-48, 48px);
  color: rgba(var(--c-grey-dark), 1);
}
[data-variant=cart] .Notification--message {
  margin-right: var(--spacing-24, 24px);
  color: var(--c-notification-color);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AccountNavigationLink {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-12, 12px) 0;
  color: rgba(var(--c-grey-dark), 1);
  border-bottom: 1px solid rgba(var(--c-border));
  transition: color 0.2s ease-in-out;
  /* stylelint-disable selector-class-pattern */
  /* stylelint-enable selector-class-pattern */
}
@media (min-width: 750px) {
.AccountNavigationLink {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.AccountNavigationLink {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.AccountNavigationLink {
    line-height: 1.2;
}
}
.AccountNavigationLink:hover {
  color: rgba(var(--c-black), 1);
}
.AccountNavigationLink.isActive, .AccountNavigationLink.router-link-active:not(.isHome), .AccountNavigationLink.router-link-exact-active {
  color: rgba(var(--c-signal-blue), 1);
}
.AccountNavigationLink--inner {
  display: flex;
  flex: 1 1 auto;
  gap: var(--spacing-4, 4px);
  justify-content: space-between;
}
.AccountNavigationLink--hint {
  text-align: right;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AccountNavigationGroup--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--spacing-12, 12px);
}
@media (min-width: 750px) {
.AccountNavigationGroup--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.AccountNavigationGroup--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.AccountNavigationGroup--title {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AccountNavigation--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.AccountNavigation--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.AccountNavigation--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.AccountNavigation--title {
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) {
.AccountNavigation--title {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: var(--spacing-24, 24px);
}
}
@media screen and (min-width: 750px) and (min-width: 750px) {
.AccountNavigation--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media screen and (min-width: 750px) and (min-width: 1280px) {
.AccountNavigation--title {
    font-size: 16px;
}
}
.AccountNavigation--list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32, 32px);
}
.AccountNavigation[data-layout=composed] .AccountNavigation--list {
  gap: 0;
}
.AccountNavigation[data-layout=composed] .AccountNavigation--list li[data-compose=link] + li[data-compose=group],
.AccountNavigation[data-layout=composed] .AccountNavigation--list li[data-compose=group] + li[data-compose=link] {
  margin-top: var(--spacing-12, 12px);
}
.AccountNavigation[data-layout=composed] .AccountNavigation--list li[data-compose=group] + li[data-compose=group] {
  margin-top: var(--spacing-4, 4px);
}
.AccountNavigation[data-layout=composed] .AccountNavigation--list li:last-child .AccountNavigationLink {
  border-bottom: none;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PictoNavIndicator {
  position: absolute;
  top: -5px;
  right: -8px;
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  color: rgba(var(--c-white), 1);
  font-size: 8px;
  line-height: 20px;
  text-align: center;
  background-color: rgba(var(--c-signal-red), 1);
  border-radius: var(--border-radius-circle);
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.PictoNavIndicator[data-size=small] {
  top: 1px;
  right: -1px;
  width: 10px;
  height: 10px;
}
.PictoNavIndicator[data-color=green] {
  background-color: rgba(var(--c-signal-green), 1);
}
.PictoNavIndicator[data-transitioning=true] {
  transform: scale(1.2);
}
.PictoNavIndicator--content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PictoNavIndicator--outline {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid rgba(var(--c-signal-red), 1);
  border-radius: var(--border-radius-circle);
  pointer-events: none;
  opacity: 0.8;
}
.PictoNavIndicator[data-color=green] .PictoNavIndicator--outline {
  border-color: rgba(var(--c-signal-green), 1);
}
.PictoNavIndicator[data-pulsate=true] .PictoNavIndicator--outline {
  animation: pulsate-outline 3s ease-in-out infinite;
}
@keyframes pulsate-outline {
0%, 50% {
    transform: scale(1);
}
25% {
    transform: scale(1.4);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.appear-enter-active[data-v-25e71310] {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease-in-out;
  will-change: transform, opacity;
}
.appear-enter-from[data-v-25e71310] {
  transform: scale(0) rotate(-90deg);
  opacity: 0;
}
.appear-enter-to[data-v-25e71310] {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
.indicator-enter-active[data-v-25e71310],
.indicator-leave-active[data-v-25e71310] {
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}
.indicator-leave-to[data-v-25e71310] {
  transform: translateY(-100%) scale(0.2);
}
.indicator-enter-from[data-v-25e71310] {
  transform: translateY(100%) scale(0.2);
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PictoNavigation--link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.PictoNavigation--link::before {
  position: absolute;
  display: block;
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius-circle);
  opacity: 0;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  content: "";
  inset: 0;
}
@media screen and (min-width: 1000px) {
.PictoNavigation--link::before {
    opacity: 1;
}
}
.PictoNavigation--link:hover::before {
  opacity: 1;
}
@media screen and (min-width: 1000px) {
.PictoNavigation--link:hover::before {
    transform: scale(1.1);
}
}
.PictoNavigation[data-bg=grey-light] .PictoNavigation--link::before {
  background-color: rgba(var(--c-grey-light), 1);
}
@media screen and (max-width: 1000px) {
.PictoNavigation[data-bg=grey-light] .PictoNavigation--link::before {
    opacity: 1;
}
}
.PictoNavigation--link.wiggle .Icon {
  animation: wiggle 0.8s ease-in-out;
}
@keyframes wiggle {
0% {
    transform: rotate(0deg) scale(1);
}
15% {
    transform: rotate(-12deg) scale(1.2);
}
30% {
    transform: rotate(10deg) scale(1.1);
}
45% {
    transform: rotate(-8deg) scale(1.15);
}
60% {
    transform: rotate(6deg) scale(1.08);
}
75% {
    transform: rotate(-4deg) scale(1.1);
}
90% {
    transform: rotate(2deg) scale(1.05);
}
100% {
    transform: rotate(0deg) scale(1);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CartNotification--backdrop {
  position: fixed;
  z-index: var(--z-index-cart-notification)-1;
  background: rgba(var(--c-black), 0.2);
  inset: 0;
}
@media screen and (min-width: 750px) {
.CartNotification--backdrop {
    display: none;
}
}
.CartNotification--box {
  z-index: 80;
  position: fixed;
  top: auto;
  right: var(--spacing-16, 16px);
  bottom: var(--spacing-16, 16px);
  left: var(--spacing-16, 16px);
}
@media screen and (min-width: 580px) {
.CartNotification--box {
    inset: auto var(--spacing-40, 40px) var(--spacing-40, 40px) auto;
    min-width: 340px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
.cart-notification-enter-active[data-v-12742771] {
  transition: opacity 0.1s ease-in-out;
}
.cart-notification-enter-active .CartNotification--box[data-v-12742771] {
  transition: transform 0.15s ease-in-out;
}
.cart-notification-enter-from[data-v-12742771] {
  visibility: hidden;
  opacity: 0;
}
.cart-notification-enter-from .CartNotification--box[data-v-12742771] {
  transform: scale(0.9) translateY(-20px);
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AccountNavigationCollapsible--trigger {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-12, 12px) 0;
  border-bottom: 1px solid rgba(var(--c-border));
  transition: border-color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.AccountNavigationCollapsible--trigger {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.AccountNavigationCollapsible--trigger {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.AccountNavigationCollapsible--trigger {
    line-height: 1.2;
}
}
.AccountNavigationCollapsible--trigger[aria-expanded=true] {
  border-color: transparent;
}
.AccountNavigationCollapsible--trigger--icon {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
}
.AccountNavigationCollapsible--trigger--icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: currentcolor;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.2s ease-in-out;
}
.AccountNavigationCollapsible--trigger--icon span:first-child {
  transform: translate(-50%, -50%) rotate(90deg);
}
.AccountNavigationCollapsible--trigger[aria-expanded=true] .AccountNavigationCollapsible--trigger--icon span {
  transform: translate(-50%, -50%) rotate(180deg);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PictoNavProfile {
  scroll-margin-top: 1em;
}
.PictoNavigation--popup {
  z-index: 10;
  overflow: auto;
  background: rgba(var(--c-white), 1);
  box-shadow: var(--shadow-popup);
  visibility: hidden;
  opacity: 0;
}
.PictoNavigation--popup.isOpen {
  visibility: visible;
  opacity: 1;
  animation: popup 500ms linear both;
}
@media screen and (max-width: 750px) {
.PictoNavigation--popup {
    position: fixed;
    inset: 0;
    max-height: 100vh;
}
}
@media screen and (min-width: 750px) {
.PictoNavigation--popup {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    max-width: 100vw;
    border-radius: var(--border-radius-default);
}
}
.PictoNavigation--popup--inner {
  padding: var(--spacing-40, 40px) var(--spacing-24, 24px);
}
@media screen and (min-width: 750px) {
.PictoNavigation--popup--inner {
    padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
}
}
.PictoNavigation--popup--close {
  position: absolute;
  top: var(--spacing-4, 4px);
  right: var(--spacing-4, 4px);
  padding: 12px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.PictoNavigation--popup--close:hover {
  transform: rotate(90deg);
}
@media screen and (min-width: 750px) {
.PictoNavigation--popup--close {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PictoNavigation {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8, 8px);
  align-items: center;
}
.PictoNavigation > li {
  position: relative;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.NavigationToggle {
  display: inline-flex;
  gap: var(--spacing-10, 10px);
  align-items: center;
}
.NavigationToggle--picto {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6, 6px);
  align-items: center;
  justify-content: center;
}
.NavigationToggle--picto span {
  display: block;
  width: 18px;
  height: 1px;
  background-color: rgba(var(--c-black), 1);
  border-radius: 1px;
  transition: transform 0.3s ease-in-out;
}
.NavigationToggle:hover .NavigationToggle--picto span:nth-child(1) {
  transform: translateY(-2px);
}
.NavigationToggle:hover .NavigationToggle--picto span:nth-child(3) {
  transform: translateY(2px);
}
.NavigationToggle--label {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
  line-height: 1 !important;
}
@media (min-width: 750px) {
.NavigationToggle--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.NavigationToggle--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.NavigationToggle--label {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.MainNavigation {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20, 20px);
}
@media screen and (min-width: 1000px) {
.MainNavigation {
    flex-flow: row nowrap;
    gap: var(--spacing-32, 32px);
    align-items: flex-end;
}
}

/* TODO: Hover */
.MainNavigation--link {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  display: block;
  padding: 0 var(--spacing-64, 64px) 0 var(--spacing-20, 20px);
}
@media (min-width: 750px) {
.MainNavigation--link {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.MainNavigation--link {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.MainNavigation--link {
    line-height: 1.4;
}
}
@media screen and (max-width: 1000px) {
.MainNavigation--link {
    font-size: 18px;
    line-height: 1.4;
}
}
@media screen and (max-width: 1000px) and (min-width: 750px) {
.MainNavigation--link {
    font-size: calc(1.1320754717vw + 9.5094339623px);
}
}
@media screen and (max-width: 1000px) and (min-width: 1280px) {
.MainNavigation--link {
    font-size: 24px;
}
}
@media screen and (max-width: 1000px) and (max-width: 750px) {
.MainNavigation--link {
    line-height: 1.4;
}
}
@media screen and (min-width: 1000px) {
.MainNavigation--link {
    padding: var(--spacing-16, 16px) 0;
}
}
.MainNavigation--link::before {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 3px;
  height: 100%;
  background-color: rgba(var(--c-black), 0.2);
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  content: "";
}
@media screen and (min-width: 1000px) {
.MainNavigation--link::before {
    width: 100%;
    height: 3px;
}
}
.MainNavigation--link.router-link-active::before {
  transform: scaleX(1);
}
.MainNavigation--link.isActive::before, .MainNavigation--link:hover::before {
  background-color: rgba(var(--c-black), 1);
  transform: scaleX(1);
}
.MainNavigation--link--icon[data-icon] {
  position: absolute;
  top: 50%;
  right: var(--spacing-20, 20px);
  transform: translateY(-50%);
}
@media screen and (min-width: 1000px) {
.MainNavigation--link--icon[data-icon] {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceDropdownLink {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-12, 12px) var(--spacing-24, 24px);
  outline: none;
  transition: background-color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.ServiceDropdownLink {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ServiceDropdownLink {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ServiceDropdownLink {
    line-height: 1.2;
}
}
@media (hover: hover) {
.ServiceDropdownLink:hover {
    background-color: rgba(var(--c-grey-light), 1);
}
.ServiceDropdownLink:focus {
    background-color: rgba(var(--c-grey-light), 1);
}
}
.ServiceDropdownLink[data-variant=primary] {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  padding-top: var(--spacing-20, 20px);
  padding-bottom: var(--spacing-20, 20px);
}
@media (min-width: 750px) {
.ServiceDropdownLink[data-variant=primary] {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ServiceDropdownLink[data-variant=primary] {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ServiceDropdownLink[data-variant=primary] {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceDropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}
.ServiceDropdown.isOpen {
  visibility: visible;
  opacity: 1;
  animation: popup 500ms linear both;
}
.ServiceDropdown--inner {
  padding-top: var(--spacing-12, 12px);
  padding-bottom: var(--spacing-12, 12px);
}
.SeviceDropdown--footer {
  border-top: 1px solid rgba(var(--c-border));
}
.SeviceDropdown--close {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  position: absolute;
  top: 0;
  right: 0;
}
.SeviceDropdown--close:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  white-space: inherit;
  clip: auto;
  clip-path: none;
  width: 100%;
  padding: var(--spacing-12, 12px) var(--spacing-24, 24px);
  text-align: center;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceNavigationGroup {
  position: relative;
}
@media screen and (min-width: 1000px) {
.ServiceNavigationGroup--link {
    display: none !important;
}
}
.ServiceNavigationGroup--arrow {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease-in-out;
}
.ServiceNavigation--link:hover .ServiceNavigationGroup--arrow {
  transform: translateY(1px);
}
.ServiceNavigation--link.isOpen .ServiceNavigationGroup--arrow {
  transform: scale(1, -1);
}
.ServiceNavigation--link.isOpen:hover .ServiceNavigationGroup--arrow {
  transform: translateY(-1px) scale(1, -1);
}
@media screen and (max-width: 1000px) {
.ServiceNavigationGroup--trigger,
  .ServiceNavigationGroup--dropdown {
    display: none !important;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceNavigation {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}
@media (min-width: 750px) {
.ServiceNavigation {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ServiceNavigation {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ServiceNavigation {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.ServiceNavigation {
    flex-direction: row;
    gap: var(--spacing-4, 4px);
}
}
.ServiceNavigation--link {
  display: flex;
  gap: var(--spacing-4, 4px);
  align-items: center;
}
@media screen and (max-width: 1000px) {
.ServiceNavigation--link {
    padding: var(--spacing-12, 12px) var(--spacing-20, 20px);
}
}
@media screen and (min-width: 1000px) {
.ServiceNavigation--link {
    position: relative;
    z-index: 0;
    text-align: center;
    text-decoration: none;
    outline: none;
    transition: color 0.2s ease-out;
    /* stylelint-disable-next-line selector-class-pattern */
    padding: var(--spacing-6, 6px) var(--spacing-12, 12px);
}
.ServiceNavigation--link::before {
    position: absolute;
    background-color: transparent;
    border-radius: 100px;
    transform: translate3d(0, 0, 0);
    transition: background-color 0.2s ease-out;
    content: "";
    inset: 0;
}
.ServiceNavigation--link::after {
    position: absolute;
    overflow: hidden;
    background-color: var(--theme-background-light);
    border-radius: 100px;
    visibility: hidden;
    opacity: 0;
    transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
    content: "";
    clip-path: circle(0% at 50% 50%);
    inset: 0;
}
}
@media screen and (min-width: 1000px) and (hover: hover) {
.ServiceNavigation--link:hover::before {
    background-color: rgba(var(--c-white), 1);
}
.ServiceNavigation--link:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.ServiceNavigation--link:focus::before {
    background-color: rgba(var(--c-white), 1);
}
.ServiceNavigation--link:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
@media screen and (min-width: 1000px) {
.ServiceNavigation--link.router-link-active::before, .ServiceNavigation--link[aria-expanded=true]::before {
    background-color: rgba(var(--c-white), 1);
}
}
.ServiceNavigation--label {
  position: relative;
  z-index: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* .NavigationGroup {} */
.NavigationGroup--link {
  position: relative;
  display: grid;
  gap: var(--spacing-16, 16px);
  align-items: center;
  padding: var(--spacing-12, 12px) var(--spacing-20, 20px);
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
.NavigationGroup--link {
    grid-template-areas: "title image arrow";
    grid-template-columns: 1fr 40px auto;
}
}
@media screen and (min-width: 1000px) {
.NavigationGroup--link {
    grid-template-areas: "image" "title";
    grid-template-rows: 48px auto;
    gap: var(--spacing-10, 10px);
    margin-bottom: 11px;
    padding: 0;
}
}
@media screen and (max-width: 1000px) {
.NavigationGroup--link--inner {
    display: contents;
}
}
@media screen and (min-width: 1000px) {
.NavigationGroup--link--inner {
    display: flex;
    gap: var(--spacing-2, 2px);
    align-items: center;
}
}
.NavigationGroup--link--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}
@media (min-width: 750px) {
.NavigationGroup--link--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.NavigationGroup--link--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.NavigationGroup--link--title {
    line-height: 1.2;
}
}
@media screen and (max-width: 1000px) {
.NavigationGroup--link--title {
    font-size: 18px;
}
}
@media screen and (min-width: 1000px) {
.NavigationGroup--link--title {
    grid-area: title;
}
}
.NavigationGroup--link--image {
  grid-area: image;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: transform 0.2s ease-in-out;
}
@media screen and (min-width: 1000px) {
.NavigationGroup--link--image {
    width: 48px;
    height: 48px;
}
}
.NavigationGroup--link--image img {
  max-width: 100%;
  max-height: 100%;
}
@media screen and (min-width: 1000px) {
.NavigationGroup--link:hover .NavigationGroup--link--image {
    transform: translateY(-4px);
}
}
@media screen and (max-width: 1000px) {
.NavigationGroup--link--arrow {
    grid-area: arrow;
}
}
.NavigationGroup--link--arrow [data-icon] {
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
@media screen and (min-width: 1000px) {
.NavigationGroup--link--arrow [data-icon] {
    margin-top: -2px;
    opacity: 0;
    transform: translateX(-4px);
}
}
@media screen and (min-width: 1000px) {
.NavigationGroup--link:hover .NavigationGroup--link--arrow [data-icon] {
    opacity: 1;
    transform: translateX(0);
}
}
.NavigationGroup--list {
  padding-bottom: var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.NavigationGroup--list {
    display: block !important;
}
}
.NavigationGroup--list--itemAll {
  text-decoration: underline;
}
@media screen and (min-width: 1000px) {
.NavigationGroup--list--itemAll {
    display: none;
}
}
.NavigationGroup--list--link {
  font-size: 14px;
  line-height: 1.2;
  display: block;
  padding-top: var(--spacing-12, 12px);
  padding-bottom: var(--spacing-12, 12px);
  padding-left: var(--spacing-20, 20px);
  color: rgba(var(--c-grey-dark), 1);
}
@media (min-width: 750px) {
.NavigationGroup--list--link {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.NavigationGroup--list--link {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.NavigationGroup--list--link {
    line-height: 1.2;
}
}
@media screen and (max-width: 1000px) {
.NavigationGroup--list--link {
    font-size: 14px;
    line-height: 1.4;
}
}
@media screen and (max-width: 1000px) and (min-width: 750px) {
.NavigationGroup--list--link {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media screen and (max-width: 1000px) and (min-width: 1280px) {
.NavigationGroup--list--link {
    font-size: 16px;
}
}
@media screen and (min-width: 1000px) {
.NavigationGroup--list--link {
    padding-top: var(--spacing-5, 5px);
    padding-bottom: var(--spacing-5, 5px);
    padding-left: 0;
}
}
.NavigationGroup--list--link::before {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 3px;
  height: 100%;
  background-color: rgba(var(--c-black), 0.2);
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  content: "";
}
@media screen and (min-width: 1000px) {
.NavigationGroup--list--link::before {
    display: none;
}
}
.NavigationGroup--list--link.router-link-active::before {
  background-color: rgba(var(--c-black), 1);
  transform: scaleX(1);
}
@media screen and (min-width: 1000px) {
.Icon.NavigationGroup--link--arrow--down {
    display: none;
}
}
.NavigationGroup--link.isOpen .Icon.NavigationGroup--link--arrow--down, .NavigationGroup--link.router-link-active .Icon.NavigationGroup--link--arrow--down {
  transform: scale(-1);
}
@media screen and (max-width: 1000px) {
.Icon.NavigationGroup--link--arrow--right {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.NavigationGrid {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 1000px) {
.NavigationGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-48, 48px) var(--spacing-24, 24px);
    margin-left: var(--spacing--24, -24px);
}
}
@media screen and (min-width: 1280px) {
.NavigationGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media screen and (min-width: 1440px) {
.NavigationGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media screen and (min-width: 1000px) {
.NavigationGrid--item {
    padding-left: var(--spacing-24, 24px);
    border-left: 1px solid rgba(var(--c-black), 0.08);
}
.NavigationGrid--item:nth-child(4n+1) {
    border-left: 0;
}
}
@media screen and (min-width: 1280px) {
.NavigationGrid--item:nth-child(4n+1) {
    border-left: 1px solid rgba(var(--c-black), 0.08);
}
.NavigationGrid--item:nth-child(5n+1) {
    border-left: 0;
}
}
@media screen and (min-width: 1440px) {
.NavigationGrid--item:nth-child(5n+1) {
    border-left: 1px solid rgba(var(--c-black), 0.08);
}
.NavigationGrid--item:nth-child(6n+1) {
    border-left: 0;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
@media screen and (max-width: 1000px) {
.NavigationFlyoutBlock {
    padding-right: var(--spacing-24, 24px);
    padding-left: var(--spacing-24, 24px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.NavigationFlyout {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: rgba(var(--c-white), 1);
}
@media screen and (min-width: 1000px) {
.NavigationFlyout {
    position: absolute;
    bottom: auto;
    max-height: calc(100vh - var(--header-height));
    padding-right: var(--spacing-16, 16px);
    padding-left: var(--spacing-32, 32px);
    scrollbar-gutter: stable;
}
.NavigationFlyout::-webkit-scrollbar-track {
    margin-top: var(--spacing-16, 16px);
    margin-bottom: var(--spacing-16, 16px);
    border-left: 2px solid rgba(var(--c-black), 0.08);
}
.NavigationFlyout::-webkit-scrollbar {
    position: absolute;
    width: var(--spacing-16, 16px);
}
.NavigationFlyout::-webkit-scrollbar-thumb {
    border-left: 2px solid rgba(var(--c-black), 1);
}
}
.NavigationFlyout--inner {
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.NavigationFlyout--stickyHead {
  z-index: 50;
  position: sticky;
  top: 0;
  padding: var(--spacing-20, 20px);
  background-color: rgba(var(--c-green-light), 1);
}
@media screen and (min-width: 1000px) {
.NavigationFlyout--stickyHead {
    display: none !important;
}
}
.NavigationFlyout--head {
  padding: var(--spacing-16, 16px) var(--spacing-20, 20px) var(--spacing-24, 24px) var(--spacing-20, 20px);
  background-color: rgba(var(--c-green-light), 1);
}
@media screen and (min-width: 1000px) {
.NavigationFlyout--head {
    display: none;
}
}
.NavigationFlyout--title,
.NavigationFlyout--link {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  display: block;
  width: 100%;
}
@media (min-width: 750px) {
.NavigationFlyout--title,
  .NavigationFlyout--link {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.NavigationFlyout--title,
  .NavigationFlyout--link {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.NavigationFlyout--title,
  .NavigationFlyout--link {
    line-height: 1.4;
}
}
@media screen and (max-width: 1000px) {
.NavigationFlyout--title,
  .NavigationFlyout--link {
    font-size: 18px;
    line-height: 1.4;
}
}
@media screen and (max-width: 1000px) and (min-width: 750px) {
.NavigationFlyout--title,
  .NavigationFlyout--link {
    font-size: calc(1.1320754717vw + 9.5094339623px);
}
}
@media screen and (max-width: 1000px) and (min-width: 1280px) {
.NavigationFlyout--title,
  .NavigationFlyout--link {
    font-size: 24px;
}
}
@media screen and (max-width: 1000px) and (max-width: 750px) {
.NavigationFlyout--title,
  .NavigationFlyout--link {
    line-height: 1.4;
}
}
.Icon.NavigationFlyout--link--arrow {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.NavigationFlyout--close {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  position: absolute;
  top: 0;
  right: 0;
}
.NavigationFlyout--close:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  white-space: inherit;
  clip: auto;
  clip-path: none;
}
.NavigationFlyout--body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40, 40px);
  padding: var(--spacing-24, 24px) 0;
}
.NavigationFlyout--body > *:first-child {
  margin-top: 0;
}
.NavigationFlyout--body > *:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 1000px) {
.NavigationFlyout--body {
    gap: var(--spacing-64, 64px);
    padding-top: var(--spacing-40, 40px);
    padding-bottom: var(--spacing-56, 56px);
}
}
.NavigationFlyout--action {
  margin-top: auto;
  padding-bottom: var(--spacing-32, 32px);
}
@media screen and (max-width: 1000px) {
.NavigationFlyout--action {
    padding-right: var(--spacing-24, 24px);
    padding-left: var(--spacing-24, 24px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CategoryTabs--nav {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  margin-bottom: var(--spacing-48, 48px);
}
.CategoryTabs--list {
  display: inline-flex;
}
.CategoryTabs--link {
  display: inline-flex;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
  border-radius: var(--border-radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.CategoryTabs--link[aria-expanded=true] {
  border-color: currentColor;
}
.fade-leave-active {
  height: 0;
  overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
  transition: transform 0.3s ease-in-out, opacity 0.8s ease-in-out;
  will-change: opacity;
  will-change: transform;
}
.fade-enter-from {
  transform: translateY(-40px);
  opacity: 0;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
:root {
  --header-height: 158px;
}
.Header {
  z-index: 50;
  --sticky-offset-top: calc(var(--sticky-offset, 112px) * -1);
  position: sticky;
  top: var(--sticky-offset-top);
  width: 100%;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
@media screen and (min-width: 750px) {
.Header {
    --sticky-offset-top: calc(var(--sticky-offset, 102px) * -1);
}
}
@media screen and (min-width: 1000px) {
.Header {
    position: relative;
    top: 0;
}
}
@media screen and (max-width: 1000px) {
.Header[data-headroom-pinned=false] {
    transform: translateY(-100%);
    visibility: hidden;
}
}
.Header--stickyDummy {
  grid-row: 2;
  grid-column: 1/-1;
  align-self: start;
  width: 100%;
  margin-top: calc(var(--local-grid-row-gap) * -1);
  background-color: red;
  visibility: hidden;
}
.Header--inner {
  --local-border-radius: 24px;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px) var(--spacing-4, 4px);
  background-color: var(--theme-background);
  transition: border-radius 0.15s ease-in-out;
}
@media screen and (min-width: 1000px) {
.Header--inner {
    position: relative;
    z-index: 3;
    padding: var(--spacing-24, 24px) var(--spacing-32, 32px) var(--spacing-0, 0px);
}
}
@media screen and (max-width: 1000px) {
[data-is-sticky=true] .Header--inner {
    border-bottom-right-radius: var(--local-border-radius);
    border-bottom-left-radius: var(--local-border-radius);
}
}
.Header--cta {
  display: none;
}
@media screen and (min-width: 1000px) {
.Header--cta {
    display: flex;
    white-space: nowrap;
}
}
.Header--mobileCta {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}
@media screen and (min-width: 1000px) {
.Header--mobileCta {
    display: none;
}
}
.Header--grid {
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
  --local-grid-row-gap: var(--spacing-12, 12px);
  --local-grid-column-gap: var(--spacing-16, 16px);
  display: grid;
  grid-template-areas: "logo logo language picto" "toggle search search search" "primary primary primary primary";
  grid-template-columns: max-content 1fr repeat(2, max-content);
  gap: var(--local-grid-row-gap) var(--local-grid-column-gap);
  align-items: center;
}
@media screen and (min-width: 1000px) {
.Header--grid {
    grid-template-areas: "logo search service language picto" "main main main main main";
    grid-template-columns: max-content 1fr repeat(3, max-content);
    gap: var(--spacing-32, 32px) var(--spacing-24, 24px);
}
}
@media screen and (max-width: 1000px) {
[data-variant=landingpage] .Header--grid {
    grid-template-areas: "logo logo language picto" "search search search search";
}
}
@media screen and (max-width: 1000px) {
[data-is-sticky=true] .Header--grid {
    grid-template-areas: "logo logo language picto-old" "toggle search search picto" "primary primary primary primary";
}
[data-is-sticky=true] .Header--grid::before {
    display: block;
    content: "";
    grid-area: picto-old;
    height: 40px;
}
}
.Header--backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--c-black), 0.5);
}
@media screen and (min-width: 1000px) {
.Header--primary {
    display: contents !important;
}
}
@media screen and (max-width: 1000px) {
.Header--primary {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    grid-area: primary;
    gap: var(--spacing-24, 24px);
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding-bottom: var(--spacing-24, 24px);
    overflow: auto;
    background: rgba(var(--c-white), 1);
}
}
.Header--primary--head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  align-self: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px) var(--spacing-16, 16px);
  background-color: rgba(var(--c-white), 1);
}
@media screen and (min-width: 1000px) {
.Header--primary--head {
    display: none;
}
}
.Header--logo {
  grid-area: logo;
}
@media screen and (min-width: 1000px) {
.Header--primary--head .Header--logo {
    display: none;
}
}
.Header--search {
  grid-area: search;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  transition: max-width 300ms ease-out;
}
@media screen and (min-width: 1000px) {
.Header--search {
    margin-right: auto;
    margin-left: 0;
}
}
.Header--search.isActive {
  max-width: 100%;
}
@media screen and (max-width: 1000px) {
.Header--search.isActive {
    grid-area: 2/toggle/2/search;
}
}
@media screen and (max-width: 1000px) {
[data-variant=landingpage] .Header--search {
    width: 100%;
    max-width: 100%;
}
}
@media screen and (max-width: 1000px) {
[data-is-sticky=true] .Header--search {
    max-width: 100%;
}
}
.Header--languageSwitch {
  z-index: 1;
  grid-area: language;
}
@media screen and (min-width: 1000px) {
.Header--languageSwitch {
    margin-right: var(--spacing--12, -12px);
    margin-left: var(--spacing--12, -12px);
}
}
@media screen and (max-width: 1000px) {
[data-variant=landingpage] .Header--languageSwitch {
    display: none;
}
}
.Header--pictoNavigation {
  grid-area: picto;
}
@media screen and (max-width: 580px) {
.Header--pictoNavigation {
    gap: 0;
}
}
.Header--toggle {
  grid-area: toggle;
}
@media screen and (min-width: 1000px) {
.Header--toggle {
    display: none !important;
}
}
@media screen and (max-width: 1000px) {
[data-variant=landingpage] .Header--toggle {
    grid-area: language;
}
}
.Header--closeMain {
  grid-area: main;
  margin-left: auto;
}
@media screen and (max-width: 1000px) {
.Header--closeMain {
    display: none;
}
}
.Header--closeMain,
.Header--close {
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.Header--closeMain:hover,
.Header--close:hover {
  transform: rotate(90deg);
}
@media screen and (min-width: 1000px) {
.Header--service {
    grid-area: service;
    margin-right: var(--spacing--8, -8px);
}
}
@media screen and (min-width: 1000px) {
.Header--main {
    grid-area: main;
}
}
.Header--primary--pictoNavigation {
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
}
@media screen and (min-width: 1000px) {
.Header--primary--pictoNavigation {
    display: none !important;
}
}
.Header--primary--languageSwitch {
  margin-top: auto;
  padding: 0 var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.Header--primary--languageSwitch {
    display: none !important;
}
}
.Header--flyout {
  z-index: 11;
}
@media screen and (min-width: 1000px) {
.Header--flyout {
    top: var(--header-height) !important;
    z-index: 1;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
.show-primary-enter-active,
.show-primary-leave-active {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.show-primary-enter-active {
  transition-delay: 0.1s;
}

/*
.show-primary-enter-active {
	transition: transform .5s cubic-bezier(.4, 0, .2, 1) 0.1s;
	will-change: transform;
}

.show-primary-leave-active {
	transition: transform 0.3s ease-in;
	will-change: transform;
} */
.show-primary-enter-from,
.show-primary-leave-to {
  transform: translate(-100%, 0);
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
.show-flyout-enter-active,
.show-flyout-leave-active {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.show-flyout-enter-active {
  transition-delay: 0.1s;
}
.show-flyout-enter-from {
  transform: translate(100%, 0);
}
@media screen and (min-width: 1000px) {
.show-flyout-enter-from {
    transform: translate(0, -100%);
}
.Header.isFlyoutOpen .show-flyout-enter-from {
    transform: translate(0, 0);
}
}
@media screen and (max-width: 1000px) {
.Header--primary {
    transition: transform 0.3s ease-in-out;
}
.Header.isFlyoutOpening .Header--primary {
    transform: translateX(-10%);
    transition-delay: 0.1s;
}
}
.show-flyout-leave-to {
  transform: translate(-100%, 0);
}
@media screen and (max-width: 1000px) {
.Header.isPrimaryOpen .show-flyout-leave-to {
    transform: translate(100%, 0);
}
}
@media screen and (min-width: 1000px) {
.show-flyout-leave-to {
    transform: translate(0, -100%);
}
.Header.isFlyoutOpen .show-flyout-leave-to {
    transform: translate(0, 0);
    visibility: hidden;
}
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
.show-backdrop-enter-active {
  transition: opacity 0.2s ease-out, visibility 0.2s;
  will-change: opacity, transform;
}
.show-backdrop-leave-active {
  transition: opacity 0.5s ease-in, visibility 0.5s;
  will-change: opacity, transform;
}
.show-backdrop-enter-from,
.show-backdrop-leave-to {
  visibility: hidden;
  opacity: 0;
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ReducedHeader {
  z-index: 50;
  position: relative;
}
.ReducedHeader--inner {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-20, 20px) var(--site-padding);
  background-color: rgba(var(--c-green-light), 1);
}
@media screen and (min-width: 1000px) {
.ReducedHeader--inner {
    position: relative;
    z-index: 3;
    padding: var(--spacing-24, 24px) var(--spacing-48, 48px);
}
}
.ReducedHeader--grid {
  display: grid;
  grid-template-areas: "left center right";
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
}
.ReducedHeader--logo {
  grid-area: left;
}
@media screen and (min-width: 1000px) {
.ReducedHeader--logo {
    grid-area: center;
}
}
.ReducedHeader--metaNavigation {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  grid-area: right;
  align-items: center;
  justify-content: flex-end;
}
@media (min-width: 750px) {
.ReducedHeader--metaNavigation {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ReducedHeader--metaNavigation {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ReducedHeader--metaNavigation {
    line-height: 1.2;
}
}
.ReducedHeader--contactLink {
  position: relative;
  margin-right: var(--spacing-16, 16px);
}
.ReducedHeader--contactLink::after {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--spacing-16, 16px));
  height: 100%;
  border-left: 1px solid rgba(var(--c-black), 1);
  content: "";
}
.ReducedHeader--shoppingCartLink {
  margin-left: var(--spacing-16, 16px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TopBanner {
  font-size: 12px;
  line-height: 1.4;
  position: relative;
  width: 100%;
  padding: var(--spacing-12, 12px);
  color: rgba(var(--c-white), 1);
  background: rgba(var(--c-black), 1);
}
@media (min-width: 750px) {
.TopBanner {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.TopBanner {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.TopBanner {
    line-height: 1.4;
}
}
@media screen and (min-width: 1000px) {
.TopBanner {
    font-size: 14px;
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) and (min-width: 750px) {
.TopBanner {
    font-size: 14px;
}
}
@media screen and (min-width: 1000px) and (min-width: 1280px) {
.TopBanner {
    font-size: 14px;
}
}
@media screen and (min-width: 1000px) and (max-width: 750px) {
.TopBanner {
    line-height: 1.2;
}
}
.TopBanner--coverLink {
  position: absolute;
  inset: 0;
}
.TopBanner--wrapper {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.TopBanner--text {
  margin-right: var(--spacing-10, 10px);
}
.TopBanner--link {
  color: rgba(var(--c-yellow), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AccountTitle[data-compose=white] {
  margin-top: 0px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.AccountTitle[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 0);
}
}
@media screen and (min-width: 1920px) {
.AccountTitle[data-compose=white] {
    margin-top: 0px;
}
}
@media screen and (min-width: 750px) {
.AccountTitle[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.AccountTitle[data-compose=white] {
    margin-bottom: 64px;
}
}
.AccountTitle[data-align=center] {
  text-align: center;
}
.AccountTitle[data-align=right] {
  text-align: right;
}
.AccountTitle--inner {
  max-width: 860px;
}
.AccountTitle--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.AccountTitle--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.AccountTitle--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.AccountTitle--title {
    line-height: 1.2;
}
}
.AccountTitle--text {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-top: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.AccountTitle--text {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.AccountTitle--text {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.AccountTitle--text {
    line-height: 1.4;
}
}
@media screen and (min-width: 1000px) {
.AccountTitle--text {
    margin-top: var(--spacing-24, 24px);
}
}
.AccountTitle--body {
  margin-top: 16px;
}
@media screen and (min-width: 750px) {
.AccountTitle--body {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.AccountTitle--body {
    margin-top: 32px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.IconTeaserCard {
  --border-radius: var(--border-radius-default);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8, 8px);
  align-items: center;
  height: 100%;
  padding: var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-16, 16px);
  overflow: hidden;
  text-align: center;
  background-color: rgba(var(--c-white), 1);
  border-radius: var(--border-radius);
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
  position: relative;
}
.IconTeaserCard::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  padding-bottom: 100%;
  background-color: var(--theme-background);
  border-radius: 100%;
  transform: translate(-50%, -50%) scale(0.2);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.1s ease-out, opacity 0.05s ease-out, visibility 0.1s;
}
@media (hover: hover) {
.IconTeaserCard:hover::before {
    transform: translate(-50%, -50%) scale(1.25);
    visibility: visible;
    opacity: 0.5;
}
.IconTeaserCard:focus::before {
    transform: translate(-50%, -50%) scale(1.25);
    visibility: visible;
    opacity: 0.5;
}
}
@media (hover: hover) {
.IconTeaserCard:hover {
    clip-path: inset(2% round calc(var(--border-radius) * 1.8));
}
.IconTeaserCard:hover .IconTeaserCard--icon {
    transform: translateY(-4px);
}
.IconTeaserCard:focus {
    clip-path: inset(2% round calc(var(--border-radius) * 1.8));
}
.IconTeaserCard:focus .IconTeaserCard--icon {
    transform: translateY(-4px);
}
}
.IconTeaserCard--icon {
  justify-content: center;
  width: clamp(56px, 60%, 80px);
  transition: transform 200ms ease-in-out;
  aspect-ratio: 1;
}
.IconTeaserCard--icon > svg {
  width: 60%;
  height: 60%;
}
.IconTeaserCard--title {
  font-size: 14px;
  line-height: 1.2;
  margin-top: auto;
}
@media (min-width: 750px) {
.IconTeaserCard--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.IconTeaserCard--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.IconTeaserCard--title {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ActivityHeroSlider[data-compose=theme] {
  background-color: var(--theme-background);
  padding-top: 48px;
  padding-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ActivityHeroSlider[data-compose=theme] {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ActivityHeroSlider[data-compose=theme] {
    padding-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ActivityHeroSlider[data-compose=theme] {
    padding-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ActivityHeroSlider[data-compose=theme] {
    padding-bottom: 64px;
}
}
.ActivityHeroSlider--inner {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ActivityHeroSlider--title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 32px;
  text-align: center;
}
@media (min-width: 750px) {
.ActivityHeroSlider--title {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.ActivityHeroSlider--title {
    font-size: 50px;
}
}
@media screen and (min-width: 750px) {
.ActivityHeroSlider--title {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ActivityHeroSlider--title {
    margin-bottom: 64px;
}
}
@media screen and (max-width: 1280px) {
.ActivityHeroSlider--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.ActivityHeroSlider--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.ActivityHeroSlider--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.ActivityHeroSlider--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.ActivityHeroSlider--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
.ActivityHeroSliderItem {
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (8 - 1)) / 8);
  min-width: 130px;
}
@media screen and (min-width: 1280px) {
.ActivityHeroSliderItem {
    min-width: auto;
}
}
@media screen and (min-width: 1440px) {
.ActivityHeroSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (9 - 1)) / 9);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AnchorHero[data-compose=theme] {
  background-color: var(--theme-background);
  padding-top: 0px;
  padding-bottom: 32px;
}
@media screen and (min-width: 750px) {
.AnchorHero[data-compose=theme] {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 0);
}
}
@media screen and (min-width: 1920px) {
.AnchorHero[data-compose=theme] {
    padding-top: 0px;
}
}
@media screen and (min-width: 750px) {
.AnchorHero[data-compose=theme] {
    padding-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.AnchorHero[data-compose=theme] {
    padding-bottom: 64px;
}
}
.AnchorHero--stage {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.AnchorHero--stage--before {
  padding-top: 16px;
}
@media screen and (min-width: 750px) {
.AnchorHero--stage--before {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.AnchorHero--stage--before {
    padding-top: 32px;
}
}
.AnchorHero--stage--body {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 16px;
  text-align: center;
}
@media screen and (min-width: 750px) {
.AnchorHero--stage--body {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.AnchorHero--stage--body {
    padding-top: 32px;
}
}
.AnchorHero--title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.AnchorHero--title {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.AnchorHero--title {
    font-size: 50px;
}
}
.AnchorHero--anchors {
  padding-top: 16px;
}
@media screen and (min-width: 750px) {
.AnchorHero--anchors {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.AnchorHero--anchors {
    padding-top: 32px;
}
}
@media screen and (max-width: 1280px) {
.AnchorHero--anchors {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.AnchorHero--anchors .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.AnchorHero--anchors .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.AnchorHero--anchors .ScrollSlider--prev {
    left: var(--site-padding);
}
.AnchorHero--anchors .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
.AnchorHero--anchor {
  --button-border-radius: var(--border-radius-medium);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ArticleHero[data-compose=white] {
  margin-top: 0px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.ArticleHero[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 0);
}
}
@media screen and (min-width: 1920px) {
.ArticleHero[data-compose=white] {
    margin-top: 0px;
}
}
@media screen and (min-width: 750px) {
.ArticleHero[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleHero[data-compose=white] {
    margin-bottom: 64px;
}
}
.ArticleHero--stage--wrapper {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
[data-variant=landingpage] .ArticleHero--stage--wrapper {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ArticleHero--stage--before {
  padding-top: 16px;
}
@media screen and (min-width: 750px) {
.ArticleHero--stage--before {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.ArticleHero--stage--before {
    padding-top: 32px;
}
}
.ArticleHero--stage--head {
  max-width: 860px;
  padding-top: 32px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: var(--spacing-24, 24px);
  text-align: center;
}
@media screen and (min-width: 750px) {
.ArticleHero--stage--head {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleHero--stage--head {
    padding-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ArticleHero--stage--head {
    padding-bottom: var(--spacing-40, 40px);
}
}
.ArticleHero--stage--image {
  position: relative;
  min-height: 524px;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: var(--border-radius-default);
}
.ArticleHero--imageWrapper {
  position: relative;
}
.ArticleHero--image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.15);
  transition: transform 2.5s 0.1s cubic-bezier(0.06, 0.3, 0.29, 0.96);
  will-change: transform;
}
.ArticleHero[data-did-appear=true] .ArticleHero--image {
  transform: none;
}
.ArticleHero--title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.ArticleHero--title {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.ArticleHero--title {
    font-size: 50px;
}
}
.ArticleHero--pretitle {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.ArticleHero--pretitle {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ArticleHero--pretitle {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ArticleHero--pretitle {
    line-height: 1.2;
}
}
.ArticleHero--tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-20, 20px);
}
.ArticleHero--body {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 48px;
  margin-bottom: 32px;
  position: relative;
}
@media screen and (min-width: 750px) {
.ArticleHero--body {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.ArticleHero--body {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.ArticleHero--body {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ArticleHero--body {
    margin-bottom: 64px;
}
}
.ArticleHero--badge {
  position: absolute;
  top: 100%;
  right: 0;
  transform: translate(10%, -80%);
}
@media screen and (min-width: 1000px) {
.ArticleHero--badge {
    top: 0;
    transform: translate(10%, -50%);
}
}
@media screen and (min-width: 1280px) {
.ArticleHero--badge {
    transform: translate(60px, -50%);
}
}
@media screen and (min-width: 1440px) {
.ArticleHero--badge {
    transform: translate(min(50%, 4.5vw), -50%);
}
}
.ArticleHero--head {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.ArticleHero--head {
    margin-bottom: var(--spacing-48, 48px);
}
}
.ArticleHero--author {
  flex: 1 1 70%;
}
.ArticleHero--date > * {
  display: block;
}
.ArticleHero--info {
  font-size: 12px;
  line-height: 1.4;
  flex: 0 1 auto;
  color: rgba(var(--c-grey), 1);
  text-align: right;
}
@media (min-width: 750px) {
.ArticleHero--info {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ArticleHero--info {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ArticleHero--info {
    line-height: 1.4;
}
}
.ArticleHero--lead {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 300;
}
@media (min-width: 750px) {
.ArticleHero--lead {
    font-size: calc(1.1320754717vw + 9.5094339623px);
}
}
@media (min-width: 1280px) {
.ArticleHero--lead {
    font-size: 24px;
}
}
@media screen and (max-width: 750px) {
.ArticleHero--lead {
    line-height: 1.4;
}
}
.ArticleHero--copyright {
  font-weight: bold;
  color: rgba(var(--c-black), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AuthorHero[data-compose=theme] {
  background-color: var(--theme-background);
  padding-top: 0px;
  padding-bottom: 32px;
}
@media screen and (min-width: 750px) {
.AuthorHero[data-compose=theme] {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 0);
}
}
@media screen and (min-width: 1920px) {
.AuthorHero[data-compose=theme] {
    padding-top: 0px;
}
}
@media screen and (min-width: 750px) {
.AuthorHero[data-compose=theme] {
    padding-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.AuthorHero[data-compose=theme] {
    padding-bottom: 64px;
}
}
.AuthorHero--stage {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.AuthorHero--stage--before {
  padding-top: 16px;
}
@media screen and (min-width: 750px) {
.AuthorHero--stage--before {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.AuthorHero--stage--before {
    padding-top: 32px;
}
}
.AuthorHero--stage--body {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 32px;
  text-align: center;
}
@media screen and (min-width: 750px) {
.AuthorHero--stage--body {
    padding-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.AuthorHero--stage--body {
    padding-top: 64px;
}
}
.AuthorHero--stage--image {
  position: relative;
  width: clamp(110px, 25vw, 160px);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border-radius: var(--border-radius-circle);
  aspect-ratio: 1;
}
.AuthorHero--image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.15);
  transition: transform 2.5s 0.1s cubic-bezier(0.06, 0.3, 0.29, 0.96);
  will-change: transform;
}
.AuthorHero[data-did-appear=true] .AuthorHero--image {
  transform: none;
}
.AuthorHero--info {
  margin-top: var(--spacing-16, 16px);
}
.AuthorHero--name {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.AuthorHero--name {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.AuthorHero--name {
    font-size: 34px;
}
}
.AuthorHero--role {
  font-size: 14px;
  line-height: 1.2;
  margin-top: var(--spacing-4, 4px);
}
@media (min-width: 750px) {
.AuthorHero--role {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.AuthorHero--role {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.AuthorHero--role {
    line-height: 1.2;
}
}
.AuthorHero--lead {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-top: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.AuthorHero--lead {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.AuthorHero--lead {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.AuthorHero--lead {
    line-height: 1.4;
}
}
@media screen and (min-width: 750px) {
.AuthorHero--lead {
    margin-top: var(--spacing-40, 40px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
[data-did-appear] .wordWrapper {
  position: relative;
  display: inline-flex;
}
[data-did-appear] .word {
  transform: translateY(50%);
  transform-origin: top left;
  opacity: 0;
  transition: transform 900ms cubic-bezier(0, 0, 0, 1), opacity 600ms;
  transition-delay: calc(var(--i, 0) * 65ms);
  will-change: transform;
}
[data-did-appear=true] .word {
  transform: none;
  opacity: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.EventHero[data-compose=white] {
  margin-top: 0px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.EventHero[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 0);
}
}
@media screen and (min-width: 1920px) {
.EventHero[data-compose=white] {
    margin-top: 0px;
}
}
@media screen and (min-width: 750px) {
.EventHero[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.EventHero[data-compose=white] {
    margin-bottom: 64px;
}
}
.EventHero--stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: rgba(var(--c-white), 1);
}
.EventHero--stage::before {
  display: block;
  width: 0;
  height: 125vw;
  max-height: 684px;
  content: "";
}
@media screen and (min-width: 750px) {
.EventHero--stage::before {
    height: 66.66vw;
}
}
@media screen and (min-width: 1280px) {
.EventHero--stage::before {
    max-height: 60vh;
}
}
.EventHero--stage::after {
  display: block;
  content: "";
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  /* mix-blend-mode: soft-light; */
  opacity: 0.3;
  transition: opacity 0.7s 0.1s;
  inset: 20% 0 0;
}
[data-did-appear=true] .EventHero--stage::after {
  opacity: 1;
}
.EventHero--stage--wrapper {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--spacing-24, 24px);
  padding-bottom: var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.EventHero--stage--wrapper {
    padding-top: var(--spacing-48, 48px);
    padding-bottom: var(--spacing-48, 48px);
}
}
.EventHero--stage--inner {
  max-width: 860px;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}
.EventHero--background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.15);
  transition: transform 2.5s 0.1s cubic-bezier(0.06, 0.3, 0.29, 0.96);
  will-change: transform;
}
[data-did-appear=true] .EventHero--background {
  transform: none;
}
.EventHero--breadcrumb {
  margin-bottom: var(--spacing-32, 32px);
  transform: translateY(50%);
  transform-origin: top left;
  opacity: 0;
  transition: transform 900ms cubic-bezier(0, 0, 0, 1), opacity 600ms;
  will-change: transform;
}
[data-did-appear=true] .EventHero--breadcrumb {
  transform: none;
  opacity: 1;
}
.EventHero--topTitle {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--spacing-8, 8px);
  transform: translateY(50%);
  transform-origin: top left;
  opacity: 0;
  transition: transform 900ms cubic-bezier(0, 0, 0, 1), opacity 600ms;
  will-change: transform;
}
@media (min-width: 750px) {
.EventHero--topTitle {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.EventHero--topTitle {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.EventHero--topTitle {
    line-height: 1.2;
}
}
[data-did-appear=true] .EventHero--topTitle {
  transform: none;
  opacity: 1;
}
.EventHero--topTitle--separator {
  display: block;
  width: 2px;
  height: 2px;
  margin: 0 var(--spacing-8, 8px);
  background-color: currentcolor;
  border-radius: 100%;
}
.EventHero--title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.EventHero--title {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.EventHero--title {
    font-size: 50px;
}
}
.EventHero--tags {
  display: flex;
  gap: var(--spacing-8, 8px);
  margin-top: var(--spacing-16, 16px);
}
.EventHero--body {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 48px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.EventHero--body {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.EventHero--body {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.EventHero--body {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.EventHero--body {
    margin-bottom: 64px;
}
}
.EventHero--head {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-24, 24px);
}
@media screen and (min-width: 1000px) {
.EventHero--head {
    margin-bottom: var(--spacing-48, 48px);
}
}
.EventHero--author {
  flex: 1 1 70%;
}
.EventHero--date > * {
  display: block;
}
.EventHero--info {
  font-size: 12px;
  line-height: 1.4;
  flex: 0 1 auto;
  color: rgba(var(--c-grey), 1);
  text-align: right;
}
@media (min-width: 750px) {
.EventHero--info {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.EventHero--info {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.EventHero--info {
    line-height: 1.4;
}
}
.EventHero--lead {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 300;
}
@media (min-width: 750px) {
.EventHero--lead {
    font-size: calc(1.1320754717vw + 9.5094339623px);
}
}
@media (min-width: 1280px) {
.EventHero--lead {
    font-size: 24px;
}
}
@media screen and (max-width: 750px) {
.EventHero--lead {
    line-height: 1.4;
}
}
.EventHero--copyright {
  font-weight: bold;
  color: rgba(var(--c-black), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.HeroTeaserSliderWrapper {
  container-type: inline-size;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PageTitle {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.PageTitle[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 16px;
}
@media screen and (min-width: 750px) {
.PageTitle[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.PageTitle[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.PageTitle[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.PageTitle[data-compose=white] {
    margin-bottom: 32px;
}
}
.PageTitle[data-align=center] {
  text-align: center;
}
.PageTitle[data-align=right] {
  text-align: right;
}
.PageTitle--inner {
  max-width: 628px;
}
[data-width=content-narrow] .PageTitle--inner {
  max-width: 628px;
  margin-right: auto;
  margin-left: auto;
}
[data-width=content-medium] .PageTitle--inner {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
}
.PageTitle--titleWrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8, 8px);
}
.PageTitle--title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.PageTitle--title {
    font-size: calc(4.1509433962vw - 3.1320754717px);
}
}
@media (min-width: 1280px) {
.PageTitle--title {
    font-size: 50px;
}
}
.PageTitle--topic {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.PageTitle--topic {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PageTitle--topic {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PageTitle--topic {
    line-height: 1.2;
}
}
.PageTitle--text {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-top: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.PageTitle--text {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.PageTitle--text {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.PageTitle--text {
    line-height: 1.4;
}
}
@media screen and (min-width: 1000px) {
.PageTitle--text {
    margin-top: var(--spacing-48, 48px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ColorSelect {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 0.5em;
}
.ColorSelect--color {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 100%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductCardGridItem {
  max-width: 100%;
  border-bottom: 1px solid rgba(var(--c-border));
  border-left: 1px solid rgba(var(--c-border));
  /* add faked border for last element */
}
.ProductCardGridItem:hover {
  z-index: 1;
}
@media screen and (min-width: 1000px) {
.ProductCardGridItem {
    border-bottom: none;
}
}
.ProductCardGridItem:nth-child(2n+1) {
  border-left: none;
}
@media screen and (min-width: 580px) {
.ProductCardGridItem:nth-child(2n+1) {
    border-left: 1px solid rgba(var(--c-border));
}
}
@media screen and (min-width: 580px) {
.ProductCardGridItem:nth-child(3n+1) {
    border-left: none;
}
}
@media screen and (min-width: 1000px) {
.ProductCardGridItem:nth-child(3n+1) {
    border-left: 1px solid rgba(var(--c-border));
}
}
@media screen and (min-width: 1000px) {
.ProductCardGridItem:nth-child(4n+1) {
    border-left: none;
}
}
@media screen and (min-width: 1280px) {
.ProductCardGridItem:nth-child(4n+1) {
    border-left: 1px solid rgba(var(--c-border));
}
}
@media screen and (min-width: 1280px) {
.ProductCardGridItem:nth-child(5n+1) {
    border-left: none;
}
}
@media screen and (min-width: 1000px) {
.ProductCardGridItem[data-type=content-commerce], [data-type=content-commerce] + .ProductCardGridItem {
    border-left: none;
}
}
@media screen and (max-width: 1000px) {
.ProductCardGridItem:last-child {
    box-shadow: 1px 0 0 0 rgba(var(--c-border));
}
}
@media screen and (min-width: 580px) {
.ProductCardGridItem:last-child:nth-child(3n) {
    box-shadow: none;
}
}
@media screen and (max-width: 580px) {
.ProductCardGridItem:last-child:nth-child(2n) {
    box-shadow: none;
}
}
@media screen and (max-width: 1000px) {
.ProductCardGridItem > * {
    --border-radius: 0px;
}
}
@media screen and (max-width: 1000px) {
.ProductCardGridItem[data-type=content-commerce] > .ImageTeaser {
    clip-path: inset(0 round var(--border-radius)) !important;
}
}
@media screen and (min-width: 1000px) {
.ProductCardGridItem[data-type=content-commerce] > .ImageTeaser {
    height: calc(100% + 32px);
    margin-top: -16px;
    margin-bottom: -16px;
}
}
@media screen and (min-width: 1000px) {
.ProductCardGridItem[data-type=content-commerce] > .GuideTeaser {
    height: calc(100% + 32px);
    margin-top: -16px;
    margin-bottom: -16px;
}
}
@media screen and (max-width: 1000px) {
.ProductCardGridItem[data-type=content-commerce] > .GuideTeaser {
    border: none;
    border-radius: 0;
}
.ProductCardGridItem[data-type=content-commerce] > .GuideTeaser .GuideTeaser--body {
    padding-top: 0;
    background: rgba(var(--c-green-light), 1);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductCardGrid {
  border-top: 1px solid rgba(var(--c-border));
}
.ProductCardGrid--inner {
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 1000px) {
.ProductCardGrid--inner {
    max-width: 1440px;
    max-width: calc(1440px + var(--site-padding) * 2);
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    margin-right: auto;
    margin-left: auto;
    padding-top: var(--spacing-32, 32px);
}
}
.ProductCardGrid--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* grid-auto-rows: 1fr; */
}
@media screen and (min-width: 580px) {
.ProductCardGrid--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (min-width: 1000px) {
.ProductCardGrid--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1280px) {
.ProductCardGrid--grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media screen and (max-width: 1000px) {
.ProductCardGrid--grid {
    overflow: hidden;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductCardSlider {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.ProductCardSlider[data-compose=white] {
  margin-top: 64px;
  margin-bottom: 64px;
}
@media screen and (min-width: 750px) {
.ProductCardSlider[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.ProductCardSlider[data-compose=white] {
    margin-top: 128px;
}
}
@media screen and (min-width: 750px) {
.ProductCardSlider[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.ProductCardSlider[data-compose=white] {
    margin-bottom: 128px;
}
}
@media screen and (max-width: 1280px) {
.ProductCardSlider--slider {
    margin-right: var(--site-padding-reset);
    margin-left: var(--site-padding-reset);
}
.ProductCardSlider--slider .ScrollSlider--track {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
    scroll-padding-left: var(--site-padding);
    scroll-padding-right: var(--site-padding);
}
.ProductCardSlider--slider .ScrollSlider--bar {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
.ProductCardSlider--slider .ScrollSlider--prev {
    left: var(--site-padding);
}
.ProductCardSlider--slider .ScrollSlider--next {
    left: calc(100% - var(--site-padding));
}
}
.ProductCardSliderItem {
  width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (1 - 1)) / 1);
}
@media screen and (min-width: 580px) {
.ProductCardSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (2 - 1)) / 2);
}
}
@media screen and (min-width: 750px) {
.ProductCardSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (3 - 1)) / 3);
}
}
@media screen and (min-width: 1000px) {
.ProductCardSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (4 - 1)) / 4);
}
}
@media screen and (min-width: 1280px) {
.ProductCardSliderItem {
    width: calc((var(--scrollslider-base) - var(--scrollslider-gap) * (5 - 1)) / 5);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductDeliveryInfo {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ProductDeliveryInfo {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductDeliveryInfo {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductDeliveryInfo {
    line-height: 1.4;
}
}
.ProductDeliveryInfo[data-state=available] {
  color: rgba(var(--c-signal-green), 1);
}
.ProductDeliveryInfo--indicator {
  position: relative;
  top: -1px;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--spacing-8, 8px);
  vertical-align: middle;
  background-color: rgba(var(--c-signal-green), 1);
  background-color: currentcolor;
  border-radius: 100%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductVariantOption {
  position: relative;
  display: block;
}
.ProductVariantOption--badge {
  position: absolute !important;
  top: var(--spacing-4, 4px);
  right: var(--spacing-4, 4px);
  z-index: 1;
  transform: translate(50%, -50%);
}
.ProductVariantOption--badge[data-icon] {
  width: 18px;
  height: 18px;
  font-size: 10px;
}
.ProductVariantOption--inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: var(--spacing-4, 4px);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  transition: border-color 200ms;
  /* @include hover won't work. Active should be visible any time */
}
[data-size=small] .ProductVariantOption--inner {
  width: 30px;
  height: 30px;
}
.ProductVariantOption--inner:hover, .ProductVariantOption--inner:focus, .ProductVariantOption.isActive .ProductVariantOption--inner {
  border-color: rgba(var(--c-black), 1);
}
.ProductVariantOption--image {
  max-width: 100%;
  max-height: 100%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductVariantSelect {
  margin-bottom: var(--spacing-24, 24px);
}
.ProductVariantSelect--title {
  font-size: 12px;
  line-height: 1.4;
  display: block;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.ProductVariantSelect--title {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductVariantSelect--title {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductVariantSelect--title {
    line-height: 1.4;
}
}
.ProductVariantSelect--list {
  margin-right: calc(var(--spacing-8, 8px) * -1);
  margin-bottom: calc(var(--spacing-8, 8px) * -1);
  display: flex;
  flex-wrap: wrap;
  page-break-inside: avoid;
}
.ProductVariantSelect--list > * {
  padding-right: var(--spacing-8, 8px);
}
.ProductVariantSelect--list > * {
  margin-bottom: var(--spacing-8, 8px);
}
.ProductVariantSelect--list > * {
  flex: 0 0 auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductSizeOption {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--spacing-16, 16px);
  overflow: hidden;
  text-align: center;
  background-color: rgba(var(--c-grey-light), 1);
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  outline: none;
  transform: translate3d(0, 0, 0);
  transition: border-color 200ms ease-out;
  /* @include hover won't work. Active should be visible any time */
}
.ProductSizeOption::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  padding-bottom: 100%;
  background-color: rgba(var(--c-white), 1);
  border-radius: 100%;
  transform: translate(-50%, -50%) scale(0.2);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.1s ease-out, opacity 0.05s ease-out, visibility 0.1s;
}
.ProductSizeOption:hover, .ProductSizeOption:focus, .ProductSizeOption.isActive {
  border-color: rgba(var(--c-black), 1);
}
.ProductSizeOption:hover::before, .ProductSizeOption:focus::before, .ProductSizeOption.isActive::before {
  transform: translate(-50%, -50%) scale(1.41);
  visibility: visible;
  opacity: 1;
}
.ProductSizeOption.isDisabled {
  color: rgba(var(--c-grey), 1);
  pointer-events: none;
}
.ProductSizeOption.isDisabled::after {
  position: absolute;
  z-index: -2;
  display: block;
  background: rgba(var(--c-grey-medium), 1);
  content: "";
  clip-path: polygon(calc(100% - 3px) 0, 100% 0, 3px 100%, 0 100%);
  inset: -1px;
}
.ProductSizeOption--label {
  position: relative;
}
.ProductSizeOption--label::before {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -10%;
  z-index: -1;
  width: 120%;
  background: rgba(var(--c-grey-light), 1);
  border-radius: 2px;
  opacity: 0;
  content: "";
}
.isDisabled .ProductSizeOption--label::before {
  opacity: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductSizeSelect {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.ProductSizeSelect {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductSizeSelect {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductSizeSelect {
    line-height: 1.4;
}
}
.ProductSizeSelect--title {
  display: block;
  margin-bottom: 1em;
}
.ProductSizeSelect--list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: var(--spacing-4, 4px);
  page-break-inside: avoid;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductBuyButton {
  position: relative;
  overflow: hidden;
}
.ProductBuyButton--icon {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
  transition: transform 0.3s ease-out;
  transform: translateX(calc(var(--width) / -2 - 12px));
  visibility: hidden;
}
[data-animating=true] .ProductBuyButton--icon {
  animation: cartMove 1.6s ease-in-out;
}
.ProductBuyButton--label {
  position: relative;
  transition: opacity 0.15s ease-out;
}
[data-animating=true] .ProductBuyButton--label {
  transition: opacity 0.3s ease-out;
  opacity: 0;
}
@keyframes cartMove {
0% {
    visibility: visible;
    transform: translateX(calc(var(--width) / -2 - 12px)) rotate(5deg);
}
35% {
    transform: translateX(0) rotate(5deg);
}
40% {
    transform: translateX(0) rotate(0deg);
}
65% {
    transform: translateX(0) rotate(0deg);
}
100% {
    visibility: hidden;
    transform: translateX(calc(var(--width) / 2 + 12px)) rotate(-10deg);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductActionBar {
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-8, 8px) var(--spacing-8, 8px);
}
.ProductActionBar--select {
  flex: 0 0 95px;
}
.ProductActionBar--select select {
  padding-top: var(--spacing-16, 16px);
  padding-bottom: var(--spacing-16, 16px);
  line-height: 1;
}
.ProductActionBar--favouriteToggle {
  flex: 0 0 48px;
}
.ProductActionBar--buttonWrapper {
  flex: 1 0 auto;
}
.ProductActionBar--button {
  height: 100%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductDetailCard--segment {
  margin-top: var(--spacing-24, 24px);
  padding-top: var(--spacing-24, 24px);
  border-top: 1px solid rgba(var(--c-border));
}
.ProductDetailCard--segment > * + * {
  margin-top: var(--spacing-16, 16px);
}
.ProductDetailCard--segment[data-gap=small] > * + * {
  margin-top: var(--spacing-8, 8px);
}
.ProductDetailCard--segment--title {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.ProductDetailCard--segment--title {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductDetailCard--segment--title {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductDetailCard--segment--title {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
@media screen and (min-width: 750px) {
.ProductDetailCard {
    padding: var(--spacing-32, 32px);
    border: 1px solid rgba(var(--c-border));
    border-radius: var(--border-radius-default);
}
}
.ProductDetailCard--brand {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  display: block;
}
@media (min-width: 750px) {
.ProductDetailCard--brand {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductDetailCard--brand {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductDetailCard--brand {
    line-height: 1.2;
}
}
.ProductDetailCard--head {
  margin-bottom: var(--spacing-32, 32px);
}
.ProductDetailCard--name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  display: block;
}
@media (min-width: 750px) {
.ProductDetailCard--name {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.ProductDetailCard--name {
    font-size: 22px;
}
}
.ProductDetailCard--sku {
  font-size: 12px;
  line-height: 1.4;
  margin-top: var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.ProductDetailCard--sku {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductDetailCard--sku {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductDetailCard--sku {
    line-height: 1.4;
}
}
.ProductDetailCard--price {
  font-size: 18px;
  line-height: 1.4;
  margin-top: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.ProductDetailCard--price {
    font-size: calc(-0.3773584906vw + 20.8301886792px);
}
}
@media (min-width: 1280px) {
.ProductDetailCard--price {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.ProductDetailCard--price {
    line-height: 1.5;
}
}
@media screen and (min-width: 750px) {
.ProductDetailCard--price {
    margin-top: var(--spacing-24, 24px);
}
}
.ProductDetailCard--price--inner {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
}
@media screen and (max-width: 750px) {
.ProductDetailCard--price--inner {
    align-items: flex-start;
}
}
.ProductDetailCard--price--tooltip {
  flex: 0 0 auto;
}
@media screen and (max-width: 750px) {
.ProductDetailCard--price--tooltip {
    margin-top: 3px;
}
}
.ProductDetailCard--price--info {
  font-size: 12px;
  line-height: 1.4;
  margin-top: var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.ProductDetailCard--price--info {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductDetailCard--price--info {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductDetailCard--price--info {
    line-height: 1.4;
}
}
.ProductDetailCard--price--info a {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.ProductDetailCard--price--info a:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.ProductDetailCard--price--info a:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.ProductDetailCard--tags {
  margin-top: var(--spacing-16, 16px);
}
.ProductDetailCard--body > * + * {
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
@keyframes splide-loading {
0% {
    transform: rotate(0);
}
to {
    transform: rotate(1turn);
}
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.splide--rtl {
  direction: rtl;
}
.splide__track--ttb > .splide__list {
  display: block;
}
.splide__container {
  box-sizing: border-box;
  position: relative;
}
.splide__list {
  backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}
.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
  display: none;
}
.splide__progress__bar {
  width: 0;
}
.splide {
  position: relative;
  visibility: hidden;
}
.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}
.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}
.splide__slide img {
  vertical-align: bottom;
}
.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}
.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}
.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.ProductImageSlider {
  --product-slider-calculated-height: 444px;
  position: relative;
}
@media screen and (min-width: 1000px) {
.ProductImageSlider {
    display: grid;
    grid-template-areas: "thumbnails slider";
    grid-template-columns: 64px 1fr;
    gap: var(--spacing-12, 12px);
}
}
.ProductImageSlider--track > .splide__list.splide__list {
  display: flex !important;
}
.ProductImageSlider--track {
  position: relative;
  display: flex;
  overflow: hidden;
}
.ProductImageSlider--track > * {
  width: 100%;
}
.ProductImageSlider--main {
  position: relative;
  grid-area: slider;
}
.ProductImageSlider--mainSlider {
  position: relative;
}
.ProductImageSlider--brand {
  position: absolute;
  top: var(--spacing-12, 12px);
  left: var(--spacing-12, 12px);
  z-index: 1;
  max-width: 96px;
  max-height: 64px;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 750px) {
.ProductImageSlider--brand {
    max-width: clamp(48px, 12vw, 96px);
    max-height: clamp(32px, 8vw, 64px);
}
}
.ProductImageSlider--slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 1000px) {
.ProductImageSlider--slide {
    padding-top: var(--spacing-40, 40px);
}
}
@media screen and (max-width: 750px) {
.ProductImageSlider--slide {
    padding: var(--spacing-16, 16px) var(--spacing-40, 40px);
}
}
.ProductImageSlider--slideCounter {
  font-size: 12px;
  line-height: 1.4;
  display: inline-block;
  flex: 0 1 auto;
  align-self: center;
  min-width: 30px;
  margin: 0 var(--spacing-8, 8px);
  text-align: center;
}
@media (min-width: 750px) {
.ProductImageSlider--slideCounter {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductImageSlider--slideCounter {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductImageSlider--slideCounter {
    line-height: 1.4;
}
}
.ProductImageSlider--thumbnailSlider {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  grid-area: thumbnails;
  padding: 40px 0;
}
.ProductImageSlider--thumbnailSlider.is-initialized {
  display: block;
}
@media screen and (max-width: 1000px) {
.ProductImageSlider--thumbnailSlider {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}
}
.ProductImageSlider--thumbnailSlide {
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
}
@media (hover: hover) {
.ProductImageSlider--thumbnailSlide[aria-current=true], .ProductImageSlider--thumbnailSlide:hover {
    border-color: rgba(var(--c-black), 1);
}
.ProductImageSlider--thumbnailSlide:focus {
    border-color: rgba(var(--c-black), 1);
}
}
.ProductImageSlider--thumbnailSlide--icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* custom Splide styles */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable no-duplicate-selectors */
.splide__arrow {
  position: relative;
  padding: var(--spacing-8, 8px);
  cursor: pointer;
}
.splide__arrow::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
  content: "";
}
@media (hover: hover) {
.splide__arrow:hover::before {
    background-color: rgba(var(--c-grey-light), 1);
}
.splide__arrow:focus::before {
    background-color: rgba(var(--c-grey-light), 1);
}
}
.splide__arrow[disabled] {
  opacity: 0.2;
  pointer-events: none;
}
@media screen and (max-width: 750px) {
.ProductImageSlider--main .splide__arrows .ProductImageSlider--slideCounter {
    display: none;
}
}
@media screen and (min-width: 750px) {
.ProductImageSlider--main .splide__arrows {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: var(--spacing-24, 24px);
}
}
@media screen and (max-width: 750px) {
.ProductImageSlider--main .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.ProductImageSlider--main .splide__arrow--prev {
    left: 0;
}
.ProductImageSlider--main .splide__arrow--next {
    right: 0;
}
.ProductImageSlider--main .splide__pagination {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--slide-count), 1fr);
    gap: var(--spacing-4, 4px);
}
.ProductImageSlider--main .splide__pagination li {
    display: block;
}
.ProductImageSlider--main .splide__pagination__page {
    position: relative;
    width: 100%;
    height: 8px;
}
.ProductImageSlider--main .splide__pagination__page::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(var(--c-black), 0.16);
    transform: translateY(-50%);
    content: "";
}
.ProductImageSlider--main .splide__pagination__page.is-active::after {
    background-color: rgba(var(--c-black), 1);
}
}
.ProductImageSlider--thumbnailSlider .splide__arrows {
  text-align: center;
}
@media screen and (max-width: 1000px) {
.ProductImageSlider--thumbnailSlider .splide__arrows {
    display: none;
}
}
.ProductImageSlider--thumbnailSlider .splide__arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.ProductImageSlider--thumbnailSlider .splide__arrow--prev {
  top: 0;
  margin-bottom: var(--spacing-8, 8px);
}
.ProductImageSlider--thumbnailSlider .splide__arrow--next {
  bottom: 0;
  margin-top: var(--spacing-8, 8px);
}
.ProductImageSlider--thumbnailSlider .splide__track {
  height: var(--product-slider-calculated-height) !important;
}

/* stylelint enable selector-class-pattern */
/* stylelint enable no-duplicate-selectors *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductDetail {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 32px;
  margin-bottom: 64px;
}
@media screen and (min-width: 750px) {
.ProductDetail {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.ProductDetail {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.ProductDetail {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.ProductDetail {
    margin-bottom: 128px;
}
}
@media screen and (min-width: 750px) {
.ProductDetail {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(12, 1fr);
    -moz-column-gap: var(--spacing-24, 24px);
         column-gap: var(--spacing-24, 24px);
}
}
.ProductDetail--main {
  margin-bottom: var(--spacing-64, 64px);
}
@media screen and (min-width: 750px) {
.ProductDetail--main {
    grid-row: 1/2;
    grid-column: 1/7;
}
}
@media screen and (min-width: 1000px) {
.ProductDetail--main {
    grid-column: 1/8;
}
}
.ProductDetail--aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48, 48px);
  /* Equals above-tablet-portrait, but checks for height as well */
}
@media screen and (min-width: 750px) {
.ProductDetail--aside {
    grid-row: 1/2;
    grid-column: 7/13;
    gap: var(--spacing-8, 8px);
}
}
@media screen and (min-width: 1000px) {
.ProductDetail--aside {
    grid-column: 8/13;
}
}
@media screen and (min-width: 1280px) {
.ProductDetail--aside {
    grid-column: 9/13;
}
}
@media screen and (min-width: 1001px) and (height >= 800px) {
.ProductDetail--aside {
    position: sticky;
    top: var(--spacing-24, 24px);
}
}
.ProductDetail--body {
  margin-top: var(--spacing-64, 64px);
}
@media screen and (min-width: 750px) {
.ProductDetail--body {
    grid-row: 2/3;
    grid-column: 1/13;
    margin-top: 0;
}
}
@media screen and (min-width: 1000px) {
.ProductDetail--body {
    grid-column: 1/8;
}
}

/* higher specifity needed to prevent import order overwrites */
.ProductDetail--body.ProductDetail--body > *:first-child {
  margin-top: 0;
}
.ProductDetail--body.ProductDetail--body > *:last-child {
  margin-bottom: 0;
}
.ProductDetail--slider {
  position: relative;
}
.ProductDetail--info {
  margin-top: var(--spacing-16, 16px);
}
@media screen and (min-width: 1280px) {
.ProductDetail--info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 300px;
    margin-top: initial;
}
}
@media screen and (min-width: 1440px) {
.ProductDetail--info {
    width: 320px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SingleProductTeaser {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.SingleProductTeaser[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 750px) {
.SingleProductTeaser[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.SingleProductTeaser[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.SingleProductTeaser[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.SingleProductTeaser[data-compose=white] {
    margin-bottom: 64px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.CommerceTeaser {
  --border-radius: var(--border-radius-default);
  transition: clip-path 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  clip-path: inset(0 round var(--border-radius));
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius);
}
@media screen and (max-width: 580px) {
.CommerceTeaser {
    border: 1px solid rgba(var(--c-border));
}
}
@media (hover: hover) {
.CommerceTeaser:hover {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.CommerceTeaser:hover .CommerceTeaser--mood {
    transform: scale(1.05);
}
.CommerceTeaser:focus {
    clip-path: inset(0.5% round calc(var(--border-radius) * 1.8));
}
.CommerceTeaser:focus .CommerceTeaser--mood {
    transform: scale(1.05);
}
}
.CommerceTeaser--link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-16, 16px);
}
@media screen and (min-width: 580px) {
.CommerceTeaser--link {
    padding: var(--spacing-24, 24px);
}
}
@media screen and (min-width: 750px) {
.CommerceTeaser--link {
    padding: var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1000px) {
.CommerceTeaser--link {
    padding: var(--spacing-40, 40px);
}
}
.CommerceTeaser--mood {
  transition: transform 1400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.CommerceTeaser--card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  justify-self: flex-end;
  width: 100%;
  max-width: 360px;
  margin-top: auto;
  padding: var(--spacing-24, 24px);
  overflow: hidden;
  background-color: white;
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.CommerceTeaser--card {
    padding: var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1000px) {
.CommerceTeaser[data-ratio="2x1"] .CommerceTeaser--card {
    align-self: flex-end;
    max-width: clamp(360px, 45%, 550px);
}
}
.CommerceTeaser--image {
  max-width: 75px;
  mix-blend-mode: multiply;
}
@media screen and (min-width: 580px) {
.CommerceTeaser--image {
    max-width: 100px;
}
.CommerceTeaser[data-ratio="2x1"] .CommerceTeaser--image {
    max-width: 124px;
}
}
.CommerceTeaser--info {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--spacing-16, 16px);
}
.CommerceTeaser--brand {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}
@media (min-width: 750px) {
.CommerceTeaser--brand {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.CommerceTeaser--brand {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.CommerceTeaser--brand {
    line-height: 1.2;
}
}
.CommerceTeaser--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.CommerceTeaser--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.CommerceTeaser--title {
    font-size: 22px;
}
}
@media screen and (min-width: 1000px) {
.CommerceTeaser[data-ratio="2x1"] .CommerceTeaser--title {
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
}
}
@media screen and (min-width: 1000px) and (min-width: 750px) {
.CommerceTeaser[data-ratio="2x1"] .CommerceTeaser--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media screen and (min-width: 1000px) and (min-width: 1280px) {
.CommerceTeaser[data-ratio="2x1"] .CommerceTeaser--title {
    font-size: 34px;
}
}
[data-icon].CommerceTeaser--arrow {
  clip-path: inset(-10%);
  flex: 0 0 auto;
}
[data-icon].CommerceTeaser--arrow::before {
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}
@media (hover: hover) {
.CommerceTeaser:hover [data-icon].CommerceTeaser--arrow::before, [data-icon].CommerceTeaser--arrow:hover::before {
    transform: scale(1.1);
}
.CommerceTeaser:hover [data-icon].CommerceTeaser--arrow > svg, [data-icon].CommerceTeaser--arrow:hover > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
[data-icon].CommerceTeaser--arrow:focus::before {
    transform: scale(1.1);
}
[data-icon].CommerceTeaser--arrow:focus > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.GuideTeaser {
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  transition: border-color 0.2s ease-out;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  overflow: hidden;
}
@media (hover: hover) {
.GuideTeaser:hover {
    border-color: rgba(var(--c-black), 1);
}
.GuideTeaser:focus {
    border-color: rgba(var(--c-black), 1);
}
}
@media (hover: hover) {
.GuideTeaser:hover .GuideTeaser--icon {
    transform: translateY(-2px);
}
.GuideTeaser:hover .GuideTeaser--button::before {
    border-color: var(--button-hover-border-color);
}
.GuideTeaser:hover .GuideTeaser--button:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.GuideTeaser:focus .GuideTeaser--icon {
    transform: translateY(-2px);
}
.GuideTeaser:focus .GuideTeaser--button::before {
    border-color: var(--button-hover-border-color);
}
.GuideTeaser:focus .GuideTeaser--button:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
.GuideTeaser--head {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding-top: clamp(20px, 10%, 40px);
  padding-bottom: clamp(20px, 10%, 40px);
  background-color: rgba(var(--c-green-light), 1);
}
.GuideTeaser--icon {
  transition: transform 0.2s ease-in-out;
}
.GuideTeaser--body {
  padding: var(--spacing-24, 24px) var(--spacing-24, 24px) var(--spacing-32, 32px);
  background: rgba(var(--c-white), 1);
}
.GuideTeaser--topTitle {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.GuideTeaser--topTitle {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.GuideTeaser--topTitle {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.GuideTeaser--topTitle {
    line-height: 1.2;
}
}
.GuideTeaser--title {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.GuideTeaser--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.GuideTeaser--title {
    font-size: 16px;
}
}
.GuideTeaser--button {
  position: relative;
  z-index: 1;
}
.GuideTeaser--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SaleTeaser {
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  transition: border-color 0.2s ease-out;
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100%;
  padding: var(--spacing-24, 24px);
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
}
@media (hover: hover) {
.SaleTeaser:hover {
    border-color: rgba(var(--c-black), 1);
}
.SaleTeaser:focus {
    border-color: rgba(var(--c-black), 1);
}
}
.SaleTeaser--inner {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
  width: 100%;
  min-height: 100%;
}
@media screen and (max-width: 750px) {
.SaleTeaser--inner {
    gap: var(--spacing-16, 16px);
}
}
.SaleTeaser--badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.SaleTeaser--topTitle {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(var(--c-signal-red), 1);
}
@media (min-width: 750px) {
.SaleTeaser--topTitle {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.SaleTeaser--topTitle {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.SaleTeaser--topTitle {
    line-height: 1.2;
}
}
.SaleTeaser--titleWrapper {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
}
.SaleTeaser--arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: flex-end;
}
.SaleTeaser--title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
@media (min-width: 750px) {
.SaleTeaser--title {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.SaleTeaser--title {
    font-size: 16px;
}
}
.SaleTeaser--mediaGrid {
  --max-image-size: 180px;
  position: relative;
  z-index: -1;
  display: grid;
  flex-grow: 1;
  grid-gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 100%;
  aspect-ratio: auto 4/3;
  background-color: rgba(var(--c-border));
}
.SaleTeaser--mediaGrid[data-length="1"] {
  --max-image-size: 320px;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}
.SaleTeaser--mediaGrid[data-length="3"] {
  grid-template-rows: 1fr 1fr;
}
.SaleTeaser--mediaGrid[data-length="3"] > :first-child {
  grid-row: span 2;
}
.SaleTeaser--mediaGrid[data-ratio="2x1"], .TeaserSlider.TeaserSlider .SaleTeaser--mediaGrid {
  aspect-ratio: auto;
}
.SaleTeaser--media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16, 16px);
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
}
.SaleTeaser--media .Image {
  width: 100%;
  max-width: var(--max-image-size);
  height: 100%;
  max-height: var(--max-image-size);
  -o-object-fit: contain;
     object-fit: contain;
}
.SaleTeaser--media .Image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
[data-icon].SaleTeaser--arrow {
  clip-path: inset(-10%);
  flex: 0 0 auto;
}
[data-icon].SaleTeaser--arrow::before {
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}
@media (hover: hover) {
.SaleTeaser:hover [data-icon].SaleTeaser--arrow::before, [data-icon].SaleTeaser--arrow:hover::before {
    transform: scale(1.1);
}
.SaleTeaser:hover [data-icon].SaleTeaser--arrow > svg, [data-icon].SaleTeaser--arrow:hover > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
[data-icon].SaleTeaser--arrow:focus::before {
    transform: scale(1.1);
}
[data-icon].SaleTeaser--arrow:focus > svg {
    animation: icon-out-in 0.5s ease-in-out 200ms 1 normal forwards;
}
}
.SaleTeaser--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductSaleTeaser {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-default);
}
.ProductSaleTeaser--inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24, 24px);
  padding: var(--spacing-24, 24px);
  pointer-events: none;
}
@media screen and (max-width: 750px) {
.ProductSaleTeaser--inner {
    gap: var(--spacing-16, 16px);
}
}
.ProductSaleTeaser--badge {
  position: absolute;
  top: var(--spacing-24, 24px);
  right: var(--spacing-24, 24px);
  z-index: 1;
}
@media screen and (max-width: 750px) {
.ProductSaleTeaser--badge {
    top: var(--spacing-16, 16px);
    right: var(--spacing-16, 16px);
}
}
.ProductSaleTeaser--topTitle {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(var(--c-signal-red), 1);
}
@media (min-width: 750px) {
.ProductSaleTeaser--topTitle {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductSaleTeaser--topTitle {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductSaleTeaser--topTitle {
    line-height: 1.2;
}
}
.ProductSaleTeaser--productCard {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
}
.ProductSaleTeaser--productCard .ProductCard {
  padding-top: var(--spacing-64, 64px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TransacardTeaser {
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  transition: border-color 0.2s ease-out;
  position: relative;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}
@media (hover: hover) {
.TransacardTeaser:hover {
    border-color: rgba(var(--c-black), 1);
}
.TransacardTeaser:focus {
    border-color: rgba(var(--c-black), 1);
}
}
.TransacardTeaser::before {
  position: absolute;
  z-index: -1;
  background-color: rgba(var(--c-white), 1);
  background-image: radial-gradient(circle, rgba(var(--c-grey-light), 1) 7px, transparent 7px);
  background-position: center 8px;
  /* Ensure circles are fully visible and even */
  background-size: 30px 30px;
  background-blend-mode: normal;
  content: "";
  inset: 0;
}
.TransacardTeaser--inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-24, 24px);
  background-image: linear-gradient(to bottom, transparent 20%, rgba(var(--c-white), 1) 85%);
  box-shadow: inset 0 -24px 8px 20px rgba(var(--c-white), 1);
  content: "";
}
@media screen and (min-width: 750px) {
.TransacardTeaser--inner {
    padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
}
}
.TransacardTeaser--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.TransacardTeaser--content {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: flex-end;
  width: 100%;
}
.TransacardTeaser--label {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: var(--spacing-32, 32px);
}
@media (min-width: 750px) {
.TransacardTeaser--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TransacardTeaser--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TransacardTeaser--label {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TransacardTeaser--barcode {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32, 32px);
  align-items: center;
  height: 100%;
  padding-top: var(--spacing-32, 32px);
  padding-bottom: var(--spacing-16, 16px);
  text-align: center;
}
.TransacardTeaser--points {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  margin: auto 0;
}
@media (min-width: 750px) {
.TransacardTeaser--points {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.TransacardTeaser--points {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.TransacardTeaser--points {
    line-height: 1.2;
}
}
.TransacardTeaser--points span {
  display: block;
}
.TransacardTeaser--points span + span {
  margin-top: var(--spacing-8, 8px);
}
.TransacardTeaser--barcode--action {
  text-align: center;
}
.TransacardTeaser--barcode--action--fab {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  --button-color: rgba(var(--c-black), 1);
  --button-border-color: transparent;
  --button-background-color: rgba(var(--c-grey-light), 1);
  --button-hover-background-color: rgba(var(--c-grey-medium), 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}
.TransacardTeaser--barcode--action--fab::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.TransacardTeaser--barcode--action--fab::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.TransacardTeaser--barcode--action--fab:hover::before {
    border-color: var(--button-hover-border-color);
}
.TransacardTeaser--barcode--action--fab:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.TransacardTeaser--barcode--action--fab:focus::before {
    border-color: var(--button-hover-border-color);
}
.TransacardTeaser--barcode--action--fab:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
.TransacardTeaser--barcode--action--fab svg {
  position: relative;
  z-index: 1;
}
.TransacardTeaser:hover .TransacardTeaser--barcode--action--fab::before, .TransacardTeaser--barcode--action:hover .TransacardTeaser--barcode--action--fab::before {
  border-color: var(--button-hover-border-color);
}
.TransacardTeaser:hover .TransacardTeaser--barcode--action--fab:not(:disabled)::after, .TransacardTeaser--barcode--action:hover .TransacardTeaser--barcode--action--fab:not(:disabled)::after {
  visibility: visible;
  opacity: 1;
  transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
  clip-path: circle(100% at 50% 50%);
}
.TransacardTeaser--barcode--action--title {
  font-size: 14px;
  line-height: 1.2;
  margin-top: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.TransacardTeaser--barcode--action--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TransacardTeaser--barcode--action--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TransacardTeaser--barcode--action--title {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TransacardTeaser--fallback {
  max-width: 270px;
  text-align: center;
}
.TransacardTeaser--fallback--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.TransacardTeaser--fallback--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.TransacardTeaser--fallback--title {
    font-size: 22px;
}
}
.TransacardTeaser--fallback--text {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.TransacardTeaser--fallback--text {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.TransacardTeaser--fallback--text {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.TransacardTeaser--fallback--text {
    line-height: 1.2;
}
}
.TransacardTeaser--fallback--action {
  margin-top: var(--spacing-32, 32px);
}
.TransacardTeaser:hover .TransacardTeaser--fallback--action::before {
  border-color: var(--button-hover-border-color);
}
.TransacardTeaser:hover .TransacardTeaser--fallback--action:not(:disabled)::after {
  visibility: visible;
  opacity: 1;
  transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
  clip-path: circle(100% at 50% 50%);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.VoucherTeaser {
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}
.VoucherTeaser--head {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  --button-color: rgba(var(--c-black), 1);
  --button-border-color: transparent;
  --button-background-color: rgba(var(--c-grey-light), 1);
  --button-hover-background-color: rgba(var(--c-grey-medium), 1);
  --button-border-radius: 0px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-64, 64px) var(--spacing-24, 24px);
}
.VoucherTeaser--head::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.VoucherTeaser--head::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.VoucherTeaser--head:hover::before {
    border-color: var(--button-hover-border-color);
}
.VoucherTeaser--head:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.VoucherTeaser--head:focus::before {
    border-color: var(--button-hover-border-color);
}
.VoucherTeaser--head:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
.VoucherTeaser--head > * {
  position: relative;
  z-index: 1;
}
.VoucherTeaser--content {
  padding: var(--spacing-24, 24px);
}
.VoucherTeaser--content > *:last-child {
  margin-bottom: 0;
}
.VoucherTeaser--code {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.VoucherTeaser--code {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.VoucherTeaser--code {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.VoucherTeaser--code {
    line-height: 1.2;
}
}
.VoucherTeaser--icon {
  flex: 0 0 auto;
  margin-bottom: 0.3em;
}
.VoucherTeaser--label {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.VoucherTeaser--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.VoucherTeaser--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.VoucherTeaser--label {
    line-height: 1.2;
}
}
.VoucherTeaser--text {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.VoucherTeaser--text {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.VoucherTeaser--text {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.VoucherTeaser--text {
    line-height: 1.2;
}
}
.VoucherTeaser--action {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.VoucherTeaser--action {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.VoucherTeaser--action {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.VoucherTeaser--action {
    line-height: 1.2;
}
}
.VoucherTeaser--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.VoucherTeaser--condition {
  font-size: 10px;
  line-height: 1.4;
  font-weight: 300;
  margin-top: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.VoucherTeaser--condition {
    font-size: 10px;
}
}
@media (min-width: 1280px) {
.VoucherTeaser--condition {
    font-size: 10px;
}
}
@media screen and (max-width: 750px) {
.VoucherTeaser--condition {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ClipboardBox {
  position: relative;
  z-index: 0;
  color: var(--button-color);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease-out;
  --button-color: rgba(var(--c-black), 1);
  --button-border-color: transparent;
  --button-background-color: rgba(var(--c-grey-light), 1);
  --button-hover-background-color: rgba(var(--c-grey-medium), 1);
  --button-border-radius: var(--border-radius-medium);
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-16, 16px);
}
.ClipboardBox::before {
  position: absolute;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  transition: border-color 0.2s ease-out;
  content: "";
  inset: 0;
}
.ClipboardBox::after {
  position: absolute;
  overflow: hidden;
  background-color: var(--button-hover-background-color);
  border: 1px solid var(--button-hover-border-color);
  border-radius: var(--button-border-radius);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
  content: "";
  clip-path: circle(0% at 50% 50%);
  inset: 0;
}
@media (hover: hover) {
.ClipboardBox:hover::before {
    border-color: var(--button-hover-border-color);
}
.ClipboardBox:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.ClipboardBox:focus::before {
    border-color: var(--button-hover-border-color);
}
.ClipboardBox:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
.ClipboardBox:disabled {
  --button-color: rgba(var(--c-grey), 1) !important;
  --button-background-color: rgba(var(--c-grey-light), 1) !important;
  --button-border-color: transparent !important;
}
.ClipboardBox > * {
  position: relative;
  z-index: 1;
}
.ClipboardBox--text {
  font-size: 12px;
  line-height: 1.4;
  flex: 1 1 auto;
  text-align: left;
}
@media (min-width: 750px) {
.ClipboardBox--text {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ClipboardBox--text {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ClipboardBox--text {
    line-height: 1.4;
}
}
.ClipboardBox--icon {
  flex: 0 0 auto;
  margin-left: auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Expand {
  position: relative;
  overflow: hidden;
}
.Expand--action {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 100px;
  align-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #fff 60%);
  height: 300px;
}
@media (min-width: 750px) {
.Expand--action {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Expand--action {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Expand--action {
    line-height: 1.4;
}
}
.Expand--button {
  display: flex;
  align-items: center;
  color: rgba(var(--c-grey), 1);
  height: 2.5rem;
}
.Expand--icon {
  margin-left: 0.5rem;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SearchField {
  position: relative;
}
.Header--search .SearchField.isActive {
  z-index: var(--z-index-search);
}
@media screen and (min-width: 750px) {
.Header--search .SearchField.isActive {
    min-width: 500px;
    max-width: 100%;
}
}
.SearchField--backdrop {
  position: fixed;
  inset: 0;
  background-color: transparent;
  transition: background-color 0.3s ease-out;
  pointer-events: none;
}
.SearchField.isActive .SearchField--backdrop {
  background-color: rgba(var(--c-black), 0.5);
  pointer-events: initial;
}
.SearchField--field {
  font-size: 16px;
  line-height: 1.4;
  /* z-index: z-index(search); */
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  padding: var(--spacing-12, 12px) var(--spacing-48, 48px) var(--spacing-12, 12px) var(--spacing-16, 16px);
  color: rgba(var(--c-grey-dark), 1);
  background: rgba(var(--c-white), 1);
  border: 2px solid transparent;
  border-radius: 48px;
  outline: none;
}
@media (min-width: 750px) {
.SearchField--field {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.SearchField--field {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.SearchField--field {
    line-height: 1.4;
}
}
.SearchField--field::-moz-placeholder {
  font-size: 14px;
  line-height: 1.2;
  color: rgba(var(--c-grey), 1);
}
.SearchField--field::placeholder {
  font-size: 14px;
  line-height: 1.2;
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.SearchField--field::-moz-placeholder {
    font-size: 14px;
}
.SearchField--field::placeholder {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.SearchField--field::-moz-placeholder {
    font-size: 14px;
}
.SearchField--field::placeholder {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.SearchField--field::-moz-placeholder {
    line-height: 1.2;
}
.SearchField--field::placeholder {
    line-height: 1.2;
}
}
.SearchField.isActive .SearchField--field {
  border-color: rgba(var(--c-black), 1);
}
.SearchField[data-size=small] .SearchField--field {
  height: 40px;
  padding: var(--spacing-8, 8px) var(--spacing-48, 48px) var(--spacing-8, 8px) var(--spacing-16, 16px);
}
.SearchField[data-color=grey-light] .SearchField--field {
  background: rgba(var(--c-grey-light), 1);
}
.SearchField--iconsWrapper {
  /* z-index: z-index(search-icon); */
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  display: flex;
  gap: var(--spacing-8, 8px);
  transform: translateY(-50%);
}
.SearchField[data-size=small] .SearchField--iconsWrapper {
  right: var(--spacing-12, 12px);
}
.SearchField--loading {
  /* z-index: z-index(search-icon); */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #777;
  border: 1px solid transparent;
  border-top-color: currentcolor;
  border-radius: 24px;
  animation: searchfield-spin 0.6s linear infinite;
}
@keyframes searchfield-spin {
to {
    transform: rotate(360deg);
}
}
.SearchField--clear {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.SearchField--clear > .Icon {
  transition: opacity 0.2s;
}
.SearchField:not(.isActive) .SearchField--clear {
  display: none;
}
.SearchField--clear:disabled:not(:focus) {
  pointer-events: none;
}
.SearchField--clear:disabled:not(:focus) > .Icon {
  opacity: 0;
}
.Icon.SearchField--icon {
  pointer-events: none;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.LiveSearch {
  position: relative;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Demo {
  min-height: 1000px;
  padding: 20px;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.NeocomProductfinder {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.NeocomProductfinder[data-compose=white] {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.NeocomProductfinder[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.NeocomProductfinder[data-compose=white] {
    margin-top: 96px;
}
}
@media screen and (min-width: 750px) {
.NeocomProductfinder[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.NeocomProductfinder[data-compose=white] {
    margin-bottom: 96px;
}
}
.NeocomProductfinder--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
.NeocomProductfinder--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
.NeocomProductfinder--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
.NeocomProductfinder--title {
    line-height: 1.2;
}
}
.NeocomProductfinder--spinner {
  --spinner-size: 20px;
  height: var(--spinner-size);
  margin-top: 1em;
  margin-bottom: 1em;
  color: rgba(var(--c-grey-dark), 1);
}
.NeocomProductfinder--widget {
  /* adds scroll offset to include title in the viewport */
}
.NeocomProductfinder--widget iframe {
  /* custom media query to match neocom iframe (600px + site-padding) */
}
@media screen and (width >= 648px) {
.NeocomProductfinder--widget iframe {
    box-sizing: content-box;
    margin-top: -100px;
    padding-top: 100px;
}
}
@media screen and (min-width: 1280px) {
.NeocomProductfinder--widget iframe {
    margin-top: -140px;
    padding-top: 140px;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.NeocomProductfinderTeaser {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}
@media screen and (min-width: 750px) {
.NeocomProductfinderTeaser {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 0.25);
}
}
@media screen and (min-width: 1920px) {
.NeocomProductfinderTeaser {
    margin-top: 16px;
}
}
@media screen and (min-width: 750px) {
.NeocomProductfinderTeaser {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 0.25);
}
}
@media screen and (min-width: 1920px) {
.NeocomProductfinderTeaser {
    margin-bottom: 16px;
}
}
.NeocomProductfinderTeaser--card {
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  transition: border-color 0.2s ease-out;
  display: flex;
  gap: var(--spacing-12, 12px);
  align-items: center;
  width: 100%;
  max-width: 628px;
  padding: var(--spacing-16, 16px);
  text-align: left;
  outline: none;
}
@media (hover: hover) {
.NeocomProductfinderTeaser--card:hover {
    border-color: rgba(var(--c-black), 1);
}
.NeocomProductfinderTeaser--card:focus {
    border-color: rgba(var(--c-black), 1);
}
}
@media (hover: hover) {
.NeocomProductfinderTeaser--card:hover .NeocomProductfinderTeaser--button::before {
    border-color: var(--button-hover-border-color);
}
.NeocomProductfinderTeaser--card:hover .NeocomProductfinderTeaser--button:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.NeocomProductfinderTeaser--card:focus .NeocomProductfinderTeaser--button::before {
    border-color: var(--button-hover-border-color);
}
.NeocomProductfinderTeaser--card:focus .NeocomProductfinderTeaser--button:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
.NeocomProductfinderTeaser--icon {
  padding: var(--spacing-8, 8px);
}
@media screen and (max-width: 580px) {
.NeocomProductfinderTeaser--icon {
    display: none;
}
}
.NeocomProductfinderTeaser--content {
  font-size: 12px;
  line-height: 1.4;
  flex: 1 1 auto;
}
@media (min-width: 750px) {
.NeocomProductfinderTeaser--content {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.NeocomProductfinderTeaser--content {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.NeocomProductfinderTeaser--content {
    line-height: 1.4;
}
}
.NeocomProductfinderTeaser--title {
  font-weight: 700;
  display: block;
}
@media screen and (max-width: 580px) {
.NeocomProductfinderTeaser--title {
    display: none;
}
}
.NeocomProductfinderTeaser--button {
  flex: 0 0 auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Overlay {
  --overlay-card-min-height: min(100%, 560px, 90vh);
  z-index: 85;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
  padding: var(--spacing-16, 16px);
  overflow: auto;
  transition: 0.2s visibility, 0.2s transform, 0.2s opacity;
  inset: 0;
  -webkit-overflow-scrolling: touch;
}
.Overlay--backdrop {
  content: "";
  position: fixed;
  background: rgba(var(--c-black), 0.6);
  inset: 0;
}
@media screen and (max-width: 750px) {
.Overlay[data-variant=heroMobile] .Overlay--backdrop {
    background: rgba(var(--c-yellow), 1);
}
}
.Overlay--card {
  position: relative;
  display: flex;
  width: 560px;
  margin: auto;
  background: rgba(var(--c-white), 1);
  border-radius: var(--border-radius-large);
  max-width: 100%;
}
[data-size=wide] .Overlay--card {
  width: 700px;
}
.Overlay--card::before {
  display: block;
  width: 0;
  padding-bottom: var(--overlay-card-min-height);
  content: "";
}
.Overlay--card--inner {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  width: 100%;
  padding: var(--spacing-24, 24px);
}
@media screen and (min-width: 750px) {
.Overlay--card--inner {
    padding: var(--spacing-32, 32px);
}
}
.Overlay--card--head {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  position: relative;
  display: flex;
  gap: var(--spacing-8, 8px);
  justify-content: space-between;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.Overlay--card--head {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.Overlay--card--head {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.Overlay--card--head {
    line-height: 1.2;
}
}
.Overlay--card--body {
  flex: 1 0 auto;
}
.Overlay--card--close {
  position: relative;
  top: -4px;
  right: -4px;
  flex: 0 0 auto;
  margin-left: auto;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.Overlay--card--close:hover {
  transform: rotate(90deg);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* stylelint-disable selector-class-pattern */
.overlay-enter-active .overlay--backdrop[data-v-9fda6f79] {
  transition: opacity 0.2s ease-out, visibility 0.2s;
  transition-delay: 0.05s;
  will-change: opacity;
}
.overlay-enter-active .overlay--card[data-v-9fda6f79] {
  transition: transform 0.2s ease-out;
  will-change: transform;
}
.overlay-leave-active .overlay--backdrop[data-v-9fda6f79] {
  transition: opacity 0.2s ease-out, visibility 0.2s;
  will-change: opacity;
}
.overlay-leave-active .overlay--card[data-v-9fda6f79] {
  transition: transform 0.2s ease-in;
  will-change: transform;
}
.overlay-enter-from .overlay--backdrop[data-v-9fda6f79],
.overlay-leave-to .overlay--backdrop[data-v-9fda6f79] {
  visibility: hidden;
  opacity: 0;
}
.overlay-enter-from .overlay--flyout[data-v-9fda6f79],
.overlay-leave-to .overlay--flyout[data-v-9fda6f79] {
  transform: translateX(100%);
}

/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
@media screen and (max-width: 750px) {
.BarcodeOverlay {
    --overlay-card-min-height: min(177%, 740px, 90vh);
}
}
.BarcodeOverlay--inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.BarcodeOverlay--points {
  font-size: 12px;
  line-height: 1.4;
}
@media (min-width: 750px) {
.BarcodeOverlay--points {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.BarcodeOverlay--points {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.BarcodeOverlay--points {
    line-height: 1.4;
}
}
.BarcodeOverlay--barcode {
  width: 200px;
  max-width: 100%;
  margin: var(--spacing-64, 64px) auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Placeholder[data-v-0eb9522d] {
  height: calc((100vw - var(--site-padding) * 2) / 3 * 4);
  overflow: hidden;
  background: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 580px) {
.Placeholder[data-v-0eb9522d] {
    height: calc((100vw - var(--site-padding)) / 2);
}
}
@media screen and (min-width: 1280px) {
.Placeholder[data-v-0eb9522d] {
    height: calc(1440px / 2);
}
}
.Placeholder[data-color="1"][data-v-0eb9522d] {
  background-color: rgba(var(--c-grey), 1);
}
.Placeholder[data-color="2"][data-v-0eb9522d] {
  background-color: rgba(var(--c-grey-dark), 1);
}
@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}
@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}
.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}
.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}
.plyr button{font:inherit;line-height:inherit;width:auto}
.plyr:focus{outline:0}
.plyr--full-ui{box-sizing:border-box}
.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}
.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}
.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}
.plyr--full-ui ::-webkit-media-text-track-container{display:none}
.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}
.plyr__captions span:empty{display:none}
@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}
@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}
.plyr--captions-active .plyr__captions{display:block}
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}
.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}
.plyr__caption div{display:inline}
.plyr__control{background:#0000;border:0;border-radius:4px;border-radius:var(--plyr-control-radius,4px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .3s ease}
.plyr__control svg{fill:currentColor;display:block;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}
.plyr__control:focus{outline:0}
.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
a.plyr__control{text-decoration:none}
.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}
.plyr--full-ui ::-webkit-media-controls{display:none}
.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}
.plyr__controls .plyr__progress__container{flex:1;min-width:0}
.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}
.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}
.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}
.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}
.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}
.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}
.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}
.plyr__menu{display:flex;position:relative}
.plyr__menu .plyr__control svg{transition:transform .3s ease}
.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}
.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}
.plyr__menu__container{animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}
.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}
.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}
.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}
.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}
.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}
.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}
.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:"";position:absolute;top:50%;transform:translateY(-50%)}
.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}
.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}
.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}
.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}
.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}
.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}
.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}
.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}
.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}
.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}
.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}
.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}
.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}
.plyr--full-ui input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}
.plyr--full-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-moz-user-select:none;user-select:none}
.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}
.plyr--full-ui input[type=range]::-ms-track{color:#0000}
.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
.plyr--full-ui input[type=range]::-ms-tooltip{display:none}
.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}
.plyr--full-ui input[type=range]:focus{outline:0}
.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}
.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}
.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}
.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}
.plyr__time+.plyr__time:before{content:"⁄";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}
@media (max-width:767px){.plyr__time+.plyr__time{display:none}}
.plyr__tooltip{background:#fff;background:var(--plyr-tooltip-background,#fff);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}
.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}
.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}
.plyr .plyr__control:hover .plyr__tooltip{z-index:3}
.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}
.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}
.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}
.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);transform:translateX(50%)}
.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}
.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}
.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}
.plyr__progress input[type=range]{position:relative;z-index:2}
.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}
.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc((var(--plyr-range-track-height, 5px)/2)*-1);padding:0;position:absolute;top:50%}
.plyr__progress__buffer::-webkit-progress-bar{background:#0000}
.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}
.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}
.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}
.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}
.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}
.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}
.plyr__volume{align-items:center;display:flex;position:relative}
.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}
.plyr--audio{display:block}
.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}
.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
.plyr--video{overflow:hidden}
.plyr--video.plyr--menu-open{overflow:visible}
.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));border-radius:inherit;height:100%;margin:auto;overflow:hidden;position:relative;width:100%}
.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}
@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}
.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}
.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}
.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}
@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}
.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}
.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}
.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}
.plyr__control--overlaid svg{left:2px;position:relative}
.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}
.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}
.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}
.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
.plyr:fullscreen video{height:100%}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}
.plyr:fullscreen.plyr--hide-controls{cursor:none}
@media (min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}
.plyr--fullscreen-fallback{background:#000;border-radius:0!important;bottom:0;height:100%;left:0;margin:0;position:fixed;right:0;top:0;width:100%;z-index:10000000}
.plyr--fullscreen-fallback video{height:100%}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}
.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}
@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}
.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}
.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}
.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}
.plyr__ads:empty:after{display:none}
.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;transform:translateY(-50%);width:3px;z-index:3}
.plyr__preview-thumb{background-color:#fff;background-color:var(--plyr-tooltip-background,#fff);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}
.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}
.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;transform:translateX(-50%);width:0;z-index:2}
.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:7px;border-radius:calc(var(--plyr-menu-radius, 8px) - 1px);overflow:hidden;position:relative;z-index:0}
.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}
.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:"";pointer-events:none}
.plyr__preview-thumb__image-container img{max-height:none;max-width:none}
.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:7px;border-bottom-left-radius:calc(var(--plyr-menu-radius, 8px) - 1px);border-bottom-right-radius:7px;border-bottom-right-radius:calc(var(--plyr-menu-radius, 8px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}
.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}
.plyr__preview-scrubbing{bottom:0;filter:blur(1px);height:100%;left:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;width:100%;z-index:1}
.plyr__preview-scrubbing--is-shown{opacity:1}
.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;-o-object-fit:contain;object-fit:contain;position:absolute;top:0;width:100%}
.plyr--no-transition{transition:none!important}
.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}
.plyr [hidden]{display:none!important}
/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
:root {
  --plyr-color-main: rgba(var(--c-yellow), 1);
}
/* stylelint-disable selector-class-pattern */
.VideoPlayer video {
  width: 100%;
}
.VideoPlayer .plyr__control--overlaid {
  color: rgba(var(--c-black), 1);
  background: rgba(var(--c-white), 1);
  opacity: 1;
}
.VideoPlayer:not(.ready) .plyr__video-embed {
  position: relative;
  aspect-ratio: 16/9;
}
/* stylelint-enable selector-class-pattern *//**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.LoginForm {
  position: relative;
}
.LoginForm--inner {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.LoginForm--inner {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1000px) {
[data-variant=main] .LoginForm--inner {
    padding: 0;
    border: none;
}
}
.LoginForm--grid {
  --row-gap: var(--spacing-24, 24px);
  --column-gap: var(--spacing-24, 24px);
  display: grid;
  grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.LoginForm--gridItemFull {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.LoginForm--gridItemFull {
    grid-column-start: auto;
    grid-column-end: span 12;
}
}
.LoginForm--title {
  margin-bottom: var(--spacing-16, 16px);
}
[data-variant=main] .LoginForm--title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
[data-variant=main] .LoginForm--title {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
[data-variant=main] .LoginForm--title {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
[data-variant=main] .LoginForm--title {
    line-height: 1.2;
}
}
[data-variant=checkout] .LoginForm--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
[data-variant=checkout] .LoginForm--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
[data-variant=checkout] .LoginForm--title {
    font-size: 22px;
}
}
.LoginForm--lead {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.LoginForm--lead {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.LoginForm--lead {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.LoginForm--lead {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.LoginForm--lead {
    margin-bottom: var(--spacing-32, 32px);
}
}
.LoginForm--reset {
  font-size: 12px;
  line-height: 1.4;
  margin-top: var(--spacing-4, 4px);
}
@media (min-width: 750px) {
.LoginForm--reset {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.LoginForm--reset {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.LoginForm--reset {
    line-height: 1.4;
}
}
.LoginForm--reset a {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.LoginForm--reset a:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.LoginForm--reset a:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.LoginForm--actionBar {
  display: flex;
  flex-direction: column;
}
.LoginForm--submit {
  margin-top: var(--spacing-8, 8px);
}
@media screen and (min-width: 1000px) {
.LoginForm--submit {
    align-self: flex-start;
    margin-top: var(--spacing-16, 16px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PasswordResetEmailForm {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 750px) {
.PasswordResetEmailForm {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
@media screen and (min-width: 1000px) {
.PasswordResetEmailForm[data-variant=main] {
    padding: 0;
    border: none;
}
}
.PasswordResetEmailForm--grid {
  --row-gap: var(--spacing-24, 24px);
  --column-gap: var(--spacing-24, 24px);
  display: grid;
  grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.PasswordResetEmailForm--gridItemFull {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.PasswordResetEmailForm--gridItemFull {
    grid-column-start: auto;
    grid-column-end: span 12;
}
}
.PasswordResetEmailForm--legend {
  margin-bottom: var(--spacing-16, 16px);
}
[data-variant=main] .PasswordResetEmailForm--legend {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
@media (min-width: 750px) {
[data-variant=main] .PasswordResetEmailForm--legend {
    font-size: calc(0.7547169811vw + 18.3396226415px);
}
}
@media (min-width: 1280px) {
[data-variant=main] .PasswordResetEmailForm--legend {
    font-size: 28px;
}
}
@media screen and (max-width: 750px) {
[data-variant=main] .PasswordResetEmailForm--legend {
    line-height: 1.2;
}
}
[data-variant=checkout] .PasswordResetEmailForm--legend {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
@media (min-width: 750px) {
[data-variant=checkout] .PasswordResetEmailForm--legend {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
[data-variant=checkout] .PasswordResetEmailForm--legend {
    font-size: 22px;
}
}
.PasswordResetEmailForm--lead {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.PasswordResetEmailForm--lead {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PasswordResetEmailForm--lead {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PasswordResetEmailForm--lead {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.PasswordResetEmailForm--lead {
    margin-bottom: var(--spacing-16, 16px);
}
}
.PasswordResetEmailForm--actionBar {
  display: flex;
}
.PasswordResetEmailForm--submit {
  flex: 1 1 100%;
}
@media screen and (min-width: 1000px) {
.PasswordResetEmailForm--submit {
    flex: 0 1 auto;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ImageForm {
  display: flex;
  gap: var(--spacing-40, 40px);
  margin-top: var(--spacing-16, 16px);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}
@media screen and (min-width: 1000px) {
.ImageForm {
    margin-top: 0;
    padding-left: var(--site-padding-reset);
    padding-right: var(--site-padding-reset);
}
}
.ImageForm--imageWrapper {
  position: relative;
  display: none;
}
@media screen and (min-width: 1000px) {
.ImageForm--imageWrapper {
    display: block;
    flex: 1 0 65%;
}
}
.ImageForm--mainWrapper {
  flex: 1 0 100%;
  margin-bottom: var(--spacing-32, 32px);
}
@media screen and (min-width: 1000px) {
.ImageForm--mainWrapper {
    flex: 1 0 calc(35% - 40px);
    margin-top: var(--spacing-56, 56px);
    margin-bottom: var(--spacing-64, 64px);
}
}
.ImageForm--mainInner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16, 16px);
}
@media screen and (min-width: 1000px) {
.ImageForm--mainInner {
    gap: var(--spacing-32, 32px);
    margin-right: var(--spacing-80, 80px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.PasswordResetPasswordForm {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: var(--spacing-40, 40px);
  margin-bottom: var(--spacing-32, 32px);
}
@media screen and (min-width: 1000px) {
.PasswordResetPasswordForm {
    margin-top: var(--spacing-96, 96px);
    margin-bottom: var(--spacing-80, 80px);
}
}
.PasswordResetPasswordForm--formInner {
  padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 750px) {
.PasswordResetPasswordForm--formInner {
    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
}
}
.PasswordResetPasswordForm--legend {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-16, 16px);
}
@media (min-width: 750px) {
.PasswordResetPasswordForm--legend {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.PasswordResetPasswordForm--legend {
    font-size: 22px;
}
}
.PasswordResetPasswordForm--grid {
  --row-gap: var(--spacing-24, 24px);
  --column-gap: var(--spacing-24, 24px);
  display: grid;
  grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.PasswordResetPasswordForm--gridItemFull {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 1001px) {
.PasswordResetPasswordForm--gridItemFull {
    grid-column-start: auto;
    grid-column-end: span 12;
}
}
.PasswordResetPasswordForm--lead {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.PasswordResetPasswordForm--lead {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.PasswordResetPasswordForm--lead {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.PasswordResetPasswordForm--lead {
    line-height: 1.2;
}
}
@media screen and (min-width: 1000px) {
.PasswordResetPasswordForm--lead {
    margin-bottom: var(--spacing-16, 16px);
}
}
.PasswordResetPasswordForm--actionBar {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-40, 40px);
}
.PasswordResetPasswordForm--submit {
  flex: 1 1 100%;
}
@media screen and (min-width: 1000px) {
.PasswordResetPasswordForm--submit {
    flex: 0 1 auto;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Dropdown[data-v-c19577fd] {
  position: relative;
  top: 0;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.InputColors--label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.InputColors--options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-24, 24px) var(--spacing-8, 8px);
}
.InputColors--options > * {
  flex: 0 0 24px;
}
.InputColors--option {
  position: relative;
  padding-bottom: var(--spacing-8, 8px);
}
.InputColors--option::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(var(--c-black), 1);
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
  content: "";
}
.InputColors--option.isActive::after {
  transform: scale(1);
}
.InputColors--input {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.InputColors--input.hasBorder {
  border: 1px solid rgba(var(--c-border-dark));
}
.InputColors--input:hover {
  transform: scale(1.15);
}
/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
[data-color=beige][data-v-bae93451] {
  background-color: beige;
}
[data-color=blue][data-v-bae93451],
[data-color=bleu][data-v-bae93451],
[data-color=blau][data-v-bae93451] {
  background-color: #00f;
}
[data-color=brown][data-v-bae93451],
[data-color=marron][data-v-bae93451],
[data-color=braun][data-v-bae93451] {
  background-color: #640;
}
[data-color=yellow][data-v-bae93451],
[data-color=jaune][data-v-bae93451],
[data-color=gelb][data-v-bae93451] {
  background-color: #ff0;
}
[data-color=grey][data-v-bae93451],
[data-color=gris][data-v-bae93451],
[data-color=grau][data-v-bae93451] {
  background-color: #4f4f4f;
}
[data-color=green][data-v-bae93451],
[data-color=vert][data-v-bae93451],
[data-color=grün][data-v-bae93451] {
  background-color: green;
}
[data-color=multicolore][data-v-bae93451],
[data-color=multicolor][data-v-bae93451] {
  background: linear-gradient(90deg, #ae2323, #fff700, #3023ae, #53a0fd, #b4ec51);
}
[data-color=olive][data-v-bae93451],
[data-color=oliv][data-v-bae93451] {
  background-color: #556b2f;
}
[data-color=orange][data-v-bae93451] {
  background-color: orange;
}
[data-color=pink][data-v-bae93451],
[data-color=rose][data-v-bae93451],
[data-color=rosa][data-v-bae93451] {
  background-color: #fc0fc0;
}
[data-color=red][data-v-bae93451],
[data-color=rouge][data-v-bae93451],
[data-color=rot][data-v-bae93451] {
  background-color: red;
}
[data-color=black][data-v-bae93451],
[data-color=noir][data-v-bae93451],
[data-color=schwarz][data-v-bae93451] {
  background-color: #000;
}
[data-color=turquoise][data-v-bae93451],
[data-color=türkis][data-v-bae93451] {
  background-color: #00ced1;
}
[data-color=violet][data-v-bae93451],
[data-color=violett][data-v-bae93451] {
  background-color: #c4c;
}
[data-color=argenté][data-v-bae93451],
[data-color=silver][data-v-bae93451],
[data-color=silber][data-v-bae93451] {
  background-color: silver;
}
[data-color=blanc][data-v-bae93451],
[data-color=white][data-v-bae93451],
[data-color=weiss][data-v-bae93451] {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
[data-color=transparent][data-v-bae93451] {
  background: radial-gradient(circle, #fff, #929292);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.InputOptionsSearch {
  width: 100%;
}
.InputOptionsSearch--field {
  margin-bottom: var(--spacing-24, 24px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* .InputRange {
} */
.InputRange--display {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-20, 20px);
}
.InputRange--value {
  font-size: 12px;
  line-height: 1.4;
  display: block;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
  color: rgba(var(--c-black), 1);
  background-color: rgba(var(--c-grey-light), 1);
  border-radius: 999px;
}
@media (min-width: 750px) {
.InputRange--value {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.InputRange--value {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.InputRange--value {
    line-height: 1.4;
}
}
.InputRange--slider {
  --track-height: 2px;
  --thumb-size: 22px;
  position: relative;
  width: 100%;
  height: var(--thumb-size);
}
.InputRange--slider::before {
  position: absolute;
  top: calc((var(--thumb-size) - var(--track-height)) / 2);
  width: 100%;
  height: var(--track-height);
  background: linear-gradient(to right, rgba(var(--c-grey-light), 1) 0%, rgba(var(--c-grey-light), 1) var(--progress-left), rgba(var(--c-black), 1) var(--progress-left), rgba(var(--c-black), 1) var(--progress-right), rgba(var(--c-grey-light), 1) var(--progress-right), rgba(var(--c-grey-light), 1) 100%);
  content: "";
  pointer-events: none;
}
.InputRange--slider > input[type=range] {
  position: absolute;
  width: 100%;
  background: none;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.InputRange--slider > input[type=range]::-webkit-slider-runnable-track, .InputRange--slider > input[type=range]::-moz-range-track {
  background: none;
  -webkit-appearance: none;
          appearance: none;
}
.InputRange--slider > input[type=range]::-webkit-slider-thumb {
  position: relative;
  display: block;
  width: var(--thumb-size);
  height: var(--thumb-size);
  background: rgba(var(--c-white), 1);
  border: 2px solid rgba(var(--c-black), 1);
  border-radius: 100%;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  pointer-events: all;
}
.InputRange--slider .InputRange--slider--min {
  clip-path: polygon(0 0, calc(var(--progress-center) + var(--thumb-size) / 2) 0, calc(var(--progress-center) + var(--thumb-size) / 2) 100%, 0 100%);
}
.InputRange--slider .InputRange--slider--max {
  clip-path: polygon(calc(var(--progress-center) - var(--thumb-size) / 2) 0, 100% 0, 100% 100%, calc(var(--progress-center) - var(--thumb-size) / 2) 100%);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.RadioTag {
  display: flex;
}
.RadioTag--input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.RadioTag--label {
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
  background-color: rgba(var(--c-grey-light), 1);
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
}
.RadioTag--input:checked + .RadioTag--label {
  background-color: rgba(var(--c-white), 1);
  border: 1px solid rgba(var(--c-black), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.RadioTagGroup {
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-4, 4px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Demo {
  min-height: 1000px;
  padding: 20px;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.TopBar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  color: rgba(var(--c-white), 1);
  background-color: rgba(var(--c-black), 1);
}
@media screen and (max-width: 750px) {
.TopBar {
    min-height: 60px;
}
}
.TopBar--inner {
  padding-left: var(--site-padding);
  padding-top: var(--spacing-10, 10px);
  padding-right: 60px;
  padding-bottom: var(--spacing-10, 10px);
}
.TopBar--content {
  font-size: 12px;
  line-height: 1.4;
  display: inline-block;
}
@media (min-width: 750px) {
.TopBar--content {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.TopBar--content {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.TopBar--content {
    line-height: 1.4;
}
}
@media screen and (min-width: 750px) {
.TopBar--content {
    font-size: 14px;
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) and (min-width: 750px) {
.TopBar--content {
    font-size: 14px;
}
}
@media screen and (min-width: 750px) and (min-width: 1280px) {
.TopBar--content {
    font-size: 14px;
}
}
@media screen and (min-width: 750px) and (max-width: 750px) {
.TopBar--content {
    line-height: 1.2;
}
}
.TopBar--close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.TopBar--close:hover {
  transform: rotate(90deg);
}
.TopBar--text {
  margin-right: var(--spacing-10, 10px);
}
.TopBar--link {
  color: rgba(var(--c-yellow), 1);
  transition: color 0.2s ease-in-out;
}
@media (hover: hover) {
.TopBar--link:hover {
    color: rgba(var(--c-yellow-light), 1);
}
.TopBar--link:focus {
    color: rgba(var(--c-yellow-light), 1);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceDropdownAction {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
  outline: none;
}
@media (min-width: 750px) {
.ServiceDropdownAction {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ServiceDropdownAction {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ServiceDropdownAction {
    line-height: 1.2;
}
}
.ServiceDropdownAction [data-shape]::before {
  transition: background-color 0.2s ease-in-out;
}
@media (hover: hover) {
.ServiceDropdownAction:hover [data-shape] {
    --c-icon-shape-color: rgba(var(--c-black), 1);
    --c-icon-path: rgba(var(--c-white), 1);
}
.ServiceDropdownAction:focus [data-shape] {
    --c-icon-shape-color: rgba(var(--c-black), 1);
    --c-icon-path: rgba(var(--c-white), 1);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ServiceDropdownExample {
  position: relative;
  padding: 40px;
}
.ServiceDropdownExample .ServiceDropdown {
  position: relative;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductInfoBox {
  display: grid;
  gap: var(--spacing-24, 24px);
  padding: var(--spacing-24, 24px);
  background: rgba(var(--c-grey-light), 1);
  border-radius: var(--border-radius-default);
}
.ProductInfoBox[data-status=success] {
  background: rgba(var(--c-signal-green-light), 1);
}
.ProductInfoBox[data-status=error] {
  background: rgba(var(--c-orange-light), 1);
}
.ProductInfoBox[data-status=info] {
  background: rgba(var(--c-grey-light), 1);
}
.ProductInfoBox--title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.ProductInfoBox--title {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductInfoBox--title {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductInfoBox--title {
    line-height: 1.2;
}
}
.ProductInfoBox--status {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
}
@media (min-width: 750px) {
.ProductInfoBox--status {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductInfoBox--status {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductInfoBox--status {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductFitFinder {
  margin: 0;
}
.ProductFitFinder--info {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: flex-start;
}
.ProductFitFinder--content {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: var(--spacing-4, 4px);
}
@media (min-width: 750px) {
.ProductFitFinder--content {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductFitFinder--content {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductFitFinder--content {
    line-height: 1.4;
}
}
.ProductFitFinder--link {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
  font-size: 12px;
  line-height: 1.4;
}
@media (hover: hover) {
.ProductFitFinder--link:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.ProductFitFinder--link:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
@media (min-width: 750px) {
.ProductFitFinder--link {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.ProductFitFinder--link {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.ProductFitFinder--link {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemCheckout {
  gap: var(--spacing-12, 12px);
}
@media screen and (min-width: 1280px) {
.ProductItemCheckout {
    gap: var(--spacing-24, 24px);
}
}
.ProductItemCheckout--product {
  position: relative;
}
@media screen and (min-width: 580px) {
.ProductItemCheckout--product {
    display: flex;
    gap: var(--spacing-8, 8px);
    align-items: flex-start;
    justify-content: space-between;
}
}
@media screen and (min-width: 1280px) {
.ProductItemCheckout--product {
    gap: var(--spacing-24, 24px);
}
}
@media screen and (min-width: 1000px) {
.ProductItemCheckout--footer {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-24, 24px);
    align-items: center;
    justify-content: space-between;
}
}
.ProductItemCheckout--quantity {
  display: flex;
  gap: var(--spacing-8, 8px);
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1000px) {
.ProductItemCheckout--quantity {
    flex-direction: row-reverse;
}
}
@media screen and (min-width: 1280px) {
.ProductItemCheckout--quantity {
    gap: var(--spacing-24, 24px);
}
}
.ProductItemCheckout--quantityToggle {
  position: relative;
  z-index: 1;
}
.ProductItemCheckout--price {
  flex-wrap: wrap;
}
@media screen and (min-width: 1000px) {
.ProductItemCheckout--price {
    justify-content: flex-end;
}
}
.ProductItemCheckout--remove {
  flex: 0 0 auto;
}
@media screen and (max-width: 1000px) {
.ProductItemCheckout--remove {
    display: none;
}
}
@media screen and (max-width: 750px) {
.ProductItemCheckout--remove {
    display: block;
}
}
@media screen and (max-width: 580px) {
.ProductItemCheckout--remove {
    display: none;
}
}
@media screen and (min-width: 580px) {
.ProductItemCheckout--removeMobile {
    display: none;
}
}
@media screen and (min-width: 750px) {
.ProductItemCheckout--removeMobile {
    display: block;
}
}
@media screen and (min-width: 1000px) {
.ProductItemCheckout--removeMobile {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemHistory--header {
  position: relative;
}
@media screen and (max-width: 750px) {
.ProductItemHistory--header {
    padding-right: var(--spacing-32, 32px);
}
}
@media screen and (min-width: 750px) {
.ProductItemHistory--header {
    display: flex;
    gap: var(--spacing-24, 24px);
    align-items: flex-start;
    justify-content: space-between;
}
}
.ProductItemHistory--footer {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-12, 12px);
  align-items: center;
  justify-content: space-between;
}
.ProductItemHistory--favouriteToggle,
.ProductItemHistory--addToCart,
.ProductItemHistory--addToCartMobile {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1000px) {
.ProductItemHistory--favouriteToggle {
    position: absolute;
    top: var(--spacing--12, -12px);
    right: var(--spacing--12, -12px);
}
}
@media screen and (max-width: 1000px) {
.ProductItemHistory--addToCart {
    display: none;
}
}
.ProductItemHistory--addToCartMobile {
  padding: var(--spacing-12, 12px);
}
@media screen and (min-width: 1000px) {
.ProductItemHistory--addToCartMobile {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemFact {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: flex-start;
  padding-top: var(--spacing-10, 10px);
  padding-bottom: var(--spacing-10, 10px);
  border-top: 1px solid rgba(var(--c-border));
}
.ProductItemFact:last-child {
  padding-bottom: 0;
}
.ProductItemFact--label {
  flex: 0 0 35%;
  max-width: 35%;
}
.ProductItemFact--body {
  flex: 1 1 auto;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemFacts {
  font-size: 14px;
  line-height: 1.2;
}
@media (min-width: 750px) {
.ProductItemFacts {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductItemFacts {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductItemFacts {
    line-height: 1.2;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
@media screen and (min-width: 750px) {
.ProductItemAction {
    position: relative;
    z-index: 0;
    color: var(--button-color);
    text-align: center;
    text-decoration: none;
    outline: none;
    transition: color 0.2s ease-out;
    padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
    --button-color: rgba(var(--c-white), 1);
    --button-background-color: rgba(var(--c-black), 1);
    --button-hover-background-color: rgba(var(--c-grey-ultradark), 1);
    font-size: 14px;
    line-height: 1.2;
    display: inline-flex;
    gap: var(--spacing-12, 12px);
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.4;
    padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
    --button-color: rgba(var(--c-black), 1);
    --button-border-color: transparent;
    --button-background-color: rgba(var(--c-grey-light), 1);
    --button-hover-background-color: rgba(var(--c-grey-medium), 1);
}
.ProductItemAction::before {
    position: absolute;
    background-color: var(--button-background-color);
    border: 1px solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    transition: border-color 0.2s ease-out;
    content: "";
    inset: 0;
}
.ProductItemAction::after {
    position: absolute;
    overflow: hidden;
    background-color: var(--button-hover-background-color);
    border: 1px solid var(--button-hover-border-color);
    border-radius: var(--button-border-radius);
    visibility: hidden;
    opacity: 0;
    transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s 0.05s ease-out, visibility 0.2s;
    content: "";
    clip-path: circle(0% at 50% 50%);
    inset: 0;
}
}
@media screen and (min-width: 750px) and (hover: hover) {
.ProductItemAction:hover::before {
    border-color: var(--button-hover-border-color);
}
.ProductItemAction:hover:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
.ProductItemAction:focus::before {
    border-color: var(--button-hover-border-color);
}
.ProductItemAction:focus:not(:disabled)::after {
    visibility: visible;
    opacity: 1;
    transition: clip-path 0.3s ease-out, transform 0.3s ease-out, opacity 0.05s ease-out, visibility 0.3s;
    clip-path: circle(100% at 50% 50%);
}
}
@media screen and (min-width: 750px) and (min-width: 750px) {
.ProductItemAction {
    font-size: 14px;
}
}
@media screen and (min-width: 750px) and (min-width: 1280px) {
.ProductItemAction {
    font-size: 14px;
}
}
@media screen and (min-width: 750px) and (max-width: 750px) {
.ProductItemAction {
    line-height: 1.2;
}
}
@media screen and (min-width: 750px) {
.ProductItemAction:disabled {
    --button-color: rgba(var(--c-grey), 1) !important;
    --button-background-color: rgba(var(--c-grey-light), 1) !important;
    --button-border-color: transparent !important;
}
}
@media screen and (min-width: 750px) and (min-width: 750px) {
.ProductItemAction {
    font-size: 12px;
}
}
@media screen and (min-width: 750px) and (min-width: 1280px) {
.ProductItemAction {
    font-size: 12px;
}
}
@media screen and (min-width: 750px) and (max-width: 750px) {
.ProductItemAction {
    line-height: 1.4;
}
}
@media screen and (max-width: 750px) {
.ProductItemAction {
    font-size: 14px;
    line-height: 1.2;
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-16, 16px) 0;
}
}
@media screen and (max-width: 750px) and (min-width: 750px) {
.ProductItemAction {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) and (min-width: 1280px) {
.ProductItemAction {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) and (max-width: 750px) {
.ProductItemAction {
    line-height: 1.2;
}
}
.ProductItemAction--label {
  position: relative;
  z-index: 1;
}
.ProductItemAction--icon {
  transition: transform 0.2s ease-in-out;
}
.ProductItemAction:hover .ProductItemAction--icon {
  transform: translateX(var(--spacing-4, 4px));
}
@media screen and (min-width: 750px) {
.ProductItemAction--icon {
    display: none;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemActions {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 750px) {
.ProductItemActions {
    padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
    background-color: rgba(var(--c-grey-light), 1);
    border-radius: var(--border-radius-medium);
}
.ProductItemActions > * + * {
    border-top: 1px solid rgba(var(--c-border));
}
}
@media screen and (min-width: 750px) {
.ProductItemActions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8, 8px);
    align-items: center;
    justify-content: flex-start;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
@media screen and (max-width: 750px) {
.ProductItemOrder .ProductItem--main {
    flex: 0 0 calc(65% - var(--spacing-12, 12px));
    max-width: calc(65% - var(--spacing-12, 12px));
}
}
.ProductItemOrder--header {
  position: relative;
}
@media screen and (min-width: 750px) {
.ProductItemOrder--header {
    display: flex;
    gap: var(--spacing-24, 24px);
    align-items: flex-start;
    justify-content: space-between;
}
}
.ProductItemOrder--qty {
  font-size: 14px;
  line-height: 1.2;
  width: 30px;
}
@media (min-width: 750px) {
.ProductItemOrder--qty {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ProductItemOrder--qty {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ProductItemOrder--qty {
    line-height: 1.2;
}
}
@media screen and (max-width: 750px) {
.ProductItemOrder--price,
  .ProductItemOrder--qty,
  .ProductItemOrder--status:not(.isCancelled) {
    display: none;
}
}
@media screen and (min-width: 750px) {
.ProductItemOrder--facts {
    display: none;
}
}
.ProductItemOrder--price {
  justify-content: flex-end;
  min-width: 90px;
  text-align: right;
}
.ProductItemOrder[data-status=CAN] .ProductItem--image,
.ProductItemOrder[data-status=CAN] .ProductItemDetails--name,
.ProductItemOrder[data-status=CAN] .ProductItemDetails--sku,
.ProductItemOrder[data-status=CAN] .ProductItemDetails--attributes,
.ProductItemOrder[data-status=CAN] .ProductItemOrder--price,
.ProductItemOrder[data-status=CAN] .ProductItemOrder--qty,
.ProductItemOrder[data-status=CAN] .ProductItemOrder--facts {
  opacity: 0.35;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemShipping--header {
  position: relative;
}
@media screen and (min-width: 750px) {
.ProductItemShipping--header {
    display: flex;
    gap: var(--spacing-24, 24px);
    align-items: flex-start;
    justify-content: space-between;
}
}
.ProductItemShipping--status[data-status=default] {
  color: rgba(var(--c-grey), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductItemWishlist--header {
  position: relative;
}
@media screen and (min-width: 750px) {
.ProductItemWishlist--header {
    display: flex;
    gap: var(--spacing-24, 24px);
    align-items: flex-start;
    justify-content: space-between;
}
}
@media screen and (min-width: 1000px) {
.ProductItemWishlist--footer {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-24, 24px);
    align-items: center;
    justify-content: space-between;
}
}
.ProductItemWishlist--actions {
  display: flex;
  gap: var(--spacing-24, 24px);
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 1000px) {
.ProductItemWishlist--addToCart {
    display: none;
}
}
.ProductItemWishlist--addToCartMobile {
  cursor: pointer;
}
@media screen and (min-width: 1000px) {
.ProductItemWishlist--addToCartMobile {
    display: none;
}
}
.ProductItemWishlist--addToCart,
.ProductItemWishlist--addToCartMobile {
  position: relative;
  z-index: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AddressOptionLabel[data-v-0b979f7a] {
  display: flex;
  gap: var(--spacing-16, 16px);
  align-items: flex-start;
  justify-content: space-between;
}
.AddressOptionLabel--title[data-v-0b979f7a] {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
@media (min-width: 750px) {
.AddressOptionLabel--title[data-v-0b979f7a] {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.AddressOptionLabel--title[data-v-0b979f7a] {
    font-size: 16px;
}
}
.AddressOptionLabel--address[data-v-0b979f7a] {
  font-size: 14px;
  line-height: 1.2;
  margin-top: var(--spacing-4, 4px);
}
@media (min-width: 750px) {
.AddressOptionLabel--address[data-v-0b979f7a] {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.AddressOptionLabel--address[data-v-0b979f7a] {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.AddressOptionLabel--address[data-v-0b979f7a] {
    line-height: 1.2;
}
}
.AddressOptionLabel--edit[data-v-0b979f7a] {
  font-size: 12px;
  line-height: 1.4;
  flex: 0 0 auto;
  color: rgba(var(--c-grey), 1);
  transition: color 0.2s ease-in-out;
}
@media (min-width: 750px) {
.AddressOptionLabel--edit[data-v-0b979f7a] {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.AddressOptionLabel--edit[data-v-0b979f7a] {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.AddressOptionLabel--edit[data-v-0b979f7a] {
    line-height: 1.4;
}
}
@media (hover: hover) {
.AddressOptionLabel--edit[data-v-0b979f7a]:hover {
    color: rgba(var(--c-black), 1);
}
.AddressOptionLabel--edit[data-v-0b979f7a]:focus {
    color: rgba(var(--c-black), 1);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.AddressOptionsInput {
  border-top: 1px solid rgba(var(--c-border));
}
.AddressOptionsInput--option {
  border-bottom: 1px solid rgba(var(--c-border));
}
.AddressOptionsInput--radioButton {
  display: none;
}
.AddressOptionsInput--label {
  position: relative;
  display: block;
  padding: var(--spacing-16, 16px) 0 var(--spacing-16, 16px) var(--spacing-40, 40px);
}
.AddressOptionsInput--label::after {
  position: absolute;
  top: 21px;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 100%;
  transition: background-color 0.2s ease-in;
  content: "";
}
.AddressOptionsInput--label::before {
  position: absolute;
  top: 16px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(var(--c-grey), 1);
  border-radius: 100%;
  transition: border-color 0.2s ease-in;
  content: "";
}
.AddressOptionsInput--label:hover {
  cursor: pointer;
}
.AddressOptionsInput--radioButton:checked + .AddressOptionsInput--label::before {
  border-color: rgba(var(--c-black), 1);
}
.AddressOptionsInput--radioButton:checked + .AddressOptionsInput--label::after {
  background-color: rgba(var(--c-black), 1);
}
.AddressOptionsInput--radioButton:disabled + .AddressOptionsInput--label {
  color: rgba(var(--c-grey), 1);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.FormBoxDelete {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-4, 4px);
  align-items: center;
  color: rgba(var(--c-grey), 1);
}
@media (min-width: 750px) {
.FormBoxDelete {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.FormBoxDelete {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.FormBoxDelete {
    line-height: 1.2;
}
}
.FormBoxDelete--icon {
  transition: transform 0.2s ease-in-out;
}
.FormBoxDelete:hover .FormBoxDelete--icon {
  transform: rotate(90deg);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
/* .NativeDropdownSelect {
} */
.NativeDropdownSelect--inner {
  position: relative;
}
.NativeDropdownSelect--label {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: var(--spacing-16, 16px);
  padding: 0 var(--spacing-4, 4px);
  color: rgba(var(--c-grey), 1);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
@media (min-width: 750px) {
.NativeDropdownSelect--label {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.NativeDropdownSelect--label {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.NativeDropdownSelect--label {
    line-height: 1.2;
}
}
[data-size=small] .NativeDropdownSelect--label {
  left: var(--spacing-12, 12px);
}
.NativeDropdownSelect--label[data-visuallyhidden=true] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.NativeDropdownSelect--select:focus ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:valid:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:has(option[value=""]:not(:checked)) ~ .NativeDropdownSelect--label {
  font-size: 12px;
  line-height: 1.4;
  top: 0;
  background-color: rgba(var(--c-white), 1);
}
@media (min-width: 750px) {
.NativeDropdownSelect--select:focus ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:valid:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:has(option[value=""]:not(:checked)) ~ .NativeDropdownSelect--label {
    font-size: 12px;
}
}
@media (min-width: 1280px) {
.NativeDropdownSelect--select:focus ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:valid:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:has(option[value=""]:not(:checked)) ~ .NativeDropdownSelect--label {
    font-size: 12px;
}
}
@media screen and (max-width: 750px) {
.NativeDropdownSelect--select:focus ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:valid:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect--select:has(option[value=""]:not(:checked)) ~ .NativeDropdownSelect--label {
    line-height: 1.4;
}
}
.NativeDropdownSelect.hasError .NativeDropdownSelect--select:focus ~ .NativeDropdownSelect--label, .NativeDropdownSelect.hasError .NativeDropdownSelect--select:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect.hasError .NativeDropdownSelect--select:valid:not([data-selected=""]) ~ .NativeDropdownSelect--label, .NativeDropdownSelect.hasError .NativeDropdownSelect--select:has(option[value=""]:not(:checked)) ~ .NativeDropdownSelect--label {
  color: rgba(var(--c-signal-red), 1);
}
.NativeDropdownSelect--select {
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
  padding: var(--spacing-16, 16px);
  background: transparent;
  border: 1px solid rgba(var(--c-border-dark));
  border-radius: var(--border-radius-xsmall);
  outline: none;
  transition: border-color 0.2s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
@media (min-width: 750px) {
.NativeDropdownSelect--select {
    font-size: 16px;
}
}
@media (min-width: 1280px) {
.NativeDropdownSelect--select {
    font-size: 16px;
}
}
@media screen and (max-width: 750px) {
.NativeDropdownSelect--select {
    line-height: 1.4;
}
}
.NativeDropdownSelect--select:focus {
  border-color: rgba(var(--c-black), 1);
}
.NativeDropdownSelect--select::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.NativeDropdownSelect--select::placeholder {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.NativeDropdownSelect--select:-webkit-autofill, .NativeDropdownSelect--select:-webkit-autofill:hover, .NativeDropdownSelect--select:-webkit-autofill:focus, .NativeDropdownSelect--select:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-white), 1) inset;
}
.NativeDropdownSelect--select.hasPlaceholder:focus::-moz-placeholder {
  opacity: 1;
}
.NativeDropdownSelect--select.hasPlaceholder:focus::placeholder {
  opacity: 1;
}
.NativeDropdownSelect.isValid .NativeDropdownSelect--select {
  background-color: rgba(var(--c-valid-form-input));
}
.NativeDropdownSelect.isValid .NativeDropdownSelect--select:-webkit-autofill, .NativeDropdownSelect.isValid .NativeDropdownSelect--select:-webkit-autofill:hover, .NativeDropdownSelect.isValid .NativeDropdownSelect--select:-webkit-autofill:focus, .NativeDropdownSelect.isValid .NativeDropdownSelect--select:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgba(var(--c-valid-form-input)) inset;
}
.NativeDropdownSelect.hasError .NativeDropdownSelect--select {
  border-color: rgba(var(--c-signal-red), 1);
}
[data-size=small] .NativeDropdownSelect--select {
  padding: var(--spacing-12, 12px);
}
[data-variant=pill] .NativeDropdownSelect--select {
  padding-left: var(--spacing-20, 20px);
  border-radius: var(--border-radius-pill);
}
[data-icon].NativeDropdownSelect--arrow {
  position: absolute;
  top: 50%;
  right: var(--spacing-16, 16px);
  transform: translateY(-50%);
  pointer-events: none;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Account {
  position: relative;
}
@media screen and (max-width: 1000px) {
.Account {
    border-bottom: 1px solid rgba(var(--c-border));
}
}
.Account[data-gradient=true]::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(var(--c-green-light), 1) 100%);
  content: "";
  pointer-events: none;
}
@media screen and (min-width: 1000px) {
.Account[data-gradient=true]::before {
    left: calc(25% - 2px);
}
}
@media screen and (min-width: 1280px) {
.Account[data-gradient=true]::before {
    left: calc((100% + var(--site-padding)) / 4);
}
}
@media screen and (min-width: 1600px) {
.Account[data-gradient=true]::before {
    left: calc(50% - (1440px + var(--site-padding)) / 4);
}
}
.Account--inner {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 32px;
}
@media screen and (min-width: 750px) {
.Account--inner {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.Account--inner {
    margin-top: 64px;
}
}
.Account--breadcrumb {
  margin-bottom: 16px;
}
@media screen and (min-width: 750px) {
.Account--breadcrumb {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 0.5);
}
}
@media screen and (min-width: 1920px) {
.Account--breadcrumb {
    margin-bottom: 32px;
}
}
@media screen and (min-width: 1000px) {
.Account--grid {
    display: grid;
    grid-gap: var(--spacing-24, 24px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    border-bottom: 1px solid rgba(var(--c-border));
}
}
.Account--navigation {
  display: none;
}
@media screen and (min-width: 1000px) {
.Account--navigation {
    display: block;
    grid-column: 1/4;
    padding-right: var(--spacing-32, 32px);
    padding-bottom: var(--spacing-32, 32px);
    border-right: 1px solid rgba(var(--c-border));
}
}
.Account--content {
  position: relative;
  padding-bottom: var(--spacing-32, 32px);
}
@media screen and (min-width: 1000px) {
.Account--content {
    grid-column: 5/13;
}
}
@media screen and (min-width: 1280px) {
.Account[data-variant=medium] .Account--content {
    grid-column: 5/12;
}
}
@media screen and (min-width: 1280px) {
.Account[data-variant=narrow] .Account--content {
    grid-column: 5/12;
}
}
@media screen and (min-width: 1440px) {
.Account[data-variant=narrow] .Account--content {
    grid-column: 5/11;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ReducedSiteFooter {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 580px) {
.ReducedSiteFooter {
    padding-right: 0;
    padding-left: 0;
}
}
.ReducedSiteFooter--section {
  border-top: 1px solid rgba(var(--c-border));
}
@media screen and (max-width: 580px) {
.ReducedSiteFooter--section {
    padding-right: var(--site-padding);
    padding-left: var(--site-padding);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ReducedHeader {
  z-index: 50;
  position: relative;
}
.ReducedHeader--inner {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-20, 20px) var(--spacing-24, 24px) var(--spacing-20, 20px) var(--spacing-16, 16px);
  background-color: rgba(var(--c-green-light), 1);
}
@media screen and (min-width: 1000px) {
.ReducedHeader--inner {
    position: relative;
    z-index: 3;
    padding: var(--spacing-24, 24px) var(--spacing-48, 48px);
}
}
.ReducedHeader--grid {
  display: grid;
  grid-template-areas: "left center right";
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
}
.ReducedHeader--logo {
  grid-area: left;
}
@media screen and (min-width: 1000px) {
.ReducedHeader--logo {
    grid-area: center;
}
}
.ReducedHeader--metaNavigation {
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  grid-area: right;
  align-items: center;
  justify-content: flex-end;
}
@media (min-width: 750px) {
.ReducedHeader--metaNavigation {
    font-size: 14px;
}
}
@media (min-width: 1280px) {
.ReducedHeader--metaNavigation {
    font-size: 14px;
}
}
@media screen and (max-width: 750px) {
.ReducedHeader--metaNavigation {
    line-height: 1.2;
}
}
.ReducedHeader--contactLink {
  position: relative;
  margin-right: var(--spacing-16, 16px);
}
.ReducedHeader--contactLink::after {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--spacing-16, 16px));
  height: 100%;
  border-left: 1px solid rgba(var(--c-black), 1);
  content: "";
}
.ReducedHeader--shoppingCartLink {
  margin-left: var(--spacing-16, 16px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.auth-body {
  margin-top: var(--spacing-32, 32px);
  margin-bottom: var(--spacing-32, 32px);
}
@media screen and (min-width: 750px) {
.auth-body {
    margin-top: var(--spacing-48, 48px);
    margin-bottom: var(--spacing-48, 48px);
}
}
@media screen and (min-width: 1000px) {
.auth-body {
    margin-top: var(--spacing-64, 64px);
    margin-bottom: var(--spacing-64, 64px);
}
}
@media screen and (min-width: 1280px) {
.auth-body {
    margin-top: var(--spacing-80, 80px);
    margin-bottom: var(--spacing-80, 80px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.LayoutCheckout {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 1;
}
.LayoutCheckout--inner {
  --row-gap: var(--spacing-24, 24px);
  --column-gap: var(--spacing-24, 24px);
  display: grid;
  grid-gap: var(--spacing-24, 24px) var(--spacing-24, 24px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media screen and (min-width: 750px) {
.LayoutCheckout--inner > * {
    padding-bottom: var(--spacing-40, 40px);
}
}
.LayoutCheckout--main {
  grid-column-start: auto;
  grid-column-end: span 12;
  padding-top: 40px;
}
@media screen and (width > 751px) {
.LayoutCheckout--main {
    grid-column-start: 1;
    grid-column-end: span 7;
}
}
@media screen and (width > 1001px) {
.LayoutCheckout--main {
    grid-column-start: 1;
    grid-column-end: span 7;
}
}
@media screen and (width > 1281px) {
.LayoutCheckout--main {
    grid-column-start: 2;
    grid-column-end: span 6;
}
}
[data-with-aside=false] .LayoutCheckout--main {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (min-width: 750px) {
.LayoutCheckout--main {
    padding-top: 100px;
}
}
.LayoutCheckout--aside {
  grid-column-start: auto;
  grid-column-end: span 12;
}
@media screen and (width > 751px) {
.LayoutCheckout--aside {
    grid-column-start: 8;
    grid-column-end: span 5;
}
}
@media screen and (width > 1001px) {
.LayoutCheckout--aside {
    grid-column-start: 9;
    grid-column-end: span 4;
}
}
@media screen and (width > 1281px) {
.LayoutCheckout--aside {
    grid-column-start: 9;
    grid-column-end: span 4;
}
}
@media screen and (min-width: 750px) {
.LayoutCheckout--aside {
    min-height: 100%;
    padding-top: 100px;
    padding-left: var(--spacing-24, 24px);
    border-left: 1px solid rgba(var(--c-border));
}
}
@media screen and (min-width: 1000px) {
.LayoutCheckout--aside {
    padding-left: var(--spacing-32, 32px);
}
}
@media screen and (max-width: 750px) {
.LayoutCheckout--aside {
    margin-left: var(--site-padding-reset);
    margin-right: var(--site-padding-reset);
    position: sticky;
    top: 0;
    order: -1;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.ProductDelighterTeaser {
  --progress-rel: calc(var(--b4760316-progress) - 0.5);
  --max-shift-y: calc(var(--b4760316-maxShiftY) * 100%);
  position: relative;
  overflow: hidden;
  background-color: rgba(var(--c-white), 1);
  z-index: 0;
  border-radius: var(--border-radius-default);
}
@media (hover: hover) {
.ProductDelighterTeaser:hover .ProductDelighterTeaser--hover {
    transform: translateY(-5px);
}
.ProductDelighterTeaser:focus .ProductDelighterTeaser--hover {
    transform: translateY(-5px);
}
}
.ProductDelighterTeaser--hover {
  transition: transform 200ms ease-in-out;
}
.ProductDelighterTeaser--link,
.ProductDelighterTeaser--imageWrapper {
  position: relative;
  z-index: -1;
  transform: rotate(calc(var(--progress-rel) * -20deg)) translateY(calc(var(--progress-rel) * var(--max-shift-y)));
  transform-origin: 50% 50%;
  will-change: transform;
}
[data-direction=right] > .ProductDelighterTeaser--link,
[data-direction=right] > .ProductDelighterTeaser--imageWrapper {
  transform: rotate(calc(var(--progress-rel) * 20deg)) translateY(calc(var(--progress-rel) * var(--max-shift-y)));
}
.ProductDelighterTeaser--imageWrapper .Image {
  transform: scale(0.7);
}
.ProductDelighterTeaser--link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
[data-theme=dario] {
  --c-border: #000;
  --c-grey-dark: #000;
}
[data-theme=dario] .Header--inner {
  background-color: #66c3d1;
}
[data-theme=dario] .layout {
  background-color: #66c3d1;
}
[data-theme=dario] .SearchField--field,
[data-theme=dario] .PictoNavigation--link::before {
  background-color: #F9C623;
}
[data-theme=dario] .CategoryTeaserCard::before {
  background-color: #66c3d1;
}
[data-theme=dario] .SearchField--field::-moz-placeholder {
  color: #000;
}
[data-theme=dario] .SearchField--field::placeholder {
  color: #000;
}
[data-theme=dario] .CategoryTeaserCard,
[data-theme=dario] .IconCards--card {
  background-color: #F9C623;
  border: 2px solid #000;
}
.ErrorPageHero {
  position: relative;
  display: flex;
  align-items: center;
  color: rgba(var(--c-white), 1);
}
.ErrorPageHero::before {
  display: block;
  width: 0;
  height: 125vw;
  max-height: 704px;
  content: "";
}
@media screen and (min-width: 750px) {
.ErrorPageHero::before {
    height: 66.66vw;
}
}
.ErrorPageHero::after {
  position: absolute;
  z-index: 0;
  display: block;
  background-color: rgba(var(--c-black), 0.25);
  content: "";
  inset: 0;
}
.ErrorPageHero--inner {
  max-width: 860px;
  max-width: calc(860px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.ErrorPageHero--background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ErrorPage--title {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
}
@media (min-width: 750px) {
.ErrorPage--title {
    font-size: calc(1.5094339623vw + 14.679245283px);
}
}
@media (min-width: 1280px) {
.ErrorPage--title {
    font-size: 34px;
}
}
.ErrorPage--text {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-top: var(--spacing-8, 8px);
}
@media (min-width: 750px) {
.ErrorPage--text {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.ErrorPage--text {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.ErrorPage--text {
    line-height: 1.4;
}
}
.ErrorPage--action {
  margin-top: var(--spacing-32, 32px);
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Box {
  max-width: 628px;
  max-width: calc(628px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
  margin-top: 64px;
  margin-bottom: 64px;
}
@media screen and (min-width: 750px) {
.Box {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.Box {
    margin-top: 128px;
}
}
@media screen and (min-width: 750px) {
.Box {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 2);
}
}
@media screen and (min-width: 1920px) {
.Box {
    margin-bottom: 128px;
}
}
.Box--inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-40, 40px) var(--spacing-24, 24px);
  text-align: center;
  border: 1px solid rgba(var(--c-border));
  border-radius: var(--border-radius-default);
}
@media screen and (min-width: 1000px) {
.Box--inner {
    padding: var(--spacing-64, 64px) var(--spacing-56, 56px);
}
}
.Box--icon {
  width: 1em;
  height: 1em;
  margin-bottom: var(--spacing-32, 32px);
  color: rgba(var(--c-signal-blue), 1);
  font-size: 80px;
}
@media screen and (min-width: 1000px) {
.Box--icon {
    margin-bottom: var(--spacing-48, 48px);
}
}
.Box--title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--spacing-24, 24px);
}
@media (min-width: 750px) {
.Box--title {
    font-size: calc(0.7547169811vw + 12.3396226415px);
}
}
@media (min-width: 1280px) {
.Box--title {
    font-size: 22px;
}
}
.Box--text {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
}
.Box--text > *:first-child {
  margin-top: 0;
}
.Box--text > *:last-child {
  margin-bottom: 0;
}
.Box--text > [data-slate-fragment] > *:first-child {
  margin-top: 0;
}
.Box--text > [data-slate-fragment] > *:last-child {
  margin-bottom: 0;
}
.Box--text .Button + .Button {
  margin-left: 16px;
}
.Box--text p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.Box--text a:not([class]),
.Box--text a[class=""] {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.Box--text a:not([class]):hover,
  .Box--text a[class=""]:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.Box--text a:not([class]):focus,
  .Box--text a[class=""]:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}
.Box--text small {
  display: inline-block;
  font-size: 0.75em;
}
.Box--text strong,
.Box--text b {
  font-weight: bold;
}
.Box--text em,
.Box--text i {
  font-style: italic;
}
@media (min-width: 750px) {
.Box--text {
    font-size: calc(0.3773584906vw + 13.1698113208px);
}
}
@media (min-width: 1280px) {
.Box--text {
    font-size: 18px;
}
}
@media screen and (max-width: 750px) {
.Box--text {
    line-height: 1.4;
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.SwitchableLink {
  margin-top: var(--spacing-16, 16px);
}
@media screen and (min-width: 750px) {
.SwitchableLink {
    margin-top: var(--spacing-24, 24px);
}
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Unimplemented[data-v-0db5e09f] {
  position: relative;
  padding: 20px;
  background-color: lightpink;
  border: 1px solid red;
  border-radius: 10px;
}
h2[data-v-0db5e09f] {
  margin-bottom: 1em;
  font-family: monospace;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.IFrame {
  width: 100%;
  min-height: 500px;
  border: none;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.dp__theme_light {
  --dp-font-family: $familyMain;
  --dp-primary-color: rgba(var(--c-yellow), 1);
  --dp-primary-text-color: rgba(var(--c-black), 1);
  --dp-input-icon-padding: 0;
}
.dp__input {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  background-color: transparent;
  border: 0;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.LiveSearch {
  position: relative;
}/**
 * https://css-tricks.com/between-the-lines/
 *
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-enable */
/* stylelint-disable block-no-empty */
/* stylelint-enable block-no-empty */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * VARIABLES
 * -------------------- */
/* --------------------
 * content-width utils
 * -------------------- */
/* --------------------
 * site-padding utils
 * -------------------- */
/* --------------------
 * layout utils
 * -------------------- */
/* ----------------
 * layout helper
 * ---------------- */
/* --------------------
 * scrollslider utils
 * -------------------- */
.Map {
  max-width: 1440px;
  max-width: calc(1440px + var(--site-padding) * 2);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  margin-right: auto;
  margin-left: auto;
}
.Map[data-compose=white] {
  margin-top: 32px;
  margin-bottom: 48px;
}
@media screen and (min-width: 750px) {
.Map[data-compose=white] {
    margin-top: calc((11.4871794872px + 2.735042735vw) * 1);
}
}
@media screen and (min-width: 1920px) {
.Map[data-compose=white] {
    margin-top: 64px;
}
}
@media screen and (min-width: 750px) {
.Map[data-compose=white] {
    margin-bottom: calc((11.4871794872px + 2.735042735vw) * 1.5);
}
}
@media screen and (min-width: 1920px) {
.Map[data-compose=white] {
    margin-bottom: 96px;
}
}
.Map--map {
  height: 400px;
}
@media screen and (min-width: 750px) {
.Map--map {
    height: 600px;
}
}
.Map--infoWindow {
  font-size: 14px;
  line-height: 1.4;
  padding: 10px;
}
@media (min-width: 750px) {
.Map--infoWindow {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.Map--infoWindow {
    font-size: 16px;
}
}
.Map--infoWindow strong {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}
@media (min-width: 750px) {
.Map--infoWindow strong {
    font-size: calc(0.3773584906vw + 11.1698113208px);
}
}
@media (min-width: 1280px) {
.Map--infoWindow strong {
    font-size: 16px;
}
}
.Map--infoWindow a {
  position: relative;
  color: rgba(var(--c-signal-blue), 1);
  text-decoration: none;
  background-image: linear-gradient(rgba(var(--c-grey), 0.4), rgba(var(--c-grey), 0.4));
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media (hover: hover) {
.Map--infoWindow a:hover {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
.Map--infoWindow a:focus {
    color: rgba(var(--c-signal-blue-dark), 1);
    background-image: linear-gradient(currentcolor, currentcolor);
}
}