/*include: siehe head.html*/
/*** Effect Test, versuche eine area zu designen mit clippath, transform und hovering ***/
.et-container {
	width: min-content;
	position: absolute;
	right: 10%;
	z-index: 1;
}
.et-elem {
	--transform: perspective(75em) rotateX(30deg) rotateZ(-7deg) scale(1);
	transform: var(--transform);
	/*clip-path: polygon(50% 100%, 100% 75%, 100% 25%, 50% 0%, 0% 25%, 0% 75%);*/
	animation: _drop-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;
	transition: transform 0.25s ease-out, clip-path 0.5s ease-in-out;
	border: 1px dotted blue;
	filter: drop-shadow(-1px 12px 3px rgba(50, 50, 0, 1));
}

div.et-elem:hover {
	/*--transform: perspective(75em) rotateX(30deg) rotateZ(35deg) scale(1);*/
	filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 1));
}

.three {
	--x: 2;
	--y: 2;
	--delay: 2;
	position: relative;
	clip-path: polygon(50% 100%, 100% 75%, 100% 25%, 50% 0%, 0% 25%, 0% 75%);
	z-index: 50;
	background-color: burlywood;
	width: 100px;
	height: 100px;
}

.three a {
	position: absolute;
}

div.et-elem:hover div.three {
	background-color: greenyellow;
	top: 6px;
}

.linkwrap {
	width: 100%;
	height: 100%;
}
.linkclass {
	/*background-color: lightgrey;*/
	height: 100%;
	width: 100%;
	display: inline-block;
}
.linkclass div {
	margin-left: auto;
	margin-right: auto;
	width: min-content;
	height: 100%;
	/*wie weit nach unten verschoben werden muss, häng tvom content, hier nur ein kurzer text als Link, ab.*/
	margin-top: 34px;
}

/* glühender weisser schatten
box-shadow: 4px 6px 8px rgb(255, 255, 255);
*/

.pos1 {
	--x:1;
}
.pos2 {
	--x:2;
}
.pos3 {
	--x:3;
}