.site-header {
	display: flex;
	flex-direction: column;
	z-index: 2000;
	position: relative;
}

#skip-links {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
}

.sr-only-focusable:focus {
	position: fixed;
	top: var(--size-4);
	left: var(--size-4);
	z-index: 9999;
	width: auto;
	height: auto;
	padding: var(--padding-xs);
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: nowrap;
	background-color: var(--background-black);
	color: var(--text-neutral-inverse);
	font-size: var(--fs-md);
	font-weight: 400;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
	outline: none;
	border: 1px solid var(--text-neutral-inverse);
}

.site-header {
	section {
		position: relative;
		width: 100%;
	}

	.logo {
		position: absolute;
		top: var(--padding-xs);
		left: var(--padding-xs);
		width: 96px;
		height: 100px;

		svg {
			width: 100%;
			height: 100%;
		}
	}

	.mobile-only-header-text {
		display: none;
	}

	/* Search Panel */
	.search-toggle {
		cursor: pointer;
		height: var(--size-8);
		width: var(--size-8);
	}

	.search-section {
		display: grid;
		grid-template-rows: 1fr;
		overflow: hidden;
		transition: grid-template-rows 0.2s linear;

		&[inert] {
			grid-template-rows: 0fr;
			.search-inner {
				border: none;
			}
		}

		& > * {
			min-height: 0;
			overflow: hidden;
			border: none;
		}
	}

	.search-inner {
		--search-input-padding: var(--padding-2xs);

		display: grid;
		grid-template-columns: 1fr 45px 45px;
		gap: var(--gap-sm);
		justify-content: center;
		align-items: center;

		padding-right: var(--padding-2xs);
		padding-left: var(--padding-2xs);

		border-bottom: 1px solid var(--color-black);

		.desktop-only {
			display: none;
		}

		input {
			padding: var(--search-input-padding);
			font-size: var(--font-size-base);
			border-right: none;
			grid-column: 1 / span 2;
			grid-row: 1;

			margin-top: var(--padding-2xs);
			margin-bottom: var(--padding-2xs);

			&:focus-visible {
				outline-offset: 0;
				outline-width: 2px;
			}
		}

		.search-search-button {
			grid-column: 3 / span 1;
			grid-row: 1;

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

			width: var(--button-width);
			height: var(--button-height);

			color: var(--color-white);
			background-color: var(--color-black);

			padding: var(--padding-2xs);
			cursor: pointer;

			&:focus,
			&:focus-visible {
				outline-offset: -2px;
			}
		}

		.search-close-button {
			grid-column: 2 / span 1;
			grid-row: 1;

			width: var(--button-width);
			height: var(--button-height);

			padding: var(--padding-3xs);
			cursor: pointer;

			color: var(--color-black);

			z-index: 1;

			&:focus,
			&:focus-visible {
				outline-offset: -2px;
			}

			svg {
				flex-shrink: 0;
				background-color: var(--color-white);
			}
		}

		@media (min-width: 1280px) {
			--search-input-padding: var(--padding-xs) var(--padding-xs)
				var(--padding-xs) var(--padding-3xl);

			grid-template-columns: 1fr var(--size-14) auto;
			gap: 0;
			padding: 0;
			border: 1px solid var(--color-black);

			input {
				margin: 0;
				line-height: 32px;

				&:focus-visible {
					outline-offset: -2px;
				}
			}
			.desktop-only {
				display: inline;
				flex-shrink: 0;
			}

			.search-close-button {
				margin-right: var(--padding-2xs);
			}

			.search-search-button {
				padding: var(--padding-xs) var(--padding-lg);
				gap: var(--gap-md);

				min-width: 232px;

				svg {
					flex-shrink: 0;
					width: var(--size-8);
					height: var(--size-8);
				}
			}
		}
	}

	/* Service Navigation */
	.service-nav {
		display: flex;
		gap: var(--size-4);
		justify-content: flex-end;
		padding: var(--padding-xs);
	}

	.service-list {
		display: flex;
		gap: var(--gap-md);

		& > li {
			position: relative;
		}
	}

	.service-nav-item {
		display: inline-block;
		padding: var(--padding-3xs);
		text-align: left;
		cursor: pointer;

		&::after {
			content: attr(data-label);
			display: block;
			font-weight: var(--font-weight-bold);
			height: 0;
			overflow: hidden;
			visibility: hidden;
			pointer-events: none;
		}

		&:hover,
		&:focus,
		&:focus-within,
		&.service-nav-item--active,
		&.service-nav-item--language,
		&[aria-current="page"] {
			font-weight: var(--font-weight-bold);
		}

		&.service-nav-item--language {
			display: grid;
			grid-template-columns: repeat(2, auto);
			align-items: center;
			gap: 0 var(--gap-sm);

			svg {
				width: var(--size-5);
				height: var(--size-5);
			}

			.span {
				grid-column: 1 / 1;
				grid-row: 1 / 1;
			}

			&:disabled {
				font-weight: var(--font-weight-bold);
				color: var(--color-dark);
			}

			&:hover {
				svg {
					animation: bounce-open 0.5s ease;
				}
			}

			&[aria-expanded="true"] {
				svg {
					transform: rotate(180deg);
				}

				&:hover {
					svg {
						animation: bounce-close 0.5s ease;
					}
				}
			}
		}
	}

	.service-sub-list {
		display: flex;
		gap: var(--gap-md);
		display: flex;
		flex-direction: column;
		gap: var(--size-2);
		min-width: 200px;
	}

	.service-sub-list--language {
		min-width: var(--size-20);
	}

	.service-sub-item {
		display: block;
		padding: var(--padding-3xs);
		width: 100%;

		font-size: var(--font-size-small);
		hyphens: auto;

		&:hover,
		&:focus,
		&:focus-within,
		&[aria-current="page"] {
			font-weight: var(--font-weight-bold);
		}
	}

	.service-dropdown {
		position: absolute;
		background-color: var(--color-white);
		display: grid;
		left: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		padding: var(--padding-3xs);

		overflow: hidden;
		transition: grid-template-rows 0.1s ease;

		border: 1px solid var(--color-black);
		margin-left: calc(var(--padding-3xs) * -1 - 1px); /* 1px = border */
		z-index: 2;

		&[inert] {
			grid-template-rows: 0fr;
			padding: 0;
			border: none;
		}

		> * {
			min-height: 0;
		}
	}

	/* Language Navigation */
	.service-dropdown--language {
		left: initial;
		right: 0;
		width: 66px;
	}

	.language-list {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.language-item {
		display: inline-flex;
		align-items: center;

		&:not(:last-child)::after {
			content: "/";
			padding: var(--padding-3xs);
		}

		a {
			padding: var(--padding-3xs);
		}

		[aria-selected="true"] {
			font-weight: 700;
		}
	}

	/* Main Navigation */
	.main-nav {
		order: 100; /* reorder visually */

		display: flex;
		flex-direction: column;
	}

	/* Tab Navigation */
	.tab-list {
		display: flex;
		border-bottom: 1px solid var(--color-black);
		justify-content: flex-end;

		font-size: var(--font-size-base);
		li {
			line-height: 1;

			&:last-child .tap-item {
				border-right: 1px solid var(--color-black);
			}
		}
	}

	.tap-item {
		position: relative;
		display: inline-block;
		gap: var(--gap-sm);
		padding: var(--padding-sm);
		border-top: 1px solid var(--color-black);
		border-left: 1px solid var(--color-black);
		font-size: var(--font-size-medium);
		text-align: left;

		&::after {
			content: attr(data-label);
			display: block;
			font-weight: var(--font-weight-bold);
			height: 0;
			overflow: hidden;
			visibility: hidden;
			pointer-events: none;
		}

		&:hover,
		&:focus,
		&:focus-within {
			font-weight: var(--font-weight-bold);
		}

		&.tap-item--active,
		&[aria-current="page"] {
			border-bottom: var(--border-xs) solid var(--color-white);
			margin-bottom: calc(var(--border-xs) * -1);
		}

		&[aria-expanded="false"] {
			svg {
				transform: rotate(0deg);
				transition: transform 0.2s ease;
			}
		}

		svg {
			position: absolute;
			top: var(--padding-sm);
			right: var(--padding-sm);
			transform: rotate(180deg);
			width: var(--size-6);
			height: var(--size-6);
		}
	}
	.tap-item--dropdown {
		padding-right: var(--padding-3xl);
		cursor: pointer;
	}

	/* Main Menu Navigation */
	.main-menu-list {
		display: flex;
		gap: var(--gap-xl);
		padding: var(--padding-sm) var(--padding-md);
		font-size: var(--font-size-base);
		border-bottom: 1px solid var(--color-black);
		li {
			height: var(--size-8);
		}
	}

	.main-menu-item {
		display: inline-block;
		text-align: left;
		cursor: pointer;
		font-size: var(--font-size-medium);
		padding: var(--padding-3xs);

		&::after {
			content: attr(data-label);
			display: block;
			font-weight: var(--font-weight-bold);
			height: 0;
			overflow: hidden;
			visibility: hidden;
			pointer-events: none;
		}

		&:hover,
		&:focus,
		&:focus-within,
		&[aria-current="page"],
		&[aria-expanded="true"],
		&.main-menu-item--active {
			font-weight: var(--font-weight-bold);
		}
	}

	/* Departement Navigation */
	.teaser-dropdown {
		position: absolute;
		background-color: var(--color-white);
		width: 100%;
		left: 0;
		display: grid;
		grid-template-rows: 1fr;
		overflow: hidden;
		padding: var(--padding-lg);
		margin-top: 1px; /*border spacing*/

		transition: grid-template-rows 0.1s ease;
		z-index: 1;

		&[inert] {
			grid-template-rows: 0fr;
			padding: 0;
		}

		& > * {
			min-height: 0;
		}
	}

	.teaser-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: 1fr;
		gap: var(--gap-xl);
		max-width: 1112px;
		margin: 0 auto;
	}

	/* Main Manu Dropdown */
	.main-menu-dropdown {
		--nav-level: 1;

		position: absolute;
		background-color: var(--color-white);
		width: 100%;
		left: 0;

		&[inert] {
			.main-menu-dropdown-container {
				padding: 0;
				border: none;
				grid-template-rows: 0fr;
			}
		}
	}

	.main-menu-dropdown-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: 1fr;

		transition: grid-template-rows 0.3s ease;
		overflow: hidden;

		padding: var(--padding-xs) 0;

		border-top: 1px solid var(--color-black);
		border-bottom: 1px solid var(--color-black);

		& > * {
			min-height: 0;
		}
	}

	.main-menu-sub-list {
		display: flex;
		flex-direction: column;

		width: 100%;
		grid-column: var(--nav-level);

		&[inert] {
			display: none;
			grid-template-rows: 0fr;
			padding: 0;
		}
	}

	.main-menu-sub-item {
		display: block;
		position: relative;
		padding: var(--padding-2xs) var(--padding-sm) var(--padding-2xs)
			var(--padding-sm);
		width: 100%;
		text-align: left;

		font-size: var(--font-size-base);
		line-height: var(--lh-base);

		hyphens: auto;

		/* remove focus offset: */
		&:focus,
		&:focus-visible {
			outline-offset: -1px;
		}
	}

	.main-menu-sub-item--trigger {
		padding-right: var(--padding-lg);
		cursor: pointer;

		&:hover,
		&:focus,
		&:focus-within,
		&[aria-expanded="true"] {
			background-color: var(--background-black);
			color: var(--color-white);
		}

		&.main-menu-sub-item--active {
			font-weight: var(--font-weight-bold);
		}

		svg {
			position: absolute;
			right: var(--padding-xs);
			top: 50%;
			height: var(--size-8);
			width: var(--size-8);
			transform: translateY(-50%);
		}
	}

	.main-menu-sub-item--link {
		&:hover,
		&:focus,
		&:focus-within,
		&[aria-current="page"] {
			font-weight: var(--font-weight-bold);
		}
	}

	@media (max-width: 1199.9999px) {
		.main-nav,
		.service-nav {
			display: none;
		}

		.navigation-section {
			border-bottom: 1px solid var(--color-black);
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.search-inner input {
			border: none;
		}

		.mobile-nav-language {
			padding: var(--padding-2xs) var(--padding-3xs);
		}

		.logo {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			top: 0;
			left: 0;
			width: var(--size-18);
			height: var(--size-18);
			svg {
				width: var(--size-10);
				height: var(--size-10);
			}
		}

		.mobile-only-header-text {
			display: block;
			font-size: var(--font-size-small);
			font-weight: var(--font-weight-bold);
			line-height: 1;
			text-align: right;
			padding-right: var(--padding-xs);
		}
	}
}