/*================================================================*/
/* General Setup                                                  */
/*================================================================*/

/* Fonts */
@import "font/fonts.css";


/* Effects */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Reset spacing */
* {
    padding: 0;
    margin: 0;
}

/* Scrolling */
html {
	/*scroll-snap-type: y mandatory;*/
	scroll-behavior: smooth;
    overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: 100%;
	
    --scrollbarBG: #CFD8DC;
    --thumbBG: #90A4AE;
	
	--homeimg: url(img/home-HD.jpg);
	--contactimg: url(img/contact-HD.jpg);
}

/* High Resolution Images */
@media  screen and (-webkit-min-device-pixel-ratio: 2),
		screen and (min-resolution: 192dpi),
		screen and (min-resolution: 2dppx) {
			html {
				--homeimg: url(img/home-4k.jpg);
				--contactimg: url(img/contact-4k.jpg);
			}
}

body {
    animation: fadein 2s;
	font-family: Reforma2018;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}
    
/*================================================================*/
/* Sections                                                       */
/*================================================================*/
section {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	
	padding-left: calc(((100% - (43em + 6vw)) / 2));
	padding-right: calc(((100% - (43em + 6vw)) / 2));
	padding-bottom: 2.5em; 
	
	background-color: lightyellow;
	background-size: cover;
}

@media (max-width: 48.5em) {
	section {
		padding-left: 0.8em;
		padding-right: 0.8em;
	}
}

/* Fixed background for mobile devices */
@media (hover: none) {
	#home::before {
		content: ""; 
		position: fixed; 
		top: 0; 
		left: 0; 
		height: 100vh; 
		width: 100%; 
		background-size: cover; 
		background-image: var(--homeimg);
		background-position: 42% 15%;
		z-index: -1;
		animation: fadein 1s;
	}
	#home {
		background-color: transparent;
	}
}

/* Home background where 'background-attachment: fixed' is supported */
@media (hover: hover) {
	#home {
		background-attachment: fixed;
		background-image: var(--homeimg);
		background-position: 42% 15%;
	}
	#contact {
		background-attachment: fixed;
	}
}

#home {
	height: 100vh;
	padding: 0;
}

/* Section specific settings */
#work {
	padding: 0;
}
    
#about {
   	padding-bottom: 1em;
}

#immersive {
   	padding-bottom: 4em;
}

#contact {
	height: 100vh;
	background-image: var(--contactimg);
	background-position: 8% 50%;
}

#contact h3 {
	color: white;
	text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

@media (max-width: 77vh) {
	#contact {
		justify-content: flex-end;
	}
}

#impressum {
	align-items: flex-start;
	scroll-snap-align: none;
}


/*================================================================*/
/* Text Styles                                                    */
/*================================================================*/

/* Links */
a {
    color: darkblue;
    text-decoration: none;
}

/* Name heading */
h1 { 
    font-family: TitleFont, Times, Times New Roman, Serif; 
    font-size: 2.1em;
	font-weight: normal;
	line-height: 1em;
	color: white;
}

h2 { 
	font-family: Reforma2018;
    font-size: 1.1em; 
	font-weight: 300;
	color: white;
}

@media screen and (min-width: 20em) {
	h1 {
		font-size: calc(2.1em + (3.4 - 2.1) * ((100vw - 20em) / (80 - 20)));
	}
	h2 {
		font-size: calc(1.1em + (1.85 - 1.1) * ((100vw - 20em) / (80 - 20)));
	}
}

@media (min-width: 80em)
{
	h1 {
		font-size: 3.4em;
	}
	h2 {
		font-size: 1.85em;
	}
}

#name {
	animation: fadein 2s;
	text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
	text-align: left;
	padding-top: 14vh;
 	padding-left: 30%;
 	padding-right: 1em;
}

@media (orientation: portrait)
{
	#name {
		padding-left: 1em;
	}
}


/* Section headings */
h3 { 
    font-family: TitleFont, Times, Times New Roman, Serif; 
	font-variant-ligatures: discretionary-ligatures;
    font-size: 2.1em; 
	font-weight: normal;
	
	margin-top: 2em;
	margin-bottom: 0.7em;
}

@media screen and (min-width: 20em) {
	h3 {
		font-size: calc(2.1em + (3 - 2.1) * ((100vw - 20em) / (80 - 20)));
	}
}

@media (min-width: 80em)
{
	h3 {
		font-size: 3em;
	}
}

/* Section sub headings */
h4 { 
    font-family: TitleFont, Times, Times New Roman, Serif; 
	font-variant-ligatures: discretionary-ligatures;
    font-size: 1.8em; 
	font-weight: normal;
	
	padding-top: 1.5em;
	margin-bottom: 0.5em;
}

@media screen and (min-width: 20em) {
	h4 {
		font-size: calc(1.8em + (2.2 - 1.8) * ((100vw - 20em) / (80 - 20)));
	}
}

@media (min-width: 80em)
{
	h4 {
		font-size: 2.2em;
	}
}

/* Sub sub headings for Impress */
h5 {
	font-family: Reforma2018;
    font-weight: 500; 
	font-variant-numeric: lining-nums;
    font-size: 1.1em; 
}

@media screen and (min-width: 20em) {
	h5 {
		font-size: calc(1.1em + (1.5 - 1.1) * ((100vw - 20em) / (80 - 20)));
	}
}

@media (min-width: 80em)
{
	h5 {
		font-size: 1.5em;
	}
}

/* Contact Email */
h6 {
	font-family: Reforma2018;
    font-weight: 500; 
    font-size: 1.3em; 
	margin: 1em;
}

h6 a {
	color: white;
	text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

@media screen and (min-width: 20em) {
	h6 {
		font-size: calc(1.3em + (2 - 1.3) * ((100vw - 20em) / (80 - 20)));
	}
}

@media (min-width: 80em)
{
	h6 {
		font-size: 2em;
	}
}

/* Button container */
h7 {
	font-family: Reforma2018;
	font-size: 1.1em;
	font-weight: 300;
	margin-top: 2em;
	margin-bottom: 2em;
	align-self: center;
} 

/* Textblock style definition */
p {	
	font-family: Reforma2018;
	font-weight: 300;
	font-size: 1.1em;
    line-height: 1.3em;
	margin-bottom: 1em;
	
	text-align: justify;
	-webkit-hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;
    -webkit-hyphenate-limit-zone: 8%;     
	-moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;    
	-ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;
    -ms-hyphenate-limit-zone: 8%;     
	hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
    word-wrap: break-word;
	/* font-variant-numeric: lining-nums; */
}

@media screen and (min-width: 20em) {
	p {
		font-size: calc(1.1em + (1.4 - 1.1) * ((100vw - 20em) / (100 - 20)));
		line-height: calc(1.3em + (1.4 - 1.3) * ((100vw - 20em) / (100 - 20)));
	}
}

@media (min-width: 100em)
{
	p {
		font-size: 1.4em;
		line-height: 1.4em;
	}
}

em {
	font-weight: 300;
    font-style: italic; 
}

/* Buttons */
a.button {
	color: white;
	text-shadow: 1px 1px 3px black;
	display: inline-block;
    padding: 0.1em 0.7em 0.2em 0.7em;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.2);
    transition: 0.5s;
}
a.button:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
} 

/*================================================================*/
/* Language Selector                                              */
/*================================================================*/
input[type=radio] {
	display: none;
	
}

label.lang {
	cursor: pointer;
	position: fixed;
	z-index: 20;
	padding-top: 0.5em; 
	margin-left: 1em;
	color: grey;
	font-weight: 300;
}

label.sec {
	margin-left: 3em;
} 

@media (hover: hover) {
	label.lang:hover {
		color: white;
	}
}

input[type=radio]:checked+label.lang {
	font-weight: 700;
}

#en:checked ~ section .en{
   display: block;
}

#en ~ section .en{
   display: none;
}

#en:checked ~ section .de{
  display: none;
}

#de ~ section .de{
  display: none;
}

#de:checked ~ section .en{
  display: none;
}

#de:checked ~ section .de{
  display: block;
}


#en:checked ~ nav ul .en{
   display: block;
}

#en ~ nav ul .en{
   display: none;
}

#en:checked ~ nav ul .de{
  display: none;
}

#de ~ nav ul .de{
  display: none;
}

#de:checked ~ nav ul .en{
  display: none;
}

#de:checked ~ nav ul .de{
  display: block;
}

/*================================================================*/
/* Navigation                                                     */
/*================================================================*/
nav {
    position: fixed; 
    right: 0;
    z-index: 10;
	
	font-family: Reforma2018;
    font-size: 1.1em;
    font-weight: 500;
}

nav ul {
	list-style-type: none;
	
	float: right; clear: right;
	width: 0;
	overflow: hidden;
	
	display: flex;
	justify-content: center;	
    
    transition: width 0.3s ease;
	background-color: rgba(255, 255, 245, 0.9);
	box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

nav a { 
	color: black;
    display: block;
	padding: .5em;
	padding-left: 3vw;
	padding-right: 3vw;
    transition: 0.25s;
}   

@media (hover: hover) {    
	nav a:hover {
		background-color: rgba(0, 0, 0, 0.6);
		color: white;
		transition: 0.2s;
	}
}

/* Toggle mechanism */    
label.expand {
	color: grey;
	position: fixed;
    right: 0;
	z-index: 10;
	margin-top: 0.1em;
	margin-right: 1em;
    font-size: 1.5em;
    cursor: pointer;
    transition: transform 0.5s, color 0.3s;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

input#menu {
    display: none;
}
input:checked ~ ul {
    width: 100vw;
}    
input:checked ~ label.expand {
    transform: rotate(-45deg);
}

@media (hover: none) {
	input:checked ~ label.expand {
		color: red;
	}
}

@media (hover: hover) {
	label.expand:hover {
		color: white;
	}
	input:checked ~ label.expand:hover {
    color: red;
} 
}

/* Column navigation for portrait orientation */
@media (orientation: portrait) {
	nav ul {
		flex-direction: column;
	}
	input:checked ~ ul {
		width: 7em;
    } 
}
	
	
/*================================================================*/	
/* Gallery                                                        */
/*================================================================*/
ul.gallery {
    position: relative;
    overflow-x: scroll;
    white-space: nowrap;
    max-width: calc(135vh + 13vw);
    margin: 0 auto;
	padding-bottom: 1em;
	-webkit-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
	
	background:
		linear-gradient(90deg, lightyellow 0%, rgba(255,255,255,0)),
		linear-gradient(-90deg, lightyellow 0%, rgba(255,255,255,0)) 100% 0,
		radial-gradient(
			farthest-side at 0% 50%,
			rgba(0,0,0,.2),
			rgba(0,0,0,0)),
		radial-gradient(
			farthest-side at 100% 50%,
			rgba(0,0,0,.2),
			rgba(0,0,0,0)) 100% 0%;
	background-repeat: no-repeat;
	background-color: rgba(0,0,0,0);
	background-size: 100px 100%, 100px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

ul.gallery li {
    display: inline-block;
    position: relative;
    height: 45vh;
    width: 45vh;
    margin: 2vw;
	overflow: hidden;
	-webkit-scroll-snap-align: center;
    scroll-snap-align: center;
	box-shadow: 0 .7vw 1.6vw .2vw rgba(0,0,0,0.3);	
}

@media (max-width: 180vh) {
	ul.gallery {
		max-width: 91vw;
	} 
	ul.gallery li {
		margin: 1.5vw;
		height: 27vw;
		width: 27vw;
		box-shadow: 0 .5vw 1.3vw .1vw rgba(0,0,0,0.23);
	}
}

@media (max-width: calc(90vh)) {
	ul.gallery {
		max-width: 90vw;
	} 
	ul.gallery li {
		height: 38vh;
		width: 38vh;
		box-shadow: 0 0.8vw 1.7vw .2vw rgba(0,0,0,0.35);
	}
}

ul.gallery li img {
	height: 100%;
	width: 100%;
    object-fit: cover;
	object-position: center;
}

ul.gallery li a {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	
	padding-top: 79%;
	font-family: Reforma2018;
	font-weight: 500;
	font-size: 0.6em;
	line-height: 1.1em;
	text-align: center;
	color: rgba(240,240,240,0.95);
	text-shadow: 0 0 4px darkgrey;
}

@media screen and (min-width: 20em) {
	ul.gallery li a {
		font-size: calc(0.6em + (1.5 - 0.6) * ((100vmax - 20em) / (100 - 20)));
	}
}

@media (min-width: 100em)
{
	ul.gallery li a {
		font-size: 2em;
	}
}

ul.gallery li::before {
    content: '';
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    width: 150%;
    padding-bottom: 150%;
	
    box-shadow: inset 0px 0px 8em 1em rgba(0,0,0,0.8);
	mix-blend-mode: darken;
    border-radius: 50%;
	
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

ul.gallery li::after {
	content: '';
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    width: 150%;
    padding-bottom: 150%;
	
	background-size: 30%;
	background-position: center;
	background-repeat: no-repeat;
    
	opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

ul.gallery li.yt::after {
	background-image: url("img/yt_play.svg");
}

ul.gallery li.br::after {
	background-image: url("img/br_klassik.svg");
}

@media (hover: hover) {
	ul.gallery li:hover::before {
		opacity: 0;
	}
	ul.gallery li:hover::after {
		opacity: 0.8;
	}
}

@media (hover: none) {
	ul.gallery li::before {
		opacity: 0;
	}
	ul.gallery li::after {
		opacity: 0.8;
	}
}

ul.gallery::-webkit-scrollbar-track
{
	background-color: var(--scrollbarBG);
	border-radius: 10px;
}

ul.gallery::-webkit-scrollbar
{
    height: 0.7em;
    background-color: var(--scrollbarBG);
}

ul.gallery::-webkit-scrollbar-thumb
{
    background-color: var(--thumbBG);
	border: 2px solid var(--scrollbarBG);
	border-radius: 10px;
}