/* default styles for extension "tx_frontend" */
    .ce-align-left { text-align: left; }
    .ce-align-center { text-align: center; }
    .ce-align-right { text-align: right; }

    .ce-table td, .ce-table th { vertical-align: top; }

    .ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div { overflow: hidden; }

    .ce-left .ce-gallery, .ce-column { float: left; }
    .ce-center .ce-outer { position: relative; float: right; right: 50%; }
    .ce-center .ce-inner { position: relative; float: right; right: -50%; }
    .ce-right .ce-gallery { float: right; }

    .ce-gallery figure { display: table; margin: 0; }
    .ce-gallery figcaption { display: table-caption; caption-side: bottom; }
    .ce-gallery img { display: block; }
    .ce-gallery iframe { border-width: 0; }
    .ce-border img,
    .ce-border iframe {
        border: 2px solid #000000;
        padding: 0px;
    }

    .ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
        margin-bottom: 10px;
    }
    .ce-image .ce-gallery { margin-bottom: 0; }
    .ce-intext.ce-right .ce-gallery { margin-left: 10px; }
    .ce-intext.ce-left .ce-gallery { margin-right: 10px; }
    .ce-below .ce-gallery { margin-top: 10px; }

    .ce-column { margin-right: 10px; }
    .ce-column:last-child { margin-right: 0; }

    .ce-row { margin-bottom: 10px; }
    .ce-row:last-child { margin-bottom: 0; }

    .ce-above .ce-bodytext { clear: both; }

    .ce-intext.ce-left ol, .ce-intext.ce-left ul { padding-left: 40px; overflow: auto; }

    /* Headline */
    .ce-headline-left { text-align: left; }
    .ce-headline-center { text-align: center; }
    .ce-headline-right { text-align: right; }

    /* Uploads */
    .ce-uploads { margin: 0; padding: 0; }
    .ce-uploads li { list-style: none outside none; margin: 1em 0; }
    .ce-uploads img { float: left; padding-right: 1em; vertical-align: top; }
    .ce-uploads span { display: block; }

    /* Table */
    .ce-table { width: 100%; max-width: 100%; }
    .ce-table th, .ce-table td { padding: 0.5em 0.75em; vertical-align: top; }
    .ce-table thead th { border-bottom: 2px solid #dadada; }
    .ce-table th, .ce-table td { border-top: 1px solid #dadada; }
    .ce-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }
    .ce-table-bordered th, .ce-table-bordered td { border: 1px solid #dadada; }

    /* Space */
    .frame-space-before-extra-small { margin-top: 1em; }
    .frame-space-before-small { margin-top: 2em; }
    .frame-space-before-medium { margin-top: 3em; }
    .frame-space-before-large { margin-top: 4em; }
    .frame-space-before-extra-large { margin-top: 5em; }
    .frame-space-after-extra-small { margin-bottom: 1em; }
    .frame-space-after-small { margin-bottom: 2em; }
    .frame-space-after-medium { margin-bottom: 3em; }
    .frame-space-after-large { margin-bottom: 4em; }
    .frame-space-after-extra-large { margin-bottom: 5em; }

    /* Frame */
    .frame-ruler-before:before { content: ''; display: block; border-top: 1px solid rgba(0,0,0,0.25); margin-bottom: 2em; }
    .frame-ruler-after:after { content: ''; display: block; border-bottom: 1px solid rgba(0,0,0,0.25); margin-top: 2em; }
    .frame-indent { margin-left: 15%; margin-right: 15%; }
    .frame-indent-left { margin-left: 33%; }
    .frame-indent-right { margin-right: 33%; }
/* default styles for extension "tx_form" */
		.captcha { margin-bottom: .5rem; }
		.captcha a { margin-left: .5rem; }
		.captcha--reloading img { opacity: 0.5; }
		.captcha--reloading a { cursor: auto; }
		.captcha--spin svg { animation: spin 0.8s infinite linear; }
		@keyframes spin {
           from {transform:rotate(359deg);}
           to {transform:rotate(0deg);}
        }

@font-face {
	font-family: "Noto Sans";
	src:
		url('../../../_assets/d6fd4445184ac906657618690700b40a/fonts/Noto_Sans/NotoSans.ttf') format("truetype"),
		url('../../../_assets/d6fd4445184ac906657618690700b40a/fonts/Noto_Sans/NotoSans_Italic.ttf') format("truetype");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Panton Narrow";
	src:
		url('../../../_assets/d6fd4445184ac906657618690700b40a/fonts/Panton_Narrow/PantonNarrowBlack.otf') format("truetype"),
		url('../../../_assets/d6fd4445184ac906657618690700b40a/fonts/Panton_Narrow/PantonNarrowBlack_Italic.otf') format("truetype");
	font-style: normal;
	font-display: swap;
}
/* DELO Variables */
:root {
	/* #region colors */
	--color-black: #414140;
	--color-blue: #0093d6;
	--color-light-blue: #0093d626;
	--color-dark-blue: #003154;
	--color-gray-5: #f2f4f6;
	--color-gray-10: #e8ebec;
	--color-gray-20: #d7d9da;
	--color-gray-30: #c1c4c6;
	--color-gray-40: #adb0b2;
	--color-gray-50: #969a9c;
	--color-gray-60: #808486;
	--color-gray-70: #696d6e;
	--color-magenta: #c7066e;
	--color-orange: #f18700;
	--color-orange-lite: #f8ae4f;
	--color-white: #ffffff;
	/* #endregion colors */

	--desktop-width: 2200;

	/* #region font sizes */
	--fz-h1-highlight: clamp(105px, calc(120 * 100 / var(--desktop-width) * 1vw), 120px);
	--fz-h1-highlight-subline: clamp(26px, calc(48 * 100 / var(--desktop-width) * 1vw), 48px);

	--fz-h1-headline: clamp(56px, calc(64 * 100 / var(--desktop-width) * 1vw), 64px);
	--fz-h1-preline: clamp(22px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
	--fz-h1-subline: clamp(26px, calc(28 * 100 / var(--desktop-width) * 1vw), 28px);

	--fz-h2-big-headline: clamp(56px, calc(64 * 100 / var(--desktop-width) * 1vw), 64px);
	--fz-h2-big-preline: clamp(22px, calc(28 * 100 / var(--desktop-width) * 1vw), 24px);
	--fz-h2-big-subline: clamp(26px, calc(28 * 100 / var(--desktop-width) * 1vw), 28px);

	--fz-h2-headline: clamp(48px, calc(56 * 100 / var(--desktop-width) * 1vw), 56px);
	--fz-h2-preline: clamp(22px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
	--fz-h2-subline: clamp(26px, calc(28 * 100 / var(--desktop-width) * 1vw), 28px);

	--fz-h3-headline: clamp(30px, calc(36 * 100 / var(--desktop-width) * 1vw), 36px);
	--fz-h3-preline: clamp(20px, calc(22 * 100 / var(--desktop-width) * 1vw), 22px);
	--fz-h3-subline: clamp(24px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);

	--fz-h4-headline: clamp(26px, calc(32 * 100 / var(--desktop-width) * 1vw), 32px);
	--fz-h4-preline: clamp(20px, calc(22 * 100 / var(--desktop-width) * 1vw), 22px);
	--fz-h4-subline: clamp(24px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);

	--fz-h5-headline: clamp(20px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
	--fz-h5-preline: clamp(16px, calc(18 * 100 / var(--desktop-width) * 1vw), 18px);
	--fz-h5-subline: clamp(18px, calc(20 * 100 / var(--desktop-width) * 1vw), 20px);

	--fz-h6-headline: clamp(18px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
	--fz-h6-preline: clamp(16px, calc(18 * 100 / var(--desktop-width) * 1vw), 18px);
	--fz-h6-subline: clamp(18px, calc(20 * 100 / var(--desktop-width) * 1vw), 20px);

	--fz-text: clamp(16px, calc(18 * 100 / var(--desktop-width) * 1vw), 18px);
	--fz-caption: 14px;

	--fz-title-text: clamp(22px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);

	--fz-tag: clamp(14px, calc(16 * 100 / var(--desktop-width) * 1vw), 16px);
	--fz-quote: clamp(20px, calc(28 * 100 / var(--desktop-width) * 1vw), 28px);
	--fz-note: 12px;

	--fz-primary-nav-links: clamp(16px, calc(20 * 100 / var(--desktop-width) * 1vw), 20px);

	@media only screen and (max-width: 980px) {
		--desktop-width: 650;
		--text-desktop-width: 420;

		--fz-h1-highlight: clamp(44px, calc(120 * 100 / var(--desktop-width) * 1vw), 105px);
		--fz-h1-highlight-subline: clamp(18px, calc(48 * 100 / var(--desktop-width) * 1vw), 26px);

		--fz-h1-headline: clamp(40px, calc(56 * 100 / var(--desktop-width) * 1vw), 56px);
		--fz-h1-preline: clamp(16px, calc(22 * 100 / var(--desktop-width) * 1vw), 22px);
		--fz-h1-subline: clamp(20px, calc(26 * 100 / var(--desktop-width) * 1vw), 26px);

		--fz-h2-big-headline: clamp(36px, calc(56 * 100 / var(--desktop-width) * 1vw), 56px);
		--fz-h2-big-preline: clamp(18px, calc(22 * 100 / var(--desktop-width) * 1vw), 22px);
		--fz-h2-big-subline: clamp(20px, calc(26 * 100 / var(--desktop-width) * 1vw), 26px);

		--fz-h2-headline: clamp(32px, calc(48 * 100 / var(--desktop-width) * 1vw), 48px);
		--fz-h2-preline: clamp(16px, calc(22 * 100 / var(--desktop-width) * 1vw), 22px);
		--fz-h2-subline: clamp(20px, calc(26 * 100 / var(--desktop-width) * 1vw), 26px);

		--fz-h3-headline: clamp(22px, calc(30 * 100 / var(--desktop-width) * 1vw), 30px);
		--fz-h3-preline: clamp(14px, calc(20 * 100 / var(--desktop-width) * 1vw), 20px);
		--fz-h3-subline: clamp(16px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);

		--fz-h4-headline: clamp(18px, calc(26 * 100 / var(--desktop-width) * 1vw), 26px);
		--fz-h4-preline: clamp(14px, calc(20 * 100 / var(--desktop-width) * 1vw), 20px);
		--fz-h4-subline: clamp(16px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);

		--fz-h5-headline: clamp(16px, calc(20 * 100 / var(--desktop-width) * 1vw), 20px);
		--fz-h5-preline: clamp(12px, calc(16 * 100 / var(--desktop-width) * 1vw), 16px);
		--fz-h5-subline: clamp(14px, calc(18 * 100 / var(--desktop-width) * 1vw), 18px);

		--fz-h6-headline: clamp(14px, calc(18 * 100 / var(--desktop-width) * 1vw), 18px);
		--fz-h6-preline: clamp(12px, calc(16 * 100 / var(--desktop-width) * 1vw), 16px);
		--fz-h6-subline: clamp(12px, calc(18 * 100 / var(--desktop-width) * 1vw), 18px);

		--fz-text: clamp(12px, calc(16 * 100 / var(--text-desktop-width) * 1vw), 16px);

		--fz-title-text: clamp(16px, calc(22 * 100 / var(--text-desktop-width) * 1vw), 22px);

		--fz-tag: clamp(10px, calc(14 * 100 / var(--desktop-width) * 1vw), 14px);
		--fz-quote: clamp(14px, calc(20 * 100 / var(--desktop-width) * 1vw), 20px);
		--fz-caption: 12px;
	}

	/* #endregion font sizes */

	/* #region letter spacing */
	--ls-headline-xl: 1.92px;
	--ls-headline-l: 1.68px;
	--ls-headline-m: 1.44px;
	--ls-headline-s: 1.32px;
	--ls-headline-xs: 1.2px;

	--ls-subheadline-xl: 0.32px;
	--ls-subheadline-l: 0.28px;
	--ls-subheadline-m: 0.24px;
	--ls-subheadline-s: 0.22px;
	--ls-subheadline-xs: 0.2px;
	--ls-text: 0.18px;
	--ls-text-small: 0.12px;

	@media only screen and (max-width: 767px) {
		--ls-headline-xl: 1.2px;
		--ls-headline-l: 0.96px;
		--ls-headline-m: 0.84px;
		--ls-headline-s: 0.72px;
		--ls-headline-xs: 0.6px;

		--ls-subheadline-xl: 0.2px;
		--ls-subheadline-l: 0.18px;
		--ls-subheadline-m: 0.18px;
		--ls-subheadline-s: 0.16px;
		--ls-subheadline-xs: 0.14px;
		--ls-text: 0.12px;
	}

	/* #endregion letter spacing */

	/* #region spacing */
	--spacing-xxl: clamp(128px, calc(256 * 100 / var(--desktop-width) * 1vw), 256px);
	--spacing-xl: clamp(96px, calc(128 * 100 / var(--desktop-width) * 1vw), 128px);
	--spacing-l: clamp(64px, calc(96 * 100 / var(--desktop-width) * 1vw), 96px);
	--spacing-m: clamp(32px, calc(64 * 100 / var(--desktop-width) * 1vw), 64px);
	--spacing-s: clamp(24px, calc(32 * 100 / var(--desktop-width) * 1vw), 32px);
	--spacing-xs: clamp(24px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
	--spacing-xxs: clamp(16px, calc(16 * 100 / var(--desktop-width) * 1vw), 16px);
	--spacing-3xs: clamp(12px, calc(12 * 100 / var(--desktop-width) * 1vw), 12px);
	--spacing-4xs: clamp(8px, calc(8 * 100 / var(--desktop-width) * 1vw), 8px);

	--card-frame-thick: clamp(48px, calc(48 * 100 / var(--desktop-width) * 1vw), 48px);
	--card-frame-thin: clamp(24px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);

	@media only screen and (max-width: 980px) {
		--spacing-xxl: clamp(96px, calc(128 * 100 / var(--desktop-width) * 1vw), 128px);
		--spacing-xl: clamp(64px, calc(96 * 100 / var(--desktop-width) * 1vw), 96px);
		--spacing-l: clamp(32px, calc(64 * 100 / var(--desktop-width) * 1vw), 64px);
		--spacing-m: clamp(32px, calc(32 * 100 / var(--desktop-width) * 1vw), 32px);
		--spacing-s: clamp(24px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
		--spacing-xs: clamp(16px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
		--spacing-xxs: clamp(12px, calc(16 * 100 / var(--desktop-width) * 1vw), 16px);
		--spacing-3xs: clamp(8px, calc(12 * 100 / var(--desktop-width) * 1vw), 12px);
		--spacing-4xs: clamp(6px, calc(8 * 100 / var(--desktop-width) * 1vw), 8px);

		--card-frame-thick: clamp(32px, calc(48 * 100 / var(--desktop-width) * 1vw), 48px);
		--card-frame-thin: clamp(16px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
	}

	/* #endregion spacing */

	/* #region Layout Grid */
	--layout-grid-gutter: clamp(24px, calc(44 * 100 / var(--desktop-width) * 1vw), 44px);
	--layout-grid-margin: clamp(28px, calc(298 * 100 / var(--desktop-width) * 1vw), 298px);
	--layout-grid-columns: 12;

	@media only screen and (max-width: 1200px) {
		--layout-grid-columns: 12;
	}

	@media only screen and (max-width: 980px) {
		--layout-grid-gutter: clamp(16px, calc(24 * 100 / var(--desktop-width) * 1vw), 24px);
		--layout-grid-margin: clamp(16px, calc(28 * 100 / var(--desktop-width) * 1vw), 28px);
		--layout-grid-columns: 8;
	}

	@media only screen and (max-width: 767px) {
		--layout-grid-columns: 4;
	}

	/* #endregion Layout Grid */

	--max-content-width: unset;
	--content-width: clamp(50vw, calc(90vw - max(0px, (100vw - 1324px) * 0.5)), 90vw);

	--box-shadow: 0 0px 40px 10px rgba(0, 0, 0, 0.1);
	--transition-duration: 0.3s;

	--top-nav-height: clamp(36px, calc(40 * 100 / var(--desktop-width) * 1vw), 40px);
	--main-nav-height: clamp(80px, calc(100 * 100 / var(--desktop-width) * 1vw), 100px);
	--nav-height: calc(var(--top-nav-height) + var(--main-nav-height));

	/* Variable to determine the spacing needed to get the default content width */
	/* Used if no .container is used because one side needs to be fullwidth */
	--content-width-padding: calc((100vw - var(--content-width)) / 2);

	@media only screen and (max-width: 980px) {
		--nav-height: 52px;
	}

	interpolate-size: allow-keywords;
}
header {
	position: sticky;
	top: 0;
	z-index: 999;

	display: flex;
	flex-direction: column;

	ul,
	li {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.desktop-menu {
		@media only screen and (max-width: 980px) {
			display: none;
		}

		.top-menu {
			position: relative;
			height: var(--top-nav-height);
			overflow: unset;

			> .container {
				height: 100%;

				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap: var(--spacing-s);

				a {
					text-decoration: none;
					color: var(--color-black);
				}

				.top-navigation {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: var(--spacing-s);
					height: 100%;

					.nav-item a {
						height: 100%;
						display: flex;
						align-items: center;
					}

					/* Nav Items outside to work for main navigation as well */
				}

				.language-switcher {

					.active-language {
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 5px;
						cursor: pointer;

						img {
							aspect-ratio: 1;
							height: 24px;
						}

						span {
							text-transform: uppercase;
						}
					}

					.language-selection {
						position: absolute;
						top: 100%;
						background-color: white;
						width: 100%;
						left: 0;
						box-shadow: 0 35px 50px -20px rgba(0, 0, 0, 0.1);

						height: 0;
						overflow: hidden;
						transition: height 0.3s ease-out;

						> .container {
							display: flex;
							justify-content: space-between;
							align-items: center;
							gap: 25px;
							height: 100%;
							padding-block: var(--spacing-m);

							> .h4-headline {
								margin: 0;
							}

							ul {
								list-style: none;
								padding: 0;
								display: flex;
								align-items: center;
								gap: 32px;

								.lang-item {
									&.active a {
										color: var(--color-blue);
										text-decoration: underline;
										text-underline-offset: 6px;
									}

									&:hover {
										a {
											color: var(--color-blue);
										}
									}
								}
							}
						}

					}

					&:hover .language-selection {
						height: 170px;
					}

				}
			}
		}

		.main-menu {
			height: var(--main-nav-height);
			border-bottom: 1px solid #e3e3e3;

			> .container {
				height: 100%;

				display: flex;
				justify-content: space-between;
				align-items: center;

				.logo-container {
					height: clamp(24px, calc(27 * 100 / var(--desktop-width) * 1vw), 30px);
					line-height: 0;

					img {
						height: 100%;
						object-fit: contain;
						width: auto;
					}

					@media only screen and (max-width: 980px) {
						height: clamp(21px, calc(27 * 100 / var(--desktop-width) * 1vw), 24px);
					}
				}

				nav.main-navigation {
					margin-left: auto;

					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100%;

					.nav-item {
						.nav-link {
							font-size: var(--fz-h6-subline);
							font-weight: 400;
							line-height: 150%;
							letter-spacing: 0.2px;
							cursor: pointer;

							height: 100%;
							display: flex;
							align-items: center;
							padding-inline: calc(var(--spacing-m) / 2);
						}

						/* Rest of Nav Items outside to work for topheader as well */
					}
				}

				.search {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					margin-left: var(--spacing-s);

					img {
						height: 28%;
						aspect-ratio: 1;
						width: auto;
						cursor: pointer;
					}

					.breadcrumb img {
						height: 10px;
					}

					.search-container {
						position: absolute;
						top: 100%;
						background-color: white;
						width: 100%;
						left: 0;
						box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.1);

						height: 0;
						overflow: hidden;
						transition: height 0.3s ease-out;

						> .container {
							display: flex;
							align-items: center;
							height: fit-content;
							padding-block: 50px;

							> .row {
								width: 100%;
							}

							input[type="text"] {
								border-radius: 0;
							}
						}

						&.open {
							height: auto;
						}
					}
				}
			}
		}

		/* #region nav-item -> For Topheader and Main Navigation */
		.nav-item {
			height: 100%;
			display: flex;
			align-items: center;

			a {
				color: var(--color-black);
				text-decoration: none;
				width: 100%;
			}

			&:hover {
				> a {
					color: var(--color-blue);
				}
			}

			> .primary-sub-nav-container {
				position: absolute;
				top: 100%;
				background-color: white;
				width: 100%;
				left: 0;
				box-shadow: 0 35px 50px -20px rgba(0, 0, 0, 0.1);

				height: 0;
				overflow: hidden;
				transition: height 0.3s ease-out;

				&.open {
					/* Height gets calculated dynamically with JS */
					height: auto;
				}

				.container {
					display: flex;
					gap: var(--spacing-m);
					height: auto;
					/* Set 20px hard padding to leave the sub menus open a bit longer in case of accidental leaving of the hover area. This padding needs to be removed from the margin to keep the same spacing as before.
					Also these 20px (40px since x2) are added hardcoded in Javascript in the MenuInitializer.ts */
					padding-block: 20px;
					margin-block: calc(var(--spacing-l) - 20px);
					transition: height 0.3s ease-out;

					.nav-image {
						opacity: 1;
						/* 200ms is connected to settimeout */
						transition: opacity 0.2s ease-in-out;
						object-fit: cover;

						&.hide {
							opacity: 0;
						}
					}

					.sub-nav-container {
						display: flex;
						flex-direction: column;
						gap: 0;

						position: relative;
						height: fit-content;
						width: calc(100% / 4);

						.sub-nav-item {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-right: var(--spacing-m);
							padding-left: var(--spacing-xxs);
							border-left: 1px solid var(--color-black);

							&:not(:last-of-type, :first-of-type) {
								padding-block: var(--spacing-3xs);
							}

							&:first-of-type {
								padding-bottom: var(--spacing-3xs);
							}

							&:last-of-type {
								padding-top: var(--spacing-3xs);
							}

							&:first-of-type:last-of-type {
								padding-block: 0;
							}

							.sub-nav-container {
								display: none;

								position: absolute;
								width: 100%;
								left: 100%;
								top: 0;
							}

							&.active {
								> a {
									color: var(--color-blue);
								}

								> .sub-nav-container {
									display: flex;
								}

								> img {
									content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/arrow_right_blue.svg');
								}
							}

						}
					}
				}
			}
		}

		/* #endregion nav-item -> For Topheader and Main Navigation */
	}

	.mobile-menu {
		display: none;
		border-bottom: 1px solid #e3e3e3;

		@media only screen and (max-width: 980px) {
			display: flex;
		}

		.main-menu {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--spacing-xs);
			height: var(--nav-height);

			position: relative;
			z-index: 2;

			.submenu-back-container {
				position: absolute;
				top: -100%;
				transition: 0.3s ease-in-out;
				height: 100%;
				display: flex;
				align-items: center;
				padding-right: var(--spacing-xxs);
				cursor: pointer;
			}

			.logo-container,
			.search,
			.language-switcher {
				/* For Fade out animation */
				position: relative;
				top: 0;
				transition: 0.3s ease-in-out;
			}

			.logo-container {
				margin-right: auto;
				line-height: 0;

				> img {
					height: 18px;
					width: auto;
				}
			}

			.search {
				line-height: 0;

				img {
					height: 16px;
					width: 16px;
				}
			}

			.language-switcher {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 5px;

				.lang-item {
					text-transform: uppercase;
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 5px;

					&:not(.active) {
						display: none;
					}
				}
			}

			.burger-menu-container {
				cursor: pointer;

				.hamburger {
					width: 16px;
					height: 11px;
					position: relative;
					margin: 0;

					.bar {
						display: block;
						width: 16px;
						height: 1px;
						position: absolute;
						background-color: var(--color-black);
						padding: 0;
						transition: all 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;

						&.bar1 {
							top: 0;
						}

						&.bar2 {
							width: 0;
							top: 6.5px;
							left: 6.5px;
							transform: rotate(90deg);
						}

						&.bar3 {
							width: 0;
							top: 6.5px;
							left: 6.5px;
						}

						&.bar3 {
							right: 0;
						}

						&.bar4 {
							bottom: 0;
							top: 5px;
						}

						&.bar5 {
							bottom: 0;
						}

					}
				}
			}
		}

		.expanded-menu {
			position: fixed;
			right: 0;
			top: var(--nav-height);
			height: calc(100dvh - var(--nav-height));
			width: 0;
			transition: 0.5s ease-in-out;
			overflow: hidden;

			> .container {
				position: relative;
				height: 100%;

				.container {
					height: 100%;
				}
			}

			:is(.main-navigation, .search, .language-switcher):not(.open) {
				display: none;
			}

			.main-navigation {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				overflow: auto;

				.primary-nav > .container,
				.secondary-nav > .container {
					display: flex;
					flex-direction: column;
					gap: var(--spacing-xs);
					padding-block: var(--spacing-xs);
					width: 80%;
				}

				.secondary-nav {
					background-color: var(--color-gray-5);
					height: inherit;

					.nav-item {
						a {
							font-size: var(--fz-text);
						}
					}
				}

				.nav-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					a {
						color: var(--color-black);
						text-decoration: none;
						/* font-size: 14px; */
						line-height: 1.5;

						&:not(.secondary-nav .nav-item a) {
							font-size: var(--fz-title-text);
						}
					}

					.open-sub-nav {
						padding: 5px;
						cursor: pointer;
					}

					.sub-nav-container {
						width: 0;
						height: 100%;
						position: absolute;
						top: 0;

						right: 0;
						background-color: white;
						transition: 0.3s ease-in-out;
						white-space: nowrap;

						> .container {
							display: flex;
							flex-direction: column;
							gap: var(--spacing-xs);
							width: 80%;
						}

						&.open {
							width: 100%;
						}

						.superior-menu {
							padding-block: var(--spacing-xs);
							border-bottom: 1px solid var(--color-black);

							p {
								font-size: 14px;
								margin: 0;
							}
						}

						.sub-nav-item {
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
			}

			.search {
				display: flex;
				padding-top: 15px;

				.container {
					width: 80%;
				}

				.tx-solr-search-form {
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: 20px;

					.h4-headline {
						max-width: 80%;
					}

					.tx-solr-search-form-pi-results {
						position: relative;
						width: 100%;
						margin-top: 20px;

						.input-group {
							display: flex;
							gap: 15px;
						}

						input[type="text"] {
							width: 100%;
							border: none;
							outline: none;
							border-bottom: 1px solid var(--color-black);
							border-radius: 0;
							font-size: var(--fz-text);
							line-height: 1.5;
						}
					}

				}
			}

			.language-switcher {
				display: flex;
				flex-direction: column;
				gap: 15px;
				padding-top: 15px;

				&.container {
					width: 80%;
				}

				.lang-item > a,
				.lang-item > span {
					font-size: 14px;
					text-decoration: none;
					color: var(--color-black);
				}
			}
		}

		&.expanded {
			.expanded-menu {
				width: 100%;
			}

			&:has(.expanded-menu .sub-nav-container.open) {
				.submenu-back-container {
					top: 0;
				}
			}

			.main-menu {

				.logo-container,
				.search,
				.language-switcher {
					/* For Fade out animation */
					top: -100%;
				}

				.burger-menu-container {
					.hamburger {
						.bar1 {
							top: 6.5px;
							background-color: transparent;
						}

						.bar2 {
							left: 0px;
							width: 16px;
							transform: rotate(45deg);
						}

						.bar3 {
							left: 0;
							width: 16px;
							transform: rotate(-45deg);
						}

						.bar4 {
							background-color: transparent;
						}

						.bar5 {
							bottom: 6.5px;
							background-color: transparent;
						}
					}
				}
			}
		}
	}


}

.search-results {
	.result {
		display: flex;
		flex-direction: column;
		margin-top: 25px;

		.crumb {
			color: var(--color-gray-60);
			font-size: smaller;
			margin-top: 12px;
		}

		/* Hide anchor style */
		&:link {
			text-decoration: inherit;
			color: inherit;
		}

		&:visited {
			text-decoration: inherit;
			color: inherit;
		}
	}
}
footer {
    overflow: hidden;

    .container {
        .footer-slider {
            padding-block: var(--spacing-xxs);

            swiper-slide {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-block: 3px;

                img {
                    transition: 0.2s;
                    object-fit: contain;

                    height: 100%;
                    max-height: clamp(80px, calc(148 * 100 / var(--desktop-width) * 1vw), 100px);
                    width: auto;

                    &:hover {
                        scale: 1.05;
                    }
                }
            }

            @media only screen and (max-width: 980px) {
                padding-block: var(--spacing-3xs);

                swiper-slide {
                    img {
                        max-height: clamp(60px, calc(148 * 100 / var(--desktop-width) * 1vw), 80px);
                    }
                }
            }
        }

        .footer-nav-container {
            display: flex;
            justify-content: space-between;
            padding-block: var(--spacing-m);

            .icons-container {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: var(--spacing-s);
                width: 30%;

                .delo-logo {
                    height: clamp(24px, calc(27 * 100 / var(--desktop-width) * 1vw), 30px);
                    width: fit-content;
                }

                .social-icons {
                    display: flex;
                    gap: 10px;
                    transform: translateY(50%);

                    @media only screen and (max-width: 980px) {
                        display: none;
                    }

                    img {
                        height: 32px;
                        width: auto;
                        object-fit: contain;
                    }
                }
            }

            @media only screen and (max-width: 980px) {
                flex-direction: column;
                gap: 32px;
                padding-block: var(--spacing-l) var(--spacing-s);

                .icons-container {
                    .delo-logo {
                        height: clamp(21px, calc(27 * 100 / var(--desktop-width) * 1vw), 24px);
                    }
                }

            }

            .footer-nav {
                flex: 1 1 0px;
                display: flex;
                justify-content: space-between;

                @media only screen and (max-width: 980px) {
                    flex-direction: column;
                }

                ul.nav-folder {
                    display: flex;
                    flex-direction: column;
                    gap: var(--spacing-xxs);

                    margin: 0;
                    padding: 0;
                    list-style: none;

                    .nav-folder-headline {
                        font-weight: 700;
                        color: var(--color-blue);
                        margin-bottom: 10px;


                        @media only screen and (max-width: 980px) {
                            font-size: 12px;
                            cursor: pointer;
                            margin-bottom: 0;
                        }
                    }

                    ul {
                        list-style: none;
                        padding: 0 !important;
                        margin: 0;

                        li.nav-item {
                            line-height: 1;
                            list-style: none !important;

                            a.nav-link {
                                display: inline-block;
                                color: inherit;
                                text-decoration: none;
                                font-style: normal;
                            }


                            &::before {
                                display: none !important;
                                content: "" !important;
                            }
                        }

                        @media only screen and (max-width: 980px) {
                            &.open {
                                max-height: 300px;
                            }

                            transition: 0.3s ease-in-out;
                            max-height: 0;
                            overflow: hidden;

                            li.nav-item {
                                text-indent: 0 !important;
                                padding-left: 0 !important;

                                &:last-child {
                                    margin-bottom: 25px;
                                }
                            }
                        }
                    }

                }
            }

            .social-icons-mobile {
                display: none;
                gap: 6px;

                @media only screen and (max-width: 980px) {
                    display: flex;
                }

                img {
                    height: 32px;
                    width: auto;
                    object-fit: contain;
                }
            }
        }

        .copyright-container {
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            padding-block: var(--spacing-s);

            @media only screen and (max-width: 980px) {
                padding-block: 20px;
            }

            p {
                font-size: 12px;
                line-height: 150%;
                margin: 0;
            }
        }
    }
}
html {
	--scroll-offset: 100px;
	scroll-padding-top: calc(var(--nav-height) + var(--scroll-offset));
	scroll-behavior: smooth;

	@media only screen and (max-width: 980px) {
		--scroll-offset: 50px;
	}

	overflow-x: hidden;
}

body {
	background-color: var(--color-white);
	margin: 0;
	min-height: 100vh;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;

	/* Default typography */
	font-family: "Noto Sans";
	font-size: var(--fz-text);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--ls-text);
	color: var(--color-black);
	hyphens: auto;
}

footer {
	position: relative;
}

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

main {
	flex: 1 1 0px;
}

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

	&:not(:first-child) {
		&:not(:is(h1, h2, h3, h4, h5, h6, [class^="h"][class*="-preline"]) + &) {
			margin-top: var(--spacing-s);
		}
	}
}

p {
	margin: 0 0 10px 0;
}

p:last-child {
	margin: 0;
}

input,
button {
	font-family: "Noto Sans";
	color: inherit;
}

div:has(#CookiebotWidget) {
	z-index: 99;
}

/* Default text link */
:is(p, ul:not(.pagination) > li) > a:not(.delo-button, .sub-nav-item-link, .nav-link, .page-link, .CybotCookiebotDialogNavItemLink, .lang-item a),
.breadcrumb-link {
	position: relative;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	width: fit-content;

	background-image: linear-gradient(var(--color-orange));
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: right bottom;
	transition: background-size 1.1s cubic-bezier(0.19, 1, 0.22, 1);

	&:hover {
		animation: text-link 1.1s linear forwards;
		animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	}

}

@keyframes text-link {
	0% {
		background-size: 100% 2px;
		background-position: right bottom;
	}

	50% {
		background-size: 0% 2px;
		background-position: right bottom;
	}

	51% {
		background-size: 0% 2px;
		background-position: left bottom;
	}

	100% {
		background-size: 100% 2px;
		background-position: left bottom;
	}
}

@keyframes text-link-2 {
	0% {
		background-size: 0% 2px;
		background-position: left bottom;
	}

	100% {
		background-size: 100% 2px;
		background-position: left bottom;
	}
}

ul:not(.sub-nav-container, .CybotCookiebotDialogNavItems, #CybotCookiebotDialogDetailBodyContentCookieContainerTypes, .nav-folder, .pagination, .language-selection ul, .expanded-menu ul) {
	padding: 0 0 0 25px;
	list-style-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/list_icon_blue.svg');
	display: flex;
	flex-direction: column;
	gap: 12px;

	@media only screen and (max-width: 767px) {
		list-style-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/list_icon_blue_mobile.svg');
		padding: 0;
		gap: 7px;

		/* Removes ::marker */
		list-style: none;

		li {
			text-indent: -17px;
			padding-left: 15px;
		}

		li::before {
			content: "";
			background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/list_icon_blue_mobile.svg');
			background-size: 12px 18px;
			display: inline-block;
			width: 12px;
			height: 18px;
			margin-right: 5px;
			vertical-align: sub;
		}
	}
}

/* #region generic Elements */

/* #region h1 */
.h1-highlight {
	font-family: "Panton Narrow";
	font-size: var(--fz-h1-highlight);
	font-weight: 390;
	line-height: 1.05;
	letter-spacing: 6px;
	color: transparent;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: var(--color-white);

	margin-bottom: var(--spacing-s);
}

.h1-highlight-subline {
	font-size: var(--fz-h1-highlight-subline);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.48px;
}

.h1-headline {
	font-family: "Panton Narrow";
	font-size: var(--fz-h1-headline);
	font-weight: 390;
	line-height: 1.3;
	letter-spacing: var(--ls-headline-xl);

	margin-bottom: 20px;

	&:has(+ .h1-subline) {
		margin-bottom: 5px;
	}
}

.h1-preline {
	color: var(--color-blue);
	font-size: var(--fz-h1-preline);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-xl);

	margin-bottom: 32px;
}

.h1-subline {
	font-size: var(--fz-h1-subline);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-xl);

	margin-bottom: 32px;
}

@media only screen and (max-width: 980px) {
	.h1-highlight {
		letter-spacing: 2.2px;
	}


	.h1-headline {
		margin-bottom: 15px;
	}

	.h1-preline,
	.h1-subline {
		margin-bottom: 27px;
	}
}

@media only screen and (max-width: 767px) {
	.h1-headline {
		margin-bottom: 15px;
	}

	.h1-preline,
	.h1-subline {
		margin-bottom: 22px;
	}
}

/* #endregion h1 */

/* #region h2 */

.h2-big-headline {
	font-family: "Panton Narrow";
	font-size: var(--fz-h2-big-headline);
	font-weight: 390;
	line-height: 1.1;
	letter-spacing: var(--ls-headline-xl);

	margin-bottom: 24px;

	&:has(+ .h2-big-subline) {
		margin-bottom: 15px;
	}
}

.h2-big-preline {
	color: var(--color-blue);
	font-size: var(--fz-h2-big-preline);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-xl);

	margin-bottom: 40px;
}

.h2-big-subline {
	font-size: var(--fz-h2-big-subline);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-xl);

	margin-bottom: 30px;
}

.h2-headline,
h2 {
	font-family: "Panton Narrow";
	font-size: var(--fz-h2-headline);
	font-weight: 390;
	line-height: 1.3;
	letter-spacing: var(--ls-headline-l);
	word-break: break-word;
	margin-bottom: 22px;

	&:has(+ .h2-subline) {
		margin-bottom: 10px;
	}
}

.h2-preline {
	color: var(--color-blue);
	font-size: var(--fz-h2-preline);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-l);

	margin-bottom: 35px;
}

.h2-subline {
	font-size: var(--fz-h2-subline);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-l);

	margin-bottom: 35px;
}

@media only screen and (max-width: 980px) {
	.h2-big-headline {
		margin-bottom: 20px;

		&:has(+ .h2-big-subline) {
			margin-bottom: 10px;
		}
	}

	.h2-big-preline,
	.h2-big-subline {
		margin-bottom: 30px;
	}

	.h2-headline {
		margin-bottom: 17px;

		&:has(+ .h2-subline) {
			margin-bottom: 5px;
		}
	}

	.h2-preline,
	.h2-subline {
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 767px) {

	.h2-big-preline,
	.h2-big-subline {
		margin-bottom: 25px;
	}

	.h2-headline {
		margin-bottom: 17px;

		&:has(+ .h2-subline) {
			margin-bottom: 5px;
		}
	}

	.h2-preline,
	.h2-subline {
		margin-bottom: 24px;
	}
}

/* #endregion h2 */

/* #region h3 */
.h3-headline,
h3 {
	font-family: "Panton Narrow";
	font-size: var(--fz-h3-headline);
	font-weight: 390;
	line-height: 1.3;
	letter-spacing: var(--ls-headline-m);

	margin-bottom: 20px;

	&:has(+ .h3-subline) {
		margin-bottom: 10px;
	}
}

.h3-preline {
	color: var(--color-blue);
	font-size: var(--fz-h3-preline);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-m);

	margin-bottom: 30px;
}

.h3-subline {
	font-size: var(--fz-h3-subline);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-m);
	margin-bottom: 25px;
}

@media only screen and (max-width: 980px) {
	.h3-headline {
		margin-bottom: 10px;
	}

	.h3-preline {
		margin-bottom: 25px;
	}

	.h3-subline {
		margin-bottom: 15px;
	}
}

@media only screen and (max-width: 767px) {
	.h3-headline {
		margin-bottom: 15px;

		&:has(+ .h3-subline) {
			margin-bottom: 5px;
		}
	}

	.h3-preline,
	.h3-subline {
		margin-bottom: 20px;
	}
}

/* #endregion h3 */

/* #region h4 */
.h4-headline,
h4 {
	font-family: "Panton Narrow";
	font-size: var(--fz-h4-headline);
	font-weight: 390;
	line-height: 1.3;
	letter-spacing: var(--ls-headline-s);

	margin-bottom: 18px;

	&:has(+ .h4-subline) {
		margin-bottom: 10px;
	}
}

.h4-preline {
	color: var(--color-blue);
	font-size: var(--fz-h4-preline);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-s);

	margin-bottom: 35px;
}

.h4-subline {
	font-size: var(--fz-h4-subline);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-s);

	margin-bottom: 25px;
}

@media only screen and (max-width: 980px) {
	.h4-headline {
		margin-bottom: 10px;
	}

	.h4-preline {
		margin-bottom: 25px;
	}

	.h4-subline {
		margin-bottom: 15px;
	}
}

@media only screen and (max-width: 767px) {
	.h4-headline {
		margin-bottom: 18px;

		&:has(+ .h4-subline) {
			margin-bottom: 8px;
		}
	}

	.h4-preline,
	.h4-subline {
		margin-bottom: 18px;
	}
}

/* #endregion h4 */

/* #region h5 */
.h5-headline,
h5 {
	font-family: "Panton Narrow";
	font-size: var(--fz-h5-headline);
	font-weight: 390;
	line-height: 1.3;
	letter-spacing: var(--ls-headline-xs);

	margin-bottom: 18px;

	&:has(+ .h5-subline) {
		margin-bottom: 10px;
	}
}

.h5-preline {
	color: var(--color-blue);
	font-size: var(--fz-h5-preline);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-s);

	margin-bottom: 28px;
}

.h5-subline {
	font-size: var(--fz-h5-subline);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-s);
	margin-bottom: 20px;
}

@media only screen and (max-width: 980px) {
	.h5-headline {
		margin-bottom: 10px;

		&:has(+ .h5-subline) {
			margin-bottom: 5px;
		}
	}

	.h5-preline {
		margin-bottom: 20px;
	}

	.h5-subline {
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 767px) {
	.h5-headline {
		margin-bottom: 10px;

		&:has(+ .h5-subline) {
			margin-bottom: 5px;
		}
	}

	.h5-preline,
	.h5-subline {
		margin-bottom: 10px;
	}
}

/* #endregion h5 */

/* #region h6 */
.h6-headline,
h6 {
	font-family: "Panton Narrow";
	font-size: var(--fz-h6-headline);
	font-weight: 390;
	line-height: 1.3;
	letter-spacing: var(--ls-headline-xs);

	margin-bottom: 18px;

	&:has(+ .h5-subline) {
		margin-bottom: 10px;
	}
}

.h6-preline {
	color: var(--color-blue);
	font-size: var(--fz-h6-preline);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-xs);

	margin-bottom: 28px;
}

.h6-subline {
	font-size: var(--fz-h6-subline);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--ls-subheadline-xs);

	margin-bottom: 20px;
}

@media only screen and (max-width: 980px) {
	.h6-headline {
		margin-bottom: 10px;

		&:has(+ .h6-subline) {
			margin-bottom: 5px;
		}
	}

	.h6-preline {
		margin-bottom: 20px;
	}

	.h6-subline {
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 767px) {
	.h6-headline {
		margin-bottom: 10px;

		&:has(+ .h6-subline) {
			margin-bottom: 5px;
		}
	}

	.h6-preline,
	.h6-subline {
		margin-bottom: 10px;
	}
}


/* #endregion h6 */

.body-text {
	font-size: var(--fz-text);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--ls-text);
}

.title-text {
	font-size: var(--fz-title-text);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ls-text);
	margin-bottom: 1.5em;
}

.large-text {
	font-size: var(--fz-title-text);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ls-text);
	margin-bottom: 1.5em;
}

.caption {
	font-size: var(--fz-caption);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--ls-text);
	font-style: italic;
}

.quote {
	font-size: var(--fz-quote);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--ls-subheadline-l);
}

.note {
	font-size: var(--fz-note);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--ls-text-small);
}

/* #region Additional classes */

html body :is(.bold, strong, b) {
	font-weight: 700;
}

/* Specifically strong because that's what ckeditor uses */
html body strong:not(.title-text) {
	color: var(--color-blue);
}

html body .light {
	font-weight: 300;
}

html body .regular {
	font-weight: 400;
}

.hint {
	color: var(--color-orange);
}

.text-link {
	color: var(--color-orange);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;

	&.minor {
		color: var(--color-gray-50);
	}

	&:hover {
		text-decoration: underline;
	}
}

.legend ::before {
	content: '';
	display: inline-block;
	background-color: var(--color-magenta);
	width: 22px;
	height: 8px;
	border-radius: 9px;
	vertical-align: middle;
	margin-right: 7px;
}

/* #endregion Additional classes */

/* #endregion generic Elements */

/* #region generic classes */

.image-container {
	line-height: 0;
}

.hidden {
	display: none !important;
}

.overflow-hidden {
	overflow: hidden;
}

.hide-desktop {
	@media only screen and (min-width:981px) {
		display: none !important;
	}
}

.hide-mobile {
	@media only screen and (max-width:980px) {
		display: none !important;
	}
}

.container {
	margin: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	/* Default container content sizes */
	&.fullwidth {
		max-width: 100%;
		width: 100%;

		overflow: hidden;
	}

	&:not(.fullwidth) {
		max-width: var(--max-content-width);
		width: var(--content-width);
	}
}

/* Apply background-colors and colors to background container and the container itself to be able to use the container independently */
.container-background-image-container {
	position: relative;

	> .container {
		position: relative;
		z-index: 1;
	}

	> .container-background-image {
		object-position: 50% 50%;
		position: absolute;
		object-fit: cover;
		width: 100%;
		height: 100%;
		/* max-height: 100%; */
		opacity: 1;
		top: 0px;
	}

	&.fill-image {
		> .container-background-image {
			object-fit: fill;
		}
	}
}

/* Apply background-colors and colors to background container and the container itself to be able to use the container independently */
.container-background,
.container {

	/* #region colorcoding */
	&.background-blue {
		background-color: var(--color-blue);
		color: var(--color-white);
	}

	&.background-lightblue {
		background-color: var(--color-light-blue);
		color: var(--color-black);
	}

	&.background-dark-blue {
		background-color: var(--color-dark-blue);
		color: var(--color-white);
	}

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

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

	&.background-orange-lite {
		background-color: var(--color-orange-lite);
		color: var(--color-black);
	}

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

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

	&.background-gray-5 {
		background-color: var(--color-gray-5);
		color: var(--color-black);
	}

	&.background-gray-10 {
		background-color: var(--color-gray-10);
		color: var(--color-black);
	}

	&.background-gray-20 {
		background-color: var(--color-gray-20);
		color: var(--color-black);
	}

	&.background-gray-30 {
		background-color: var(--color-gray-30);
		color: var(--color-black);
	}

	&.background-gray-40 {
		background-color: var(--color-gray-40);
		color: var(--color-black);
	}

	&.background-gray-50 {
		background-color: var(--color-gray-50);
		color: var(--color-black);
	}

	&.background-gray-60 {
		background-color: var(--color-gray-60);
		color: var(--color-white);
	}

	&.background-gray-70 {
		background-color: var(--color-gray-70);
		color: var(--color-white);
	}

	/* #endregion colorcoding */
}

.divider-module-container {
	max-width: var(--max-content-width);
	width: 100%;

	.divider {
		height: 1px;
		width: 100%;
		background-color: var(--color-gray-30);
	}
}

/* #region Text Colors */
.color {
	&.blue {
		color: var(--color-blue);
	}

	&.black {
		color: var(--color-black);
	}

	&.dark-blue {
		color: var(--color-dark-blue);
	}

	&.white {
		color: var(--color-white);
	}

	&.magenta {
		color: var(--color-magenta);
	}

	&.orange {
		color: var(--color-orange);
	}
}

/* #endregion Text Colors */

/* #endregion generic classes */

/* #region Module Spacing */
.frame-space-before-xxl {
	padding-top: var(--spacing-xxl);
}

.frame-space-after-xxl {
	padding-bottom: var(--spacing-xxl);
}

.frame-space-before-xl {
	padding-top: var(--spacing-xl);
}

.frame-space-after-xl {
	padding-bottom: var(--spacing-xl);
}

.frame-space-before-l {
	padding-top: var(--spacing-l);
}

.frame-space-after-l {
	padding-bottom: var(--spacing-l);
}

.frame-space-before-m {
	padding-top: var(--spacing-m);
}

.frame-space-after-m {
	padding-bottom: var(--spacing-m);
}

.frame-space-before-s {
	padding-top: var(--spacing-s);
}

.frame-space-after-s {
	padding-bottom: var(--spacing-s);
}

.frame-space-before-xs {
	padding-top: var(--spacing-xs);
}

.frame-space-after-xs {
	padding-bottom: var(--spacing-xs);
}

.frame-space-before-xxs {
	padding-top: var(--spacing-xxs);
}

.frame-space-after-xxs {
	padding-bottom: var(--spacing-xxs);
}

/* #endregion Module Spacing */

/* #region Breadcrumb Trail */
.breadcrumb {

	a,
	p,
	span {
		text-decoration: none;
		color: var(--color-gray-70);
		font-size: var(--fz-tag);
		font-style: normal;
		font-weight: 400;
		line-height: 150%;
		letter-spacing: 0.16px;
	}

	img {
		margin-inline: 8px;
	}

	.breadcrumb-link {
		background-size: 0% 2px;

		&:hover {
			animation-name: text-link-2 !important;
		}

		&:last-child {
			.breadcrumb-text {
				font-weight: bold;
			}
		}
	}

	& > .breadcrumb-text {
		font-weight: 600;
	}
}

/* #endregion Breadcrumb Trail */
.delo-button {
	display: inline-block;
	text-decoration: none;
	width: fit-content;
	height: fit-content;
	white-space: nowrap;
	transition: 0.1s ease-in-out;
	cursor: pointer;

	&:is(.primary, .secondary) {
		display: flex;
		align-items: center;
		gap: 0.65em;
		line-height: unset;

		&:is(.back) {
			padding: 0.4em 1.35em;

			&::before {
				content: "";
				background-repeat: no-repeat;
				background-size: 100%;
				height: 1em;
				display: flex;
				aspect-ratio: 20 / 18;
				/* Done to match text, which is slightly more on the bottom */
				margin-top: 1px;
			}
		}

		&:not(.back) {
			&::after {
				content: "";
				background-repeat: no-repeat;
				background-size: 100%;
				height: 1em;
				display: flex;
				aspect-ratio: 20 / 18;
				/* Done to match text, which is slightly more on the bottom */
				margin-top: 1px;
			}
		}
	}

	&.primary {
		background-color: var(--color-orange);
		border: 2px solid var(--color-orange);
		border-radius: 50px;
		padding: 0.4em 1.35em;
		font-size: var(--fz-text);
		font-weight: 600;
		color: var(--color-white);

		&:is(.back) {
			&::before {
				background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_right_white.svg');
				transform: rotate(180deg);
			}
		}

		&:not(.back) {
			&::after {
				background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_right_white.svg');
			}
		}


		&:hover {
			background-color: var(--color-orange-lite);
			border-color: var(--color-orange-lite);
		}
	}

	&.secondary {
		background-color: transparent;
		border: 2px solid var(--color-orange);
		border-radius: 50px;
		padding: 0.4em 1.35em;
		font-size: var(--fz-text);
		font-weight: 600;
		color: var(--color-orange);

		&::after {
			background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_right_orange.svg');
		}

		&:hover {
			border-color: var(--color-orange-lite);
			color: var(--color-orange-lite);

			&::after {
				background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_right_lightorange.svg');
			}
		}
	}

	&.tertiary {
		background-color: transparent;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: inherit;
		color: inherit;
		font-weight: 600;
		border: none;

		&:hover {
			color: var(--color-orange);
		}

		&::before {
			content: "";
			background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_tertiary.svg');
			background-repeat: no-repeat;
			background-size: 100%;
			height: 24px;
			aspect-ratio: 1;
			line-height: 0;
		}
	}

	&.arrow {
		--arrow-button-height: clamp(36px, calc(48 * 100 / var(--desktop-width) * 1vw), 48px);

		display: inline-flex;
		align-items: center;
		justify-content: center;

		border: 2px solid var(--color-orange);
		border-radius: 50px;
		background-color: transparent;

		height: var(--arrow-button-height);
		aspect-ratio: 1;

		/* Hide Text completely */
		font-size: 0;
		line-height: 0;
		text-indent: -15px;

		&::after {
			content: "";
			background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_right_orange.svg');
			background-repeat: no-repeat;
			background-size: 100%;
			height: 44%;
			display: flex;
			aspect-ratio: 20 / 18;
		}

		&:hover {
			border-color: var(--color-orange-lite);

			&::after {
				background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_right_lightorange.svg');
			}
		}

		@media only screen and (max-width: 767px) {
			--arrow-button-height: clamp(36px, calc(48 * 100 / var(--desktop-width) * 1vw), 42px);
		}
	}

	&.arrow-button {
		--arrow-button-height: clamp(36px, calc(48 * 100 / var(--desktop-width) * 1vw), 48px);
		--arrow-button-width: var(--arrow-button-height);

		display: inline-flex;
		align-items: center;
		gap: var(--spacing-3xs);

		border: 2px solid var(--color-orange);
		border-radius: 50px;
		background-color: transparent;

		width: fit-content;
		height: var(--arrow-button-height);
		padding-inline: calc(var(--spacing-3xs) + 10px);

		font-size: var(--fz-text);
		font-weight: 600;
		color: var(--color-orange);

		direction: rtl;
		overflow: hidden;

		transition: all .35s ease-in-out;

		&::before {
			content: "";
			background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_right_orange.svg');
			background-repeat: no-repeat;
			background-size: 100%;
			height: 44%;
			display: flex;
			aspect-ratio: 20 / 18;
		}

		@media (hover: hover) {
			width: var(--arrow-button-width);
			padding-inline: calc((1 - (0.46 * (20 / 18))) / 2 * var(--arrow-button-height));

			&::before {
				transition: all .35s ease-in-out;
			}

			&:hover {
				padding-inline: calc(var(--spacing-3xs) + 10px);
				border-color: var(--color-orange-lite);
				color: var(--color-orange-lite);

				&::before {
					background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_right_lightorange.svg');
				}
			}
		}

		@media only screen and (max-width: 767px) {
			--arrow-button-height: clamp(36px, calc(48 * 100 / var(--desktop-width) * 1vw), 42px);
		}
	}

	&.slider-arrow {
		--arrow-button-height: clamp(36px, calc(48 * 100 / var(--desktop-width) * 1vw), 48px);

		&::after {
			content: "";
			background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/slider_arrow_right_orange.svg');
			background-repeat: no-repeat;
			background-size: 100%;
			display: flex;
			height: var(--arrow-button-height);
			aspect-ratio: 1;
			transition: 0.2s ease-in-out;
		}

		&.arrow-left {
			&::after {
				background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/slider_arrow_left_orange.svg');
			}
		}

		&:hover {
			&::after {
				background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/slider_arrow_right_lightorange.svg');
			}

			&.arrow-left {
				&::after {
					background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/slider_arrow_left_lightorange.svg');
				}
			}
		}
	}


	@media only screen and (max-width: 767px) {
		&.tertiary {
			gap: 4px;

			&::before {
				background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/button_arrow_tertiary.svg');
				height: 20px;
			}
		}

		&.slider-arrow {
			&::after {
				height: 36px;
			}
		}
	}
}

/* Buttons styles depending on the background color (e.g. font colors) */

.container-background:is(.background-white, .background-gray-5) {
	.delo-button {
		&.tertiary {
			color: var(--color-black);

			&:hover {
				color: var(--color-orange);
			}
		}
	}
}

.container-background.background-dark-blue {
	.delo-button {
		&.tertiary {
			color: inherit;
			gap: 6px;

			&:hover {
				color: var(--color-orange);
			}
		}
	}
}

/* Button styles in text content */

p:has(.delo-button:first-child) {
	padding-top: var(--spacing-xxs);
}

/* p:has(.delo-button.tertiary:first-child) {
	padding-top: var(--spacing-3xs);
} */

p:has(.delo-button) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;

	&:has(.delo-button:last-child):not(:last-child) {
		margin-bottom: var(--spacing-xs);
	}
}

p .delo-button {
	&:is(.primary, .secondary):not(:last-of-type) {
		margin-bottom: var(--spacing-xxs);
		margin-right: var(--spacing-xs);
	}

	&.tertiary:not(:last-of-type) {
		margin-bottom: var(--spacing-4xs);
		margin-right: var(--spacing-xs);
	}
}

p:has(.delo-button.tertiary) + p:has(.delo-button.tertiary) {
	padding-top: var(--spacing-4xs);
}
.grid {
	--grid-width: 100%;
	--grid-columns: 1;
	--grid-spacing: 0px;

	display: flex;
	flex-wrap: wrap;
	gap: var(--grid-spacing);

	&.columns-1 {
		--grid-columns: 1;
	}

	&.columns-2 {
		--grid-columns: 2;
	}

	&.columns-3 {
		--grid-columns: 3;
	}

	&.columns-4 {
		--grid-columns: 4;
	}

	&.columns-5 {
		--grid-columns: 5;
	}

	&.columns-6 {
		--grid-columns: 6;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--grid-spacing);

		/* calculate the width of the grid item depending on the initial width combined with the spacing and number of columns */
		width: calc(var(--grid-width) - ((var(--grid-columns) - 1) / var(--grid-columns)) * var(--grid-spacing));

		&.span-12 {
			--grid-width: 100%;
		}

		&.span-9 {
			--grid-width: 75%;
		}

		&.span-8 {
			--grid-width: 66.666666%;
		}

		&.span-7 {
			--grid-width: 58.333333%;
		}

		&.span-6 {
			--grid-width: 50%;
		}

		&.span-5 {
			--grid-width: 41.666666%;
		}

		&.span-4 {
			--grid-width: 33.333333%;
		}

		&.span-3 {
			--grid-width: 25%;
		}

		&.span-2 {
			--grid-width: 20%;
		}

		> div[class*=-module-container] {
			height: 100%;
		}
	}

	/* #region grid-gap */
	&.grid-gap-xxs {
		--grid-spacing: var(--spacing-xxs);
	}

	&.grid-gap-xs {
		--grid-spacing: var(--spacing-xs);
	}

	&.grid-gap-s {
		--grid-spacing: var(--spacing-s);
	}

	&.grid-gap-m {
		--grid-spacing: var(--spacing-m);
	}

	&.grid-gap-l {
		--grid-spacing: var(--spacing-l);
	}

	&.grid-gap-xl {
		--grid-spacing: var(--spacing-xl);
	}

	&.grid-gap-xxl {
		--grid-spacing: var(--spacing-xxl);
	}

	/* #endregion grid-gap */

	@media only screen and (max-width: 980px) {

		&.columns-1,
		&.columns-2,
		&.columns-3 {
			--grid-columns: 1;

			.grid-item {
				--grid-width: 100%;
			}
		}

		&:not(.columns-1, .columns-2, .columns-3) {
			--grid-columns: 2;

			.grid-item {
				--grid-width: 50%;
			}
		}
	}
}
.header-module-container {
	display: flex;
	flex-direction: column;
	height: fit-content;
	position: relative;

	background-repeat: no-repeat;
	background-size: cover;

	> .image-container {
		padding: 0;
		background-color: var(--color-dark-blue);

		> img,
		video {
			width: 100%;
			object-fit: cover;
			height: auto;
			max-height: 450px;
			min-height: 350px;
			opacity: 0.85;
		}
	}

	.header-visual-text-container {
		color: var(--color-white);
		padding-block: var(--spacing-xl);

		position: relative;

		.image-container {
			height: 100%;
			width: 100%;
			background-color: var(--color-dark-blue);

			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: -1;

			> img,
			video {
				width: 100%;
				height: 100%;
				object-fit: cover;
				opacity: 0.85;
			}
		}

		.text-content {
			position: relative;

			.h1-highlight {
				max-width: 80%;
			}

			.delo-button {
				margin-top: var(--spacing-m);
			}
		}
	}

	.breadcrumb {
		padding-top: 16px;
	}

	.intro-container:has(.text-module-container, .menu-section-container) {
		padding-top: var(--spacing-xl);
	}

	@media only screen and (max-width: 980px) {

		> .image-container {

			> img,
			video {
				min-height: 300px;
			}
		}

		.header-visual-text-container {
			.text-content {
				.h1-highlight {
					max-width: 100%;
				}
			}
		}
	}

	@media only screen and (max-width: 767px) {
		> .image-container {

			> img,
			video {
				min-height: 200px;
			}
		}
	}
}
.focusframe-module-container {
	margin-inline: calc(var(--spacing-l) * -1);

	.focusframe {
		margin: 0;
		padding: 45px var(--spacing-l) var(--spacing-l);
		border-style: solid;
		border-width: 2px;
		border-color: var(--color-black);

		legend {
			padding-inline: var(--spacing-3xs);
			margin-inline: calc(var(--spacing-3xs) * (-1));

			h2 {
				margin: 0;
			}
		}
	}

	@media only screen and (max-width: 1500px) {
		margin-inline: 0;
	}

	@media only screen and (max-width: 980px) {
		.focusframe {
			padding: 35px 16px 16px;
			border-width: 2px;

			legend {
				max-width: 90%;
				position: relative;
			}
		}
	}
}

.container-background.background-dark-blue {
	.focusframe-module-container {
		.focusframe {
			border-color: var(--color-white);
		}
	}
}
.image-module-container {
	display: flex;
	flex-direction: column;
	gap: 20px;

	&:not(.transparent) {
		padding: 24px;
	}

	.image-container {
		display: flex;

		img,
		video {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	@media only screen and (max-width: 767px) {
		gap: 15px;

		&:not(.transparent) {
			padding: 15px;
		}
	}
}
.slider-module-container {
	position: relative;

	.swiper,
	.swiper-wrapper {
		height: fit-content;
	}

	&.primary {
		--pagination-height: 40px;

		swiper-container {
			height: fit-content;

			--swiper-pagination-bullet-inactive-color: var(--color-gray-30);
			--swiper-pagination-color: var(--color-blue);
			--swiper-pagination-bullet-inactive-opacity: 1;
			--swiper-pagination-bottom: 0;

			--swiper-pagination-bullet-width: 35px;
			--swiper-pagination-bullet-height: 5px;

			--swiper-pagination-bullet-horizontal-gap: 5px;

			--swiper-pagination-bullet-border-radius: 50px;

			swiper-slide {
				height: auto;
			}

			&:not(.no-pagination) {
				margin-bottom: calc(var(--pagination-height) * (-1));

				swiper-slide {
					padding-bottom: var(--pagination-height);
				}
			}

			@media only screen and (max-width: 980px) {
				--pagination-height: 25px;
			}
		}

		.delo-swiper-button {
			position: absolute;
			top: calc(50% - (var(--pagination-height) / 2));
			left: 0;
			transform: translate(-100%, -50%);
			z-index: 1;

			padding: 7px;
			margin: 10px;
			cursor: pointer;

			&.no-pagination {
				top: 50%;
			}

			&.swiper-button-next {
				left: unset;
				right: 0;
				transform: translate(100%, -50%);
			}

			&.swiper-button-disabled {
				filter: brightness(60%);
			}

			&:hover {
				filter: brightness(0) saturate(100%) invert(65%) sepia(65%) saturate(449%) hue-rotate(346deg) brightness(102%) contrast(94%);
			}

			@media only screen and (max-width: 980px) {
				transform: translate(-50%, -50%);

				&.swiper-button-next {
					transform: translate(50%, -50%);
				}

				img {
					height: 30px;
					width: auto;
					aspect-ratio: 1;
				}
			}
		}

		swiper-container.no-pagination {
			& ~ .delo-swiper-button {
				top: 50%;
				margin: 0;
			}
		}

		&:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled) {
			.delo-swiper-button {
				display: none;
			}
		}
	}

	&.secondary {
		swiper-container {
			height: fit-content;

			swiper-slide {
				height: auto;
			}
		}

		.slider-navigation {
			display: flex;
			justify-content: flex-end;
			gap: 12px;
			margin-top: var(--card-frame-thick);

			@media only screen and (min-width: 980px) {
				&.hideDesktop {
					display: none;
				}
			}
		}

		@media only screen and (max-width: 980px) {
			.slider-navigation {
				gap: 8px;
				margin-top: var(--spacing-s);
			}
		}
	}
}
.bannerteaser-module-container {
	display: flex;
	position: relative;
	--image-width: 50%;

	> div {
		width: 50%;
	}

	&[class*="image-left"] {
		.image-container {
			order: 1;
			right: unset;
			left: 0;
		}

		.text-container {
			order: 2;
			/* This calculation differentiates, whether the content width or the max-content width should be used */
			/* With only the first calculation there would be no padding on smaller screens */
			padding-right: var(--content-width-padding);
			margin-left: var(--image-width);
		}
	}

	&[class*="image-right"] {
		.image-container {
			order: 2;
			/* padding-right: calc((100% - 1920px) / 2); */
		}

		.text-container {
			order: 1;
			/* This calculation differentiates, whether the content width or the max-content width should be used */
			/* With only the first calculation there would be no padding on smaller screens */
			padding-left: var(--content-width-padding);
		}
	}

	&[class*="text-wide"] {
		--image-width: 33.4%;

		.text-container {
			width: 66.6%;
		}

		.image-container {
			width: 33.4%;
		}
	}

	&.no-image {
		--image-width: 0%;

		.text-container {
			max-width: var(--max-content-width);
			width: var(--content-width);
			padding-inline: 0;
			margin: auto;
		}

		.image-container {
			display: none;
		}
	}

	.image-container {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.text-container {
		padding: var(--spacing-xl);
		display: flex;
		flex-direction: column;

		.text-button-container {
			display: flex;
			flex-direction: column;
		}

		.button-container {
			display: flex;
			gap: var(--spacing-xs);
		}
	}


	@media only screen and (max-width: 980px) {
		&.container-background {
			flex-direction: column;

			.image-container {
				width: 100% !important;
				position: static;
				order: 1;
				aspect-ratio: 320/150;
			}

			.text-container {
				order: 2;
				max-width: var(--max-content-width);
				width: var(--content-width);
				padding-inline: 0;
				padding-block: var(--spacing-l);
				margin: auto;
			}
		}
	}
}
.formbanner-module-container {
	display: flex;
	justify-content: space-between;
	position: relative;

	> div {
		width: 50%;
	}

	&[class*="image-right"] {
		.image-container {
			order: 2;
		}

		.big-container {
			order: 1;
		}
	}

	&[class*="text-wide"] {
		.big-container {
			width: 63.6%;
		}

		.image-container {
			width: 36.4%;
		}
	}

	&.no-image {
		.big-container {
			padding-inline: 0;
			margin: auto;
		}

		.image-container {
			display: none;
		}
	}

	.image-container {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.big-container {

		margin-inline-start: var(--content-width-padding);
		max-width: max(640px, 33.333%);
		padding-block: var(--spacing-xl);

		.text-container {
			display: flex;
			flex-direction: column;

			.text-button-container {
				display: flex;
				flex-direction: column;
			}

			.button-container {
				display: flex;
				gap: var(--spacing-xs);
			}
		}
	}

	@media only screen and (max-width: 1200px) {
		&.container-background {
			flex-direction: column;

			.image-container {
				display: none;
			}

			.big-container {
				max-width: var(--max-content-width);
				width: var(--content-width);
				padding-inline: 0;
				margin: auto;
			}
		}
	}
}
.number-module-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;

	.number-container {
		font-family: "Panton Narrow";
		font-size: var(--fz-h2-headline);
		color: transparent;
		-webkit-text-stroke-width: 1.3px;
		-webkit-text-stroke-color: var(--color-blue);
	}

	> .body-text {
		max-width: 90%;
	}

	@media only screen and (max-width: 767px) {
		.number-container {
			font-size: var(--fz-h1-headline);
		}
	}
}
.quote-module-container {
	display: flex;
	justify-content: space-between;
	position: relative;

	> .image-container {
		flex: 1 1 0px;

		display: flex;
		justify-content: flex-end;

		img {
			object-fit: contain;
			margin-right: -25px;
			height: fit-content;
		}
	}

	.quote-container {
		flex-grow: 1;

		max-width: 75%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding-top: 50px;

		white-space: pre-wrap;

		.author-container {
			display: flex;
			gap: 32px;

			.image-container {
				display: flex;

				img {
					border-radius: 100px;
					height: 124px;
					width: auto;
					aspect-ratio: 1;
					object-fit: cover;
				}
			}

			.author {
				display: flex;
				align-items: center;
			}
		}
	}

	@media only screen and (max-width: 767px) {
		justify-content: flex-end;

		> .image-container {
			position: absolute;
			top: 0;
			left: 0;

			img {
				width: 84px;
				margin: 0;
			}
		}

		.quote-container {
			max-width: 90%;
			gap: 10px;
			padding: 0;


			.author-container {
				gap: 15px;

				.image-container {
					img {
						height: 84px;
					}
				}
			}
		}
	}
}

.container-background.background-dark-blue .quote-module-container {
	> .image-container {
		img {
			content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/icon_quotation_marks_white.svg');
		}
	}
}
.productaera-module-container {
	display: flex;
	flex-direction: column;
	gap: 60px;

	.image-container {
		position: relative;

		&::before {
			content: "";
			width: 70px;
			height: 190px;
			border-left: 2px solid var(--color-black);
			border-top: 2px solid var(--color-black);

			position: absolute;
			left: 0;
			bottom: -30px;
		}

		img {
			object-fit: contain;
			width: 100%;
			height: auto;
			aspect-ratio: 411 / 340;
			max-height: 340px;
		}
	}

	.content-container {
		display: flex;
		flex-direction: column;
		height: 100%;

		p:has(.delo-button):last-child,
		.delo.button:is(.primay, .secondary):last-child {
			margin-top: auto;
		}
	}
}
.product-table-container {
    --table-font-size: 18px;
    --table-h3-font-size: var(--fz-h3-headline);
    --table-spacing: 44px;

    .table-columns-2 {
        width: calc(456px*2);
        --first-column-width: max(50%, 456px);
        --other-column-width: max(50%, 456px);
        --last-column-width: var(--other-column-width);
    }

    .table-columns-3 {
        --first-column-width: 33.33%;
        --other-column-width: 33.33%;
        --last-column-width: calc(var(--other-column-width) - var(--table-spacing));
    }

    .detail-overflow {
        --first-column-width: 228px;
        --other-column-width: min(calc((90vw - var(--first-column-width)) / 2), 456px);
        --last-column-width: calc(var(--other-column-width) - var(--table-spacing));
    }

    @media only screen and (max-width: 980px) {
        --first-column-width: 25%;
        --other-column-width: 48%;
        --table-font-size: 16px;
        --table-h3-font-size: var(--fz-h3-headline);
        --table-spacing: 24px;

        .detail-overflow {
            --first-column-width: 240px;
        }
    }

    @media only screen and (max-width: 767px) {
        --first-column-width: 27%;
        --other-column-width: 36%;
        --table-font-size: 10px;
        --table-h3-font-size: 16px;
        --table-spacing: 10px;

        .table-columns-2 {
            --first-column-width: 50%;
            --other-column-width: 50%;
        }

        .table-columns-3 {
            --first-column-width: 27%;
            --other-column-width: 36%;
        }

        .detail-overflow {
            --first-column-width: clamp(78px, calc(90vw / 4), 155px);
        }
    }

    .container-fullwidth {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .table-scroll {
        overflow-x: hidden;
        margin-left: var(--content-width-padding);
        margin-right: var(--content-width-padding);

        width: var(--content-width);
        max-width: var(--max-content-width);

        &:has(table:not(.detail-overflow)) {
            display: flex;
            justify-content: center;
        }

        @media only screen and (max-width: 980px) {
            margin-right: unset;
            width: unset;

            &:has(.detail-overflow) {
                overflow-x: scroll;
            }

            .detail-overflow,
            &:not(:has(.detail-overflow)) {
                margin-right: var(--content-width-padding);
            }
        }
    }

    table {
        border-collapse: collapse;
        table-layout: fixed;

        tr {
            display: flex;

            th,
            td {
                text-align: left;
                vertical-align: top;
                padding-block: 8px;
                width: var(--other-column-width);

                &:not(:is(.image-container, .h3-headline, .h3-preline)) {
                    border-bottom: 1px solid currentColor;
                    font-size: var(--table-font-size);
                }

                &.h3-preline,
                &.h3-headline {
                    margin-bottom: unset;
                }

                &:not(:last-of-type) {
                    padding-right: var(--table-spacing);
                }

                &:last-of-type {
                    width: var(--last-column-width);
                }

                &:first-child {
                    position: sticky;
                    left: 0;
                    z-index: 1;
                    display: flex;
                    width: var(--first-column-width);
                    background-color: var(--color-gray-5);
                    font-weight: bold;
                }

                &.h3-headline {
                    color: var(--color-blue);
                    font-family: 'Panton Narrow';
                    font-size: var(--table-h3-font-size);
                }

                &.image-container {
                    &:first-child {
                        width: var(--first-column-width);
                    }

                    border-bottom: unset;
                    width: var(--other-column-width);

                    &:last-of-type {
                        width: var(--last-column-width);
                    }

                    img {
                        width: 100%;
                        height: auto;
                        aspect-ratio: 412 / 274;
                        object-fit: cover;
                    }
                }
            }
        }
    }

    .table-button-container {
        position: absolute;
        pointer-events: none;
        right: 0;
        left: 0;
        height: calc(100% - 100vh);

        display: none;

        @media (hover: hover) {
            display: block;
        }

        .table-button-sticky-wrapper {
            --table-button-height: 48px;
            --table-button-spacing: 36px;

            position: sticky;
            top: calc(50vh + (var(--nav-height) / 2));
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            max-width: calc(var(--max-content-width) + (2 * var(--table-button-height)) + (2 * var(--table-button-spacing)));
            width: 95%;
            margin-inline: auto;

            button {
                display: flex;
                justify-content: center;
                align-items: center;
                pointer-events: all;

                z-index: 1;
                border-radius: 8000px;
                border: 2px solid var(--color-orange);
                height: 48px;
                aspect-ratio: 1;
                background: none;
                cursor: pointer;

                @media only screen and (max-width: 980px) {
                    display: none;
                }

                &.go-right {
                    img {
                        transform: scale(-1, -1);
                    }
                }
            }
        }
    }

    .footnote {
        margin-top: 24px;

        @media only screen and (min-width: 767px) {
            padding-left: 10px;
        }
    }

}

.product-module-container.background-dark-blue {
    .product-table-container {
        table {
            tr {

                th,
                td {
                    &:first-child {
                        background-color: var(--color-dark-blue);
                    }
                }
            }
        }
    }
}
.menu-section-container {

	:is(p, li) > a:not(.delo-button):not(.sub-nav-item-link):not(.nav-link):not(.page-link):not(.CybotCookiebotDialogNavItemLink),
	.breadcrumb-link {
		color: var(--color-blue);
		background-size: 0% 2px;
		background-image: linear-gradient(var(--color-blue));

		&:hover {
			animation-name: text-link-2 !important;
		}
	}

	ul:not(.sub-nav-container) {
		padding: 0 0 0 28px;
	}

	fieldset {
		border: 2px solid var(--color-blue);
		padding: 0px 10px 0px 10px;
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 12px;
		min-width: 300px;

		legend {
			padding: 0 8px;
			margin: 0;
			font-family: "Panton Narrow";
			font-weight: 390;
			color: var(--color-blue);
			line-height: 120%;
			letter-spacing: 0.96px;
		}

		li a {
			text-decoration: none;
			font-weight: 600;
		}
	}

	@media only screen and (max-width: 767px) {
		ul:not(.sub-nav-container) {
			padding: 0 0 0 8px;
			margin-block: 0px 10px;
		}

		fieldset {
			min-width: unset;

			legend {
				margin-bottom: 10px
			}
		}
	}
}

.hasPreline {
	.menu-section-container {
		@media only screen and (min-width: 980px) {
			margin-top: 62px;
		}
	}
}

.shortcut-container {
	height: 0;
}
.scrollytelling-module-container {
	position: relative;
	display: flex;
	justify-content: center;

	.video-container {
		width: 100%;
		position: relative;

		video.scrollytelling-video {
			height: calc(100vh - var(--nav-height));
			width: 100%;
			position: sticky;
			top: var(--nav-height);
			object-fit: cover;
		}
	}

	.scrollytelling-content-container {
		position: absolute;
		top: 0;
	}

	@media only screen and (max-width: 980px) {
		.video-container {
			video.scrollytelling-video {
				position: relative;
				top: unset;

				mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
				-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
			}
		}
	}
}
.history-module-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 50px 100px;
	position: relative;

	--circle-height: 70px;


	&:has(.load-more:not(.hidden))::after {
		display: none;
	}

	&::after {
		content: "";
		background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/raute.png');
		background-position: 50%;
		background-repeat: no-repeat;
		height: var(--circle-height);
		width: var(--circle-height);
	}

	.year-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 0;
		padding-bottom: 55px;
		padding-top: 20px;
		position: relative;

		img.circle {
			display: inline-block;
			height: var(--circle-height);
			width: var(--circle-height);
			position: absolute;
			left: 50%;
			top: 0;
			translate: -50%;
		}

		.year {
			color: var(--color-blue);
		}

		.history-entry-container {
			display: flex;
			flex-direction: column;
			gap: 10px;
			width: calc(50% - 120px);

			.history-entry {
				display: flex;
				flex-direction: column;

				&:not(:last-child) {
					margin-bottom: 30px
				}
			}
		}

		&::before {
			content: "";
			width: 80px;
			height: 1px;
			background-color: var(--color-black);

			position: absolute;
			top: calc(var(--circle-height) / 2);
			transform: translateX(-50%);
		}

		&::after {
			content: "";
			width: 1px;
			height: 100%;
			background-color: var(--color-black);

			position: absolute;
			top: var(--circle-height);
			left: 50%;
			transform: translateX(-50%);
		}

		&:last-of-type::after {
			height: calc(100% - var(--circle-height));
		}

		&:nth-child(odd) {
			.history-entry-container {
				align-self: flex-start;

				align-items: flex-end;
				text-align: end;

				padding-right: 16px;
			}

			&::before {
				left: calc(50% - var(--circle-height));
			}
		}

		&:nth-child(even) {

			.history-entry-container {
				align-self: flex-end;

				align-items: flex-start;
				text-align: start;

				padding-left: 16px;
			}

			&::before {
				left: calc(50% + var(--circle-height));
			}
		}

		&.fade-out {
			&::after {
				background: linear-gradient(var(--color-black) 0%, #ccc 50%, transparent 90%);
			}
		}
	}


	.load-more {
		align-self: flex-start;
		margin-top: var(--module-spacing-m);
	}


	@media only screen and (max-width: 980px) {
		--circle-height: 36px;
		padding-block: 20px;

		&::after {
			background-size: calc(var(--circle-height) / 1.7);
			align-self: flex-start;
		}

		.year-container {
			flex-direction: row;
			padding-top: 0;

			img.circle {
				position: static;
				translate: unset;
			}


			&::before {
				width: 13px;
				left: var(--circle-height) !important;
				top: calc(var(--circle-height) / 2);
				transform: unset;
			}

			&::after {
				left: calc(var(--circle-height) / 2) !important;
			}

			.history-entry-container {
				width: auto;

				align-self: unset !important;

				align-items: flex-start !important;
				text-align: start !important;

				padding-top: calc(var(--circle-height) / 4);
				padding-left: 20px !important;
				padding-right: 0 !important;

				.history-entry {
					.body-text {
						font-size: 18px;
					}
				}
			}
		}
	}
}
.award-module-container {
	display: flex;

	.image-container {
		margin-right: 22px;

		img {
			width: clamp(110px, calc(184 * 100 / var(--desktop-width) * 1vw), 184px);
			aspect-ratio: 1;
			height: auto;
			max-height: clamp(110px, calc(184 * 100 / var(--desktop-width) * 1vw), 184px);
			object-fit: contain;
		}
	}

	.content-container {
		padding-inline: 22px;
		border-left: 4px solid var(--color-blue);
	}

	@media only screen and (max-width: 767px) {
		flex-direction: column;
		gap: var(--spacing-xxs);

		.content-container {
			padding-inline: 15px;
		}
	}
}
.related-news {
    display: flex;
    flex-direction: column;

    h2 {
        margin-inline: var(--content-width-padding);
        margin-bottom: 46px;
    }

    .related-wrap {
        display: flex;
        gap: var(--layout-grid-gutter);

        .related-item {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing-xs) - 4px);

            text-decoration: unset;
            color: unset;
            flex-grow: 1;

            img {
                width: auto;
                height: auto;
                aspect-ratio: 3/2;
                object-fit: cover;
            }

            .related-date {
                font-size: 18px;
                color: var(--color-blue);
                height: 13px;
            }
        }

        @media only screen and (max-width: 767px) {
            margin-inline: unset;

            overflow-x: hidden;

            .related-item {

                &:first-child {
                    margin-left: var(--content-width-padding);
                }

                &:last-child {
                    margin-right: var(--content-width-padding);
                }

                img {
                    height: 192px;
                    width: unset;
                    aspect-ratio: 3/2;
                }
            }
        }

    }
}
.accordion-module-container {

	&.download-accordion {
		.accordion-wrap {
			.accordion-item {
				&::before {
					content: "";
					display: block;
					width: 100%;
					height: 3px;
					border-top: 1px solid #414140;
				}

				&:last-child {
					border-bottom: 1px solid #414140;
				}

				.accordion-item-header {
					display: flex;
					align-items: center;
					padding-block: 20px;
					cursor: pointer;

					@media only screen and (max-width: 767px) {
						padding-block: 10px;
					}

					img {
						height: 12px;
						width: 12px;

						&.mobile {
							display: none;
						}

						@media only screen and (max-width: 767px) {
							&.desktop {
								display: none;
							}

							&.mobile {
								display: block;
								height: 6px;
								width: 6px;
							}
						}
					}

					.text {
						padding-left: 10px;
						display: flex;
						flex-direction: column;
						justify-content: center;
					}

					+ .accordion-downloads {

						.download-item:first-child {
							padding-top: 24px;
						}

						.download-item:last-child {
							padding-bottom: 48px;
						}
					}
				}

				.accordion-downloads {
					height: 0;
					padding-left: 24px;
					overflow: hidden;
					transition: var(--transition-duration) ease-in-out;
				}

				&.open {
					&::before {
						border-top: 3px solid var(--color-blue);
					}

					.accordion-item-header {
						color: var(--color-blue);

						img {
							rotate: 90deg;
							filter: invert(43%) sepia(96%) saturate(1611%) hue-rotate(169deg) brightness(88%) contrast(102%);
						}

						+ .accordion-downloads {}
					}
				}
			}
		}
	}

	.features-accordion {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xs);

		.accordion-item {
			border-left: 4px solid color-mix(in srgb, var(--color-black) 30%, transparent);

			&.open {
				border-color: var(--color-blue);
			}

			&:not(.open) {
				@media (hover: hover) {
					.accordion-item-header:hover {
						background-color: color-mix(in srgb, var(--color-blue) 10%, transparent);
					}
				}
			}

			.accordion-item-header {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding: 10px 15px;
				cursor: pointer;
			}

			.accordion-content {
				height: 0;
				overflow: hidden;
				transition: height 0.3s ease-in-out, padding 0.4s ease-in-out;
				padding: 0 15px;

				.content-wrapper {
					padding-block: 10px;
				}
			}
		}
	}

}
.gallery-slider-container {
	width: 53%;

	swiper-slide {
		width: auto !important;

		display: inline-flex;
		height: auto;

		box-shadow: 0px 0px 50px 5px rgba(0, 0, 0, 0.15);

		.slide-wrapper {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: var(--spacing-xxs);
			width: fit-content;
			padding: var(--card-frame-thin);

			/* Set the aspect ratio of the image as aspect ratio */
			height: 600px;
			aspect-ratio: var(--aspect-ratio, 1 / 1);

			.image-container {
				flex: 1 1 auto;
				overflow: hidden;

				img,
				video {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			> p {
				flex: 0 0 auto;
			}
		}
	}

	@media only screen and (max-width: 980px) {
		swiper-slide {
			max-width: 100%;

			.slide-wrapper {
				height: 100%;
				width: 100%;
				aspect-ratio: unset;

				.image-container {
					width: 100%;
					height: 100%;
					display: flex;

					video {
						height: unset;
						margin-block: auto;
					}
				}
			}
		}
	}
}
.accordion-downloads {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.download-item {
    display: flex;
    gap: var(--spacing-xs);

    .img-wrap {
        --image-container-size: 116px;
        --image-size: 100px;

        @media only screen and (max-width: 767px) {
            --image-container-size: calc(116px / 2);
            --image-size: calc(100px / 2);
        }

        display: flex;
        align-items: center;
        justify-content: center;

        height: var(--image-container-size);
        width: var(--image-container-size);
        aspect-ratio: 1;

        background-color: #4141401a;

        img {
            max-height: var(--image-size);
            max-width: var(--image-size);
            object-fit: contain;
        }
    }

    .download-content-wrapper {
        display: flex;
        gap: 16px;
        width: 100%;
        justify-content: space-between;

        @media only screen and (max-width: 767px) {
            flex-direction: column;
            justify-content: space-between;
        }

        .item-text {
            display: flex;
            flex-direction: column;

            p {
                margin: 0;
            }
        }

        .item-download {
            .item-downloadtext {
                a {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    text-decoration: none;
                    color: unset;
                    font-weight: 600;
                    min-width: 240px;
                    width: 33.3%;

                    @media only screen and (max-width: 767px) {
                        gap: 4px;
                    }


                    img {
                        &.mobile {
                            display: none;
                        }

                        @media only screen and (max-width: 767px) {
                            &.desktop {
                                display: none;
                            }

                            &.mobile {
                                display: block;
                                width: 6px;
                                height: 6px;
                            }
                        }
                    }
                }

            }
        }
    }
}
.tiles-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--layout-grid-gutter);

	&.slider-module-container {
		/* Slide width goes crazy when the container has display: flex */
		display: initial;

		&.mobile {
			display: none;
		}

		swiper-container[data-slidesPerView="auto"] {
			swiper-slide {
				width: auto;
			}
		}
	}

	.tiles-module-container {
		background-color: transparent;
		width: clamp(280px, calc(300 * 100 / var(--desktop-width) * 1vw), 300px);
		aspect-ratio: 1;
		perspective: 1000px;

		.flip-wrapper {
			position: relative;
			width: 100%;
			height: 100%;
			transition: 0.8s;
			transform-style: preserve-3d;

			.front-container,
			.back-container {
				display: flex;
				flex-direction: column;
				position: absolute;
				width: 100%;
				height: 100%;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				padding: var(--spacing-xs);
				overflow: hidden;
			}

			.front-container {
				background-color: var(--color-white);
				color: var(--color-black);

				.image-container img {
					--icon-size: clamp(50px, calc(65 * 100 / var(--desktop-width) * 1vw), 65px);
					height: var(--icon-size);
					width: var(--icon-size);
					object-fit: contain;
				}

				.delo-button {
					margin-top: auto;
				}
			}

			.back-container {
				background-color: var(--color-white);
				color: var(--color-black);
				transform: rotateY(180deg);
			}
		}

		&.back-enabled:hover .flip-wrapper {
			transform: rotateY(180deg);
			scale: 1.1;
		}
	}

	&.filled {
		.tiles-module-container {
			.flip-wrapper {
				border: none;

				.front-container,
				.back-container {
					background-color: var(--color-white);
					color: var(--color-black);
				}
			}
		}
	}

	&.outline {
		.tiles-module-container {
			.flip-wrapper {
				border: 2px solid var(--color-black);

				.front-container,
				.back-container {
					background-color: var(--color-white);
				}
			}
		}
	}

	@media only screen and (max-width: 980px) {
		&.slider-module-container.mobile {
			display: initial;
		}

		&.desktop {
			display: none;
		}

		.tiles-module-container {
			background-color: transparent;
			width: clamp(210px, calc(280 * 100 / var(--desktop-width) * 1vw), 280px);
			aspect-ratio: 1;
			perspective: 1000px;

			.flip-wrapper {
				.front-container {
					.image-container img {
						--icon-size: clamp(32px, calc(50 * 100 / var(--desktop-width) * 1vw), 50px);
						object-fit: contain;
					}
				}
			}
		}
	}
}


.container-background.background-dark-blue {

	.tiles-container {
		&.outline {
			.tiles-module-container .flip-wrapper {
				border-color: var(--color-white);

				.front-container,
				.back-container {
					background-color: var(--color-dark-blue);
					color: var(--color-white);
				}
			}
		}

	}
}

/* Move items to the right when inside the last grid column */
.grid .grid-item:last-child .tiles-container {
	justify-content: flex-end;
}
.addresses-headline-container {
	display: flex;
	gap: var(--spacing-xs);
	align-items: baseline;
}

.addresses-module-container {
	--column-count: 3;

	@media only screen and (max-width: 1200px) {
		--column-count: 2;

		.address.address {
			&:nth-child(2n) {
				padding-right: 0;
			}

			&:nth-child(2n + 1) {
				padding-left: 0;
			}
		}
	}

	@media only screen and (max-width: 980px) {
		--column-count: 1;

		.address.address {
			padding-inline: 0;
		}
	}

	.address {
		width: calc(100% / var(--column-count));
		margin-bottom: var(--card-frame-thick);
		padding-inline: calc(var(--card-frame-thick) / 2);

		@media only screen and (min-width: 1201px) {
			&:nth-child(3n) {
				padding-right: 0;
			}

			&:nth-child(3n + 1) {
				padding-left: 0;
			}
		}

		.address-wrapper {
			background-color: var(--color-white);
			padding: var(--card-frame-thin);

			> * {
				max-width: 90%;
			}

			.location-container {
				p {
					margin: 0;
				}

				margin-bottom: var(--spacing-xs);
			}

			.link-container {
				display: flex;
				flex-direction: column;
				gap: var(--spacing-4xs);

				> div {
					margin-bottom: 0;
					display: flex;
					align-items: center;
					gap: var(--spacing-4xs);

					&::before {
						content: "";
						display: flex;
						justify-content: center;
						align-items: center;
						height: 17px;
						width: 17px;
					}
				}

				.phone,
				.mobile {
					&::before {
						content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/phone.svg');
					}

					a[href] {
						background-size: 0% 2px;

						&:hover {
							animation-name: text-link-2 !important;
						}
					}
				}

				.fax {

					&::before {
						content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/fax.svg');
					}

					a[href] {
						background-size: 0% 2px;

						&:hover {
							animation-name: text-link-2 !important;
						}
					}
				}

				.email {
					&::before {
						content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/mail.svg');
					}
				}

				.website {
					&::before {
						content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/website.svg');
					}
				}
			}
		}

		&.highlight {
			.address-wrapper {
				background-color: var(--color-dark-blue);
				color: var(--color-white);

				.link-container {
					& > div {
						&::before {
							filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
						}
					}
				}
			}
		}


		@media only screen and (max-width: 980px) {
			margin-bottom: var(--spacing-s);
		}
	}
}
/* #region single event preview (with/without image) */
/* Style for overview and teaser element */
.single-event-container {
	display: flex;
	height: 100%;
	flex-basis: calc(50% - (var(--gap-width) / 2));

	.image-container {
		margin-right: 22px;

		aspect-ratio: 1;
		height: fit-content;
		display: flex;
		align-items: center;

		img {
			width: clamp(110px, calc(184 * 100 / var(--desktop-width) * 1vw), 184px);
			aspect-ratio: 1;
			height: auto;
			max-height: clamp(110px, calc(184 * 100 / var(--desktop-width) * 1vw), 184px);
			object-fit: contain;
		}
	}

	.content-container {
		display: flex;
		flex-direction: column;
		gap: 18px;

		padding-inline: 22px;
		border-left: 4px solid var(--color-blue);

		.tagword {
			color: var(--color-blue);
		}

		.title {
			color: var(--color-black);
			text-decoration: none;
		}

		.event-actions {
			display: flex;
			flex-direction: column;
			gap: 0.6em;
			margin-top: auto;
		}
	}

	@media only screen and (max-width: 980px) {
		.image-container {
			img {
				width: clamp(90px, calc(184 * 100 / 980 * 1vw), 110px);
				max-height: clamp(90px, calc(184 * 100 / 980 * 1vw), 110px);
			}
		}

	}

	@media only screen and (max-width: 767px) {
		.image-container {
			display: none;
		}

		.content-container {
			gap: 10px;
			padding-inline: 15px;

			.event-actions {
				gap: 0.6em;
			}
		}
	}
}

/* #endregion single event preview (with/without image) */

/* #region Events Overview with Search and Filter */
.searchEventsWrapper {
	form.initEventsSearchForm {
		display: flex;
		justify-content: space-between;
		gap: 44px;

		div:first-child {
			display: none;
		}

		.form-group {
			flex: 1 1 0px;
			display: flex;
		}

		.date-picker-container {
			position: relative;
			display: flex;
			align-items: center;
			cursor: pointer;

			label {
				display: inline-block;
				width: 100%;
				padding-block: 3px;
				border-bottom: 1px solid var(--color-black);
				cursor: pointer;
			}

			#dateRange {
				visibility: hidden;
				position: absolute;
			}

			&::after {
				content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/select_arrow_down.svg');
				display: flex;
				height: 12px;
				aspect-ratio: 1;
				transition: 0.2s ease-in-out;
				position: absolute;
				right: 0;
			}

			&:has(#dateRange.active) {
				&::after {
					rotate: 180deg;
				}
			}
		}
	}
}

.searchresult-container {
	display: flex;
	--gap-width: 44px;
	gap: 100px var(--gap-width);
	flex-wrap: wrap;
	margin-block: 64px;
}

/* #endregion Events Overview with Search and Filter */

/* #region Events Teaser */
.upcoming-events-container {
	/* display: flex;
	justify-content: space-between;
	align-items: stretch; */

	.single-event-container {
		/* flex: 1 1 0px; */
		padding-block: 45px;
	}
}

/* #endregion Events Teaser */

/* #region Event Popup */
.event-popup {
	display: flex;
	flex-direction: column;
	height: 100%;

	.wrapper {
		display: flex;
		gap: 35px;
		margin-bottom: 60px;
		overflow: auto;

		.event-content {
			display: flex;
			flex-direction: column;

			.tagword {
				color: var(--color-blue);
				margin-bottom: 20px;
			}
		}

		.image-container {
			margin-top: 55px;

			img {
				width: 300px;
				aspect-ratio: 1;
				object-fit: contain;
			}
		}
	}

	.delo-button.primary {
		align-self: flex-end;
	}

	@media only screen and (max-width: 980px) {
		.wrapper {
			flex-direction: column-reverse;
			gap: 25px;
			margin-bottom: 20px;

			.event-content {
				.tagword {
					margin-bottom: 10px;
				}
			}

			.image-container {
				margin-top: 0;

				img {
					width: 150px;
				}
			}
		}
	}
}

/* #endregion Event Popup */
.delo-form {

	.captcha {
		margin-top: 30px;
	}

	display: flex;
	flex-direction: column;
	gap: 30px;

	.grid .grid-item {
		width: auto;
		flex: 1 1 0px;
	}

	.delo-form-group {
		position: relative;
	}

	.delo-form-group label.form-label {
		position: absolute;
		pointer-events: none;
		left: 0;
		top: 2px;
		transition: 0.2s ease all;
	}

	.delo-form-group .input:has(.delo-input:focus) ~ label.form-label {
		top: -13px;
		font-size: 12px;
	}

	.delo-form-group .input:has(.delo-input:not(:placeholder-shown)) ~ label.form-label {
		top: -13px;
		font-size: 12px;
	}

	.delo-form-group .delo-input {
		width: 100%;
		background-color: transparent;
		border: none;
		border-bottom: 1px solid currentColor;
		color: inherit;
		padding: 7px 0;
		font-size: 18px;
	}

	.delo-form-group .delo-input::placeholder {
		color: transparent;
	}

	.delo-form-group .delo-input:focus {
		outline: none;
	}

	.delo-form-group .delo-input[type="number"] {
		appearance: textfield;
	}

	.delo-form-group .delo-input[type="textarea"] {
		max-width: 100%;
		min-width: 100%;
	}
}

/* #region Checkbox */
.delo-checkbox-container label {
	--checkbox-width: 18px;

	position: relative;
	display: flex;
	align-items: center;
	padding-left: calc(var(--checkbox-width) + 10px);
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	.delo-checkbox {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;

		&:checked ~ .checkmark {
			&::after {
				display: block;
			}
		}
	}

	.checkmark {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		height: var(--checkbox-width);
		width: var(--checkbox-width);
		border: 1px solid currentColor;

		display: flex;
		justify-content: center;
		align-items: center;

		&::after {
			content: "";
			position: absolute;
			top: 2px;
			transform: rotate(45deg);

			display: none;
			width: 5px;
			height: 10px;

			border: solid currentColor;
			border-width: 0 2px 2px 0;
		}
	}
}

/* #endregion Checkbox */

/* #region Select */

.delo-select-container {
	min-width: 200px;
	border-bottom: 1px solid var(--color-black);
	padding-block: 3px;
	position: relative;

	.delo-select-trigger {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		width: 100%;
		cursor: pointer;

		.selection-count {
			display: none;
			justify-content: center;
			align-items: center;
			width: 16px;
			height: 16px;
			border-radius: 50px;
			background-color: var(--color-blue);
			color: var(--color-white);
			font-size: 10px;
		}

		.delete-selection {
			display: none;
			content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/cross_black.svg');
			height: 12px;
			aspect-ratio: 1;
			transition: 0.2s ease-in-out;
			margin-left: auto;
		}

		&::after {
			content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/select_arrow_down.svg');
			display: flex;
			height: 12px;
			aspect-ratio: 1;
			transition: 0.2s ease-in-out;
		}
	}

	&[data-selection-count]:not([data-selection-count='0']) {
		.delo-select-trigger {
			.selection-count {
				display: flex;
			}

			.delete-selection {
				display: flex;
			}
		}
	}


	.delo-select {
		height: 0;
		overflow: hidden;
		position: absolute;
		width: 100%;

		select {
			width: 100%;
			height: fit-content;
			padding: 0;
			border: 1px solid var(--color-gray-20);
			overflow: auto;

			option {
				font-size: 18px;
				color: var(--color-black);
				padding: 3px 10px;
				user-select: none;

				display: flex;
				justify-content: space-between;
				align-items: center;

				&:checked {
					background: transparent;
					color: var(--color-blue);

					&::after {
						content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/cross_blue.svg');
						display: flex;
						height: 12px;
						aspect-ratio: 1;
					}
				}

				&:hover:not(&:checked) {
					background: var(--color-gray-10);
				}
			}

			&:focus {
				outline: none;
			}
		}
	}

	&[data-is-open="true"] {
		.delo-select-trigger {
			&::after {
				rotate: 180deg;
			}
		}

		.delo-select {
			height: fit-content;
			top: 103%;
			left: 0;
		}
	}
}

/* #endregion Select */

/* #region datepicker */
.flatpickr-calendar {

	.flatpickr-day.selected,
	.flatpickr-day.startRange,
	.flatpickr-day.endRange,
	.flatpickr-day.selected.inRange,
	.flatpickr-day.startRange.inRange,
	.flatpickr-day.endRange.inRange,
	.flatpickr-day.selected:focus,
	.flatpickr-day.startRange:focus,
	.flatpickr-day.endRange:focus,
	.flatpickr-day.selected:hover,
	.flatpickr-day.startRange:hover,
	.flatpickr-day.endRange:hover,
	.flatpickr-day.selected.prevMonthDay,
	.flatpickr-day.startRange.prevMonthDay,
	.flatpickr-day.endRange.prevMonthDay,
	.flatpickr-day.selected.nextMonthDay,
	.flatpickr-day.startRange.nextMonthDay,
	.flatpickr-day.endRange.nextMonthDay {
		border-color: var(--color-blue);
		background-color: var(--color-blue);
	}
}

/* #endregion datepicker */

/* #region Search */
.delo-search-container {
	position: relative;
	min-width: 200px;
	border-bottom: 1px solid var(--color-black);

	display: flex;
	justify-content: space-between;
	align-items: center;

	.delo-search {
		background: transparent;
		border: none;
		font-size: 18px;

		outline: none !important;

		&::placeholder {
			color: var(--color-black);
		}
	}

	.delo-clear-search {
		display: none;

		position: absolute;
		right: 25px;
		content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/cross_black.svg');
		height: 14px;
		aspect-ratio: 1;
		cursor: pointer;
	}

	.delo-submit {
		position: absolute;
		right: 0;
		width: 25px;
		height: 25px;
		padding: 0;
		background: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/delo_search_small.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 16px 16px;
		border: none;
		cursor: pointer;
	}

	&:has(.delo-search:not(:placeholder-shown)) {
		.delo-clear-search {
			display: flex;
		}
	}
}

/* #endregion Search */

/* #region Radio */
.delo-form-group {
	.input:has(.form-label-radio) {
		display: flex;
		gap: 6px;
		align-items: center;
		transform: translateY(2px);
	}

	.form-group:has(input[type='radio']) {
		display: flex;
		flex-direction: row;
		gap: 16px;
	}

	input[type='radio'] {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		appearance: none;
		background-color: transparent;
		margin: 6px;
		font: inherit;
		color: currentColor;
		width: 17px;
		height: 17px;
		border: 1px solid currentColor;
		border-radius: 50%;
		transform: translateY(-0.5px);
	}

	input[type="radio"]::before {
		content: "";
		width: 9px;
		height: 9px;
		border-radius: 50%;
		transform: scale(0);
		transition: 120ms transform ease-in-out;
		box-shadow: inset 1em 1em var(--color-blue);
	}

	input[type="radio"]:checked::before {
		transform: scale(1);
	}
}

/* #endregion Radio */

/* #region Dropdown Select */
select.delo-select {
	option {
		color: var(--color-black);
	}
}

/* #endregion Dropdown Select */
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.news-search-form {
    fieldset {
        display: flex;
        justify-content: space-between;
        border: none;

        .news-search-left {
            display: flex;
            gap: 44px;
            flex: 1 1 0px;

            .form-group {
                width: 100%;
            }

            .date-picker-container {
                position: relative;
                display: flex;
                align-items: center;
                cursor: pointer;

                label {
                    display: inline-block;
                    width: 100%;
                    padding-block: 3px;
                    border-bottom: 1px solid var(--color-black);
                    cursor: pointer;
                }

                #dateRange {
                    visibility: hidden;
                    position: absolute;
                }

                &::after {
                    content: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/select_arrow_down.svg');
                    display: flex;
                    height: 12px;
                    aspect-ratio: 1;
                    transition: 0.2s ease-in-out;
                    position: absolute;
                    right: 0;
                }

                &:has(#dateRange.active) {
                    &::after {
                        rotate: 180deg;
                    }
                }
            }
        }

        .news-search-right {
            display: flex;
            justify-content: right;
            flex: 1 1 0px;
        }
    }
}

.news .news-search-result {
    .news-container {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        gap: 96px 44px;

        @media only screen and (max-width: 767px) {
            grid-template-columns: repeat(1, 1fr);
        }

        .delo-article {
            display: flex;
            flex-direction: column;

            a.image-container {
                img {
                    background: #fff;
                    width: 100%;
                    height: 426px;
                    aspect-ratio: 3 / 2;
                    object-fit: cover;
                }
            }

            .h5-preline {
                margin-top: calc(var(--spacing-xs) - 4px);
                margin-bottom: calc(var(--spacing-xs) - 12px);
            }

            .h4-headline {
                line-height: 120%;
                letter-spacing: 0.96px;
                color: var(--color-black);
            }

            .read-more {
                display: flex;
                align-items: center;

                padding-block: var(--spacing-4xs);
                gap: var(--spacing-4xs);
                margin-top: var(--spacing-s);

                img {
                    height: 24px;
                    width: 24px;
                }
            }

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

            @media only screen and (max-width: 767px) {
                grid-template-columns: repeat(1, 1fr);
            }
        }

    }

    .news-pagination-container {
        display: flex;
        justify-content: center;

        ul {
            display: flex;
            flex-direction: row;
            gap: var(--spacing-xs);
            list-style: none;
            padding: 0;
            margin-bottom: var(--spacing-xl);
            margin-top: var(--spacing-m);

            li {
                a {
                    text-decoration: none;
                    color: unset;
                }

                &.previous {
                    -webkit-transform: scaleX(-1);
                    -ms-transform: scaleX(-1);
                    -moz-transform: scaleX(-1);
                    -o-transform: scaleX(-1);
                    transform: scaleX(-1);
                }

                &.current {
                    text-decoration: underline;
                    text-underline-offset: 7px;
                    color: var(--color-blue);
                }


                &:hover {

                    &.next,
                    &.previous {
                        img {
                            filter: brightness(0) saturate(100%) invert(55%) sepia(61%) saturate(3533%) hue-rotate(9deg) brightness(103%) contrast(103%);
                        }
                    }

                    a {
                        color: var(--color-orange);
                    }
                }
            }
        }
    }
}
.news.news-single {
    .news-banner {
        .text-container {
            position: relative;

            .h1-headline {
                position: absolute;
                bottom: var(--spacing-m);
                margin-bottom: 0px;
            }
        }
    }

    /* Kinda hacky workaround for "About DELO": When container is light-blue, headlines are blue. */
    div.background-lightblue [class^='h'][class$='-headline'] {
        color: var(--color-blue);
    }

    .breadcrumb {
        padding-top: 16px;
    }
}


.single-news {
    margin-bottom: var(--spacing-l);

    .left {
        hyphens: none;
    }

    .right {
        max-width: 412px;
        margin-left: auto;

        .images {
            .image-container img {
                width: 100%;
                height: auto;
            }
        }
    }

    @media only screen and (max-width: 980px) {
        .right {
            max-width: unset;
        }
    }
}
.modal-wrapper {
    --content-width: 90%;

    main {
        min-height: 100vh;
    }

    .container {
        max-width: 100%;
    }

    --modal-header-height: 140px;
    --modal-logo-width: 200px;

    @media only screen and (max-width: 1200px) {
        --modal-header-height: 120px;
        --modal-logo-width: 180px;
    }

    @media only screen and (max-width: 980px) {
        --modal-header-height: 82px;
        --modal-logo-width: 160px;
    }

    @media only screen and (max-width: 767px) {
        --modal-header-height: 64px;
        --modal-logo-width: 100px;
    }

    header {
        position: fixed;
        top: 0;
        width: 100%;
        height: var(--modal-header-height);
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-gray-10);
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--modal-header-height);
        margin-left: var(--spacing-m);
        margin-right: var(--spacing-m);

        .logo-container {
            height: 25%;
            line-height: 0;

            img {
                height: auto;
                width: var(--modal-logo-width);
                object-fit: contain;
            }
        }
    }

    @media only screen and (min-width: 980px) {

        .modal-inner-content {
            height: auto;

            .sticky {
                position: sticky;
                top: 0;
                float: left;
                line-height: 0;

                img {
                    margin-top: var(--modal-header-height);
                    object-fit: cover;
                    height: calc(100vh - var(--modal-header-height));
                    width: 36vw;
                }
            }

            .regular {
                margin-left: 36vw;
                min-height: calc(100vh - var(--modal-header-height));

                > div {
                    padding-top: var(--modal-header-height);
                }
            }

        }
    }

    @media only screen and (max-width: 979px) {
        .modal-inner-content {
            margin-top: var(--modal-header-height);

            .sticky {
                line-height: 0;
                margin-top: var(--modal-header-height);

                img {
                    object-fit: cover;
                    object-position: center;
                    height: 400px;
                    width: 100%;
                }
            }
        }
    }
}


/* The modal overlay that covers the entire screen */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1000;

    /* Center the loading spinner inside */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Link to the animation */
    animation: openModalAnimation 0.5s ease-out forwards;
}

/* The loading spinner element */
.loading-spinner {
    border: 8px solid #f3f3f3;
    /* Light grey circle */
    border-top: 8px solid #3498db;
    /* Blue part */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spinModalAni 1.5s linear infinite;
}

/* * Keyframe Animation for the Modal
    * Fades in from 0 to 1 opacity
    * Scales up from 90% to 100% size
*/
@keyframes openModalAnimation {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Keyframe Animation for the spinning circle */
@keyframes spinModalAni {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* #region Fade In Animations */
.fade_in_down {
	animation: fadeInDown 1s ease-in-out forwards;
}

.fade_in_up {
	animation: fadeInUp 1s ease-in-out forwards;
}

.fade_in_left {
	animation: fadeInLeft 1s ease-in-out forwards;
}

.fade_in_right {
	animation: fadeInRight 1s ease-in-out forwards;
}


@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translateZ(0);
	}
}

@keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -2000px, 0);
		transform: translate3d(0, -2000px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translateZ(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@keyframes fadeInUpBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 2000px, 0);
		transform: translate3d(0, 2000px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

/* #endregion Fade In Animations */

.pulse {
	animation: pulse 1s ease-in-out forwards;
	transform-origin: center;
}

@keyframes pulse {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	50% {
		-webkit-transform: scale3d(1.3, 1.3, 1.3);
		transform: scale3d(1.3, 1.3, 1.3);
	}

	100% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}
.tx-solr-search-form {
    width: 100%;
    display: flex;
    flex-direction: column;

    .tx-solr-search-form-pi-results {
        position: relative;
        width: 100%;
        margin-top: var(--spacing-s);
        padding-right: 40%;

        .input-group {
            display: flex;
            gap: var(--card-frame-thick);
        }

        input[type="text"] {
            width: 100%;
            border: none;
            outline: none;
            border-bottom: 1px solid var(--color-black);
            border-radius: 0;
            font-size: var(--fz-text);
            line-height: 1.5;
            background-color: transparent;
        }
    }

    @media only screen and (max-width: 980px) {
        .tx-solr-search-form-pi-results {
            padding-right: 0;
        }
    }
}

:is(.desktop-menu, .moible-menu) .tx-solr-search-form {
    > .h3-preline {
        display: none;
    }
}

.results-highlight {
    font-weight: bold;
    color: var(--color-blue);
    background-color: #0093D626;
    padding-inline: 0.25em;
}

.results-entry {
    margin-block: var(--spacing-m);

    hr {
        border-top: 0px solid var(--color-gray-30);
    }

    &:last-child {
        hr {
            display: none;
        }
    }

    &.hasImage {
        display: flex;
        gap: var(--spacing-s);
        align-items: start;

        > div {
            min-width: 0;
        }

        > img {
            width: 184px;
            height: 184px;
            object-fit: cover;
        }
    }

    > div {
        .results-topic {
            margin-bottom: 12px;

            a {
                text-decoration: none;
                color: var(--color-blue);
            }
        }

        .crumb {
            color: var(--color-gray-60);
        }
    }

    @media only screen and (max-width: 767px) {
        &.hasImage {
            flex-direction: column;

            > img {
                width: 100%;
                height: auto;
                aspect-ratio: 1;
                object-fit: cover;
            }
        }

        > div {
            .result-content {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                line-clamp: 3;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        }
    }
}

ul.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 15px;
    padding: 0;
    flex-direction: row;

    li {
        a {
            &.previous img {
                -webkit-transform: scaleX(-1);
                -ms-transform: scaleX(-1);
                -moz-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                transform: scaleX(-1);
            }

            text-decoration: none;
            color: unset;
        }

        &.active {
            text-decoration: underline;
            text-underline-offset: 7px;
            color: var(--color-blue);
        }

        &:hover {
            a {
                color: var(--color-orange);

                &.next,
                &.previous {
                    img {
                        filter: brightness(0) saturate(100%) invert(55%) sepia(61%) saturate(3533%) hue-rotate(9deg) brightness(103%) contrast(103%);
                    }
                }
            }
        }
    }
}


.search-btn-close {
    display: none;
}

main .search-results {
    position: absolute;
    top: 100%;
    background-color: white;
    width: 100%;
    left: 0;
    box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.1);

    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
    z-index: 9;

    > .container {
        display: flex;
        align-items: center;
        height: fit-content;
        padding-block: 50px;

        > .row {
            width: 100%;
        }

    }

    &.open {
        height: auto;
        padding: 0px var(--spacing-m) calc(var(--spacing-m) / 2) calc(var(--spacing-m) / 2);
    }

    .search-btn-close {
        display: block;
        position: absolute;
        right: 0px;
        top: 0px;
        background-image: url('../../../_assets/d6fd4445184ac906657618690700b40a/icons/frontend/cross_black.svg');
        height: calc(var(--spacing-m) + 15px);
        padding: calc(var(--spacing-m) / 2);
        aspect-ratio: 1;
        transition: 0.2s ease-in-out;
        margin-left: auto;
        cursor: pointer;
        border: 0;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center center;
    }

}

#tx-solr-search {
    .results-headline {
        display: flex;
        gap: var(--spacing-s);
        align-items: baseline;

        h2 {
            margin: 0;
        }

        .search-sub {
            font-size: var(--fz-text);
            color: var(--color-blue);
        }
    }

    .h2-headline + .solr-pagination {
        display: none;
    }

    .resultset {
        .result {
            color: var(--color-blue);
            font-weight: bold;

            strong {
                font-weight: normal;
            }
        }
    }

    @media only screen and (max-width: 767px) {
        .results-headline {
            flex-direction: column;
            gap: 0;
        }
    }
}

.search-split-container {

    .search-results.open {
        width: unset;
        padding-inline: var(--content-width-padding);
        left: calc(var(--content-width-padding) * -1);
        right: calc(var(--content-width-padding) * -1);
        background-color: var(--color-gray-5);
    }

    .tx-solr-search-form-pi-results:not(.focus) {

        .search-results.open {
            height: 0;
            padding: 0;
        }
    }
}
.delo-popup-container {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
	justify-content: center;
	/* align-items: center; */
	width: 100vw;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);

	.delo-popup {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		width: 90%;
		max-width: 1396px;
		height: fit-content;
		max-height: 80vh;
		background: white;

		.image-container img {
			height: 300px;
			aspect-ratio: 1;
		}

		.close-popup {
			position: absolute;
			top: 36px;
			right: 36px;
			background: transparent;
			border: none;
			padding: 0;
			cursor: pointer;
			z-index: 1;

			img {
				width: 16px;
				height: 16px;
			}
		}

		.popup-content {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 36px;
		}
	}

	@media only screen and (max-width: 767px) {
		.delo-popup {
			/* height: 80%; */

			.close-popup {
				img {
					width: 16px;
					height: 16px;
				}
			}

			.popup-content {
				padding: 20px;
			}
		}
	}
}
.delo-flyout-menu {
    .stick-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;

        z-index: 50;
        position: fixed;
        right: 0;

        &.flyout-wrapper {
            top: 50%;

            .flyout-item {
                --flyout-width: 67px;

                gap: 16px;
                height: 64px;
                text-decoration: none;

                border-top-left-radius: 5000px;
                border-bottom-left-radius: 5000px;

                /* FIXME: Do we implement Figma colors? This is Delo Black 88 | 30% */
                padding-inline: 15px;

                transform: translateX(calc(100% - var(--flyout-width)));
                transition: .3s ease-in-out;

                &:hover {
                    transform: translateX(0%);
                }

                .image-container {
                    width: 42px;
                    display: flex;
                    justify-content: center;

                    img {
                        aspect-ratio: 1;
                        width: 32px;
                    }
                }

                &.background-orange {
                    animation: 2s show-initially;
                }

                @media only screen and (max-width: 767px) {
                    --flyout-width: 50px;

                    height: 48px;

                    .image-container {
                        width: 22.5px;

                        img {
                            height: 22.5px;
                            width: 22.5px;
                        }
                    }

                }
            }
        }
    }

    .jobs {
        img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(1239%) hue-rotate(266deg) brightness(117%) contrast(100%);
        }
    }

    .flyout-item,
    .to-top {
        display: flex;

        box-shadow: 0px 0px 8px 0px rgba(65, 65, 64, 0.3);
        cursor: pointer;
        justify-content: center;
        align-items: center;
    }

    .to-top {
        border-radius: 5000px;
        background: white;

        bottom: 12px;
        right: 12px;

        height: 44px;
        width: 44px;

        @media only screen and (max-width: 767px) {
            bottom: 4px;
            right: 4px;

            height: 36px;
            width: 36px;
        }

        img {
            aspect-ratio: 33 / 32;
            width: 70%;
        }
    }
}

@keyframes show-initially {
    0% {
        transform: translateX(0%);
    }

    80% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(calc(100% - var(--flyout-width)));
    }
}
.product-tag-container {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	line-height: initial;

	.product-tag {
		background-color: var(--color-blue);
		padding: 6px 16px;
		color: var(--color-white);
		border-radius: 100px;
		font-size: var(--fz-tag);
		font-weight: 600;
	}

	@media only screen and (max-width: 767px) {
		.product-tag {
			padding: 5px 12px;
		}
	}
}

.product-module-container {
	.product-scroll-container {
		position: relative;

		&.image {
			> .header-image {
				position: sticky;
				top: var(--nav-height);
				width: 100%;
				z-index: 0;

				img {
					top: 0;
					width: 100%;
					height: calc(100dvh - var(--nav-height));
					object-fit: cover;
					position: absolute;
				}

				&.mobile {
					display: none;
				}
			}


			.scroll-content-container {
				position: relative;
				z-index: 1;
			}

			@media only screen and (max-width: 980px) {
				.header-image {
					position: unset;
					top: unset;

					&.desktop {
						display: none;
					}

					&.mobile {
						display: block;
					}

					img {
						position: unset;
						top: unset;
						mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
						-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
					}
				}

				.scroll-content-container {
					margin-top: -59dvh
				}
			}
		}

		.scroll-content-container {
			position: absolute;
			top: 0;

			> div[class^="product-"][class*="-container"] {
				max-width: 50%;
				min-height: 80vh;

				display: flex;
				flex-direction: column;
				justify-content: center;

				p:empty {
					display: none;
				}

				@media only screen and (max-width: 980px) {
					max-width: 100%;
					min-height: unset;
				}
			}

			div.product-header-container.product-header-container {
				.product-tag-container {
					position: relative;
					margin-top: var(--spacing-xl);
				}

				.scroll-cta {
					position: absolute;
					right: 0;
					bottom: 0;
					transform: translateX(50%);
				}

				@media only screen and (max-width: 980px) {
					min-height: unset;

					.product-tag-container {
						position: relative;
						margin-top: var(--spacing-l);
					}

					.scroll-cta {
						display: none;
					}
				}
			}
		}
	}

	> * {
		position: relative;
		background-color: inherit;
	}

	.related-container,
	.more-info-container {
		overflow: hidden;

		.text-wrap {
			margin-bottom: 40px;
		}
	}
}
.product-overview-module-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-m) var(--card-frame-thick);

	.single-product {
		background-color: var(--color-white);
		display: flex;
		flex-direction: column;

		.image-container {
			position: relative;

			img {
				aspect-ratio: 412 / 450;
				width: 100%;
				height: auto;
				object-fit: cover;
			}

			.product-tag-container {
				position: absolute;
				left: 0;
				bottom: 0;

				padding: var(--card-frame-thin);
			}
		}

		.content-container {
			flex: 1 1 0px;
			display: flex;
			flex-direction: column;
			padding: var(--card-frame-thin);

			.h3-headline a {
				color: var(--color-black);
				text-decoration: none;
			}

			.body-text {
				margin-bottom: var(--spacing-s);
				color: var(--color-black);
			}

			.delo-button.secondary {
				margin-top: auto;
			}
		}
	}

	@media only screen and (max-width: 1200px) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media only screen and (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}
.hero-slider-container {
	position: relative;

	swiper-container {

		swiper-slide {
			padding-block: var(--spacing-xxl);
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;

			.image-container {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				position: absolute;
				z-index: -1;

				img {
					width: 100%;
					object-fit: cover;
					height: 100%;
				}
			}

			height: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;


			.slide-wrapper {

				.slide-content {
					background-color: var(--color-dark-blue);
					padding: var(--card-frame-thick);
					width: 50%;

					.description {
						margin-bottom: 25px;
					}

					> .delo-button.tertiary {
						margin-block: var(--spacing-s);
					}

					.product-tag-container {}
				}
			}

			@media only screen and (max-width: 980px) {
				background-image: none !important;
				padding: 0;

				.image-container {
					position: initial;
					display: block;
					width: 100%;
					height: 30vh;
					z-index: initial;

					img {
						width: 100%;
						object-fit: cover;
						height: 30vh;
					}
				}

				.slide-wrapper {
					padding-block: var(--spacing-m) var(--spacing-xl);

					.slide-content {
						padding: 0;
						width: 100%;

						> .delo-button.tertiary {
							margin-block: var(--spacing-m);
						}
					}
				}
			}
		}
	}

	.tab-navigation-container {
		display: flex;
		position: absolute;
		left: 50%;
		bottom: var(--spacing-l);
		transform: translateX(-50%);
		z-index: 1;
		max-width: 90%;
		overflow: auto;

		border: 2px solid var(--color-orange);
		border-radius: 50px;
		padding: 12px;

		user-select: none;

		> .wrapper {
			position: relative;
			display: flex;
			width: 100%;
			height: 100%;
		}


		.tab-background {
			position: absolute;
			height: 100%;
			background-color: var(--color-orange);
			border-radius: 50px;
			transition:
				left 0.5s ease-in-out,
				width 0.5s ease-in-out;
			z-index: 1;
		}

		.tab {
			padding: 10px var(--spacing-xs);
			background-color: transparent;
			border-radius: 50px;
			color: var(--color-gray-20);
			cursor: pointer;
			position: relative;
			z-index: 1;
			white-space: nowrap;

			&:hover,
			&.active {
				color: var(--color-white);
			}
		}

		&::after {
			background-color: var(--color-orange);
		}

		&:has(.tab.active:hover) .tab-background {
			background-color: var(--color-orange-lite);
		}

		@media only screen and (max-width: 980px) {
			display: none;
		}
	}

	.mobile-navigation-container {
		/* display: flex; when active */
		display: none;

		justify-content: space-between;
		align-items: center;
		gap: var(--card-frame-thick);

		height: 35px;
		width: 90%;

		position: absolute;
		left: 50%;
		bottom: unset;
		top: calc(30vh - 20px);
		transform: translate(-50%, -100%);
		z-index: 1;

		.dropdown-navigation-container {
			height: 35px;
			padding-inline: 14px;
			background-color: var(--color-orange);
			border: none;
			border-radius: 50px;
			color: var(--color-white);
		}

		.arrow-navigation-container {
			display: flex;
			justify-content: space-between;
			gap: 8px;

			.delo-swiper-button {
				cursor: pointer;

				img {
					width: 35px;
					height: 35px;
				}
			}
		}

		@media only screen and (max-width: 980px) {
			display: flex;
		}
	}
}
.teaser-module-container {
	swiper-container {
		a.linkwrapper {
			text-decoration: none;
			color: inherit;
		}

		.slide-wrapper {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-xxs);
			height: 100%;
			transition: 0.5s ease-out;

			.image-container {
				overflow: hidden;

				img {
					width: 100%;
					height: auto;
					object-fit: cover;
					aspect-ratio: 412 / 274;
					transition: 0.5s ease-out;
				}
			}

			.content-container {
				flex: 1 1 0px;
				display: flex;
				flex-direction: column;

				.body-text {
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 5;
					line-clamp: 10;
					-webkit-box-orient: vertical;

					margin-bottom: var(--spacing-xs);
				}

				.teaser-button {
					margin-top: auto;
				}
			}

			&:hover {
				.image-container {
					img {
						scale: 1.15;
					}
				}
			}
		}
	}

	&.card {
		swiper-container {
			.slide-wrapper {
				padding: var(--card-frame-thin);

				&:hover {
					box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
				}
			}
		}
	}
}
.gallery-wrapper {
    margin-inline: calc((-1) * var(--content-width-padding));

    .gallery-container {
        display: flex;

        .text-container {
            width: 47%;
            padding-left: var(--content-width-padding);
            padding-right: var(--spacing-xl);
            padding-block: var(--card-frame-thin);
            transition: filter 0.3s ease-in-out;
        }

        .gallery-slider-container {
            padding-right: var(--content-width-padding);
        }

        &:has(.gallery-slider-container swiper-slide:first-of-type:not(.swiper-slide-active)) {
            .text-container {
                filter: blur(8px);
                opacity: 0.65;
            }
        }

        @media only screen and (max-width: 980px) {
            flex-direction: column;
            gap: var(--spacing-s);

            .text-container {
                width: 100%;
                padding-inline: var(--content-width-padding);
                padding-block: 0;
                transition: unset;
            }

            div.gallery-slider-container {
                width: 100%;
                padding-inline: var(--content-width-padding);
            }

            &:has(.gallery-slider-container swiper-slide:first-of-type:not(.swiper-slide-active)) {
                .text-container {
                    filter: unset;
                    opacity: 1;
                }
            }

            &:has(.gallery-slider-container swiper-slide:first-of-type:not(.swiper-slide-active)) {
                .text-container {
                    filter: unset;
                }
            }
        }
    }
}