*{
	margin: 0;
	padding: 0;
	font-family:Arial;
	font-size:12pt;
	line-height:1.5;
}
b{
	font-size:100%;
}
body{
	padding:1px;
}
h1{
	font-size: 16pt;
	margin: 20px 0 0 0;
}
h2{
	font-size: 14pt;
	margin:20px 0 0 0;
}
h3{
	font-size: 12pt;
	margin: 20px 0 0 0;
}
a{
	text-decoration:none;
	color:#00c;
}
a:visited{
	color:#00c;
}
a:hover{
	text-decoration:underline;
}
ul{
	list-style-position: inside;
}
ol{
	list-style-position: inside;
}
.nav{
	display:none;
}
#footerCopy p{
	margin: 0;
}
#mittig {
	width: auto;
	margin: 10px auto;
	text-align: left;
	background-color:#fff;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row-reverse wrap;
	flex-flow: row-reverse wrap;
}
body{
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 100%;
}
header, nav, article, footer {
	display: block;
}
header {
	width:100%;
	height: auto;
}

header a img{
	margin: 0 0 5px 0;
}
article {
	display:block;
	margin-top:8px;
	height:auto;
	width: 1250px;
}
section{
	margin:0;
}
.bildLinks{
	display:flex;
}
.bildLinks img{
	flex-grow:0;
	margin:0;
}
.bildLinks div{
	float:left;
	width:calc(100% - 264px);
	flex-grow:1
}
.bildLinks div h1{
	margin:0;
}

.presentation{
	display: flex;
	padding: 5px;
	border: 2px solid #000;
	border-radius: 5px;
	margin:10px 0;
}
.presentation img{
	width: 264px;
	order: 0;
	margin: 5px 20px 0 0;
}
.presentation p{
	width: calc(100% - 269px);
	order: 1;
	float: left;
}

.lehrgangsleiter{
	display: flex;
	padding: 5px;
	border: 2px solid #000;
	border-radius: 5px;
	margin:10px 0;
}
.lehrgangsleiter img{
	width: 175px;
	order: 0;
	margin: 5px 20px 0 0;
}
.lehrgangsleiter p{
	width: calc(100% - 175px);
	order: 1;
	float: left;
}
#suchForm input{
	margin:10px;
}
.distributors{
	width: 50%;
	display: flex;
	padding: 5px;
	border: 2px solid #000;
	border-radius: 5px;
	margin:10px 0;
}
.distributors div{
	width: 50px;
	order: 0;
	margin: 5px 20px 0 0;
}
.distributors p{
	width: calc(100% - 50px);
	order: 1;
	float: left;
}
.neuigkeit{
	display: flex;
	flex-direction: column;
	margin: 15px 0;
	border: 2px solid #2e4272;
	/*text-align: justify;*/
	padding: 10px;
	border-radius:5px;
}

.neuigkeit h1{
	margin: 0 0 10px 0;
}

.nBild{
	flex-direction: row;
}

.nBild div h1 p{
	font-size:12pt;
	margin: 5px 0;
}

.nBild img{
	width:264px;
	height: auto;
	align-self: center;
	margin: 0 10px 0 0;
}

#frame1{
	/*width:600px;*/
	height: 550px;
	align-self: center;
	margin: 0 10px 0 0;
	border:none;
}

.nBild a{
	align-self: center;
}

.nLinks img,iframe{
	order: 0;
}
.nRechts img,iframe{
	order: 1;
}

.nRechts a{
	order: 1;
}

.nLinks div{
	width:calc(100% - 264px);
	order: 1;
}
.nRechts div{
	width:calc(100% - 264px);
	order: 0;
	margin: 0 10px 0 0;
}
.border{
	width: 100%;
	/*border: 2px solid #000;
	padding: 10px;*/
	border-radius:5px;
	text-align: center;
}
.newsletter{
	width:100%;
	display: flex;
	margin: 15px 0;
}
.newsletter img{
	width: 160px;
	order: 0;
	margin: 0 10px 0 0;
}
.newsletter div{
	width:calc(100% - 161px);
	order: 1;
	float: left;
}
.rechts{
	width:28%;
	float:right;
}
.links{
	width:70%;
	float:left;
}
.rechtsSpeziell{
	width:38%;
	float:right;
}
.linksSpeziell{
	width:60%;
	float:left;
}

.rechtsKl{
	width:18%;
	float:right;
}
.linksGr{
	width:80%;
	float:left;
}
#vorteile{
	list-style-image:url("faviconKl.png");
	list-style-position:inside;
}

#vorteile li ul {
	margin-left: 2em;
}
.bild{
	width:100%;
	margin: 10px 0;
}

.bildH{
	width:30%;
	display: inline-block;
	margin: 10px 0;
}
.imgPdf{
	width:15px;
	height:16px;
	margin:0 10px 0 0;
}
.pdfAbsatz{
	margin: 5px 0;
}
.newsbox{
	color:#102a65;
	margin:15px 0;
	background:white;
	font-weight:normal;
	border: 2px solid #2e4272;
	border-radius: 5px;
	padding:10px;
	width:auto;
}
.newsbox a{
	color:#102a65;
}
.newsbox a:hover{
	color:#102a65;
	font-weight: bold;
	text-decoration: none;
}
.newsbox ul{
	list-style:outside;
	margin-left: 2em;
}
.newsbox h3{
	margin-top: 0.2em;
}
.navUnten{
	width:100%;
	float:left;
}
.gelbeBox{
	background-color: #ff0;
	width: 100%;
}
footer {
	width:100%;
	height:auto;
	padding: 20px 5px 5px 5px;
}
footer ul{
	list-style:none;
	float:left;
	margin:10px 15px;
}
#de_ctcpp_free_trial_form input{
	width: 99%;
	margin:10px 0;
}
#de_ctcpp_free_trial_form input[type="submit"]{
	width: 99%;
	margin:0 0;
}
#de_ctcpp_free_trial_form textarea{
	width: 99%;
	margin:10px 0;
}
#footerNav{
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
	background: #162955;
	background: -moz-linear-gradient(#061539, #162955);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #162955),color-stop(1, #061539));
	background: -webkit-linear-gradient(#061539, #162955);
	background: -o-linear-gradient(#061539, #162955);
	background: -ms-linear-gradient(#061539, #162955);
	background: linear-gradient(#061539, #162955);
}
#footerNav a{
	color: #cce;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
footer p{
	margin:5px 0;
	font: bold 10px Arial, Helvetica;
}
#footerNav a h1{
	font-size: 16px;
	text-transform: uppercase;
	margin:0 0 10px 0;
}
#footerNav  a:hover{
	color: #fafafa;
}
.mobile{
	display:none;
}
.youtube{
	width:500px;
	height:315px;
}

.banner{
	width:23%;
	height:auto;
	margin:20px;
}
.bannerBox{
	text-align: center;
}
.flaggen{
	width:30px;
	height:18px;
	border: 1px solid #000;
}
.flaggen:hover{
	/*border: 2px solid #000;*/
	box-shadow: 1px 1px 10px #000;
}
.broschuereMobil{
	display:none;
}
.news{
	margin-top:20px;
}
.news p{
	float:left;
}
.news img{
	float:left;
}
.leitungPerson{
 overflow:hidden;
 padding: 5px;
 border:1px solid #000;
 margin: 10px;
}
.leitungPerson h2{
	margin:0;
}
.leitungPerson p:nth-child(2){
	margin:0 0 10px 0;
}
.leitungPerson p:nth-child(3){
	float:left;
	width:calc(100% - 290px);
}
.leitungPerson img{
	float:left;
	margin:0 0 0 5px;
	width:275px;
	height:140px;
}
.flaggeNav{
	margin:6px 10px 0 10px;
	float:right;
	/*box-shadow: 1px 1px 10px #fff;*/
}
#ueberschriftHead{
	float:left;
	font-size: 25pt;
}
#ueberschrift{
	font-size: 1em;
}
.anwenderberichte{
	width:100%;
}
.anwenderberichte img{
	width:100px;
	float:left;
	margin-right: 5px;
}
.anwenderberichte p{
	width: calc(100% - 105px);
	float:left;
}

#searchBar {
		float: right;
		padding: 1ex;
	border:2px solid #00f;
	border-radius:10px;
	box-shadow:2px 2px 2px 2px grey;
	width: 20em;
	margin-top: 1.5em;
}

#result_box > header li,#result_box > footer li {
	display:inline;
	padding:1ex;
}

#result_box > header ul,#result_box > footer ul {
	list-style-type:none;
	padding:0;
	margin: 0;
	float: none;
	overflow-x: auto;
}

#result_box > header,#result_box > footer {
	text-align:center;
	border-top: solid 1pt blue;
	border-bottom: solid 1pt blue;
	color: blue;
	padding: 0;
}

#result_box h3 {
	   color: blue;
}
#result_box p {
	color: black;
	text-decoration: none;
}

.form{
	width:100%;
	padding:10px;
	border:2px solid #4f628e;
	border-radius:10px;
	margin:10px auto;
}
.form input{
	width: 100%;
	height: 30px;
	margin: 10px  0 0 0;
}
.form input[type="radio"]{
	width: auto;
	height:auto;
	margin-right: 5px;
}

.form textarea{
	width: 100%;
	height:75px;
}
.references div{
	display: inline-block;
	margin:5px;
}
.references{
	text-align: justify;
}
.referencesText div{
	display: inline-block;
	/*margin:5px;*/
}
.referencesText{
	padding: 10px;
	border:2px solid #000;
	border-radius: 5px;
	text-align: justify;
}
.referencesText h2{
	margin: 0 0 10px 0;
}
td{
	vertical-align: text-top;
}

table{
	margin: 20px 0;
}

.solutions {
		font-family: arial, sans-serif;
		border-collapse: collapse;
		margin:10px 0;
		width: 100%;
}

.solutions td, th {
		border: 1px solid #dddddd;
		text-align: left;
		padding: 8px;
}

.solutions tr:nth-child(even) {
		background-color: #dddddd;
}

.checkboxInput{
	width:auto;
	height: auto;
}

.checkboxStyle {
	width: 13px !important;
	height: 13px !important;
	padding: 0 !important;
	margin:5px !important;
	margin-left: -20px !important;
	vertical-align: bottom;
	position: relative;
	top: -1px;
	overflow: hidden;
}

.kachelfeld{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin-top: 40px;
	margin-bottom: 32px;
}

.kachel {
	width: 200px;
	height: 112px;
	margin-bottom: 8px;
	background-image: url('media/Kachel_Hintergrund.jpg'); /* Pfad zum Hintergrundbild */
	background-size: cover; /* Hintergrundbild vollständig ausfüllen */
	position: relative;
	text-align: left;
	color: white; /* Textfarbe für alle Zeilen */
}

.kachel > .text {
	position: absolute;
	top: 50%; /* Vertikal zentriert */
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin-left: 10px;
	margin-right: 4px;

}

/* Individuelle Stilisierung für jede Zeile */
.kachel > .text > .zeile1 {
	margin-top: 0px;
	font-size: 12px;
	font-weight: bold;
	color: lightblue;
}
.kachel > .text > .zeile2 {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
	color: white;
}
.kachel > .text > .zeile3 {
	font-size: 12px;
	color: lightgray;
}

.sidebar_kontakt {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	display: flex;
	flex-direction: column;
}
.sidebar_kontakt p {
	color: #22315B;
	font-size: 24px;
	margin-left: -10px;
	margin-bottom: 12px;
}
.sidebar_kontakt a {
	text-decoration: none; /* Links sollen nicht unterstrichen sein */
	color: #22315B;
	font-size: 18px;
	margin-bottom: 8px;
}
.sidebar_kontakt a i {
	vertical-align: text-bottom;
	font-size: 24px;
}

@media (min-width:1251px){
	#mittig{
		width:1250px;
	}
	footer p{
		font: bold 10px Arial, Helvetica;
	}
	.kachel {
		width: 260px;
		height: 112px;
	}
	
	.kachel > .text {
		margin-left: 20px;
		margin-right: 10px;
		margin-bottom: 4px;
	}
	
	/* Individuelle Stilisierung für jede Zeile */
	.kachel > .text > .zeile1 {
		font-size: 12px;
		font-weight: bold;
	}
	.kachel > .text > .zeile2 {
		font-size: 24px;
		font-weight: bold;
		line-height: 1.2;
	}
	.kachel > .text > .zeile3 {
		font-size: 12px;
	}	
}
@media (max-width:880px){
	*{
		font-size:1em;
	}
	.presentation img{
		display: none;
	}
	.presentation p{
		width: 100%;
	}
	.neuigkeit header{
		display: block;
	}
	.neuigkeit img{
		display: none;
	}
	.nLinks div{
		width: 100%;
	}
	.nRechts div{
		width: 100%;
	}
	body{
		padding:5px;
	}
	.mobile{
		display:block;
	}
	#navOben{
		display:none;
	}
	header{
		display:none;
	}
	.rechts{
		width:50%;
		float:left;
	}

	.links{
		width:100%;
	}
	.nav{
		display:block;
		width:100%;
		left:0;
		top:0;
		position:fixed;
		z-index: 24;
		color:#fff;
		background: #162955;
		background: -moz-linear-gradient(#4f628e, #162955);
		background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #162955),color-stop(1, #4f628e));
		background: -webkit-linear-gradient(#4f628e, #162955);
		background: -o-linear-gradient(#4f628e, #162955);
		background: -ms-linear-gradient(#4f628e, #162955);
		background: linear-gradient(#4f628e, #162955);
	}

	p{
		width:100%;
	}

	.navUnten img{
		width:30%;
		height:auto;
	}

	.youtube{
		width:100%;
	}
	.flaggen{
		display:none;
	}
	.pFlaggen{
		display:none;
	}
	.broschuereMobil{
		display:block;
	}
	.broschuere{
		display:none;
	}
	.imgPdf{
		height:auto;
		width:auto;
	}
	.banner{
		width:28%;
		height:auto;
		margin:5px;
	}
	.navigation{
		display:none;
	}
	footer ul{
		margin:10px 15px;
	}
	.form{
		width: 95%;
	}
	.c1{
		display: none;
	}
	.distributors{
		width:100%;
	}
	.kachelfeld{
		margin-top: 24px;
		margin-bottom: 20px;
	}
	
	article {
		display:block;
		margin-top:8px;
		height:auto;
	}
	.social-platforms {
		display: none;
	}
	.kachel {
		width: 150px;
		height: 100px;
		margin-bottom: 4px;
	}
	.kachel > .text {
		margin-left: 8px;
		margin-right: 4px;
	}
	
	/* Individuelle Stilisierung für jede Zeile */
	.kachel > .text > .zeile1 {
		font-size: 8px;
	}
	.kachel > .text > .zeile2 {
		font-size: 14px;
	}
	.kachel > .text > .zeile3 {
		font-size: 10px;
	}
}
@media print{
	#mittig, article{
		display: inline;
	}
	.rechts, .rechtsKl, #footerNav, .youtube,.bannerBox,.navUnten{
		display: none;
	}
	.links,.linksGr,.neuigkeit{
		width: 85%;
	}
}

/* Gestaltung einer prominenten Aufzählung von Themen, aber ohne Haken. Ursprung: Code Coverage Day - Themen */
ul.prominente-themen {
	list-style-type: square;
	padding: 0 2em;
}

ul.prominente-themen li::marker {
	color: rgb(255, 140, 0);
	font-size: 130%;
}