@media screen and (min-width: 650px) and (max-width: 1300px) {	
	main {
		width: calc(100vw - 92px);
		padding-left: 52px;
	}
}

/* ####################################################################### */
/* Search */
.search_container {
	display: flex;
	justify-content: center;
	width: 100%;
}

.input_container {
	width: calc(100% - 280px);
	height: 50px;
	padding-top: 15px;
}

.search_container img {
	width: 80px;
	height: 80px;
	margin: 0 5px;
}

.search_container img:hover {
	filter: contrast(0%);
}

.hide_filter, .hide_search {
	display: none;
}

@media (max-width: 650px) {
	.input_container, .input_container input {
		width: 100%;
	}
	aside, .filter_search, .list_view_button, .picture_view_button, .search_container img {
		display: none;
	}
}

/* ####################################################################### */
/* Items */
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

article  {
	background: #F2F2F2;
	display: flex;
	border-radius: 10px;
	border: 3px solid #F2F2F2;
	align-items: center;
}

article:hover {
	border: 3px solid #FFCC00;
}

.info {
	font-size: 15px;
	margin: 5px;
}

.price {
	font-weight: bold;
}

/* .Neuheit {
	border: 3px solid #528058;
}

.Auslaufmodell {
	border: 3px solid #df752d;
} */


/* ####################################################################### */
/* List View */
.list_view_button {
	width: 80px;
	height: 80px;
	cursor: pointer;
	background: transparent url(/elements/pictures/menu/list_view.svg) center/contain no-repeat;
}

.list_view_button:hover {
	background: transparent url(/elements/pictures/menu/list_view_hover.svg) center/contain no-repeat;
}

.list_view article {
	width: calc(100% - 50px);
	margin: 5px;
	padding: 3px 20px;
	justify-content: space-between;
	cursor: pointer;
}

.list_view article * {
	cursor: text;
}

.list_view .img_container {
	display: none;
}

.list_view .description_container {
	cursor: pointer;
	width: 600px;
	display: flex;
}

.list_view .description {
	cursor: text;
	margin: 10px 0;
}

.list_view .info_container {
	cursor: pointer;
	display: flex;
}

.list_view .info {
	padding-top: 8px;
	width: 180px;
}

.list_view .states {
	display: none;
}

.list_view .price {
	margin: 10px 0;
	width: 105px;
}

@media (max-width: 1100px) {
	.list_view .info_container {
		flex-direction: column;
	}
	.list_view .info {
		padding-top: initial;
		text-align: center;
	}
	.list_view .price {
		text-align: center;
		width: 180px;
	}
}


/* ####################################################################### */
/* Picture View */
.picture_view_button {
	width: 80px;
	height: 80px;
	cursor: pointer;
	background: transparent url(/elements/pictures/menu/picture_view.svg) center/contain no-repeat;
}

.picture_view_button:hover {
	background: transparent url(/elements/pictures/menu/picture_view_hover.svg) center/contain no-repeat;
}

.picture_view article  {
	width: 300px;
	padding: 20px;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: center;
	margin: 20px;
}

.picture_view .img_container {
	display: flex;
	align-items: center;
	height: 150px;
	margin-bottom: 5px;
}

.picture_view .img_container img {
	max-width: 100%;
	max-height: 150px;
	margin: 0px auto;
	border-radius: 10px;
	cursor: pointer;
}

.picture_view .description {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	margin: 10px 0;
}

.picture_view .info {
	margin: 0;
}

.picture_view .price {
	margin: 0;
	margin-top: 15px;
	font-size: 30px;
}

.picture_view .states {
	margin-top: 5px;
}

.picture_view .state:not(:empty):before {
	content: ",\2007";
}


/* ####################################################################### */
/* Scroll on Top */
#scroll_top {
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 2;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: #FFAF1F;
	color: white;
	cursor: pointer;
	padding: 12px 15px;
	border-radius: 10px;
	transform: rotate(-90deg);
}

#scroll_top:hover {
	background-color: #F39D00;
}

/* ####################################################################### */
/* Filter */
aside {
	float: left;
	position: fixed;
	z-index: 5;
	height: 100%;
	top: 0;
	left: -401px;
	transition: all 0.5s ease-in-out;
}

#aside_filter, .filter_close {
	display: none;
}

#aside_filter:checked ~ aside {
	left: 0;
}

#aside_filter:checked ~ aside .filter_close {
	display: block;
}

/* Button */
.filter_button {
	writing-mode: tb-rl;
	transform: rotate(-180deg);
	padding: 40px 15px;
	background: #F39D00;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	margin-top: 200px;
	user-select: none;
	cursor: pointer;
	margin-left: 400px;
}
.filter_button:hover {
	background: #FFAF1F;
}

.filter_search {
	font-size: 18px;
	padding: 11px 15px;
	margin: 20px;
	margin-top: 15px; 
	border-radius: 5px;
	border: 4px solid #808080;
}
.filter_search:hover {
	border: 4px solid #FFCC00;
}

.filter_close {
	z-index: 42;
	position: fixed;
	left: 400px;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	cursor: pointer;
}

/* List */
.filter_list {
	position: fixed;
	width: 300px;
	height: 100vh;
	top: 0;
	background: #2e2d2b;
	padding: 0 50px;
	color: white;
	overflow: scroll;
	scrollbar-width: none;
}
.filter_list::-webkit-scrollbar {
	display: none;
}

.filter_list p {
	margin-left: 25px;
	font-weight: bold;
	margin-bottom: 5px;
	margin-top: 25px; 
}

.filter_list label {
	padding-bottom: 5px;
}