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


.fluid-type(@property, @min-vw, @max-vw, @min-size, @max-size) {
	@{property}: @min-size;
	@media screen and (min-width: @min-vw) {
		@{property}: calc( @min-size ~" + " unit(@max-size - @min-size) ~" * ((100vw - " @min-vw ~") /" unit(@max-vw - @min-vw) ~")" );
	}
	@media screen and (min-width: @max-vw) {
		@{property}: @max-size;
	}
}

@farbe1:#666; //
@farbe2:#dc3545;
@farbe3:#f3ba57;
@farbe4:#b45704;


@cFooter:#efe0b9;
@cHeader:#efe0b9;
@cfootera:#342b1b;
@chover:#2f2718;
@white:#fff;

@acolor:#212529;
@blue1:#173885;
@blue2:#1a71be;
@blue3:#1a60be;
@blue4:#3d8fc9;
@beige1:#efe9b7;
@bluelight1:#c9e6f2;
@bluelight2:#eff5f8;
@orange:#ff7f27;
@grau:#c4bfbf;
@paddingbottom:80px;
@bradius:25px;

body{ color:#666;}

a{color:@blue1;
	&.nounderline:hover{ text-decoration: none;}
}
.underline{ text-decoration: underline;}
.nounderline{ text-decoration: none;}
.pad5 { padding:5px;}
.pad10 { padding:10px;}
.pad15 { padding:15px;}
.padB50 { padding-bottom:50px;}
.padB60 { padding-bottom:60px;}
.padB70 { padding-bottom:70px;}
.padB90 { padding-bottom:80px;}
.padA { padding: 0px 20px 15px 30px;}


.mar5 { margin:5px;}
.mar10 { margin:10px;}
.marB40 { margin-bottom:40px;}
.marB50 { margin-bottom:50px;}
.marB60 { margin-bottom:60px;}
.marB70 { margin-bottom:70px;}
.marB90 { margin-bottom:80px;}
.marFlex {	.fluid-type(margin-bottom, 500px, 1920px, 70px, 100px); }
.marFlex2 {	.fluid-type(margin-bottom, 500px, 1920px, 70px, 140px); }

.marT60{ margin-top:60px;}


.top50{top:45%;}
.bgFarbe1{  background-color:@farbe1 !important; }

.bgFarbe2{  background-color:white; }
.bgFarbe3{  background-color:@farbe3 !important; }
.bgFarbe4{  background-color:#b45704 !important; }
.bgFarbe5{  background-color:#f3b562 !important; }
.bgFarbe6{  background-color:#b46d1a !important; }
.bgBlack{  background-color:black; }

/*@media (max-width: 768px) {
	.bgFarbe1{  background-color:white; }
	.bgFarbe2{  background-color:@farbe1; }
 }*/

.op50 {opacity: 50%;}
.op90 {opacity: 90%;}

.bgBlue1{ background-color:@blue1; color:@white; a{color:white;}}
.bgBlue2{ background-color:@blue2; color:@white;}
.bgBlue3{ background-color:@blue3; color:@white;}
.bgF4{ background-color:#666; color:@white;}

.colorW{color:white !important;}
.colorFarbe1{color:@farbe1;}
.colorFarbe2{color:@farbe2;}


.hColorB1{color:@blue1;}

.bgWhite{ background-color:@white; color:@blue1; a{color:@blue1;}}
.bgBluelight1{ background-color:@bluelight1; color:@blue1;  }
.bgOrange{background-color: @orange;}
.bgSOrange {background-color: @orange; color:white;}

.width80 {width:80%;}
.width100 {width:100%;}
.width100px {width:100px;}
.width200px {width:200px;}

.height50 { height:50px;}
.height100{ height:100px;}
.height120{ height:120px;}
.height150{ height:150px;}
.height200{ height:200px;}
.height300{ height:300px;}
.height500{ height:500px;}
.h100 { height:100%;}

.maxH200{max-height:200px;}
.maxH250{max-height:250px;}
.maxH350{max-height:350px;}

.minheight50 { min-height:50px;}
.minheight100{ min-height:100px;}
.minheight150{ min-height:150px;}
.minheight250{ min-height:250px;}
.minheight400{ min-height:400px;}

.mpoint{cursor: pointer;}
.bt{
	border-style:solid none none none;
	border-color:white;
	border-width:1px;
}

.clear{ clear:both;}

header{
	position: relative;
}

.tcenter{text-align: center;}




	h1 {	.fluid-type(font-size, 768px, 1920px, 24px, 38px); color:#666; }
	.square {	.fluid-type(font-size, 768px, 1920px, 23px, 34px); color:#666; }
	
	h2 {	.fluid-type(font-size, 768px, 1920px, 20px, 30px); color:#333; margin-top:20px;}
	
	h3.box {	.fluid-type(font-size, 768px, 1920px, 17px, 25px); padding:10px; color: #333; background: transparent;}
	.box {	.fluid-type(font-size, 768px, 1920px, 17px, 25px); padding:10px; color: #333; background: transparent; display:block;}
	h3 {	.fluid-type(font-size, 768px, 1920px, 17px, 25px); color:#fefefe; background-color:#333; padding:10px;}

	p {	.fluid-type(font-size, 500px, 1920px, 18px, 25px);}
	li {	.fluid-type(font-size, 500px, 1920px, 18px, 25px);}
	div {	.fluid-type(font-size, 500px, 1920px, 13px, 18px);}
	.big{.fluid-type(font-size, 500px, 1920px, 100px, 200px);}


@media only screen and (max-width : 767px){
	h1 {	font-size:28px;}
	h2 {	.fluid-type(font-size, 500px, 767px, 25px, 38px); color:#333; margin-top:20px;}
	h3 {	.fluid-type(font-size, 500px, 767px, 15px, 22px);}
	.square {	font-size: 28px; }
	.box {	font-size: 22px;}

}
.nav-item.active a.nav-link{
	color:#000;
	
}



td{padding:5px;}
input{
	background-color: #eee;
	padding:5px 10px 5px 10px;

	&.inp{width:80%;}

}
input[type="submit"]{
	cursor: pointer;

}

textarea {
	background-color: #eee;
	padding:5px 10px 5px 10px;
	border:0;
	width:90%;

}
ul.spezial{
		 list-style: none;
		 padding-left:50px;
	// list-style-image:url(../bilder/li.png);
	@media only screen and (max-width : 790px) {	 padding-left:0px;	}
	li {
		background-image: url(../bilder/li.png);
		background-repeat: no-repeat;
		background-position: 0px 10px;
		padding-left: 50px;

		color:@beige1;
		line-height:40px;

		a{
			color:@beige1;
				.fluid-type(font-size, 500px, 1920px, 13px, 20px);
		}
	}


	}

/*
ul li{
	list-style-type:none;
	.fluid-type(font-size, 500px, 1600px, 16px, 23px);
	.fluid-type(margin-bottom, 500px, 1600px, 15px, 20px);
	.fluid-type(line-height, 500px, 1600px, 28px, 40px);

}*/



.status{
	position:fixed;
	top:0;
	right:20px;
	background-color: @grau;
	color:white;
	width:160px;
	height:25px;
	font-size:11px;
 	border-radius: 0 0px 15px 15px;
	z-index:10;
	-webkit-box-shadow: 0px 0px 25px 20px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 25px 20px rgba(255,255,255,1);
	box-shadow: 0px 0px 25px 20px rgba(255,255,255,1);
}

footer {
	background-color:white;
	height:100px;

	a{
		color:@cfootera;
		padding: 20px;

		&:hover{color:black; text-decoration: none;}

	}
}


.sectionmain{}


#infotext{
	background-color:#fff;
	min-width:300px;
	min-height:200px;
	margin:auto;
	padding:15px;
	border-radius:10px;

}

.center{
	display: flex;
	justify-content : center;
	align-items:center;
}
.jusleft{
	display: flex;
	justify-content : start;
	align-items:center;
}



.bgOverlay{
	position:absolut;
	background-color:@white;
	background-position: 50%;
	background-repeat: no-repeat;

	margin: 1.5em auto 2.5em;

}


.bgLogin{

	position:relative;
	background-color: #fff;
	margin: 1.5em auto 2.5em;
	height:500px;



}


.overlayimg{
    position: absolute;
    color:@white;
    padding:20px 10px 20px 10px;
		z-index:2;
		.fluid-type(font-size, 500px, 1600px, 15px, 22px);

		@media only screen and (max-width : 768px) {
			 position: relative;
			 padding:20px 10px 20px 30px;
			 background-color: @blue1;
		}


}





.loginText{
    position: absolute;
		top:45%;
		@media only screen and (max-width : 768px) {
			 position: relative;
			 top:inherit;
			}
}




.imgLogin{
    position:absolute;
	width: 100%;
    max-height: 600px;
    vertical-align: middle;
    border: 0;
    z-index:2;
}


// Checkbox

.chkContainerOuter {
  .fluid-type(font-size, 1px, 1600px, 14px, 21px);
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

   input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}
	input:checked ~ .checkmark {
		background-color: @blue4;
	}
	input:checked ~ .checkmark:after {
		display: block;
	}


	.checkmark {
	  position: absolute;
	  top: 10px;
	  left: 0;
	  height: 16px;
	  width: 16px;
	  background-color: white;
	}

	.checkmark:after {
	  content: '';
	  color:@white;
	  position: absolute;
	  display: none;
	  left: 4px;
	  top: 4px;
	  width: 5px;
	  height: 9px;
	  border: solid white;
	  border-width: 0 2px 2px 0;
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);

	 // border: solid white;
	 // border-width: 5px 5px 5px 5px;
	}

}



.relativ{
	position:relative;
}
.absolut{
	position:absolute;
}


.chkContainerInner {
  .fluid-type(font-size, 1px, 1600px, 11px, 16px);
  display: block;
  position: relative;
  padding: 0 10px 0 35px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

   input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}
	input:checked ~ .checkmark {
		background-color: @blue4;
	}
	input:checked ~ .checkmark:after {
		display: block;
	}


	.checkmark {
	  position: absolute;
	  top: 5px;
	  left: 0;
	  height: 14px;
	  width: 14px;
	  background-color: white;
	  margin-left:10px;
	}

	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
		left: 5px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 2px 2px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}



}

.button {
  .fluid-type(min-width, 500px, 1900px, 120px, 180px);
  .fluid-type(font-size, 500px, 1900px, 14px, 16px);


  //background-color: @blue1;
  border: none;
  color: white;

  text-align: center;
  text-decoration: none;
  //display: inline-block;

  margin: 4px 10px 4px 0px;
  cursor: pointer;
  border-radius:@bradius;

  transform: scale(1);
 &.normal {
	   padding: 10px 25px 10px 25px;
 }
 &.with100 {
	  // .fluid-type(font-size, 500px, 1900px, 15px, 24px);
		font-size:24px;
		width: 100%;
		 padding: 10px 25px 10px 25px;
 }

  &.small{
	  padding: 5px 12px 5px 12px;
	  .fluid-type(font-size, 500px, 1900px, 12px, 14px)
	}

	&.smallvery{
	  padding: 4px 10px 4px 10px;
		margin-top:4px;
		.fluid-type(min-width, 500px, 1900px, 120px, 150px);
	  .fluid-type(font-size, 500px, 1900px, 12px, 14px)
	}
 &.color2{
	  background-color: @blue4;
	}

	&.colorwhite{  background-color: white; color:@blue1;}

  &:hover{
	  //transform: scale(1.1);// perspective(1px);
	  color:white;
	  text-decoration:none;
	  background-color:@orange;
  }
	&.in{ display:inline-block;}

}





#anmeldung{
        color:#ccc;
        width:500px;
        padding: 10px 0 0 10px;
		position: absolute;
}

#anmeldung table { color:@blue1;  opacity: 0.7; padding: 5px;}


.eingabe{

	border: solid 1px @blue1;
	border-radius:@bradius;
	margin-right: 10px;

}

.footer{padding:20px; height:100px;}
.awhite{ color:white; padding:20px ; text-decoration:underline;}
.awhite:hover{ color:white;}


.renditedreieck{
		display: grid;
		//grid-template-columns:	1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-columns:	repeat(17, 1fr);
	 	justify-items: end;
		grid-auto-rows: 10px;
		//align-items: center;
		grid-gap: 5px;
		row-gap: 2em;

}



.createTargetTable{
	//display: grid;
 	//grid-template-columns:	1fr 3fr 1fr 3fr 1fr 1fr 1fr 1fr 1fr 1fr;
	//grid-template-columns:	3fr;
	//grid-auto-rows: 50px;
	//align-items: center;
	//grid-gap: 10px;
	//row-gap: 2em;
//	a.anker{ color:@acolor; text-decoration:underline;}

	//.trW{background-color:white;}
	//.trB{background-color:@bluelight2;}
	padding-bottom:200px;
}

.targetFormular{
	div { padding: 10px 0 10px 0;}

}

.resulttable{
	display: grid;
 	grid-template-columns:	1fr 1fr 2fr 4fr 2fr 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
	grid-auto-rows: 50px;
	align-items: center;
	grid-gap: 10px;

	row-gap: 1em;
	a.anker{ color:@acolor; text-decoration:underline;}

	.trW{background-color:white;}
	.trB{background-color:@bluelight2;}
	div{padding:10px;}
}


.resulttableTarget{
	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 3fr 1fr 1fr 1fr 1fr 1fr 1fr ; //12
  grid-auto-rows: 100px;
  align-items: center;
	grid-gap: 10px;
	row-gap: 2em;
	a.anker{ color:@acolor; text-decoration:underline;}
	.trW{background-color:white;}
	.trB{background-color:@bluelight2;}
}

.filter{
	float:left;
	padding: 0 20px 0 10px;

}

.inner{display:inline-block;}
.iLikeOverlay{
	 //height: 500px;
	 max-width:800px;
 }
.targetChooser{
	overflow: auto;
}

.over{	overflow: hidden; }

div.buttonTarget:hover{
	background-color:  @orange;
	cursor:pointer;

}

.dis{
	pointer-events: none;
  cursor: default;
}

.left{ float:left;}
.secDreieck{
		.fluid-type(font-size, 500px, 1920px, 11px,18px);

}


.navbar{
	z-index:5;
  margin-left:10px;
}
.dropdown-menu{ border:none !important; }
.dropdown-menu li{ padding-left:10px; padding-right:10px; border-style:dashed none none none; border-width:1px; border-color:#aaa;}
li {
	padding-left: 18px;
	line-height:30px;
	
}
ul.ul2 li {margin-bottom: 18px;}


li.nav-item {

	padding-left:0;
	line-height:30px;
}

li.nav-item:not(:first-child){
	border-style: solid none none none;
	border-width: 1px;
	border-color:#eee;
}

.dropdown-item { padding: 0.35rem 1rem !important;}

.dropdown-menu-light .dropdown-item.active, .dropdown-menu-light .dropdown-item:active{
  background-color: #666 !important;
}


.line{
	border-style: solid none none none;
	border-width: 1px;
	border-color:#eee;
}
.line2{
	border-style: solid none none none;
	border-width: 1px;
	border-color:#888;
}

.navbar-toggler:focus{
	box-shadow: none;
}



.icon{
	background-image: url(../bilder/li.png);
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 50px;
	line-height: 40px;
}

.bg1{
	background-image: url(../bilder/boxbild1.jpg);
	background-repeat: no-repeat;
	background-position: 0px 5px;

}
.bg2{
	background-image: url(../bilder/boxbild2.jpg);
	background-repeat: no-repeat;
	background-position: 0px 5px;

}

.bgI1{
	background-image:url(../bilder/test2.jpg);
	background-repeat: no-repeat;
	position:relative;
}


.bgI2{
	background-image:url(../bilder/pfeil.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
	position:relative;
}
.bgILupe{
	background-image:url(../bilder/lupe_down.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	position:relative;
}
.bgIKnowhow{
	background-image:url(../bilder/know_how.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left center;
	position:relative;
}



.bgIEasy{
	background-image:url(../bilder/easy.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left center;
	position:relative;
}


.bgHeader{
	background-image:url(../bilder/header_template_1910_1000_18958289_m.jpg);
	background-repeat: no-repeat;
	position:relative;
	background-size: 100%
}