@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: 3.0vw;
	line-height: 19px;
	line-height: 3.0vw;
}

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

h3 {
	margin: 0px 0px 18px;
	margin: 0px 0px 1.8vw;
	font-family: 'Noto Serif SC', serif;
	font-weight: 900;
	font-size: 14px;
	font-size: 2.2vw;
	line-height: 20px;
	line-height: 3.0vw;
}

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

h5 {
	margin: 0px 0px 18px;
	margin: 0px 0px 2.5vw;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-style: italic;
	font-size: 11px;
	font-size: 1.7vw;
	line-height: 23px;
	line-height: 3.0vw;
	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;
	width: 100%;
	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: 33%;
	margin: 0 auto;
}

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

p.box {
	font-size: 12px;
	font-size: 1.8vw;
	line-height: 15px;
	line-height: 2.4vw;
}

p.profil {
	margin: 0px 0px 12px;
	font-size: 15px;
	font-size: 2.3vw;
	font-style: italic;
	line-height: 18px;
	line-height: 2.7vw;
	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;
}

.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;
}

#menu {
	top: 6.0vw;
}

#close {
	top: 6.0vw;
}

#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;
	}

a.menu {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 18px;
	font-size: 3.0vw;
	line-height: 42px;
	line-height: 6.5vw;
	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;
}

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

svg.menu-vertikal {
	height: 100%;
	width: 100%;
	margin: 0 50%;
	z-index: 98;
}

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

a.s_btn {
	width: 10mm;
	display: block;
	margin: 3px;
	margin: 0.5vw;
}

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

.grid-main{
	display: grid;
	padding: 48px 68px 48px 48px;
	justify-self: center;
	grid-gap: 24px;
	grid-gap: 1.5vw;
}

.grid-contact{
	padding: 120px 120px 48px 120px;
	padding: 7vw 7vw 3vw 7vw;
}

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

.grid-2-col-img {
	width:100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.relative {
	position: relative;
}

.grid-container-start{
	background-color: var(--noxwhite);
	grid-template-areas:
	'. . . . . pimg pimg . . . . .'
	'. . . . name name name name . . . .'
	'. . . . btn0 btn0 btn0 btn0 . . . .';
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 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 head1 head1'
	'bd1 bd2 bd3'
	'bd1t bd2t bd3t'
	'btn1 btn1 btn1';
	grid-template-columns: 1fr 1fr 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 head2 head2'
	'ux1 ux1 ux1t'
	'ux2t ux2 ux2'
	'btn2 btn2 btn2';
	grid-template-columns: 1fr 1fr 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 head3 '
	'ed1 ed2'
	'ed1t ed2t'
	'btn3 btn3';
	grid-template-columns: 1fr 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 head6 head7'
	'gd illu c'
	'gdt illut ct'
	'btn5 btn6 btn7';
	grid-template-columns: 1fr 1fr 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 head8 head8 head8 head8 head8 head8 head8 head8 head8'
	'. . con con con . cont cont cont cont . .'
	'. . . . btn8 btn8 btn8 btn8 . . . .';
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 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 1fr;
}
.grid-item-sitemap{grid-area:smhead;}
.grid-item-sm1	{grid-area: sm1;}
.grid-item-sm2	{grid-area: sm2;}

/*grid for menu and sitemap*/

.grid-list {
	display: grid;
	padding: 48px 15mm 48px 48px;
	width: auto;
	height: auto;
	z-index: 81;
	grid-template-areas:
	'mpimg mpimg mline mbd mbd mbd mbd'
	'mpimg mpimg mline mux mux mux mux'
	'mpimg mpimg mline med med med med'
	'mpimg mpimg mline mgd mgd mgd mgd'
	'mp mp mline millu millu millu millu'
	'mp mp mline mc mc mc mc';
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 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: 1.5vw;
	display: block;
	position: relative;
}

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

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

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

.stretch {
	height: 100%;
}

.gap {
	margin-bottom: 24px;
	margin-bottom: 1.5vw;
}

/*Detailansicht*/

.detail {
	display: grid;
	grid-template-columns: 13mm auto 13mm;
	justify-self: stretch;
}

a.arrow {
	display: block;
	min-width:10mm;
	cursor: pointer;
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: 50%;
}

.tapete {
	display: block;
}

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

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

/*Profil*/

.grid-profil {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-self: stretch;
	grid-gap: 24px 62px;
	grid-gap: 10vh 6.0vw;
	padding-top: 10vh;
}

.grid-item-profil {
	grid-column: 2 / span 2;
}

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

h1.profil-detail {
	margin: 0 0 48px;
}

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

div.profil-detail {
	margin: 24px 0 64px;
}

img.profil-detail {
	margin: 0 0 7vw;
	border-radius: 50%;
}

.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;	
}