/* */
.list {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas: "title title title"
		"cover content content";
	grid-gap: var(--border-width);
	background: var(--highcontrast-black, var(--color-green-soft));
	border-radius: var(--border-radius);
	overflow: hidden;
	margin-bottom: var(--grid-gap);
	border: var(--border-width) solid var(--highcontrast-black, var(--color-green-light));
}
.list__title {
	grid-area: title;
	padding: var(--inner-padding);
	background: var(--highcontrast-blue, var(--color-violet));
	color: var(--highcontrast-white, var(--color-white));
}
.list:hover .list__title {
	background: var(--highcontrast-red, var(--color-orange));
	transition: background 150ms ease;
	transition-delay: 50ms;
}
.list__titleLink {
	font-family: var(--displayfont-family);
	font-weight: var(--displayfont-weight);
	font-size: var(--font-size-h3);
	line-height: var(--displayfont-line-height);
	color: var(--highcontrast-white, var(--color-white));
	text-decoration: none;
}
.list__cover:hover ~ .list__title .list__titleLink,
.list__titleLink:hover {
	text-decoration: underline;
	text-decoration-color: var(--highcontrast-red, var(--color-green-soft));
	text-decoration-thickness: var(--border-width);
}
.list__cover {
	grid-area: cover;
	position: relative;
	display: block;
	overflow: hidden;
	height: 100%;
}
.list__coverLink {
	display: block;
	text-decoration: none;
	height: 100%;
}
.list__coverSrc {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}
.list__coverCopyright {
	position: absolute;
	display: inline-block;
	background: var(--highcontrast-black, var(--color-green-light));
	margin: 0;
	bottom: 0;
	right: 0;
	border-top-left-radius: var(--border-radius);
	padding: 4px 8px;
	font-size: 0.75rem;
	letter-spacing: 0.025em;
	color: var(--highcontrast-white, var(--color-black));
}
.list__coverSrc {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.list__content {
	grid-area: content;
	background: var(--highcontrast-white, var(--color-white));
	color: var(--highcontrast-black, var(--color-black));
}
.list__row {
	padding: var(--inner-padding);
}
.list__row + .list__row {
	border-top: var(--border-width) solid var(--highcontrast-black, var(--color-green-light));
}
.list__row--note {
	background: var(--highcontrast-red, var(--color-green-light));
	color: var(--highcontrast-white, var(--color-black));
}
.list__row--columns {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: var(--grid-gap);
}

.filter {
	background: var(--highcontrast-white, var(--color-green-light));
	color: var(--highcontrast-black, var(--color-black));
	border-radius: var(--border-radius);
	overflow: hidden;
	padding: var(--grid-gap);
	margin-bottom: calc(var(--grid-gap) * 3);
}
.filter__grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr 1fr 1fr;
	grid-gap: var(--grid-gap);
	margin-bottom: var(--grid-gap);
}
.filter__list {
	max-height: 360px;
	overflow-y: scroll;
	overflow-y: auto;
}
.filter__group {
	background: var(--highcontrast-white, var(--color-white));
	border-radius: var(--border-radius);
	padding: .55em .75em .65em;
	margin-right: 9px;
	border: 2px solid var(--highcontrast-black, var(--color-green-soft));
	transition: 150ms border ease;
}
.filter__group--hover:hover,
.filter__group--hover:focus-within {
	border: 2px solid var(--highcontrast-black, var(--color-violet));
}
.filter__group + .filter__group {
	margin-top: 6px;
}
.filter__groupTitle {
	all: unset;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .066em;
	cursor: pointer;
	font-size: 0.815rem;
	user-select: none;
	color: var(--highcontrast-blue, var(--color-black));
	transition: 200ms color ease;
	line-height: 1.35em;
}
.filter__groupTitle[aria-expanded="true"] {
	color: var(--highcontrast-black, var(--color-black));
}
.filter__groupTitle:hover,
.filter__groupTitle:focus {
	color: var(--highcontrast-black, var(--color-violet));
}

.filter__item + .filter__item {
	margin-top: .55em;
	line-height: 1.25em;
}
.filter__itemGroup {
	margin-top: .25em;
}
.filter__groupTitle[aria-expanded="false"] + .filter__itemGroup {
	display: none;
}
.filter__headline {
	margin: 0 0 0.75em 0;
	font-family: var(--displayfont-family);
	font-weight: var(--displayfont-weight);
	font-size: var(--font-size-h3);
	line-height: var(--displayfont-line-height);
}
.filter__checkbox {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	z-index: 0;
}
.filter__label {
	font-size: 15px;
	transition: 200ms color ease;
	cursor: pointer;
}
.filter__label:hover {
	color: var(--highcontrast-blue, var(--color-violet));
}
.filter__checkbox + .filter__label::before {
	position: relative;
	display: inline-block;
	cursor: pointer;
	border: var(--border-width) solid var(--highcontrast-red, var(--color-orange));
	border-radius: var(--border-radius);
	content: "";
	min-width: 1em;
	height: 1em;
	background: var(--color-white);
	transition: all 200ms ease;
	margin-right: 0.33em;
	transform:translateY(2px);
}
.filter__checkbox + .filter__label:hover::before {
	border: var(--border-width) solid var(--highcontrast-blue, var(--color-violet));
}
.filter__checkbox:focus + .filter__label::before {
	border: var(--border-width) solid var(--highcontrast-blue, var(--color-violet));
	background: var(--highcontrast-white, var(--color-white));
}
.filter__checkbox + .filter__label:active::before,
.filter__checkbox + .filter__label:focus::before {
	border: var(--border-width) solid var(--highcontrast-blue, var(--color-violet));
	box-shadow: 0 0 0 var(--border-width) var(--color-green-soft);
	background: var(--highcontrast-white, var(--color-violet));
}
.filter__checkbox:checked + .filter__label::before {
	border: var(--border-width) solid var(--highcontrast-blue, var(--color-orange));
	background: var(--highcontrast-blue, var(--color-orange));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M.5 17.1c-.6-.6-.6-1.6 0-2.3l2.3-2.3c.6-.6 1.6-.6 2.3 0l7 7 15-15c.6-.6 1.6-.6 2.3 0l2.3 2.3c.6.6.6 1.6 0 2.3L13.1 27.5c-.6.6-1.6.6-2.3 0L.5 17.1z'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 75%;
	background-repeat: no-repeat;
}
.filter__checkbox:checked:focus + .filter__label::before {
	border: var(--border-width) solid var(--highcontrast-blue, var(--color-violet));
}
.filter__checkbox:checked + .filter__label .criteria__headline {
	text-decoration: line-through;
	text-decoration-thickness: 0.125em;
}
.filter__buttons {
	padding-bottom: 0;
}
.filter__button {
	display: none;
}

@media (max-width: 1024px) {
	.list {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: "title title"
			"cover content";
	}
	.list__row--columns {
		grid-template-columns: 1fr;
		padding: 0;
	}
	.list__column {
		padding: var(--inner-padding);
	}
	.list__column + .list__column {
		border-top: var(--border-width) solid var(--highcontrast-black, var(--color-white));
	}
	.filter {
		background: var(--highcontrast-black, var(--color-green-light));
	}
	.filter__grid {
		display: grid;
		grid-template-columns: 1fr;
	}
	.filter__headline {
		/*display: none;*/
	}
	.filter__button {
		font-family: var(--displayfont-family);
		font-weight: var(--displayfont-weight);
		font-size: 1rem;
		background: var(--highcontrast-red, var(--color-green-soft));
		color: var(--highcontrast-white, var(--color-black));
		padding: var(--inner-padding);
		display: block;
		width: 100%;
		padding: .875rem 1.25rem;
		line-height: 100%;
		border: none;
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
		cursor: pointer;
		-webkit-appearance: none;
		text-align: left;
	}
	.filter__button[aria-expanded="false"] {
		background: var(--highcontrast-red, var(--color-white));
		border-radius: var(--border-radius);
	}
	.filter__list {
		/*display: none; */
		background: var(--highcontrast-white, var(--color-white));
		border-bottom-left-radius: var(--border-radius);
		border-bottom-right-radius: var(--border-radius);
		padding: .875rem 1.25rem;
		max-height: unset;
	}
	.filter__button[aria-expanded="true"] + .filter__list {
		display: block;
	}
	.filter__item + .filter__item {
		margin-top: .5em;
	}
}
@media (max-width: 728px) {
	.list {
		grid-template-columns: 1fr;
		grid-template-areas: "cover"
			"title"
			"content";
	}
}

.pagination {
	margin-bottom: var(--grid-gap);
}

.js .button--prev,
.js .button--next {
	display: none;
}
.no-js .button--more {
	display: none;
}
.button[hidden] {
	display: none !important;
}


.website {
    position: absolute;
    left: -9999px;
}
