@charset "UTF-8";
:root {
	--rund: .1875rem; 
	--sg-1: .5125rem;
	--sg-2: .75rem;
	--sg-3: .8125rem;
	--sg-4: .875rem;
	--sg-5: 1rem;
	--sg-6: 1.5rem;
	--schwarz: 80, 54, 17;
	--weiss: 250, 255, 255;
	--grau: 128, 128, 128;
	--blau: 93, 117, 187;
	--rot: 220, 27, 48;
	--gelb: 245, 229, 27;
	--gruen: 104, 174, 67;
	--hellblau: 198, 226, 254;
	--hellgelb: 255, 252, 116;
	--hellgruen: 170, 203, 101;
	--hellsepia: 170, 144, 126;
}
html { 
	box-sizing: border-box;
} 
* {
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	background: url('../img/hg-1.jpg');
	animation: fadeIn 1s ease-in;
}   
main {
	position: absolute;
	left: 50%;
	width: 20rem;
	margin-left: -10rem;
	z-index: 1
}
ul {
	position: relative;
	left: 1rem;
	width: 17.25rem;
}
li::marker {
	color: rgb(var(--rot));
}
li.ausw {
	list-style: none;
	height: 4rem;
}
ul.pdf, ul.ausw {
	scroll-behavior: smooth;
	left: 0;
	width: 20rem;
}
li.pdf {
	list-style: none;
	height: 2.625rem;
}
table {
	border-collapse: border-collapse;
	width: 100%;
	font-family: 'Encode Sans Semi Condensed', sans-serif;
	font-weight: 400;	
	font-size: var(--sg-4);
}
tr {
	vertical-align: top;
}
tr:nth-child(odd) {
	background-color: rgba(var(--grau), .2);
}
td {
	padding: 0 .25rem .25rem .375rem ;
}
.boxB-1, .boxS-1, .boxS-2, .boxT-1, .boxT-2, .boxT-4 .boxT-5, .boxV-1 {
	position: relative;
	width: 20rem;
	z-index: 2;
}
.boxS-1 {
  	position: fixed;
	top: .5rem; 
  	float: left;
	height: 2.625rem;
	z-index: 15;
}
.boxS-2 {
	height: 2.625rem;
	z-index: 5;
}
.boxT-2 {
	position: absolute;
	top: 0;
	text-align: center;
	z-index: 5;
}
.boxT-3 {
	float: left;
	width: 6.625rem;
	height: 2.125rem;
	text-align: center;
}
.boxT-4 {
	width: 18rem;

}
.boxT-5 {
	display: grid;
	align-items: center;
	height: 4rem;
}
.boxV-1 {
	width: 100%;
	z-index: 5;
}
.svg-1 {
	position: relative;
	width: 2.625rem;
	height: 2.625rem;
}
.svg-2 {
	position: relative;
	left: 0;
	height: 1.5rem;
}
.svg-3 {
	float: right; 
	opacity: .5;
	z-index: 10;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.op-1 {
	opacity: .5;
}
.mb-1 {
	margin-bottom: 1rem;
}
.mb-2 {
	margin-bottom: .375rem;
}
.mb-3 {
	margin-bottom: .75rem;
}
.mr-1 {
	margin-right: .125rem;
}
.mr-2 {
	margin-right: .5rem;
}
.mt-1 {
	margin-top: 1rem;
}
.mt-2 {
	margin-top: 8rem;
}
.pa-1 {
	padding: .75rem 1rem .75rem .75rem;
}
.pa-2 {
	padding: .6875rem 0 5.75rem 0;	
}
.pa-3 {
	padding: .6875rem 0 7.25rem 0;		
}
.pa-4 {
	padding: 0 2rem 0 2rem;
}
.pl-1 {
	padding-left: 1.75rem;
}
.pr-1 {
	padding-right: .75rem;
}
.pt-1 {
	padding-top: .75rem;
}
.pt-2 {
	padding-top: .25rem;
}
.pt-3 {
	padding-top: 1rem;
}
.pt-4 {
	padding-top: .75rem;
}
.br-1 {
	border-radius: var(--rund);
}
h1 {
	font-family: 'Encode Sans Semi Condensed', sans-serif;
	font-style: normal;
	margin: 0;
}
h2 {
	font-family: 'Baskervville', serif;
	font-style: normal;
	margin: 0;	
}
.fs-1, .fs-3 {
	font-size: var(--sg-5);
}
.fs-2 {
	font-size: var(--sg-6);
}
.fs-4, .fs-7, .fs-8 {
	font-size: var(--sg-3);
}
.fs-5 {
	font-size: var(--sg-1);
}
.fs-6 {
	font-size: var(--sg-2);
}
.fs-9 {
	font-size: var(--sg-4)
}
.fw-4 {
	font-weight: 400;	
}
.fw-6 {
	font-weight: 600;	
}
.fw-7 {
	font-weight: 700;
}
.fw-8 {
	font-weight: 800;
}
.lh-1 {
	line-height: 1.2;
}
.lh-2 {
	line-height: 1;
}
.co-10 {
	color: rgb(var(--schwarz));
}
.co-20 {
	color: rgb(var(--weiss));
}
.co-37 {
	color: rgba(var(--grau), .7);
}
.co-40 {
	color: rgb(var(--blau));
}
.co-50 {
	color: rgb(var(--rot));
}
.co-60 {
	color: rgb(var(--gelb));
}
.co-70 {
	color: rgb(var(--gruen));
}
.co-90 {
	color: rgb(var(--hellsepia));
}
.bc-10 {
	background-color: rgb(var(--schwarz));
}
.bc-12 {
	background-color: rgba(var(--schwarz), .2);
}
.bc-15 {
	background-color: rgba(var(--schwarz), .5);
}
.bc-17 {
	background-color: rgba(var(--schwarz), .7);
}
.bc-20 {
	background-color: rgb(var(--weiss));
}
.bc-27 {
	background-color: rgba(var(--weiss), .7);
}
.bc-40 {
	background-color: rgb(var(--blau));
}
.bc-41 {
	background-color: rgba(var(--blau), .1);
}
.bc-50 {
	background-color: rgb(var(--rot));
}
.bc-60 {
	background-color: rgb(var(--gruen));
}
.bc-61 {
	background-color: rgba(var(--gruen), .1);
}
.bc-71 {
	background-color: rgba(var(--gelb), .1);
}
.bc-94 {
	background-color: rgb(var(--hellblau));
}
.bc-96 {
	background-color: rgb(var(--hellgruen));	
}
.bc-97 {
	background-color: rgb(var(--hellgelb));
}
.ts-1 {
	text-shadow: 1px 1px 1px rgba(var(--schwarz), .9)   , 1px -1px 1px rgba(var(--schwarz), .9)   , -1px 1px 1px rgba(var(--schwarz), .9)   , -1px -1px 1px rgba(var(--schwarz), .9)   , 2px 2px 4px rgba(var(--schwarz), .9)   ;
	text-shadow: .0625rem .0625rem .0625rem rgba(var(--schwarz), .9)   , .0625rem -.0625rem .0625rem rgba(var(--schwarz), .9)   , -.0625rem .0625rem .0625rem rgba(var(--schwarz), .9)   , -.0625rem -.0625rem .0625rem rgba(var(--schwarz), .9)   , .125rem .125rem .25rem rgba(var(--schwarz), .9)   ;
}
@keyframes fadeIn {
	from {
		opacity:0;}
	to {
		opacity:1;}
}
@keyframes moveFromTop {
	from {transform: translateY(-100%);}
}
.moveFromTop {
	animation: moveFromTop .8s ease both;
}
@keyframes moveToRight {
	from {transform: translateX(-100%);}
}
.moveToRight {
	animation: moveToRight .8s ease both;
	animation-delay: .4s;
}
@keyframes moveToLeft {
	from {transform: translateX(100%);}
}
.moveToLeft {
	animation: moveToLeft .8s ease both;
	animation-delay: .4s;
}
a:link, a:visited { 

}
a:active, a:focus {
	outline: none;
}
a.one:link {
	text-decoration: none;
	text-align: center;
}
a.two:link {
	text-decoration: none;
}
@media (min-width: 52.5rem) {
	:root {
		--rund: .3125rem; 	
		--sg-1: .7125rem;
		--sg-2: 1.1875rem;
		--sg-3: 1.55rem;
		--sg-4: 2.1rem;
		--sg-5: 2.6rem;
		--sg-6: 4rem;
		--sg-7: 2.8rem;
	}
	main {
		width: 60rem;
		margin-left: -30rem;
	}
	ul, ul.pdf, ul.ausw {
		width: 60rem;
	}
	li.ausw {
		height: 8rem;
	}
	li.pdf {
		height: 4rem;
	}
	table {
		font-size: var(--sg-3);
	}
	td {
		padding: 0 .5rem .5rem .75rem ;
	}
	.boxB-1, .boxS-1, .boxS-2, .boxT-1, .boxT-2, .boxT-4, .boxV-1 {
		width: 60rem;
	}
	.boxS-1 {
		top: 1.25rem;
	}
	.boxS-1, .boxS-2 {
		height: 4rem;
	}
	.boxT-2 {
		height: 8rem;
	}
	.boxT-3 {
		width: 20rem;
		height: 6.25rem;
	}
	.boxT-4 {
		width: 46rem;
	}
	.boxT-5 {
		height: 8rem;
	}
	.svg-1 {
		width: 4rem;
		height: 4rem;
	}
	.svg-2 {
		position: relative;
		height: 4rem;
	}
	.mb-1 {
		margin-bottom: 2rem;
	}
	.mb-2 {
		margin-bottom: .5rem;
	}
	.mb-3 {
		margin-bottom: 1.5rem;
	}
	.mr-1 {
		margin-right: .5rem;
	}
	.mr-2 {
		margin-right: 1rem;
	}
	.mt-1 {
		margin-top: 2rem;
	}
	.mt-2 {
		margin-top: 25rem;
	}
	.pa-1 {
		padding: 1rem 10rem 2.5rem 4rem;
	}
	.pa-2 {
		padding: 1.75rem 0 18rem 0;		
	}
	.pa-3 {
		padding: 1.75rem 0 23rem 0;		
	}
	.pa-4 {
		padding: 0 8rem 0 8rem;
	}
	.pl-1 {
		padding-left: 2.5rem;
	}
	.pr-1 {
		padding-right: 3rem;
	}
	.pt-1, .pt-2 {
		padding-top: 1.25rem;
	}
	.pt-3, .pt-4 {
		padding-top: 1.75rem;
	}
	.fs-1, .fs-3, .fs-5, .fs-8, .fs-9 {
		font-size: var(--sg-3); /* 3 */
	}
	.fs-2, {
		font-size: var(--sg-6); /* 6 */
	}
	.fs-4 {
		font-size: var(--sg-7); /* 5 */
	}
	.fs-7 {
		font-size: var(--sg-4); /* 4 */
	}
	.fs-6 {
		font-size: var(--sg-2);	
	}
	.ts-1 {
		text-shadow: 1px 1px 1px rgba(var(--schwarz), .9)   , 1px -1px 1px rgba(var(--schwarz), .9)   , -1px 1px 1px rgba(var(--schwarz), .9)   , -1px -1px 1px rgba(var(--schwarz), .9)   , 2px 2px 4px rgba(var(--schwarz), .9)   ;
		text-shadow: .0625rem .0625rem .0625rem rgba(var(--schwarz), .9)   , .0625rem -.0625rem .0625rem rgba(var(--schwarz), .9)   , -.0625rem .0625rem .0625rem rgba(var(--schwarz), .9)   , -.0625rem -.0625rem .0625rem rgba(var(--schwarz), .9)   , .125rem .125rem .25rem rgba(var(--schwarz), .9)   ;
	}
}