@charset "utf-8";
/* CSS Document */

:root {
    --primary-color: #586c81;
    --secondary-color: #bfad60;
    --primary-light-color: #E4E6F4;
	--basic-text-color: #ffffff;
    --inact-hover-text-color: #bfad60;
	--act-hover-text-color: #586c81;
	--textonprimary-color: white;
	--texthighlight-color: orange;
	--testcolor: #ff0000;
}

/* alegreya-sans-regular - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'),
       url('../fonts/alegreya-sans-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alegreya-sans-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* alegreya-sans-italic - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'),
       url('../fonts/alegreya-sans-v8-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alegreya-sans-v8-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* alegreya-sans-700 - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'),
       url('../fonts/alegreya-sans-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alegreya-sans-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* alegreya-sans-700italic - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Alegreya Sans Bold Italic'), local('AlegreyaSans-BoldItalic'),
       url('../fonts/alegreya-sans-v8-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/alegreya-sans-v8-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* kavivanar-regular - latin */
@font-face {
  font-family: 'Kavivanar';
  font-style: normal;
  font-weight: 400;
  src: local('Kavivanar Regular'), local('Kavivanar-Regular'),
       url('../fonts/kavivanar-v3-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/kavivanar-v3-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
	height: 100%;
	margin: 0;
	font-family: "Alegreya Sans", sans-serif;
	font-size: 1em;
	font-weight: 400;
}

/*Äußerster Parent Container*/
.container {
	
}

.header {
	background-color: var(--primary-color);
	height: 7.8em;
	background-image: url(../images/titel_schmal.png);
	background-size: auto 7.8em;
	background-repeat: no-repeat;
	border: 0;
	/* position: fixed; */
}

.sidebar {
	margin: 2em;
	background-color: var(--primary-light-color);
	border-radius: 1em;
	display: flex;
	flex-direction: column;
}

.content {
	padding: 50px 0px;
	margin: auto;
	width: 80%;
	max-width: 45em;
	align: center;
	text-align: justify;
}

/* Impressum */
.impressum {
	flex-direction: row;
	position: absolute;
	top: 6.3em;
	left: 3.8em;
	display: flex;
	justify-content: space-around;
	padding: 0 0 0 0px;
}

.leftlink {
	order: 1;
	margin-right: 1em;
}

.rightlink {
	order: 2;
}

.sublinks {
	font-size: 0.7em;
	padding: 0px;
	text-align: center;
	line-height: 20%;
}


/* Navigation Bar List-Elements*/
ul.navlist {
	width: 100%;
	margin: 0px;
	padding: 2em 0 0 0;
}

ul.navlist li {
	list-style: none;
	/*border-bottom: 1px solid #252d5e;*/
	padding-left: 1em;
	line-height: 3em;
}

ul.navlist li.spacer {
	list-style: none;
	line-height: 2em;
}

/* Textfarbe von Disclaimer und Impressumlink */
.sublinks a {
	color: var(--textonprimary-color);
}

.sublinks:hover a {
	color: var(--secondary-color);
}

/* ############################## Farben in der Navigationsleiste ############## */



/* Hintergrundfarbe des aktiven Links (Farbe des Blocks) */
ul.navlist li.active {
	background-color: var(--secondary-color);
}

/* Textfarbe eines inaktiven Links */
ul.navlist li.inact a {
	text-decoration: none;
	color:var(--primary-color);
	display: inline-block;
}

/* ##################### HOOVER Farben ##################### */


ul.navlist li.active:hover {
	background-color: var(--secondary-color);
	/*Textfarbe wenn man über dem gerade aktiven Link hoovert*/
	color: var(--primary-color);
}

/* Textfarbe, wenn man über dem aktiven Link hoovert */
ul.navlist li.active:hover a {
	color: var(--primarycolor);
}

/* Über einer inaktiven Zelle hovern (Farbe des Blocks und Textfarbe */
ul.navlist li.inact:hover {
	background-color: var(--primary-color);
	color: var(--secondary-color);
}

/*Über einem inaktiven Link hovern*/
ul.navlist li.inact a:hover {
	background-color: var(--primary-color);
	color: #FFCC00;
}

/*Die Textfarbe des Links anpassen wenn man über einer inaktiven Zelle hovert (die Maus aber nicht über dem Link selbst steht)*/ 
ul.navlist li.inact:hover a {
	color: var(--secondary-color);
}



/* Tabellen */


table {
	cellspacing: 5;
	vertical-align:top;
	color: var(--primary-color);
	margin-bottom: 3em;
}

td {
	vertical-align:top;
	text-align:left;
}



/* Links */ 

a {
	text-decoration: none;
	text-underline: none;
	color: var(--primary-color);
}
a:hover {
	color: var(--secondary-color);	
}
a:active {
	color: var(--secondary-color);	
}



/* Stile */

h1 {
	text-align: left;
	color: var(--primary-color);
}

h2 {
	color: var(--primary-color);
}

h3 {
	color: var(--secondary-color);
	text-align: left;
}

.ipunkt {
	width: 1.5em;
	height: 1em;
	border: 0;
	vertical-align: text-bottom;
}

.tdeventleft {
	width: 50%;
}

.tdeventright {
	width: 50%;
}

.eventpic {
        width: 100%;
        height: auto;
}

.punktliste {
	list-style: circle;
	list-style-image: url("../images/ipunktmini.png");
}

.teamname {
	font-size: 14px;
	font-weight: bold;
	color: var(--primary-color);
}

.betont {
	font-weight:bold;
}

.kursiv {
	font-style: italic;
}

.klein {
	font-size: 13px;
	font-weight:normal;
}

.divspacer {
	margin-top: 30px;
	padding-top: 30px;
}

/* Flexboxen für Unterpages*/
.threecol {
	display: flex;
	justify-content: space-between;
}

.threecol1 {
	flex: 1;
	padding: 1em;
}

.threecol2 {
	flex: 1;
	margin: 0 1em 0 1em;
}

.threecol3 {
	flex: 1;
	padding: 1em;
}

.divider {
	width: 0.1em;
	margin: 0.2em 0;
	background-color: #9B9B9B;	
}


/*Bilder*/
#welcomepic {
	background-image: url("../images/arbeitsteam.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	min-height: 18em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#angebot {
	background-image: url("../images/angebote.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	min-height: 21em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#eventheader {
	background-image: url("../images/none");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	min-height: 5em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#philosophie {
	background-image: url("../images/labortisch.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	min-height: 18em;
	min-width: 12.5em;
	border-radius: 0.8em;
}

#sign {
	background-image: url(../images/sign.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height: 9em;
	min-width: 12.5em;
	border-radius: 0.8em;
	
}

/* für CSS-Grid fähige Browser */
/* wenn der Brwoser CSS-Grid nicht unterstützt, gelten nur die Definitionen oberhalb von hier,
wenn er CSS-Grid unterstützt, werden die Definitionen mit den Definitionen in diesem Bereich überschrieben */
@media (min-width: 900px) {
@supports (display: grid) {

.container {
	display: grid;
	grid-template-columns: 15em auto;
	grid-template-rows: 125px auto;
	grid-template-areas: 
		"header 	header"
		"sidebar 	inhalt";
}
	
.header {
	grid-area: header;
	background-color:  var(--primary-color);
	background-image: url(../images/titel.png);
	background-repeat: no-repeat;
	border: 0;
	/* position: fixed; */
}

.sidebar {
	grid-area: sidebar;
	margin: 0;
	background-color: var(--primary-light-color);
	border-radius: 0;
	display: flex;
	flex-direction: column;
}

.content {
	grid-area: inhalt;
	justify-self: start;
	align-self: start;
	padding: 0;
	margin: 2.2em auto 3em 5em;
	max-width: 45em;
	text-align: justify;
}

/* Impressum */
.impressum {
	grid-area: impressum; /*verwende ich im Moment nicht, wird absolut positioniert*/
	flex-direction: row;
	position: absolute;
	top: 6.3em;
	left: 3.8em;
	display: flex;
	justify-content: space-around;
	padding: 0 0 0 0px;
}
	

ul.navlist {
	width: 100%;
	margin: 0px;
	padding: 2em 0 0 2em;
}
	
	
}}


/* Smartphones */
@media only screen 
	and (max-width: 1000px) 
	and (orientation : portrait) 
	and (-webkit-min-device-pixel-ratio : 2) 
{

body {
	height: 100%;
	margin: 0;
	font-family: "Alegreya Sans", sans-serif;
	font-size: 2.5em;
	font-weight: 400;
}
	
ul.navlist {
	width: 100%;
	margin: 0px;
	/* padding definiert hier den Abstand des Textes innerhalb der hellen Box mit den Links.
	Wenn links zum Beispiel 0 stehen würde, kleben die Link-Symbole direkt am linken Rand der Link-Box */
	padding: 1em 0.5em 0 0.5em;
}
	
ul.navlist li {
	list-style: none;
	/*border-bottom: 1px solid #252d5e;*/
	/* padding definiert hier, wie weit der Link Text (inklusive des Link-Symbols) 
	von der Kante der umgebenden Box (also wenn ein Link aktiv ist oder man über ihm hoovert) weg ist
	Wenn man hier Links z.B. 0.5em eingibt, gibt es zwischen der umgebenden Linkbox und dem Linksymbol einen kleinen Abstand */
	padding: 0em 0.5em 0em 0.5em;
	line-height: 2em;
}
	
ul.navlist li.active {
	/*margin definiert an dieser Stelle wie viel Abstand die umgebende Linkbox relativ zu dem hellen Linkbereich hat
	Wenn margin right in Handymodus 1em ist, dann stellt das sicher, dass die umgebende Linkbox innerhalb des Linkbereichs bleibt
	und nicht wie im Desktopmodus darüber hinausragt */
	margin: 0em 1em 0em 0em;
}

ul.navlist li.active:hover {
	/*margin definiert an dieser Stelle wie viel Abstand die umgebende Linkbox relativ zu dem hellen Linkbereich hat
	Wenn margin right in Handymodus 1em ist, dann stellt das sicher, dass die umgebende Linkbox innerhalb des Linkbereichs bleibt
	und nicht wie im Desktopmodus darüber hinausragt */
	margin: 0em 1em 0em 0em;
}
	
ul.navlist li.inact:hover {
	/*margin definiert an dieser Stelle wie viel Abstand die umgebende Linkbox relativ zu dem hellen Linkbereich hat
	Wenn margin right in Handymodus 1em ist, dann stellt das sicher, dass die umgebende Linkbox innerhalb des Linkbereichs bleibt
	und nicht wie im Desktopmodus darüber hinausragt */
	margin: 0em 1em 0em 0em;
}

	
ul.navlist li.spacer {
	list-style: none;
	line-height: 1em;
}

/* ab hier genauso wie der Fallback */
.container {
	display: contents;	
}

.header {
	background-color: var(--primary-color);
	height: 7.8em;
	background-image: url(../images/titel_schmal.png);
	/* background-size: auto 7.8em; */
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 0;
}

.sidebar {
	margin: 1em 1em 1em 1em;
	background-color: var(--primary-light-color);
	border-radius: 1em;
	display: flex;
	flex-direction: column;
}

.content {
	padding: 50px 0px 50px 0px;
	margin: auto;
	width: 80%;
	max-width: 45em;
	align: center;
	text-align: justify;
}

/* Impressum */
.impressum {
	flex-direction: row;
	position: absolute;
	top: 6.3em;
	left: 3.8em;
	display: flex;
	justify-content: space-around;
	padding: 0 0 0 0px;
}

	
}