/*** /css/default.css ***/
html, body{
	margin: auto;
	color: black;
	padding: 0;
	font-size: 1.0rem;
	}

html{
	background: white;
	}

body{
	line-height: 100%;
	}


*{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	}

/*** blocks ***/
div{
	margin: auto;
	text-align: left;
	}


/*** ? ***/
.center{text-align: center;}

.vtop{vertical-align: top;}


pre{
	text-align: left;
	padding: 15px;
	}


/*** /css/layout.css ***/
:root{
	--color-bg: #0f172a;
	--color-text: #e2e8f0;
	--color-accent: #2dd4bf;
	--color-menu-top: rgb(203,213,225);
	--color-accent-text: #0f172a;
	--color-projects-bg: #1e293b;
	/*
	--text-color: #e2e8f0;
	--accent-color: #2dd4bf;
	--accent-text-color: #0f172a;
	--card-bg-color: #1e293b;
	--secondary-bg-color: #000000;
	*/
	}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(/css/fonts/interVariable.woff2) format('woff2');
	font-synthesis: none;
	}

body, html{
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	}

h1, h2, h3, h4{
	/*font-family: 'Poppins', sans-serif;*/
      }

/*** width info ***/
#responsive-browser-width{
	position: fixed;
	background: rgb(55,66,80);
	padding: 5px 5px 5px 15px;
	color: rgb(154,171,192);
	font-size: 1.15rem;
	font-weight: 500;
	z-index: 11111;
	height: 17px;
	text-decoration: none;
	cursor: default;
	border: 1px solid #2dd4bf;
	}

div{
	/*outline: 1px solid rgb(80,80,80);*/
	}


/*** /css/header.css ***/
/*** header ***/
header{
	margin: auto;
	width: 100%;
	position: sticky;
	top: 0;
	border-bottom: 1px solid rgb(30,41,59);
	background-color: rgba(15,23,42,0.65);
	backdrop-filter: blur(3px);
	}

.header-in{
	display: flex;
	max-width: 1000px;
	padding: 4px 0 3px;
	}

/*** logo ***/
.header-logo{
	display: flex;
	color: var(--color-accent);
	font-family: inter, sans-serif;
	line-height: 100%;
	padding: 15px 0 14px;
	max-width: 240px;
	white-space: nowrap;
	}

.header-logo > div:nth-of-type(1){
	padding: 4px 5px 5px 10px;
	font-size: 1.25rem;
	font-weight: 800;
	}

.header-logo > div:nth-of-type(2){
	padding: 5px 10px;
	font-size: 0.85rem;
	}

.header-logo i{
	font-style: normal;
	color: white;
	}

.header-logo span{
	outline: 2px solid var(--color-accent);
	border-radius: 6px;
	padding: 3px 4px 2px 5px;
	}

.header-logo strong{
	font-weight: 780;
	}

.header-space{
	height: 10px;
	flex-grow: 1;
	}

/*** menu ***/
.header-menu{
	padding: 11px 0 9px;
	font-weight: 300;
	display: flex;
	width: 50px;
	}

.header-menu-in{
	width: 200px;
	display: none;
	font-size: 1.3rem;
	line-height: 180%;
	position: absolute;
	margin-left: -70px;
	margin-top: 40px;
	border: 1px solid #344258;
	padding: 0;
	}

.header-menu-in a{
	display: block;
	color: var(--color-menu-top);
	text-decoration: none;
	font-weight: 400;
	border-bottom: 1px solid #344258;
	margin: auto 0 auto auto;
	padding: 5px 11px 5px 11px;
	}

.header-menu-in a:hover{
	color: var(--color-accent);
	text-decoration: underline;
	}

.header-menu-in a:nth-of-type(4){
	border-bottom: none;
	}

.header-menu-hbg{
	width: 40px;
	display: block;
	}

.header-menu-hbg div{
	width: 33px;
	padding: 6px 0 5px;
	background-color: #344258;
	border-radius: 6px;
	transition: all 0.1s ease-in-out;
	cursor: pointer;
	}

.header-menu-hbg div:hover{
	transform: scale(1.15);
	}

.header-menu-hbg span{
	display: block;
	margin: auto;
	width: 27px;
	height: 4px;
	background-color: #e2e8f0;
	margin-bottom: 7px;
	border-radius: 3px;
	}

.header-menu-hbg span:nth-of-type(3){
	margin-bottom: 0;
	}


.header-menu-list-view{
	display: block;
	}


/*** langs ***/
.header-langs{
	padding: 16px 0 14px;
	font-size: 0.85rem;
	}

.header-langs-in{
	display: flex;
	padding-left: 10px;
	}

.header-langs a{
	display: block;
	padding: 5px;
	text-align: center;
	color: rgb(107,134,148);
	text-decoration: none;
	font-weight: 400;
	}

.header-langs a:hover{
	text-decoration: underline;
	color: var(--color-accent);
	}

a.header-langs-active, a.header-langs-active:hover{
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
	}


/*** /css/home.css ***/
.home{
	padding: 160px 0;
	max-width: 1000px;
	margin: auto;
	container-type: inline-size;
	}

.home h1{
	display: block;
	margin: auto;
	text-align: center;
	line-height: 140%;
	font-weight: 700;
	font-size: clamp(2.5rem, 7.8cqw, 4.9rem);
	}

.home-en h1{
	font-size: clamp(2.3rem, 7.1cqw, 4.8rem);
	}

.home-de h1{
	font-size: clamp(2.2rem, 7.0cqw, 4.3rem);
	}

.home-de b{
	font-size: clamp(1.7rem, 5.5cqw, 3.8rem);
	line-height: 120%;
	}


.home-de h1 b{
	display: block;
	}

.home h1 b{
	color: var(--color-accent);
	font-weight: 777;
	}

.home p{
	margin: auto;
	padding: 10px;
	line-height: 140%;
	text-align: center;
	font-weight: 300;
	max-width: 800px;
	font-size: clamp(0.9rem, 2.4cqw, 1.3rem);
	}

.home div{
	display: flex;
	padding: 15px 0;
	}

.home > div > div{
	height: 10px;
	flex-grow: 1;
	}

.home div a{
	display: block;
	width: 150px;
	text-decoration: none;
	border-radius: 10px;
	}

html:lang(de) .home div a{
	width: 165px;
	}

.home div a:hover{
	text-decoration: underline;
	}

.home div a span{
	display: block;
	padding: 17px 20px;
	text-align: center;
	font-weight: 600;
	font-size: 1.1rem;
	}

.home div > a:nth-of-type(1){
	background-color: var(--color-accent);
	color: var(--color-accent-text);
	transition: all 0.3s ease;
	margin-right: 15px;
	}

.home div > a:nth-of-type(1):hover{
	filter: brightness(1.1);
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 0 20px rgba(45, 212, 191, 0.4);
	}

.home div > a:nth-of-type(2){
	background: #334155;
	color: white;
	}

.home div > a:nth-of-type(2):hover{
	background-color: #475569;
	}


/*** /css/projects.css ***/
.projects{
	padding: 80px 0 0;
	max-width: 800px;
	}

.projects-top h2{
	text-align: center;
	font-size: 2.25rem;
	line-height: 100%;
	padding: 0;
	margin: 0;
	font-size: clamp(2.2rem, 7cqw, 2.5rem);
	font-weight: 750;
	}

.projects-top p{
	text-align: center;
	font-size: 1.15rem;
	color: rgb(148,163,184);
	line-height: 130%;
	padding: 0 0 30px;
	}

.projects-list{
	display: flex;
	flex-wrap: wrap;
	}

/*** project ***/
.project{
	width: 45%;
	border: 1px solid #334155;
	background: var(--color-projects-bg);
	border-radius: 0.75rem;
	transition: all 0.3s ease-in-out;
	padding: 15px 0;
	margin-top: 0;
	margin-bottom: 30px;
	container-type: inline-size;
	}

.project:hover{
	border-color: var(--color-accent);
	transform: translateY(-5px) scale(1.02);
	}

.project-image{
	display: block;
	margin: auto;
	width: 92%;
	aspect-ratio: 1/1;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	cursor: pointer;
	color: white;
	}

.project:hover .project-image{
	transition: transform 0.9s ease;
	}

.project:hover .project-image{
	transform: scale(1.05);
	}

.project-image-os{
	background-image: url(/images/projects/os_max.webp);
	}

.project-image-gs{
	background-image: url(/images/projects/gs_max.webp);
	}

.project-image-is{
	background-image: url(/images/projects/is_max.webp);
	}

.project-image-pb{
	background-image: url(/images/projects/pb_max.webp);
	}

.project span{
	display: block;
	height: 30%;
	}

.project strong{
	display: block;
	text-align: center;
	font-size: 1.5rem;
	background-color: #0f172abf;
	color: white;
	padding: 10px 0;
	line-height: 100%;
	}

.project-image-pb strong{
	font-size: clamp(1.3rem, 8cqw, 1.5rem);
	}

.project-timeline{
	font-style: italic;
	color: var(--color-accent);
	padding: 10px 0;
	text-align: center;
	font-size: 0.85rem;
	}

.project-timeline br{
	display: none;
	}

.project ul{
	list-style-type: square;
	font-size: 0.8rem;
	line-height: 145%;
	padding-left: 30px;
	}

.project ul li{
	padding-right: 10px;
	}

.project-tags{
	padding: 10px 15px;
	display: flex;
	flex-wrap: wrap;
	}

.project-tags span{
	display: block;
	margin: auto auto 8px;
	color: var(--color-accent);
	border-radius: 12px;
	padding: 5px 8px 4px;
	background: #374151;
	font-size: 0.75rem;
	font-weight: 500;
	}

/*** bottom ***/
.projects-bottom{
	max-width: 740px;
	padding: 0 10px 60px;
	}

.projects-bottom p{
	color: rgb(148,163,184);
	line-height: 130%;
	}

.projects-bottom a{
	color: var(--color-accent);
	text-decoration: none;
	}

.projects-bottom a:hover{
	text-decoration: underline;
	}

/*
.project a{
	display: block;
	color: white;
	text-decoration: none;
	font-size: 1.6rem;
	padding: 20px 10px;
	}

.project a:hover{
	text-decoration: underline;
	}
*/


/*
.project:hover strong{
	transform: scale(1.03);
    	font-size: 103%;
	}
*/



/*** /css/shoptet.css ***/
.shoptet{
	max-width: 1000px;
	padding: 80px 0;
	}

.shoptet h3{
	text-align: center;
	font-size: 2.4rem;
	line-height: 120%;
	font-weight: 750;
	padding: 0;
	margin: 0;
	}

.shoptet h3 br{
	display: none;
	}

.shoptet h3 span{
	color: var(--color-accent);
	}

.shoptet-top{
	container-type: inline-size;
	}

.shoptet-top p{
	text-align: center;
	/*font-size: 1.15rem;*/
	color: rgb(148,163,184);
	line-height: 140%;
	padding: 0 10px 30px;
	font-size: clamp(0.75rem, 4.0cqw, 1.15rem);
	}

.shoptet h4{
	text-align: center;
	font-size: 1.55rem;
	line-height: 100%;
	padding: 0 0 25px;
	margin: 0;
	}

.shoptet-top-de h3{
	font-size: 2rem;
	}

.shoptet-cols{
	display: flex;
	}

.shoptet-col{
	width: 30%;
	border: 1px solid #334155;
	background: var(--color-projects-bg);
	transition: all 0.3s ease-in-out;
	margin: 0 auto;
	border-radius: 0.75rem;
	container-type: inline-size;
	}

.shoptet-col:hover{
	border-color: var(--color-accent);
	transform: translateY(-5px);
	}

.shoptet-col strong{
	display: flex;
	margin: auto;
	padding: 15px 10px 5px 20px;
	color: var(--color-accent);
	}

.shoptet-col strong svg{
	display: block;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	margin-top: 5px;
	min-width: 24px;
	}

.shoptet-col strong span{
	display: block;
	flex-grow: 1;
	padding: 10px 0 0;
	line-height: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 1.3rem;
	}

.shoptet-col-cz strong span{
	font-size: clamp(0.95rem, 6.5cqw, 1.3rem);
	}

.shoptet-col-en strong span{
	font-size: clamp(0.75rem, 5.4cqw, 1.05rem);
	}

.shoptet-col-de strong span{
	white-space: normal;
	line-height: 115%;
	font-size: clamp(0.9rem, 6.5cqw, 1.3rem);
	}

.shoptet-col ul{
	list-style-type: square;
	color: rgb(148,163,184);
	line-height: 140%;
	padding-left: 25px;
	font-size: 0.9rem;
	}

.shoptet-col-cz ul,
.shoptet-col-en ul,
.shoptet-col-de ul{
	font-size: clamp(0.7rem, 4.5cqw, 0.9rem);
	}

.shoptet-col li{
	padding-right: 10px;
	padding-bottom: 10px;
	}

.shoptet-bottom{
	color: rgb(148,163,184);
	text-align: center;
	padding: 20px 10px 30px;
	line-height: 140%;
	container-type: inline-size;
	}

.shoptet-bottom a{
	color: var(--color-accent);
	}

.shoptet-bottom p{
	font-size: clamp(0.9rem, 5.5cqw, 1rem);
	}

.shoptet-examples{
	border: 1px solid #334155;
	background: var(--color-projects-bg);
	transition: all 0.3s ease-in-out;
	margin: 0 auto;
	border-radius: 0.75rem;
	margin: 30px auto auto;
	max-width: 97%;
	color: rgb(148,163,184);
	container-type: inline-size;
	}

.shoptet-examples:hover{
	border-color: var(--color-accent);
	transform: translateY(-5px);
	}

.shoptet-examples p{
	padding: 5px 15px 0 15px;
	color: var(--color-accent);
	font-size: 1.3rem;
	font-weight: 600;
	white-space: nowrap;
	font-size: clamp(0.65rem, 4.5cqw, 1.3rem);
	}

.shoptet-examples-de p{
	font-size: clamp(0.65rem, 3.85cqw, 1.3rem);
	}

.shoptet-examples ul{
	font-size: clamp(0.7rem, 4.5cqw, 0.9rem);
	margin-right: 15px;
	padding-left: 25px;
	list-style-type: square;
	}

.shoptet-examples li{
	padding-bottom: 5px;
	line-height: 120%;
	}

.shoptet-examples p{
	display: flex;
	}

.shoptet-examples span{
	display: block;
	padding: 3px 0 0 10px;
	}

.shoptet-examples svg{
	display: block;
	width: 24px;
	height: 24px;
	min-width: 24px;
	}

.shoptet-examples i{
	color: var(--color-accent);
	font-weight: 400;
	font-size: 0.75rem;
	font-style: normal;
	}


/*** /css/skills.css ***/
.skills{
	max-width: 1000px;
	padding: 80px 0 60px;
	}

.skills h3{
	text-align: center;
	font-size: 2.4rem;
	line-height: 100%;
	padding: 0;
	margin: 0;
	font-weight: 750;
	}


.skills-top p{
	text-align: center;
	font-size: 1.15rem;
	color: rgb(148,163,184);
	line-height: 140%;
	padding: 0 0 30px;
	}

.skills-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 3rem;
	cursor: default;
	}

.skills-list div{
	margin: auto;
	background: var(--color-projects-bg);
	border-radius: 10px;
	width: 95px;
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: all 0.3s ease-in-out;
	}

.skills-list div:hover{
	transform: scale(1.25);
	}

.skills-list span{
	display: block;
	padding: 0;
	text-align: center;
	white-space: nowrap;
	line-height: 100%;
	font-weight: 500;
	vertical-align: bottom;
	font-size: 0.5rem;
	vertical-align: bottom;
	width: 100%;

	}

.skills-list b{
	position: absolute;
	margin-top: -120px;
	}

.skills-list i{
	display: block;
	padding: 5px 0 0;
	text-align: center;
	width: 100%;
	font-size: 0.7rem;
	line-height: 120%;
	color: rgb(148,163,184);
	}

.skills-list-fs-22 i,
.skills-list-fs-23 i,
.skills-list-fs-24 i,
.skills-list-fs-25 i,
.skills-list-fs-26 i,
.skills-list-fs-27 i,
.skills-list-fs-28 i{
	font-size: 0.85rem;
	}


.skills-list-fs-1 span{font-size: 2.3rem;}
.skills-list-fs-2 span{font-size: 2.3rem;}
.skills-list-fs-3 span{font-size: 1.75rem;}
.skills-list-fs-4 span{font-size: 2.3rem;}
.skills-list-fs-5 span{font-size: 2.3rem;}
.skills-list-fs-6 span{font-size: 2.3rem;}
.skills-list-fs-7 span{font-size: 2.2rem;}
.skills-list-fs-8 span{font-size: 1.15rem;}
.skills-list-fs-9 span{font-size: 1.7rem;}
.skills-list-fs-10 span{font-size: 1.7rem;}
.skills-list-fs-11 span{font-size: 2.2rem;}
.skills-list-fs-12 span{font-size: 1.8rem;}
.skills-list-fs-13 span{font-size: 2rem;}
.skills-list-fs-14 span{font-size: 1.6rem;}
.skills-list-fs-15 span{font-size: 2.3rem;}
/*.skills-list-fs-16 span{font-size: 2.3rem;}*/
.skills-list-fs-16 span{font-size: 2rem;}
.skills-list-fs-17 span{font-size: 1.4rem;}
.skills-list-fs-18 span{font-size: 1.3rem;}
.skills-list-fs-19 span{font-size: 1.6rem;}
.skills-list-fs-20 span{font-size: 1.5rem;}
.skills-list-fs-21 span{font-size: 2.3rem;}
.skills-list-fs-22 span{font-size: 2.3rem;}
.skills-list-fs-23 span{font-size: 2.3rem;}
.skills-list-fs-24 span{font-size: 2.3rem;}
.skills-list-fs-25 span{font-size: 2.3rem;}
.skills-list-fs-26 span{font-size: 1.5rem;}
.skills-list-fs-27 span{font-size: 2.3rem;}
.skills-list-fs-28 span{font-size: 2.3rem;}



/*** /css/footer.css ***/
footer{
	border-top: 1px solid
#334155;
	background-color: black;
	}

.footer-in{
	display: flex;
	max-width: 1000px;
	margin: auto;
	padding: 20px 0 80px;
	}

.footer-left{
	margin-top: 0;
	}

footer .header-logo{
	margin-left: 0;
	}

.footer-left p{
	color: rgb(148,163,184);
	padding-left: 10px;
	margin: 3px auto auto;
	line-height: 140%;
	}

.footer-contact{
	margin-top: 25px;
	font-size: 1.0rem;
	line-height: 140%;
	}

.footer-contact strong{
	display: block;
	font-size: 1.15rem;
	padding: 0 0 5px;
	}

.footer-contact a{
	display: inline-block;
	color: white;
	text-decoration: none;
	}

.footer-contact a:hover{
	color: var(--color-accent);
	/*text-decoration: underline;*/
	}

.footer-contact p{
	color: #e2e8f0;
	line-height: 100%;
	display: flex;
	}

.footer-contact b{
	display: block;
	color: var(--color-accent);
	padding-right: 16px;
	width: 20px;
	text-align: center;
	}

.footer-contact p svg{
	display: block;
	width: 20px;
	height: 20px;
	margin-right: 15px;
	color: var(--color-accent);
	}