.filter button {
	display:none;
	position:relative;
}

@media screen {
	* {
		margin: 0;
		padding: 0;
		font-family: sans-serif;
	}
	
	.top {
		text-align: center;
		margin: 0.8em 0 0.5em 0;
	}
	.filter button.checked:after {
		position:absolute;
		content:url(/assets/img/haken.svg);
	}
	
		.top img{
			height: 50px;
		}

		.top h1 {
			font-weight: 300;
			font-size: 1.3em;
		}
		
		.top p {
			padding: 0.5em 0 0 0;
		}
		

	.main {
		display: flex;
		width: 95vw;
		margin: 10px auto;
		max-width: 1920px;
	}

	.filter {
		width: 10%;
		padding: 0 1em;
		min-width: 280px;
		position: relative;
	}
		.filter h2 {
			font-size: 1.5em;
			text-align: center;
			padding-bottom: 0.3em;
		}

		.filter h3 {
			font-size: 1.2em;
			font-weight: 300;
			padding: 0.5em;
			border-top: 3px solid #000;
		}
		.filter form {
			padding-bottom: 0.5em;
		}
		.filter .reset {
			background-color: #000;
			border: 0px solid transparent;
			border-radius: 3px;
			padding: 0.5em 0;
			color: #FFFFFF;
			width: 80%;
			margin-top: 0.5em;
			cursor: pointer;
		}
			.filter .reset:hover {
				background-color: #34A092;
			}
			.filter .reset:active {
				background-color: #236A62;
			}

	.farben {
		display: flex;
		flex-wrap: wrap;
	}
		.farben button {
			width: 30px;
			height: 30px;
			border: 1px solid transparent;
			margin: 0 0.5em 0.5em 0;
			cursor: pointer;
		}
			.farben button img {
				width: 120%;
				height: 120%;
                }
			}
			.weiss {
				background-color: #FFFFFF;
				border: 1px solid #CACACA !important;
			}
			.beige {
				background-color: #DCD0C0;
			}
			.gelb {
				background-color: #F7DC48;
			}
			.orange {
				background-color: #F79248;
			}
			.rot {
				background-color: #DD4C38;
			}
			.lila {
				background-color: #9047B6;
			}
			.blau {
				background-color: #5576CC;
			}
			.gruen {
				background-color: #87C469;
			}
			.braun {
				background-color: #9C775A;
			}
			.grau {
				background-color: #BFBEBF;
			}
			.schwarz {
				background-color: #28282A;
			}

	.licht, .stofftyp {
		display: flex;
		flex-direction: column;
	}
		.licht button, .stofftyp button {
			text-align: left;
			background: transparent;
			border: 0px solid transparent;
			display: flex;
			display: none;
			align-items: center;
			cursor: pointer;
			padding: 0.1em 0;
			margin: 0.1em 0;
			position: relative;
		}
			.licht button img, .stofftyp button img {
				margin-right: 0.5em;
			}
			.stofftyp button img {
				width: 30px;
				height: auto;
                opacity:.4;
			}
            .stofftyp button img:hover {
                opacity:1;
            }
			.filter button img[src="/assets/img/haken.svg"] {
				position: absolute;
				top: 5px;
				left: 5px;
                opacity:1;
			}
            .stofftyp button img[src="/assets/img/haken.svg"] {
                bottom: 0;
                left: -0px;
                mix-blend-mode: multiply;
                top: 0;
            }

	.preis {
		display: flex;
		flex-wrap: wrap;
	}
		.preis button {
			font-size: 1.2em;
			color: #28282A;
			background-color: transparent;
			border: 1px solid #28282A;
			border-radius: 2px;
			cursor: pointer;
			margin: 0.2em;
			width: 30px;
			height: 30px;
			display: flex;
			display: none;
			align-items: center;
			justify-content: center;
		}

	.eignung {
		display: flex;
		flex-direction: column;
	}
		.eignung button {
			text-align: left;
			background: transparent;
			border: 0px solid transparent;
			display: flex;
			display: none;
			align-items: center;
			cursor: pointer;
			padding: 0.1em 0;
			margin: 0.1em 0;
			position: relative;
		}
			.eignung button img {
				margin-right: 0.5em;
			}
			.eignung button img[src="/img/haken.svg"] {
				position: absolute;
				top: 5px;
				left: 5px;
			}

	.tableListing {
		font-size: 0.8em;
		width: 100%;
		border-bottom: 2px solid #CCC;
	}
		.tableListing thead {
			display: table;
			table-layout: fixed;
			width: 100%;
		}
			.tableListing thead th:nth-child(1), .tableListing tbody tr td:nth-child(1) {
				width: 2em;
			}
			.tableListing thead th:nth-child(2), .tableListing tbody tr td:nth-child(2) {
				width: 12em;
			}
		.tableListing tbody {
			/*display: block;
			height: 400px;
			overflow-y: scroll;*/
			display: block;
			overflow-y: scroll;
		}
		.tableListing tr {
			display: table;
			width: 100%;
			table-layout: fixed;
		}
		.tableListing th {
			background-color: #444444;
			color: white;
			padding: 0.5em;
		}
		.tableListing td {
			text-align: center;
			padding: 0 0.5em;
		}
		.tableListing tr:nth-child(even) {
			background: #FAFAFA;
		}
		/*
		.tableListing th:nth-last-child(6), .tableListing th:nth-last-child(8), .tableListing th:nth-last-child(11), .tableListing th:nth-last-child(14), .tableListing td:nth-last-child(6), .tableListing td:nth-last-child(8), .tableListing td:nth-last-child(11), .tableListing td:nth-last-child(14) {
			border-left: 1px solid #CACACA;
		}
*/
	.artikelbild {
		width: 12em;
		height: 6.5em;
		margin: 0.2em 0 ;
		overflow: hidden;
		position: relative;
	}
		.artikelbild:hover {
			overflow: visible;
		}
		.artikelbild img {
			position: absolute;
			right: 0;
			width: 120%;
			bottom: 0;
		}
		.artikelbild img:hover{
			position: relative;
			height: 400px;
			width: 300px;
			z-index: 5; 
			/*top: 0;*/
			left: 0;
			border: 1px solid #28282A;
			box-shadow: 10px 10px 10px #767676;
		}

	.print {
			max-width: 30px;
			max-height: 30px;
			border: 0px solid transparent;
			border-radius: 3px;
			width: 100%;
			cursor: pointer;
			margin-left: 1em;
			position: fixed;
			top: 2em;
			right: 2em;
		}
			.print img {
				max-width: 3em;
				max-height: 3em;
			}
			print:hover {
				background-color: #34A092;
			}
			print:active {
				background-color: #236A62;
			}

	.icon {
		width: 25px !important;
		padding: 0 !important;
	}
	/*
	footer{
		position: absolute;
		right: 6.5em;
		bottom: 0.5em;
	}
	*/
	footer ul, ul.tableLegende {
	    display: flex;
		justify-content: left;
		align-items: center;
		flex-wrap: wrap;
	}
	
		footer ul li, ul.tableLegende li {
			display: flex;
			align-items: center;
			margin: 0 0.3em;
		}
	
			footer ul li span , ul.tableLegende li span{
				margin: 0 0.2em;
			}
			
		footer .usedFilters{
			display: none;
		}
	
	.startSeiteKnopf {
		padding: 0.8em;
		margin-left: 3.5em;
		text-decoration: none;
		background-color: #444;
		color: white;
		position: relative;
		bottom: 3em;
		float: left;
		font-family: sans-serif;
		display:none;
	}
	.appInstall {
		display: block;
		position: absolute;
		top: 0.5em;
		left: 1em;
		border: 1px solid #000;
		padding: 0.9em 1em;
		border-radius: 0.25em;
		background-repeat: no-repeat;
		background-position: top left;
		background-image: url(/assets/svg/install_desktop_black_24dp.svg);
		appearance: none;
		-moz-appearance: none;
		background-color: #fff;
		border: 0;
		font-size: 0.7em;
	}
}