/* reset rules based on Josh's Custom CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
body { -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; font: inherit; }

:root {
	color-scheme: light;
	font-size: 1rem;
}

html {
	font-family: var(--font-default-family);
	font-weight: var(--font-default-weight);
}

body {
	font-size: var(--font-default-size);
	background-color: var(--color-white);
	color: var(--color-text);
	min-width: var(--content-min-width);
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
	box-sizing: border-box;
}

b, strong {
	font-weight: var(--font-default-weight-bold);
}

i, em {
	font-style: var(--font-default-italic);
}

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

	a:hover {
		color: var(--color-secondary);
	}

ul,
ol {
	margin: 0;
	padding-left: 20px;
}

	ul {
		list-style-type: disc;
	}

	ol {
		list-style-type: decimal;
	}

@media ( max-width: 640px ) {

	h1, h2, h3, h4, h5, h6, a {
		hyphens: auto;
	}

}

ul.no-list-style,
ol.no-list-style {
	padding: 0;
	list-style-type: none;
}

.headline-xl {
	font-size: 2em;
	color: var(--color-primary);
	font-weight: var(--font-default-weight-bold);
}

.headline-l {
	font-size: 1.8em;
	color: var(--color-primary);
	font-weight: var(--font-default-weight-bold);
}

.headline-m {
	font-size: 1.5em;
	color: var(--color-primary);
	font-weight: var(--font-default-weight-bold);
}

.headline-s {
	font-size: 1.2em;
	color: var(--color-primary);
	font-weight: var(--font-default-weight-bold);
}

.width {
	width: 100%;
	max-width: var(--content-max-width);
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
}

.screen-reader-text {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 9999;
	padding: 10px 20px;
	background-color: var(--color-black);
	color: var(--color-white);
}

	.screen-reader-text:focus {
		top: 0;
	}

.content {
	line-height: var(--font-default-line-height);
	text-wrap: pretty;
}

	.content :where( p, ul, ol, img, picture, svg, video, blockquote, figure, h1, h2, h3, h4, h5, h6, hr, pre, table, form, dl ):not(:first-child) {
		margin-block-start: 1em;
	}

.header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	height: var(--header-height);
	background: var(--color-lavender);
}

	.header .width {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: flex-start;
		align-items: center;
	}

	.header .logo {
		height: 0;
		padding: var(--header-height) 0 0;
		width: 180px;
		overflow: hidden;
		display: inline-block;
		margin-right: var(--spacing-double);
		background: url(../img/logo.svg) no-repeat left center / contain;
	}

	.header .menu {
		display: inline;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
		.header .menu li {
			display: inline;
		}

		.header a {
			display: inline-block;
			padding: 10px;
		}

		.header .current-menu-item a {
			color: var(--color-brown);
		}

	.header .menu-toggle {
		display: none;
	}

	@media ( max-width: 740px ) {

		.header .menu-toggle {
			position: absolute;
			display: block;
			right: 20px;
			top: 10px;
			width: 30px;
			height: 40px;
			cursor: pointer;
			z-index: 50;
			background: none;
			border: none;
		}

			.header .menu-toggle:focus-visible {
				outline: 2px solid var(--color-blue);
				outline-offset: 2px;
			}

			.header .menu-toggle .icon,
			.header .menu-toggle .icon:before,
			.header .menu-toggle .icon:after {
				pointer-events: none;
				display: block;
				height: 3px;
				background: var(--color-blue);
				width: 100%;
				left: 0;
				top: 50%;
				position: absolute;

				-moz-transform: translate(0px, -50%);
				-webkit-transform: translate(0px, -50%);
				-o-transform: translate(0px, -50%);
				-ms-transform: translate(0px, -50%);
				transform: translate(0px, -50%);

				-webkit-transition: all 200ms ease-in-out;
				-o-transition: all 200ms ease-in-out;
				transition: all 200ms ease-in-out;
			}

				.header .menu-toggle .icon:before,
				.header .menu-toggle .icon:after {
					content: "";
				}

				.header .menu-toggle .icon:before {
					margin-top: -8px;
				}

					.header .menu-toggle:hover .icon:before,
					.header .menu-toggle:focus-visible .icon:before {
						margin-top: -6px;
					}

				.header .menu-toggle .icon:after {
					margin-top: 8px;
				}

					.header .menu-toggle:hover .icon:after,
					.header .menu-toggle:focus-visible .icon:after {
						margin-top: 6px;
					}

			.header .menu-toggle[aria-expanded="true"] .icon {
				background-color: transparent;
			}

				.header .menu-toggle[aria-expanded="true"] .icon:before {
					margin-top: 0;

					-moz-transform: rotate(45deg) translate(0px, 0px);
					-webkit-transform: rotate(45deg) translate(0px, 0px);
					-o-transform: rotate(45deg) translate(0px, 0px);
					-ms-transform: rotate(45deg) translate(0px, 0px);
					transform: rotate(45deg) translate(0px, 0px);
				}

				.header .menu-toggle[aria-expanded="true"] .icon:after {
					margin-top: 0;

					-moz-transform: rotate(-45deg) translate(0px, 0px);
					-webkit-transform: rotate(-45deg) translate(0px, 0px);
					-o-transform: rotate(-45deg) translate(0px, 0px);
					-ms-transform: rotate(-45deg) translate(0px, 0px);
					transform: rotate(-45deg) translate(0px, 0px);
				}

		.header nav {
			display: none;
		}

			.header .menu-toggle[aria-expanded="true"] ~ nav {
				display: block;
			}

			.header nav {
				position: fixed;
				left: 0;
				top: var(--header-height);
				width: 100%;
				background: var(--color-lavender);
				text-align: center;
				padding-bottom: 20px;
			}

			.header .menu li {
				display: block;
			}

	}

.footer {
	height: var(--footer-height);
	background: var(--color-lavender);
}

	.footer .width {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
	}

	.footer .menu {
		display: inline;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
		.footer .menu li {
			display: inline;
		}

		.footer a {
			display: inline-block;
			padding: 5px;
		}

		.footer .current-menu-item a {
			color: var(--color-brown);
		}

.main {
	padding: calc(var(--header-height) + var(--spacing-double)) 0;
	box-sizing: border-box;
	min-height: calc(100vh - var(--footer-height));
}

.events {
}

	.content .eventslist {
		display: block;
		list-style-type: none;
		margin: var(--spacing) 0 0;
		padding: 0;
		border-radius: var(--border-radius);
		overflow: hidden;
	}

		.eventslist li {
			display: grid;
			grid-template-columns: 240px 1fr;
			gap: 1rem;
			border: 3px solid var(--color-lavender);
			padding: 10px;
		}

			.eventslist li:nth-child(2n-1) {
				background: var(--color-lavender);
			}

		.eventslist__gremium {
			font-weight: var(--font-default-weight-bold);
		}

	@media ( max-width: 640px ) {

		.eventslist li {
			grid-template-columns: 1fr 1fr;
			hyphens: auto;
		}

	}

.projects {
}

	.content .projectsfilters {
		display: block;
		margin: var(--spacing) 0;
		padding: 0;
		list-style-type: none;
		text-align: right;
	}
	
		.content .projectsfilters li {
			display: inline-block;
			margin-top: 5px;
			white-space: nowrap;
		}

		@media ( scripting: none ) {

			.projectsfilters {
				display: none !important;
			}

		}

		.projectsfilters__filter {
			display: inline;
		}
		
			.projectsfilters__filter + .projectsfilters__filter {
				margin-left: var(--spacing);
			}

	.content .projectslist {
		list-style-type: none;
		padding: 0;
		margin: var(--spacing) 0 0;
	}

	.projectslist__project {
		display: block;
		background: var(--color-lavender);
		padding: var(--spacing);
		border-radius: var(--border-radius);
	}
	
		.projectslist__project + .projectslist__project {
			margin-top: var(--spacing);
		}

	.projectslist__title {
		display: inline-block;
		margin-right: var(--spacing-half);
	}

	.projectslist__gremium {
		display: inline-block;
		font-weight: var(--font-default-weight-bold);
	}

	.projectslist__responsible {
		display: block;
		margin: 1em 0 0;
	}

	.projectslist__date {
		display: block;
	}

	.projectslist__description {
		margin-top: 1em;
		display: block;
	}
	
	.projectslist__attachments {
		margin-top: 1.5em;
		display: block;
	}
	
		.projectslist__attachments p + ul {
			margin-top: 0 !important;
		}

	.projectslist__nocontent {
		display: none;
		background: var(--color-lavender);
		padding: 20px;
		text-align: center;
		border-radius: var(--border-radius);
	}