@charset "utf-8";

:root {
	--noxblack: #091018;
	--noxdarkblue: #1E2832;
	--noxgraygreen: #455459;
	--noxlightgray: #AAA;
	--noxwhite: #F8F8F7;
}

html, body{
	height: 100%;
	margin: 0px;
}

h1, h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-style: italic;
	text-transform: uppercase;
	text-align: center;
}

h1 {
	margin: 24px 0px;
	font-size: 19px;
	font-size: 6.0vw;
	line-height: 19px;
	line-height: 6.0vw;
}

h2 {
	margin: 24px 0px;
	font-size: 48px;
	font-size: 6.0vw;
	line-height: 48px;
	line-height: 6.0vw;
}

h3 {
	margin: 0px 0px 13px;
	margin: 0px 0px 3.5vw;
	font-family: 'Noto Serif SC', serif;
	font-weight: 900;
	font-size: 21px;
	font-size: 6.0vw;
	line-height: 27px;
	line-height: 7.5vw;
}

h4 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 5mm;
	line-height: 9mm;
	text-align: center;
}

h5 {
	margin: 0px 0px 18px;
	margin: 0px 0px 6.0vw;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-style: italic;
	font-size: 13px;
	font-size: 3.5vw;
	line-height: 23px;
	line-height: 4.5vw;
	letter-spacing: 1pt;
	letter-spacing: 0.3vw;
}
	
p {
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

a {
	text-decoration: none;
	color: inherit;
	transition: 0.3s;
	z-index: 80;
	display: block;
}

a:hover, a:focus, a:active{
	color: var(--noxwhite)
}

img {
	width: 100%;
	display: block;
	transition: 0.3s;
}

.bg-text-dark{
	background-color: var(--noxblack);
}

.bg-text-light{
	background-color: var(--noxwhite);
}

.bg-dark {
	background-image: url("/data/darkblue.png");
	background-size:  100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.bg-light {
	background-image: url("/data/light.png");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

h1.dark, h2.dark, h3.dark, h4.dark, a.dark{
	color: var(--noxwhite);
}

ul.dark{
	color: var(--noxlightgray);
}

h5.dark, p.dark {
	 color: var(--noxlightgray);
 }

a.dark{
	border: 1px solid var(--noxlightgray);
}

h1.light, h2.light, h3.light, h4.light, a.light, ul.light{
	color: var(--noxblack);
}

h1.profil {
	text-transform: none;
}

a.light{
	border: 1px solid var(--noxgraygreen);
}

/* "mehr" - Button with fine border line*/
a.btn {
	display: block;
	padding: 18px 0px;
	margin: 0px 0px 24px 0px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-style: italic;
	font-size: 15px;
	line-height: 18px;
	text-align: center;
	vertical-align: center;
	text-decoration: none;
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
}

a.btn:hover, a.btn:active {
	box-shadow: 0px 0px 7px rgba(9, 16, 24, 0.7);
	border-color: rgba(0, 0, 0, 0.0);
}

.img-btn {
	border-radius: 10px;
}

/*all images that can be clicked - "filter" don't ignore the png shape, like "box shadow"*/
.img-btn:hover, .img-btn:active {
	filter: drop-shadow(0px 0px 5px rgba(9, 16, 24, 0.7))
}

/*all images that can be clicked - "filter" don't ignore the png shape, like "box shadow"*/
.img-btn-dark:hover, .img-btn-dark:active {
	filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1.0))
}

/*for ux images, because they were shown as bg img, not as normal img*/
.div-btn:hover, .div-btn:active {
	box-shadow: 0px 0px 5px rgba(9, 16, 24, 0.7);
}

a.full_logo {
	display:block;
	position: relative;
	top: 50%;
	bottom: 50%;
	width: 50%;
	margin: 0 auto;
}

a.in_div {
	display: inline-block;
	width: 100%;
	height: 100%;
}

p.box {
	font-size: 14px;
	font-size: 4vw;
	line-height: 16px;
	line-height: 5.5vw;
}

p.profil {
	margin: 0px 0px 12px;
	font-size: 14px;
	font-size: 4.0vw;
	font-style: italic;
	line-height: 16px;
	line-height: 5.0vw;
	text-align: center;
}

img.profil {
	border-radius: 50%;
}

ul.sitemap {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	list-style: none;
	font-size: 5mm;
	line-height: 9mm;
	margin: 0px;
	padding: 0px;
	z-index: 81;
	text-align: center;
}

.navbar {
	width: 10mm;
	height: auto;
	position: fixed;
	right: 0px;
	margin: 24px;
	margin: 1.5vw;
	opacity: 0.0;
	display: block;
	visibility: hidden;
	transition: 0.5s;
	z-index:99;
	cursor: pointer;
}

#full_logo {
	height: auto;
	opacity: 1.0;
	display: inline-block;
	visibility: visible;
	transition: 0.5s;
	z-index:0;
}

#short_logo {
	top: 0px;
	left: 0px;
}

#menu {
	top: 0px;
}

#close {
	top: 0px;
}

#nav{
	display: none;
}
	#nav ~ label{
		display: none;
	}
	#nav:not( :checked ) ~ label:first-of-type, #nav:checked ~ label:last-of-type{
		display: block;
	}
	
	#nav ~ div{
        opacity: 0;
		visibility: hidden;
		position: fixed;
        top: 0;
		bottom: 0;
		text-align: center;
        transition-duration: 0.4s;
		background-color: rgba(9, 16, 24, 0.9)
    }

	#nav:checked ~ div{
		opacity: 1;
		visibility: visible;
	}
	
#menu_bar {
	top: 0px;
	left: 0px;
	height: 14mm;
	width: 100%;
	position: fixed;
	background-color: var(--noxdarkblue);
	visibility: hidden;
	opacity: 0.0;
	z-index:80;
}

a.menu {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 5mm;
	line-height: 10mm;
	color: var(--noxlightgray);
	margin: 0px;
	padding: 0px;
	width: 100%;
	display: inline-block;
	z-index: 81;
}

a.menu:hover, a.menu:focus, a.menu:active{
	color: var(--noxwhite)
}
	
img.menu {
	width: 100%;
	display: inline-block;
	width: 50%;
}

svg.menu-horizontal {
	height: 10mm;
	width: 75%;
	margin: 12px;
	z-index: 98;
}

svg.menu-vertikal {
	height: 1px;
	width: 20%;
	visibility: hidden;
	display: none;
}


div.s_btn{
	width: 100%;
	height: auto;
	display: flex;
	margin: 36px 0;
	justify-content: center;
}	

a.s_btn {
	width: 10mm;
	display: block;
	margin: 9px;
	margin: 2.5vw;
	z-index: 79;
}

div.header-main {
	height: 100%;
	background-attachment: fixed;
}

.grid-main{
	display: grid;
	padding: 36px 36px;
	justify-self: center;
	grid-gap: 12px;
	grid-gap: 4.0vw;
}

.grid-contact{
	padding: 36px 36px 48px 36px;

}

.grid-text{
	display: block;
	max-width:100%;
	padding: 18px;
	margin: 0 0 12px;
}

.grid-2-col-img {
	height:300px;
	width:100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
}

.relative {
	position: relative;
}

.grid-container-start{
	background-color: var(--noxwhite);
	grid-template-areas:
	'. pimg .'
	'name name name'
	'btn0 btn0 btn0';
	grid-template-columns: 1fr 1fr 1fr;
}
.grid-item-profilimg{grid-area: pimg;}
.grid-item-name{grid-area: name;}
.grid-item-btn0{grid-area: btn0;}

.grid-container-bd{
	background-color: var(--noxdarkblue);	
	grid-template-areas:
	'head1'
	'bd1'
	'bd1t'
	'bd2'
	'bd2t'
	'bd3'
	'bd3t'
	'btn1';
	grid-template-columns: 1fr;
}
.grid-item-head1{grid-area: head1;}
.grid-item-bd1	{grid-area: bd1;}
.grid-item-bd1t	{grid-area: bd1t;}
.grid-item-bd2	{grid-area: bd2;}
.grid-item-bd2t	{grid-area: bd2t;}
.grid-item-bd3	{grid-area: bd3;}
.grid-item-bd3t	{grid-area: bd3t;}
.grid-item-btn1	{grid-area: btn1;}

.grid-container-ux{
	background-color: var(--noxlightgray);
	grid-template-areas:
	'head2'
	'ux1'
	'ux1t'
	'ux2'
	'ux2t'
	'btn2';
	grid-template-columns: 1fr;
	grid-template-rows: max-content;
}
.grid-item-head2{grid-area: head2;}
.grid-item-ux1	{grid-area: ux1;
	background-color: #5b1126;
	background-image: url("/data/uxui/thumbnail-ux-ui-design-robert-sterl-haus.jpg");
	border-radius: 10px;
}
.grid-item-ux1t	{grid-area: ux1t;}

.grid-item-ux2	{grid-area: ux2;
	background-color: #595a5b;
	background-image: url("/data/uxui/thumbnail-ux-ui-design-thoma-architekten.jpg");
	border-radius: 10px;
}
.grid-item-ux2t	{grid-area: ux2t;}

.grid-item-btn2	{grid-area: btn2;}

.grid-container-ed{
	background-color: var(--noxdarkblue);
	grid-template-areas:
	'head3'
	'ed1'
	'ed1t'
	'ed2'
	'ed2t'
	'btn3';
	grid-template-columns: 1fr;
}
.grid-item-head3{grid-area: head3;}
.grid-item-ed1	{grid-area: ed1;}
.grid-item-ed1t	{grid-area: ed1t;}
.grid-item-ed2	{grid-area: ed2;}
.grid-item-ed2t	{grid-area: ed2t;}
.grid-item-btn3	{grid-area: btn3;}

.grid-container-more{
	background-color: var(--noxdarkblue);
	grid-template-areas:
	'head5'
	'gd'
	'gdt'
	'btn5'
	'head6'
	'illu'
	'illut'
	'btn6'
	'head7'
	'c'
	'ct'
	'btn7';
	grid-template-columns: 1fr;
}
.grid-item-head4{grid-area:head4;}
.grid-item-d3	{grid-area: d3;}
.grid-item-d3t	{grid-area: d3t;}
.grid-item-btn4	{grid-area: btn4;}

.grid-item-head5{grid-area:head5;}
.grid-item-gd	{grid-area: gd;}
.grid-item-gdt	{grid-area: gdt;}
.grid-item-btn5	{grid-area: btn5;}

.grid-item-head6{grid-area:head6;}
.grid-item-illu	{grid-area: illu;}
.grid-item-illut{grid-area: illut;}
.grid-item-btn6	{grid-area: btn6;}

.grid-item-head7{grid-area:head7;}
.grid-item-c	{grid-area: c;}
.grid-item-ct	{grid-area: ct;}
.grid-item-btn7	{grid-area: btn7;}

.grid-container-contact{
	background-color: var(--noxwhite);
	grid-template-areas:
	'head8 head8 head8'
	'. con .'
	'cont cont cont'
	'btn8 btn8 btn8';
	grid-template-columns: 1fr 1fr 1fr;
}
.grid-item-head8{grid-area:head8;}
.grid-item-con	{grid-area: con; align-self: center;}
.grid-item-cont	{grid-area: cont;}
.grid-item-btn8	{grid-area: btn8;}

.grid-container-sitemap{
	background-color: var(--noxdarkblue);
	grid-template-areas:
	'smhead'
	'sm1'
	'sm2';
	grid-template-columns: 1fr;
}
.grid-item-sitemap{grid-area:smhead;}
.grid-item-sm1	{grid-area: sm1;}
.grid-item-sm2	{grid-area: sm2;}

/*grid for menu*/

.grid-list {
	display: grid;
	padding: 48px 15mm 48px 48px;
	width: auto;
	height: auto;
	z-index: 81;
	grid-template-areas:
	'mbd'
	'mux'
	'med'
	'mgd'
	'millu'
	'mc'
	'mline'
	'mpimg'
	'mp';
	grid-template-columns: 1fr;
}

.grid-center {
	align-self: center;
	height:100%;
	width: 100%;
}

.menu-bd{grid-area:mbd;}
.menu-ux{grid-area:mux;}
.menu-ed{grid-area:med;}
.menu-gd{grid-area:mgd;}
.menu-illu{grid-area:millu;}
.menu-c{grid-area:mc;}
.menu-line{grid-area:mline;
	width: 100%;
	justify-self: center;
}
.menu-profilimg{grid-area:mpimg;}
.menu-profil{grid-area:mp;}

/*Overview*/

h1.overview-head {
	display: block;
	bottom: -50%;
	position: relative;
}

div.overview {
	margin-bottom: 24px;
	margin-bottom: 4.0vw;
	display: block;
	position: relative;
}

.grid-container{
	background-color: var(--noxdarkblue);	
	grid-template-columns: 1fr;
	grid-column-gap: 4.0vw;
	grid-row-gap: 3.5vw;
}

img.expand {
	position: absolute;
	width: 10vw;
	bottom: 0;
	right: 0;
}

div.overview-grid {
	display: flex;
	flex-direction: column;
	height: 100%;
	align-content: start;
}

.overview-btn {
	grid-column: 2;
	
}

.gap {
	margin-bottom: 12px;
	margin-bottom: 4.0vw;
}

/*Detailansicht*/

.detail {
	display: grid;
	grid-template-columns: 13mm auto 13mm;
	justify-self: stretch;
	padding: 13mm 0;
	grid-gap: 0;
	grid-row-gap: 12px;
	grid-row-gap: 4.0vw;
}

a.arrow {
	display: block;
	margin: 24px;
	margin: 1.5vw;
	min-width:10mm;
	cursor: pointer;
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: 50%;
	z-index:79;
}

.tapete {
	display: block;
}

.detail-text {
	margin: 24px 0;
	margin: 4.0vw 0; 
}

/*Profil*/

.grid-profil {
	display: grid;
	grid-template-columns: 1fr;
	justify-self: stretch;
	grid-gap: 44px 62px;
	grid-gap: 10.0vh 6.0vw;
}

.profil-detail {
	text-align: left;
}

.profil-detail-img {
	margin: 5vh 0 5vh;
	display: block;
	justify-content: center;
}

h1.profil-detail {
	margin: 0 0 36px;
	text-align: center;
}

p.profil-detail {
	font-size: 2.5vh;
}

div.profil-detail {
	margin: 5vh 0 5vh;
	display: flex;
	justify-content: center;
}

img.profil-detail {
	border-radius: 50%;
	max-width: 50%;
	margin: auto;
}

.skill-bar {
	height: 20px;
	width: 100%;
	align-self: center;
	display: block;
	margin: 0px 0 10px;
	stroke-width: 3px;
	stroke: var(--noxlightgray);
	fill: none;
}

line.skill-bar {
	display: block;
	stroke-linecap: round;
}

/*Datenschutz*/

div.datenschutz p a {
	font-weight: 600;
	color: inherit;
}

div.datenschutz p a:hover  {
	color: var(--noxlightgray);
}

a[href^="http"] {
  color: var(--noxgraygreen);
  font-weight: 900;
  font-style: italic;
  display: inline;
}

.dark a {
	color: var(--noxwhite);
}

div.datenschutz h3 {
	margin: 0;
}

a.intext {
  color: var(--noxwhite);
  font-weight: 900;
  font-style: italic;
  display: inline;	
}

a.intext-dark {
  color: var(--noxwhite);
  font-weight: 900;
  font-style: italic;
  display: inline;	
}