@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	--text-color: #000;
	--text-dark: #444;
	--text-link: #000;
	--text-link-hover: #666;
	--text-accent: #888;
	--bg-textbox-shadow: rgba(0, 0, 0, .5);
	--shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	--shadow-light: 0 0 8px rgba(0, 0, 0, 0.2);
	--shaded-background: #fafafa;
	--muted-background: #e0e0e0;
	--white-background: #fff;
	--max-width: 1280px;
	--border: 1px solid #eee;
	--border-dark: 1px solid #666;
	--accent-color: #be1d2d;
	--bg-default: #be1d2d;
}

body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
}
.content-block {
	max-width: var(--max-width);
	margin: 0 auto;
}
a {
	text-decoration: none;
	color: var(--text-link);
	&:hover {
		color: var(--text-link-hover);
	}
}

/* Header */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: white;
	transition: height .3s ease;
	z-index: 1000;
	.header-content {
		height: 100%;
	}
	.logo-header {
		background-color: var(--shaded-background);
		.logo {
			position: relative;
			height: 100%;
			padding: 20px 0;
			align-self: start;
			a {
				position: relative;
				display: block;
				width: 100%;
				height: 85px;
				max-height: 100%;
				background: url(../img/bvbf_Schulungskalender_Header_1024px_bis_max.svg) no-repeat left center transparent;
				background-size: contain;
				transition: all .3s ease;
			}
		}
	}
	.menu-header {
		border-top: var(--border);
		border-bottom: var(--border);
		background-color: #fff;
		nav {
			padding: 0;
			align-self: start;
			ul {
				list-style: none;
				display: flex;
				gap: 30px;
				& li.menu-has-children > a::after {
					content: ' ▼';
					font-size: 10px;
				}
			}
			& > ul > li {
				position: relative;
			}
			a {
				text-decoration: none;
				color: var(--text-link);
				font-weight: 500;
				padding: 10px;
				display: block;
				&:hover {
					color: var(--text-link-hover);
				}
			}
			.menu-submenu {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				background-color: white;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
				min-width: 200px;
				li {
					border-bottom: var(--border);
					&:last-child {
						border-bottom: none;
					}
				}
				a {
					padding: 12px 20px;
					&:hover {
						background-color: var(--shaded-background);
					}
				}
			}
		}
	}

	&.scrolled {
		height: 80px;
		.logo {
			padding: 10px 0;
			a {
				height: 40px;
			}
		}
	}
	.burger-menu {
		display: none;
		flex-direction: column;
		gap: 5px;
		cursor: pointer;
		padding: 10px;
		span {
			width: 30px;
			height: 3px;
			background-color: var(--shaded-background);
			transition: 0.3s;
		}
	}
}

/* Footer */
footer {
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	border-top: var(--border);
	padding: 20px 0;
	.footer-content {
		padding: 0 20px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		font-size: 14px;

		.nav {
			align-self: start;
			justify-self: start;
		}
		.info {
			align-self: start;
			justify-self: end;
			tr {
				td {
					padding: 0 10px 0 0;
					&:last-child {
						padding-right: 0;
					}
				}
			}
		}
		nav ul {
			list-style: none;
			display: flex;
			align-items: center;
			li {
				margin-right: 5px;
				&::before {
					content: '/';
					margin-right: 2px;
				}
				&:first-child::before {
					content: '';
				}
			}
		}
		a {
			color: var(--text-link);
			text-decoration: underline;
			&:hover {
				color: var(--text-link-hover);
			}
		}
	}
}

/* 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: 100px;
	}
}

.maincontent {
	padding: 40px 20px;
	color: var(--text-color);
	.background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
		transition: opacity 0.8s ease-in-out;
		&.hidden {
			opacity: 0;
			pointer-events: none;
		}
		&.vignette::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: inset 0 0 400px rgba(0, 0, 0, 0.8);
			pointer-events: none;
		}
		.bg-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.bg-color {
			width: 100%;
			height: 100%;
		}
		& + .section {
			/*padding-top: 100px;*/
		}
	}

	.section {
		min-height: 100vh;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 50px;
		/*align-items: center;*/
		align-items: start;
		justify-content: center;
		/*padding: 200px 0;*/
		position: relative;
		.header {
			display: inline-block;
			padding: 20px 40px;
			align-self: start;
			justify-self: start;
			h1 {
				font-size: 50px;
				font-weight: 700;
				line-height: 1.1;
				margin-bottom: 20px;
			}
			p {
				font-size: 28px;
				font-weight: 700;
				line-height: 1.5;
			}
			&.shadow {
				background-color: var(--bg-textbox-shadow);
			}
			& + .imageblock {
				margin-top: 600px;
			}
		}
		.imageblock {
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 0;
			width: 90%;
			max-width: 800px;
			margin: 0 auto;
			box-shadow: 0 0 40px 10px rgba(0, 0, 0, .5);
			img {
				width: 100%;
				height: auto;
				max-width: 100%;
				display: block;
			}
			.textblock {
				display: block;
				padding: 20px 30px;
				background-color: var(--bg-textbox-shadow);
				font-size: 16px;
				line-height: 1.5;
			}
		}
		.imgslider {
			max-width: var(--max-width);
			width: 80vw;
			position: relative;
			margin: 50px auto 0 auto;
			display: block;
			.imageblock {
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
			}
			.slick {
				max-width: 100%;
				margin-bottom: 0;
				padding: 20px 0;
				.slick-track {
					display: flex !important;
					align-items: center;
				}
				.slick-slide {
					height: auto !important;
					display: flex !important;
					align-items: center;
					justify-content: center;
				}
				.slick-prev::before, .slick-next::before {
					font-size: 50px;
				}
				.slick-next {
					right: -25px;
				}
				.slick-prev {
					left: -50px;
				}
				.slick-dots {
					position: relative;
					bottom: auto;
					padding-top: 20px;
					li {
						width: auto;
						height: auto;
					}
					li button::before {
						color: var(--text-dark);
						opacity: 1;
						font-size: 18px !important;
						line-height: 1;
					}
					li.slick-active button::before {
						color: var(--text-color);
						opacity: 1;
					}
				}
			}
		}
		.part-tinymce {
			ul {
				padding-left: 20px;
				margin-bottom: 20px;
				li {
					margin-bottom: 10px;
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		h1, h2, h3, h4, h5, h6, p {
			margin-bottom: 1em;
		}
	}
}
body.calendarpage {
	.maincontent .background + .section {
		padding-top: 0;
		align-items: start;
	}
}



/* Scroll to Top Button */
#scrollTop {
	position: fixed;
	bottom: 120px;
	right: 30px;
	background: url(../img/chevron.svg) no-repeat center var(--accent-color);
	background-size: 50%;
	color: white;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-align: center;
	font-size: 24px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	z-index: 999;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
	header {
		.header-content {
			padding: 10px;
		}
		nav {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			background-color: #fff;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease;
			&.active {
				display: block;
				max-height: 500px;
			}
			& > ul {
				flex-direction: column;
				gap: 0;
				padding: 10px 0;
			}
			& > ul > li {
				border-bottom: 1px solid #eee;
			}
			a {
				padding: 15px 20px;
			}
			.submenu {
				position: static;
				box-shadow: none;
				background-color: #f5f5f5;
				display: none;
				a {
					padding-left: 40px;
				}
			}
			.has-submenu > a::after {
				float: right;
			}
		}
		.burger-menu {
			display: flex;
			align-self: center;
		}
	}

	.maincontent {
		.section {
			.imgslider {
				.slick {
					.slick-prev, .slick-next {
						display: none !important;
					}
				}
			}
		}
	}

	#scrollTop {
		bottom: 150px;
		right: 20px;
		width: 45px;
		height: 45px;
	}
}

@media (max-width: 768px) {
	.header-content {
		padding: 15px;
	}

	.content {
		padding: 30px 15px;
	}

	footer {
		padding: 15px 0;
		.footer-content {
			grid-template-columns: 1fr;
			.nav, .info {
				justify-self: center;
			}
		}
	}
}