* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	--font-avenir: 'avenir-next-world';
	--font-shadows: 'shadows-into-light';
	--color-primary: #cc966a;
	--color-dark: #683a1b;
	--color-accent: #cc966a64;
	--color-light: rgb(235 214 196 / 0.4);
	--color-verylight: rgb(235 214 196 / 0.2);
	--color-background: #fff;
	--bg-menu-shadow: rgba(0, 0, 0, .2);
	--bg-textbox-shadow: rgba(0, 0, 0, .5);
	--max-width: 1300;
	--max-width-px: 1300px;
	--fontweight-light: 300;
	--fontweight-regular: 400;
	--fontweight-medium: 500;
	--fontweight-bold: 700;
	--fontsize-small: 12px;
	--fontsize-normal: 16px;
	--fontsize-menu: 16px;
	--lineheight-equal: 1;
	--lineheight-small: 1.2;
	--lineheight-normal: 1.5;
	--sidepadding: 30px;
	--sidepadding-mobile: 20px;
}

body {
	background-color: var(--color-background);
	color: var(--color-dark);
	font-family: var(--font-avenir), sans-serif;
	font-size: var(--fontsize-normal);
	font-weight: var(--fontweight-regular);
	line-height: var(--lineheight-normal);
}

.content-block {
	width: 100%;
	max-width: var(--max-width-px);
	margin: 0 auto;
}

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

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

strong {
	font-weight: var(--fontweight-medium);
}

/* Header */
.page-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 220px;
	background-color: var(--color-background);
	transition: height .3s ease;
	font-size: 0;
	line-height: 0;
	z-index: 1000;

	.desktop-header, .mobile-header {
		height: 100%;
	}

	.mobile-header {
		display: none;
	}

	& + main {
		transition: padding-top .3s ease;
		padding-top: 220px;
	}

	&.scrolled {
		height: 80px !important;

		& + main {
			padding-top: 80px;
		}
		.header-content {
			padding: 0;
			height: calc(100% - 40px);

			nav {
				align-self: center;
			}

			.logo a {
				width: 60px;
			}
		}
	}

	.contact-block {
		background-color: var(--color-accent);
		height: 40px;
		font-size: var(--fontsize-small);
		font-weight: var(--fontweight-medium);
		line-height: var(--lineheight-equal);

		.contacts-block {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: center;
			height: 100%;
		}

		.socials, .contacts {
			display: flex;
			gap: 20px;
			align-items: center;
		}

		.socials {
			justify-self: start;

			a:not(.website) {
				font-size: 0;

				&::before {
					content: '';
					display: inline-block;
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					width: 22px;
					height: 22px;
				}
			}

			.instagram::before { background-image: url(https://www.vital-move.com//content/themes/vitalmove/img/instagram.png); }
			.facebook::before { background-image: url(https://www.vital-move.com//content/themes/vitalmove/img/facebook.png); }
		}

		.contacts {
			justify-self: end;

			a {
				display: flex;
				align-items: center;

				&::before {
					content: '';
					display: inline-block;
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					width: 22px;
					height: 22px;
					margin-right: 10px;
				}

				&.phone::before { background-image: url(https://www.vital-move.com//content/themes/vitalmove/img/phone.png); }
				&.email::before { background-image: url(https://www.vital-move.com//content/themes/vitalmove/img/Icon-ionic-ios-mail.png); }
				&.address::before { background-image: url(https://www.vital-move.com//content/themes/vitalmove/img/map-1.png); }
			}
		}
	}

	.header-content {
		height: calc(100% - 30px);
		padding: 30px 0;
		display: flex;
		justify-content: space-between;

		.burger-menu {
			display: none;
		}
	}

	.logo {
		position: relative;
		height: 100%;
		align-self: start;

		a {
			position: relative;
			display: block;
			width: 230px;
			height: 100%;
			background: url(https://www.vital-move.com//content/themes/vitalmove/img/Logo-VitalMove.png) no-repeat left center transparent;
			background-size: contain;
			transition: all .3s ease;
		}
	}

	nav {
		align-self: end;

		ul {
			list-style: none;
			display: flex;
			gap: 30px;

			li.menu-has-children > a::after {
				content: ' ▼';
				font-size: var(--fontsize-small);
			}

			li {
				&:hover, &:focus-within {
					ul {
						display: block;
					}
				}
			}
		}

		& > ul > li {
			position: relative;
		}

		a {
			text-decoration: none;
			color: var(--color-primary);
			font-size: var(--fontsize-menu);
			font-weight: var(--fontweight-medium);
			line-height: var(--lineheight-equal);
			display: block;

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

		li.menu-current-page > a {
			color: var(--color-dark);
		}

		.menu-submenu {
			display: none;
			position: absolute;
			top: calc(100% + 5px);
			left: 0;
			background-color: var(--color-background);
			box-shadow: 0 2px 5px var(--bg-menu-shadow);
			min-width: 200px;

			li {
				border-bottom: 1px solid var(--bg-menu-shadow);

				&:last-child {
					border-bottom: none;
				}
			}

			a {
				padding: 12px 20px;
			}
		}
	}
}

/* Footer */
footer, .menu-footer {
	position: relative;

	& > .decoline {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 40px;
		background-color: var(--color-accent);
		z-index: -1;
	}

	& > .content-block {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "copyright links";
		align-content: center;
		height: 40px;

		.footer-copyright {
			grid-area: copyright;
			align-self: center;
			font-size: var(--fontsize-small);
			font-weight: var(--fontweight-medium);
			line-height: var(--lineheight-equal);
			color: var(--color-primary);
		}

		.footer-content {
			display: grid;
			grid-area: links;
			align-self: center;

			nav {
				justify-self: end;

				ul {
					list-style: none;
					display: flex;
					gap: 20px;
					align-items: center;

					a {
						font-size: var(--fontsize-small);
						font-weight: var(--fontweight-medium);
						line-height: var(--lineheight-equal);
					}
				}
			}
		}
	}
}

/* Scroll to top */
#scrollTop {
	position: fixed;
	bottom: 60px;
	right: 30px;
	background: url(https://www.vital-move.com//content/themes/vitalmove/img/chevron.svg) no-repeat center var(--color-accent);
	background-size: 50%;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: none !important;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	box-shadow: 0 2px 5px var(--bg-menu-shadow);
	z-index: 999;

	&:hover {
		background-color: var(--color-dark);
	}
}

@media (max-width: 1300px) {
	.content-block {
		padding-left: var(--sidepadding) !important;
		padding-right: var(--sidepadding) !important;
	}
}

@media (max-width: 1279px) {
	.page-header {
		height: 140px !important;

		.desktop-header {
			display: none;
		}

		.mobile-header {
			display: block;
		}

		& + main {
			padding-top: 140px;
		}

		&.scrolled .header-content {
			padding: 0;
		}

		.upper {
			height: 100px;
			background-color: transparent;

			.content-block {
				display: grid;
				grid-template-columns: 1fr 1fr;
				padding-top: 15px;
				padding-bottom: 15px;

				.contacts {
					justify-self: start;
					align-self: start;

					a {
						font-size: 0;

						&::before {
							width: 30px;
							height: 30px;
						}

						&.phone::before { background-image: url(https://www.vital-move.com//content/themes/vitalmove/img/phone-1.png); }
						&.email::before { background-image: url(https://www.vital-move.com//content/themes/vitalmove/img/Icon-ionic-ios-mail-1.png); }
						&.address::before { background-image: url(https://www.vital-move.com//content/themes/vitalmove/img/map.png); }
					}
				}

				.logo {
					justify-self: end;
					align-self: start;

					a {
						width: 160px;
						height: 70px;
						background-position: right center;
					}
				}
			}
		}

		.lower {
			background-color: var(--color-accent);
			padding: 0;
			height: 40px;

			> .content-block {
				display: grid;
				grid-template-columns: 80px 1fr;

				.name {
					justify-self: end;
					align-self: center;

					a {
						display: block;
						color: var(--color-background);
						font-size: var(--fontsize-small);
						font-weight: var(--fontweight-medium);
					}
				}
			}

			.contact-block {
				position: absolute;
				top: 25px;
				right: 25px;
				background: transparent;

				a {
					&::before {
						width: 25px !important;
						height: 25px !important;
					}
				}
			}

			.menu-dropdown {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				background-color: var(--color-background);
				max-height: 0;
				overflow: auto;

				&.active {
					display: block;
					max-height: calc(100vh - 160px);
					overflow: auto;
				}

				.menu-content nav {
					ul {
						flex-direction: column;
						gap: 0;
						padding: 50px 0 0 0;
					}

					a {
						padding: 15px 30px;
						color: var(--color-dark);
					}
				}

				.menu-footer {
					position: relative;
					margin-top: 30px;

					.decoline {
						z-index: 0;
					}

					nav {
						align-self: center;
					}

					a {
						color: var(--color-dark);
					}
				}
			}

			.burger-menu {
				align-self: center;
				border: none;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 80px;
				height: 40px;
				padding: 8px 15px;
				background: var(--color-background);

				.bar {
					width: 100%;
					height: 4px;
					background-color: var(--color-dark);
					border-radius: 4px;
					transform: translateY(0);
					transition: all 0.3s ease;
				}

				&.active .bar {
					width: 80%;

					&:nth-child(1) {
						transform: translate(5px, 10px) rotate(30deg);
					}
					&:nth-child(2) {
						opacity: 0;
					}
					&:nth-child(3) {
						transform: translate(5px, -10px) rotate(-30deg);
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.content-block {
		padding-left: var(--sidepadding-mobile) !important;
		padding-right: var(--sidepadding-mobile) !important;
	}

	footer, .menu-footer {
		& > .content-block {
			grid-template-columns: 1fr;
			grid-template-areas: "links" "copyright";
			height: auto;

			> div {
				justify-self: center;
				align-self: center;
			}

			.footer-content {
				height: 40px;
				display: grid;

				nav {
					display: grid;

					ul {
						justify-self: center;
					}
				}
			}

			.footer-copyright {
				padding: 14px 0;
			}
		}
	}

	#scrollTop {
		display: none;
	}
}


/* Main Content */
main {
	width: 100%;
	padding-top: 180px;
	min-height: calc(100vh - 180px);

	&.scrolled {
		padding-top: 80px;
		min-height: calc(100vh - 80px);
	}

	& > div:last-child {
		padding-bottom: 80px;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-shadows), serif;
		font-weight: 400;
		margin-bottom: .5em;

		strong {
			font-family: var(--font-avenir), sans-serif;
			font-weight: var(--fontweight-regular);
			font-style: italic;
		}
	}

	h1 { font-size: 30px; }
	h2 { font-size: 26px; }
	h3 { font-size: 22px; }
	h4 { font-size: 18px; }
	h5 { font-size: 16px; }
	h6 { font-size: 14px; }

	p, ul {
		margin-bottom: 1.5em;
	}
	li {
		margin-bottom: .5em;
	}

	p + ul {
		margin-top: -1.5em;
	}

	p + p[style*="padding-left"] {
		margin-top: -1.5em;
	}

	ul {
		margin-left: 40px;
		list-style-type: none;

		li::before {
			content: '-';
			display: inline-block;
			margin-right: 10px;
		}
	}
}

.scrollnav {
	position: relative;
	padding-top: 60px;
	padding-bottom: 60px;

	.decoline {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 110px;
		display: block;
		background-color: var(--color-accent);
	}

	.menuslider-box {
		width: calc(1300px - 60px);
		max-width: 100%;

		.menuslider-item {
			margin: 0 25px;
		}

		.slick-prev {
			left: -35px;
		}

		.slick-next {
			right: -30px;
		}

		.slick-prev::before, .slick-next::before {
			content: '';
			display: block;
			width: 25px;
			height: 44px;
			background: url(https://www.vital-move.com//content/themes/vitalmove/img/arrow-back.png) no-repeat center transparent;
			background-size: contain;
			opacity: 1;
		}

		.slick-prev::before {
			transform: rotateY(180deg);
		}
	}
}

@media (max-width: 1300px) {
	.scrollnav {
		padding-bottom: 30px;

		.menuslider-box {
			width: calc(100% - 80px);
		}
	}
}

#webform_contactform_62_default {
	.webform_block {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 60px;
		margin-bottom: 20px;
		align-items: start;

		&.contactform_block_leistung, &.contactform_block_anmerkungen, &.contactform_block_datenschutz {
			.webform_field {
				grid-column: 1 / -1;
			}
		}

		.webform_field {
			margin: 0 !important;
			border: none;

			input, textarea, select {
				padding: 10px 20px;
				background-color: var(--color-light);
				color: var(--color-dark);
				border-bottom: 0;

				&::placeholder {
					color: var(--color-dark);
					font-style: normal;
				}
			}

			.webform_labelbox label {
				margin-top: 0 !important;
			}

			&.webform_field_buttonsubmit button {
				padding: 10px 40px;
				background-color: var(--color-light);
				color: var(--color-dark);
				margin: 0 !important;
			}

			&.webform_field_buttonreset button {
				padding: 10px 40px;
				background-color: var(--color-verylight);
				color: var(--color-dark);
				margin: 0 !important;
			}

			&.smallfont label {
				font-size: var(--fontsize-small);

				a {
					font-weight: var(--fontweight-medium);
				}
			}
		}
	}

	.contactform_block_buttons {
		grid-template-columns: auto 1fr;
		margin-top: 40px;
	}
}

@media (max-width: 768px) {
	#webform_contactform_62_default {
		.webform_block {
			grid-template-columns: 1fr !important;
			grid-gap: 20px;
		}
	}
}