@charset "gestaltung";
/* CSS Document */

/*Schriften*/
@font-face {
	font-family: "Lexend Regular";
	font-style: normal;
	font-weight: 400;
	src: url("Schrift/Lexend-Regular.eot");
	src: local('Lexend-Regular'),
		url("Schrift/Lexend-Regular.ttf") format('truetype'),
		url("Schrift/Lexend-Regular.svg") format('svg'),
		url("Schrift/Lexend-Regular.eot");
}
@font-face {
	font-family: "Lexend VariableFont";
	font-style: normal;
	font-weight: 400;
	src: local('Lexend-VariableFont_wght.ttf'),
		url("Schrift/Lexend-VariableFont_wght.ttf") format('ttf')
}
@font-face {
	font-family: "Lexend Bold";
	font-style: normal;
	font-weight: 400;
	src: local('Lexend-Bold'),
		url("Schrift/Lexend-Bold.ttf") 
}
@font-face {
	font-family: "Lexend SemiBold";
	font-style: normal;
	font-weight: 400;
	src: local('Lexend-SemiBold'),
		url("Schrift/Lexend-SemiBold.ttf") 
}
@font-face {
	font-family: "Lexend Thin";
	font-style: normal;
	font-weight: 400;
	src: local('Lexend-Thin'),
		url("Schrift/Lexend-Thin.ttf") 
}
/*Allgemeines Aussehen*/ 
.body {
	background-color: #CCCCCC;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 0 0 0;
	padding: 0;
}

.mit-logo {
	border-bottom: 10px #FF0004;
	
}
/*veraltetes Menü*/
.menu {
	color: #6E25FF;
	font-family: "Lexend Regular";
	background-color: #3d3d3d;
	font-size: 20px;
	text-align: right;
	padding-top: 0;
	margin-top: 0;
}

#basistext {
	font-size: 26px;
	font-family: "Lexend Regular", sans-serif;
	font-style: normal;
	font-weight: normal;
}
/*aktuelles Menü*/
#menu {
	font-family: 'Lexend Bold', sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	font-size: 15px;
	padding-right: 2%;
	padding-top: 8%;
}

/* unbetrachteter Link */
a:link, a:visited {
	background-color: #CCCCCC;
	color: #3F217B;
	padding: 2% 2%;
	font-style: normal;
	font-weight: normal;
	text-decoration-line: none;
	letter-spacing: inherit;
	display: inline-block;
}

/* Style für "Personen*/
.kandidat {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.kandidat:nth-child(odd) {
	flex-direction: row-reverse;
}
.kandidat img {
	margin: 0 20px;
	width: 20%; /* oder eine andere Größe, die zum Layout passt */
	height: auto;
}
.kandidat-text {
	flex: 1;
}

/* maus über Link */
a:hover, a:active {
	color: #000000;
	text-decoration-line: none;
}

/*Bildteilung 30% 70%*/
.div1 {
	float: left;
	width: 30%;
}

/*Bildteilung 50% 50%*/
.div4 {
	float: left;
	width: 50%;
	height: auto;
	padding: 5%;
}
.div5 {
	padding: 5%;
}
.div6 {
	padding-left: 5%;
}
/*Inzwischen meist ersetzt*/
.box1 {
	float: left;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 2%;
	width: 50%;
}
.box2 {
	padding-bottom: 1%;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 1%;
}
.box3 {
	position: absolute;
	left: 6%;
	bottom: 10%;
	width: 94%;
}
.box4 {
	position: absolute;
	right: 1%;
	top: 5%;
	width: 35%;
	text-align: right;
}
/*Editieren der Schriften*/
h1 {
	color: #3F217B;
	font-family: 'Lexend semibold', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 35px;
}

h2 {
	color: #3F217B;
	font-family: 'Lexend semibold', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 32px;

}
h3 {
	color: #3F217B;
	font-family: "lexend thin", sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 30px;
}
h4 {
	color: #3F217B;
	font-family: "Lexend SemiBold", sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
}
p {
	font-size: 20px;
	font-family: "Lexend Regular", sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #000000
}
p1 {
	font-size: 20px;
	font-family: "Lexend Regular", sans-serif;
	font-style: normal;
	font-weight: normal;
	transform: rotate(-90deg);
	padding: 0;
	margin: 0;
	color: #000000
}
h5 {
	float: left;
	width: 60%;
	padding-left: 5%;
	margin-bottom: 20px;
	margin-top: 30px;
	font-family: 'Lexend Regular', sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #3F217B;
	font-size: 40px;
}
li {
	font-family: 'Lexend Regular', sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	font-size: 20px;
	padding-left: 5px;
	list-style-position: outside;
}
/*ID zur Formatierung des Logos in der Kopfzeile */
#logo {
	width: 70%;
	height: auto;
	padding-left: 20%;
	padding-top: 2%;
	padding-bottom: 1%;

}
/*gestaltung der Kopfzeile über ID*/ 
#kopf {
	background-color: #6E25FF;
	width: 100%;
	height: auto;
	

}
/*vermutlich überholt*/
#kopfleiste {
	padding-left: 9%;
	
}
/*Tabelle */
td.border {
	border: 0px solid white;
}

/*Allgemeine Inhalts ID*/
#inhalt {
	width: 84%;
	padding-left: 8%;
	padding-right: 8%;
	padding-top: 2%;
	
}
/*Wird für die Referenzen und Produktübersichten verwendet, damit die Bilder mit dem Text gut aussehen*/
.clearfix {
	overflow: auto;
	padding-bottom: 3%;
	width: 80%;
	padding-left: 10%
}
/*Bild mit Text neben dran als class -- Bildposition 1= rechts 2= links */
.img1 {
	float: right;
	padding-left: 5%;
}
.img2 {
	float: left;
	padding-right: 5%;
}
.img3 {
	object-position: center;
	background-color: none;
	padding-right: 2%;
	padding-bottom: 10px;
	height: 30px;
	float: left;
}
/*ID um ein Bild auf der gesamten Seitenbreite zu zeigen*/
#vollbreit {
	width: 100%;
	height: auto;
}
/*ID Wird für das Einfügen des EU Fond Logos verwendet*/
#eu {
	width: 400px;
	float: right;
	padding: 2.5%;
}
/*Klasse zum sammeln der Schrift im Bild bei der Grafik "wir können mehr"*/
.container {
	position: relative;
	width: 100%;
	text-align: left;
	height: auto;
}

.top-left {
	position: absolute;
	top: 5%;
	left: 10%;
	width: 40%;
}
.flex {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 3%;
	padding-bottom: 3%;
}
.flexx {
	display: block;
	justify-content: center;
	align-items: center;
	padding-top: 3%;
	padding-left: 15%;
	padding-bottom: 3%;
}
/*evtl. veraltet und nicht im Einsatz, aber zu prüfen*/
#menu2 {
	float: left;
	font-family: 'Lexend Bold', sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: left;
	letter-spacing: inherit;
	padding-right: 2%;
	padding-top: 4%;
}
/*Allgemeine Button Einstellung, kommt beispielsweise im Footer zum Einsatz*/
button {
	background-color: #666666;
	color: #ffffff;
	font-family: "lexend regular";	
}
button:hover {
	background-color: #3d3d3d;
	color: #3F217B;
}

/*Mit # die IDs für verschiedene Knöpfe */
/*Button 1 für die SPrachumschaltung formatiert*/
#button1 {
	background-color: #3d3d3d;
	color: #3F217B;
	font-family: "lexend regular";
	font-size: 16px;
	border: none;
}
#button1:hover {
	background-color: #666666;
	color: #ffffff;
}
/*Button 2 ID des Kontaktbuttons auf der deutschen Indexseite */
#button2 {
	background-image: url("Seiten_Bilder/kontakt_rr.png");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 80%;
	height: 150px;
	align-content: center;
	background-color: transparent;
	border: none; 
}
#button2:hover {
	background-image: url("Seiten_Bilder/hover_kontakt_rr.png");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 80%;
	height: 150px;
	align-content: center;
	background-color: transparent;
	border: none; 
}
/*Button 3 ID des Kontaktbuttons auf der englischen Indexseite */
#button3 {
	background-image: url("Englisch/Grafiken/ihr_kontakt.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 80%;
	height: 150px;
	align-content: center;
	background-color: transparent;
	border: none; 
}
#button3:hover {
	background-image: url("Englisch/Grafiken/ihr_kontakt_hover.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 80%;
	height: 150px;
	align-content: center;
	background-color: transparent;
	border: none; 
}