html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#website-container {
	height: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	background-color: #FFDC9A;
}

.kachel-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	
	padding: 10px;
}

.kachel-zeile {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.kachel {
	position:relative;
	height: 180px;
	width: 180px;
	
	background-color: white;
	transition: transform .2s;
	
	z-index: 0;
}
.kachel:hover {
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari 3-8 */
	transform: scale(1.2);
	z-index: 100;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.kachel span {
	opacity: 0;
	
	transition: opacity 0.2s, display 0.2s allow-discrete;
}
.kachel:hover span {
	opacity: 1;
}

.kachel img {
	opacity: 0;
	
	transition: opacity 0.2s, display 0.2s allow-discrete;

	width: 180px;
	height: 180px;
}
.kachel:hover img {
	opacity: 1;
}

.kachel.toskana {
	background-image:
	linear-gradient(#324191, #324191),
	url("bilder/toskana/previews/sammlung_preview.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-blend-mode: multiply;
	opacity: 0%;
	transition: transform .2s;
}
.kachel.toskana:hover {
	opacity: 100%;
	transition: transform .2s;
}

.kachel img.alpha {
	height: 100%;
	width: 100%;
	object-fit: cover;
	/*filter: grayscale(100%) contrast(1);*/
	/*mix-blend-mode: multiply;*/
}
.kachel img.omega {
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: invert(1);
}
.kachel.overlay::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-color: rgb(25, 37, 80);*/
	opacity: 100%;
	mix-blend-mode: lighten;
	pointer-events: none; /* Ensure it doesn't block interactions */
}

.kachel.vollbild {
	transition: all .2s ease;
	position: absolute;
	z-index: 200;
	width: 500vw;
	height: 500vh;
	top: 0;
	left: 0;
}
.kachel.vollbild:hover {
	/*width: 100vw;
	height: 100vh;*/
	top: 0;
	left: 0;
}


h3 {
	margin: 20px;
}

.farbe-tuerkis {
	background-color: cyan;
}
.farbe-gruen {
	background-color: green;
}
.farbe-orange {
	background-color: #ff8f00;
}
.farbe-violett {
	background-color: violet;
}
.farbe-gelb {
	background-color: yellow;
}
.farbe-blau {
	background-color: blue;
}
.farbe-weiss {
	background-color: white;
}
.farbe-rot {
	background-color: red;
}
.farbe-magenta {
	background-color: magenta;
}
.farbe-indigo {
	background-color: #324191;
}
.farbe-schwarz {
	background-color: #000000;
}

.farbe-text-weiss {
	color: white;
}
.farbe-text-schwarz {
	color:black;
}

.image-fade-in::after {
	transition: transform .2s;
	/*background: image("bilder/toskana/dystopian_orange_sun.png");*/
	opacity: 0%;
}
.image-fade-in::after:hover {
	transition: transform .2s;
	opacity: 100%;
}