body {
	color: white;
	background-color: #4f4f4f;
	font-size: 20px;
	font-family: Candara;
	text-align: center;
	text-shadow: 3px 6px 3px rgba(0,0,0,.9);
}
body a {
	color: white;
	text-decoration: none;
	cursor: pointer;
}
body a:hover {
	color: #ff7514;
}
body p {
	cursor: default;
}
body span {
	cursor: default;
}

.unterstrich{
	position: relative;
}
.unterstrich::before{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 3px;
	background-color: #ff7514;
	-webkit-transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	-moz-transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	-o-transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) and (pointer: fine) {
	.unterstrich:hover::before{
    left: 0;
    right: auto;
    width: 100%;
  }
}

.tt {
	font-family: Courier New;
	overflow: hidden;
	height:1.1em;
	word-wrap: break-word;
	white-space: nowrap;
	animation: tippen 5s steps(9) forwards;
}
#tt-p {
	margin: 0 auto;
	width: 300px;
}
@keyframes tippen {
	from { width: 0; }
	to { width: 9ch; }
}

.wrapper {
	display: grid;
	min-width: 750px;
	max-width: 960px;
  	margin: 0 auto;
	grid-template-rows: 250px 250px 250px;
	grid-template-columns: 250px 250px 250px 250px 250px 250px;
	grid-gap: 20px;
	grid-template-areas:
		"box1  box2  box3  box4  box5 box5"
		"box6  box2  box7  box8  box9 box10"
		"box11 box12 box13 box14 box9 box15";
	justify-content:center;
}

.wrapper .grid-box {
	background:  #1C1C1C; 
	overflow: hidden;
	transition: all 250ms;
	font-size: 40px;
  	box-shadow: 5px 5px 5px white;
	border-radius: 10px;
	animation: fadein 1s ease-out normal backwards;
	-webkit-transition: all 1.8s ease;
	-moz-transition: all 1.8s ease;
	-o-transition: all 1.8s ease;
	transition: all 1.8s ease;
}

.box-wrap:hover .box{
	filter:grayscale(100%);
	box-shadow:none;
}
.box-wrap:hover .box:hover{
	transform:scale(1);
	filter:grayscale(0%);
	box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}


.wrapper .grid-box:hover {
	box-shadow: 7px 7px 7px #ff7514;
	color: #ff7514;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
 }


.wrapper .box1 {
	grid-area: box1;
	animation-delay: 0;
}
.wrapper .box2 {
	grid-area: box2;
	animation-delay: 200ms;
}
.wrapper .box3 {
	grid-area: box3;
	animation-delay: 300ms;
}
.wrapper .box4 {
	grid-area: box4;
	animation-delay: 500ms;
}
.wrapper .box5 {
	grid-area: box5;
	animation-delay: 600ms;
}
.wrapper .box6 {
	grid-area: box6;
	animation-delay: 200ms;
}
.wrapper .box7 {
	grid-area: box7;
	animation-delay: 500ms;
}
.wrapper .box8 {
	grid-area: box8;
	animation-delay: 650ms;
}
.wrapper .box9 {
	grid-area: box9;
	animation-delay: 700ms;
}
.wrapper .box10 {
	grid-area: box10;
	animation-delay: 750ms;
}
.wrapper .box11 {
	grid-area: box11;
	animation-delay: 400ms;
}
.wrapper .box12 {
	grid-area: box12;
	animation-delay: 500ms;
}
.wrapper .box13 {
	grid-area: box13;
	animation-delay: 600ms;
}
.wrapper .box14 {
	grid-area: box14;
	animation-delay: 700ms;
}
.wrapper .box15 {
	grid-area: box15;
	animation-delay: 800ms;
}
@keyframes fadein {
	0% {transform: scale(0);}
	70% {transform: scale(1.05);}
	100% {transform: scale(1);}
}

 .wrapper .bild-n {
	border-radius: 10px;
  	width: 250px;
  	height: 250px;
	cursor: zoom-in;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
 }
 .wrapper .bild-n:hover {
  	width: 250px;
  	height: 250px;
	-webkit-transition: scale(1.4);
	-moz-transition: scale(1.4);
	-o-transition: scale(1.4);
	transform: scale(1.4);
}

.wrapper .bild-l {
  	width: 250px;
  	height: 520px;
	cursor: zoom-in;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
}
 .wrapper .bild-l:hover {
  	width: 250px;
  	height: 520px;
	-webkit-transition: scale(1.4);
	-moz-transition: scale(1.4);
	-o-transition: scale(1.4);
	transform: scale(1.4);
}

.wrapper .bild-ls{
  	width: 250px;
  	height: 520px;
	cursor: none;
	-webkit-transition: all 6.8s ease;
	-moz-transition: all 6.8s ease;
	-o-transition: all 6.8s ease;
	transition: all 6.8s ease;
}
 .wrapper .bild-ls:hover {
  	width: 250px;
  	height: 520px;
	opacity: 0.2;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

.wrapper .bild-q {
  	width: 520px;
  	height: 250px;
	cursor: zoom-in;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
}
.wrapper .bild-q:hover {
  	width: 520px;
  	height: 250px;
	-webkit-transition: scale(1.4);
	-moz-transition: scale(1.4);
	-o-transition: scale(1.4);
	transform: scale(1.4);
}

.einfach {
  	width: 250px;
  	height: 250px;
	display: inline-block;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
.einfach:hover {
	font-size: 64px;
}

.nur {
	display: inline-block;
	width: 250px;
  	height: 250px;
	font-size: 75px;
	text-align: right;
}
.nur:hover p {
	animation-duration: 5.0s;
	animation-fill-mode: both;
	animation-name: bounce;
}
@keyframes bounce {
	0% {transform: translateY(0px);}
	7% {transform: translateY(105px);}
	8% {transform: translateY(107px) scaleX(1.15) scaleY(0.85);}
	9% {transform: translateY(110px) scaleX(1.25) scaleY(0.75);}
	10% {transform: translateY(114px) scaleX(1.35) scaleY(0.65);}
	15% {transform: translateY(20px);}
	22% {transform: translateY(105px);}
	23% {transform: translateY(107px) scaleX(1.05) scaleY(0.95);}
	24% {transform: translateY(110px) scaleX(1.15) scaleY(0.85);}
	25% {transform: translateY(114px) scaleX(1.25) scaleY(0.75);}
	26% {transform: translateY(105px);}	
	29% {transform: translateY(40px);}
	35% {transform: translateY(105px);}
	36% {transform: translateY(110px) scaleX(1.25) scaleY(0.75);}
	37% {transform: translateY(105px);}
	43% {transform: translateY(60px);}
	50% {transform: translateY(105px);}
	51% {transform: translateY(110px) scaleX(1.2) scaleY(0.7);}	
	52% {transform: translateY(105px);}
	57% {transform: translateY(80px);}
	65% {transform: translateY(105px);}
	66% {transform: translateY(110px) scaleX(1.15) scaleY(0.65);}
	67% {transform: translateY(105px);}	
	72% {transform: translateY(90px);}
	79% {transform: translateY(105px);}
	80% {transform: translateY(110px) scaleX(1.1) scaleY(0.6);}
	81% {transform: translateY(105px);}
	81% {transform: translateY(105px);}
	87% {transform: translateY(95px);}
	94% {transform: translateY(105px);}
	95% {transform: translateY(110px) scaleX(1.05) scaleY(0.95);}
	96% {transform: translateY(105px);}
	100% {transform: translateY(105px);}
}

.eine {
	display: inline-block;
	width: 250px;
  	height: 250px;
	font-size: 40px;
	text-align: center;
	animation-fill-mode: forwards;
}
.eine:hover {
	animation-name: pulsierend;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@keyframes pulsierend {
	0% {transform: scaleX(1) scaleY(1);}
	50% {transform: scaleX(1.6) scaleY(1.6);}
	100% {transform: scaleX(1) scaleY(1);}
}

.webseite {
	font-size: 40px;
	font-family: "Candara";
	width: 250px;
  	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.webseite span {
	position: relative;
	top: 30px;
}
.webseite:hover span {
	-webkit-animation: huepfen 1s ease infinite alternate;
	-moz-animation: huepfen 1s ease infinite alternate;
	animation: huepfen 1s ease infinite alternate;
}
.webseite span:nth-child(1) {
	-moz-animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.1s;
}
.webseite span:nth-child(2) {
	-moz-animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.2s;
}
.webseite span:nth-child(3) {
	-moz-animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.3s;
}
.webseite span:nth-child(4) {
	-moz-animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.4s;
}
.webseite span:nth-child(5) {
	-moz-animation-delay: 1s;
	-webkit-animation-delay: 1s;
	animation-delay: 0.5s;
}
.webseite span:nth-child(6) {
	-moz-animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
	animation-delay: 0.6s;
}
.webseite span:nth-child(7) {
	-moz-animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s;
	animation-delay: 0.7s;
}
.webseite span:nth-child(8) {
	-moz-animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s;
	animation-delay: 0.8s;
}
@keyframes huepfen { 100% { top: -10px; } }
@-webkit-keyframes huepfen { 100% { top: -10px; } }
@-moz-keyframes huepfen { 100% { top: -10px; } }

.kontakt {
	display: inline-block;
	width: 250px;
  	height: 250px;
	font-size: 55px;
	-webkit-transition: all 2.0s ease;
	transition: all 2.0s ease;
}
.kontakt p {
	width: 40px;
	transform: translateY(-50px);
	transition: transform 1.1s;
}
.kontakt:hover p {
	transform-origin: 0% 0%
	-moz-transform: rotate(63deg);
	-ms-transform: rotate(63deg);
	-o-transform: rotate(63deg);
	-webkit-transform: rotate(63deg);
	transform: rotate(63deg);
	transition: transform 1.8s;
}
.kontakt:hover a {
	animation: farbwechsel 1.8s;
}
@keyframes farbwechsel {
  0% {color: white;}
  50% {color: #ff7514;}
  100% {color: white;}
}


footer {
	text-shadow: 0px 0px 0px rgba(0,0,0,0);
}



@media screen and (orientation: portrait) {

.wrapper {
	display: grid;
	max-width: 960px;
  	margin: 0 auto;
	grid-template-rows: 250px 250px 250px 250px 250px 250px;
	grid-template-columns: 250px 250px 250px;
	grid-gap: 20px;
	grid-template-areas:
		"box1  box2  box3"
		"box6  box2	 box4"
		"box11 box7  box8"
		"box5  box5  box14"
		"box13 box9  box10"
		"box12 box9  box15";
	justify-content:center;
}	
	
	
}