@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i,900,900i&display=swap');


/*
Webdesign by Rosita Gschwentner and Gertrud Leuprecht - 2020

Structur:
* Colors
* Text Style
* Reset
* General Structur
* Headings
* Links
* Lists
* Header
* Navigation (Main-Navigation, Category-Navigation
* Main Content
* Sidebar
* Footer
* Special Pages (404, Search Results)
* Viewports
* Misc
----------------------------------------------------------------------
*/

* {
	margin: 0;
	padding: 0;
	font-family: 'Muli', sans-serif;
	font-size: 1em;
	color: var(--blackColor);
    xbackground-color: var(--whiteColor);
	box-sizing: border-box;
	text-align: left;
	line-height: 1.5em;
}

body {
	background-color: var(--whiteColor);
}

/* Colors 
(generated with coolors.co - 22/03/2020 - https://coolors.co/1481ba-efcb68-8cb369-001021-fdfdfe)
---------------------------------------------------------------------- */
:root {
	--blackColor: #001021;
	--whiteColor: #fdfdfe;
	--greyColor: #45515d;
	
	/*
	
	--sub1Color: #efcb68; //
	--mainColor: #1481ba; //
	--sub2Color: #8cb369; //
	
	*/
	
	
}

/* Text style
---------------------------------------------------------------------- */
a {
	text-decoration: underline;
	color: var(--mainColor);
}
a.sidebarN {
	text-decoration: none;
	color: var(--blackColor);
}
a.sidebarN:hover {
	text-decoration:underline wavy var(--mainColor);
}
a.sidebarN2 {
	font-size: 0.9em;
	padding-left:1.5em;
	text-indent: -1.5em;
    display: inline-flex;
}
.MathJax {
	margin-left: 2em !important;
	color: blue;
}
sub, sup {
	font-size: xx-small;
}
.subtitleT{
	color: var(--mainColor);
	font-weight: 700;
	padding-left: 0em;
}
.teaser{
	color: var(--whiteColor);
	background-color: var(--greyColor);
	
	border-left-style: solid; 
	border-left-color: var(--blackColor);
	border-width: 0.3em;
	
	padding: 0.8em 0.8em 0.8em 0.8em;

	margin-top: 1em;
    margin-bottom: 1em;
}
.tThree{
	width: 30%;
	color: var(--whiteColor);
	background-color: var(--greyColor);
	
	padding: 0.8em 0.8em 0.8em 0.8em;

	margin: 0.5em;

}
img {
	float: left;
	margin-top: 0.5em;
	margin-right: 0.8em; 
	margin-bottom: 0.5em;
}

img.burgerMenu {
	float: right;
	height: 2em;
	margin-top: 0.2em;
	margin-right: 0.2em; 
	margin-bottom: 0.2em;
}

img.logo {
	float: left;
	height: 2em;
	margin-top: 0.2em;
	margin-right: 0.2em; 
	margin-bottom: 0.2em;
	margin-left: 0.5em;
}

/* Headings
---------------------------------------------------------------------- */
h1{
	font-size: 1.5em;
	text-transform: uppercase;
	color: var(--mainColor);
	border-style: none none solid none;
	border-width: 0.1em;
	padding-left: 0em;
	padding-bottom: 0.2em;
	margin-top: 0.9em;
	margin-bottom: 0.6em;
}
.subtitleH1{
	font-size: 1.5em;
	color: var(--mainColor);
	border-width: 0.1em;
	
	padding-left: 0em;
	padding-bottom: 0.2em;
	margin-top: -1em;
	margin-bottom: 0.5em;
}
h2 {
	font-size: 1.2em;
	color: var(--whiteColor);
	background-color: var(--mainColor);
	
	border-left-style: solid; 
	border-left-color: var(--blackColor);
	border-width: 0.3em;
	
	padding-left: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	margin-top: 1.5em;
    margin-bottom: 1em;
}
h3 {
	font-size: 1em;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--mainColor);
	
	margin-top: 0.5em;
    margin-bottom: 0.5em;
}
teaserLine{
	font-size: 1.2em;
	font-weight:700;
	color: var(--whiteColor);
	background-color: var(--greyColor);
}
.fHeadline{
	font-size: 1.2em;
	font-weight: 700;
	color: var(--whiteColor);
	background-color: var(--greyColor);
}
.sidebarH{
	font-size: 1.3em;
	text-transform: uppercase;
	color: var(--mainColor);
	font-weight: 700;
	margin-top: 0.7em;
	padding-left: 0em;
}
.sidebarR{
	font-size: 1.3em;
	text-transform: uppercase;
	color: var(--mainColor);
	font-weight: 700;
	margin-top: 0.7em;
}

.breadcrumbs{
	font-size: 0.6em;
	color: var(--mainColor);
	padding-top: 3em;
}

a.breadC{
	font-size: 0.6em;
	color: var(--mainColor);
	text-decoration:none;
}

/* Buttons
Learned by https://www.fabriziovanmarciano.com/button-styles/
---------------------------------------------------------------------- */
.buttonResult {
display: inline-block;
color: var(--whiteColor) !important;
text-transform: uppercase;
text-decoration: none;
background: var(--mainColor);
padding: 0.4em;
border-radius: 0.2em;
border: none;
transition: all 0.4s ease 0s;
}
.buttonResult:hover {
background: var(--blackColor);
letter-spacing: 0.2em;
transition: all 0.4s ease 0s;
}
.buttonLink {
	font-weight: 700;
color: var(--blackColor) !important;
text-transform: uppercase;
text-decoration: none;
background: var(--whiteColor);
padding: 0.6em;
border: 0.1em solid var(--blackColor) !important;
display: inline-block;
transition: all 0.4s ease 0s;
}
.buttonLink:hover {
color: var(--whiteColor) !important;
background: var(--sub1Color);
border-color: var(--sub1Color)!important;
transition: all 0.4s ease 0s;
}
a.buttonLI {
	float:right;
	font-weight: 700;
	color: var(--whiteColor) !important;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--sub1Color);
	padding: 0.6em;
	border-color: 0.1em solid var(--sub1Color)!important;
	display: inline-block;
	transition: all 0.4s ease 0s;
}
a.buttonLI:hover {
	color: var(--blackColor) !important;
	background: var(--whiteColor);
	border-color: var(--blackColor) !important;
	transition: all 0.4s ease 0s;
}

.barR{
	padding-left:0.6em;
}





xxh1b2 {			
	margin-top: 0%;
	font-style: italic;
	color: var(--mainColor);
	display: inline;
	}





/* Allgemein Anweisungen */
p, section {
	padding: 0.5em;
	float: left;
	width: 100%;
}


.left, .middle, .right {
  padding: 0.5em;
  margin-top: 0em;
  overflow: auto;
}
.left {
	margin-left: 0.5em;
}

.middle, .right {
 	  margin-top: 0em;
} 

/*Style the left column*/
.left{
	grid-area: left;
}
/* Style the middle column */
.middle {
  grid-area: middle;
  margin: 0;
 
}

/* Style the right column */
.right {
  grid-area: right;
}

/* Style the footer 
---------------------------------------------------------------------- */
.fMotto {
  grid-area: fMotto;

  font-size: 0.8em;
  line-height: 1.5em;
  color: var(--whiteColor);
  background-color: var(--greyColor);
  text-align: left;
  
  padding-top: 2em;
} 
.fLatest {
  grid-area: fLatest;
  
  font-size: 0.8em;
  line-height: 1.5em;
  color: var(--whiteColor);
  background-color: var(--greyColor);
  text-align: left;
  
  padding-top: 2em;
} 
.fLinks {
  grid-area: fLinks;

  font-size: 0.8em;
  line-height: 1.5em;
  color: var(--whiteColor);
  background-color: var(--greyColor);
  text-align: left;
  
  padding-top: 2em;
} 
.fContact {
  grid-area: fContact;
  
  font-size: 0.8em;
  line-height: 1.5em;
  color: var(--whiteColor);
  background-color: var(--greyColor);
  text-align: left;
  
  padding-top: 2em;
} 




/* Links inside the navbar */
header a {
	margin: 0;
	padding: 0.9;
	float: left;
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 1.4em;
}


.sub-menu{
	display:block;
	float:left;
	font-size:0.8em;
}



/***********************************  glglglgl   **********************/
header {
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	float: left;
	background-color: var(--whiteColor);
	box-shadow: 0em 0.2em 1.2em var(--greyColor);
}

#bereichlogo {
	background-color: limegreen;
	display: block;
	padding: 0.5em;
	padding: 0;
	text-decoration: none;
	float: left;
	width: auto;
}

#steuerung li {
	list-style: none;
	float: left;
}

#steuerung a {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0.5em;
	text-decoration: none;
	background-color: gray;
	color: background-color: var(--blackColor);
	background-color: var(--whiteColor);
}


/* Burger Menü
-------------------------------------------------- */
#nav-menue:target #steuerung { /* Einblenden*/
	display: block;
}
#nav-menue:target .menue-button-beschr-open { /* Ausblenden */
	display: none ;
}

/* 1 Extra small devices (phones, 600px and down)
---------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
	.grid-container {
		display: grid;
		grid-template-columns: 100%;
		grid-template-areas: 
			'middle' 
			'left'
			'right' 
			'fLatest'
			'fLinks'
			'fMotto'
			'fContact';  
	}
	.middle, .left, .right {
		width:100%;
	}
	.fMotto, .fLatest, .fLinks, .fContact {
		padding-left: 1em;
		padding-right: 1em;
	} 
	.menue-button {
		
		display: block;
		background-color: var(--whiteColor);
		
		position: absolute;
		right: 0;
		
		cursor: pointer;
	}
	
	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}
	
	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}
	
	.sub-menu{
		font-size:0.8em;		
	}
 
}

/* 2 Small devices (portrait tablets and large phones, 600px and up)
---------------------------------------------------------------------- */
@media only screen and (min-width: 600px) {
	
	.grid-container {
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-areas: 
			'middle middle'
			'left left'
			'right right'
			'fLatest fMotto'
			'fLinks fContact'; 
    }
	
	.middle {
		margin-top: 0em;
	}
	
	.fMotto, .fLatest, .fLinks, .fContact{
		padding-left: 1em;
		padding-right: 1em;
	} 
	
	
	.menue-button {
		
		display: block;
		background-color: var(--whiteColor);
		
		position: absolute;
		right: 0;
		
		cursor: pointer;
	}
	
	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}
	
	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}
	
	
}

/* 3 Medium devices (landscape tablets, 768px and up)
---------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
	
	.grid-container {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-areas: 
			'left middle middle middle'
			'right right right right'
			'fLatest fLatest fMotto fMotto'
			'fLinks fLinks fContact fContact';  
    }
	
	.middle, .right, .left {
		margin-top: 2em;
	}
	
	.fMotto, .fLatest, .fLinks, .fContact {
		padding-left: 2em;
		padding-right: 2em;
	} 
	
	
	.menue-button {
		
		display: none;
	}
	
	#steuerung {
		float: right;
		position:absolute;
		left:20%;
		
		width: 100%;
		display: block;
	}
	
	#steuerung a:hover {
		color: var(--whiteColor);
		background-color: var(--mainColor);
	}
	
	
	
	#steuerung li {
		border-bottom: none;
		width: 20%;
	}
	
}

/* 4 Large devices (laptops/desktops, 992px and up) 
---------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
	
	.grid-container {
		display: grid;
		grid-template-columns: 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25% 6.25%;
		grid-template-areas: 
			'left left left middle middle middle middle middle middle middle middle middle middle right right right'
			'fMotto fMotto fMotto fMotto fLatest fLatest fLatest fLatest fLinks fLinks fLinks fLinks fContact fContact fContact fContact'; 
	}
	
	.fMotto, .fLatest, .fLinks, .fContact {
		padding-left: 2em;
		padding-right: 1em;
	}
}

/* 5 Extra large devices (large laptops and desktops, 1200px and up)
---------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {
	
	.fMotto, .fLatest, .fLinks, .fContact  {
		padding-left: 6em;
		padding-right: 1em;
	} 
} 

td, tr {
	border: 0.1em solid #ddd;
}