@layer variables {

/*
    Inspiration:
    - https://tailwindcss.com/docs/preflight
    - https://piccalil.li/blog/a-modern-css-reset/
    - https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/
 */

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

html:focus-within {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

iframe {
    border: none;
}

/* stylelint-disable selector-no-vendor-prefix */
::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-bg);
    text-shadow: none;
}

::selection {
    background-color: var(--color-primary);
    color: var(--color-bg);
    text-shadow: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* Removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* remove margin on figure element */
figure {
    margin: 0;
}

/* Remove smooth scroll for people that prefer not to see them */
}

@layer variables {
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
}
}

@layer variables {
/* stylelint-disable-next-line import-notation */
}

@layer variables {

:root,
::before,
::after {
    --animation-duration-slow: 1s;
    --animation-duration-normal: .5s;
    --animation-duration-fast: .25s;
    --animation-duration-very-fast: .125s;

    --animation-easing-normal: ease-in-out;
    --animation-easing-ease-in: ease-in;
    --animation-easing-ease-out: ease-out;
}
}

@layer variables {

@media (prefers-reduced-motion: reduce) {
    :root,
    ::before,
    ::after {
        --animation-duration-slow: 0s;
        --animation-duration-normal: 0s;
        --animation-duration-fast: 0s;
        --animation-duration-very-fast: 0s;
    }
}
}

@layer variables {
:root,
::before,
::after {
    --aspect-ratio-auto: auto;
    --aspect-ratio-square: 1;
    --aspect-ratio-4-3: 4 / 3;
    --aspect-ratio-16-9: 16 / 9;
    --aspect-ratio-golden: 1.618 / 1;
    --aspect-ratio-3-1: 3 / 1;
    --aspect-ratio-default: var(--aspect-ratio-golden);
}
}

@layer variables {
:root,
::before,
::after {
    --border-width-l: 4px;
    --border-width-m: 2px;
    --border-width-normal: 1px;
    --border-color-default: var(--color-font-light);
}
}

@layer variables {
:root,
::before,
::after {
    --border-radius-xxxxl: 3rem;
    --border-radius-xxxl: 2rem;
    --border-radius-xxl: 1.5rem;
    --border-radius-xl: 1rem;
    --border-radius-l: .75rem;
    --border-radius-m: .5rem;
    --border-radius-normal: .25rem;
    --border-radius-s: .125rem;
    --border-radius-xs: 1px;
    --border-radius-circle: 50%;
    --border-radius-0: 0;

    --border-radius-default: var(--border-radius-normal);
}
}

@layer variables {
:root,
::before,
::after {
    --color-primary: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));
    --color-primary-o-10: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) / 10%);
    --color-primary-light: hsl(var(--color-primary-light-h) var(--color-primary-light-s) var(--color-primary-light-l));
    --color-primary-dark: hsl(var(--color-primary-dark-h) var(--color-primary-dark-s) var(--color-primary-dark-l));

    --color-secondary: hsl(var(--color-secondary-h) var(--color-secondary-s) var(--color-secondary-l));
    --color-secondary-o-10: hsl(var(--color-secondary-h) var(--color-secondary-s) var(--color-secondary-l) / 10%);
    --color-secondary-light: hsl(var(--color-secondary-light-h) var(--color-secondary-light-s) var(--color-secondary-light-l));
    --color-secondary-dark: hsl(var(--color-secondary-dark-h) var(--color-secondary-dark-s) var(--color-secondary-dark-l));

    --color-font: hsl(var(--color-font-h) var(--color-font-s) var(--color-font-l));
    --color-font-o-04: hsl(var(--color-font-h) var(--color-font-s) var(--color-font-l) / 4%);
    --color-font-o-10: hsl(var(--color-font-h) var(--color-font-s) var(--color-font-l) / 10%);
    --color-font-o-20: hsl(var(--color-font-h) var(--color-font-s) var(--color-font-l) / 20%);
    --color-font-light: hsl(var(--color-font-light-h) var(--color-font-light-s) var(--color-font-light-l));
    --color-font-dark: hsl(var(--color-font-dark-h) var(--color-font-dark-s) var(--color-font-dark-l));

    --color-bg: hsl(var(--color-bg-h) var(--color-bg-s) var(--color-bg-l));
    --color-bg-o-10: hsl(var(--color-bg-h) var(--color-bg-s) var(--color-bg-l) / 10%);
    --color-bg-o-75: hsl(var(--color-bg-h) var(--color-bg-s) var(--color-bg-l) / 75%);

    --color-success: hsl(var(--color-success-h) var(--color-success-s) var(--color-success-l));
    --color-success-darken-15: hsl(var(--color-success-h) var(--color-success-s) calc(var(--color-success-l) - 15%));
    --color-success-l-15: hsl(var(--color-success-h) var(--color-success-s) 15%);
    --color-success-o-25: hsl(var(--color-success-h) var(--color-success-s) var(--color-success-l) / 25%);

    --color-warning: hsl(var(--color-warning-h) var(--color-warning-s) var(--color-warning-l));
    --color-warning-darken-15: hsl(var(--color-warning-h) var(--color-warning-s) calc(var(--color-warning-l) - 15%));
    --color-warning-l-15: hsl(var(--color-warning-h) var(--color-warning-s) 15%);
    --color-warning-o-15: hsl(var(--color-warning-h) var(--color-warning-s) var(--color-warning-l) / 15%);

    --color-error: hsl(var(--color-error-h) var(--color-error-s) var(--color-error-l));
    --color-error-darken-15: hsl(var(--color-error-h) var(--color-error-s) calc(var(--color-error-l) - 15%));
    --color-error-l-15: hsl(var(--color-error-h) var(--color-error-s) 15%);
    --color-error-o-25: hsl(var(--color-error-h) var(--color-error-s) var(--color-error-l) / 25%);

    --color-info-h: 199deg;
    --color-info-s: 65%;
    --color-info-l: 80%;
    --color-info: hsl(var(--color-info-h) var(--color-info-s) var(--color-info-l));
    --color-info-darken-15: hsl(var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) - 15%));
    --color-info-o-25: hsl(var(--color-info-h) var(--color-info-s) var(--color-info-l) / 25%);

    --color-black-o-75: hsl(0 0% 0% / 75%);
    --color-black-o-50: hsl(0 0% 0% / 50%);
    --color-black-o-10: hsl(0 0% 0% / 10%);
    --color-black-o-05: hsl(0 0% 0% / 5%);

    --color-white: hsl(0 100% 100% / 100%);
    --color-white-o-75: hsl(0 100% 100% / 75%);

    --color-headline: var(--color-primary);

    --color-gold-h: 44deg;
    --color-gold-s: 100%;
    --color-gold-l: 50%;
    --color-gold: hsl(var(--color-gold-h) var(--color-gold-s) var(--color-gold-l) / 100%);

    --text-background-gradient: linear-gradient(
            0deg,
            rgb(0 0 0 / 75%) 0%,
            rgb(0 0 0 / 0%) 100%
    );
}
}

@layer variables {

:root,
::before,
::after {
    --content-fullwidth: 100%;
    --content-width-with-padding: calc(100% - calc(var(--content-padding-to-border) * 2));
    --content-max-width: 960px;
    --content-medium-max-width: 1200px;
    --content-wide-max-width: 1440px;
    --content-padding-to-border: var(--spacing-normal);
    --content-spacing-between-elements: var(--spacing-xl);
    --content-spacing-between-columns: var(--spacing-between-consecutive-elements-normal);
    --topbar-height-small: 54px;
    --topbar-height-medium: 64px;
    --topbar-height-large: 80px;
    --topbar-height: 0px;
    --service-nav-height: var(--spacing-xl);
    --inpage-nav-height: 0px;
}

:root:has(.inpage-nav) {
    --inpage-nav-height: var(--inpage-nav-height-closed);
}

:root:has(.topbar[logo-size="small"]) {
    --topbar-height: var(--topbar-height-small);
}

:root:has(.topbar[logo-size="medium"]) {
    --topbar-height: var(--topbar-height-medium);
}

:root:has(.topbar[logo-size="large"]) {
    --topbar-height: var(--topbar-height-large);
}
}

@layer variables {

@media screen and (min-width: 840px) {
    :root,
    ::before,
    ::after {
        --content-spacing-between-columns: var(--spacing-xl);
        --topbar-height-small: 64px;
        --topbar-height-medium: 80px;
        --topbar-height-large: 100px;
    }
}
}

@layer variables {
:root,
::before,
::after {
    --focus-outline-width: var(--spacing-2px);
    --focus-outline-offset: var(--spacing-2px);
    --focus-outline-color: var(--color-primary);
}
}

@layer variables {
:root,
::before,
::after {
    --form-width: var(--content-width-with-padding);
    --form-max-width: var(--content-max-width);

    --form-input-border-width: 1px;
    --form-input-default-border-color: var(--color-font-light);
    --form-input-hover-border-color: var(--color-font);
    --form-input-focus-border-color: var(--color-primary);
    --form-input-error-border-color: var(--color-error);
    --form-input-success-border-color: var(--color-success);
    --form-input-default-border: var(--form-input-border-width) solid var(--form-input-default-border-color);
    --form-input-hover-border: var(--form-input-border-width) solid var(--form-input-hover-border-color);
    --form-input-focus-border: var(--form-input-border-width) solid var(--form-input-focus-border-color);
    --form-input-error-border: var(--form-input-border-width) solid var(--form-input-error-border-color);
    --form-input-success-border: var(--form-input-border-width) solid var(--form-input-success-border-color);

    --form-input-border-radius: var(--border-radius-default);
    --form-input-background-color: var(--color-bg);
    --form-input-padding: var(--spacing-m) var(--spacing-s) var(--spacing-s);
    --form-input-color: var(--color-font);
    --form-input-font-family: var(--font-family-text);
    --form-input-font-size: var(--font-size-normal);
    --form-input-font-weight: var(--font-weight-text-normal);
    --form-successive-groups-distance: var(--spacing-m);
    --form-radio-and-checkbox-option-margin: var(--spacing-xs) 0;
    --form-required-suffix: "*";
    --form-require-suffix-margin: 0 0 0 var(--spacing-xxs);
    --form-placeholder-color: var(--color-font-light);
    --form-input-caret-color: var(--color-primary);
    --form-row-columns-count: 12;
}
}

@layer variables {
:root,
::before,
::after {
    --icon-size-m: var(--spacing-m);
    --icon-size-normal: var(--spacing-ms);

    --icon-accessiblity: url('../assets/icons/icon-accessibility.svg');
    --icon-account: url('../assets/icons/icon-account.svg');
    --icon-alarm: url('../assets/icons/icon-alarm.svg');
    --icon-arrow-down: url('../assets/icons/icon-arrow-down.svg');
    --icon-arrow-drop-down: url('../assets/icons/icon-arrow-drop-down.svg');
    --icon-arrow-left: url('../assets/icons/icon-arrow-left.svg');
    --icon-arrow-right: url('../assets/icons/icon-arrow-right.svg');
    --icon-arrow-up: url('../assets/icons/icon-arrow-up.svg');
    --icon-article: url('../assets/icons/icon-article.svg');
    --icon-audiotrack: url('../assets/icons/icon-audiotrack.svg');
    --icon-audiotrack-circle-filled: url('../assets/icons/icon-audiotrack-circle-filled.svg');
    --icon-bell: url('../assets/icons/icon-bell.svg');
    --icon-blockquote-round: url('../assets/icons/icon-blockquote-round.svg');
    --icon-bookmark: url('../assets/icons/icon-bookmark.svg');
    --icon-bookmark-filled: url('../assets/icons/icon-bookmark-filled.svg');
    --icon-briefcase: url('../assets/icons/icon-briefcase.svg');
    --icon-calendar-check: url('../assets/icons/icon-calendar-check.svg');
    --icon-calendar-day: url('../assets/icons/icon-calendar-day.svg');
    --icon-calendar-empty: url('../assets/icons/icon-calendar-empty.svg');
    --icon-calendar-lines: url('../assets/icons/icon-calendar-lines.svg');
    --icon-campaign: url('../assets/icons/icon-campaign.svg');
    --icon-cancel-circle-filled: url('../assets/icons/icon-cancel-circle-filled.svg');
    --icon-chart: url('../assets/icons/icon-chart.svg');
    --icon-check: url('../assets/icons/icon-check.svg');
    --icon-check-circle: url('../assets/icons/icon-check-circle.svg');
    --icon-chevron-down: url('../assets/icons/icon-chevron-down.svg');
    --icon-chevron-filled-down: url('../assets/icons/icon-chevron-filled-down.svg');
    --icon-chevron-filled-left: url('../assets/icons/icon-chevron-filled-left.svg');
    --icon-chevron-filled-right: url('../assets/icons/icon-chevron-filled-right.svg');
    --icon-chevron-filled-up: url('../assets/icons/icon-chevron-filled-up.svg');
    --icon-chevron-left: url('../assets/icons/icon-chevron-left.svg');
    --icon-chevron-right: url('../assets/icons/icon-chevron-right.svg');
    --icon-chevron-up: url('../assets/icons/icon-chevron-up.svg');
    --icon-clock-circle: url('../assets/icons/icon-clock-circle.svg');
    --icon-clock-circle-filled: url('../assets/icons/icon-clock-circle-filled.svg');
    --icon-close: url('../assets/icons/icon-close.svg');
    --icon-cloud: url('../assets/icons/icon-cloud.svg');
    --icon-coffee: url('../assets/icons/icon-coffee.svg');
    --icon-company: url('../assets/icons/icon-company.svg');
    --icon-coronavirus: url('../assets/icons/icon-coronavirus.svg');
    --icon-dashboard: url('../assets/icons/icon-dashboard.svg');
    --icon-drink: url('../assets/icons/icon-drink.svg');
    --icon-email: url('../assets/icons/icon-email.svg');
    --icon-euro: url('../assets/icons/icon-euro.svg');
    --icon-equalizer: url('../assets/icons/icon-equalizer.svg');
    --icon-equalizer-circle-filled: url('../assets/icons/icon-equalizer-circle-filled.svg');
    --icon-eye: url('../assets/icons/icon-eye.svg');
    --icon-eye-off: url('../assets/icons/icon-eye-off.svg');
    --icon-fax: url('../assets/icons/icon-fax.svg');
    --icon-file-download: url('../assets/icons/icon-file-download.svg');
    --icon-filter: url('../assets/icons/icon-filter.svg');
    --icon-flag: url('../assets/icons/icon-flag.svg');
    --icon-flower: url('../assets/icons/icon-flower.svg');
    --icon-folder: url('../assets/icons/icon-folder.svg');
    --icon-food: url('../assets/icons/icon-food.svg');
    --icon-forward: url('../assets/icons/icon-forward.svg');
    --icon-forward-circle-filled: url('../assets/icons/icon-forward-circle-filled.svg');
    --icon-globe: url('../assets/icons/icon-globe.svg');
    --icon-grid: url('../assets/icons/icon-grid.svg');
    --icon-heart: url('../assets/icons/icon-heart.svg');
    --icon-heart-stroke: url('../assets/icons/icon-heart-stroke.svg');
    --icon-home: url('../assets/icons/icon-home.svg');
    --icon-home-smooth: url('../assets/icons/icon-home-smooth.svg');
    --icon-hotel: url('../assets/icons/icon-hotel.svg');
    --icon-image: url('../assets/icons/icon-image.svg');
    --icon-image-circle-filled: url('../assets/icons/icon-image-circle-filled.svg');
    --icon-image-collection: url('../assets/icons/icon-image-collection.svg');
    --icon-image-collection-circle-filled: url('../assets/icons/icon-image-collection-circle-filled.svg');
    --icon-info: url('../assets/icons/icon-info.svg');
    --icon-link: url('../assets/icons/icon-link.svg');
    --icon-list: url('../assets/icons/icon-list.svg');
    --icon-location: url('../assets/icons/icon-location.svg');
    --icon-map: url('../assets/icons/icon-map.svg');
    --icon-message-bubble: url('../assets/icons/icon-message-bubble.svg');
    --icon-monument: url('../assets/icons/icon-monument.svg');
    --icon-new: url('../assets/icons/icon-new.svg');
    --icon-pause: url('../assets/icons/icon-pause.svg');
    --icon-pause-circle-filled: url('../assets/icons/icon-pause-circle-filled.svg');
    --icon-pending-circle-filled: url('../assets/icons/icon-pending-circle-filled.svg');
    --icon-play: url('../assets/icons/icon-play.svg');
    --icon-play-circle-filled: url('../assets/icons/icon-play-circle-filled.svg');
    --icon-play-circle: url('../assets/icons/icon-play-circle.svg');
    --icon-play-circle-filled: url('../assets/icons/icon-play-circle-filled.svg');
    --icon-prize: url('../assets/icons/icon-prize.svg');
    --icon-plus-circle: url('../assets/icons/icon-plus-circle.svg');
    --icon-question: url('../assets/icons/icon-question.svg');
    --icon-rewind: url('../assets/icons/icon-rewind.svg');
    --icon-rewind-circle-filled: url('../assets/icons/icon-rewind-circle-filled.svg');
    --icon-school: url('../assets/icons/icon-school.svg');
    --icon-science: url('../assets/icons/icon-science.svg');
    --icon-search: url('../assets/icons/icon-search.svg');
    --icon-settings: url('../assets/icons/icon-settings.svg');
    --icon-shopping-bag: url('../assets/icons/icon-shopping-bag.svg');
    --icon-shopping-cart: url('../assets/icons/icon-shopping-cart.svg');
    --icon-skip-back: url('../assets/icons/icon-skip-back.svg');
    --icon-skip-back-circle-filled: url('../assets/icons/icon-skip-back-circle-filled.svg');
    --icon-skip-next: url('../assets/icons/icon-skip-next.svg');
    --icon-skip-next-circle-filled: url('../assets/icons/icon-skip-next-circle-filled.svg');
    --icon-sm-facebook: url('../assets/icons/icon-sm-facebook.svg');
    --icon-sm-facebook-circle: url('../assets/icons/icon-sm-facebook-circle.svg');
    --icon-sm-instagram: url('../assets/icons/icon-sm-instagram.svg');
    --icon-sm-instagram-circle: url('../assets/icons/icon-sm-instagram-circle.svg');
    --icon-sm-linkedin: url('../assets/icons/icon-sm-linkedin.svg');
    --icon-sm-linkedin-circle: url('../assets/icons/icon-sm-linkedin-circle.svg');
    --icon-sm-pinterest: url('../assets/icons/icon-sm-pinterest.svg');
    --icon-sm-pinterest-circle: url('../assets/icons/icon-sm-pinterest-circle.svg');
    --icon-sm-twitter: url('../assets/icons/icon-sm-twitter.svg');
    --icon-sm-twitter-circle: url('../assets/icons/icon-sm-twitter-circle.svg');
    --icon-sm-tiktok: url('../assets/icons/icon-sm-tiktok.svg');
    --icon-sm-tiktok-circle: url('../assets/icons/icon-sm-tiktok-circle.svg');
    --icon-sm-xing: url('../assets/icons/icon-sm-xing.svg');
    --icon-sm-xing-circle: url('../assets/icons/icon-sm-xing-circle.svg');
    --icon-sm-youtube: url('../assets/icons/icon-sm-youtube.svg');
    --icon-sm-youtube-circle: url('../assets/icons/icon-sm-youtube-circle.svg');
    --icon-sports: url('../assets/icons/icon-sports.svg');
    --icon-star: url('../assets/icons/icon-star.svg');
    --icon-stop: url('../assets/icons/icon-stop.svg');
    --icon-stop-circle-filled: url('../assets/icons/icon-stop-circle-filled.svg');
    --icon-support: url('../assets/icons/icon-support.svg');
    --icon-tag: url('../assets/icons/icon-tag.svg');
    --icon-tag-filled: url('../assets/icons/icon-tag-filled.svg');
    --icon-target: url('../assets/icons/icon-target.svg');
    --icon-telephone: url('../assets/icons/icon-telephone.svg');
    --icon-thumb-up: url('../assets/icons/icon-thumb-up.svg');
    --icon-tools: url('../assets/icons/icon-tools.svg');
    --icon-tune: url('../assets/icons/icon-tune.svg');
    --icon-tune-circle-filled: url('../assets/icons/icon-tune-circle-filled.svg');
    --icon-videocam: url('../assets/icons/icon-videocam.svg');
    --icon-videocam-circle-filled: url('../assets/icons/icon-videocam-circle-filled.svg');
    --icon-volume-down: url('../assets/icons/icon-volume-down.svg');
    --icon-volume-down-circle-filled: url('../assets/icons/icon-volume-down-circle-filled.svg');
    --icon-volume-mute: url('../assets/icons/icon-volume-mute.svg');
    --icon-volume-mute-circle-filled: url('../assets/icons/icon-volume-mute-circle-filled.svg');
    --icon-volume-off: url('../assets/icons/icon-volume-off.svg');
    --icon-volume-off-circle-filled: url('../assets/icons/icon-volume-off-circle-filled.svg');
    --icon-volume-up: url('../assets/icons/icon-volume-up.svg');
    --icon-volume-up-circle-filled: url('../assets/icons/icon-volume-up-circle-filled.svg');
    --icon-warning: url('../assets/icons/icon-warning.svg');
}
}

@layer variables {
:root,
::before,
::after {
    --shadow-color: 286deg 0% 56%;
    --shadow-color-1: hsl(0 0% 0% / 5%);
    --shadow-color-2: hsl(0 0% 0% / 6%);
    --shadow-color-3: hsl(0 0% 0% / 10%);

    --shadow-s: 0 4px 5px 0 var(--shadow-color-1), 0 1px 10px 0 var(--shadow-color-2), 0 2px 4px -1px var(--shadow-color-3);
    --shadow-normal: 0 6px 10px 0 var(--shadow-color-1), 0 1px 18px 0 var(--shadow-color-2), 0 3px 5px -1px var(--shadow-color-3);
    --shadow-l: 0 12px 15px 2px var(--shadow-color-1), 0 4px 24px 4px var(--shadow-color-2), 0 9px 8px -4px var(--shadow-color-3);
    --shadow-xl: 0 16px 24px 2px var(--shadow-color-1), 0 6px 30px 6px var(--shadow-color-2), 0 12px 12px -5px var(--shadow-color-3);
;
}
}

@layer variables {

:root,
::before,
::after {
    --spacing-base: 1rem;

    --spacing-xxxxl: calc(var(--spacing-base) * 7.5);    /* 120px */
    --spacing-xxxl: calc(var(--spacing-base) * 6);       /* 96px */
    --spacing-xxl: calc(var(--spacing-base) * 4);        /* 64px */
    --spacing-xl: calc(var(--spacing-base) * 3);         /* 48px */
    --spacing-l: calc(var(--spacing-base) * 2);          /* 32px */
    --spacing-m: calc(var(--spacing-base) * 1.5);        /* 24px */
    --spacing-ms: calc(var(--spacing-base) * 1.25);      /* 20px */
    --spacing-normal: var(--spacing-base);               /* 16px */
    --spacing-s: calc(var(--spacing-base) * .5);         /* 8px */
    --spacing-xs: calc(var(--spacing-base) * .25);       /* 4px */
    --spacing-xxs: calc(var(--spacing-base) * .125);     /* 2px */
    --spacing-1px: 1px;
    --spacing-2px: 2px;

    --spacing-between-elements-normal: var(--spacing-xl);
    --spacing-between-elements-s: calc(var(--spacing-between-elements-normal) / 2);
    --spacing-between-consecutive-elements-normal: var(--spacing-l);
}
}

@layer variables {

@media screen and (min-width: 840px) {
    :root,
    ::before,
    ::after {
        --spacing-between-elements-normal: var(--spacing-xxxl);
        --spacing-between-consecutive-elements-normal: var(--spacing-xl);
    }
}
}

@layer variables {
:root,
::before,
::after {
    /* FONT SIZE*/
    --font-size-base: 1rem;                                    /* 16px */
    --font-size-xxxxl: calc(var(--font-size-base) * 3.875);    /* 62px */
    --font-size-xxxl: calc(var(--font-size-base) * 3);      /* 48px */
    --font-size-xxl: calc(var(--font-size-base) * 2.5);     /* 40px */
    --font-size-xl: calc(var(--font-size-base) * 2);        /* 32px */
    --font-size-l: calc(var(--font-size-base) * 1.75);      /* 28px */
    --font-size-m: calc(var(--font-size-base) * 1.5);       /* 24px */
    --font-size-ms: calc(var(--font-size-base) * 1.25);     /* 20px */
    --font-size-normal: calc(var(--font-size-base) * 1);    /* 16px */
    --font-size-s: calc(var(--font-size-base) * .875);      /* 14px */
    --font-size-xs: calc(var(--font-size-base) * .75);      /* 12px */
    --font-size-xxs: calc(var(--font-size-base) * .625);    /* 10px */

    /* LINE HEIGHTS */
    --line-height-l: 2;
    --line-height-m: 1.75;
    --line-height-normal: 1.5;
    --line-height-s: 1.25;
    --line-height-xs: 1.125;
    --line-height-reset: normal;
    --line-height-1: 1;

    /* LETTER SPACING */
    --letter-spacing-l: .150em;
    --letter-spacing-m: .050em;
    --letter-spacing-normal: normal;
    --letter-spacing-s: -.025em;
}
}

@layer variables {
:root,
::before,
::after {
    --z-index-content: 1;
    --z-index-pn-nav: 30;
    --z-index-top-button: 50;
    --z-index-inpage-nav: 60;
    --z-index-spinner: 75;
    --z-index-sticky-nav: 200;
    --z-index-topbar: 500;
    --z-index-nav: 1000;
    --z-index-notifications: 2000;
    --z-index-backdrop: 3000;
    --z-index-contact-box: 3500;
    --z-index-modal: 10000;
    --z-index-consent: 15000;
    --z-index-overlay: 50000;
    --z-index-important: 2147483641;
}
}

@layer variables {

:root {
    /* TOPBAR */
    --topbar-border-width: var(--border-width-m);
    --topbar-logo-size-small: 48px;
    --topbar-logo-size-medium: 64px;
    --topbar-logo-size-large: 80px;
    --topbar-service-navbar-icon-size: 1.25rem;
    --topbar-main-navbar-chevron-size: 1.25rem;
    --topbar-box-shadow: var(--shadow-l);
}
}

@layer variables {

/*
* We still use some old markup on the new theme, for example for the extensions.
* This means that we still need the "old variables" because they are used on those templates / extensions
*/

:root {
    --paragraph__family: var(--font-family-text);
    --paragraph__normal: var(--font-weight-text-normal);
    --paragraph__bold: var(--font-weight-text-bold);
    --headline__family: var(--font-family-headline);
    --headline__weight: var(--font-weight-headline);

    --bg-color: var(--color-bg);
    --font-color: var(--color-font);
    --font-color--light: var(--color-font-light);
    --font-color--dark: var(--color-font-dark);
    --primary-color: var(--color-primary);
    --primary-color--light: var(--color-primary-light);
    --primary-color--dark: var(--color-primary-dark);
    --secondary-color: var(--color-secondary);
    --secondary-color--light: var(--color-secondary-light);
    --secondary-color--dark: var(--color-secondary-dark);
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --error-color: var(--color-error);
}
}

@layer base {

.main-nav {
    --main-nav-position: fixed;
    --main-nav-top: var(--topbar-height);
    --main-nav-left: 0;
    --main-nav-width: 100%;
    --main-nav-height: calc(100% - var(--topbar-height));
    --main-nav-padding: var(--spacing-normal) var(--spacing-normal) calc(var(--service-nav-height) + var(--spacing-l)) var(--spacing-normal);
    --main-nav-display: block;
    --main-nav-transform: translateY(calc(-100% - var(--topbar-height)));
    --main-nav-opacity: 0;
    --main-nav-transition:
            transform var(--animation-duration-normal) var(--animation-easing-normal),
            opacity var(--animation-duration-normal) var(--animation-easing-normal);

    --main-nav-list-display: flex;
    --main-nav-list-flex-direction: column;
    --main-nav-list-align-items: flex-start;
    --main-nav-list-justify-content: center;
    --main-nav-list-gap: var(--spacing-l);
    --main-nav-list-list-style: none;
    --main-nav-list-margin: var(--spacing-normal) 0 0;
    --main-nav-list-padding: 0;
    --main-nav-overflow-y: auto;

    --main-nav-list-item-text-width: 100%;
    --main-nav-list-item-text-display: flex;
    --main-nav-list-item-text-align-items: center;
    --main-nav-list-item-text-justify-content: space-between;
    --main-nav-list-item-text-gap: var(--spacing-xs);

    --main-nav-link-text-decoration: none;
    --main-nav-link-font-family: var(--font-family-text);
    --main-nav-link-font-weight: var(--font-weight-text-bold);
    --main-nav-link-font-size: var(--font-size-l);
    --main-nav-link-line-height: var(--line-height-s);
    --main-nav-link-color: var(--color-bg);

    --main-nav-back-button-display: flex;
    --main-nav-back-button-padding: 0;
    --main-nav-back-button-margin: var(--spacing-normal) 0 32px;
    --main-nav-back-button-bg-color: transparent;
    --main-nav-back-button-border: none;

    --main-nav-chevron-color: var(--color-bg);
    --main-nav-chevron-icon-desktop-size: var(--font-size-ms);
    --main-nav-chevron-transition: rotate var(--animation-duration-fast) var(--animation-easing-normal);

    display: var(--main-nav-display);
    position: var(--main-nav-position);
    top: var(--main-nav-top);
    left: var(--main-nav-left);
    width: var(--main-nav-width);
    height: var(--main-nav-height);
    background-color: var(--main-nav-bg-color);
    padding: var(--main-nav-padding);
    transform: var(--main-nav-transform);
    opacity: var(--main-nav-opacity);
    transition: var(--main-nav-transition);
    z-index: -1;
    overflow-y: var(--main-nav-overflow-y);
}

.topbar[navigation-theme="light"] .main-nav {
    --main-nav-bg-color: var(--color-primary);
    --main-nav-link-color-hover: var(--color-primary-dark);
}

.topbar[navigation-theme="dark"] .main-nav {
    --main-nav-chevron-color: var(--bg-color);
    --main-nav-bg-color: var(--color-primary-dark);
    --main-nav-link-color-hover: var(--color-primary-light);
}

.topbar[open-nav] .main-nav {
    --main-nav-transform: translateX(0);
    --main-nav-opacity: 1;
}

.topbar[no-transitions] .main-nav {
    --main-nav-transition: none !important;
    --main-nav-chevron-transition: none;
}

.button.main-nav__back-button {
    display: var(--main-nav-back-button-display);
    padding: var(--main-nav-back-button-padding);
    margin: var(--main-nav-back-button-margin);
    background-color: var(--main-nav-back-button-bg-color);
    border: var(--main-nav-back-button-border);
}

.main-nav__chevron {
    display: flex;
}

.main-nav__chevron:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.main-nav__chevron .icon {
    --icon-color: var(--main-nav-chevron-color);

    transition: var(--main-nav-chevron-transition);
}

.main-nav__chevron:focus-visible .icon {
    background-color: var(--color-primary-dark);
}

.topbar[navigation-theme="dark"] .main-nav__chevron:focus-visible .icon {
    background-color: var(--color-primary-light);
}

.main-nav__list-item[is-open] > .main-nav__chevron .icon {
    rotate: -180deg;
}
}

@layer base {

@media screen and (max-width: 839px) {
    /* For accessibility we hide the content of the main-nav when not open */
    .topbar:not([open-nav]) .main-nav > * {
        display: none;
    }
}
}

@layer base {

@media (hover: hover) {
    .main-nav__chevron:hover {
        cursor: pointer;
    }

    .topbar[navigation-theme="light"] .main-nav__chevron:hover .icon {
        --icon-color: var(--color-primary-dark);
    }

    .topbar[navigation-theme="dark"] .main-nav__chevron:hover .icon {
        --icon-color: var(--color-primary-light);
    }

    .topbar[navigation-theme="light"] .main-nav__back-button:hover {
        --button-color-bg: transparent;
        --button-color-text: var(--color-primary-dark);
    }

    .topbar[navigation-theme="dark"] .main-nav__back-button:hover {
        --button-color-bg: transparent;
        --button-color-text: var(--color-primary-light);
    }

    .topbar[navigation-theme="light"] .main-nav__back-button:hover .icon {
        --icon-color: var(--color-primary-dark);
    }

    .topbar[navigation-theme="dark"] .main-nav__back-button:hover .icon {
        --icon-color: var(--color-primary-light);
    }
}
}

@layer base {

@media (hover: hover) and (min-width: 1024px) {
    .main-nav__link:hover {
        color: var(--color-primary-dark);
    }

    .main-nav__chevron:hover .icon {
        --main-nav-chevron-color: var(--color-primary-dark);
    }
}
}

@layer base {

@media screen and (min-width: 1024px) {
    .main-nav {
        --main-nav-position: absolute;
        --main-nav-top: unset;
        --main-nav-bottom: 0;
        --main-nav-left: unset;
        --main-nav-right: max(var(--spacing-normal), calc(calc(100% - var(--content-wide-max-width)) / 2));
        --main-nav-width: auto;
        --main-nav-height: auto;
        --main-nav-padding: 0;
        --main-nav-display: flex;
        --main-nav-transform: none;
        --main-nav-opacity: 1;
        --main-nav-transition: none;
        --main-nav-bg-color: transparent;
        --main-nav-z-index: 1;
        --main-nav-overflow-y: visible;

        --main-nav-list-flex-direction: row;
        --main-nav-list-padding: 0;
        --main-nav-list-position: absolute;
        --main-nav-list-bottom: 0;
        --main-nav-list-width: 100%;
        --main-nav-list-border-top: 4px solid var(--color-primary);
        --main-nav-list-bg-color: var(--color-bg);
        --main-nav-list-box-shadow: var(--shadow-normal);

        --main-nav-list-item-height: 100%;
        --main-nav-list-item-position: relative;
        --main-nav-list-item-text-gap: var(--spacing-xs);

        --main-nav-link-font-size: var(--font-size-normal);
        --main-nav-link-font-weight: var(--font-weight-text-normal);
        --main-nav-link-color: var(--color-primary);
        --main-nav-link-white-space: nowrap;
        --main-nav-link-height: 100%;
        --main-nav-link-display: flex;
        --main-nav-align-items: center;

        /*--main-nav-chevron-display: none;*/
        --main-nav-chevron-color: var(--color-primary);

        --main-nav-back-button-display: none;

        z-index: var(--main-nav-z-index);
        right: var(--main-nav-right);
        bottom: var(--main-nav-bottom);
    }

    .topbar[navigation-theme="light"] .main-nav {
        --main-nav-bg-color: var(--color-bg);
    }

    .topbar[navigation-theme="dark"] .main-nav {
        --main-nav-link-color: var(--color-bg);
        --main-nav-list-bg-color: var(--color-primary-dark);
    }

    .topbar[navigation-theme="dark"] .main-nav__list[nav-list-level="2"] {
        --main-nav-link-color: var(--color-bg);
        --main-nav-text-before-bg-color: var(--color-bg);
    }

    .topbar[navigation-theme="dark"] .main-nav__list-item[nav-item-level="2"] .main-nav__link:hover {
        --main-nav-link-color: var(--color-primary-light);
    }

    .main-nav__link {
        white-space: var(--main-nav-link-white-space);
        height: var(--main-nav-link-height);
        display: var(--main-nav-link-display);
        align-items: var(--main-nav-align-items);
    }

    .main-nav__chevron .icon {
        background-color: var(--main-nav-chevron-color);
        height: var(--main-nav-chevron-icon-desktop-size);
        width: var(--main-nav-chevron-icon-desktop-size);
    }

    .main-nav__chevron:focus-visible .icon {
        --main-nav-chevron-color: var(--color-primary-dark);
    }

    .topbar[navigation-theme="dark"] .main-nav__chevron:hover .icon {
        background-color: var(--color-primary-light);
    }

    .main-nav__list[nav-list-level="1"] {
        --main-nav-list-margin: 0;
        --main-nav-list-gap: var(--spacing-l);
        --main-nav-list-height: calc(var(--spacing-l) + var(--spacing-normal));

        height: var(--main-nav-list-height);
    }

    .topbar[logo-size="small"] .main-nav__list[nav-list-level="1"] {
        --main-nav-list-height: var(--spacing-l);

        height: var(--main-nav-list-height);
    }

    .main-nav__list-item {
        position: var(--main-nav-list-item-position);
        height: var(--main-nav-list-item-height);
    }

    .main-nav__list[nav-list-level="2"] .main-nav__link {
        /*font-size: 50px;*/
    }

    .main-nav__list[nav-list-level="2"] .main-nav__text {
        --main-nav-level-2-list-item-font-size: var(--font-size-s);

        display: var(--main-nav-text-display);
        align-items: var(--main-nav-text-align-items);
        gap: var(--main-nav-text-gap);
        padding: var(--main-nav-text-padding);
    }
}
}

@layer base {

.main-nav__list[nav-list-level="1"] {
    --main-nav-level-1-list-item-display: grid;
    --main-nav-level-1-list-item-grid-template-columns: 1fr auto;

    --main-nav-level-1-link-line-height: 1.25;

    display: var(--main-nav-list-display);
    flex-direction: var(--main-nav-list-flex-direction);
    align-items: var(--main-nav-list-align-items);
    justify-content: var(--main-nav-list-justify-content);
    gap: var(--main-nav-list-gap);
    list-style: var(--main-nav-list-list-style);
    margin: var(--main-nav-list-margin);
    padding: var(--main-nav-list-padding);
}

.main-nav__list-item {
    width: var(--main-nav-list-item-text-width);
    display: var(--main-nav-level-1-list-item-display);
    grid-template-columns: var(--main-nav-level-1-list-item-grid-template-columns);
    align-items: var(--main-nav-list-item-text-align-items);
    justify-content: var(--main-nav-list-item-text-justify-content);
    gap: var(--main-nav-list-item-text-gap);
}

.main-nav__link[aria-current="page"] {
    color: var(--main-nav-link-color-hover) !important;
}

.main-nav__link {
    -webkit-text-decoration: var(--main-nav-link-text-decoration);
            text-decoration: var(--main-nav-link-text-decoration);
    font-family: var(--main-nav-link-font-family);
    font-weight: var(--main-nav-link-font-weight);
    font-size: var(--main-nav-link-font-size);
    line-height: var(--main-nav-level-1-link-line-height);
    color: var(--main-nav-link-color);
}

.main-nav__link:focus-visible {
    outline-color: var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.topbar[navigation-theme="dark"] .main-nav__link:focus-visible {
    color: var(--main-nav-link-color-hover);
}
}

@layer base {

@media (hover: hover) {
    a.main-nav__link:hover {
        color: var(--main-nav-link-color-hover) !important;
    }
}
}

@layer base {

.main-nav__list[nav-list-level="2"] {
    --main-nav-level-2-list-margin: var(--spacing-normal) 0 0;
    --main-nav-level-2-list-padding: 0 0 var(--spacing-m) var(--spacing-m);
    --main-nav-level-2-list-width: 100%;
    --main-nav-level-2-list-gap: var(--spacing-m);

    --main-nav-level-2-list-item-display: none;
    --main-nav-level-2-list-item-grid-column: 1 / -1;
    --main-nav-level-2-list-item-grid-template-columns: 1fr auto;
    --main-nav-level-2-list-item-font-size: var(--font-size-m);

    --main-nav-level-2-link-line-height: .875;

    display: var(--main-nav-level-2-list-item-display);
    grid-column: var(--main-nav-level-2-list-item-grid-column);
    gap: var(--main-nav-level-2-list-gap);
    list-style: var(--main-nav-list-list-style);
    margin: var(--main-nav-level-2-list-margin);
    padding: var(--main-nav-level-2-list-padding);
    width: var(--main-nav-level-2-list-width);
}

.main-nav__list-item[is-open] > .main-nav__list[nav-list-level="2"] {
    --main-nav-level-2-list-item-display: grid;
}

.main-nav__list-item[nav-item-level="2"] .main-nav__link {
    line-height: var(--main-nav-level-2-link-line-height);
}

.main-nav__list-item[nav-item-level="2"] .main-nav__text {
    font-size: var(--main-nav-level-2-list-item-font-size);
}
}

@layer base {

@media screen and (min-width: 1024px) {
    .main-nav__list[nav-list-level="2"] {
        --main-nav-level-2-list-padding: var(--spacing-normal) var(--spacing-normal) var(--spacing-normal) var(--spacing-m);
        --main-nav-level-2-list-column-count: 2;
        --main-nav-level-2-list-gap: var(--spacing-normal);
        --main-nav-level-2-border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
        --main-nav-level-2-position: absolute;
        --main-nav-level-2-list-item-grid-template-columns: 1fr var(--main-nav-chevron-icon-desktop-size);

        --main-nav-level-2-list-width: fit-content;
        --main-nav-level-2-list-left: 0;
        --main-nav-level-2-list-transform: translate(-1.5rem, 100%);

        --main-nav-link-color: var(--color-primary);

        --main-nav-text-display: flex;
        --main-nav-text-align-items: center;
        --main-nav-text-gap: var(--spacing-s);
        --main-nav-text-padding: var(--spacing-xs) 0;

        --main-nav-text-before-size: var(--font-size-normal);
        --main-nav-text-before-bg-color: var(--color-font);
        --main-nav-text-before-display: block;
        --main-nav-text-before-icon: var(--icon-chevron-right);

        position: var(--main-nav-level-2-position);
        left: var(--main-nav-level-2-list-left);
        bottom: var(--main-nav-list-bottom);
        transform: var(--main-nav-level-2-list-transform);
        border-top: var(--main-nav-list-border-top);
        background-color: var(--main-nav-list-bg-color);
        box-shadow: var(--main-nav-list-box-shadow);
        -moz-column-count: var(--main-nav-level-2-list-column-count);
             column-count: var(--main-nav-level-2-list-column-count);
        -moz-column-gap: var(--main-nav-level-2-list-gap);
             column-gap: var(--main-nav-level-2-list-gap);
        border-radius: var(--main-nav-level-2-border-radius);
    }

    .main-nav__list-item[nav-item-level="1"]:last-child .main-nav__list[nav-list-level="2"] {
        --main-nav-level-2-list-left: auto;
        --main-nav-level-2-list-right: 0;
        --main-nav-level-2-list-transform: translate(0, 100%);

        right: var(--main-nav-level-2-list-right);
    }
}
}

@layer base {

.main-nav__list[nav-list-level="3"] {
    --main-nav-level-3-list-margin: var(--spacing-normal) 0 0;
    --main-nav-level-3-list-padding: 0 0 var(--spacing-m) var(--spacing-m);
    --main-nav-level-3-list-gap: var(--spacing-normal);

    --main-nav-level-3-list-item-display: none;
    --main-nav-level-3-list-item-grid-column: 1 / -1;
    --main-nav-level-3-list-item-font-size: var(--font-size-ms);

    display: var(--main-nav-level-3-list-item-display);
    grid-column: var(--main-nav-level-3-list-item-grid-column);
    list-style: var(--main-nav-list-list-style);
    gap: var(--main-nav-level-3-list-gap);
    margin: var(--main-nav-level-3-list-margin);
    padding: var(--main-nav-level-3-list-padding);
    width: 100%;
}

.main-nav__list-item[is-open] > .main-nav__list[nav-list-level="3"] {
    --main-nav-level-3-list-item-display: grid;
}

.main-nav__list-item[nav-item-level="3"] .main-nav__text {
    font-size: var(--main-nav-level-3-list-item-font-size);
}
}

@layer base {

@media screen and (min-width: 1024px) {
    .main-nav__list[nav-list-level="3"] {
        --main-nav-level-3-list-item-font-size: var(--font-size-s);
        --main-nav-level-3-list-padding: 0 0 var(--spacing-s) var(--spacing-normal);
        --main-nav-level-3-list-margin: var(--spacing-s) 0 0;
        --main-nav-level-3-list-gap: var(--spacing-normal);
    }
}
}

@layer base {

.service-nav {
    --service-nav-opacity: 0;
    --service-nav-position: fixed;
    --service-nav-bottom: 0;
    --service-nav-left: var(--spacing-normal);
    --service-nav-padding: 0;
    --service-nav-border-top: 1px solid var(--color-white-o-75);
    --service-nav-width: calc(100% - var(--spacing-l));
    --service-nav-display: flex;
    --service-nav-align-items: center;
    --service-nav-justify-content: flex-start;
    --service-nav-gap: var(--spacing-normal);
    --service-nav-transform: translateY(-100vh);
    --service-nav-pointer-events: none;
    --service-nav-transition:
            transform var(--animation-duration-normal) var(--animation-easing-normal),
            opacity var(--animation-duration-normal) var(--animation-easing-normal);

    --service-nav-link-font-family: var(--font-family-text);
    --service-nav-link-font-size: var(--font-size-normal);
    --service-nav-link-text-decoration: none;
    --service-nav-link-color: var(--color-bg);

    position: var(--service-nav-position);
    height: var(--service-nav-height);
    bottom: var(--service-nav-bottom);
    left: var(--service-nav-left);
    padding: var(--service-nav-padding);
    border-top: var(--service-nav-border-top);
    background: var(--service-nav-background-color);
    width: var(--service-nav-width);
    display: var(--service-nav-display);
    align-items: var(--service-nav-align-items);
    justify-content: var(--service-nav-justify-content);
    gap: var(--service-nav-gap);
    opacity: var(--service-nav-opacity);
    transform: var(--service-nav-transform);
    transition: var(--service-nav-transition);
    pointer-events: var(--service-nav-pointer-events);
}

.topbar[navigation-theme="light"] .service-nav {
    --service-nav-background-color: var(--color-primary);
    --service-nav-link-color-active: var(--color-primary-dark);
}

.topbar[navigation-theme="dark"] .service-nav {
    --service-nav-background-color: var(--color-primary-dark);
    --service-nav-link-color-active: var(--color-primary-light);
}

.topbar[no-transitions] .service-nav {
    --service-nav-transition: none !important;
}

.service-nav__link {
    font-family: var(--service-nav-link-font-family);
    font-size: var(--service-nav-link-font-size);
    -webkit-text-decoration: var(--service-nav-link-text-decoration);
            text-decoration: var(--service-nav-link-text-decoration);
    color: var(--service-nav-link-color);
}

.topbar[open-nav] .service-nav {
    --service-nav-opacity: 1;
    --service-nav-pointer-events: all;
    --service-nav-transform: translateY(0);
    --service-nav-transition:
            transform var(--animation-duration-normal) var(--animation-easing-normal),
            opacity var(--animation-duration-normal) var(--animation-easing-normal) .5s;
}
}

@layer base {

@media screen and (max-width: 1023px) {
    /* For accessibility we hide the content of the service-nav when not open */
    .topbar:not([open-nav]) .service-nav > * {
        display: none;
    }
}
}

@layer base {

@media screen and (min-width: 1024px) {
    .service-nav {
        --service-nav-display: none;
    }
}
}

@layer base {

@media (hover: hover) {
    a.service-nav__link:hover {
        color: var(--service-nav-link-color-active) !important;
    }
}
}

@layer base {

.checkbox {
    --checkbox-appearance: none;
    --checkbox-display: block;
    --checkbox-size: var(--form-input-font-size);
    --checkbox-background-color: var(--form-input-background-color);
    --checkbox-border-width: var(--border-width-m);
    --checkbox-border-color: var(--color-font);
    --checkbox-border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    --checkbox-border-radius: var(--border-radius-s);
    --checkbox-position: relative;

    --checkbox-check-size: var(--checkbox-size);
    --checkbox-check-background-color: var(--color-bg);
    --checkbox-check-position: absolute;
    --checkbox-check-top: calc(var(--checkbox-border-width) * -1);
    --checkbox-check-left: calc(var(--checkbox-border-width) * -1);

    appearance: var(--checkbox-appearance);
    -webkit-appearance: var(--checkbox-appearance);
    -moz-appearance: var(--checkbox-appearance);
    display: var(--checkbox-display);
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    background-color: var(--checkbox-background-color);
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    position: var(--checkbox-position);
}

.checkbox:checked {
    --checkbox-border-color: var(--color-primary);
    --checkbox-background-color: var(--color-primary);
}

.checkbox:checked::after {
    content: "";
    display: block;
    position: var(--checkbox-check-position);
    top: var(--checkbox-check-top);
    left: var(--checkbox-check-left);
    height: var(--checkbox-check-size);
    width: var(--checkbox-check-size);
    background-color: var(--checkbox-check-background-color);
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-check);
    -webkit-mask-image: var(--icon-check);
}

.checkbox:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.checkbox:disabled {
    --checkbox-border-color: var(--color-font-light);

    pointer-events: none;
}

.checkbox:checked:disabled {
    --checkbox-background-color: var(--color-font-light);
}

.input-group.input-group--has-error .checkbox {
    --checkbox-border-color: var(--color-error);
    --checkbox-background-color: var(--color-error-o-25);
}

.input-group.input-group--has-error .checkbox:checked {
    --checkbox-background-color: var(--color-error);
}

.input-group.input-group--has-success .checkbox {
    --checkbox-border-color: var(--color-success);
    --checkbox-background-color: var(--color-success-o-25);
}

.input-group.input-group--has-success .checkbox:checked {
    --checkbox-border-color: var(--color-success);
    --checkbox-background-color: var(--color-success);
}
}

@layer base {

@media (hover: hover) {
    .checkbox:hover,
    .checkbox-group:hover .checkbox {
        --checkbox-border-color: var(--color-primary);

        cursor: pointer;
    }

    .checkbox:checked:hover {
        --checkbox-border-color: var(--color-primary-light);
        --checkbox-background-color: var(--color-primary-light);
    }
}
}

@layer base {

.checkbox-group {
    --checkbox-group-display: grid;
    --checkbox-group-grid-template-columns: auto 1fr;
    --checkbox-group-grid-gap: 0 var(--spacing-s);

    --checkbox-group-label-font-family: var(--form-input-font-family);
    --checkbox-group-label-font-size: var(--form-input-font-size);
    --checkbox-group-label-font-weight: var(--form-input-font-weight);
    --checkbox-group-label-color: var(--form-input-color);
    --checkbox-group-label-padding: 0 calc(var(--input-group-icon-size) + var(--spacing-normal)) 0 0;
    --checkbox-group-label-word-break: break-word;

    --checkbox-group-description-column: 2;

    --checkbox-group-error-column: 2;
    --checkbox-group-error-padding: 0;

    --multi-check-group-row-margin: var(--form-radio-and-checkbox-option-margin) 0;


    display: var(--checkbox-group-display);
    grid-template-columns: var(--checkbox-group-grid-template-columns);
    grid-gap: var(--checkbox-group-grid-gap);
}

.multi-checkbox-group .checkbox-group {
    margin: var(--multi-check-group-row-margin);
}

.input-group.checkbox-group::after,
.input-group.multi-checkbox-group::after {
    --input-group-icon-display: none;
    --input-group-icon-top: 0;
}

.checkbox-group__label {
    font-family: var(--checkbox-group-label-font-family);
    font-size: var(--checkbox-group-label-font-size);
    font-weight: var(--checkbox-group-label-font-weight);
    color: var(--checkbox-group-label-color);
    padding: var(--checkbox-group-label-padding);
    word-break: var(--checkbox-group-label-word-break);
}

.input-group--disabled .checkbox-group__label {
    --checkbox-group-label-color: var(--color-font-light);

    pointer-events: none;
}
}

@layer base {

@media (hover: hover) {
    .checkbox-group__label:hover {
        cursor: pointer;
    }
}
}

@layer base {

.fieldset {
    --fieldset-padding: var(--spacing-normal);
    --fieldset-border-color: var(--form-input-default-border-color);
    --fieldset-focus-border-color: var(--form-input-focus-border-color);
    --fieldset-border-width: 1px;
    --fieldset-border-radius: var(--form-input-border-radius);
    --fieldset-margin-top: 0;

    --fieldset-legend-color: var(--form-input-color);
    --fieldset-legend-font-family: var(--form-input-font-family);
    --fieldset-legend-font-size: var(--form-input-font-size);
    --fieldset-legend-font-weight: var(--form-input-font-weight);
    --fieldset-legend-padding: 0 var(--spacing-s);

    padding: var(--fieldset-padding);
    border: var(--fieldset-border-width) solid var(--fieldset-border-color);
    border-radius: var(--fieldset-border-radius);
    margin-top: var(--fieldset-margin-top);
}

:is(.input-group, .form__row, input[hidden], .fieldset) + .fieldset {
    margin-top: var(--form-successive-groups-distance);
}

.fieldset--disabled {
    --fieldset-legend-color: var(--color-font-light);
}

.input-group + .fieldset {
    --fieldset-margin-top: var(--form-successive-groups-distance);
}

.fieldset:focus-within {
    --fieldset-border-color: var(--fieldset-focus-border-color);
    --fieldset-legend-color: var(--fieldset-focus-border-color);
}

.fieldset__legend {
    color: var(--fieldset-legend-color);
    font-family: var(--fieldset-legend-font-family);
    font-size: var(--fieldset-legend-font-size);
    font-weight: var(--fieldset-legend-font-weight);
    padding: var(--fieldset-legend-padding);
}
}

@layer base {

.form {
    --form-font-family: var(--font-family-text);
    --form-font-size: var(--font-size-normal);
    --form-font-weight: var(--font-weight-text-normal);
    --form-line-height: var(--line-height-reset);
    --form-margin: var(--spacing-between-elements-normal) auto 0;

    width: var(--form-width);
    max-width: var(--form-max-width);
    margin: var(--form-margin);
    font-family: var(--form-font-family);
    font-size: var(--form-font-size);
    font-weight: var(--form-font-weight);
    line-height: var(--form-line-height);
}

.form:first-child {
    --form-margin: 0 auto;
}

.form-progress + .form {
    margin-top: var(--spacing-xl);
}

.form__error {
    --form-error-order: 20;
    --form-error-color: var(--color-error);
    --form-error-padding: 0 var(--spacing-xs);
    --form-error-font-size: var(--font-size-s);
    --form-error-display: none;
    --form-error-column: 1 / -1;
    --form-error-margin: var(--spacing-s) 0 0;

    display: var(--form-error-display);
    order: var(--form-error-order);
    color: var(--form-error-color);
    padding: var(--form-error-padding);
    font-size: var(--form-error-font-size);
    grid-column: var(--form-error-column);
    margin: var(--form-error-margin);
}

.input-description ~ .form__error {
    --form-error-margin: 0;
}

.checkbox-group .form__error {
    --form-error-padding: 0 var(--spacing-xs) 0 var(--spacing-l);
}

.input-group--toggle .form__error {
    --form-error-padding: 0 var(--spacing-xs) 0 calc(var(--spacing-l) + calc(var(--spacing-normal) * .75));
}

.form__error--after-group {
    --form-error-padding: 0 var(--spacing-s) 0 calc(var(--spacing-m) + 3px);
}

.input-group.input-group--has-error .form__error {
    --form-error-display: block;
}

.form__error--checkbox-group {
    --form-error-padding: 0;

    grid-column: var(--checkbox-group-error-column);
}

.form__error--toggle-group {
    --form-error-padding: 0;

    grid-column: var(--toggle-group-error-column);
}
}

@layer base {

.form-navigation {
   --form-navigation-display: flex;
   --form-navigation-flex-direction: column-reverse;
   --form-navigation-gap: var(--spacing-normal);
   --form-navigation-margin: var(--spacing-m) 0;
   --form-navigation-justify-content: flex-start;

   display: var(--form-navigation-display);
   flex-direction: var(--form-navigation-flex-direction);
   gap: var(--form-navigation-gap);
   margin: var(--form-navigation-margin);
   justify-content: var(--form-navigation-justify-content);
}

.button.form-navigation__button {
   width: 100%;
}
}

@layer base {

@media screen and (min-width: 480px) {
   .form-navigation {
      --form-navigation-flex-direction: row-reverse;
      --form-navigation-justify-content: space-between;
   }

   .button.form-navigation__button {
      width: inherit;
   }
}
}

@layer base {

.form__row {
    --form-row-display: grid;
    --form-row-grid-template-columns: repeat(var(--form-row-columns-count), 1fr);
    --form-row-gap: var(--form-successive-groups-distance) var(--spacing-normal);
    --form-row-padding-top: 0;
    --form-row-align-items: baseline;

    display: var(--form-row-display);
    grid-template-columns: var(--form-row-grid-template-columns);
    grid-gap: var(--form-row-gap);
    padding-top: var(--form-row-padding-top);
    align-items: var(--form-row-align-items);
}

.input-group + .form__row {
    margin-top: var(--spacing-normal);
}

.form__row + .form__row {
    margin-top: var(--spacing-m);
}
}

@layer base {

.form-progress {
    --form-progress-display: flex;
    --form-progress-display-direction: column;
    --form-progress-gap: var(--spacing-normal);
    --form-progress-justify-content: flex-start;
    --form-progress-align-items: flex-start;
    --form-progress-margin: 0 auto;
    --form-progress-padding: var(--spacing-m) 0;
    --form-progress-width: var(--form-width);
    --form-progress-max-width: var(--form-max-width);
    --form-progress-space-between-items: var(--spacing-normal);
    --form-progress-background-color: var(--color-bg);
    --form-progress-background-position: sticky;
    --form-progress-background-top: 0;
    --form-progress-z-index: var(--z-index-pn-nav);

    --form-progress-item-size: var(--font-size-l);
    --form-progress-item-font-size: var(--font-size-normal);
    --form-progress-item-line-height: var(--form-progress-item-size);
    --form-progress-item-border-width: var(--border-width-m);
    --form-progress-item-border-color: var(--color-font-light);
    --form-progress-item-background-color: var(--color-white);
    --form-progress-item-font-color: var(--color-font-light);

    --form-progress-item-active-background-color: var(--color-primary);
    --form-progress-item-active-font-color: var(--color-bg);

    --form-progress-item-completed-background-color: var(--color-primary-o-10);
    --form-progress-item-completed-font-color: var(--color-primary);

    --form-progress-bar-width: var(--border-width-m);
    --form-progress-bar-color: var(--color-font-light);

    width: var(--form-progress-width);
    max-width: var(--form-progress-max-width);
    display: var(--form-progress-display);
    flex-direction: var(--form-progress-display-direction);
    gap: var(--form-progress-gap);
    margin: var(--form-progress-margin);
    padding: var(--form-progress-padding);
    justify-content: var(--form-progress-justify-content);
    align-items: var(--form-progress-align-items);
    background-color: var(--form-progress-background-color);
    position: var(--form-progress-background-position);
    top: var(--form-progress-background-top);
    z-index: var(--form-progress-z-index);
}

.form-progress-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    list-style:none;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.form-progress__headline {
    margin-bottom: 0;
}

.form-progress__item {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    margin-right: var(--form-progress-space-between-items);
}

.form-progress__index {
    width: var(--form-progress-item-size);
    height: var(--form-progress-item-size);
    font-size: var(--form-progress-item-font-size);
    line-height: var(--form-progress-item-line-height);
    border-radius: 50%;
    text-align: center;
    border: var(--form-progress-item-border-width) solid var(--form-progress-item-border-color);
    color: var(--form-progress-item-font-color);
    box-sizing: content-box;
}

.form-progress__item[completed] .form-progress__index {
    --form-progress-item-border-color: var(--color-primary);

    background-color: var(--form-progress-item-completed-background-color);
    color: var(--form-progress-item-completed-font-color);
}

.form-progress__item[active] .form-progress__index {
    --form-progress-item-border-color: var(--color-primary);

    background-color: var(--form-progress-item-active-background-color);
    color: var(--form-progress-item-active-font-color);
}

.form-progress__item:not(:first-child) {
    margin-left: var(--form-progress-space-between-items);
}

.form-progress__item:not(:first-child)::after {
    content: "";
    width: calc(var(--form-progress-space-between-items) * 2);
    height: 1px;
    position: absolute;
    right: 100%;
    top: 50%;
    border: 1px solid var(--form-progress-bar-color);
}

.form-progress__item[completed] + .form-progress__item::after {
    --form-progress-bar-color: var(--color-primary);

    background: var(--color-primary);
}
}

@layer base {

@media screen and (min-width: 840px) {
    .form-progress {
        --form-progress-space-between-items: var(--spacing-m);
        --form-progress-background-position: relative;
    }
}
}

@layer base {

.input {
    --input-position: relative;
    --input-width: 100%;
    --input-border: var(--form-input-default-border);
    --input-border-radius: var(--form-input-border-radius);
    --input-background-color: var(--form-input-background-color);
    --input-padding: var(--form-input-padding);
    --input-color: var(--form-input-color);
    --input-font-family: var(--form-input-font-family);
    --input-font-size: var(--form-input-font-size);
    --input-font-weight: var(--form-input-font-weight);

    --input-placeholder-color: var(--form-placeholder-color);

    --input-focus-caret-color: var(--form-input-caret-color);

    position: var(--input-position);
    width: var(--input-width);
    border-radius: var(--input-border-radius);
    border: var(--input-border);
    background-color: var(--input-background-color);
    padding: var(--input-padding);
    color: var(--input-color);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
}

.input:focus-visible {
    border: var(--form-input-focus-border);
    outline: var(--form-input-focus-border);
    caret-color: var(--input-focus-caret-color);
}

.input[disabled] {
    --input-color: var(--color-font-light);
    --input-border-color: var(--color-font-light);

    pointer-events: none;
}

.input-group.input-group--has-error .input {
    border: var(--form-input-error-border);
    outline: var(--form-input-error-border);
}

.input-group.input-group--has-success .input {
    --input-color: var(--color-font);

    border: var(--form-input-success-border);
    outline: var(--form-input-success-border);
}

.input::-moz-placeholder {
    color: var(--input-placeholder-color);
}

.input::placeholder {
    color: var(--input-placeholder-color);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}
}

@layer base {

@media (hover: hover) {
    .input:not(:focus):hover {
        border: var(--form-input-hover-border);
        outline: var(--form-input-hover-border);
    }
}
}

@layer base {

.input-description {
    --input-description-order: 10;
    --input-description-margin: var(--spacing-s) 0 0;
    --input-description-padding: 0 var(--spacing-xs);
    --input-description-color: var(--color-font);
    --input-description-font-family: var(--font-family-text);
    --input-description-font-size: var(--font-size-s);
    --input-description-font-weight: var(--font-weight-text-normal);
    --input-description-column: 1 / -1;
    --input-description-pointer-events: none;

    order: var(--input-description-order);
    margin: var(--input-description-margin);
    padding: var(--input-description-padding);
    color: var(--input-description-color);
    font-family: var(--input-description-font-family);
    font-size: var(--input-description-font-size);
    font-weight: var(--input-description-font-weight);
    grid-column: var(--input-description-column);
    pointer-events: var(--input-description-pointer-events);
}

.input-description--after-group {
    /*--input-description-padding: 0 var(--spacing-s) 0 calc(var(--spacing-m) + 2px);*/
    --input-description-padding: 0 var(--spacing-s) 0 var(--spacing-xs)
}

.input-description--checkbox-group {
    --input-description-padding: 0;

    grid-column: var(--checkbox-group-description-column);
}

.input-description--toggle-group {
    --input-description-padding: 0;

    grid-column: var(--toggle-group-description-column);
}
}

@layer base {

.input-group {
    --input-group-position: relative;
    --input-group-width: 100%;
    --input-group-display: flex;
    --input-group-flex-direction: column;
    --input-group-flex-align-items: flex-start;
    --input-group-flex-justify-content: flex-start;
    --input-group-flex-gap: 0;
    --input-group-margin-between: var(--form-successive-groups-distance);

    --input-group-icon-display: none;
    --input-group-icon-size: var(--spacing-m);
    --input-group-icon-position: absolute;
    --input-group-icon-right: var(--spacing-s);
    --input-group-icon-top: var(--spacing-normal);
    --input-group-icon-background-color: var(--color-error);

    position: var(--input-group-position);
    display: var(--input-group-display);
    flex-direction: var(--input-group-flex-direction);
    align-items: var(--input-group-flex-align-items);
    justify-content: var(--input-group-flex-justify-content);
    gap: var(--input-group-flex-gap);
    width: var(--input-group-width);
    grid-column: span 12;
}

:is(.input-group, .form__row, input[hidden], .fieldset) + .input-group {
    margin-top: var(--input-group-margin-between);
}

.form__row .input-group,
.form__row :is(.input-group, .form__row, input[hidden], .fieldset) + .input-group {
    margin-top: 0;
}

.input-group::after {
    content: "";
    display: var(--input-group-icon-display);
    height: var(--input-group-icon-size);
    width: var(--input-group-icon-size);
    position: var(--input-group-icon-position);
    right: var(--input-group-icon-right);
    top: var(--input-group-icon-top);
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--input-group-icon-image);
    -webkit-mask-image: var(--input-group-icon-image);
    background-color: var(--input-group-icon-background-color);
    pointer-events: none;
    z-index: 1;
}

.input-group.input-group--has-error::after {
    --input-group-icon-display: block;
    --input-group-icon-background-color: var(--color-error);
    --input-group-icon-image: var(--icon-info);
}

.input-group.input-group--has-success::after {
    --input-group-icon-display: block;
    --input-group-icon-background-color: var(--color-success);
    --input-group-icon-image: var(--icon-check-circle);
}

.input-group--number,
.input-group--multi-select,
.input-group--single-select,
.input-group--date,
.input-group--date-jquery {
    --input-group-icon-right: var(--spacing-l);
}

.input-group--disabled,
.input-group--disabled > * {
    pointer-events: none;
}

.input-group--xs-1 {
    grid-column: span 1;
}

.input-group--xs-2 {
    grid-column: span 2;
}

.input-group--xs-3 {
    grid-column: span 3;
}

.input-group--xs-4 {
    grid-column: span 4;
}

.input-group--xs-5 {
    grid-column: span 5;
}

.input-group--xs-6 {
    grid-column: span 6;
}

.input-group--xs-7 {
    grid-column: span 7;
}

.input-group--xs-8 {
    grid-column: span 8;
}

.input-group--xs-9 {
    grid-column: span 9;
}

.input-group--xs-10 {
    grid-column: span 10;
}

.input-group--xs-11 {
    grid-column: span 11;
}

.input-group--xs-12 {
    grid-column: span 12;
}
}

@layer base {

@media screen and (min-width: 480px) {
    .input-group--sm-1 {
        grid-column: span 1;
    }

    .input-group--sm-2 {
        grid-column: span 2;
    }

    .input-group--sm-3 {
        grid-column: span 3;
    }

    .input-group--sm-4 {
        grid-column: span 4;
    }

    .input-group--sm-5 {
        grid-column: span 5;
    }

    .input-group--sm-6 {
        grid-column: span 6;
    }

    .input-group--sm-7 {
        grid-column: span 7;
    }

    .input-group--sm-8 {
        grid-column: span 8;
    }

    .input-group--sm-9 {
        grid-column: span 9;
    }

    .input-group--sm-10 {
        grid-column: span 10;
    }

    .input-group--sm-11 {
        grid-column: span 11;
    }

    .input-group--sm-12 {
        grid-column: span 12;
    }
}
}

@layer base {

@media screen and (min-width: 640px) {
    .input-group--md-1 {
        grid-column: span 1;
    }

    .input-group--md-2 {
        grid-column: span 2;
    }

    .input-group--md-3 {
        grid-column: span 3;
    }

    .input-group--md-4 {
        grid-column: span 4;
    }

    .input-group--md-5 {
        grid-column: span 5;
    }

    .input-group--md-6 {
        grid-column: span 6;
    }

    .input-group--md-7 {
        grid-column: span 7;
    }

    .input-group--md-8 {
        grid-column: span 8;
    }

    .input-group--md-9 {
        grid-column: span 9;
    }

    .input-group--md-10 {
        grid-column: span 10;
    }

    .input-group--md-11 {
        grid-column: span 11;
    }

    .input-group--md-12 {
        grid-column: span 12;
    }
}
}

@layer base {

@media screen and (min-width: 840px) {
    .input-group--lg-1 {
        grid-column: span 1;
    }

    .input-group--lg-2 {
        grid-column: span 2;
    }

    .input-group--lg-3 {
        grid-column: span 3;
    }

    .input-group--lg-4 {
        grid-column: span 4;
    }

    .input-group--lg-5 {
        grid-column: span 5;
    }

    .input-group--lg-6 {
        grid-column: span 6;
    }

    .input-group--lg-7 {
        grid-column: span 7;
    }

    .input-group--lg-8 {
        grid-column: span 8;
    }

    .input-group--lg-9 {
        grid-column: span 9;
    }

    .input-group--lg-10 {
        grid-column: span 10;
    }

    .input-group--lg-11 {
        grid-column: span 11;
    }

    .input-group--lg-12 {
        grid-column: span 12;
    }
}
}

@layer base {

@media screen and (min-width: 1024px) {
    .input-group--xl-1 {
        grid-column: span 1;
    }

    .input-group--xl2 {
        grid-column: span 2;
    }

    .input-group--xl-3 {
        grid-column: span 3;
    }

    .input-group--xl-4 {
        grid-column: span 4;
    }

    .input-group--xl-5 {
        grid-column: span 5;
    }

    .input-group--xl-6 {
        grid-column: span 6;
    }

    .input-group--xl-7 {
        grid-column: span 7;
    }

    .input-group--xl-8 {
        grid-column: span 8;
    }

    .input-group--xl-9 {
        grid-column: span 9;
    }

    .input-group--xl-10 {
        grid-column: span 10;
    }

    .input-group--xl-11 {
        grid-column: span 11;
    }

    .input-group--xl-12 {
        grid-column: span 12;
    }
}
}

@layer base {

@media screen and (min-width: 1200px) {
    .input-group--xxl-1 {
        grid-column: span 1;
    }

    .input-group--xxl-2 {
        grid-column: span 2;
    }

    .input-group--xxl-3 {
        grid-column: span 3;
    }

    .input-group--xxl-4 {
        grid-column: span 4;
    }

    .input-group--xxl-5 {
        grid-column: span 5;
    }

    .input-group--xxl-6 {
        grid-column: span 6;
    }

    .input-group--xxl-7 {
        grid-column: span 7;
    }

    .input-group--xxl-8 {
        grid-column: span 8;
    }

    .input-group--xxl-9 {
        grid-column: span 9;
    }

    .input-group--xxl-10 {
        grid-column: span 10;
    }

    .input-group--xxl-11 {
        grid-column: span 11;
    }

    .input-group--xxl-12 {
        grid-column: span 12;
    }
}
}

@layer base {


@media (hover: hover) {
    .input-group--disabled:hover {
        cursor: not-allowed;
    }
}
}

@layer base {

.input-group-advanced-password {
    display: grid;
    justify-content: initial;
}

.input-group-advanced-password__group {
    width: 100%;
    display: grid;
    position: relative;
}

.input-group-advanced-password__group + .input-group-advanced-password__group {
    margin-top: var(--input-group-margin-between);
}

.input-group-advanced-password .input-group-advanced-password__group:nth-child(2)::after {
    content: "";
    display: var(--input-group-icon-display);
    height: var(--input-group-icon-size);
    width: var(--input-group-icon-size);
    position: var(--input-group-icon-position);
    right: var(--input-group-icon-right);
    top: var(--input-group-icon-top);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-image: var(--input-group-icon-image);
            mask-image: var(--input-group-icon-image);
    background-color: var(--input-group-icon-background-color);
    pointer-events: none;
    z-index: 1;
}

.input-group-advanced-password.input-group--has-success .input-group-advanced-password__group:nth-child(2)::after {
    --input-group-icon-display: block;
    --input-group-icon-background-color: var(--color-success);
    --input-group-icon-image: var(--icon-check-circle);
}

.input-group-advanced-password.input-group--has-error .input-group-advanced-password__group:nth-child(2)::after {
    --input-group-icon-display: block;
    --input-group-icon-background-color: var(--color-error);
    --input-group-icon-image: var(--icon-info);
}
}

@layer base {

.input-label {
    --input-label-position: absolute;
    --input-label-top: var(--spacing-s);
    --input-label-left: var(--spacing-s);
    --input-label-font-size: var(--font-size-xs);
    --input-label-color: var(--form-input-color);
    --input-label-required-content: var(--form-required-suffix);
    --input-label-required-content-margin: var(--form-require-suffix-margin);
    --input-label-z-index: 1;

    position: var(--input-label-position);
    top: var(--input-label-top);
    left: var(--input-label-left);
    font-size: var(--input-label-font-size);
    color: var(--input-label-color);
    z-index: var(--input-label-z-index);
}

.input-group--required .input-label::after {
    content: var(--input-label-required-content);
    margin: var(--input-label-required-content-margin);
}

.input-group:focus-within .input-label {
    --input-label-color: var(--color-primary);
}

.input-group--disabled .input-label {
    --input-label-color: var(--color-font-light);
}

.input-group.input-group--has-error .input-label {
    --input-label-color: var(--color-error);
}

.input-group.input-group--has-success .input-label {
    --input-label-color: var(--color-success);
}

.input-group--multi-select .input-label {
    background-color: var(--color-bg);
    width: calc(100% - var(--spacing-l))
}
}

@layer base {

.input-group.multi-checkbox-group {
    --multi-checkbox-group-display: grid;
    --multi-checkbox-group-grid-column-count: 1;
    --multi-checkbox-group-grid-gap: 0;

    --multi-checkbox-group-label-font-family: var(--form-input-font-family);
    --multi-checkbox-group-label-font-size: var(--form-input-font-size);
    --multi-checkbox-group-label-font-weight: var(--form-input-font-weight);
    --multi-checkbox-group-label-color: var(--form-input-color);
    --multi-checkbox-group-label-column: 1 / -1;

    display: var(--multi-checkbox-group-display);
    grid-template-columns: repeat(var(--multi-checkbox-group-grid-column-count), 1fr);
    grid-gap: var(--multi-checkbox-group-grid-gap);
}

.multi-checkbox-group__label {
    font-size: var(--multi-checkbox-group-label-font-size);
    font-family: var(--multi-checkbox-group-label-font-family);
    font-weight: var(--multi-checkbox-group-label-font-weight);
    color: var(--multi-checkbox-group-label-color);
    grid-column: var(--multi-checkbox-group-label-column);
}
}

@layer base {

@media screen and (min-width: 640px) {
    .input-group.multi-checkbox-group {
        --multi-checkbox-group-grid-column-count: 2;
        --multi-checkbox-group-grid-gap: 0 var(--spacing-normal);
    }
}
}

@layer base {

@media screen and (min-width: 960px) {
    .input-group.multi-checkbox-group {
        --multi-checkbox-group-grid-column-count: 3;
    }
}
}

@layer base {

.multi-select {
    --multi-select-width: 100%;
    --multi-select-background-color: var(--form-input-background-color);
    --multi-select-border-width: var(--form-input-border-width);
    --multi-select-border-color: var(--form-input-default-border-color);
    --multi-select-border: var(--form-input-default-border);
    --multi-select-border-radius: var(--form-input-border-radius);
    --multi-select-padding: var(--form-input-padding);

    --multi-select-option-color: var(--form-input-color);
    --multi-select-option-font-family: var(--form-input-font-family);
    --multi-select-option-font-size: var(--form-input-font-size);
    --multi-select-option-font-weight: var(--form-input-font-weight);
    --multi-select-option-background-color: var(--form-input-background-color);

    width: var(--multi-select-width);
    background-color: var(--multi-select-background-color);
    border: var(--multi-select-border-width) solid var(--multi-select-border-color);
    border-radius: var(--multi-select-border-radius);
    padding: var(--multi-select-padding);
}

.multi-select:focus,
.multi-select:focus-within,
.multi-select:focus-visible {
    border: var(--form-input-focus-border) !important;
    outline: var(--form-input-focus-border) !important;
    outline: none;
}

.input-group.input-group--has-error .multi-select {
    border: var(--form-input-error-border);
    outline: var(--form-input-error-border);
}

.input-group.input-group--has-success .multi-select {
    border: var(--form-input-success-border);
    outline: var(--form-input-success-border);
}

.multi-select__option {
    color: var(--multi-select-option-color);
    background-color: var(--multi-select-option-background-color);
    font-family: var(--multi-select-option-font-family);
    font-size: var(--multi-select-option-font-size);
    font-weight: var(--multi-select-option-font-weight);
}

.multi-select__option:checked {
    --multi-select-option-background-color: var(--color-primary);
    --multi-select-option-color: var(--color-bg);
}

.multi-select[disabled] {
    --multi-select-option-color: var(--color-font-light);
}

.input-group.input-group--multi-select {
    --input-group-icon-right: var(--spacing-m);
}
}

@layer base {

@media (hover: hover) {
    .multi-select:hover {
        border: var(--form-input-hover-border);
        outline: var(--form-input-hover-border);
    }
}
}

@layer base {

.radio {
    --radio-appearance: none;
    --radio-display: block;
    --radio-size: var(--form-input-font-size);
    --radio-background-color: var(--form-input-background-color);
    --radio-border-width: var(--border-width-m);
    --radio-border-color: var(--color-font);
    --radio-border: var(--radio-border-width) solid var(--radio-border-color);
    --radio-border-radius: var(--border-radius-circle);
    --radio-position: relative;

    --radio-check-size: calc(var(--radio-size) - calc(var(--radio-border-width) * 4));
    --radio-check-background-color: var(--color-primary);
    --radio-check-position: absolute;
    --radio-check-top: 50%;
    --radio-check-left: 50%;
    --radio-check-transform: translate(-50%, -50%);
    --radio-check-border-radius: var(--border-radius-circle);

    appearance: var(--radio-appearance);
    -webkit-appearance: var(--radio-appearance);
    -moz-appearance: var(--radio-appearance);
    display: var(--radio-display);
    height: var(--radio-size);
    width: var(--radio-size);
    background-color: var(--radio-background-color);
    border: var(--radio-border);
    border-radius: var(--radio-border-radius);
    position: var(--radio-position);
}

.radio:checked {
    --radio-border-color: var(--color-primary);
    --radio-background-color: var(--color-bg);
}

.radio:checked::after {
    content: "";
    display: block;
    position: var(--radio-check-position);
    top: var(--radio-check-top);
    left: var(--radio-check-left);
    transform: var(--radio-check-transform);
    height: var(--radio-check-size);
    width: var(--radio-check-size);
    background-color: var(--radio-check-background-color);
    border-radius: var(--radio-check-border-radius);
}

.radio:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.radio:disabled {
    --radio-border-color: var(--color-font-light);

    pointer-events: none;
}

.radio:checked:disabled {
    --radio-background-color: var(--color-bg);
    --radio-check-background-color: var(--color-font-light);
}

.input-group.input-group--has-error .radio {
    --radio-border-color: var(--color-error);
    --radio-background-color: var(--color-error-o-25);
}

.input-group.input-group--has-error .radio:checked {
    --radio-background-color: var(--color-bg);
    --radio-check-background-color: var(--color-error);
}

.input-group.input-group--has-success .radio:checked {
    --radio-border-color: var(--color-success);
    --radio-background-color: var(--color-success-o-25);
}

.input-group.input-group--has-success .radio:checked {
    --radio-border-color: var(--color-success);
    --radio-background-color: var(--color-bg);
    --radio-check-background-color: var(--color-success);
}
}

@layer base {

@media (hover: hover) {
    .radio:hover {
        --radio-border-color: var(--color-font-dark);

        cursor: pointer;
    }

    .radio:checked:hover {
        --radio-border-color: var(--color-primary-light);
        --radio-background-color: var(--color-bg);
        --radio-check-background-color: var(--color-primary-light);
    }


}
}

@layer base {

.radio-group {
    --radio-group-display: grid;
    --radio-group-grid-column-count: 1;
    --radio-group-grid-gap: 0 var(--spacing-s);

    --radio-group-label-font-family: var(--form-input-font-family);
    --radio-group-label-font-size: var(--form-input-font-size);
    --radio-group-label-font-weight: var(--form-input-font-weight);
    --radio-group-label-color: var(--form-input-color);
    --radio-group-label-grid-column: 1 / -1;
    --radio-group-option-row-margin: var(--form-radio-and-checkbox-option-margin);

    --radio-group-description-column: 2;

    --radio-group-error-column: 2;
    --radio-group-error-padding: 0;

    display: var(--radio-group-display);
    grid-template-columns: repeat(var(--radio-group-grid-column-count), 1fr);
    grid-gap: var(--radio-group-grid-gap);
}

.radio-group::after {
    --input-group-icon-display: none !important;
}

.radio-group__label,
.radio-group__option-label {
    font-family: var(--radio-group-label-font-family);
    font-size: var(--radio-group-label-font-size);
    font-weight: var(--radio-group-label-font-weight);
    color: var(--radio-group-label-color);

    grid-column: var(--radio-group-label-grid-column);
}

.radio-group__option {
    margin: var(--radio-group-option-row-margin);
    cursor: pointer;
}

.input-group--disabled .radio-group__option {
    pointer-events: none;
}

.input-group--disabled .radio-group__label {
    --checkbox-group-label-color: var(--color-font-light);

    pointer-events: none;
}

.radio-group__option-label {
    --radio-group-option-label-display: grid;
    --radio-group-option-label-grid-template-columns: auto 1fr;
    --radio-group-option-label-grid-gap: var(--spacing-s);
    --radio-group-option-label-width: fit-content;

    display: var(--radio-group-option-label-display);
    grid-template-columns: var(--radio-group-option-label-grid-template-columns);
    grid-gap: var(--radio-group-option-label-grid-gap);
    width: var(--radio-group-option-label-width);
}
}

@layer base {

@media screen and (min-width: 640px) {
    .radio-group {
        --radio-group-grid-column-count: 2;
    }
}
}

@layer base {

@media screen and (min-width: 960px) {
    .radio-group {
        --radio-group-grid-column-count: 3;
    }
}
}

@layer base {

@media (hover: hover) {
    .radio-group__option-label:hover {
        cursor: pointer;
    }

    .radio-group__option-label:hover .radio:not(:checked) {
        --radio-border-color: var(--color-primary);
    }
}
}

@layer base {

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

.select__wrapper {
    --select-wrapper-width: 100%;
    --select-chevron-size: var(--font-size-m);
    --select-chevron-image: var(--icon-chevron-down);
    --select-chevron-background-color: var(--form-input-color);
    --select-chevron-position: absolute;
    --select-chevron-right: var(--spacing-s);
    --select-chevron-top: var(--spacing-normal);
    --select-chevron-transform: translateY(-50%);

    width: var(--select-wrapper-width);
}

.input-group--disabled .select__wrapper {
    --select-chevron-background-color: var(--color-font-light);
}

.select__wrapper::after {
    content: "";
    display: block;
    height: var(--select-chevron-size);
    width: var(--select-chevron-size);
    background-color: var(--select-chevron-background-color);
    position: var(--select-chevron-position);
    top: var(--select-chevron-top);
    right: var(--select-chevron-right);
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--select-chevron-image);
    -webkit-mask-image: var(--select-chevron-image);
    pointer-events: none;
}
}

@layer base {
.form-static-text > *:first-child {
    margin-top: 0;
}
}

@layer base {

.toggle {
    --toggle-position: relative;
    --toggle-height: var(--form-input-font-size);
    --toggle-ratio: 1.75;
    --toggle-width: calc(var(--toggle-height) * var(--toggle-ratio));
    --toggle-top: 3px;

    --toggle-track-position: absolute;
    --toggle-track-top: 50%;
    --toggle-track-transform: translateY(-50%);
    /*--toggle-track-height: calc(var(--toggle-height) / 2);*/
    --toggle-track-height: 10px;
    --toggle-track-border-radius: calc(var(--toggle-track-height) / 2);
    --toggle-track-default-color: var(--color-font-light);
    --toggle-track-checked-color: var(--color-primary-light);

    --toggle-thumb-size: var(--toggle-height);
    --toggle-thumb-default-color: var(--color-font);
    --toggle-thumb-checked-color: var(--color-primary);
    --toggle-thumb-hover-color: var(--color-primary);
    --toggle-thumb-checked-hover-color: var(--color-primary-dark);
    --toggle-thumb-border-radius: var(--border-radius-circle);
    --toggle-thumb-position: absolute;

    position: var(--toggle-position);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    height: var(--toggle-height);
    width: var(--toggle-width);
}

.toggle[disabled] {
    --toggle-track-default-color: var(--color-font-o-20);
    --toggle-thumb-default-color: var(--color-font-light);
}

.toggle::before {
    content: "";
    position: var(--toggle-track-position);
    top: var(--toggle-track-top);
    transform: var(--toggle-track-transform);
    display: block;
    width: var(--toggle-width);
    height: var(--toggle-track-height);
    border-radius: var(--toggle-track-border-radius);
    background-color: var(--toggle-track-default-color);
}

.toggle:checked::before {
    --toggle-track-default-color: var(--toggle-track-checked-color);
}

.toggle::after {
    content: "";
    display: block;
    position: var(--toggle-thumb-position);
    width: var(--toggle-thumb-size);
    height: var(--toggle-thumb-size);
    border-radius: var(--toggle-thumb-border-radius);
    background-color: var(--toggle-thumb-default-color);
    transition: transform var(--animation-duration-very-fast) var(--animation-easing-normal);
}

.toggle:checked::after {
    --toggle-thumb-default-color: var(--toggle-thumb-checked-color);

    transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb-size)));
}

.toggle:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}
}

@layer base {

@media (hover: hover) {
    .toggle:hover {
        cursor: pointer;
    }

    .toggle:hover::after {
        --toggle-thumb-default-color: var(--toggle-thumb-hover-color);
    }

    .toggle:checked:hover::after {
        --toggle-thumb-default-color: var(--toggle-thumb-checked-hover-color);
    }
}
}

@layer base {

.toggle-group {
    --toggle-group-display: grid;
    --toggle-group-grid-template-columns: auto 1fr;
    --toggle-group-grid-gap: 0 var(--spacing-s);

    --toggle-group-label-font-family: var(--form-input-font-family);
    --toggle-group-label-font-size: var(--form-input-font-size);
    --toggle-group-label-font-weight: var(--form-input-font-weight);
    --toggle-group-label-color: var(--form-input-color);

    --toggle-group-description-column: 2;

    --toggle-group-error-column: 2;
    --toggle-group-error-padding: 0;

    display: var(--toggle-group-display);
    grid-template-columns: var(--toggle-group-grid-template-columns);
    grid-gap: var(--toggle-group-grid-gap);
}

.input-group--multi-check .toggle-group {
    margin: var(--multi-check-group-row-margin);
}

.input-group.input-group--checkbox::after,
.input-group.input-group--multi-check::after{
    --input-group-icon-display: none;
}

.toggle-group__label {
    font-family: var(--toggle-group-label-font-family);
    font-size: var(--toggle-group-label-font-size);
    font-weight: var(--toggle-group-label-font-weight);
    color: var(--toggle-group-label-color);
}

.input-group--disabled .toggle-group__label {
    --toggle-group-label-color: var(--color-font-light);

    pointer-events: none;
}
}

@layer base {

@media (hover: hover) {
    .toggle-group__label:hover {
        cursor: pointer;
    }
}
}

@layer base {

.address {
    --address-font-family: var(--font-family-text);
    --address-font-size: var(--font-size-normal);
    --address-color: var(--color-font);
    --address-line-height: var(--line-height-normal);
    --address-font-style: normal;

    --address-item-margin: 0;

    --address-link-display: flex;
    --address-link-align-items: center;
    --address-link-justify-content: flex-start;
    --address-link-gap: var(--spacing-normal);

    font-family: var(--address-font-family);
    font-size: var(--address-font-size);
    color: var(--address-color);
    line-height: var(--address-line-height);
    font-style: var(--address-font-style);
}

.address__item {
    margin: var(--address-item-margin);
}

.address__item + .address__item {
    --address-item-margin: var(--spacing-s) 0 0;
}

.address__link {
    display: var(--address-link-display);
    align-items: var(--address-link-align-items);
    justify-content: var(--address-link-justify-content);
    gap: var(--address-link-gap);
}
}

@layer base {

.alert {
    --alert-bg-color: var(--color-primary-o-10);
    --alert-text-color: var(--color-font);
    --alert-border-color: var(--color-primary);
    --alert-font-size: var(--font-size-normal);
    --alert-font-family: var(--font-family-text);
    --alert-padding: var(--spacing-s) var(--spacing-normal);
    --alert-border-radius: var(--border-radius-default);
    --alert-border-width: var(--spacing-1px);
    --alert-border: var(--alert-border-width) solid var(--alert-border-color);
    --alert-width: auto;
    --alert-text-decoration: none;
    --alert-display: flex;
    --alert-align-items: flex-start;
    --alert-justify-content: flex-start;
    --alert-flex-direction: row;
    --alert-line-height: var(--line-height-normal);

    width: var(--alert-width);
    display: var(--alert-display);
    flex-direction: var(--alert-flex-direction);
    align-items: var(--alert-align-items);
    justify-content: var(--alert-justify-content);
    border: var(--alert-border);
    outline: none;
    background-color: var(--alert-bg-color);
    color: var(--alert-text-color);
    font-size: var(--alert-font-size);
    font-family: var(--alert-font-family);
    padding: var(--alert-padding);
    border-radius: var(--alert-border-radius);
    -webkit-text-decoration: var(--alert-text-decoration);
            text-decoration: var(--alert-text-decoration);
    line-height: var(--alert-line-height);
}

.alert[alert-variant="secondary"] {
    --alert-bg-color: var(--color-secondary-o-10);
    --alert-border-color: var(--color-secondary-dark);
}

.alert[alert-variant="warning"] {
    --alert-bg-color: var(--color-warning-o-15);
    --alert-border-color: var(--color-warning-darken-15);
}

.alert[alert-variant="error"] {
    --alert-bg-color: var(--color-error-o-25);
    --alert-border-color: var(--color-error-darken-15);
}

.alert[alert-variant="success"] {
    --alert-bg-color: var(--color-success-o-25);
    --alert-border-color: var(--color-success-darken-15);
}

.alert[alert-variant="info"] {
    --alert-bg-color: var(--color-info-o-25);
    --alert-border-color: var(--color-info-darken-15);
}
}

@layer base {

body {
    background-color: var(--color-bg);
}

body:is([overlay-open],[nav-is-open],[contact-box-is-open]) {
    overflow: hidden !important;
}
}

@layer base {

blockquote:not(.blockquote__blockquote) {
    --blockquote-tag-z-index: var(--z-index-content);
    --blockquote-tag-margin: var(--spacing-between-elements-normal) auto 0;
    --blockquote-tag-width: var(--content-width-with-padding);
    --blockquote-tag-max-width: var(--content-max-width);
    --blockquote-tag-position: relative;

    --blockquote-tag-icon-color: var(--color-font-dark);
    --blockquote-tag-icon-size: var(--spacing-xl);
    --blockquote-tag-icon-image: var(--icon-blockquote-round);

    z-index: var(--blockquote-tag-z-index);
    margin: var(--blockquote-tag-margin) !important;
    width: var(--blockquote-tag-width);
    max-width: var(--blockquote-tag-max-width);
    position: var(--blockquote-tag-position);
}

blockquote:not(.blockquote__blockquote)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: var(--blockquote-tag-icon-size);
    width: var(--blockquote-tag-icon-size);
    transform: translateY(-100%);
    background-color: var(--blockquote-tag-icon-color);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-image: var(--blockquote-tag-icon-image);
            mask-image: var(--blockquote-tag-icon-image);
}

blockquote:not(.blockquote__blockquote) + .blockquote__author {
    font-family: var(--font-family-text);
    font-size: var(--font-size-normal);
    color: var(--color-font);
    line-height: var(--line-height-normal);
    width: var(--content-width-with-padding);
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-between-elements-normal);
}

blockquote:not(.blockquote__blockquote) + .blockquote__author::before {
    content: "—";
    margin-right: var(--spacing-s);
}
}

@layer base {

.button {
    --button-color-bg: var(--color-primary);
    --button-color-text: var(--color-bg);
    --button-font-size: var(--font-size-normal);
    --button-font-family: var(--font-family-text);
    --button-padding: var(--spacing-s) var(--spacing-m);
    --button-border-radius: var(--border-radius-default);
    --button-border-width: var(--spacing-1px);
    --button-border-color: var(--button-color-bg);
    --button-border: var(--button-border-width) solid var(--button-border-color);
    --button-icon-size: var(--font-size-ms);
    --button-width: fit-content;
    --button-flex-direction: row;
    --button-text-decoration: none;

    width: var(--button-width);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: var(--button-flex-direction);
    border: var(--button-border);
    outline: none;
    gap: var(--spacing-s);
    background-color: var(--button-color-bg);
    color: var(--button-color-text);
    font-size: var(--button-font-size);
    font-family: var(--button-font-family);
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    -webkit-text-decoration: var(--button-text-decoration);
            text-decoration: var(--button-text-decoration);
    cursor: pointer;
}

p > .button {
    margin-top: var(--spacing-xs);
}

.button[button-variant="secondary"],
.button.button--secondary {
    --button-color-bg: var(--color-secondary);
}

.button[button-variant="font"],
.button.button--font {
    --button-color-bg: var(--color-font);
}

/* FOCUS */
.button:focus-visible {
    --button-color-bg: var(--color-primary-dark);
    --button-color-text: var(--color-bg);

    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    color: var(--button-color-text);
}

.button[button-variant="secondary"]:focus-visible,
.button.button--secondary:focus-visible {
    --button-color-bg: var(--color-secondary-dark);
    --button-color-text: var(--color-bg);
}

.button[button-variant="font"]:focus-visible,
.button.button--font:focus-visible {
    --button-color-bg: var(--color-font-dark);
    --button-color-text: var(--color-bg);
}

/* BUTTON SIZE */
.button[button-size="tiny"] {
    --button-font-size: var(--font-size-xs);
}

.button[button-size="small"] {
    --button-font-size: var(--font-size-s);
}

.button[button-size="large"] {
    --button-font-size: var(--font-size-ms);
}

/* BUTTON ICON */
.button[button-icon-position="left"] {
    --button-flex-direction: row;
    --button-padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-normal);
}

.button[button-icon-position="right"] {
    --button-flex-direction: row-reverse;
    --button-padding: var(--spacing-s) var(--spacing-normal) var(--spacing-s) var(--spacing-m);
}

.icon.button__icon {
    --icon-size: var(--button-icon-size);
}

.button[button-size="tiny"] .icon.button__icon {
    --button-icon-size: var(--font-size-s);
}

.button[button-size="small"] .icon.button__icon {
    --button-icon-size: var(--font-size-normal);
}

.button[button-size="large"] .icon.button__icon {
    --button-icon-size: var(--font-size-m);
}

/* EXPANDED */
.button[is-expanded],
.button.button--expanded {
    --button-width: 100%;
}

/* BUTTON TYPE BORDER */
.button[button-type="border"],
.button.button--shadow,
.button.button--outline {
    --button-color-bg: transparent;
    --button-border-color: var(--color-primary);
    --button-color-text: var(--color-primary);
}

.button[button-type="border"]:focus-visible,
.button.button--shadow:focus-visible,
.button.button--outline:focus-visible {
    --button-color-bg: var(--color-primary-o-10);
    --button-border-color: var(--color-primary);
    --button-color-text: var(--color-primary);
}

.button[button-variant="secondary"].button[button-type="border"],
.button:is(.button--secondary, [button-variant="secondary"]).button.button--shadow,
.button:is(.button--secondary, [button-variant="secondary"]).button.button--outline {
    --button-border-color: var(--color-secondary);
    --button-color-text: var(--color-secondary);
}

.button[button-variant="secondary"].button[button-type="border"]:focus-visible,
.button:is(.button--secondary, [button-variant="secondary"]).button.button--shadow:focus-visible,
.button:is(.button--secondary, [button-variant="secondary"]).button.button--outline:focus-visible {
    --button-color-bg: var(--color-secondary-o-10);
    --button-border-color: var(--color-secondary);
    --button-color-text: var(--color-secondary);
}

.button[button-variant="font"].button[button-type="border"],
.button:is(.button--font, [button-variant="font"]).button.button--shadow,
.button:is(.button--font, [button-variant="font"]).button.button--outline {
    --button-border-color: var(--color-font);
    --button-color-text: var(--color-font);
}

.button[button-variant="font"].button[button-type="border"]:focus-visible,
.button:is(.button--font, [button-variant="font"]).button.button--shadow:focus-visible,
.button:is(.button--font, [button-variant="font"]).button.button--outline:focus-visible {
    --button-color-bg: var(--color-font-o-10);
    --button-border-color: var(--color-font);
    --button-color-text: var(--color-font);
}

/* BUTTON TYPE GHOST */
.button[button-type="ghost"] {
    --button-border-color: transparent;
    --button-color-bg: transparent;
    --button-color-text: var(--color-primary);
}

.button[button-type="ghost"]:focus-visible {
    --button-color-bg: var(--color-primary-o-10);
    --button-color-text: var(--color-primary);
}

.button[button-variant="secondary"].button[button-type="ghost"] {
    --button-color-text: var(--color-secondary);
}

.button[button-variant="secondary"].button[button-type="ghost"]:focus-visible {
    --button-color-bg: var(--color-secondary-o-10);
    --button-color-text: var(--color-secondary);
}

.button[button-variant="font"].button[button-type="ghost"] {
    --button-color-text: var(--color-font);
}

.button[button-variant="font"].button[button-type="ghost"]:focus-visible {
    --button-color-bg: var(--color-font-o-10);
    --button-color-text: var(--color-font);
}

/* BUTTON DISABLED */
.button[disabled] {
    --button-color-bg: var(--color-font-light) !important;
    --button-color-text: var(--color-font) !important;

    cursor: not-allowed !important;
}

.button:is(.button--shadow, .button--outline, [button-type="border"])[disabled] {
    --button-color-bg: transparent !important;
    --button-color-text: var(--color-font-light) !important;
    --button-border-color: var(--color-font-light) !important;
}

.button[button-type="ghost"][disabled] {
    --button-color-bg: transparent !important;
    --button-color-text: var(--color-font-light) !important;
    --button-border-color: transparent !important;
}
}

@layer base {

@media (hover: hover) {
    .button:hover {
        --button-color-bg: var(--color-primary-dark);

        text-decoration: none;
    }

    .button[button-type="defult"]:hover {
        --button-color-text: var(--color-bg) !important;
    }

    .button:is(.button--secondary, [button-variant="secondary"]):hover {
        --button-color-bg: var(--color-secondary-dark);
    }

    .button:is(.button--font, [button-variant="font"]):hover {
        --button-color-bg: var(--color-font-dark);
    }

    /* BUTTON TYPE BORDER */
    .button:is(.button--shadow, .button--outline, [button-type="border"]):hover {
        --button-border-color: var(--color-primary);
        --button-color-text: var(--color-primary);
        --button-color-bg: var(--color-primary-o-10);
    }

    /* stylelint-disable-next-line max-line-length */
    .button:is(.button--secondary, [button-variant="secondary"]).button:is(.button--shadow, .button--outline, [button-type="border"]):hover {
        --button-border-color: var(--color-secondary);
        --button-color-text: var(--color-secondary);
        --button-color-bg: var(--color-secondary-o-10);
    }

    /* stylelint-disable-next-line max-line-length */
    .button:is(.button--font, [button-variant="font"]).button:is(.button--shadow, .button--outline, [button-type="border"]):hover {
        --button-border-color: var(--color-font);
        --button-color-text: var(--color-font);
        --button-color-bg: var(--color-font-o-10);
    }

    .button[button-type="ghost"]:hover {
        --button-border-color: transparent;
        --button-color-bg: var(--color-primary-o-10);
        --button-color-text: var(--color-primary);
    }

    .button[button-variant="secondary"].button[button-type="ghost"]:hover {
        --button-color-bg: var(--color-secondary-o-10);
        --button-color-text: var(--color-secondary);
    }

    .button[button-variant="font"].button[button-type="ghost"]:hover {
        --button-color-bg: var(--color-font-o-10);
        --button-color-text: var(--color-font);
    }
}
}

@layer base {

.card-collection {
    --card-collection-display: flex;
    --card-collection-flex-wrap: wrap;
    --card-collection-align-items: center;
    --card-collection-justify-content: center;
    --card-collection-gap: var(--content-spacing-between-columns);
    --card-collection-width: var(--content-width-with-padding);
    --card-collection-max-width: var(--content-wide-max-width);
    --card-collection-margin: var(--spacing-between-consecutive-elements-normal) auto 0;
    --card-collection-list-style: none;
    --card-collection-padding: 0;
    --card-collection-z-index: var(--z-index-content);

    --card-collection-item-align-self: stretch;

    display: var(--card-collection-display);
    grid-gap: var(--card-collection-gap);
    flex-wrap: var(--card-collection-flex-wrap);
    align-items: var(--card-collection-align-items);
    justify-content: var(--card-collection-justify-content);
    width: var(--card-collection-width);
    max-width: var(--card-collection-max-width);
    margin: var(--card-collection-margin);
    list-style: var(--card-collection-list-style);
    padding: var(--card-collection-padding);
    z-index: var(--card-collection-z-index);
}

.card-collection[is-slider] {
    --card-collection-flex-wrap: nowrap;
}

.grid-column .card-collection,
.card-collection:first-child {
    --card-collection-margin: 0 auto;
}

.card-collection__item {
    width: 100%;
    max-width: var(--card-collection-item-max-width);
    align-self: var(--card-collection-item-align-self);
}
}

@layer base {

@media screen and (min-width: 640px) {
    .card-collection__item {
        --card-collection-item-max-width: calc(calc(100% - var(--card-collection-gap)) / 2);
    }

    .grid .card-collection {
        --card-collection-width: 100%;
    }

    .grid[number-of-columns="2"] .card-collection__item {
        --card-collection-item-max-width: 100%;
    }

    .card-collection__item[is-single-column] {
        --card-collection-item-max-width: 100% !important;
    }
}
}

@layer base {

@media screen and (min-width: 960px) {
    .card-collection__item {
        --card-collection-item-max-width: calc(calc(100% - var(--card-collection-gap) * 3) / 4);
    }

    .grid[number-of-columns="2"] .card-collection__item {
        --card-collection-item-max-width: calc(calc(100% - var(--card-collection-gap)) / 2);
    }

    .card-collection__item[is-single-column] {
        --card-collection-item-max-width: 100% !important;
    }
}
}

@layer base {

.chapter {
    --chapter-position: relative;
    --chapter-background-color: var(--color-bg);
    --chapter-margin: 0;
    --chapter-padding: var(--spacing-between-elements-normal) 0;

    position: relative;
    background-color: var(--chapter-background-color);
    margin: var(--chapter-margin);
    padding: var(--chapter-padding);
}

*:not(span) + .chapter:not(:first-child) {
    margin-top: var(--spacing-between-elements-normal);
}

.chapter--primary {
    --chapter-background-color: var(--color-primary);
}

.chapter--secondary {
    --chapter-background-color: var(--color-secondary);
}

.chapter--inverted {
    --chapter-background-color: var(--color-font);
}

.chapter--background {
    --chapter-background-color: var(--color-font-o-10);
}

.chapter--primary,
.chapter--secondary,
.chapter--inverted {
    --color-headline: var(--color-bg);
}

.chapter[no-padding],
.chapter--no-padding {
    --chapter-padding: 0;
}

/* We need to separate the children from the chapter selector so the bg and font color variables don't collide! */
:is(.chapter--primary, .chapter--secondary, .chapter--inverted) :is(p, ul, ol, table) {
    --color-font: var(--color-bg);
}

:is(.chapter--primary, .chapter--secondary, .chapter--inverted) p a {
    color: var(--color-bg);
}

:is(.chapter--primary, .chapter--secondary, .chapter--inverted) p a:is(:hover, :focus-visible) {
    color: var(--color-bg-o-75);
}

:is(.chapter--primary, .chapter--secondary, .chapter--inverted) p a:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-bg);
    outline-offset: var(--focus-outline-offset);
}

.chapter--white {
    --chapter-background-color: var(--color-white);
}

.chapter > *:not(hr, .divider, blockquote):first-child,
.chapter > span:first-child + * {
    margin-top: 0 !important;
}
}

@layer base {

.chip {
    --toujou-chip-color-bg: var(--color-primary-o-10);
    --toujou-chip-font-size: var(--font-size-s);
    --toujou-chip-font-family: var(--font-family-text);
    --toujou-chip-text-color: var(--color-font);
    --toujou-chip-flex-direction: row;
    --toujou-chip-padding: var(--spacing-xs) var(--spacing-normal);
    --toujou-chip-border-radius: var(--spacing-xs);
    --toujou-chip-gap: var(--spacing-s);
    --toujou-chip-width: fit-content;
    --toujou-chip-text-transform: none;
    --toujou-chip-text-decoration: none;
    --toujou-chip-height: fit-content;

    width: var(--toujou-chip-width);
    background-color: var(--toujou-chip-color-bg);
    font-family: var(--toujou-chip-font-family);
    font-size: var(--toujou-chip-font-size);
    color: var(--toujou-chip-text-color);
    padding: var(--toujou-chip-padding);
    border-radius: var(--toujou-chip-border-radius);
    display: inline-flex;
    flex-direction: var(--toujou-chip-flex-direction);
    align-items: center;
    justify-content: center;
    gap: var(--toujou-chip-gap);
    text-transform: var(--toujou-chip-text-transform);
    -webkit-text-decoration: var(--toujou-chip-text-decoration);
            text-decoration: var(--toujou-chip-text-decoration);
    height: var(--toujou-chip-height);
}

/* BACKGROUND COLOR */
.chip[chip-bg-color="transparent"] {
    --toujou-chip-color-bg: transparent;
    --toujou-chip-text-color: var(--color-font);
}

.chip[chip-bg-color="primary"] {
    --toujou-chip-color-bg: var(--color-primary);
    --toujou-chip-text-color: var(--color-bg);
}

.chip[chip-bg-color="primary-light"] {
    --toujou-chip-color-bg: var(--color-primary-light);
    --toujou-chip-text-color: var(--color-bg);
}

.chip[chip-bg-color="primary-very-light"] {
    --toujou-chip-color-bg: var(--color-primary-o-10);
    --toujou-chip-text-color: var(--color-primary-dark);
}

.chip[chip-bg-color="secondary"] {
    --toujou-chip-color-bg: var(--color-secondary);
    --toujou-chip-text-color: var(--color-bg);
}

.chip[chip-bg-color="secondary-light"] {
    --toujou-chip-color-bg: var(--color-secondary-light);
    --toujou-chip-text-color: var(--color-bg);
}

.chip[chip-bg-color="secondary-very-light"] {
    --toujou-chip-color-bg: var(--color-secondary-o-10);
    --toujou-chip-text-color: var(--color-secondary-dark);
}

.chip[chip-bg-color="font"] {
    --toujou-chip-color-bg: var(--color-font);
    --toujou-chip-text-color: var(--color-bg);
}

.chip[chip-bg-color="font-light"] {
    --toujou-chip-color-bg: var(--color-font-light);
    --toujou-chip-text-color: var(--color-font-dark);
}

.chip[chip-bg-color="font-very-light"] {
    --toujou-chip-color-bg: var(--color-font-o-10);
    --toujou-chip-text-color: var(--color-font-dark);
}

.chip[chip-bg-color="success"] {
    --toujou-chip-color-bg: var(--color-success);
    --toujou-chip-text-color: var(--color-bg);
}

.chip[chip-bg-color="warning"] {
    --toujou-chip-color-bg: var(--color-warning);
    --toujou-chip-text-color: var(--color-bg);
}

.chip[chip-bg-color="error"] {
    --toujou-chip-color-bg: var(--color-error);
    --toujou-chip-text-color: var(--color-bg);
}

/* BORDER RADIUS */
.chip[chip-border-radius="none"] {
    --toujou-chip-border-radius: 0;
}

.chip[chip-border-radius="small"] {
    --toujou-chip-border-radius: var(--spacing-xs);
}

.chip[chip-border-radius="medium"] {
    --toujou-chip-border-radius: var(--spacing-s);
}

.chip[chip-border-radius="round"] {
    --toujou-chip-border-radius: var(--spacing-l);
}

/* SIZE */
.chip[chip-size="extra-small"] {
    --toujou-chip-font-size: var(--font-size-xs);
}

.chip[chip-size="extra-small"] .icon.chip__icon {
    --icon-size: var(--font-size-s);
}

.chip[chip-size="size-small"] {
    --toujou-chip-font-size: var(--font-size-s);
}

.chip[chip-size="normal"] {
    --toujou-chip-font-size: var(--font-size-normal);
}

.chip[chip-size="normal"] .icon.chip__icon {
    --icon-size: var(--font-size-ms);
}

/* ALL CAPS */
.chip[is-uppercase] {
    --toujou-chip-text-transform: uppercase;
}

/* ICON POSITION */
.chip[chip-icon-position="left"] {
    --toujou-chip-padding: var(--spacing-xs) var(--spacing-normal) var(--spacing-xs) var(--spacing-s);
}

.chip[chip-icon-position="right"] {
    --toujou-chip-flex-direction: row-reverse;
    --toujou-chip-padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs) var(--spacing-normal);
}

.chip a {
    -webkit-text-decoration: var(--toujou-chip-text-decoration);
            text-decoration: var(--toujou-chip-text-decoration);
    color: inherit;
}
}

@layer base {

@media (hover: hover) {
    .chip[is-clickable] {
        cursor: pointer;
    }

    .chip[chip-bg-color="transparent"][is-clickable]:hover {
        --toujou-chip-text-color: var(--color-font-dark);
    }

    .chip[chip-bg-color="primary"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-primary-dark);
    }

    .chip[chip-bg-color="primary-light"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-primary);
        --toujou-chip-text-color: var(--color-bg);
    }

    .chip[chip-bg-color="primary-very-light"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-primary-light);
        --toujou-chip-text-color: var(--color-font-dark);
    }

    .chip[chip-bg-color="secondary"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-secondary-dark);
    }

    .chip[chip-bg-color="secondary-light"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-secondary);
        --toujou-chip-text-color: var(--color-bg);
    }

    .chip[chip-bg-color="secondary-very-light"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-secondary-light);
        --toujou-chip-text-color: var(--color-font-dark);
    }

    .chip[chip-bg-color="font"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-font-dark);
    }

    .chip[chip-bg-color="font-light"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-font);
        --toujou-chip-text-color: var(--color-bg);
    }

    .chip[chip-bg-color="font-very-light"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-font-light);
    }

    .chip[chip-bg-color="success"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-success-darken-15);
    }

    .chip[chip-bg-color="warning"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-warning-darken-15);
    }

    .chip[chip-bg-color="error"][is-clickable]:hover {
        --toujou-chip-color-bg: var(--color-error-darken-15);
    }

    .chip:hover .icon {
        background-color: var(--toujou-chip-text-color);
    }
}
}

@layer base {

.chips-list {
    --chips-list-width: var(--content-width-with-padding);
    --chips-list-max-width: var(--content-max-width);
    --chips-list-margin: var(--spacing-between-consecutive-elements-normal) auto 0;

    --chips-list-list-style: none;
    --chips-list-list-display: flex;
    --chips-list-list-flex-wrap: wrap;
    --chips-list-list-gap: var(--spacing-normal);
    --chips-list-list-margin: 0;

    --chips-list-title-margin-bottom: var(--spacing-m);

    --chips-list-link-text-decoration: none;

    width: var(--chips-list-width);
    max-width: var(--chips-list-max-width);
    margin: var(--chips-list-margin);
}

.chips-list__list {
    list-style: var(--chips-list-list-style);
    display: var(--chips-list-list-display);
    flex-wrap: var(--chips-list-list-flex-wrap);
    gap: var(--chips-list-list-gap);
    margin: var(--chips-list-list-margin);
}

.chips-list__link {
    -webkit-text-decoration: var(--chips-list-link-text-decoration);
            text-decoration: var(--chips-list-link-text-decoration);
}

.chips-list__title {
    margin-bottom: var(--chips-list-title-margin-bottom);
}
}

@layer base {

.collection-item {
    --collection-item-text-color: var(--color-font);

    --collection-item-position: relative;
    --collection-item-display: flex;
    --collection-item-width: 100%;
    --collection-item-max-width: 100%;
    --collection-item-height: 100%;
    --collection-item-shadow: var(--shadow-s);
    --collection-item-border-radius: var(--border-radius-default);
    --collection-item-overflow: hidden;
    --collection-item-bg-color: var(--color-bg);
    --collection-item-z-index: var(--z-index-content);

    --collection-item-top-position: relative;
    --collection-item-top-margin: 0;
    --collection-item-top-height: fit-content;

    --collection-item-figure-border-radius: 0;
    --collection-item-figure-overflow: hidden;

    --collection-item-image-ratio: var(--aspect-ratio-default);
    --collection-item-image-object-fit: cover;
    --collection-item-image-width: 100%;
    --collection-item-image-height: auto;

    --collection-item-date-position: relative;
    --collection-item-date-display: flex;
    --collection-item-date-align-items: center;
    --colleciton-item-date-justify-content: flex-start;
    --collection-item-date-gap: var(--spacing-s);
    --collection-item-date-margin: var(--spacing-s) 0 0;
    --collection-item-date-color: var(--collection-item-text-color);

    --collection-item-date-icon-color: var(--collection-item-text-color);

    --collection-item-categories-position: absolute;
    --collection-item-categories-top: var(--spacing-normal);
    --collection-item-categories-left: var(--spacing-normal);
    --collection-item-categories-display: flex;
    --collection-item-categories-flex-flow: column;
    --collection-item-categories-gap: var(--spacing-xs);
    --collection-item-categories-padding: 0 var(--spacing-xl) 0 0;

    --collection-item-category-background-color: var(--color-primary);
    --collection-item-category-color: var(--color-bg);
    --collection-item-category-display: flex;
    --collection-item-category-align-items: center;
    --collection-item-category-justify-content: flex-start;
    --collection-item-category-gap: var(--spacing-xs);
    --collection-item-category-line-height: normal;
    --collection-item-category-padding: var(--spacing-xs) var(--spacing-normal) var(--spacing-xs) var(--spacing-s);
    --collection-item-category-border-radius: 0 var(--border-radius-xxxl) var(--border-radius-xxxl) 0;
    --collection-item-category-font-size: var(--font-size-s);
    --collection-item-category-margin: 0 0 var(--spacing-xs);
    --collection-item-category-width: fit-content;
    --collection-item-category-text-decoration: none;

    --collection-item-location-display: flex;
    --collection-item-location-align-items: flex-start;
    --collection-item-location-justify-content: flex-start;
    --collection-item-location-flex-direction: column;
    --collection-item-location-gap: var(--spacing-xs);
    --collection-item-location-position: absolute;
    --collection-item-location-bottom: 0;
    --collection-item-location-left: 0;
    --collection-item-location-padding: var(--spacing-m);
    --collection-item-location-gradient: var(--text-background-gradient);
    --collection-item-location-width: 100%;
    --collection-item-location-border-radius: 0;
    --collection-item-location-transform: none;

    --collection-item-city-font-size: var(--font-size-ms);
    --collection-item-city-font-family: var(--font-family-text);
    --collection-item-city-font-weight: var(--font-weight-text-bold);
    --collection-item-city-color: var(--color-bg);
    --collection-item-city-margin: 0;

    --collection-item-country-font-size: var(--font-size-normal);
    --collection-item-country-font-family: var(--font-family-text);
    --collection-item-country-font-weight: var(--font-weight-text-normal);
    --collection-item-country-color: var(--color-bg);
    --collection-item-country-margin: 0;

    --collection-item-bottom-padding: var(--spacing-m);
    --collection-item-bottom-position: absolute;
    --collection-item-bottom-bottom: 0;
    --collection-item-bottom-left: 0;
    --collection-item-bottom-width: 100%;
    --collection-item-bottom-background-color: var(--color-black-o-75);
    --collection-item-bottom-text-decoration: none;
    --collection-item-bottom-display: flex;
    --collection-item-bottom-flex-direction: column;
    --collection-item-bottom-flex-grow: 1;

    --collection-item-title-font-size: var(--font-size-ms);
    --collection-item-title-color: var(--color-font-dark);
    --collection-item-title-margin: 0 0 var(--spacing-xs);
    --collection-item-title-font-family: var(--font-family-text);
    --collection-item-title-font-weight: var(--font-weight-text-bold);

    --collection-item-subtitles-margin: 0;
    --collection-item-subtitles-separator: "-";

    --collection-item-subtitle-font-family: var(--font-family-text);
    --collection-item-subtitle-font-weight: var(--font-weight-text-normal);
    --collection-item-subtitle-font-size: var(--font-size-normal);
    --collection-item-subtitle-color: var(--collection-item-text-color);
    --collection-item-subtitle-font-style: italic;

    --collection-item-separated-list-color: var(--collection-item-text-color);
    --collection-item-separated-list-line-height: var(--line-height-s);

    --collection-item-info-display: grid;
    --collection-item-info-grid-template-columns: auto 1fr;
    --collection-item-info-grid-gap: var(--spacing-s);
    --collection-item-info-margin: var(--spacing-normal) 0 0;
    --collection-item-info-icon-top: 2px;
    --collection-item-info-text-margin: 0;
    --collection-item-info-icon-color: var(--color-primary);
    --collection-item-info-text-color: var(--collection-item-text-color);

    --collection-item-abstract-flex-grow: 1;

    --collection-item-abstract-text-color: var(--collection-item-text-color);
    --collection-item-abstract-text-number-of-lines: 3;

    --collection-item-trip-info-margin: 0;
    --collection-item-trip-info-color: var(--collection-item-text-color);
    --collection-item-trip-price-amount-font-weight: var(--font-weight-text-bold);
    --collection-item-trip-price-amount-font-size: var(--font-size-ms);
    --collection-item-trip-price-suffix-font-size: var(--font-size-xs);
    --collection-item-trip-price-color: var(--collection-item-text-color);

    --collection-item-button-text-decoration: none;
    --collection-item-button-text-color: var(--color-primary);
    --collection-item-button-text-color-hover: var(--color-primary-dark);
    --collection-item-button-display: flex;
    --collection-item-button-flex-grow: 1;
    --collection-item-button-align-items: flex-end;
    --collection-item-button-justify-content: flex-start;
    --collection-item-button-width: fit-content;
    --collection-item-button-gap: var(--spacing-s);

    --collection-item-address-margin: var(--spacing-normal) 0;

    --collection-item-logo-margin: 0 0 var(--spacing-normal);
    --collection-item-logo-width: calc(var(--spacing-normal) * 10);
    --collection-item-logo-max-width: 100%;
    --collection-item-logo-height: auto;

    position: var(--collection-item-position);
    display: var(--collection-item-display);
    flex-direction: var(--collection-item-flex-direction);
    width: var(--collection-item-width);
    max-width: var(--collection-item-max-width);
    height: var(--collection-item-height);
    box-shadow: var(--collection-item-shadow);
    border-radius: var(--collection-item-border-radius);
    overflow: var(--collection-item-overflow);
    background-color: var(--collection-item-bg-color);
    z-index: var(--collection-item-z-index);
}

.collection-item[item-type="product"] {
    height: -moz-fit-content;
    height: fit-content;
}

.collection-item[item-orientation="vertical"] {
    --collection-item-flex-direction: column;
}

.collection-item[item-orientation="horizontal"] {
    --collection-item-bottom-padding: var(--spacing-m) 0;
    --collection-item-flex-direction: column;
    --collection-item-shadow: none;
    --collection-item-figure-border-radius: var(--border-radius-default);
}

.slider[content-type="card-collection"] .collection-item {
    margin-bottom: var(--spacing-s);
}

.collection-item[element-design="primary"],
.collection-item[element-design="secondary"],
.collection-item[element-design="inverted"] {
    --collection-item-text-color: var(--color-bg);
    --collection-item-title-color: var(--color-bg);
    --collection-item-button-text-color: var(--color-bg);
}

.collection-item[element-design="primary"] {
    --collection-item-bg-color: var(--color-primary);
    --collection-item-info-icon-color: var(--color-bg);
    --collection-item-button-text-color-hover: var(--color-bg);
}

.collection-item[element-design="secondary"] {
    --collection-item-bg-color: var(--color-secondary);
    --collection-item-info-icon-color: var(--color-bg);
    --collection-item-button-text-color-hover: var(--color-bg);
}

.collection-item[element-design="inverted"] {
    --collection-item-bg-color: var(--color-font-dark);
    --collection-item-info-icon-color: var(--color-bg);
    --collection-item-button-text-color-hover: var(--color-bg);
}

.collection-item[item-type="product"][item-orientation="vertical"] {
    --collection-item-bottom-padding: var(--spacing-s) var(--spacing-normal);
    --collection-item-title-color: var(--color-bg);
}

.collection-item__top {
    position: var(--collection-item-top-position);
    margin: var(--collection-item-top-margin);
    height: var(--collection-item-top-height);
}

.collection-item__figure {
    border-radius: var(--collection-item-figure-border-radius);
    overflow: var(--collection-item-figure-overflow);
}

.collection-item__image {
    aspect-ratio: var(--collection-item-image-ratio);
    -o-object-fit: var(--collection-item-image-object-fit);
       object-fit: var(--collection-item-image-object-fit);
    width: var(--collection-item-image-width);
    height: var(--collection-item-image-height);
}

.collection-item__date {
    position: var(--collection-item-date-position);
    display: var(--collection-item-date-display);
    align-items: var(--collection-item-date-align-items);
    justify-content: var(--colleciton-item-date-justify-content);
    gap: var(--collection-item-date-gap);
    margin: var(--collection-item-date-margin);
    color: var(--collection-item-date-color);
}

.collection-item__date .icon[icon-color="font"] {
    --icon-color: var(--collection-item-date-icon-color);
}

.collection-item__categories {
    position: var(--collection-item-categories-position);
    top: var(--collection-item-categories-top);
    left: var(--collection-item-categories-left);
    display: var(--collection-item-categories-display);
    flex-flow: var(--collection-item-categories-flex-flow);
    gap: var(--collection-item-categories-gap);
    padding: var(--collection-item-categories-padding);
}

.collection-item__category {
    background-color: var(--collection-item-category-background-color);
    color: var(--collection-item-category-color);
    display: var(--collection-item-category-display);
    align-items: var(--collection-item-category-align-items);
    justify-content: var(--collection-item-category-justify-content);
    gap: var(--collection-item-category-gap);
    line-height: var(--collection-item-category-line-height);
    padding: var(--collection-item-category-padding);
    margin: var(--collection-item-category-margin);
    border-radius: var(--collection-item-category-border-radius);
    font-size: var(--collection-item-category-font-size);
    width: var(--collection-item-category-width);
    -webkit-text-decoration: var(--collection-item-category-text-decoration);
            text-decoration: var(--collection-item-category-text-decoration);
}

a.collection-item__category:focus-visible {
    --collection-item-category-text-decoration: underline;
}

.collection-item__location {
    display: var(--collection-item-location-display);
    align-items: var(--collection-item-location-align-items);
    justify-content: var(--collection-item-location-justify-content);
    flex-direction: var(--collection-item-location-flex-direction);
    gap: var(--collection-item-location-gap);
    position: var(--collection-item-location-position);
    bottom: var(--collection-item-location-bottom);
    left: var(--collection-item-location-left);
    padding: var(--collection-item-location-padding);
    background: var(--collection-item-location-gradient);
    width: var(--collection-item-location-width);
    border-radius: var(--collection-item-location-border-radius);
    transform: var(--collection-item-location-transform);
}

.collection-item__location-city {
    font-size: var(--collection-item-city-font-size);
    font-family: var(--collection-item-city-font-family);
    font-weight: var(--collection-item-city-font-weight);
    color: var(--collection-item-city-color);
    margin: var(--collection-item-city-margin);
}

.collection-item__location-country {
    font-size: var(--collection-item-country-font-size);
    font-family: var(--collection-item-country-font-family);
    font-weight: var(--collection-item-country-font-weight);
    color: var(--collection-item-country-color);
    margin: var(--collection-item-country-margin);
}

.collection-item__bottom {
    padding: var(--collection-item-bottom-padding);
    display: var(--collection-item-bottom-display);
    flex-direction: var(--collection-item-bottom-flex-direction);
    flex-grow: var(--collection-item-bottom-flex-grow);
}

.collection-item[item-type="product"][item-orientation="vertical"] .collection-item__bottom {
    position: var(--collection-item-bottom-position);
    bottom: var(--collection-item-bottom-bottom);
    left: var(--collection-item-bottom-left);
    width: var(--collection-item-bottom-width);
    background-color: var(--collection-item-bottom-background-color);
    -webkit-text-decoration: var(--collection-item-bottom-text-decoration);
            text-decoration: var(--collection-item-bottom-text-decoration);
}

.collection-item[item-type="product"][element-design="primary"] .collection-item__bottom {
    background-color: var(--color-primary);
}

.collection-item[item-type="product"][element-design="secondary"] .collection-item__bottom {
    background-color: var(--color-secondary);
}

.collection-item[item-type="product"][element-design="inverted"] .collection-item__bottom {
    background-color: var(--color-font-dark);
}

.collection-item__title {
    font-size: var(--collection-item-title-font-size);
    color: var(--collection-item-title-color);
    margin: var(--collection-item-title-margin);
    font-family: var(--collection-item-title-font-family);
    font-weight: var(--collection-item-title-font-weight);
}

.collection-item__subtitles {
    margin: var(--collection-item-subtitles-margin);
}

.collection-item__subtitle {
    font-family: var(--collection-item-subtitle-font-family);
    font-weight: var(--collection-item-subtitle-font-weight);
    font-size: var(--collection-item-subtitle-font-size);
    color: var(--collection-item-subtitle-color);
    font-style: var(--collection-item-subtitle-font-style);
}

.collection-item__subtitle + .collection-item__subtitle::before {
    content: var(--collection-item-subtitles-separator);
    margin: 0 var(--spacing-xs);
}

.collection-item__subtitles + .collection-item__subheading {
    margin-top: var(--spacing-xs);
}

.collection-item__separated-list {
    color: var(--collection-item-separated-list-color);
    line-height: var(--collection-item-separated-list-line-height);
}

.collection-item__info {
    display: var(--collection-item-info-display);
    grid-template-columns: var(--collection-item-info-grid-template-columns);
    grid-gap: var(--collection-item-info-grid-gap);
    margin: var(--collection-item-info-margin);
}

.collection-item__info-icon {
    --icon-color: var(--collection-item-info-icon-color) !important;

    position: relative;
    top: var(--collection-item-info-icon-top);
}

.collection-item__info-text {
    margin: var(--collection-item-info-text-margin);
    color: var(--collection-item-info-text-color);
}

.collection-item__abstract {
    flex-grow: var(--collection-item-abstract-flex-grow);
}

.collection-item__abstract-text {
    color: var(--collection-item-abstract-text-color);
    /* stylelint-disable value-no-vendor-prefix */
    display: -webkit-box;
    -webkit-line-clamp: var(--collection-item-abstract-text-number-of-lines);
    -webkit-box-orient: vertical;
    /* stylelint-enable value-no-vendor-prefix */
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-item__trip-info {
    margin: var(--collection-item-trip-info-margin);
    color: var(--collection-item-trip-info-color);
}

.collection-item__trip-price {
    color: var(--collection-item-trip-price-color);
}

.collection-item__trip-price-amount {
    font-weight: var(--collection-item-trip-price-amount-font-weight);
    font-size: var(--collection-item-trip-price-amount-font-size);
}

.collection-item__trip-price-suffix {
    font-size: var(--collection-item-trip-price-suffix-font-size);
}

.collection-item__button {
    -webkit-text-decoration: var(--collection-item-button-text-decoration);
            text-decoration: var(--collection-item-button-text-decoration);
    color: var(--collection-item-button-text-color);
    display: var(--collection-item-button-display);
    flex-grow: var(--collection-item-button-flex-grow);
    align-items: var(--collection-item-button-align-items);
    justify-content: var(--collection-item-button-justify-content);
    width: var(--collection-item-button-width);
    gap: var(--collection-item-button-gap);
}

a.collection-item__button:focus,
a.collection-item__button:focus-visible {
    --collection-item-button-text-decoration: underline;

    color: var(--collection-item-button-text-color-hover);
}

.collection-item__subtitles + .collection-item__button {
    --collection-item-button-margin-top: var(--spacing-normal);

    margin-top: var(--collection-item-button-margin-top);
}

.collection-item__address {
    margin: var(--collection-item-address-margin);
}

.collection-item[element-design="primary"] .address__link,
.collection-item[element-design="secondary"] .address__link,
.collection-item[element-design="inverted"] .address__link {
    color: var(--color-bg);
}

.collection-item[element-design="primary"] .address__link .icon,
.collection-item[element-design="secondary"] .address__link .icon,
.collection-item[element-design="inverted"] .address__link .icon {
    background-color: var(--color-bg);
}

.collection-item__logo {
    margin: var(--collection-item-logo-margin);
    width: var(--collection-item-logo-width);
    max-width: var(--collection-item-logo-max-width);
    height: var(--collection-item-logo-height);
}

.collection-item[item-type="product"] a.collection-item__bottom:focus-within {
    outline: none !important;
    background-color: var(--color-primary);
}

.collection-item[item-type="product"][element-design="primary"] a.collection-item__bottom:focus-within {
    background-color: var(--color-primary-dark);
}

.collection-item[item-type="product"][element-design="secondary"] a.collection-item__bottom:focus-within {
    background-color: var(--color-secondary-dark);
}

.collection-item[item-type="product"][element-design="inverted"] a.collection-item__bottom:focus-within {
    background-color: var(--color-font);
}

.collection-item[element-design="primary"] .address__link:focus-within {
    color: var(--color-primary-dark);
}

.collection-item[element-design="secondary"] .address__link:focus-within {
    color: var(--color-secondary-dark);
}

.collection-item[element-design="inverted"] .address__link:focus-within {
    color: var(--color-font-light);
}
}

@layer base {

@media (hover: hover) {
    a.collection-item__button:hover {
        --collection-item-button-text-decoration: underline;

        color: var(--collection-item-button-text-color-hover);
    }

    .collection-item__button:hover .icon {
        --icon-color: var(--collection-item-button-text-color-hover);
    }

    .collection-item[item-type="product"] a.collection-item__bottom:hover {
        background-color: var(--color-primary);
    }

    .collection-item[item-type="product"][element-design="primary"] a.collection-item__bottom:hover {
        background-color: var(--color-primary-dark);
    }

    .collection-item[item-type="product"][element-design="secondary"] a.collection-item__bottom:hover {
        background-color: var(--color-secondary-dark);
    }

    .collection-item[item-type="product"][element-design="inverted"] a.collection-item__bottom:hover {
        background-color: var(--color-font);
    }

    .collection-item[element-design="primary"] .address__link:hover {
        color: var(--color-primary-dark);
    }

    .collection-item[element-design="secondary"] .address__link:hover {
        color: var(--color-secondary-dark);
    }

    .collection-item[element-design="inverted"] .address__link:hover {
        color: var(--color-font-light);
    }

    a.collection-item__category:hover {
        --collection-item-category-text-decoration: underline;
    }
}
}

@layer base {

@media screen and (min-width: 640px) {
    .collection-item[item-orientation="horizontal"] {
        --collection-item-flex-direction: row;
        --collection-item-top-margin: var(--spacing-m) var(--spacing-normal);
        --collection-item-figure-border-radius: var(--border-radius-default);
        /* stylelint-disable-next-line max-line-length */
        --collection-item-location-border-radius: 0 0 var(--collection-item-figure-border-radius) var(--collection-item-figure-border-radius);
        --collection-item-bottom-padding: var(--spacing-m);
    }

    .collection-item[item-orientation="horizontal"] .collection-item__top {
        --collection-item-top-flex: 0 0 calc(100% / 3);

        flex: var(--collection-item-top-flex);
    }
}
}

@layer base {

@media screen and (min-width: 640px) and (max-width: 960px) {
    .collection-item[item-orientation="horizontal"][item-type="trip"] {
        --collection-item-location-transform: translateY(100%);
        --collection-item-location-gradient: none;
        --collection-item-location-padding: var(--spacing-normal);
        --collection-item-country-color: var(--color-font);
        --collection-item-city-color: var(--color-font);
    }
}
}

@layer base {

hr,
.divider {
    --divider-display: block;
    --divider-height: var(--spacing-xs);
    --divider-width: var(--content-fullwidth);
    --divider-max-width: var(--spacing-xxxxl);
    --divider-margin: var(--spacing-between-elements-normal) auto;
    --divider-border: none;
    --divider-border-radius: var(--border-radius-xs);

    display: var(--divider-display);
    height: var(--divider-height);
    width: var(--divider-width);
    max-width: var(--divider-max-width);
    margin: var(--divider-margin);
    border: var(--divider-border);
    background-color: var(--divider-bg-color);
    border-radius: var(--divider-border-radius);
}

hr[divider-type="background"],
.divider[divider-type="background"] {
    --divider-bg-color: var(--color-bg);
}

hr,
hr[divider-type="primary"],
.divider[divider-type="primary"] {
    --divider-bg-color: var(--color-primary);
}

hr[divider-type="secondary"],
.divider[divider-type="secondary"] {
    --divider-bg-color: var(--color-secondary);
}

hr[divider-type="grey"],
.divider[divider-type="grey"] {
    --divider-bg-color: var(--color-font-light);
}

:is(hr, .divider) + *:not(.chapter) {
    margin-top: 0;
}
}

@layer base {

.estimated-reading-time {
    --estimated-reading-time-font-family: var(--font-family-text);
    --estimated-reading-time-font-size: var(--font-size-normal);
    --estimated-reading-time-color: var(--color-font);
    --estimated-reading-time-display: inline-flex;
    --estimated-reading-time-flex-align-items: center;
    --estimated-reading-time-gap: .5ch;

    --estimated-reading-time-label-display: flex;
    --estimated-reading-time-label-align-items: center;

    font-family: var(--estimated-reading-time-font-family);
    font-size: var(--estimated-reading-time-font-size);
    color: var(--estimated-reading-time-color);
    display: var(--estimated-reading-time-display);
    align-items: var(--estimated-reading-time-flex-align-items);
    gap: var(--estimated-reading-time-gap);
}

.estimated-reading-time__label {
    display: var(--estimated-reading-time-label-display);
    align-items: var(--estimated-reading-time-label-align-items);
    gap: var(--estimated-reading-time-gap);
}
}

@layer base {
exit-warning {
    --toujou-modal-header-padding: var(--spacing-normal) var(--spacing-s);
    --toujou-modal-header-position: sticky;
    --toujou-modal-header-top: 0;
    --toujou-modal-header-box-shadow: var(--shadow-s);
    --toujou-modal-header-background: var(--color-bg);
    --toujou-modal-header-border-bottom: none;

    --toujou-modal-title-font-family: var(--font-family-headline);
    --toujou-modal-title-color: var(--color-warning);
    --toujou-modal-title-font-size: var(--font-size-l);
    --toujou-modal-title-padding: 0 var(--spacing-xl) 0 var(--spacing-s);

    --toujou-modal-close-color: var(--color-font);
    --toujou-modal-close-hover-color: var(--color-primary);
    --toujou-modal-close-background: transparent;
    --toujou-modal-close-hover-background: transparent;
    --toujou-modal-close-border: none;
    --toujou-modal-close-hover-border: none;
    --toujou-modal-close-position: absolute;
    --toujou-modal-close-right: var(--spacing-s);
    --toujou-modal-close-left: auto;
    --toujou-modal-close-top: var(--spacing-s);
    --toujou-modal-close-bottom: auto;

    --toujou-modal-progressbar-color: var(--color-secondary);
    --toujou-modal-z-index: var(--z-index-modal);
    --toujou-modal-content-border-radius: var(--border-radius-default);

    z-index: var(--toujou-modal-z-index);
}
}

@layer base {

.fav-count {
    --toujou-fav-count-background-color: var(--color-primary);
    --toujou-fav-count-font-color: var(--color-bg);

    --fav-el-display: block;
    --fav-el-position: relative;
    --fav-el-height: var(--font-size-l);
    --fav-el-width: var(--font-size-l);

    --fav-el-icon-z-index: -1;
    --fav-el-icon-position: absolute;
    --fav-el-icon-top: 0;
    --fav-el-icon-left: 0;

    display: var(--fav-el-display);
    position: var(--fav-el-position);
    height: var(--fav-el-height);
    width: var(--fav-el-width);
}

.fav-count[fav-count="0"] {
    --toujou-fav-count-background-color: var(--color-font-light);
}

.fav-count .icon {
    z-index: var(--fav-el-icon-z-index);
    position: var(--fav-el-icon-position);
    top: var(--fav-el-icon-top);
    left: var(--fav-el-icon-left);
}
}

@layer base {

.grid {
    --grid-display: grid;
    --grid-number-of-columns: 1;
    --grid-template-columns: repeat(var(--grid-number-of-columns), 1fr);
    --grid-gap: var(--content-spacing-between-columns);
    --grid-width: var(--content-width-with-padding);
    --grid-max-width: var(--content-max-width);
    --grid-margin: var(--spacing-between-consecutive-elements-normal) auto 0;
    --grid-z-index: var(--z-index-content);

    display: var(--grid-display);
    grid-template-columns: var(--grid-template-columns);
    grid-gap: var(--grid-gap);
    width: var(--grid-width);
    max-width: var(--grid-max-width);
    margin: var(--grid-margin);
    z-index: var(--grid-z-index);
}

.grid:first-child {
    --grid-margin: 0 auto;
}

.toujou-breadcrumb + .grid {
    margin-top: var(--spacing-between-consecutive-elements-normal);
}

.grid[grid-type="wide"] {
    --grid-max-width: var(--content-wide-max-width);
}

.grid[grid-type="medium"] {
    --grid-max-width: var(--content-medium-max-width);
}

.grid[grid-type="fullwidth"] {
    width: var(--content-fullwidth);
    max-width: var(--content-fullwidth);
}

.grid[grid-type="ignore"] {
    display: contents;
}
}

@layer base {

@media screen and (min-width: 840px) {
    .grid[number-of-columns="2"] {
        --grid-number-of-columns: 2;
    }

    .grid[number-of-columns="2"][column-layout="third-left"] {
        --grid-template-columns: 1fr 2fr;
    }

    .grid[number-of-columns="2"][column-layout="third-right"] {
        --grid-template-columns: 2fr 1fr;
    }

    .grid[number-of-columns="3"] {
        --grid-number-of-columns: 3;
    }

    .grid[number-of-columns="4"] {
        --grid-number-of-columns: 2;
    }
}
}

@layer base {

@media screen and (min-width: 1024px) {
    .grid[number-of-columns="4"] {
        --grid-number-of-columns: 4;
    }
}
}

@layer base {
/* stylelint-disable property-no-vendor-prefix */
.icon {
    --icon-size: var(--icon-size-normal);
    --icon-color: currentColor;
    --icon-flex-shrink: 0;

    display: inline-block;
    flex-shrink: var(--icon-flex-shrink);
    height: var(--icon-size);
    width: var(--icon-size);
    background-color: var(--icon-color);
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* ICON COLORS */
.icon[icon-color="font"] {
    --icon-color: var(--color-font);
}

.icon[icon-color="font-dark"] {
    --icon-color: var(--color-font-dark);
}

.icon[icon-color="font-light"] {
    --icon-color: var(--color-font-light);
}

.icon[icon-color="primary"] {
    --icon-color: var(--color-primary);
}

.icon[icon-color="primary-light"] {
    --icon-color: var(--color-primary-light);
}

.icon[icon-color="primary-dark"] {
    --icon-color: var(--color-primary-dark);
}

.icon[icon-color="secondary"] {
    --icon-color: var(--color-secondary);
}

.icon[icon-color="secondary-light"] {
    --icon-color: var(--color-secondary-light);
}

.icon[icon-color="secondary-dark"] {
    --icon-color: var(--color-secondary-dark);
}

.icon[icon-color="background"] {
    --icon-color: var(--color-bg);
}

.icon[icon-color="success"] {
    --icon-color: var(--color-success);
}

.icon[icon-color="warning"] {
    --icon-color: var(--color-warning);
}

.icon[icon-color="error"] {
    --icon-color: var(--color-error);
}

/* ICON SIZES */
.icon[icon-size="xxxl"] {
    --icon-size: var(--font-size-xxxl);
}

.icon[icon-size="xxl"] {
    --icon-size: var(--font-size-xxl);
}

.icon[icon-size="xl"] {
    --icon-size: var(--font-size-xl);
}

.icon[icon-size="l"] {
    --icon-size: var(--font-size-l);
}

.icon[icon-size="m"] {
    --icon-size: var(--font-size-m);
}

.icon[icon-size="ms"] {
    --icon-size: var(--font-size-ms);
}

.icon[icon-size="normal"] {
    --icon-size: var(--font-size-normal);
}

.icon[icon-size="s"] {
    --icon-size: var(--font-size-s);
}

.icon[icon-size="xs"] {
    --icon-size: var(--font-size-xs);
}

.icon[icon-size="xxs"] {
    --icon-size: var(--font-size-xxs);
}

/* ICON IMAGES */
.icon[icon-name="accessibility"] {
    mask-image: var(--icon-accessiblity);
    -webkit-mask-image: var(--icon-accessiblity);
}

.icon[icon-name="account"] {
    mask-image: var(--icon-account);
    -webkit-mask-image: var(--icon-account);
}

.icon[icon-name="alarm"] {
    mask-image: var(--icon-alarm);
    -webkit-mask-image: var(--icon-alarm);
}

.icon[icon-name="arrow-down"] {
    mask-image: var(--icon-arrow-down);
    -webkit-mask-image: var(--icon-arrow-down);
}

.icon[icon-name="arrow-drop-down"] {
    mask-image: var(--icon-arrow-drop-down);
    -webkit-mask-image: var(--icon-arrow-drop-down);
}

.icon[icon-name="arrow-left"] {
    mask-image: var(--icon-arrow-left);
    -webkit-mask-image: var(--icon-arrow-left);
}

.icon[icon-name="arrow-right"] {
    mask-image: var(--icon-arrow-right);
    -webkit-mask-image: var(--icon-arrow-right);
}

.icon[icon-name="arrow-up"] {
    mask-image: var(--icon-arrow-up);
    -webkit-mask-image: var(--icon-arrow-up);
}

.icon[icon-name="article"] {
    mask-image: var(--icon-article);
    -webkit-mask-image: var(--icon-article);
}

.icon[icon-name="audiotrack"] {
    mask-image: var(--icon-audiotrack);
    -webkit-mask-image: var(--icon-audiotrack);
}

.icon[icon-name="audiotrack-circle-filled"] {
    mask-image: var(--icon-audiotrack-circle-filled);
    -webkit-mask-image: var(--icon-audiotrack-circle-filled);
}

.icon[icon-name="bell"] {
    mask-image: var(--icon-bell);
    -webkit-mask-image: var(--icon-bell);
}

.icon[icon-name="blockquote-round"] {
    mask-image: var(--icon-blockquote-round);
    -webkit-mask-image: var(--icon-blockquote-round);
}

.icon[icon-name="bookmark"] {
    mask-image: var(--icon-bookmark);
    -webkit-mask-image: var(--icon-bookmark);
}

.icon[icon-name="bookmark-filled"] {
    mask-image: var(--icon-bookmark-filled);
    -webkit-mask-image: var(--icon-bookmark-filled);
}

.icon[icon-name="briefcase"] {
    mask-image: var(--icon-briefcase);
    -webkit-mask-image: var(--icon-briefcase);
}

.icon[icon-name="calendar-check"] {
    mask-image: var(--icon-calendar-check);
    -webkit-mask-image: var(--icon-calendar-check);
}

.icon[icon-name="calendar-day"] {
    mask-image: var(--icon-calendar-day);
    -webkit-mask-image: var(--icon-calendar-day);
}

.icon[icon-name="calendar-empty"] {
    mask-image: var(--icon-calendar-empty);
    -webkit-mask-image: var(--icon-calendar-empty);
}

.icon[icon-name="calendar-lines"] {
    mask-image: var(--icon-calendar-lines);
    -webkit-mask-image: var(--icon-calendar-lines);
}

.icon[icon-name="campaign"] {
    mask-image: var(--icon-campaign);
    -webkit-mask-image: var(--icon-campaign);
}

.icon[icon-name="cancel-circle-filled"] {
    mask-image: var(--icon-cancel-circle-filled);
    -webkit-mask-image: var(--icon-cancel-circle-filled);
}

.icon[icon-name="chart"] {
    mask-image: var(--icon-chart);
    -webkit-mask-image: var(--icon-chart);
}

.icon[icon-name="check"] {
    mask-image: var(--icon-check);
    -webkit-mask-image: var(--icon-check);
}

.icon[icon-name="check-circle"] {
    mask-image: var(--icon-check-circle);
    -webkit-mask-image: var(--icon-check-circle);
}

.icon[icon-name="chevron-down"] {
    mask-image: var(--icon-chevron-down);
    -webkit-mask-image: var(--icon-chevron-down);
}

.icon[icon-name="chevron-filled-down"] {
    mask-image: var(--icon-chevron-filled-down);
    -webkit-mask-image: var(--icon-chevron-filled-down);
}

.icon[icon-name="chevron-filled-left"] {
    mask-image: var(--icon-chevron-filled-left);
    -webkit-mask-image: var(--icon-chevron-filled-left);
}

.icon[icon-name="chevron-filled-right"] {
    mask-image: var(--icon-chevron-filled-right);
    -webkit-mask-image: var(--icon-chevron-filled-right);
}

.icon[icon-name="chevron-filled-up"] {
    mask-image: var(--icon-chevron-filled-up);
    -webkit-mask-image: var(--icon-chevron-filled-up);
}

.icon[icon-name="chevron-left"] {
    mask-image: var(--icon-chevron-left);
    -webkit-mask-image: var(--icon-chevron-left);
}

.icon[icon-name="chevron-right"] {
    mask-image: var(--icon-chevron-right);
    -webkit-mask-image: var(--icon-chevron-right);
}

.icon[icon-name="chevron-up"] {
    mask-image: var(--icon-chevron-up);
    -webkit-mask-image: var(--icon-chevron-up);
}

.icon[icon-name="clock-circle"] {
    mask-image: var(--icon-clock-circle);
    -webkit-mask-image: var(--icon-clock-circle);
}

.icon[icon-name="clock-circle-filled"] {
    mask-image: var(--icon-clock-circle-filled);
    -webkit-mask-image: var(--icon-clock-circle-filled);
}

.icon[icon-name="close"] {
    mask-image: var(--icon-close);
    -webkit-mask-image: var(--icon-close);
}

.icon[icon-name="cloud"] {
    mask-image: var(--icon-cloud);
    -webkit-mask-image: var(--icon-cloud);
}

.icon[icon-name="coffee"] {
    mask-image: var(--icon-coffee);
    -webkit-mask-image: var(--icon-coffee);
}

.icon[icon-name="company"] {
    mask-image: var(--icon-company);
    -webkit-mask-image: var(--icon-company);
}

.icon[icon-name="coronavirus"] {
    mask-image: var(--icon-coronavirus);
    -webkit-mask-image: var(--icon-coronavirus);
}

.icon[icon-name="dashboard"] {
    mask-image: var(--icon-dashboard);
    -webkit-mask-image: var(--icon-dashboard);
}

.icon[icon-name="drink"] {
    mask-image: var(--icon-drink);
    -webkit-mask-image: var(--icon-drink);
}

.icon[icon-name="email"] {
    mask-image: var(--icon-email);
    -webkit-mask-image: var(--icon-email);
}

.icon[icon-name="equalizer"] {
    mask-image: var(--icon-equalizer);
    -webkit-mask-image: var(--icon-equalizer);
}

.icon[icon-name="equalizer-circle-filled"] {
    mask-image: var(--icon-equalizer-circle-filled);
    -webkit-mask-image: var(--icon-equalizer-circle-filled);
}

.icon[icon-name="euro"] {
    mask-image: var(--icon-euro);
    -webkit-mask-image: var(--icon-euro);
}

.icon[icon-name="eye"] {
    mask-image: var(--icon-eye);
    -webkit-mask-image: var(--icon-eye);
}

.icon[icon-name="eye-off"] {
    mask-image: var(--icon-eye-off);
    -webkit-mask-image: var(--icon-eye-off);
}

.icon[icon-name="fax"] {
    mask-image: var(--icon-fax);
    -webkit-mask-image: var(--icon-fax);
}

.icon[icon-name="file-download"] {
    mask-image: var(--icon-file-download);
    -webkit-mask-image: var(--icon-file-download);
}

.icon[icon-name="filter"] {
    mask-image: var(--icon-filter);
    -webkit-mask-image: var(--icon-filter);
}

.icon[icon-name="flag"] {
    mask-image: var(--icon-flag);
    -webkit-mask-image: var(--icon-flag);
}

.icon[icon-name="flower"] {
    mask-image: var(--icon-flower);
    -webkit-mask-image: var(--icon-flower);
}

.icon[icon-name="folder"] {
    mask-image: var(--icon-folder);
    -webkit-mask-image: var(--icon-folder);
}

.icon[icon-name="food"] {
    mask-image: var(--icon-food);
    -webkit-mask-image: var(--icon-food);
}

.icon[icon-name="forward"] {
    mask-image: var(--icon-forward);
    -webkit-mask-image: var(--icon-forward);
}

.icon[icon-name="forward-circle-filled"] {
    mask-image: var(--icon-forward-circle-filled);
    -webkit-mask-image: var(--icon-forward-circle-filled);
}

.icon[icon-name="globe"] {
    mask-image: var(--icon-globe);
    -webkit-mask-image: var(--icon-globe);
}

.icon[icon-name="grid"] {
    mask-image: var(--icon-grid);
    -webkit-mask-image: var(--icon-grid);
}

.icon[icon-name="heart"] {
    mask-image: var(--icon-heart);
    -webkit-mask-image: var(--icon-heart);
}

.icon[icon-name="heart-stroke"] {
    mask-image: var(--icon-heart-stroke);
    -webkit-mask-image: var(--icon-heart-stroke);
}

.icon[icon-name="home"] {
    mask-image: var(--icon-home);
    -webkit-mask-image: var(--icon-home);
}

.icon[icon-name="home-smooth"] {
    mask-image: var(--icon-home-smooth);
    -webkit-mask-image: var(--icon-home-smooth);
}

.icon[icon-name="hotel"] {
    mask-image: var(--icon-hotel);
    -webkit-mask-image: var(--icon-hotel);
}

.icon[icon-name="image"] {
    mask-image: var(--icon-image);
    -webkit-mask-image: var(--icon-image);
}

.icon[icon-name="image-circle-filled"] {
    mask-image: var(--icon-image-circle-filled);
    -webkit-mask-image: var(--icon-image-circle-filled);
}

.icon[icon-name="image-collection"] {
    mask-image: var(--icon-image-collection);
    -webkit-mask-image: var(--icon-image-collection);
}

.icon[icon-name="image-collection-circle-filled"] {
    mask-image: var(--icon-image-collection-circle-filled);
    -webkit-mask-image: var(--icon-image-collection-circle-filled);
}

.icon[icon-name="info"] {
    mask-image: var(--icon-info);
    -webkit-mask-image: var(--icon-info);
}

.icon[icon-name="link"] {
    mask-image: var(--icon-link);
    -webkit-mask-image: var(--icon-link);
}

.icon[icon-name="list"] {
    mask-image: var(--icon-list);
    -webkit-mask-image: var(--icon-list);
}

.icon[icon-name="location"] {
    mask-image: var(--icon-location);
    -webkit-mask-image: var(--icon-location);
}

.icon[icon-name="map"] {
    mask-image: var(--icon-map);
    -webkit-mask-image: var(--icon-map);
}

.icon[icon-name="message-bubble"] {
    mask-image: var(--icon-message-bubble);
    -webkit-mask-image: var(--icon-message-bubble);
}

.icon[icon-name="monument"] {
    mask-image: var(--icon-monument);
    -webkit-mask-image: var(--icon-monument);
}

.icon[icon-name="new"] {
    mask-image: var(--icon-new);
    -webkit-mask-image: var(--icon-new);
}

.icon[icon-name="pause"] {
    mask-image: var(--icon-pause);
    -webkit-mask-image: var(--icon-pause);
}

.icon[icon-name="pause-circle-filled"] {
    mask-image: var(--icon-pause-circle-filled);
    -webkit-mask-image: var(--icon-pause-circle-filled);
}

.icon[icon-name="pending-circle-filled"] {
    mask-image: var(--icon-pending-circle-filled);
    -webkit-mask-image: var(--icon-pending-circle-filled);
}

.icon[icon-name="play"] {
    mask-image: var(--icon-play);
    -webkit-mask-image: var(--icon-play);
}

.icon[icon-name="play-circle-filled"] {
    mask-image: var(--icon-play-circle-filled);
    -webkit-mask-image: var(--icon-play-circle-filled);
}

.icon[icon-name="play-circle"] {
    mask-image: var(--icon-play-circle);
    -webkit-mask-image: var(--icon-play-circle);
}

.icon[icon-name="prize"] {
    mask-image: var(--icon-prize);
    -webkit-mask-image: var(--icon-prize);
}

.icon[icon-name="plus-circle"] {
    mask-image: var(--icon-plus-circle);
    -webkit-mask-image: var(--icon-plus-circle);
}

.icon[icon-name="question"] {
    mask-image: var(--icon-question);
    -webkit-mask-image: var(--icon-question);
}

.icon[icon-name="rewind"] {
    mask-image: var(--icon-rewind);
    -webkit-mask-image: var(--icon-rewind);
}

.icon[icon-name="rewind-circle-filled"] {
    mask-image: var(--icon-rewind-circle-filled);
    -webkit-mask-image: var(--icon-rewind-circle-filled);
}

.icon[icon-name="school"] {
    mask-image: var(--icon-school);
    -webkit-mask-image: var(--icon-school);
}

.icon[icon-name="science"] {
    mask-image: var(--icon-science);
    -webkit-mask-image: var(--icon-science);
}

.icon[icon-name="search"] {
    mask-image: var(--icon-search);
    -webkit-mask-image: var(--icon-search);
}

.icon[icon-name="settings"] {
    mask-image: var(--icon-settings);
    -webkit-mask-image: var(--icon-settings);
}

.icon[icon-name="shopping-bag"] {
    mask-image: var(--icon-shopping-bag);
    -webkit-mask-image: var(--icon-shopping-bag);
}

.icon[icon-name="shopping-cart"] {
    mask-image: var(--icon-shopping-cart);
    -webkit-mask-image: var(--icon-shopping-cart);
}

.icon[icon-name="skip-back"] {
    mask-image: var(--icon-skip-back);
    -webkit-mask-image: var(--icon-skip-back);
}

.icon[icon-name="skip-back-circle-filled"] {
    mask-image: var(--icon-skip-back-circle-filled);
    -webkit-mask-image: var(--icon-skip-back-circle-filled);
}

.icon[icon-name="skip-next"] {
    mask-image: var(--icon-skip-next);
    -webkit-mask-image: var(--icon-skip-next);
}

.icon[icon-name="skip-next-circle-filled"] {
    mask-image: var(--icon-skip-next-circle-filled);
    -webkit-mask-image: var(--icon-skip-next-circle-filled);
}

.icon[icon-name="sm-facebook"] {
    mask-image: var(--icon-sm-facebook);
    -webkit-mask-image: var(--icon-sm-facebook);
}

.icon[icon-name="sm-facebook-circle"] {
    mask-image: var(--icon-sm-facebook-circle);
    -webkit-mask-image: var(--icon-sm-facebook-circle);
}

.icon[icon-name="sm-instagram"] {
    mask-image: var(--icon-sm-instagram);
    -webkit-mask-image: var(--icon-sm-instagram);
}

.icon[icon-name="sm-instagram-circle"] {
    mask-image: var(--icon-sm-instagram-circle);
    -webkit-mask-image: var(--icon-sm-instagram-circle);
}

.icon[icon-name="sm-linkedin"] {
    mask-image: var(--icon-sm-linkedin);
    -webkit-mask-image: var(--icon-sm-linkedin);
}

.icon[icon-name="sm-linkedin-circle"] {
    mask-image: var(--icon-sm-linkedin-circle);
    -webkit-mask-image: var(--icon-sm-linkedin-circle);
}

.icon[icon-name="sm-pinterest"] {
    mask-image: var(--icon-sm-pinterest);
    -webkit-mask-image: var(--icon-sm-pinterest);
}

.icon[icon-name="sm-pinterest-circle"] {
    mask-image: var(--icon-sm-pinterest-circle);
    -webkit-mask-image: var(--icon-sm-pinterest-circle);
}

.icon[icon-name="sm-twitter"] {
    mask-image: var(--icon-sm-twitter);
    -webkit-mask-image: var(--icon-sm-twitter);
}

.icon[icon-name="sm-twitter-circle"] {
    mask-image: var(--icon-sm-twitter-circle);
    -webkit-mask-image: var(--icon-sm-twitter-circle);
}

.icon[icon-name="sm-tiktok"] {
    mask-image: var(--icon-sm-tiktok);
    -webkit-mask-image: var(--icon-sm-tiktok);
}

.icon[icon-name="sm-tiktok-circle"] {
    mask-image: var(--icon-sm-tiktok-circle);
    -webkit-mask-image: var(--icon-sm-tiktok-circle);
}

.icon[icon-name="sm-xing"] {
    mask-image: var(--icon-sm-xing);
    -webkit-mask-image: var(--icon-sm-xing);
}

.icon[icon-name="sm-xing-circle"] {
    mask-image: var(--icon-sm-xing-circle);
    -webkit-mask-image: var(--icon-sm-xing-circle);
}

.icon[icon-name="sm-youtube"] {
    mask-image: var(--icon-sm-youtube);
    -webkit-mask-image: var(--icon-sm-youtube);
}

.icon[icon-name="sm-youtube-circle"] {
    mask-image: var(--icon-sm-youtube-circle);
    -webkit-mask-image: var(--icon-sm-youtube-circle);
}

.icon[icon-name="sports"] {
    mask-image: var(--icon-sports);
    -webkit-mask-image: var(--icon-sports);
}

.icon[icon-name="star"] {
    mask-image: var(--icon-star);
    -webkit-mask-image: var(--icon-star);
}

.icon[icon-name="stop"] {
    mask-image: var(--icon-stop);
    -webkit-mask-image: var(--icon-stop);
}

.icon[icon-name="stop-circle-filled"] {
    mask-image: var(--icon-stop-circle-filled);
    -webkit-mask-image: var(--icon-stop-circle-filled);
}

.icon[icon-name="support"] {
    mask-image: var(--icon-support);
    -webkit-mask-image: var(--icon-support);
}

.icon[icon-name="tag"] {
    mask-image: var(--icon-tag);
    -webkit-mask-image: var(--icon-tag);
}

.icon[icon-name="tag-filled"] {
    mask-image: var(--icon-tag-filled);
    -webkit-mask-image: var(--icon-tag-filled);
}

.icon[icon-name="target"] {
    mask-image: var(--icon-target);
    -webkit-mask-image: var(--icon-target);
}

.icon[icon-name="telephone"] {
    mask-image: var(--icon-telephone);
    -webkit-mask-image: var(--icon-telephone);
}

.icon[icon-name="thumb-up"] {
    mask-image: var(--icon-thumb-up);
    -webkit-mask-image: var(--icon-thumb-up);
}

.icon[icon-name="tools"] {
    mask-image: var(--icon-tools);
    -webkit-mask-image: var(--icon-tools);
}

.icon[icon-name="tune"] {
    mask-image: var(--icon-tune);
    -webkit-mask-image: var(--icon-tune);
}

.icon[icon-name="tune-circle-filled"] {
    mask-image: var(--icon-tune-circle-filled);
    -webkit-mask-image: var(--icon-tune-circle-filled);
}

.icon[icon-name="videocam"] {
    mask-image: var(--icon-videocam);
    -webkit-mask-image: var(--icon-videocam);
}

.icon[icon-name="videocam-circle-filled"] {
    mask-image: var(--icon-videocam-circle-filled);
    -webkit-mask-image: var(--icon-videocam-circle-filled);
}

.icon[icon-name="volume-down"] {
    mask-image: var(--icon-volume-down);
    -webkit-mask-image: var(--icon-volume-down);
}

.icon[icon-name="volume-down-circle-filled"] {
    mask-image: var(--icon-volume-down-circle-filled);
    -webkit-mask-image: var(--icon-volume-down-circle-filled);
}

.icon[icon-name="volume-mute"] {
    mask-image: var(--icon-volume-mute);
    -webkit-mask-image: var(--icon-volume-mute);
}

.icon[icon-name="volume-mute-circle-filled"] {
    mask-image: var(--icon-volume-mute-circle-filled);
    -webkit-mask-image: var(--icon-volume-mute-circle-filled);
}

.icon[icon-name="volume-off"] {
    mask-image: var(--icon-volume-off);
    -webkit-mask-image: var(--icon-volume-off);
}

.icon[icon-name="volume-off-circle-filled"] {
    mask-image: var(--icon-volume-off-circle-filled);
    -webkit-mask-image: var(--icon-volume-off-circle-filled);
}

.icon[icon-name="volume-up"] {
    mask-image: var(--icon-volume-up);
    -webkit-mask-image: var(--icon-volume-up);
}

.icon[icon-name="volume-up-circle-filled"] {
    mask-image: var(--icon-volume-up-circle-filled);
    -webkit-mask-image: var(--icon-volume-up-circle-filled);
}

.icon[icon-name="warning"] {
    mask-image: var(--icon-warning);
    -webkit-mask-image: var(--icon-warning);
}
/* stylelint-enable property-no-vendor-prefix */
}

@layer base {

main {
    padding-bottom: var(--spacing-between-elements-normal);
}

main:first-child,
.topbar + main {
    --main-padding-top: var(--topbar-height);

    padding-top: var(--main-padding-top);
}

main > *:not(span, .breadcrumb, .chapter):first-child,
main > span:first-child + *:not(.breadcrumb, .chapter) {
    margin-top: var(--spacing-between-elements-normal);
}
}

@layer base {

.media-info {
    --media-info-position: absolute;
    --media-info-top: 0;
    --media-info-left: 0;
    --media-info-height: 100%;
    --media-info-width: 100%;
    --media-info-padding: var(--spacing-normal);
    --media-info-z-index: var(--z-index-content);
    --media-info-display: flex;
    --media-info-align-items: flex-start;
    --media-info-justify-content: flex-start;
    --media-info-flex-direction: column;
    --media-info-pointer-events: none;

    --media-info-scrim-display: none;
    --media-info-scrim-background-color: var(--color-black-o-75);

    --media-info-toggle-display: flex;
    --media-info-toggle-position: absolute;
    --media-info-toggle-top: unset;
    --media-info-toggle-bottom: var(--spacing-normal);
    --media-info-toggle-left: unset;
    --media-info-toggle-right: var(--spacing-normal);
    --media-info-toggle-size: fit-content;
    --media-info-toggle-padding: 0;
    --media-info-toggle-background-color: transparent;
    --media-info-toggle-border: none;
    --media-info-toggle-hover-color: var(--color-primary);
    --media-info-toggle-pointer-events: all;

    --media-info-figcaption-display: none;
    --media-info-figcaption-font-family: var(--font-family-text);
    --media-info-figcaption-font-size: var(--font-size-s);
    --media-info-figcaption-color: var(--color-bg);

    --media-info-copyright-display: none;
    --media-info-copyright-font-family: var(--font-family-text);
    --media-info-copyright-font-size: var(--font-size-s);
    --media-info-copyright-color: var(--color-bg);
    --media-info-copyright-padding: 0 var(--spacing-m) 0 0;

    position: var(--media-info-position);
    top: var(--media-info-top);
    left: var(--media-info-left);
    height: var(--media-info-height);
    width: var(--media-info-width);
    padding: var(--media-info-padding);
    z-index: var(--media-info-z-index);
    display: var(--media-info-display);
    align-items: var(--media-info-align-items);
    justify-content: var(--media-info-justify-content);
    flex-direction: var(--media-info-flex-direction);
    pointer-events: var(--media-info-pointer-events);
}

*[media-info-child-is-open] {
    pointer-events: none !important;
}

.header .header-content + .media-info {
    --media-info-z-index: 0;
}

.header .header-content + .media-info[open] {
    --media-info-z-index: 1;
}

.media-info[open] {
    --media-info-scrim-display: block;
    --media-info-figcaption-display: block;
    --media-info-copyright-display: var(--toujou-media-copyright-display, block);
}

.collection-item .media-info {
    --media-info-border-radius: var(--border-radius-default);
    --media-info-overflow: hidden;

    border-radius: var(--media-info-border-radius);
    overflow: var(--media-info-overflow);
}

.media-info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--media-info-scrim-background-color);
    display: var(--media-info-scrim-display);
    z-index: -1;
}

.media-info__toggle {
    display: var(--media-info-toggle-display);
    position: var(--media-info-toggle-position);
    top: var(--media-info-toggle-top);
    bottom: var(--media-info-toggle-bottom);
    left: var(--media-info-toggle-left);
    right: var(--media-info-toggle-right);
    height: var(--media-info-toggle-size);
    width: var(--media-info-toggle-size);
    padding: var(--media-info-toggle-padding);
    background-color: var(--media-info-toggle-background-color);
    border: var(--media-info-toggle-border);
    cursor: pointer;
    pointer-events: var(--media-info-toggle-pointer-events);
}

.collection-item .media-info__toggle {
    --media-info-toggle-top: var(--spacing-normal);
    --media-info-toggle-bottom: unset;
    --media-info-toggle-right: var(--spacing-normal);
    --media-info-toggle-left: unset;
}

.media-info__toggle:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
}

.media-info__toggle:focus-visible .icon {
    --icon-color: var(--media-info-toggle-hover-color);
}

.media-info__figcaption {
    display: var(--media-info-figcaption-display);
    font-family: var(--media-info-figcaption-font-family);
    font-size: var(--media-info-figcaption-font-size);
    color: var(--media-info-figcaption-color);
    flex-grow: 1;
}

.media-info__copyright {
    display: var(--media-info-copyright-display);
    font-family: var(--media-info-copyright-font-family);
    font-size: var(--media-info-copyright-font-size);
    color: var(--media-info-copyright-color);
    padding: var(--media-info-copyright-padding);
}
}

@layer base {

@media (hover: hover) {
    .media-info__toggle:hover .icon {
        --icon-color: var(--media-info-toggle-hover-color);
    }
}
}

@layer base {
toujou-modal {
    --toujou-modal-header-padding: var(--spacing-s);
    --toujou-modal-header-position: sticky;
    --toujou-modal-header-top: 0;
    --toujou-modal-header-box-shadow: var(--shadow-s);
    --toujou-modal-header-background: var(--color-bg);
    --toujou-modal-header-border-bottom: none;

    --toujou-modal-title-font-family: var(--font-family-headline);
    --toujou-modal-title-color: var(--color-primary);
    --toujou-modal-title-font-size: var(--font-size-l);

    --toujou-modal-close-color: var(--color-bg);
    --toujou-modal-close-hover-color: var(--color-bg);

    --toujou-modal-progressbar-color: var(--color-secondary);
    --toujou-modal-z-index: var(--z-index-modal);
    --toujou-modal-content-border-radius: var(--border-radius-default);

    z-index: var(--toujou-modal-z-index);
}
}

@layer base {

.search {
    --search-display: flex;
    --search-align-items: stretch;
    --search-justify-content: center;
    --search-flex-direction: row;
    --search-input-padding: 0 var(--spacing-s);

    --search-cancel-button-size: var(--spacing-m);
    --search-cancel-button-color: var(--color-font-light);
    --search-cancel-button-color-hover: var(--color-primary);

    --search-button-text-display: block;

    display: var(--search-display);
    align-items: var(--search-align-items);
    justify-content: var(--search-justify-content);
    flex-direction: var(--search-flex-direction);
}

.input--search {
    --input-padding: var(--search-input-padding);

    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.button--search {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    white-space: nowrap;
}

.search__button-text {
    display: var(--search-button-text-display);
}

input[type="search"]::-webkit-search-cancel-button {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: none;
    height: var(--search-cancel-button-size);
    width: var(--search-cancel-button-size);
    background-color: var(--search-cancel-button-color);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-close);
            mask-image: var(--icon-close);
    cursor: pointer;
}

input[type="search"]::-webkit-search-cancel-button:is(:hover, :focus-visible) {
    background-color: var(--search-cancel-button-color-hover);
}
}

@layer base {

@media screen and (max-width: 639px) {
    .search {
        --search-button-text-display: none;
    }
}
}

@layer base {

.separated-list {
    --separated-list-list-style: none;
    --separated-list-display: flex;
    --separated-list-flex-flow: row wrap;
    --separated-list-align-items: center;
    --separated-list-justify-content: flex-start;
    --separated-list-gap: 0;
    --separated-list-margin: 0;
    --separated-list-padding: 0;

    --separated-list-separator: "•";
    --separated-list-separator-gap: var(--spacing-s);

    list-style: var(--separated-list-list-style);
    display: var(--separated-list-display);
    flex-flow: var(--separated-list-flex-flow);
    align-items: var(--separated-list-align-items);
    justify-content: var(--separated-list-justify-content);
    gap: var(--separated-list-gap);
    margin: var(--separated-list-margin);
    padding: var(--separated-list-padding);
}

.separated-list[list-separator="comma"] {
    --separated-list-separator: ",";
    --separated-list-separator-gap: 0 var(--spacing-xs);
}

.separated-list[list-separator="pipe"] {
    --separated-list-separator: "|";
}

.separated-list[list-alignment="center"] {
    --separated-list-justify-content: center;
}

.separated-list__item:not(:last-child)::after {
    content: var(--separated-list-separator);
    margin-inline: var(--separated-list-separator-gap);
}
}

@layer base {

.single-media {
    --single-media-position: relative;
    --single-media-height: fit-content;
    --single-media-width: 100%;
    --single-media-max-width: 100%;
    --single-media-margin: var(--spacing-between-elements-normal) auto 0;
    --single-media-display: block;
    --single-media-max-height: 100%;
    --single-media-border-radius: var(--border-radius-default);
    --single-media-overflow: hidden;

    --single-media-media-width: 100%;
    --single-media-media-height: auto;

    --single-media-youtube-videos-aspect-ratio: var(--aspect-ratio-16-9);

    position: var(--single-media-position);
    display: var(--single-media-display);
    width: var(--single-media-width);
    max-width: var(--single-media-max-width);
    height: var(--single-media-height);
    margin: var(--single-media-margin);
    max-height: var(--single-media-max-height);
    border-radius: var(--single-media-border-radius);
    overflow: var(--single-media-overflow);
}

.slider .single-media__image {
    --single-media-media-height: 100%;
    --single-media-media-width: 100%;
    --single-media-media-object-fix: cover;

    -o-object-fit: var(--single-media-media-object-fix);

       object-fit: var(--single-media-media-object-fix);
}

.single-media:first-child,
.media-grid .single-media {
    --single-media-margin: 0 auto;
}

.header .single-media {
    --single-media-margin: 0 auto;
}

.header :is(.single-media__image, .single-media__video) {
    --single-media-media-width: 100%;
    --single-media-media-height: 100%;

    -o-object-fit: cover;

       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
}

.header[header-type="slider"] .single-media {
    --single-media-width: 100vw;
    --single-media-height: 80vh;
    --single-media-max-height: 80vh;
}

.header[image-height="full"] .single-media {
    --single-media-height: 80vh;
    --single-media-max-height: 100vh;
}

.header[image-height="half"] .single-media {
    --single-media-height: 50vh;
    --single-media-max-height: 50vh;
}

.header[image-height="quarter"] .single-media {
    --single-media-height: 25vh;
    --single-media-max-height: 25vh;
}

.single-media__image,
.single-media__video {
    width: var(--single-media-media-width);
    height: var(--single-media-media-height);
}

main .single-media__video[video-extension="youtube"],
main .single-media__video[video-extension="vimeo"] {
    --single-media-media-height: auto;

    aspect-ratio: var(--single-media-youtube-videos-aspect-ratio);
}

.single-media > picture {
    display: contents;
}
}

@layer base {

:root {
    --toujou-scroll-behavior: smooth;
    --toujou-scroll-snap-align: start;
    --toujou-scroll-top-padding-fallback: var(--spacing-l);
    --toujou-scroll-top-padding-gap: var(--spacing-normal);
    /* stylelint-disable-next-line max-line-length */
    --toujou-scroll-top-padding: calc(var(--topbar-height) + var(--inpage-nav-height) + var(--toujou-scroll-top-padding-gap));
}

html {
    scroll-behavior: var(--toujou-scroll-behavior);
    scroll-snap-align: var(--toujou-scroll-snap-align);
    scroll-padding-top: var(--toujou-scroll-top-padding, var(--toujou-scroll-top-padding-fallback));
}
}

@layer base {

@media screen and (min-width: 840px) {
    :root {
        --toujou-scroll-top-padding-gap: var(--spacing-l);
    }
}
}

@layer base {

@media (prefers-reduced-motion: reduce) {
    :root {
        --toujou-scroll-behavior: auto;
    }
}
}

@layer base {
/* These variables have the "toujou" prefix because they come from the webcomponent */
.snackbar {
    --toujou-snackbar-font-family: var(--font-family-text);
    --toujou-snackbar-font-weight: var(--font-weight-text-normal);
    --toujou-snackbar-bg-color: var(--color-font);
    --toujou-snackbar-border: var(--border-width-normal) solid var(--toujou-snackbar-bg-color);
    --toujou-snackbar-bottom: var(--spacing-normal);
    --toujou-snackbar-left: var(--spacing-normal);
    --toujou-snackbar-padding: var(--spacing-normal);
    --toujou-snackbar-border-radius: var(--border-radius-default);
    --toujou-snackbar-z-index: var(--z-index-notifications);
    --toujou-snackbar-transition: all var(--animation-duration-fast) var(--animation-easing-normal);
    --toujou-snackbar-shadow: var(--shadow-normal);

    --toujou-snackbar-focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    --toujou-snackbar-focus-outline-offset: var(--focus-outline-offset);

    --toujou-snackbar-message-color: var(--color-bg);

    --toujou-snackbar-button-font-family: var(--toujou-snackbar-font-family);
    --toujou-snackbar-button-font-weight: var(--toujou-snackbar-font-weight);

    font-family: var(--toujou-snackbar-font-family);
    font-weight: var(--toujou-snackbar-font-weight);
    box-shadow: var(--toujou-snackbar-shadow);
    border: var(--toujou-snackbar-border) !important;
}

.snackbar[success] {
    --toujou-snackbar-bg-color: var(--color-success);
    --toujou-snackbar-success-message-color: var(--color-success-l-15);
    --toujou-snackbar-success-button-color: var(--color-success-l-15);
}

.snackbar[error] {
    --toujou-snackbar-bg-color: var(--color-error);
    --toujou-snackbar-error-message-color: var(--color-error-l-15);
    --toujou-snackbar-error-button-color: var(--color-error-l-15);
}

.snackbar[warning] {
    --toujou-snackbar-bg-color: var(--color-warning);
    --toujou-snackbar-warning-message-color: var(--color-warning-l-15);
    --toujou-snackbar-warning-button-color: var(--color-warning-l-15);
}

.snackbar[info] {
    --toujou-snackbar-bg-color: var(--color-primary);
    --toujou-snackbar-info-message-color: var(--color-bg);
    --toujou-snackbar-info-button-color: var(--color-bg);
}
}

@layer base {
#navigation-state,
#contact-state,
#selector-state {
    display: none;
}
}

@layer base {

.table {
    --table-width: 100%;
    --table-margin: 0 auto;
    --table-text-align: left;
    --table-bg-color-light: transparent;
    --table-bg-color-dark: var(--color-font-o-04);
    --table-border: none;

    --table-caption-margin: 0 auto var(--spacing-s) auto;

    --table-summary-display: block;
    --table-summary-font-size: var(--font-size-s);

    --table-head-color: var(--color-font);

    --table-row-border: var(--border-width-normal) solid var(--border-color-default);

    --table-cell-padding: var(--spacing-normal);

    border: var(--table-border);
    width: var(--table-width);
    margin: var(--table-margin);
    text-align: var(--table-text-align);
}

.table[text-alignment="left"] {
    --table-text-align: left;
}

.table[text-alignment="right"] {
    --table-text-align: right;
}

.table[text-alignment="center"] {
    --table-text-align: center;
}

.table__caption {
    margin: var(--table-caption-margin);
    text-align: var(--table-text-align);
}

.table__summary {
    display: var(--table-summary-display);
    font-size: var(--table-summary-font-size);
}

thead {
    background-color: var(--table-bg-color-dark);
}

tr {
    border-top: var(--table-row-border);
}

tr:last-child {
    border-bottom: var(--table-row-border);
}

tr:nth-child(even) {
    background-color: var(--table-bg-color-light);
}

tr:nth-child(odd) {
    background-color: var(--table-bg-color-dark);
}

th {
    color: var(--table-head-color);
    padding: var(--table-cell-padding);
}

td {
    padding: var(--table-cell-padding);
}
}

@layer base {

.table-container {
    --table-content-display: block;
    --table-content-width: var(--content-width-with-padding);
    --table-content-max-width: var(--content-max-width);
    --table-container-x-overflow: auto;
    --table-container-margin: var(--spacing-between-consecutive-elements-normal) auto 0;

    display: var(--table-content-display);
    width: var(--table-content-width);
    max-width: var(--table-content-max-width);
    overflow-x: var(--table-container-x-overflow);
    margin: var(--table-container-margin);
}

.table-container:first-child {
    --table-container-margin: 0 auto var(--spacing-normal);
}

main > .table-container {
    --table-container-width: var(--content-max-width);
}

.form > .table-container {
    --table-content-width: var(--content-fullwidth);
}
}

@layer base {

.text-block {
    --text-block-display: grid;
    --text-block-grid-template-columns: 1fr;
    --text-block-grid-gap: var(--content-spacing-between-columns);
    --text-block-width: var(--content-width-with-padding);
    --text-block-max-width: var(--content-medium-max-width);
    --text-block-margin: var(--spacing-between-consecutive-elements-normal) auto 0;
    --text-block-image-aspect-ratio: var(--aspect-ratio-default);
    --text-block-image-border-radius: var(--border-radius-default);
    --text-block-image-object-fit: cover;
    --text-block-media-inside-image-width: 50%;
    --text-block-media-inside-offset: calc(100% / 8);
    --text-block-column-display: block;
    --text-block-column-grid-template-columns: unset;
    --text-block-column-gap: var(--spacing-m);
    --text-block-overflow: hidden;
    --text-block-z-index: var(--z-index-content);

    display: var(--text-block-display);
    grid-template-columns: var(--text-block-grid-template-columns);
    grid-gap: var(--text-block-grid-gap);
    width: var(--text-block-width);
    max-width: var(--text-block-max-width);
    margin: var(--text-block-margin);
    overflow: var(--text-block-overflow);
    z-index: var(--text-block-z-index);
}

.text-block[text-block-column-count="1"] {
    --text-block-max-width: var(--content-max-width);
}

.html-container .text-block {
    --text-block-width: 100%;
}

.text-block:first-child,
span:first-child + .text-block {
    --text-block-margin: 0 auto;
}

:is(.text-block, .media-grid, .details-accordion) + .text-block {
    --text-block-margin: var(--spacing-between-consecutive-elements-normal) auto 0;
}

.details .text-block {
    margin: 0;
    width: 100%;
}

.grid .text-block {
    --text-block-width: var(--content-fullwidth);
    --text-block-max-width: var(--content-fullwidth);
}

.accordion .text-block {
    --text-block-width: 100%;
}

.text-block[text-block-column-count="2"],
.text-block[text-block-column-count="3"],
.text-block[text-block-column-count="4"] {
    --text-block-max-width: var(--content-wide-max-width);
}

.text-block__figure {
    position: relative;
    margin: 0;
    height: -moz-fit-content;
    height: fit-content;
}

.text-block__image,
.text-block__figure .video {
    aspect-ratio: var(--text-block-image-aspect-ratio);
    -o-object-fit: var(--text-block-image-object-fit);
       object-fit: var(--text-block-image-object-fit);
    height: auto;
    width: 100%;
    border-radius: var(--text-block-image-border-radius);
}

.text-block__image--square {
    --text-block-image-aspect-ratio: var(--aspect-ratio-square);
}

.text-block__image--4-3 {
    --text-block-image-aspect-ratio: var(--aspect-ratio-4-3);
}

.text-block__image--16-9 {
    --text-block-image-aspect-ratio: var(--aspect-ratio-16-9);
}

.text-block__image--golden {
    --text-block-image-aspect-ratio: var(--aspect-ratio-golden);
}

.text-block__figcaption {
    font-family: var(--font-family-text);
    font-size: var(--font-size-s);
    color: var(--color-font);
    padding: var(--spacing-s) 0;
}

.text-block__content > *:first-child,
.text-block__content > :is(h1, h2, h3, h4, h5):first-child {
    margin-top: 0;
}

.details .text-block__content:first-child {
    --text-block-column-gap: 0;
}
}

@layer base {

@media screen and (min-width: 768px) {
    .text-block[text-block-media-position="beside-right"] .text-block__figure {
        grid-column: 2;
    }

    .text-block[text-block-media-position="beside-right"] .text-block__content {
        grid-column: 1;
    }

    /* TEXT BLOCK MEDIA INSIDE */
    .text-block[text-block-media-position*="inside"] .text-block__figure {
        width: var(--text-block-media-inside-image-width);
        margin-bottom: calc(var(--text-block-grid-gap) / 2);
    }

    .text-block[text-block-media-position="inside-left"] .text-block__figure {
        float: left;
        margin-right: calc(var(--text-block-grid-gap) / 2);
        transform: translateX(calc(var(--text-block-grid-gap) * -1));
    }

    .text-block[text-block-media-position="inside-left"] .text-block__content {
        padding-left: var(--text-block-media-inside-offset);
        padding-right: var(--text-block-grid-gap);
    }

    .text-block[text-block-media-position="inside-right"] .text-block__figure {
        float: right;
        margin-left: calc(var(--text-block-grid-gap) / 2);
        transform: translateX(var(--text-block-grid-gap));
    }

    .text-block[text-block-media-position="inside-right"] .text-block__content {
        padding-right: var(--text-block-media-inside-offset);
        padding-left: var(--text-block-grid-gap);
    }
}
}

@layer base {

@media screen and (min-width: 840px) {
    .text-block[text-block-column-count="2"],
    .text-block[text-block-column-count="4"] {
        --text-block-grid-template-columns: 1fr 1fr;
    }

    .text-block[text-block-third-direction="left"] {
        --text-block-grid-template-columns: 1fr 2fr;
    }

    .text-block[text-block-third-direction="right"] {
        --text-block-grid-template-columns: 2fr 1fr;
    }

    .text-block[text-block-column-count="3"] {
        --text-block-grid-template-columns: 1fr 1fr 1fr;
    }
}
}

@layer base {

@media screen and (min-width: 1200px) {
    .text-block[text-block-column-count="4"] {
        --text-block-grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .text-block[text-block-media-position="inside-left"] .text-block__figure {
        transform: translateX(calc(var(--text-block-grid-gap) * -.5));
    }

    .text-block[text-block-media-position="inside-left"] .text-block__content {
        margin-right: calc(var(--text-block-grid-gap) / 2);
    }

    .text-block[text-block-media-position="inside-right"] .text-block__figure {
        transform: translateX(calc(var(--text-block-grid-gap) / 2));
    }

    .text-block[text-block-media-position="inside-right"] .text-block__content {
        margin-left: calc(var(--text-block-grid-gap) / 2);
    }

    .details .text-block[text-block-media-position="inside-right"] .text-block__figure + .text-block__content {
        margin-left: 0;
        padding-left: var(--spacing-m);
    }

    .details .text-block[text-block-media-position="inside-right"] .text-block__content {
        margin-left: 0;
        margin-right: 0;
        padding-left: var(--spacing-m);
        padding-right: var(--spacing-m);
    }
}
}

@layer base {

.details .text-block .text-block-column {
    margin-top: 0 !important;
}

/* stylelint-disable-next-line max-line-length */
:is(.text-block[text-block-media-position*="beside"], .text-block[text-block-media-position*="inside"], .text-block[text-block-media-position*="above"]) .text-block-column {
    margin-top: var(--text-block-grid-gap);
}

.text-block[text-block-media-position*="below"] .text-block-column {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--text-block-column-gap);
    justify-content: flex-end;
}

/* stylelint-disable-next-line max-line-length */
:is(.text-block[text-block-media-position*="beside"], .text-block[text-block-media-position*="inside"], .text-block[text-block-media-position="above"]) .text-block__content {
    margin-top: var(--text-block-column-gap);
}
}

@layer base {

@media screen and (min-width: 768px) {
    .text-block[text-block-media-position="inside-left"],
    .text-block[text-block-media-position="inside-right"],
    .text-block[text-block-media-position="beside-left"],
    .text-block[text-block-media-position="beside-right"] {
        --text-block-column-gap: var(--spacing-xl);
    }

    /* stylelint-disable-next-line max-line-length */
    :is(.text-block[text-block-media-position*="beside"], .text-block[text-block-media-position*="inside"], .text-block[text-block-media-position*="above"]) .text-block-column {
        margin-top: 0;
    }

    .text-block[text-block-media-position*="above"] .text-block__content {
        margin-top: var(--text-block-column-gap);
    }

    /* TEXT BLOCK MEDIA BESIDE */
    .text-block[text-block-media-position*="beside"] .text-block-column {
        --text-block-column-display: grid;
        --text-block-column-grid-template-columns: 1fr 1fr;

        display: var(--text-block-column-display);
        grid-template-columns: var(--text-block-column-grid-template-columns);
        grid-gap: var(--text-block-column-gap);
        grid-auto-flow: dense;
    }

    /* TEXT BLOCK MEDIA LEFT INSIDE */
    .text-block[text-block-media-position="inside-left"] .text-block-column {
        transform: translateX(var(--text-block-grid-gap));
    }

    /* TEXT BLOCK MEDIA RIGHT INSIDE */
    .text-block[text-block-media-position="inside-right"] .text-block-column {
        transform: translateX(calc(var(--text-block-grid-gap) * -1));
    }

    .text-block[text-block-media-position="inside-left"] .text-block__content,
    .text-block[text-block-media-position="inside-right"] .text-block__content,
    .text-block[text-block-media-position="beside-left"] .text-block__content,
    .text-block[text-block-media-position="beside-right"] .text-block__content {
        margin-top: 0;
    }
}
}

@layer base {

@media screen and (min-width: 1200px) {
    .text-block[text-block-media-position="inside-left"] .text-block-column {
        transform: translateX(calc(var(--text-block-grid-gap) / 2));
    }

    .text-block[text-block-media-position="inside-right"] .text-block-column {
        transform: translateX(calc(var(--text-block-grid-gap) * -.5));
    }
}
}

@layer base {

:root {
    /* Fallback values for the font weight vars, needed when "Font set: Provided via CSS" is selected */
    --font-weight-text-normal: normal;
    --font-weight-text-bold: bold;
    --font-weight-headline: bold;
}

h1,
*[type-size="font--alpha"],
.font--alpha {
    --text-tag-font-size: var(--font-size-xxxl);
    --text-tag-font-weight: var(--font-weight-headline);
    --text-tag-line-height: var(--line-height-xs);
    --text-tag-margin-bottom: var(--spacing-normal);
}

h2,
*[type-size="font--beta"],
.font--beta {
    --text-tag-font-size: var(--font-size-xxl);
    --text-tag-font-weight: var(--font-weight-headline);
    --text-tag-line-height: var(--line-height-xs);
    --text-tag-margin-bottom: var(--spacing-normal);
}

h3,
*[type-size="font--gamma"],
.font--gamma {
    --text-tag-font-size: var(--font-size-xl);
    --text-tag-font-weight: var(--font-weight-headline);
    --text-tag-line-height: var(--line-height-s);
    --text-tag-margin-bottom: var(--spacing-normal);
}

h4,
*[type-size="font--delta"],
.font--delta {
    --text-tag-font-size: var(--font-size-l);
    --text-tag-font-weight: var(--font-weight-headline);
    --text-tag-line-height: var(--line-height-s);
    --text-tag-margin-bottom: var(--spacing-normal);
}

h5,
*[type-size="font--epsilon"],
.font--epsilon {
    --text-tag-font-size: var(--font-size-m);
    --text-tag-font-weight: var(--font-weight-headline);
    --text-tag-line-height: var(--line-height-s);
    --text-tag-margin-bottom: var(--spacing-normal);
}

h6,
*[type-size="font--omega"],
.font--omega {
    --text-tag-font-size: var(--font-size-ms);
    --text-tag-font-weight: var(--font-weight-headline);
    --text-tag-line-height: var(--line-height-s);
    --text-tag-margin-bottom: var(--spacing-normal);
}

p,
ul,
ol,
table {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-text-normal);
    line-height: var(--line-height-normal);
    font-family: var(--font-family-text);
    color: var(--color-font);
}

ul,
ol {
    padding-left: 0;
    margin: var(--spacing-normal) 0 var(--spacing-normal);
}

main > :is(ul, ol) {
    padding-left: var(--spacing-normal);
}

:is(ul, ol) :is(ul, ol) {
    margin: 0 0 0 var(--spacing-l);
}

h1,
h2,
h3,
h4,
h5,
h6,
*[type-size="font--alpha"],
*[type-size="font--beta"],
*[type-size="font--gamma"],
*[type-size="font--delta"],
*[type-size="font--epsilon"],
*[type-size="font--omega"],
.font--alpha,
.font--beta,
.font--gamma,
.font--delta,
.font--epsilon,
.font--omega {
    font-size: var(--text-tag-font-size);
    font-weight: var(--text-tag-font-weight);
    line-height: var(--text-tag-line-height);
    margin-bottom: var(--text-tag-margin-bottom);
    font-family: var(--font-family-headline);
    color: var(--color-headline);
    text-decoration: none;
}

/* stylelint-disable indentation */
:is(main, .chapter) > :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    *[type-size="font--alpha"],
    *[type-size="font--beta"],
    *[type-size="font--gamma"],
    *[type-size="font--delta"],
    *[type-size="font--epsilon"],
    *[type-size="font--omega"],
    .font--alpha,
    .font--beta,
    .font--gamma,
    .font--delta,
    .font--epsilon,
    .font--omega
):not(:first-child) {
    margin-top: var(--spacing-between-consecutive-elements-normal);
}

:is(main, .chapter) > :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    *[type-size="font--alpha"],
    *[type-size="font--beta"],
    *[type-size="font--gamma"],
    *[type-size="font--delta"],
    *[type-size="font--epsilon"],
    *[type-size="font--omega"],
    .font--alpha,
    .font--beta,
    .font--gamma,
    .font--delta,
    .font--epsilon,
    .font--omega
):not(:first-child) + * {
    margin-top: 0;
}

/* stylelint-enable indentation */
*:not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--spacing-xl);
}

.grid-column > span:first-child + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}

:is(p, ul, ol:not(.breadcrumb__list)):last-child {
    margin-bottom: 0;
}

p + :is(p, ul, ol) {
    margin-top: var(--spacing-normal);
}

:is(h1, h2, h3, h4, h5, h6, p, ul, ol, table)[text-align="center"] {
    text-align: center;
}

.grid-column :is(p, ul, ol):first-child {
    margin-top: 0;
}

.teasertext {
    font-weight: var(--font-weight-text-bold);
}

.infotext {
    font-size: var(--font-size-ms);
}

.notes {
    font-size: var(--font-size-s);
}

[type-weight="normal"] {
    font-weight: var(--font-weight-text-normal);
}

[type-weight="bold"],
strong {
    font-weight: var(--font-weight-text-bold);
}

a {
    color: var(--color-primary);
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
span,
a {
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
            hyphens: auto;
}

p > a.button {
    display: inline-block;
}

a:not(.button):focus-visible {
    color: var(--color-primary-dark);
}

/* stylelint-disable-next-line selector-list-comma-newline-after */
:is(main, .chapter, .html-container) > :is(p, h1, h2, h3, h4, h5, h6, a) {
    width: var(--content-width-with-padding);
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

:is(main, .chapter, .html-container) > :is(p, ul:not(.card-collection), ol) {
    width: var(--content-width-with-padding);
    max-width: var(--content-max-width);
    margin-inline: auto;
}

:where(main, .chapter, .footer) > :where(h1, h2, h3, h4, h5, h6) + span + *,
:where(main, .chapter, .footer) > :where(h1, h2, h3, h4,  h5, h6) + *:not(span, h1, h2, h3, h4, h5, h6, .chapter) {
    /* important needed because of different css layers */
    margin-top: calc(var(--spacing-between-consecutive-elements-normal) / 2) !important;
}

*[type-alignment="left"],
.font--align-left {
    text-align: left;
}

*[type-alignment="center"],
.font--align-center {
    text-align: center;
}

*[type-alignment="right"],
.font--align-right {
    text-align: right;
}

*[type-color="font--primary"],
*[type-color="primary"],
.font--primary {
    color: var(--color-primary);
}

*[type-color="font--secondary"],
*[type-color="secondary"],
.font--secondary {
    color: var(--color-secondary);
}

*[type-color="font--grey"],
*[type-color="font"],
.font--grey {
    color: var(--color-font);
}

*[type-color="font-light"] {
    color: var(--color-font-light);
}

ul, ol {
    list-style-position: outside;
    padding-left: 1.1rem;
}

:where(ul, ol) li::marker {
    margin-right: var(--spacing-xxl);
    display: inline-block;
    width: 4rem;
}

/* stylelint-disable-next-line selector-no-vendor-prefix */
a:-webkit-any-link:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* stylelint-disable-next-line selector-no-vendor-prefix */
.topbar[open-nav] a:-webkit-any-link:focus-visible {
    --focus-outline-color: var(--color-bg);
}
}

@layer base {

@media (hover: hover) {
    a:not(.button):hover {
        color: var(--color-primary-dark);
    }
}
}

@layer base {

.wrap-iframe {
    padding-bottom: var(--spacing-l);
}

.wrap-iframe main {
    padding-top: 0;
}
}

@layer base {

.wrap-plugin-page:first-child,
.topbar + .wrap-plugin-page,
.wrap-navigation + .wrap--plugin-page {
    --main-padding-top: var(--topbar-height);

    padding-top: var(--main-padding-top);
}

:is(.wrap-plugin-page) > :is(p, ul:not(.card-collection), ol, h1, h2, h3, h4, h5, h6, a) {
    width: var(--content-width-with-padding);
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}
}