@charset "UTF-8";
 
 html{ font-size:100%; }
 
 @media screen and (max-width : 539px)  {
 /* @media screen and (min-width : 540px) and (max-width :828px) { */
/******************************************************************************/
/* Grundgerüst SmartPhone
/******************************************************************************/
 body {margin: 0 0 0 0; font-family:Verdana, Helvetica, Arial, sans-serif, Times New Roman, Century; font-style:normal; font-size:1rem; background:#FFF; color:#000 }
 
 section{ margin:1em 0 1.5em 0;}
 section p{line-height:1.5rem;}
 section h1{color:#5190ba;  //1A83C6;}
 section div h2{margin-top:1.2em; box-shadow: .4em .4em .4em #AFAFAF;}
 section .h1center{font-size:1.2em; margin: 3em 0 0 0; text-align:center;}
 section .divcenter{display: -webkit-flex; display: flex; flex-flow: row wrap; align-items: center; -webkit-justify-content: center; justify-content: center; width:100%;}
 section .divcenter_{margin:0 auto; width:60%;}
  h1{
   /* font-variant: small-caps; */
   font-size: 1.0rem;
  }	 
 } /* media screen */

	 
 @media screen and (min-width : 540px) and (max-width :1828px) { 
/******************************************************************************/
/* Grundgerüst LapTop, PC
/******************************************************************************/
 body {margin: 0 0 0 0; font-family:Verdana, Helvetica, Arial, sans-serif, Times New Roman, Century; font-style:normal; font-size:1rem; background:#FFF; color:#000 }
 
 section{ margin:1em 0 1.5em 0;}
 section p{text-align: justify;  line-height:1.5rem;}
 section h1{color:#5190ba;  //1A83C6;}
 section div h2{margin-top:1.5em; box-shadow: .6em .6em .6em #AFAFAF;}
 section .h1center{font-size:1.5em; margin: 3em 0 0 0; text-align:center;}
 section .divcenter{display: -webkit-flex; display: flex; flex-flow: row wrap; align-items: center; -webkit-justify-content: center; justify-content: center; width:100%;}
 section .divcenter_{margin:0 auto; width:60%;}
  h1{
   /* font-variant: small-caps;  */
   font-size: 1.3rem;
  } 
 } /* media screen */ 
 
 
 
 /****************/
 /* Navigation
 /****************/
 nav{
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center; 
  align-items: center;
  margin: 0 auto;
  max-width: 98%;
  position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 50px;
  z-index:1;
  /* background: url(../images/platine.jpg); */
 }

 nav ul {margin:0; padding:0;}
 nav ul li a { display: block; color: #fff; text-decoration: none;}
 nav ul li ul {padding:0px; position:absolute; top:2.2em; left:0px; display:none; visibility:hidden;}
 nav ul li:hover ul { display:block; visibility:visible;}
 
 nav ul li ul li:hover ul { display:block; visibility:visible;} 
 
 nav ul li ul li{ background:#5190ba;  //1A83C6; display: block; text-align: left; width:12em; font-size: .8rem; text-shadow: #7ea4bd 0 1px 0; z-index:2;}
 nav ul li ul li:hover { background: #00C0FF;}
 
 nav ul li{
   border: 1px solid #FFF;
   background: #00C0FF;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: .5em .7em;
   
   -webkit-border-radius: .6em;
   -moz-border-radius: .6em;
   border-radius: .6em;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #FFF;
   font-weight:bold;
   font-size: .8rem;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   
   text-align:center;
   display: inline-block;
   position:relative;
   width: 5.4rem;   
   }
 
 nav ul li:hover {
   border: 1px solid #FFF; //#0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #00C0FF; //#3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #000;
 }
   
 nav ul li:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #000;
  } 
  /*##################################################*/

 
 /*********************************************/
 /* Textformatierungen
 /*********************************************/
 /* Haupt Textbereiche */
 .main_txt{
   margin-bottom: 2rem;
   padding: 0 3rem 0 3rem;	 
 }
 

	.trenn {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;

		hyphenate-limit-chars: auto 5;
		hyphenate-limit-lines: 2;
		-webkit-hyphens: auto;
		-webkit-hyphenate-limit-chars: auto 3;
		-webkit-hyphenate-limit-lines: 4;
		-ms-hyphens: auto;
		-ms-hyphenate-limit-chars: auto 3;
		-ms-hyphenate-limit-lines: 4;   
	} 	 
 
 /* #footer {margin: 0 5em 0 5em;} */
 #footer p { font-size: .8rem; line-height: 1.5em; color:#FFF; }
 #footer a { color:#FFF; text-decoration:none; }
 #footer div { width:200px }

 
 /*##########  Footer  ###############*/
 #footer{
   -webkit-flex-grow: 0;
   -webkit-flex-shrink: 0;
   -webkit-flex-basis: 100%;
   flex-grow: 0;
   flex-shrink: 0;
   /* flex-basis: 100%; */
   display: -webkit-flex;
   flex-flow: row wrap;
   display: flex;
   /* align-items: center;  */
   -webkit-justify-content: center;
   justify-content: center;
   background:#606060;
 }
 
 
 #footer2{
	/* margin: 0 6.3em 0 6.3em; */
	 background:#606060; 
	 height:3.5em; 
	 text-align:right; 
	 padding:0 1em; 
	 color: #FFF; 
	 font-size:0.8em;
 }
 

/*
 #footer div:nth-of-type(1) {
   -webkit-flex-basis: 20%;
   flex-basis: 20%;
 }	 

 #footer div:nth-of-type(2) {
   -webkit-flex-basis: 20%;
   flex-basis: 20%;
 }

 #footer div:nth-of-type(3) {
   -webkit-flex-basis: 20%;
   flex-basis: 20%;
 }

 #footer div:nth-of-type(4) {
   -webkit-flex-basis: 20%;
   flex-basis: 20%;
 }
 */

 /*###################################*/ 
  
  
 /*#### Kostenaufstellung  ###*/
 #kosten{
   -webkit-flex-grow: 0; 
   -webkit-flex-shrink: 0;
   -webkit-flex-basis: 100%;
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 90%;
   display: -webkit-flex; /* Safari */
   display: flex;  

   /* align-items: center; */
   justify-content: center;
   background:#EFEFEF; 	 
 }
 
  #kosten div:nth-of-type(1) {
   -webkit-flex-basis: 20%;
   flex-basis: 25%;
 }
 
  #kosten div:nth-of-type(2) {
   -webkit-flex-basis: 15%;
   flex-basis: 15%;
 }

  #kosten div:nth-of-type(3) {
   -webkit-flex-basis: 15%;
   flex-basis: 15%;
 }

  #kosten div:nth-of-type(4) {
   -webkit-flex-basis: 15%;
   flex-basis: 15%;
 } 
 /*###################################*/  
 
  .verweis{
   text-decoration-style: dotted;
   font-style:italic;
   font-weight:bold;
   color: #000;
   background:#FFF;
 }
 
  .verweis2{
   text-decoration-style: dotted;
   line-height: 1.8rem;
   font-style:italic;
   font-size: 1rem;
   color: #000;
   background:#FFF;
 } 

 .form_input{
	height:1.5em;
	font-size:.8rem;
 }

 /* Links extern, Service etc. */
 ul.linksquare{
  list-style-type: square;
  color:#5190ba;  //1A83C6;
 }
  
 .linksquare li a{
  font-weight:normal;
  font-size:1em;
  border-bottom: 1px solid #CFCFCF;
  display: block;
  color:black;
  text-decoration: none;
   width:100%;
  line-height:2em;
/*  padding-left:5px;  */
 }

 .linksquare li a:hover{
  background: #5190ba;  //1A83C6;
  color:white;
 } 

 .list{
  list-style-type: ▇
 }

 
 /* ### software.html ### */ 
 .sw {list-style: none; line-height:1.5em;}

 .software::before{
  content: "◼"; 
  color:#5190ba;  //1A83C6;
  font-weight:bold;
  display: inline-block;
  margin: 2px 10px 2px -10px;
 }
 /* #################### */ 

 
 /*  Sitemap */
 #navmap li a{
  list-style-type: square;
  font-weight:normal;
  border-bottom: 1px solid #CFCFCF;
  display: block;
  color:black;
  text-decoration: none;
  width:20em;
  line-height:1.5em;
/*  padding-left:5px;  */
  font-size:1em;
 }

 #navmap li a:hover{
  background: #5190ba;  //1A83C6; /*#99CC66;*/
  color:white;
 }
 /* ########################## */
 
 .rotation{
  -moz-transform: rotate(55deg);
  -ms-transform: rotate(55deg);
  -o-transform: rotate(55deg);
  -webkit-transform: rotate(55deg);
  transform: rotate(10deg);
  text-align: center;
  color:#FFF;
  font-weight:bold;
  background:#FF0000;
  padding:3px 3px 3px 3px;
 }
 
 .nl{
   color:#FFF;
   font-weight: bold;
   text-align: center;
   background-color: #FF0000;
 }

 
 /*#######   Cookie  ##############*/
 #cookie{
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;  

  -webkit-flex-grow: 0;
  -webkit-flex-shrink: 0; 
  -webkit-flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
  display: -webkit-flex;
  display: flex;  
  justify-content: center;

  background-color:#7F7F7F;
  color:#FFF;
  height: auto; //2.5em;
  line-height:1.5em;
  padding:2.0rem;
  z-index: 0;
  font-size: .7rem;
  font-style:italic;
  text-align:center;
 }  
 
 #cookie div{
   -webkit-flex-grow: 0;
   -webkit-flex-shrink: 0;
   -webkit-flex-basis: 90%;
   flex-grow: 0;
   flex-shrink: 0;
   width: 100%;
 }
 
 #cookie div:nth-of-type(1) {
   -webkit-flex-basis: 70%;
   flex-basis: 70%;
 } 
 
 #cookie div:nth-of-type(2) {
   -webkit-flex-basis: 6em;
   flex-basis: 6em;
   margin: 0 1rem 0 3rem;
 }
 
 /*
 .button{
   color:#FFF;
   font-weight:bold;
   border-radius:8px;
   border-color:#1A83C6;
   background:#1A83C6;
 }
 */
 
.button_ok {
   border: 1px solid #FFF; //#0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 1em 2.5em;
   -webkit-border-radius: .6em;
   -moz-border-radius: .6em;
   border-radius: .6em;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #FFF;
   font-weight:bold;
   font-size: .8rem;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
   
 .button_ok:hover {
   border: 1px solid #FFF;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #000;
 }
   
 .button_ok:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #000;
  } 
 
 
 /*#################################*/ 
/*
 #topmsg{
   width:100%;
   height: 9em;
   margin-bottom:1.5em;
   padding: 1em 0 1em 0;
   text-align:center; 
   background:#EFEFEF; 
  }
*/
 

 #topmsg{
   margin: 4em 0 1.5em 0;
   text-align:center;
   /* font-size: 1.5rem;   
   background:#EFEFEF;
   box-shadow: 1em 1em 1em #AFAFAF;   */ 
   
   /*
   background: -webkit-gradient(linear, left top, left bottom, from(#A0A0A0), to(#EFEFEF));
   background: -webkit-linear-gradient(top, #A0A0A0, #EFEFEF);
   
   background: -moz-linear-gradient(top, #A0A0A0, #EFEFEF);
   
   background: -ms-linear-gradient(top, #A0A0A0, #EFEFEF);
   background: -o-linear-gradient(top, #A0A0A0, #EFEFEF);  */  
 } 

 
 .totop {
  font-size: 1em;
  color:#000;
  text-decoration:none;
 }
 

 .copyr{
   font-size: .8rem;
 }
 
 .alzeit{
   position:relative; 
   top:3px;
   height:15px;	 
 }
 
 
 /*###################
 ### Farbenspiel  ####
 ###################*/
 #colslide {
   width: 100%;
   height: 9em;    
   /* Chrome, Safari, Opera */
   -webkit-animation: mymove 9s infinite;
   animation: mymove 9s infinite;
   color:#FFF;
   text-align:center;
   margin-bottom:1.5em;
   padding: 1em 0 1em 0;
 }

 /* Chrome, Safari, Opera */
 @-webkit-keyframes mymove {
   from {background-color: #EFEFEF;}
   to {background-color: #AFAFAF;}
 }

 /* Standard syntax */
 @keyframes mymove {
   from {background-color: #EFEFEF;}
   to {background-color: #AFAFAF;}
 }

/*##################################*/
 
 
 
 .zoomin{
  -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -ms-transition: all 2s ease;
   transition: all 2s ease;	 
 } 
 .zoomin_img {
   height: 15em;
   width: 25em;
   float:left;
   margin-right: 1.5em;
  }

 .zoomin_img:hover {
   width: 37em;
   height: 22em;
 }

 .zoomin_img_r {
   height: 15em;
   width: 25em;
   float:right;
   margin-left:15px;
  }

 .zoomin_img_r:hover {
   width: 37em;
   height: 21em;
 }

 .zoomin_form {
   height: 70%;
   width: 70%;
 }

 .zoomin_form:hover {
   width: 100%;
   height: 100%;
 }
 
 .zoomin_sysinfo {
   height: 70%;
   width: 70%;
 }

 .zoomin_sysinfo:hover {
   width: 100%;
   height: 100%;
 }
 
  /*##########################*/
 



 /*########################*/
 /*     jquery Bereich     */
 /*########################*/

 /* Dialog Box */
 .ui-dialog-titlebar { border:0; background-color: #FF0000; color:#FFF; text-align:center; }

 .ui-widget-overlay{
  opacity: .50 !important;
  filter: Alpha(Opacity=50) !important;
  background-color: rgb(50, 50, 50) !important;
 }


 .ui-dialog-titlebar-close {
    visibility: visible; /*hidden;  */
    background-color:#FFF;
    color:#000;
 }

 .ui-dialog-titlebar-close:hover{
  background-color:#FF0000;
  color:#FFF;
 }

 /*
 .ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
 }
*/

 
 /* accordion boxen */
 .ui-icon{
	/*
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_black_256x240.png)
    */
	
     background-image: url(images/ui-icons_black_256x240.png)
 	!important;
 }

 #accordion .ui-accordion-content {
  width: 98%;
  background-color:#FFF;
  padding:5px 0 5px 5px;
 }

 #accordion div{border:none;}
 
 #accordion .ui-accordion-header {
  background-color: #EFEFEF;
  border:none;
  margin-bottom: 1em;
 
  /* text-align:center; */
  color: #5190ba;  //1A83C6;
  font-size:1rem;
  font-variant: small-caps;
  font-weight: bold;
  /* text-shadow: 1px 1px 0px #000, 2px 2px 0px rgba(0,0,0,0.15); */
  padding:5px;
 }

 /* #accordion a{color:#000;} */
 #accordion a:hover{color:red}
 
 /* //###########   jquery   ############# */
 
 


 /******************/
 /* Grafiken
 /******************/
 .pfoben{ margin-right:15px; width:15px; height:15px; background-color:#5190ba;  //1A83C6; }
 
 .alzeit{
  position:relative;
  top:3px;
  width:50px; 
  height:15px;
 }