/* COPRIGHT: http://www.website-bauen.de  */

html, body {font-family: Verdena, Tahoma, Geneva, sans-serif;color: #333;font-size: 15px;font-weight: normal;line-height: 1.375;background-color: #fff;text-align: left;}
html {overflow-y: scroll;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;word-wrap: break-word;}
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, a, a img, em, small, strike, strong, ol, ul, li, form, table, caption, tbody, thead, tr, th, td, img {border: 0;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
article, aside, details, figcaption, figure,
header, main, nav, section, footer {display: block;}
* {margin: 0;padding: 0;}
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
embed, iframe, object {max-width: 100%;border: none;}
body {width: 100%;margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6 {color: #333;text-decoration: none;font-weight: bold;}
h1 {font-size: 18px;margin: 16px 0 14px 0;color: #24a5c5;}
h2 {font-size: 15px;margin: 15px 0 14px 0;}
h3 {font-size: 14px;margin: 14px 0 12px 0;}
h4 {font-size: 13px;margin: 13px 0 10px 0;}
h5 {font-size: 12px;margin: 12px 0 10px 0;}
h6 {font-size: 11px;margin: 11px 0 10px 0;}
@media screen and (max-width: 768px) {
h1 {font-size: 20px;margin: 16px 0 12px 10;}
h2 {font-size: 17px;margin: 14px 0 12px 0;}
h3, h4, h5, h6 {font-size: 15px;margin: 14px 0 10px 0;}}
p  {font-size: 15px;margin: 4px 0 10px 0;color: #333}
p.lead  {font-size: 17px;color: #222;}
b, strong {font-weight: 700;}
dfn, cite, em, i {font-style: italic;}
small {font-size: 75%;}
a, a:link, a:focus {color: #000000;}
a:hover {color: #a7a7a7;}
.row {margin: 0;padding: 0;}
.row {margin: 0;padding: 0;}
.row:before {display: table;content: " ";}
.row:after {display: table;content: " ";clear: both;}
.clear:before, .clear:after {content: " ";display: table;}
.clear, .clear:after, .clearfix {clear: both;}
.alignleft {display: inline;float: left;margin-right: 24px;margin-bottom: 24px;}
.alignright {display: inline;float: right;margin-left: 24px;margin-bottom: 24px;}
.aligncenter {float: none;margin: 4px auto;text-align: center;}
.img-left {float: left;margin: 6px 12px 6px 0;}
.img-right {float: right;margin: 6px 0 6px 12px;}
.img-center {display: block;margin: 4px auto;text-align: center;}
.img-left_nosqueeze, .img-left_nosqueeze-sm {float: left;height: auto;max-width: 100%;margin: 4px 14px 10px 0;}
.img-right_nosqueeze, .img-right_nosqueeze-sm {float: right;height: auto;max-width: 100%;margin: 4px 0 10px 14px;}
.img-responsive {height: auto;max-width: 100% !important;}
.dbrown{text-align: center;background-color:#98f5ff;}
.mbrown {text-align: center;background-color: #8ee5ee;}
.white {text-align: center;background-color: #ffffff;}
.blue {text-align: center;background-color: #98f5ff;}
.lbrown {text-align: center;background-color: #8ee5ee;}
#header {max-width: 868px;margin: 0 auto;padding: 10px 8px 4px 0;}
#upper-main { max-width: 868px;margin: 0 auto;text-align: left;/*border-left: 395px solid transparent;*/}
#center-main {max-width: 868px;margin: 0 auto;text-align: left;/*border-left: 395px solid transparent;*/}
#lower-main { max-width: 868px;margin: 0 auto;text-align: center;}
#footer {max-width: 868px;margin: 0 auto;text-align: center;}

/* Farbe mit Transparenz: rgba <= das "a" ist die "opacity" - kann nicht in IE dargestellt werden.
   Beispiel:  background: rgba(19, 119, 145, 0.5);
   0.5 = transparenz,    1 = keine Transparenz, 0.0 = volle Transparenz
*/

#header-left { float: left; display: inline-block;height: 56px;width: 214px;margin: 0;padding: 2px 0 2px 0;background: url(img/logo.png) top left no-repeat;}
#header-right {float: right;display: inline-block;height: 56px;width: 57.5%;margin: 0;padding: 2px 0 2px 0;/*background: #fcf;*/}
.brand  {font-family: Arial, sans-serif;font-size: 22px;font-weight: bold;line-height: .9;color: #f9f9f9;
	padding: 0 0 0 14px;text-shadow: 2px -2px 5px rgba(210, 210, 210, 0.6);vertical-align: top;}
.slogan  {font-size: 13px;color: #cacaca;text-align: left;letter-spacing: 0.1px;padding: 0 0 0 38px;}
.slogan-unt  {font-size: 13px;color: #cacaca;text-align: left;letter-spacing: 0.1px;padding: 0 0 0 38px;}
.tel {float: left;display: inline-block;margin: 10px 36px 10px 0;font-size: 17px;color: #fff;/*vertical-align: bottom;*/}
.tel span a {color: #fff;font-weight: bold;padding-left: 8px;text-decoration: none;}
.lang { float: right;display: inline-block;margin: 14px 0 14px 0;font-size: 10px;color: #fcfcfc;vertical-align: bottom;}
img.flaggen {display: inline-block;height: 11px;width: 16px;margin: 0 1px;background-color: #ffff00;}
img.flagge {display: inline-block;height: 453px;width: 889px;margin: 0 1px;background-color: #ffff00;}
.one-col {max-width: 868px;margin: 0 auto;text-align: left;border: none;}
.left-col {display: inline-block;width: 186px;/ margin: 0 0 0 -190px;}
.right-col {float: right;display: inline-block;width: 100%;max-width: 680px;margin: 0 0 0 -2px;padding: 0 0 0 4px;}

.at-bot {vertical-align: bottom !important;}
.at-top {vertical-align: top;}

#menu1 {margin: 0 0 0 6px;width: 150px;vertical-align: top;/*background: #ccc*/}
  #menu1 ul {}
  #menu1 ul li {display: block;list-style: none;margin: 2px 0;padding: 2px 3px;border-bottom: 1px solid #f9f9f9;overflow-x: hidden;}
  #menu1 ul li.last {border: none;padding-bottom: 10px;}
  #menu1 ul li a, #menu1 ul li a:link, #menu1 ul li a:focus, #menu1 ul li a:visited {font-size: 16px;font-weight: bold;text-decoration: none;color: #f7f7f7;}
  #menu1 ul li a:hover {text-decoration: none;color: #24a5c5;}
  #menu1 ul li a.active {text-decoration: none;color: #24a5c5;}
.fenst-az-up {width: 100%;max-width: 680px;margin: 0 -1px 0px -1px;height: auto;background-size: 100%;}
.fenst-az-lo {width: 100%;max-width: 680px;margin: -4px 0 0 0;height: auto;background-size: 100%;}

    
#menu2 {margin: 10px 0 6px 6px;}
  #menu2 ul {}
  #menu2 ul li {display: block;list-style: none;margin: 2px 0;padding: 2px 0;border: none;overflow-x: hidden;}
  #menu2 ul li a, #menu2 ul li a:link, #menu2 ul li a:focus, #menu2 ul li a:visited {font-size: 16px;font-weight: bold;text-decoration: none;color: #24a5c5; /*493220*/}
  #menu2 ul li a:hover {text-decoration: none;/*color: #999; (24a5c5) */}
  #menu2 ul li a.active {text-decoration: none;color: #f00; /*24a5c5*/}
  #menu2 ul li ul {margin-left: 10px;}
  #menu2 ul li ul li {margin: 1px 0;padding: 0;background: url(img/menu2_li.jpg) center left no-repeat;}
  #menu2 ul li ul li a, #menu2 ul li ul li a:link, #menu2 ul li ul li a:focus, #menu2 ul li ul li a:visited {
		font-size: 13px;font-weight: normal;line-height: 0.7;text-decoration: none;color: #000000;padding-left: 11px;}
  #menu2 ul li ul li a:hover {text-decoration: none;color: #999;/*24a5c5*/}		
		
#menu3 {height: 32px;width: 718px;margin: 18px auto;text-align: center;overflow: hidden;background: #24a5c5;}
  #menu3 ul {}
  #menu3 ul li {display: inline-block;list-style: none;min-width: 70px;margin: 0 -3px;padding: 6px 10px 6px 18px;border: none;}
  #menu3 ul li {background: #24a5c5 url(img/menu3-li2.jpg) center left no-repeat;text-align: center;}
  #menu3 ul li.noborder {background-image: none;padding-left: 14px}
  #menu3 ul li a, #menu3 ul li a:link, #menu3 ul li a:focus, #menu3 ul li a:visited {font-size: 15px;font-weight: normal;text-decoration: none;color: #fff;}
  #menu3 ul li a:hover {text-decoration: none;color: #333;}
  #menu3 ul li a.active {text-decoration: none;color: #000;}

.banner {margin: 0 0 0 -6px;background-size: 100%;}
article{text-align: left;padding: 4px 4px 12px 4px;}
.one-col article{text-align: left;padding: 4px 8px 12px 8px;}	

.tabelle1 {max-width: 648px;margin: 18px auto 18px auto;text-align: center;}
.hol-fens, .alu-fens, .pvc-fens, 
.hol-tuer, .alu-tuer, .pvc-tuer {display: inline-block;height:207px;width: 207px;margin: 2px;font-size: 14px;line-height: 14px;}
.hol-fens {background: url(img/fenster-online-preise.jpg) top left no-repeat;}
.alu-fens {background: url(img/fenster-online-kaufen.jpg) top left no-repeat;}
.pvc-fens {background: url(img/kunststofffenster-online.jpg) top left no-repeat;}
.hol-tuer {background: url(img/76adprofiltext.jpg) top left no-repeat;}
.pvc-tuer {background: url(img/76mdprofiltext.jpg) top left no-repeat;}
.alu-tuer {background: url(img/88profiltext.jpg) top left no-repeat;} 
.hol-fens:hover, .alu-fens:hover, .pvc-fens:hover, 
.hol-tuer:hover, .alu-tuer:hover, .pvc-tuer:hover {position: relative;top: 0;margin-bottom: -5px;}
span.blank {position: relative;display: block;height: 133px;background: none;}
span.shade{visibility: hidden;display: none;}
a .hol-fens:hover span.shade, a .pvc-fens:hover span.shade, a .alu-fens:hover span.shade,
a .hol-tuer:hover span.shade, a .pvc-tuer:hover span.shade, a .alu-tuer:hover span.shade {
	visibility: visible;display: block;position: relative;height: 70px;width: 207px;margin: 0;
	padding: 30px 4px 0 15px;letter-spacing: 1px;text-align: left;color: #ffffff;background: rgba(152, 245, 255, 0.7);overflow: hidden;}

.calculate2 {display: block;width: 718px;margin: 28px auto 8px auto}	
.tabelle2 {border-spacing: 0;border-collapse: collapse;vertical-align: middle;}	
.tabelle2 {width: 718px;;text-align: center;border: 3px solid #24a5c5;border-top: none;}
.tabelle2 tr th {padding: 14px 8px 14px 8px;font-size: 14px;font-weight: normal;line-height: 1;color: #fff;background: #f6f6f6;}
.tabelle2 tr th.dark {background: #24a5c5;} .tabelle2 tr th.light {background: #34b5d5;}
.tabelle2 tr td {padding: 10px 10px 16px 10px;font-size: 12px;line-height: 1;color: #555;}
.tabelle2 tr td.col-blue {padding: 20px 10px 6px 10px;font-size: 13px;font-weight: bold;line-height: 1;color: #34b5d5;}
.tabelle2 tr td img {height: 44px;width: 44px;margin: 14px 4px -14px 4px;}
.tabelle2 tbody tr:nth-child(even) {background: #f4f4f4;}
.tabelle2 tbody tr:nth-child(odd) {background: #ffffff;}
span.table2-sum {display:block;width: 100%;padding: 10px 8px 0 0;font-size: 13px;text-align: right;color: #555;}
span.table2-sum .large-sum {padding-left: 32px;padding-right: 5px;font-size: 18px;text-align: right;color: #34b5d5;}

#tab3-shade {width: 760px;margin: 0 auto;padding: 14px 0;background: #f8f8f8;}
.calculate3 {display: block;width: 718px;margin: -2px auto;}
/*
<div class="calc3-lft">
	<div class="calc3-lftTop material_return">Kunststoff
		<div class="calc3-picture" */
.calc3-lft {display: inline-block;width: 494px;padding: 0px;vertical-align: top;font-size: 0;}
.calc3-rgt {display: inline-block;width: 218px;padding: 0 4px;vertical-align: top;background: #fff;}
.calc3-lftTop, .calc3-lftMid, .calc3-lftBot {height: 112px;width: 492px;margin: 0 0 4px 0;padding: 4px;border: 1px solid #ccc;background: #f4f4f4;vertical-align: top;}
.calc3-lftTop:hover, .calc3-lftMid:hover, .calc3-lftBot:hover {color: #fff;border: 1px solid #24a5c5;background: #24a5c5;cursor: pointer}
.calc3-picture {display: inline-block;height: 98px;width: 98px;margin: 0 14px 0 0;background: #fff;}
.calc3-text {display: inline-block;height: 100px;width: 364px;margin: 0;overflow: hidden;}
img.tab3l-img {display: inline-block;height: 98px;width: 98px;margin: 0;overflow: hidden;}
span.tab3l-head {display: inline-block;width: 148px;margin: 0;padding: 6px 0 0 0;font-size: 24px;font-weight: bold;vertical-align: top;}
span.tab3l-size {display: inline-block;width: 208px; margin: 0;padding: 6px 0 0 0;font-size: 11px;vertical-align: top;}
span.tab3l-desc {display: inline-block;width: 362px;	margin: 0;padding: 6px 0 7px 0;font-size: 12px;vertical-align: top;}

.material_run {}

.calc3-rgtField {display: block;height: auto;margin: 0 4px;padding: 6px 2px;overflow: hidden;}
.calc3-rgtField input{display: inline-block;width: 104px;padding: 1px 2px;font-size:12px;text-align: left;color: #333;border: none;background: none;border: 1px;}
.calc3-rgtField input.active{background: #ffd;border: 1px solid red;}
.calc3-rgtField span {display: inline-block;width: 88px;padding-right: 4px;font-size: 13px !important;text-align: right;color: #24a5c5;}
.calc3-rgtField.head  {padding: 4px;font-size:14px;font-weight: bold;text-align: center;color: #24a5c5;}
.calc3-rgtField.foot span {padding: 4px;font-size:14px;font-weight: bold;text-align: right;color: #24a5c5;}
#mate.calc3-rgtField {background: #f4f4f4;}
#type.calc3-rgtField {}
#glas.calc3-rgtField {background: #f4f4f4;}
#syst.calc3-rgtField {}
#form.calc3-rgtField {background: #f4f4f4;}
#farb.calc3-rgtField {}
#anza.calc3-rgtField {background: #f4f4f4;}
#size.calc3-rgtField {}
#roll.calc3-rgtField {background: #f4f4f4;}
#mont.calc3-rgtField {}
#pric.calc3-rgtField {background: #f4f4f4;}

.calc3-lftBtn, .calc3-rgtBtn {display: block;}
input.calc3-btn {display: inline-block;min-width: 110px;font-size: 13px;font-weight: bold;text-align: center;
	color: #888;background: #eee;border: 1px solid #ccc;}
input.calc3-btn:hover {color: #fff;background: #24a5c5;border: 1px solid #24a5c5;cursor: pointer}
input.calc3-Zbtn {float: left;margin: 12px 0;padding: 3px 0px 3px 10px;}
input.calc3-Wbtn {float: right;margin: 12px 0;padding: 3px 10px 3px 0px;}
input.calc3-Fbtn {float: right;margin: 12px 0;padding: 3px 3px 3px 3px;}
 
.box-lft, .box-ctr, .box-rgt {display: inline-block;width: 32.10%;margin: 2px 0 2px 7px;padding: 0 0 0 80px;
	font-size: 12px;line-height: 1.25;text-align: left;color: #000;vertical-align: top;}

.copyright {color: #24a5c5;font-size: 15px;padding: 12px 0;}
.copyright a {color: #24a5c5;text-decoration: none;}
.copyright a:hover {color: #24a5c5;text-decoration: underline;}

@media screen and (max-width: 768px) {
	#header-left { float: none;display: block;margin: 0 auto;padding: 0;}
	#header-right {float: none;display: block;width: 98%;max-width: 452px;margin: 2px auto;padding: 0;}
	#upper-main, #center-main {border-left: 162px solid transparent;}
	.left-col {display: inline-block;width: 156px;margin: 0 0 0 -160px;}
	.banner {margin: 0 0 0 -3px;width: 145px;}}
@media screen and (max-width: 599px) {
	.fenst-az-up {margin: 0 -2px -8px -1px;overflow-x: hidden;}
	.fenst-az-lo {margin: -4px 0 0 1px;overflow-x: hidden;}
	.box-lft, .box-ctr, .box-rgt {width: 30.25%;margin: 2px 4px;font-size: 12px;}}