:root
{
	--schriftart1: 'Arial', 'Verdana';
	--groesse1: calc(10px + 0.5vw);
	--groesse2: calc(10px + 1.5vw);
	--groesse3: calc(10px + 0.1vw);
	--groesse4: calc(10px + 1.0vw);
	--farbe1: rgba(50, 50, 50, 1);
	--farbe2: rgba(255, 255, 255, 1);
	--farbe3: rgba(0, 0, 255, 1);
}



/* Grid */

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-gap: 4em;
  min-height: 100vh;
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}









body
{
	margin: 2em;
	background-color: var(--farbe2);
	
	font-family: var(--schriftart1);
	font-size: var(--groesse1);
	line-height: 1.3em;
}

img
{
	max-width: 100%;
}

a
{
	color: var(--farbe1);
	text-decoration: none;
}




footer
{
	font-size: var(--groesse3);
	color: var(--farbe4);
}

footer > a
{
	color: var(--farbe4);
}

h1
{
	margin: 0;
	font-weight: normal;
	font-size: 	var(--groesse2);
	line-height: 1.3em;
}



nav
{
	display: flex;
	flex-direction: column;
	text-transform: lowercase;
	font-size: var(--groesse2);
	line-height: 1.3em;
}


nav img
{
	height: 1em;
	margin-top: 1em;
}

nav a.aktuell
{
	color: var(--farbe3);
}







div.teaserArbeiten
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 6em 2em;
	place-items: center; 
	text-align: center;
}

div.teaserArbeit img
{
	object-fit: contain;
	max-height: 90vh;
	width: 100%;
	padding: 0 3em 1em 3em;
	box-sizing: border-box;
}




article.grossesbild
{
	display: grid;
	grid-template-rows: 90vh auto;

	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;

	background-color: var(--farbe2);	
}

main img.textbild
{
	max-width: 100%;
}

article.grossesbild img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 25px 50px 25px 50px;
	box-sizing: border-box;
}

article.grossesbild>span
{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding: 0px 50px 50px 50px;
	text-align: center;
}

@media only screen and (max-width: 640px)
{
	
	body{
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
	min-height: auto;
	}
	
	div.teaserArbeiten
	{
		grid-template-columns: repeat(1, 1fr);	
	}
	
	header
	{
		grid-template-columns: 1fr;
	}
}



@font-face
{
	font-family: 'Red Hat Mono';
	src: local('Red Hat Mono Light'), local('Red Hat Mono Light'), url('/dateien/RedHatMono-VariableFont_wght.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face
{
	font-family: 'Quicksand';
	src: local('Quicksand Light'), local('Quicksand-Light'), url('/dateien/Quicksand-VariableFont_wght.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}



@font-face
{
	font-family: 'Gothic A1';
	src: local('Gothic A1 Light'), local('GothicA1-Light'), url('/dateien/GothicA1-Light.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face
{
	font-family: 'Gruppo';
	src: local('Gruppo Regular'), local('Gruppo-Regular'), url('/dateien/Gruppo-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}


@font-face
{
	font-family: 'Poppins';
	src: local('Poppins Bold'), local('Poppins-Bold'), url('/dateien/Poppins-Bold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face
{
	font-family: 'Poppins';
	src: local('Poppins Regular'), local('Poppins-Regular'), url('/dateien/Poppins-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face
{
	font-family: 'Poppins';
	src: local('Poppins Light'), local('Poppins-Light'), url('/dateien/Poppins-Light.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}

@font-face
{
	font-family: 'Poppins';
	src: local('Poppins Extra Light'), local('Poppins-ExtraLight'), url('/dateien/Poppins-ExtraLight.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face
{
	font-family: 'Poppins';
	src: local('Poppins Thin'), local('Poppins-Thin'), url('/dateien/Poppins-Thin.ttf') format('truetype');
	font-weight: 50;
	font-style: normal;
}