/* Textlinks */
a:link,a:visited {
	font-family: 'Roboto Condensed', sans-serif;
 	font-size: 1.0em;
 	color: #000000;
 	font-weight: normal;
 	text-decoration:underline;
}

a:hover {
 	font-weight: normal;
 	color: #097D96;
 	text-decoration:none;
}

/* Allgemeines */
body  {
         background:#FFFFFF url(../images/bg.png) top center repeat-x;
         padding: 0px;
         margin: 0px;
         min-width: 320px;
}

body, table, td, div  {
 	font-family: 'Roboto Condensed', sans-serif;
 	font-size: 1.0em;
 	font-weight: normal;
 	text-align: left;
 	vertical-align:top;
 	color:#142a3a;
}

.links 	{ float:left; }
.rechts 	{ float:right; }
.center 	{ text-align: center; }
img 	{ border: 0px; }
.clear 	{ clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }

.head { padding: 2px 5px; font-size: #FFFFFF; background-color:#13839C; color:#ffffff; font-weight: bold; margin: 2px; border: 0px #000000 solid; }
.tab { padding: 2px 5px; background-color:#F8FAFA; color:#000000; font-weight: normal; margin: 2px; border: 0px #01677C solid; }
.tab2 { padding: 2px 5px; background-color:#E9EDF0; color:#1F1F1F; font-weight: normal; margin: 2px; border: 0px #01677C solid; }


/* �berschriften */
h1 {
         font-family: 'Roboto Condensed', sans-serif;
         font-size: 2.0em;
 	font-weight: bold;
 	text-align: left;
 	color: #000000;
         text-shadow: #FFFFFF 1px 1px 0px;

         margin: 5px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
}

h2 {
         font-family: 'Roboto Condensed', sans-serif;
         font-size: 1.6em;
 	font-weight: bold;
 	color: #3b3b3b;
 	vertical-align:top;
 	text-align: left;
         text-shadow: rgba(255,255,255,0.8) 1px 1px 0px;

         margin: 5px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
}

h3 {
         font-family: 'Roboto Condensed', sans-serif;
         font-size: 1.4em;
 	font-weight: normal;
 	color:#589c07;
 	vertical-align:middle;
 	text-align: left;

         margin: 5px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
}

h4 {
         font-family: 'Roboto Condensed', sans-serif;
         font-size: 1.2em;
 	font-weight: normal;
 	color: #589c07;
 	vertical-align: top;
 	text-align: left;
         text-shadow: rgba(255,255,255,0.8) 1px 1px 0px;

         margin: 5px 0px 5px 0px;
         padding: 5px 15px;

         background-color: #EAEFEF;
         -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

/* Seitenaufbau */
.in {
	max-width: 1200px;
         margin: 0px auto;
}

#wrapper {
	width: 100%;
}

#header {
         padding: 20px 0px 40px 0px;
         min-height: 100px;
	background: #478806;
	background: -moz-linear-gradient(top,  #478806 0%, #589c07 38%, #589c07 90%, #457a05 100%);
	background: -webkit-linear-gradient(top,  #478806 0%,#589c07 38%,#589c07 90%,#457a05 100%);
	background: linear-gradient(to bottom,  #478806 0%,#589c07 38%,#589c07 90%,#457a05 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#478806', endColorstr='#457a05',GradientType=0 );
         text-align: center;
}

#header #logo {
         float: left;
         width: 50%;
         text-align: center;
         padding: 10px 0px 40px 0px;
}

#header #info {
         float: right;
         width: 50%;
         text-align: left;
         background:transparent url(../images/pfeil.png) 280px 10px no-repeat;
         font-size: 1.2em;
         padding: 0px 0px 20px 0px;
}

#header #info b { color: #FFFFFF; }


#site {
	margin: 10px 0px;
}

#footer {
	background: #99a7ad;
}
#footer .in {
	padding: 10px 0px;
         text-align: center;
}
#footer .in a {
         padding: 2px 10px;

         font-size: 0.9em;
         color: #FFFFFF;
	text-shadow: rgba(0,0,0,0.1) 1px 1px 0px;
         text-decoration: none;
}
#footer .in a:hover {
	color: #252b2e;
}

/* Rechner */
#rechner {
         background: #363636;
         -webkit-box-shadow: inset 0px 5px 15px -3px rgba(0,0,0,0.99), 0px 10px 13px -7px rgba(0,0,0,0.35);
         -moz-box-shadow: inset 0px 5px 15px -3px rgba(0,0,0,0.99), 0px 10px 13px -7px rgba(0,0,0,0.35);
	box-shadow: inset 0px 5px 15px -3px rgba(0,0,0,0.99), 0px 10px 13px -7px rgba(0,0,0,0.35);

         width: calc(100% - 60px);

         -webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

         padding: 20px 25px;

         margin: -50px auto 0px auto;

         color: #FFFFFF;
}

/* Boxen */
.content {
	display: block;
         width: calc(100% - 50px);
         background: #e6e6e6;

         -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

         padding: 10px 15px;
         margin: 10px 10px 10px 10px;
}

#app_install {
	width: 100%;
         margin: 10px 0px;
         text-align: center;
}
#app_install img { margin: 5px 5px 5px 5px; }


/* Forms */
input[type="text"], input[type="password"], select, textarea {
         background: #f6f6f6;

         font-family: 'Roboto Condensed', sans-serif;
 	font-size: 1.3em;
 	color: #000000;

 	padding: 5px 10px;
 	margin: 2px 0px;

         border: #FFFFFF 0px solid;
         -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

         -webkit-box-shadow: inset 4px 4px 3px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:    inset 4px 4px 3px 0px rgba(0, 0, 0, 0.15);
	box-shadow:         inset 4px 4px 3px 0px rgba(0, 0, 0, 0.15);
}

input[type="submit"] {
         background: rgb(255,84,0); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,84,0,1) 10%, rgba(224,67,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,84,0,1) 10%,rgba(224,67,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,84,0,1) 10%,rgba(224,67,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5400', endColorstr='#e04300',GradientType=0 ); /* IE6-9 */

         font-family: 'Roboto Condensed', sans-serif;
         color: #FFFFFF;
         font-size: 1.1em;
         font-weight: normal;
         padding: 6px 15px 6px 15px;

         cursor: pointer;

         border: #FFFFFF 0px solid;
         -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

         -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
	-moz-box-shadow:    inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
	box-shadow:         inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
}

input[type="submit"]:hover {
	background: rgb(224,67,0); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(224,67,0,1) 0%, rgba(255,84,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(224,67,0,1) 0%,rgba(255,84,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(224,67,0,1) 0%,rgba(255,84,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e04300', endColorstr='#ff5400',GradientType=0 ); /* IE6-9 */
}




.lightgallery {
  margin-bottom: 0;
  display: inline-block;
}
.lightgallery > li {
    float: left;
    margin-bottom: 15px;
    margin-right: 20px;
    max-width: 200px;
    list-style: none;
}
.lightgallery > li a {
  border: 3px solid #FFF;
  border-radius: 3px;
  display: block;
  overflow: hidden;
  position: relative;
  float: left;
}
.lightgallery > li a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}
.lightgallery > li a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}
.lightgallery > li a:hover .lightgallery-poster > img {
  opacity: 1;
}
.lightgallery > li a .lightgallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.lightgallery > li a .lightgallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.lightgallery > li a:hover .lightgallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}
.lightgallery .justified-gallery > a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}
.lightgallery .justified-gallery > a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}
.lightgallery .justified-gallery > a:hover .lightgallery-poster > img {
  opacity: 1;
}
.lightgallery .justified-gallery > a .lightgallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.lightgallery .justified-gallery > a .lightgallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.lightgallery .justified-gallery > a:hover .lightgallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}
.lightgallery .video .lightgallery-poster img {
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  opacity: 0.8;
  width: 48px;
}
.lightgallery.dark > ul > li a {
  border: 3px solid #04070a;
}
/* Responsive images and gallery; original site colors preserved. */
#header > a > img { max-width: calc(100% - 20px); height: auto; }
#app_install a { display: inline-block; max-width: 100%; }
#app_install img { max-width: calc(100% - 10px); height: auto; }
.lightgallery { margin: 20px 0 0; padding: 0; width: 100%; text-align: center; }
.lightgallery > li { float: none; display: inline-block; vertical-align: top; padding: 0; margin: 0 8px 15px; width: calc(50% - 20px); }
.lightgallery > li a { float: none; }
@media (max-width: 600px) {
  #site > .in > h1, #site > .in > h2 { padding-left: 10px; padding-right: 10px; }
  .content { width: auto; overflow-wrap: anywhere; }
  .content table { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lightgallery > li a > img, .lg-outer * { transition: none !important; animation: none !important; }
}