html, body {
margin: 0;
height: 100vh;
font-family: "Roboto Slab", Georgia, Times, serif;
font-weight: normal;
background: linear-gradient(45deg, rgb(58, 188, 117) 0%, rgb(58, 188, 117) 14%,rgb(61, 172, 114) 14%, rgb(61, 172, 114) 19%,rgb(65, 157, 111) 19%, rgb(65, 157, 111) 24%,rgb(68, 141, 108) 24%, rgb(68, 141, 108) 26%,rgb(72, 126, 104) 26%, rgb(72, 126, 104) 32%,rgb(75, 110, 101) 32%, rgb(75, 110, 101) 51%,rgb(79, 95, 98) 51%, rgb(79, 95, 98) 93%,rgb(82, 79, 95) 93%, rgb(82, 79, 95) 100%);
}

a:link, a:visited {
color: #ffff99;
text-decoration: none;
background-image: linear-gradient(#ffff99, #ffffff);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
text-shadow: 2px 4px 8px rgba(0,0,0,0.6);
}

a:link:hover, a:link:focus {
background-size: 100% 2px;
cursor: pointer;
}



header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
width: 100%;
z-index: 10;
text-align: center;
background-color: hsl(0, 0%, 25%);
color: #ffffb3;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.6);
/*background-color: #3d4351;*/
/*border-radius: 20px;*/
}



h1 {
margin: 20px 0 0 0;
font-size: 3em;
font-weight: normal;
}

h2 {
margin: 0 0 20px 0;
font-size: 2em;
font-weight: normal;
}

section {
max-width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: row;
text-align: center;
z-index: 1;
}

.column {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
height: 100%;
font-size: 1.7em;
z-index: 1;
perspective: 600px;
overflow: hidden;
}

.column:nth-of-type(2) {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

.column:nth-of-type(3) {
border-right: 20px solid transparent;
}

.column:hover {

}

.column-inner {
position: relative;
width: 100%;
height: 100%;
/*transition: transform 0.4s linear;*/

transition: all 0.8s cubic-bezier(.5, 1.2, .5, 1.2);

transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.column:hover .column-inner {
transform: rotateY(180deg);
/*transform: rotateX(-180deg);*/
}


.column-front, .column-back {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 400px;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}


section .column:nth-child(1) .column-front {
background-image: url("projekte_bg_01.jpg");
background-position: 60% 15%;
background-repeat: no-repeat;
background-size: cover;
}

section .column:nth-child(2) .column-front {
background-image: url("projekte_bg_02a.jpg");
background-position: 65% 15%;
background-repeat: no-repeat;
background-size: cover;
}

section .column:nth-child(4) .column-front {
background-image: url("projekte_bg_04.jpg");
background-position: 50% 55%;
background-repeat: no-repeat;
background-size: cover;
}

.column-front p:first-of-type {
background-color: #ffffb3;
color: #333;
padding: 6px 18px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
}

.column-front p:last-of-type {

}

.column-front p {
background-color: #4c4c4c;
opacity: 0.9;
}


.column-front p, .column-back p {
padding: 15px 25px;
color: #fff;
}

.column-front {
background-color: #2e779a;
}

.column-back {
background: linear-gradient(55deg, rgba(40, 40, 40, 0.09) 0%, rgba(40, 40, 40, 0.09) 50%,rgba(186, 186, 186, 0.09) 50%, rgba(186, 186, 186, 0.09) 100%),linear-gradient(116deg, rgba(156, 156, 156, 0.07) 0%, rgba(156, 156, 156, 0.07) 50%,rgba(77, 77, 77, 0.07) 50%, rgba(77, 77, 77, 0.07) 100%),linear-gradient(57deg, rgba(73, 73, 73, 0.07) 0%, rgba(73, 73, 73, 0.07) 50%,rgba(44, 44, 44, 0.07) 50%, rgba(44, 44, 44, 0.07) 100%),linear-gradient(103deg, rgba(187, 187, 187, 0.1) 0%, rgba(187, 187, 187, 0.1) 50%,rgba(10, 10, 10, 0.1) 50%, rgba(10, 10, 10, 0.1) 100%),linear-gradient(42deg, rgba(200, 200, 200, 0.08) 0%, rgba(200, 200, 200, 0.08) 50%,rgba(58, 58, 58, 0.08) 50%, rgba(58, 58, 58, 0.08) 100%),linear-gradient(211deg, rgba(160, 160, 160, 0.1) 0%, rgba(160, 160, 160, 0.1) 50%,rgba(73, 73, 73, 0.1) 50%, rgba(73, 73, 73, 0.1) 100%),linear-gradient(48deg, rgba(7, 7, 7, 0.09) 0%, rgba(7, 7, 7, 0.09) 50%,rgba(69, 69, 69, 0.09) 50%, rgba(69, 69, 69, 0.09) 100%),linear-gradient(15deg, rgba(172, 172, 172, 0.07) 0%, rgba(172, 172, 172, 0.07) 50%,rgba(105, 105, 105, 0.07) 50%, rgba(105, 105, 105, 0.07) 100%),linear-gradient(154deg, rgba(220, 220, 220, 0.02) 0%, rgba(220, 220, 220, 0.02) 50%,rgba(134, 134, 134, 0.02) 50%, rgba(134, 134, 134, 0.02) 100%),linear-gradient(90deg, rgb(64, 80, 215),rgb(13, 206, 230));
transform: rotateY(180deg);
/*transform: rotateX(-180deg);*/
}



/* Bildschirme mit maximal x Breite */
@media screen and (max-width: 600px) {

	header {
	position: relative;
	}
	
	h1 {
	font-size: 2em;
	}
	
	section {
	flex-direction: column;
	}
	
	.column {
	font-size: 1.5em;
	}
	
	.column-front, .column-back {
	justify-content: center;
	padding-top: 0;
}	
	
	.column:nth-of-type(2) {
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 0;
	border-right: 0;
	}
	
	.column:nth-of-type(3) {
	border-bottom: 15px solid transparent;
	border-left: 0;
	border-right: 0;
	}
	


}