:root { --textfar: #23308e;
		--hintergrund: #8ba2d3;
		--rahmenfarbe: #23308e;
		--aktiverlink: #23308e;
		--textgr: 1.0em;
		--headgr: 1.4em;
		--schr: 'Open Sans', sans-serif; }
			 
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v15-latin-regular.eot');
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
       url('fonts/open-sans-v15-latin-regular.woff') format('woff'),
       url('fonts/open-sans-v15-latin-regular.ttf') format('truetype'),
       url('fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); }

p            { font-family: var(--schr); font-size: var(--textgr); color: var(--textfar);
			   page-break-inside: avoid; column-break-inside: avoid; 
			   -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
p.c1         { font-family: var(--schr); font-size: var(--textgr); color: var(--textfar); }
p.c2         { font-family: var(--schr); font-size: var(--headgr); color: var(--textfar); }
p.header	 { font-family: var(--schr); font-size: var(--headgr); color: var(--textfar); 
			   margin: 0; padding: 0; }
p.main	 	 { font-family: var(--schr); font-size: var(--headgr); color: var(--textfar); 
			   margin: 0; padding: 10px 0 10px 0; }
tr           { font-family: var(--schr); font-size: var(--textgr); }
h1           { font-family: var(--schr); font-size: var(--textgr); font-weight: bold; display: inline; }
h2           { font-family: var(--schr); font-size: var(--textgr); font-weight: bold; display: inline; color: var(--textfar); }
h3           { font-family: var(--schr); font-size: var(--headgr); font-weight: bold; }
h4           { font-family: var(--schr); font-size: var(--headgr); font-weight: bold; color: var(--textfar); }
hr           { color: var(--textfar); }
ul			 { margin-top: 10px; margin-bottom: 10px; font-size: var(--textgr); }
li			 { margin-top: 0px; margin-bottom: 5px; font-size: var(--textgr); 
			   page-break-inside: avoid; column-break-inside: avoid; 
			   -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }

a:link       { font-family: var(--schr); font-size: var(--textgr); font-weight: bold; display: inline; text-decoration-line:none; color: var(--textfar); }
a:visited    { font-family: var(--schr); font-size: var(--textgr); font-weight: bold; display: inline; text-decoration-line:none; color: var(--textfar); }
a:hover      { font-family: var(--schr); font-size: var(--textgr); font-weight: bold; display: inline; text-decoration-line:none; }
a:active     { font-family: var(--schr); font-size: var(--textgr); font-weight: bold; display: inline; text-decoration-line:none; color: var(--aktiverlink); }

td           { font-family: var(--schr); font-size: var(--textgr);
			   background-size: contain; background-repeat: no-repeat; background-position: center; }

td.h1        { border:none; text-align: center; white-space: nowrap; vertical-align: top;
			   font-family: var(--schr); font-size: var(--headgr); font-weight: bold; color: var(--textfar); background-size: contain; background-repeat: no-repeat; background-position: center; }
			   
td.h2        { border:1px solid var(--rahmenfarbe); text-align: center;
			   font-family: var(--schr); font-size: var(--headgr); font-weight: bold; color: var(--textfar);
			   background-size: contain; background-repeat: no-repeat; background-position: center; }

body { font-family: 'Open Sans', sans-serif;
	   font-size: var(--textgr); 
	   /* display: flex; */
       color: var(--textfar); 
	   margin: 10 10 auto;
	   flex-direction: column; }
	   
main { border-radius: 15px;
	   background-color: rgba(255, 255, 255, 0.2); 
	   margin: .5em;
	   padding: 0 1em 1em 1em ; }
	   
div.spalten { columns: 2 20em; }

header { border-radius: 10px;
	   background-color: rgba(255,255,255,0.2); 
	   margin: .5em;
	   padding: 0 1em 0em 1em; }
	   
footer { border-radius: 15px;
	   background-color: rgba(255, 255, 255, 0.2); 
	   margin: .5em;
	   padding: 0 1em .5em 1em; }
	   			   
.flex-container {
	display: flex; 
	flex-flow: row wrap; 
	flex: auto;
	justify-content: space-between; }
	
.flex-item {
	background-color: rgba(255,255,255,0.3);	
	align: center;
	flex: auto;
	border: 1px solid;
	border-radius: 5px;
	margin: .5em;
	padding: .5em; }
	
header.flex-container {
	display: flex; 
	flex-flow: row wrap; 
	flex: auto;
	justify-content: center; 
	margin: .5em;
	padding: 10px 0 10px 0;}
	
.flex-item:hover { background-color: rgba(035,048,142,0.1); }

.flex-footer {
	align: center;
	flex: auto; }
	
.flex-divider {
	align: center;
	flex: auto;
	flex-basis: auto; }