/* ------------------------------------ */

:root {
	--border-width__tile: 1px;
}

.tile {
	overflow: hidden;
	border: var(--border-width__tile) solid #fff;
}

.tile-sizer, .tile-item {

}

.tile-item {
	padding: 0;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: visible;
	float: left;
	border: var(--border-width__tile) solid #fff;
	border-collapse: collapse;
}

.tile-item:before {
	content: "";
	display: block;
	padding-top: 100%;
}

.tile-item.filled {
	cursor: pointer;
	position: relative;
}

.tile-item-description {
	position: absolute;
	bottom: 7%;
	width: 86%;
	left: 7%;
	color: #fff;
	font-size: 14px;
	background: rgba(104,104,100,.7);
	padding: .5em;
}

.tile-item-description p {
	font-size: .8em;
}

.tile-item-description h3 {
	margin-bottom: 0;
	margin-top: .3em;
}

@media only screen and (max-width: 29.9375em) {
	.tile-item-description {
		display:none;
	}
}

.tile-item-content {
	width: calc(200% + (2 * var(--border-width__tile)));
	height: auto;
	min-height: 100%;
	overflow: visible;
	display: none;
	position: absolute;
	padding: 1em 2em;
	cursor: default;
	font-size: 16px;
	top: 0;
}

:root {
	--size__tile-marker: 20px;
}

.tile-item-content.right {
	right: 0;
}

.tile-item-content.bottom {
	bottom: 0;
	top: unset;
}

.tile-item-content.top {
	bottom: unset;
	top: 0;
}

.tile-item-content.dir-up {
	top: 100%;
}

.tile-item-content.dir-down {
	bottom: 100%;
	top: unset;
}

/** Content Markierung **/
.tile-item-content:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	left: calc(var(--size__tile-marker) / 3);
	top: calc(var(--size__tile-marker) / 3);
	border-color: transparent;
}

.tile-item-content.right:after {
	left: unset;
	right: calc(var(--size__tile-marker) / 3);
}

.tile-item-content.left:after {
	left: calc(var(--size__tile-marker) / 3);
	right: unset;
}

.tile-item-content.bottom:after {
	top: unset;
	bottom: calc(var(--size__tile-marker) / 3);
}


.tile-item-content.dir-up:after {
	top: calc(var(--size__tile-marker) * -1);
	bottom: unset;
	border-left: var(--size__tile-marker) solid transparent;
	border-right: var(--size__tile-marker) solid transparent;
	border-bottom: 20px solid transparent;
}

.tile-item-content.dir-down:after {
	top: unset;
	bottom: calc(var(--size__tile-marker) * -1);
	border-left: var(--size__tile-marker) solid transparent;
	border-right: var(--size__tile-marker) solid transparent;
	border-top: 20px solid transparent;
}

.tile-item-content.dir-right:after {
	left: unset;
	right: calc(var(--size__tile-marker) * -1);
	border-top: var(--size__tile-marker) solid transparent;
	border-bottom: var(--size__tile-marker) solid transparent;
	border-left: 20px solid transparent;
}

.tile-item-content.dir-left:after {
	left: calc(var(--size__tile-marker) * -1);
	border-top: var(--size__tile-marker) solid transparent;
	border-bottom: var(--size__tile-marker) solid transparent;
	border-right-width: var(--size__tile-marker);
	border-right-style: solid;
}

/** Rauf Pfeil **/
.tile-item-content.fob-bg-color6.dir-up:after {
	border-bottom-color: var(--color__bright-grey);
}

.tile-item-content.fob-bg-color5.dir-up:after {
	border-bottom-color: var(--color__bright-red);
}

.tile-item-content.fob-bg-color4.dir-up:after {
	border-bottom-color: var(--color__secondary);
}

.tile-item-content.fob-bg-color3.dir-up:after {
	border-bottom-color: var(--color__primary);
}

.tile-item-content.fob-bg-color2.dir-up:after {
	border-bottom-color: #000;
}

.tile-item-content.fob-bg-color1.dir-up:after {
	border-bottom-color: #fff;
}

/** Runter Pfeil **/
.tile-item-content.fob-bg-color6.dir-down:after {
	border-top-color: var(--color__bright-grey);
}

.tile-item-content.fob-bg-color5.dir-down:after {
	border-top-color: var(--color__bright-red);
}

.tile-item-content.fob-bg-color4.dir-down:after {
	border-top-color: var(--color__secondary);
}

.tile-item-content.fob-bg-color3.dir-down:after {
	border-top-color: var(--color__primary);
}

.tile-item-content.fob-bg-color2.dir-down:after {
	border-top-color: #000;
}

.tile-item-content.fob-bg-color1.dir-down:after {
	border-top-color: #fff;
}

/** links Pfeil **/
.tile-item-content.fob-bg-color6.dir-left:after {
	border-right-color: var(--color__bright-grey);
}

.tile-item-content.fob-bg-color5.dir-left:after {
	border-right-color: var(--color__bright-red);
}

.tile-item-content.fob-bg-color4.dir-left:after {
	border-right-color: var(--color__secondary);
}

.tile-item-content.fob-bg-color3.dir-left:after {
	border-right-color: var(--color__primary);
}

.tile-item-content.fob-bg-color2.dir-left:after {
	border-right-color: #000;
}

.tile-item-content.fob-bg-color1.dir-left:after {
	border-right-color: #fff;
}

/** rechts Pfeil **/
.tile-item-content.fob-bg-color6.dir-right:after {
	border-left-color: var(--color__bright-grey);
}

.tile-item-content.fob-bg-color5.dir-right:after {
	border-left-color: var(--color__bright-red);
}

.tile-item-content.fob-bg-color4.dir-right:after {
	border-left-color: var(--color__secondary);
}

.tile-item-content.fob-bg-color3.dir-right:after {
	border-left-color: var(--color__primary);
}

.tile-item-content.fob-bg-color2.dir-right:after {
	border-left-color: #000;
}

.tile-item-content.fob-bg-color1.dir-right:after {
	border-left-color: #fff;
}

.tile-item-content p {
	font-size: 0.9em;
}

.custom .tile-item-content a,
.custom .tile-item-content a:visited,
.custom .tile-item-content a:active {
	color: #fff;
	text-decoration: underline;
}

.custom .tile-item-content a:hover,
.custom .tile-item-content a:focus {
	text-decoration: none;
	color: #fff;
}

.custom .tile-item-content.fob-bg-color1 a,
.custom .tile-item-content.fob-bg-color1 a:visited,
.custom .tile-item-content.fob-bg-color1 a:active {
	color: var(--color__primary);
}

.custom .tile-item-content.fob-bg-color1 a:hover,
.custom .tile-item-content.fob-bg-color1 a:focus {
	color: var(--color__primary);
	text-decoration: none;
}

.tile-item-content img {
	max-width: 100%;
	max-height: 100%;
}

.tile-item-content h3 {
	font-size: 1.5em;
	color: #fff;
	margin-top: 0;
}

.tile-item-content.fob-bg-color1 h3,
.tile-item-content.fob-bg-color1 {
	color: var(--color__secondary);
}

.tile-item-content.fob-bg-color2,
.tile-item-content.fob-bg-color3,
.tile-item-content.fob-bg-color4,
.tile-item-content.fob-bg-color5,
.tile-item-content.fob-bg-color6 {
	color: #fff;
}

.tile-item-content .close {
	font-size: .6em;
	position: absolute;
	top: .5em;
	right: .5em;
}

.tile-item-content .close span {
	color: var(--color__secondary);
	font-size: 1.8em !important;
	line-height: 1.8em !important;
	width: 1.8em !important;
	cursor: pointer;
}

.tile-item-content .close span:before {
	font-size: 1.2em !important;
}

.tile-item-content .close span:hover {
	color: var(--color__primary);
}

.tile.spalten-1 .tile-item {
	width: 100%;
}

.tile.spalten-2 .tile-item {
	width: 50%;
}

.tile.spalten-3 .tile-item {
	width: 33.33%;
}

.tile.spalten-4 .tile-item {
	width: 25%;
}

/* smaller than medium < 768 */
@media only screen and (max-width: 47.9375em) {
	.tile-sizer, .tile-item {
		width: 50% !important;
	}

	.tile-item-content:after {
		display: none;
	}

	.tile-item-content .close {
		top: 1em;
		right: 1em;
	}
}

/* mobile 479 */
@media only screen and (max-width: 29.9375em) {
	.tile-sizer {
		display: none;
	}

	.tile-item {
		display: none;
	}

	.tile-item.filled {
		cursor: default;
		display: block;
		width: 100% !important;
		height: auto;
		background-position: top center;
		background-size: contain;
	}

	.tile-item-content h3 {
		margin-top: 0;
	}

	.tile-item-content .close,
	.tile-item-content .close:before {
		display: none !important;
	}

	.tile-item-content {
		display: block;
		height: auto;
		width: 100%;

		overflow: auto;
		bottom: auto;
		position: relative;
		padding-bottom: 3em;
	}
}