@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family:'Spezia';
	src: url('SpeziaWeb-Medium.eot'); /* IE9 Compat Modes */
	src: url('SpeziaWeb-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('SpeziaWeb-Medium.woff2') format('woff2'), /* Super Modern Browsers */
         url('SpeziaWeb-Medium.woff') format('woff'); /* Pretty Modern Browsers */
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+000D-FB04;
}

* {
  	box-sizing: border-box;
	font-family: 'Spezia';
	font-weight: 500;
	font-style: normal;
	-moz-osx-font-smoothing: grayscale;     /* optimize font rendering */
	-webkit-font-smoothing: antialiased;    /* apply font anti-aliasing */
	text-rendering: optimizeLegibility;     /* emphasizes in legibility over rendering speed */
	-moz-font-feature-settings:"kern" 1;    /* turn on kerning, highly recomened */ 
	-ms-font-feature-settings:"kern" 1;     /* turn on kerning, highly recomened */ 
	-o-font-feature-settings:"kern" 1;      /* turn on kerning, highly recomened */
	-webkit-font-feature-settings:"kern" 1; /* turn on kerning, highly recomened */
	font-feature-settings:"kern" 1;         /* turn on kerning, highly recomened */
	font-kerning: normal;                   /* turn on kerning, highly recomened */

	font-feature-settings: "liga" on;       /* ligatures: on or off */
	font-feature-settings: "dlig" off;      /* discretionary-ligatures: on or off */
	font-feature-settings: "onum" on;      /* old-style-figures: on or off */
	font-feature-settings: "lnum" off;      /* lining-figures: on or off */
	font-feature-settings: "ss01" on;      /* alternate glyphs: on or off */
	
	text-transform: lowercase;
}

body {
	background-color: #FCFAFA;
}

header h2 {
	font-size: 24px;
}

	/* mobile */

.grid-container-header {
	display: grid;
	position: fixed;
	grid-gap: 11px;
	grid-template-columns: 8.33fr;
	grid-template-rows: auto;
	padding-left: 11px;
	padding-right: 11px;
	z-index: 102;
}

.logo {
	font-size: 30px;
	text-align: left;
	line-height: 0;
	z-index: 102;
}

.logo a {
	text-decoration: none;
	color: #343042;
	z-index: 102;
}


.grid-container {
	display: grid;
	grid-gap: 11px;
	grid-template-columns: 33.33fr 33.33fr 33.34fr;
	grid-template-rows: 20vh auto auto auto auto auto auto auto auto auto auto 20vh 63px 51px;
	padding-left: 11px;
	padding-right: 11px;
}


.grid-container-menue{
	display: grid;
	position: fixed;
	width: 33.3vw;
	grid-template-columns: 33.33vw 33.33vw 33.34vw;
	grid-template-rows: 24px 24px 24px 24px;
	justify-content: space-between;
	align-content: end;
	bottom: 0;
	grid-column-gap: 11px;
	grid-row-gap: 6px;
	padding-right: 11px;
	padding-left: 11px;
	padding-bottom: 14px;
	font-size: 18px;
	z-index: 101;
}

.about {
	grid-column-start: 1;
 	grid-column-end: 2;
}

.about a:active {
	color: #6AFFD1;
} 

.about a:hover {
	color: #6AFFD1;
} 

.grid-container-menue a {
	text-decoration: none;
	color: #343042;
}

.work {
	grid-column-start: 1;
 	grid-column-end: 2;
}

.work a:active {
	color: #6AFFD1;
} 

.work a:hover {
	color: #6AFFD1;
} 

.contact {
	grid-column-start: 1;
 	grid-column-end: 2;
}

.contact a:active {
	color: #6AFFD1;
} 

.contact a:hover {
	color: #6AFFD1;
} 

.shop {
	grid-column-start: 1;
 	grid-column-end: 2;
}

.shop a:active {
	color: #6AFFD1;
}

.shop:hover span {
	display: none;
}

.shop:hover:before {
	content: "soon!";
	color: #6AFFD1;
}


.info {
	grid-column-start: 2;
 	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 5;
	position: fixed;
	display: none;
	margin-left: 33.33%;
	bottom: 0;
	padding-bottom: 14px;
	grid-column-gap: 11px;
	grid-row-gap: 11px;
	font-size: 18px;

}


	/* Main */

.title {
	display: grid;
	font-size: 24px;
	z-index: 102;
}

	.language {
		grid-column: 1 / span 3;
		line-height: 1.3;
		padding-top: 6vh;
	}


.right {
	grid-column: 2 / span 2;
	padding-top: 3vh;
	padding-bottom: 8vh;
	align-self: center;
	z-index: 102;
}
	
	.right h2 {
	font-size: 24px;
	text-align: left;
	margin-bottom: 0px;
	}
	
	.right p {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	padding-left: 0px;
	margin-top: 5px;
	}

.right a {
	text-decoration: none;
	color: #9690FF;
}

.right ul {
	list-style: none;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	margin-top: 3vh;
	margin-bottom: 3vh;
	padding-left: 0px;
	color: #9690FF;
}

.right ul li {
	padding-left: 0;
  	text-indent: -1.2em;
}

.right ul li:before {
	content: "—";
  padding-right: 5px;
}

.right ol {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	margin-top: 3vh;
	padding-left: 0px;
	color: #9690FF;
}


.column1 {
	grid-row: 2 / span 1;
}

.column2 {
	grid-row: 3 / span 1;
}

.column3 {
	grid-row: 4 / span 1;
}

.column4 {
	grid-row: 5 / span 1;
}

.column5 {
	grid-row: 6 / span 1;
}

.column6 {
	grid-row: 7 / span 1;
}

.column7 {
	grid-row: 8 / span 1;
}

.column8 {
	grid-row: 9 / span 1;
}

.column9 {
	grid-row: 10 / span 1;
}

.column10 {
	grid-row: 11 / span 1;
}


 /* Insta */	

.grid-container-insta {
	position: fixed;
	bottom: 2px;
	right: 14px;
	grid-template-columns: auto;
	margin-bottom: 14px;
	z-index: 102;
}


.insta {
	font-size: 30px;
	text-align: left;
}

.social-default {
	width: 20px;
	display: block;
}

.social-hover {
	width: 20px;
	display: block;
}

.insta a .social-hover {
	display: none;
}

.insta a:hover .social-default {
	display: none;
}

.insta a:hover .social-hover {
	display: block;
}

.cookies {
	grid-column: 1 / span 2;
	padding: 10px;
	font-size: 18px;
	line-height: 1.4;
	color: #343042;
	text-align: left;
	margin-top: 5vh;
	order: 2;
	}


			/* Footer */
	
.credits {
	grid-column: 2 / span 2;
	grid-row: 13 / span 1;
	font-size: 12px;
	line-height: 1.3;
	color: #343042;
	align-self: start;
	padding-top: 5px;
	z-index: 102;
	order: 9;
	}

.credits a {
	text-decoration: none;
	color: #343042;
}
	
.datenschutz {
	grid-column: 2 / span 2;
	grid-row: 13 / span 1;
	order: 10;
}

	
.datenschutz a {
	font-size: 12px;
	color: #9690FF;
	text-align: left;
	line-height: 1.3;
	text-decoration: none;
}
	

.datenschutz a:hover {
			color: #6AFFD1;
	}	


.imprint {
	grid-column: 2;
	grid-row: 14 / span 1;
	text-align: left;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	color: #343042;
	order: 13;
	align-self: end;
	margin-bottom: 9px;
	z-index: 102;
	}
	
.imprint a {
	text-decoration: none;
	color: #343042;
}

.imprint a:hover {
	color: #6AFFD1;
}	

.imprint a:active {
	color: #6AFFD1;
}	

.linkedin {
	grid-column: 3;
	grid-row: 14;
	align-self: end;
	z-index: 101;
	order: 14;
	margin-left: 0px;
	margin-bottom: 9px
}

.linkedin a .social-hover {
	display: none;
}

.linkedin a:hover .social-default {
	display: none;
}

.linkedin a:hover .social-hover {
	display: block;
}


@media only screen and (max-width: 767px) {
.mobile-hidden {
	display: none;
}
}

	/* Desktop */

@media only screen and (min-width: 768px) {
  /* For desktop: */
.grid-container {
	display: grid;
	grid-gap: 11px;
	grid-template-columns: 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.37fr;
	grid-template-rows: 20vh 100px 100px 700px auto auto 60vh auto auto;
	padding: 11px;
	padding-top: 16px;
	padding-bottom: 11px;
	margin-bottom: 15px;
	margin-left: 3vw;
	margin-right: 3vw;
}
	
.grid-container-header {
	display: grid;
	position: fixed;
	grid-gap: 11px;
	grid-template-columns: auto;
	padding-left: 11px;
	padding-right: 11px;
	margin-left: 3vw;
	margin-right: 3vw;
}

.logo {
	font-size: 30px;
	text-align: left;
	z-index: 101;
}
	
	
	/* Main */

	.language {
		grid-column: 9 / span 4;
		line-height: 1.3;
	}	
	
	
.title {
	display: grid;
	font-size: 24px;
	z-index: 102;
}


.right {
	grid-column: 2 / span 2;
	padding-top: 3vh;
	align-self: start;
	z-index: 102;
}
	
	.right h2 {
	font-size: 24px;
	text-align: left;
	margin-bottom: 0px;
	}
	
	.right p {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	margin-top: 5px;
	}
.right a {
	text-decoration: none;
	color: #9690FF;
}

.right ul {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	margin-top: 3vh;
	margin-bottom: 3vh;
	color: #9690FF;
}

.right ol {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	margin-top: 3vh;
	color: #9690FF;
}


.column1 {
	grid-column: 1 / span 3;
	grid-row: 2 / span 1;
}

.column2 {
	grid-column: 5 / span 3;
	grid-row: 3 / span 1;
}

.column3 {
	grid-column: 9 / span 3;
	grid-row: 4 / span 1;
}

.column4 {
	grid-column: 2 / span 2;
	grid-row: 6 / span 1;
}

.column5 {
	grid-column: 5 / span 2;
	grid-row: 6 / span 1;
}

.column6 {
	grid-column: 8 / span 2;
	grid-row: 6 / span 1;
}

.column7 {
	grid-column: 11 / span 2;
	grid-row: 6 / span 1;
}

.column8 {
	grid-column: 1 / span 4;
	grid-row: 7 / span 1;
}

.column9 {
	grid-column: 6 / span 4;
	grid-row: 7 / span 1;
}

.column10 {
	grid-column: 11 / span 2;
	grid-row: 7 / span 1;
}
		
	
	/* Insta */
	
.grid-container-insta {
	display: grid;
	position: fixed;
	bottom: 0;
	right: 8px;
	grid-gap: 11px;
	grid-template-columns: auto;
	padding: 0px;
	padding-bottom: 16px;
	margin-left: 3vw;
	margin-right: 3vw;
	margin-bottom: 15px;
	z-index: 102;
}


.insta {
	font-size: 30px;
	text-align: left;
}
	
	
	
	/* Menue */

.grid-container-menue {
	display: grid;
	position: fixed;
	width: auto;
	grid-column-gap: 11px;
	grid-row-gap: 6px;
	grid-template-columns: 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.33fr 8.37fr;
	grid-template-rows: 20 20 20 20;
	justify-content: space-between;
	align-content: end;
	bottom: 0;
	padding: 11px;
	padding-right: 11px;
	padding-left: 11px;
	padding-top: 16px;
	padding-bottom: 11px;
	margin-left: 3vw;
	margin-right: 3vw;
	margin-bottom: 15px;
	font-size: 18px;
	z-index: 102;
}

.about {
	grid-column: 1;
	grid-row: 1;
}
	
	
.grid-container-menue a {
	text-decoration: none;
	color: #343042;
}

.work {
	grid-column: 1;
	grid-row: 2;
}

.shop {
	grid-column: 1;
	grid-row: 4;
}

.shop:hover span {
	display: none;
}

.shop:hover:before {
	content: "soon!";
	color: #6AFFD1;
}

.contact {
	grid-column: 1;
	grid-row: 3;
}
	
	.contact a:hover {
		color: #6AFFD1;
	}	
	
	
	
.info {
	grid-area: 3 / 2 / 5 / 3;
	position: relative;
	display: none;
	height: 55px;
	bottom: 0;
	padding-bottom: 0;
	margin-left: 0;
	grid-column-gap: 11px;
	grid-row-gap: 6px;
	font-size: 18px;
}
	
.info a {
		color: #343042;
}
	
		/* Footer */
	
.credits {
	grid-column: 10 / span 2;
	grid-row: 23;
	align-self: start;
	padding-bottom: 28px;
	font-size: 12px;
	text-align: left;
	line-height: 1.3;
	color: #343042;
	order: 13;
	z-index: 102;
	}
	
	.credits a {
	text-decoration: none;
	color: #343042;
}	
	
.datenschutz {
	grid-column: 12;
	grid-row: 23;
	align-self: start;
	order: 14;
	text-align: left;
	font-size: 12px;
	line-height: 1.3;
	text-decoration: none;
	z-index: 102;
}
	
.datenschutz a {
	font-size: 12px;
	color: #9690FF;
	text-align: left;
	line-height: 1.3;
	text-decoration: none;
}
	
.datenschutz a:hover {
			color: #6AFFD1;
	}	
	
.imprint {
	grid-column: 10;
	grid-row: 24 / span 1;
	text-align: left;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	color: #343042;
	order: 15;
	align-self: end;
	margin-bottom: 5px;
	}
	
.imprint a {
	text-decoration: none;
	color: #343042;
}

.desktop-hidden {
	display: none;
}
	
.linkedin {
	grid-column: 12;
	grid-row: 24 / span 1;
	align-self: end;
	z-index: 101;
	order: 16;
	margin-left: 0px;
	margin-bottom: 5px
}

.linkedin a .social-hover {
	display: none;
}

.linkedin a:hover .social-default {
	display: none;
}

.linkedin a:hover .social-hover {
	display: block;
}
	
	
}

/* Huge Desktops */

@media only screen and (min-width: 1900px) {

.grid-container {
	margin-left: 10vw;
	margin-right: 10vw;
}
.grid-container-menue {	
	margin-left: 10vw;
	margin-right: 10vw;
}
	
.grid-container-insta {
	margin-left: 10vw;
	margin-right: 10vw;
}
.grid-container-header	{
	margin-left: 10vw;
	margin-right: 10vw;
}
	
}