@CHARSET "UTF-8";

/* ====================================================================== */
/* Fonts */

/* wo werden die Eigenschaften definiert? */
/* --> Font-Family wird für body definiert. */
/* --> Die Font-Size wird in den einzelnen Boxes angegeben (boxworksh, boxmenue) */

/* ====================================================================== */

/* ==================================================================================== */
/* Kopzeile der Seite */
/* ==================================================================================== */

/*Aufbau der Kopfzeile*/

/* <div id="boxhead"> */
/* 	<div id="box_head_top"> */
/* 		<div id="top_text"> */
/* 			<span id="Clock">!Bitte JavaScript aktivieren!</span> */
/* 		</div> */
/* 	</div> */
/* 	<div id="bilder_box"> */
/* 		<div id="boxhead_left"> */
/* 			<img id="id_roiLogoHeader" src="./data/gebaeude_collGray10-H300.png" */
/* 				alt="ROILOGO nicht gefunden"> */
/* 		</div> */
/* 		<div id="boxhead_center"> */
/* 			<img id="id_fmdbLogoHeader" src="./data/fm_db_logo-H300.png" */
/* 				alt="FMDBLOGO nicht gefunden"> */
/* 		</div> */
/* 		<div id="boxhead_right"> */
/* 			<img id="id_roiMarke" */
/* 				src="./data/rotermundingenieure_orange-H300.png" */
/* 				alt="roiLOGO nicht gefunden"> */
/* 		</div> */
/* 	</div> */
/* </div> */


/*Zeichnet Rahmen um die Boxes zu sehen*/
/* #boxhead_left, #boxhead_right, #boxhead_center, #box_head_top { */
/* 	border: 1px solid blue; */
/* } */



/*======================================AUSSEN==============================================*/
/* Äußere Box*/
/* die Höhe ergibt sich aus der Höhe der Logos*/
#boxhead {
	/* 	border: 0.01ex solid red; */
	width: calc(100% - 6px); /*Die width der Box ist die width des Background abzgl. 2 x Padding und 2 x Rahmen*/
	padding: 2px; 
	padding-bottom: 12px; /*Abstand unten so groß wie die Box oben*/
	border: 1px solid;
	border-color: #e28c05;
	margin-bottom: 3px; /* Abstand der Boxes darunter*/
	background-color: #ffffff;

}


/*======================================Bilder==============================================*/
/*Nimmt die Bilder auf und sorgt dafür, dass die unten ausgerichtet werden können*/
#bilder_box {
	display: flex;
	align-items: flex-end;
}

/*======================================OBEN==============================================*/
/* Box für die obere Zeile mit der Uhr */
#box_head_top {
	height: 14px;
	padding-right: 10px;
}
/* Box oben rechts mit der Uhr bzw. dem JavaScript-Hinweis*/
#top_text {
	/* 	border: 1px solid lightgreen; */
	float: right;
	font-size: 10px;
	color: darkgrey;
}

/*======================================LINKS==============================================*/
/* Box für Bild rechs und Bild rechts*/
#boxhead_left {
	padding-left: 10px;
	padding-bottom: 11px; /*vertikale Ausrichtung*/
	width: calc(33% - 10px); /* width + Padding links ist 33%*/
	min-width: 210px; display : flex;
	align-items: center;
	float: left;
	display: flex;
}

#id_roiLogoHeader {
	height: 25px;
}

/*======================================MITTE==============================================*/
/* Box für Bild in der Mitte und Bild für Mitte*/
#boxhead_center {
	width: 33%;
	min-width: 460px;
	display: flex;
	align-items: center;
	color: #4d4f53;
	justify-content: center;
	float: left;

	/* 	calc(60%-2px); */
}

#id_fmdbLogoHeader {
	height: 60px;
}

/*=========================================RECHTS===========================================*/
#boxhead_right {
	/* Box für Bild rechts und Bild rechts*/
	width: calc(34% - 6px);
	/*Ohne Rahmen um die Boxes mit den Bildern*/
	width: calc(34% - 10px); /* width + Padding rechts ist 33%*/
	min-width: 210px;
	padding-right: 10px;
	padding-bottom: 7px; /*vertikale Ausrichtung*/
}

#id_roiMarke {
	height: 25px;
	float: right;
}

/*=========================================????===========================================*/


/* ==================================================================================== */
/* Ende Kopzeile */
/* ==================================================================================== */