/* these tiles don't need a margin */
#result { margin: 0 -20px; }

.tile {
	width: 50%; display: inline-block; vertical-align: top;
	margin-bottom: 20px;
}
@media (max-width: 720px) {
	.tile { width: 100%; border-left: none; border-right: none; }
}

.tile .thumb, .tile .description, .tile .cats {
	background-color: #f0f0f0;
}

.tile>* {
	display: block; position: relative;
	width: 100%; height: 271px;
	left: 13px;
}

.tile .thumb {
	position: absolute; overflow: hidden;
	width: 195px; height: 100%;
	top: 0; right: 50%;
	background-size: contain; background-position: center; background-repeat: no-repeat;
	border: 0px solid #f0f0f0; border-width: 10px 0 0 10px;
}

.tile .description {
	position: absolute; overflow: hidden;
	top: 0; left: 50%;
	width: 176px; height: 100%;
	padding: 10px 10px 0 0;
	display: flex; flex-direction: column;
	text-align: center;
	font-size: 	16px;
	font-weight: 200;
	padding-left: 5px;
}
.tile .description>* {
	margin-top: 5px;
}

.tile .description .title {
	flex: 1; overflow: hidden;
}

.tile form:not(#foo) {
	width: 0; height: 0;
	border: none; margin: 0;
	overflow: hidden;
}

.tile .cats {
	overflow: hidden;
	width: 371px; margin: auto;
	position: relative; left: 3.5px;
	border: 10px solid transparent;
	height: 0; /* changed by js */
	text-indent: -.5em;
}
.tile .cats::before {
	content: 'Treffer: ';
	z-index: 1;
	position: relative; left: .5em;
	background: inherit;
	/**/color:#76B82A;/**/
}
.tile .cats>:not(.active) {
	display: none;
}
.tile .cats>.active::before {
	content: '| ';
}


.tile a:not(.foo) { text-decoration: none; }
.tile a:focus .title { text-decoration: underline; text-decoration: underline dotted; }