@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kufam:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

:root
{
	--bg-color: #FFFFFF;
	--typo-color: #000000;
}

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


.typoNormal
{
	line-height: 1.4em;
	font-size: 16px;
}


.inner
{
	max-width: 1920px;
	margin: 0 auto;
}



.login
{
	height: 100vh;
	background-color: #FFFFFF;
	background-size: cover;
	background-position:  center center;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000000;
}

.login .box
{
	background: rgba(0,0,0,.7);
	margin: 0 auto;
	width: 100%;
	max-width: 350px;
	padding: 2em;
}

.login input
{
	width: 100%;
	box-sizing: border-box;
	padding: .5em;
	margin: .5em 0;
}


.login .error
{
	color: red;
	background: #000000;
	padding: .5em;
}


.logout
{
	font-size: .8em;
	text-align: right;
}

.logout a
{
	color: #FFFFFF;
}

header
{
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #000000;
	color: #FFFFFF;
	padding: 1em;

}

header .inner
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

header nav
{
	display: flex;
	flex-wrap: wrap;
	
	padding: 1em 0;
}

header nav a
{
	display: block;
	color: inherit;
	text-decoration: none;
	padding: .5em 2em .5em 0em;
}

header nav a.on,
header nav a:hover,
.logout a:hover
{
	color: #d9bc7a;

}


header .logo
{
	display: block;
	margin-right: 4em;
}

header .logo img
{
	height: 30px;
}


main
{
	
	
}


.center
{
	max-width: 960px;
	margin: 0px auto;
	padding: 0 1em;
}


h1
{
	font-weight: 400;
	font-size: 4rem;
	line-height: 1.3;
	text-align: center;
	font-family: 'Fredericka the Great', cursive;
	
}

.center > h1
{
	margin: 6rem 0 2rem 0;
}


h2
{
	font-family: 'Kufam', sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.3;
}

.typo
{
	margin: 2rem 0 4rem 0;
}

.tabelle
{
	width: 100%;
	border: 0;
	border-color: inherit;
}

.tabelle tr
{
	border-bottom: 1px solid;
	border-color: inherit;
}

.tabelle td,
.tabelle th
{
	border: 0px;
	padding: .5em;
}


.header-title
{
	background: rgba(0,0,0,.2);
}


.header-title .inner
{
	position: relative;
}

.header-title img
{
	width: 100%;
	display: block;
}

.header-title h1
{
	position: absolute;
	bottom: -3rem;
	left: 5%;
	font-size: 6rem;
	font-weight: 700;
	padding: 0px;
	margin: 0px;
	color: #FFFFFF;
}


.image-text
{
	display: flex;
	flex-wrap: wrap;
}

.image-text.reverse
{
	flex-direction: row-reverse;
}

.image-text .col
{
	width: 50%;
	box-sizing: border-box;
}

.image-text .col.img img
{
	display: block;
	width: 100%;
}

.image-text .col.txt
{
	padding: 2em;
}

.image-text-boxen .inner
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.image-text-boxen .box
{
	width: 25%;
	max-width: 960px;
}

.image-text-boxen.count-1 .box
{
	width: 100%;
}

.image-text-boxen.count-2 .box
{
	width: calc(50% - 2rem); ;
	max-width: 700px;
	margin: 0 1rem;
}

.image-text-boxen.count-3 .box
{
	width: 25%;
	max-width: 600px;
	margin: 0 1rem;
}

.image-text-boxen .box a
{
	display: block;
	position: relative;
}


.image-text-boxen .box a.img img
{
	display: block;
	width: 100%;
}


.image-text-boxen .box a.img > div
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,.0);
	color: #ffffff;

	transition: all .2s ease-in-out; 
	font-size: 0em;
}


.image-text-boxen .box a.img > div:hover
{ 
	background: rgba(0,0,0,.5);
	font-size: 3em;
}


.image-text-boxen .txt
{
	padding: 2em;
}


.image
{
	background: rgba(0,0,0,.2);
}

.image img
{
	width: 100%;
	display: block;
}



.docs
{
	display: flex;
	column-gap: 3em;
	row-gap: 4em;
	flex-wrap: wrap;
	margin: 2rem 0 4rem 0;
	 align-items: flex-end;
}

.docs a
{
	display: block;
	color: inherit;
	text-decoration: none;
	transition: all .2s ease-in-out;
	
}

.docs a:hover
{
	transform: scale(1.05);
	
}

.docs a span
{
	display: block;
	word-break: break-all;
	color: inherit;
	margin-bottom: .7em;
}

.docs a img
{
	display: block;
	box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 1);
}

.docs .content
{
	position: relative;
}

.docs .icon
{
	position: absolute;
	bottom: -.75em;
	right: -.75em;
	width: 2em;
	height: 2em;
	box-sizing: border-box;
	text-align: center;
	background: #000000;
	color: #FFFFFF;
	font-size: 1.5em;
	padding: .5em;
	border-radius: 50%;
}


.docs a:hover .icon
{

	color: #e6007e;
}


@media (max-width: 1280px)
{
	
	header .logo 
	{
	  margin-right: 2em;
	}
	
	header nav a {
		padding: .5em 1.5em .5em 0em;
	}
	
	.header-title h1 
	{
		bottom: -2rem;
		font-size: 4rem;
	}
	
	h1 {
		font-size: 3rem;
	}
	
	h2 {
		font-size: 1.2rem;
	}
	
	.image-text-boxen.count-4 .box
	{
		width: calc(50% - 2rem); ;
		max-width: 700px;
		margin: 0 1rem;
	}	
	
		
}



@media (max-width: 800px)
{

	.typoNormal 
	{
	  line-height: 1.4em;
	  font-size: 14px;
	}
	
	.header-title h1 {
		bottom: -1.4rem;
		font-size: 2.8rem;
	}

	h1 {
		font-size: 2.0rem;
	}
	
	h2 {
		font-size: 1.1rem;
	}
	
	.image-text .col {
		width: 100%;
	}

	.image-text-boxen.count-2 .box,
	.image-text-boxen.count-3 .box,
	.image-text-boxen.count-4 .box
	{
		width: 100% ;
		max-width: 100%;
		margin: 0 1rem;
	}
	
	


		
}