:root {
	--background-color: #FFFFFF;
	--highlight-color: #b3cbf0;
	--menu-color: #324f7d;
	--sheet-color: white;
	--border-color: #324f7d;
	
	--text-light-color: #333333;	/* auf hellem Untergrund */
	--text-dark-color: #FFFFFF;		/* auf dunklem Untergrund */
	
	--border-radius: 0px;
}

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	margin: auto auto;		
	color: var(--light-color);	
	background-color: var(--background-color);	
	font-family: 'Rajdhani', sans-serif;   /*   font-family: 'Rajdhani', sans-serif;   */
}

.padding_bottom {
	padding-bottom: 20px;
}

.padding_bottom_s {
	padding-bottom: 7px;
}

.padding_top {
	padding-top: 35px;
}

.padding_top_20 {
	padding-top: 20px;
}

.clear {
	clear: both;
}

/*	----- NAVIGATION TOP -----	 */

#navigation_top	 {
	width: 100%;
	height: 125px;	
	position: fixed;
	top: 0;	
	background-color: rgba(250, 250, 250, 0.8);
	background: url(top_banner.jpg);
	background-size: cover;	
}

#banner_top {
	max-width: 960px;	
	display: flex;
	flex-flow: row wrap;	
	justify-content: space-between;
	align-items: center;
	margin: auto;
}

#logo_background {
	background-color: rgba(250, 250, 250, 0.85);
	height: 100px;
	width: 240px;
	margin: 10px;
}

#logo_image {
	width: 200px;	
	height: 80px;
	margin-left: 20px;
	margin-top: 10px;	
	float: left;
	background: url(logo.png);
	background-size: cover;
}

#menu_top {
	clear: both;
	width: 100%;	
	background-color: var(--menu-color);	
	border-top: solid var(--highlight-color) 3px;
	border-bottom: solid white 1px;
}

#menu_top a {
	color: var(--text-dark-color);
	font-weight: 300;	
	font-size: 20px;
	text-decoration: none;
	padding-right: 5px;
	padding-left: 5px;	
	border-color: var(--menu-color);	
	margin: 2px;
	margin-left: 10px;
	margin-right: 10px;
}

#menu_top a:hover {
	color: var(--highlight-color);
}

#menu_top div {
	width: 960px;
	height: 26px;
	max-width: 90%;	
	margin: auto;
}

#menu_top ul {
	list-style: none;
}

#menu_top ul li {
	float: right;
	background-color: var(--border-color);
}

#menu_top ul li ul li{
	float: none;
	display: none;
	background-color: rgba(179, 203, 240, 0.5);
	border-top: solid white 1px;
}

#menu_top ul li:hover ul li {
	display: block;
}

#menu_top ul li ul li a {
	margin-left: 20px;
}

#menu_top ul li ul li a:hover {
	color: var(--text-light-color);
}

/* 	----- NAVIGATION CENTER -----  */

#navigation_center {
	width: 100%;
	margin: auto;
	margin-top:125px;
	padding-top: 60px;	
	padding-bottom: 30px;
	background: url(chip.png);
}

.sheet {
	max-width: 960px;
	width: 90%;
	margin: auto auto;
	
	background-color: var(--sheet-color);

	padding-top: 0px;
	padding-bottom: 0px;
	
	border-radius: var(--border-radius);
	border: solid var(--border-color) 1px;
	border-top: solid var(--border-color) 0px;
	border-bottom: solid var(--border-color) 10px;
	
	line-height: 1.0em;	
	color: var(--text-light-color);
}

.sheet h1 {
	padding: 35px;
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: 1.3em;
}

.sheet h2 {
	padding: 35px;
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: 1.3em;
}

.sheet h3 {
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 35px;
	padding-bottom: 20px;
	font-size: 22px;
}

.sheet h4 {
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 28px;
	padding-bottom: 15px;
	font-size: 19px;
}

.sheet p {
	padding-left: 35px;
	padding-right: 35px;
	line-height: 1.3em;
	font-size: 19px;
	font-weight: 500;
}

.sheet ul {
	
	padding-left: 10px;
	margin: 10px;
}

.sheet li {
	padding-left: 10px;
	padding: 5px;
	font-size: 18px;
	margin-left: 35px;
}

#dark_element {
	background-color: var(--border-color);
	clear: both;
}

#dark_element h1 {
	color: var(--text-dark-color);
}

#dark_element h3 {
	color: var(--text-dark-color);
}

#dark_element p {
	color: var(--text-dark-color);
}

#trinity {	
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	background-color: var(--sheet-color);
	
	padding-top: 0px;
	padding-bottom: 10px;
}

#trinity a {
	width: 300px;
	float: left;
	margin: 0px;
	padding: 0px;
	
	border-radius: var(--border-radius);
	border: solid var(--sheet-color) 1px;
	border-color: #dedede;
	line-height: 1.3em;
	
	display: flex;
	flex-flow: column wrap;
	justify-content: center;

	background-color: var(--sheet-color);
	
	text-decoration: none;
	
	margin-top: 10px;
}

#trinity a:hover {
	border-color: var(--highlight-color);
}

#trinity p {
	margin: 0px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	color: #1f1f1f;
}

#trinity h2 {
	color: black;
	text-align: center;
	padding: 0px;
	font-size: 30px;
}

#trinity div {
	border: solid var(--menu-color) 0px;
}

#logo {
	width: 240px;
	height: 240px;
	background: white;
	background-size: contain;
	margin: auto auto;
}

#image-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;	
	align-items: center;
	margin: auto auto;
	padding-top: 20px;
	padding-bottom: 20px;
	
	padding-left: 25px;
	padding-right: 25px;
	
	background-color: var(--border-color);
	width: calc(100% - 50px);
}

#b1 {
	box-sizing: border-box;
	background-size: cover;
	width: 23%;
	height: auto;
	min-height: 80px;
	max-height: 160px;
	margin-top: 10px;
	margin-left: 1%;
	margin-right: 1%;
	
	border: solid var(--highlight-color) 1px;
}

#b2 {
	box-sizing: border-box;
	background-size: cover;
	width: 23vw;
	height: 23vw;
	max-height: 280px;
	max-width: 280px;
	margin-top: 10px;
	margin-left: 1%;
	margin-right: 1%;
	
	border: solid var(--highlight-color) 1px;
}

#cont {
	width: 100%;	
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	justify-content: space-around;
}

#start {
	font-size: 18px;
}

#kabelsatz {
	width: 35vw;
	height: 35vw;
	
	min-width: 180px;
	min-height: 180px;	
	
	max-width: 350px;
	max-height: 350px;
	background-image: url(kabelsatz.png);
	background-size: cover;
}

#kabelsatz2 {
	width: 35vw;
	height: 35vw;
	
	min-width: 180px;
	min-height: 180px;	
	
	max-width: 350px;
	max-height: 350px;
	background-image: url(kabelsatz2.png);
	background-size: cover;
	float: right;
	margin-top: 30px;
	margin-bottom: 20px;
}

#karlottchen_bild {
	width: 35vw;
	height: 35vw;
	
	min-width: 180px;
	min-height: 180px;	
	
	max-width: 350px;
	max-height: 350px;
	
	background-image: url(karlottchen.png);
	background-size: cover;
}

#listx {
	width: 50%;
}

#kontakt {
	margin-top: 20px;
	text-align: center;
	margin: 40px;
	

}

#kontakt a {
	text-decoration: none;
	font-size: 22px;
	color: var(--text-dark-color);	
	background-color: var(--border-color);
	padding-left: 55px;
	padding-right: 55px;
	border-radius: 8px;
	border: solid var(--border-color) 1px;
}

#kontakt a:hover {
	color: var(--highlight-color);
}

#bedienelement {
	width: 55%;
	max-width: 450px;
	min-width: 257px;
	height: auto;
	background: white;
	background: url(bedienelement.png);
	background-size: cover;
	float: right;
}

#karlottchen {
	width: 55%;
	max-width: 450px;
	min-width: 257px;
	height: auto;
	background: white;
	background: url(bedienelement.png);
	background-size: cover;
	float: left;
}

/* KONTAKT */

#kontaktdaten {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	
	margin-top: 0px;
	margin-bottom: 0px;
}

#kontaktdaten p {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

#kontaktdaten a {
	text-decoration: none;
	color: var(--text-dark-color);
	background-color: var(--border-color);
	margin-left: 20px;
	margin-bottom: 40px;
	padding-left: 55px;
	padding-right: 55px;
	border-radius: 8px;
	border: solid var(--border-color) 1px;
}

#kontaktdaten a:hover {
	background-color: var(--highlight-color);
	border-color: var(--highlight-color);
}

#k1 {
	width: 85px;
	padding-right: 0px;
	margin-left: 20px;
}

#k2 {
	padding-left: 0px;
	padding-right: 10px;
}

#logo_sq {
	width: 80px;
	height: 80px;
	background: white;
	background: url(logo_sq.png);
	background-size: cover;
	margin-left: 35px;
}

#kontaktbox {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

#kontakt_banner {
	width: calc(100% - 390px);

	background: white;
	background: url(banner_kontakt.jpg);
	background-size: cover;
	height: 220px;
	margin: 20px;

	
}

/* UNTERNEHMEN */

#mitarbeiter_box {
	width: 300px;
	float: left;
	margin: 0px;
	padding: 0px;
	
	border-radius: var(--border-radius);
	border: solid gray 1px;
	border-top: solid gray 1px;
	border-bottom: solid gray 1px;
	
	border-color: var(--sheet-color);
	line-height: 1.3em;
	
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;

	background-color: var(--sheet-color);
	
	text-decoration: none;
	
	border: solid red 1px;
}

#mitarbeiter_box h2 {
	padding-bottom: 0px;
	margin-top: 5px;
	color: black;
}

#mitarbeiter_box p {
	font-size: 14px;
}


#portrait {
	width: 225px;
	height: 300px;
	background-size: contain;
	border-radius: 0px;	
	margin-top: 15px;
}

/* PARTNER */

#partner {
	padding: 20px;
}

#partner small {
	color: gray;
}

#partner a {
	text-decoration: none;
	padding: 15px;
	font-size: 22px;
	color: black;
	line-height: 1.6em;
}

/* IMPRESSUM UND DATENSCHUTZERKÄRUNG */

#impressum_text p {
	font-size: 17px;
	padding-bottom: 10px;
}

#impressum_text ul {
	margin-left: 35px;
}

#job {
	font-size: 14px;
}

.sheet2 {
	max-width: 960px;
	width: 90%;
	margin: auto auto;
	
	background-color: var(--sheet-color);

	padding-top: 0px;
	padding-bottom: 0px;
	
	border-radius: var(--border-radius);
	border: solid var(--border-color) 1px;
	border-top: solid var(--border-color) 10px;
	border-bottom: solid var(--border-color) 10px;
	
	line-height: 1.0em;	

}

#button_back {
	height: 35px;
	width: 35px;
	
	margin: 10px;
	
	float: right;
	background-color: var(--border-color);
	border: solid var(--border-color) 1px;
	text-align: center;
	text-decoration: none;
	color: var(--text-light-color);
	font-size: 20px;
	color: white;
	background: url(x_button.png);
	background-color: var(--border-color);
}

#button_back:hover {

	background-color: var(--highlight-color);
}

#karlottchen_big {
	width: 90vw;
	height: 90vw;
	max-height: 600px;
	max-width: 600px;
	margin: auto;
	background: url(karlottchen.png);
	background-size: cover;
}

#bedienelement_big {
	width: 90vw;
	height: 90vw;
	max-height: 600px;
	max-width: 600px;
	margin: auto;
	background: url(bedienelement.png);
	background-size: cover;
}

#kabelsatz_big {
	width: 90vw;
	height: 90vw;
	max-height: 600px;
	max-width: 600px;
	margin: auto;
	background: url(kabelsatz.png);
	background-size: cover;
}

#schaltkasten_big {
	width: 90vw;
	height: 90vw;
	max-height: 600px;
	max-width: 600px;
	margin: auto;
	background: url(schaltkasten.jpg);
	background-size: cover;
}

#schaltkasten2_big {
	width: 90vw;
	height: 90vw;
	max-height: 600px;
	max-width: 600px;
	margin: auto;
	background: url(schaltkasten2.jpg);
	background-size: cover;
}

#kabelsatz2_big {
	width: 90vw;
	height: 90vw;
	max-height: 600px;
	max-width: 600px;
	margin: auto;
	background: url(kabelsatz2.png);
	background-size: cover;
}

/* NAVIGATION BOTTOM */

#navigation_bottom {
	clear: both;
	height: 24px;
	background-color: var(--menu-color);
	padding-bottom: 30px;
	font-size: 20px;
	border-top: solid var(--highlight-color) 3px;
}

#navigation_bottom div {
	max-width: 960px;
	margin: auto;
	display: flex;
	flex-flow: row wrap;
}

#navigation_bottom a {
	color: white;
	text-decoration: none;
	margin: 12px;
}

#navigation_bottom a:hover {
	color: var(--highlight-color);
}