/* //////////////////////////
/////////////////////////////
//////BY ANDREAS MAKS////////
/////////////////////////////
/* ////////////////////////*/

@font-face { font-family: DINL; src: url('../fonts/DINPro-Light.ttf'); }
@font-face { font-family: DINPro; src: url('../fonts/DINPro-Regular.ttf'); }
@font-face { font-family: DINProB; font-weight: bold; src: url('../fonts/DINPro-Bold.ttf'); }

:root {
	--page-background: #f3f3f1;
	--tile-background: #f3f3f1;
	--tile-text-color: #454545;
}

/*----------------------------------------------------------------------------------- GLOBAL -----------------*/

* {
	font: 14px 'DINL', Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	color: var(--tile-text-color, #454545);
}

body {
	background: var(--page-background, #f3f3f1);
}

h1 {
	font: 14px 'DINL', Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	text-transform: uppercase;
	margin-bottom: -8px;
}

h2 {
	font: 12px 'DINL', Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	text-transform: uppercase;
}

p {
	font: 12px 'DINL', Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	line-height: 22px;
}

a {
	cursor: pointer;
	text-decoration: none;
}

a:focus {
	outline: 0;
}


.clear {
	clear: both;
}

::selection {
	background: var(--selection-color, #ffffff);
	color: #ffffff;
	text-shadow: none;
}

::-moz-selection {
	background: var(--selection-color, #ffffff);
	color: #ffffff;
	text-shadow: none;
}

/*----------------------------------------------------------------------------------- WRAPPER ----------------*/

#container {
	width: 909px;
	height: auto;
	margin: 5% auto 0 auto;
}

#wrapper {
	width: 909px;
	height: 672px;
	overflow: hidden;
}

#innerwrapper{
	width: 4545px;
	height:  672px;
}

#innerwrapper-top, .innerwrapper-work {
	width: 909px;
	height: 672px;
	float: left;
}


/*----------------------------------------------------------------------------------- NAVI -------------------*/

.kasten-navi {
	position: absolute;
	width: 303px;
	height: 224px;
	background: #000;
	font: 18px 'DINL', Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	text-transform: uppercase;
	line-height: 30px;
	letter-spacing: 1px;
	margin: 224px 0 0 303px;
	z-index: 2;
}

.kasten-navi ul{
	display: block;
	margin: 80px 0px;

}

.kasten-navi li a {
	border: none !important;
	width: 170px;
	display: block;
	color: #fff;
	margin-left: 54px;
}

.kasten-navi li {
	position: relative;
}

.kasten-navi li:hover:before,
.kasten-navi li:focus-within:before {
	content: '';
	position: absolute;
	top: 9px;
	left: 0;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid var(--logo-color, #f94144);
	border-right: 0;
}

/*----------------------------------------------------------------------------------- CONTENT ----------------*/

.kasten {
	width: 303px;
	height: 224px;
	background: var(--tile-background, #fff);
	float: left;
}

.kasten-text {
	width: 263px;
	height: 176px;
	padding: 28px 20px 20px 20px;
	background: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	float: left;
}

.kasten-text,
.kasten-text * {
	color: #fff !important;
}

.kasten-profil {
	width: 263px;
	height: 20px;
	background: var(--tile-background, #fff);
	padding: 184px 20px 20px 20px;
	bottom: 0px;
	text-align: right;
	float: left;
}

.kasten-logo {
	position: absolute;
	width: 303px;
	height: 224px;
	background: var(--logo-color, #000) url(../images/logo.png) no-repeat center;
	background-size: 77px 30px;
	margin-top: 224px;
	z-index: 2;
}

.logo-float {
	display: none;
}

.logo-float:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--logo-color, #000);
	-webkit-mask: url(../images/logo.png) no-repeat center;
	mask: url(../images/logo.png) no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.kasten-title {
	width: 303px;
	height: 224px;
	background-color: var(--logo-color, #f94144);
	float: right;
	font: 14px 'DINPro', Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	text-transform: uppercase;
	z-index: 1;
}

.kasten-title,
.kasten-title * {
	color: #fff !important;
}

.bold {
	font: 14px 'DINProB', Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
}

.teaser {
	margin: 90px 0 0 65px;
}

#title-interface,
#title-interface *,
#title-web,
#title-web * {
	color: #fff !important;
}

#title-interface,
#title-web {
	background: #000;
}

#title-interface {
	position: relative;
}

#about p {
	font-size: 14px;
}

#thumb-1, #thumb-2, #thumb-3, #thumb-4, #thumb-13, #thumb-14, #thumb-15, #thumb-16, #about-foto {
	height: 224px;
	width: 303px;
}

#thumb-1 {
	background: url(../images/work-thumbs/web-top-left.jpg) no-repeat;
	background-size: 303px 224px;
}

#thumb-2 {
	background: url(../images/work-thumbs/web-top-right.jpg) no-repeat;
	background-size: 303px 224px;
}

#thumb-3 {
	background: url(../images/work-thumbs/web-bottom-left.jpg) no-repeat;
	background-size: 303px 224px;
}

#thumb-4 {
	background: url(../images/work-thumbs/web-bottom-right.jpg) no-repeat;
	background-size: 303px 224px;
}

#thumb-13 {
	background: url(../images/work-thumbs/interface-top-left.jpg) no-repeat;
	background-size: 303px 224px;
}

#thumb-14 {
	background: url(../images/work-thumbs/interface-top-right.jpg) no-repeat;
	background-size: 303px 224px;
}

#thumb-15 {
	background: url(../images/work-thumbs/interface-bottom-left.jpg) no-repeat;
	background-size: 303px 224px;
}

#thumb-16 {
	background: url(../images/work-thumbs/interface-bottom-right.jpg) no-repeat;
	background-size: 303px 224px;
}

#about-foto {
	background: url(../images/about-foto.jpg) no-repeat;
	background-size: 303px 224px;
}

/*----------------------------------------------------------------------------------- SOCIALBUTTONS ----------*/

.social-kasten {
	float: left;
	position: relative;
}

.social-kasten a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	font: 20px 'DINPro', Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: none;
	color: #fff;
}

.social-dribbble {
	background-color: #ea4c89;
}

.social-linkedin {
	background-color: #0077b5;
}

.social-mastodon {
	background-color: #6364FF;
}

/*----------------------------------------------------------------------------------- FOOTER -----------------*/

#footer {
	width: 303px;
	height: 32px;
	margin-top: -226px;
}

.but-left, .but-right {
	font: 12px 'DINL', Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	text-align: center;
	color: #fff !important;
	padding-top: 9px;
	height: 23px;
}

.but-left {
	width: 152px;
	background: #000;
	float: left;
}

.but-right {
	width: 151px;
	background: #000;
	float: right;
}

.but-left:hover {
	background: var(--logo-color, #f94144);
}

.but-right:hover {
	background: var(--logo-color, #f94144);
}

/*----------------------------------------------------------------------------------- WINDOW HEIGHT ----------*/

@media screen and (max-height: 700px) {

	div#container {
		margin: 0 auto !important;
	}
}

@media screen and (max-height: 750px) {

	div#container {
		margin: 0 auto !important;
	}

}

@media screen and (min-width: 941px) and (prefers-color-scheme: dark) {

	:root {
		--page-background: #1a1b1f;
		--tile-background: #1a1b1f;
		--tile-text-color: #ededf0;
	}

}

/*----------------------------------------------------------------------------------- MOBILE / TABLET ---------*/

@media screen and (max-width: 940px) {

	
	body {
	  background: #000000;
	}
	
	#container {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#wrapper,
	#innerwrapper,
	#innerwrapper-top,
	.innerwrapper-work {
		width: 100%;
		height: auto;
	}

	#wrapper {
		overflow: visible;
	}

	#innerwrapper {
		display: grid;
		gap: 0;
	}

	#innerwrapper-top,
	.innerwrapper-work {
		float: none;
		display: flex;
		flex-direction: column;
	}

	#innerwrapper-top {
		display: none;
	}

	.clear,
	#start,
	.kasten-navi,
	.kasten-profil,
	#footer {
		display: none !important;
	}

	.kasten-logo,
	.kasten-navi,
	.kasten,
	.kasten-text,
	.kasten-profil,
	.kasten-title {
		position: relative;
		width: 100%;
		margin: 0;
		float: none;
		box-sizing: border-box;
		border-radius: 0;
	}

	.kasten-logo {
		position: relative;
		display: block;
		height: auto;
		aspect-ratio: 303 / 224;
		margin: 0;
		top: 0;
		left: 0;
		background: var(--logo-color, #000) url(../images/logo.png) no-repeat center;
		background-size: 77px 30px;
	}

	.logo-float {
		position: fixed;
		top: 12px;
		left: 12px;
		display: block;
		width: 92px;
		height: 68px;
		background: transparent;
		z-index: 1200;
		opacity: 0;
		pointer-events: none;
		transition: opacity 180ms ease;
	}

	.logo-float:before {
		width: 54px;
		height: 21px;
	}

	body.logo-float-visible .logo-float {
		opacity: 1;
		pointer-events: auto;
	}

	body.logo-float-on-social .logo-float:before {
		background-color: #fff;
	}

	.kasten {
		height: auto;
		aspect-ratio: 303 / 224;
	}

	#thumb-1,
	#thumb-2,
	#thumb-3,
	#thumb-4,
	#thumb-13,
	#thumb-14,
	#thumb-15,
	#thumb-16,
	#about-foto {
		width: 100%;
		height: 100%;
		background-size: cover !important;
		background-position: center center;
	}

	.kasten > a {
		display: block;
		width: 100%;
		height: 100%;
	}

	.kasten-navi {
		position: relative;
		display: block;
		display: flex;
		align-items: center;
		height: 224px;
		margin: -1px 0 0;
		padding: 0;
		top: 0;
		left: 0;
		background: #91999c !important;
	}

	.kasten-navi ul {
		display: block;
		width: 100%;
		margin: 0;
	}

	.kasten-navi li a {
		width: 170px;
		margin-left: 54px;
		padding: 0;
		border-radius: 0;
		font-size: 18px;
		letter-spacing: 1px;
		background: none;
		border: 0;
	}

	.kasten-text,
	.kasten-profil {
		height: auto;
		aspect-ratio: 303 / 224;
		border-radius: 0;
	}

	.kasten-title {
		background-color: #e8e8e8;
		height: auto;
		aspect-ratio: 303 / 224;
		display: flex;
		align-items: center;
	}

	.teaser {
		margin: 0 0 0 65px;
	}

	#container > a,
	#container > .kasten-navi,
	#container > #wrapper,
	#container > #footer,
	#innerwrapper > .innerwrapper-work,
	.innerwrapper-work > .kasten,
	.innerwrapper-work > .kasten-title,
	.innerwrapper-work > .kasten-text {
		margin: 0;
	}

	#container > a {
		display: block;
		line-height: 0;
		margin: 0;
		padding: 0;
	}

	#title-interface,
	#title-web {
		order: -1;
	}
}

@media screen and (max-width: 640px) {
	#container {
		width: 100%;
	}
}

/*----------------------------------------------------------------------------------- FADE IN ----------------*/

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

body {
	opacity: 0;
	animation: fadeIn ease-in 1;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-delay: 0s;
}


/*///////////////////////////////////
///////FEEL FREE TO STEAL THIS///////
///////////////////////////////////*/