header,nav,article,footer,section{display:block}

:root {
  --lightcolor: rgb(0,143,213,0.2);
/*  --lightcolor: rgb(200,200,250);*/
  --darkcolor:  rgb(7,80,164);
/*  --darkcolor:  rgb(4,1,176);*/
  --bgcolor:    rgb(240,240,255);
  --hovercolor: rgb(230,230,255);
}

html{
background: rgb(255,255,255);
}

body{
max-width:1800px;
margin: 0 auto 0 auto;
padding: 1%;
background: var(--bgcolor);
border: solid 1px black;
text-align:justify;
font-family: arial;
font-size: 14px;
}



/*+++++++++++++++++++++++++++++++++++++++++++*/

article{
margin: 1% 0 0 0;
}

header{
margin: 0 auto 0 auto;
text-align: center;
font-weight: bold;
}

pre{
margin: 1% 0 1% 0;
}

dl{
padding:1%;
/*float: right;*/
}

dt{
text-align: center;
}

dd{
margin: 1% 0 0 0;
text-align:center;
font-size: 85%;
font-style: italic;
}

th{
text-align:center;
}

/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Kopfzeile*/

#page_header{
width:100%;
background: none;
}
#page_header img{
margin: 1% auto 0% auto;
float:left;
width: 20%;
}

#page_header a:link img {border: none;}
#page_header a:visited img {border: none;}
#page_header a:hover img {border: none;}
#page_header a:active img {border: none;}
#page_header a:focus img {border: none;}

#page_header_text{
width: 50%;
margin: 0% auto 0% auto;
padding: 1%;
float:left;
color:var(--darkcolor);
font-size: 200%;
}

#page_header_contact ul{
width: 20%;
float:right;
color:black;
text-align: left;
font-size: 90%;
font-weight:normal;
list-style-type:none;
}
#page_header_contact ul li{
/*display: inline;*/
}

#page_header hr{
height: 0.5em;
width: 100%;
background:var(--darkcolor);
margin: 1% 0% 1% 0%;
float: none;
clear: both;
}


/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Fusszeile*/

#page_footer{
clear: both;
padding: 0 0 1% 0;
}

footer#page_footer nav ul{
margin: 1%;
text-align: left;
list-style-type:none;
}

footer#page_footer nav ul li{
margin: 0 2% 0 0;
display: inline;
}

#page_footer hr{
height: 0.5em;
width: 100%;
background:var(--darkcolor);
}

/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Sidebar*/

#sidebar{
clear:both;
width: 20%;
/*min-width: 250px;*/
padding: 1%;
float: left;
background-color: var(--lightcolor);
}

#sidebar article header{
padding: 1%;
font-size: 115%;
background-color: var(--darkcolor);
color:white;
}

#sidebar article iframe{
width:98%;
height:auto;
margin: 1%;
}

#sidebar article img{
width:98%;
height:auto;
margin: 5% 1% 5% 1%;
}

#sidebar_news ul{
padding: 1% 5% 1% 5%;
list-style-type:none;
}

#sidebar_news ul li{
padding: 1% 0% 1% 0%;
list-style-type:none;
}

#sidebar_news hr{
width: 90%;
}

/*+++++++++++++++++++++++++++++++++++++++++++*/
#main{
width: 76%;
padding: 1%;
float:right;
}
/*-------------------------------*/
/*Haupt-Navigationsmenue oben*/

input.box {
display: none;
}
label.an {
display: none;
}
label.an img{
width: 10%
}

#navigation nav{
width: 100%;
height:2.2em;
margin: 0%;
padding: 0%;
font-weight:bold;
background: var(--darkcolor);
}
#navigation nav ul.mainmenue{
position:relative;
margin: 0%;
}
#navigation nav ul li{
position: relative;
padding: 0.5% 1% 0.5% 1%;
float:left;
text-align:center;
color:white;
display: inline;
list-style-type:none;
background: var(--darkcolor);
}
#navigation nav ul li.m:hover{
z-index:500;
border-right: solid 2px var(--hovercolor);
border-left: solid 2px var(--hovercolor);
}

#navigation nav ul li ul {
display: none;
}
#navigation nav ul li:hover ul {
display: block;
position: absolute;
margin: 0% 0% 0% 0%;
padding: 0%;
}

#navigation nav ul li ul li{
width: 150%;
padding: 5% 10% 5% 10%;
text-align: left;
}

#navigation nav ul li ul li ol{
list-style-type:none;
}

#navigation nav ul li ul li ol li{
width: 100%;
padding: 2% ;
}


#navigation nav ul li a{
text-decoration:none;
}
#navigation nav ul li a:link { color:white; }
#navigation nav ul li a:visited {color: white; }
#navigation nav ul li a:hover {color: rgb(155,155,155);}
#navigation nav ul li a:active {color: white;}
#navigation nav ul li a:focus {color: white;}

/*-------------------------------*/
/*Text*/

#main header{
margin: 2% 0% 0% 0%;
padding: 0%;
font-size: 160%;
background:none;
color:black;
float:none;
}
#main article header{
clear:both;
margin: 2% 0% 0% 0%;
padding: 0.5%;
background-color: var(--lightcolor);
color:black;
text-align: left;
font-size: 115%;

}

/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Startseite*/

#indexpage{
position: relative;
margin: -9px 0 0 -19px;
padding: 5px 0px 5px 5px;
text-align:center; 
}


#indexpage #slideshow{ 
width: 925px;
height:420px;
}
#indexpage #slideshow img{
/*border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;   */
}
#indexpage #slideshow .imgall{
position:absolute;
left: 25px;
opacity:1.0;
z-index:10;
}
#indexpage #slideshow #img1{top: 20px;}
#indexpage #slideshow #img2{top: 20px;}
#indexpage #slideshow #img3{top: 20px;}
#indexpage #slideshow #img4{top: 20px;}
#indexpage #slideshow #img5{top: 20px;}


#index:hover #slideshow .imgall{
opacity:0.0;
transition-duration: 2s, 2s;
-moz-transition-duration: 2s, 2s;
-o-transition-duration: 2s, 2s;
-webkit-transition-duration: 2s, 2s;
transition-timing-function: steps(100,end), steps(1,end);
-moz-transition-timing-function: steps(100,end), steps(1,end);
-o-transition-timing-function: steps(100,end), steps(1,end);
-webkit-transition-timing-function: steps(100,end), steps(1,end);
}
#index:hover #slideshow #img1{z-index:9; transition-property: opacity, z-index; transition-delay: 3s, 3s;}
#index:hover #slideshow #img2{z-index:8; transition-property: opacity, z-index; transition-delay: 8s, 8s;}
#index:hover #slideshow #img3{z-index:7; transition-property: opacity, z-index; transition-delay: 12s, 12s;}
#index:hover #slideshow #img4{z-index:6; transition-property: opacity, z-index; transition-delay: 16s, 16s;}
#index:hover #slideshow #img5{z-index:5; transition-property: opacity, z-index; transition-delay: 20s, 20s;}
#index:hover #slideshow #img1{z-index:9; -moz-transition-property: opacity, z-index; -moz-transition-delay: 3s, 3s;}
#index:hover #slideshow #img2{z-index:8; -moz-transition-property: opacity, z-index; -moz-transition-delay: 8s, 8s;}
#index:hover #slideshow #img3{z-index:7; -moz-transition-property: opacity, z-index; -moz-transition-delay: 12s, 12s;}
#index:hover #slideshow #img4{z-index:6; -moz-transition-property: opacity, z-index; -moz-transition-delay: 16s, 16s;}
#index:hover #slideshow #img5{z-index:5; -moz-transition-property: opacity, z-index; -moz-transition-delay: 20s, 20s;}
#index:hover #slideshow #img1{z-index:9; -o-transition-property: opacity, z-index; -o-transition-delay: 3s, 3s;}
#index:hover #slideshow #img2{z-index:8; -o-transition-property: opacity, z-index; -o-transition-delay: 8s, 8s;}
#index:hover #slideshow #img3{z-index:7; -o-transition-property: opacity, z-index; -o-transition-delay: 12s, 12s;}
#index:hover #slideshow #img4{z-index:6; -o-transition-property: opacity, z-index; -o-transition-delay: 16s, 16s;}
#index:hover #slideshow #img5{z-index:5; -o-transition-property: opacity, z-index; -o-transition-delay: 20s, 20s;}
#index:hover #slideshow #img1{z-index:9; -webkit-transition-property: opacity, z-index; -webkit-transition-delay: 3s, 3s;}
#index:hover #slideshow #img2{z-index:8; -webkit-transition-property: opacity, z-index; -webkit-transition-delay: 8s, 8s;}
#index:hover #slideshow #img3{z-index:7; -webkit-transition-property: opacity, z-index; -webkit-transition-delay: 12s, 12s;}
#index:hover #slideshow #img4{z-index:6; -webkit-transition-property: opacity, z-index; -webkit-transition-delay: 16s, 16s;}
#index:hover #slideshow #img5{z-index:5; -webkit-transition-property: opacity, z-index; -webkit-transition-delay: 20s, 20s;}

#indexpage .imgall{
width: 96%;
margin: 1% 1% 1% 3%;
}

#indexpage article.index_product{
height: 24em;
width: 28%;
margin: 1% 0% 1% 3%;
padding: 1%;
float: left;
border-style:none;
background-color:var(--lightcolor);
}
#indexpage article.index_product header{
background:none;
color: black;
text-align:center;
}
#indexpage article.index_product img {
margin: 5% auto 0% auto;
}
#indexpage a:link { color:black; text-decoration:none;}
#indexpage a:visited { color:black; text-decoration:none;}
#indexpage a:hover { color:black; text-decoration:none;}
#indexpage a:active { color:black; text-decoration:none;}
#indexpage a:focus { color:black; text-decoration:none;}

#indexpage a:link img {border: none;}
#indexpage a:visited img {border: none;}

/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Seite "Kontakt"*/

.kontaktadresse{
width:48%;
margin: 0%;
float: left;
}

#kontaktform{
width: 90%;
margin: 2% auto 0% auto;
}

#kontaktform table{
width: 100%;
}

#kontaktform table tr td{
vertical-align: top;
padding: 1% 1% 0% 0%;
}

.contact{
margin: 1% 0 1% 0; 
}

/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Seite "afm.html, anwendung*.html"*/

.afm .bild {
float: left;
width:39%;
margin: 2% 0% 0% 0%;
text-align:center;
}
.afm .bild img{
width:90%;
}
.afm .bild ul {
list-style:none;
}
.afm .bild ul li {
text-align:center;
margin: 0% 5% 0% 0%;
padding: 5% 0% 5% 0%;
}
.bild .frage{
border: solid 1px rgb(0,150,0);
color: rgb(0,100,0);
background: var(--lightcolor);
}
.bild .frage a:link, .frage a:visited{
color: rgb(0,100,0);
text-decoration:none;
}
.afm div.schlagwort{
padding: 1%;
text-align:center;
font-size:120%;
font-weight:bold;
color:var(--darkcolor);
}
.afm table.info{
width: 60%;
padding: 0%;
}
.afm table.info tr td{
padding: 2% 1% 1% 3%;
vertical-align: top;
text-align:left;
font-weight: bold;
font-size: 110%;
background: var(--lightcolor);
}
.afm table.info tr td ul{
margin: 1% 0% 1% 0%;
}
.afm table.info tr td li{
font-weight:normal;
}


/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Seite "Anwendungen"*/

.anwendung img{
width: 200px;
margin: 1%;
border: solid;
}
.anwendung a {
text-decoration:none;
}

.anwendungsdetail dl{
margin: 1%;
padding:1%;
float:none;
background: white;
border: solid 1px black;
}
.anwendungsdetail#snom dl{
margin: 1%;
padding:0px;
background: none;
border: none;
float:left;
}
.anwendungsdetail#snom img{
width: 95%;
}
.anwendungsdetail#snom table img{
border: solid 1px black;
}
.anwendungsdetail dd{
font-size:90%;
}
.anwendungsdetail img{
width: 47%;
margin: 1%;
}
.anwendungsdetail#brr img{
width: 90%;
margin: 1%;
}
.anwendungsdetail table{
margin: 2% 0 1% 0;
padding:1%;
border: solid 1px;
}
.anwendungsdetail table td{
vertical-align:top;
}

.anwendungsdetail div.video{
margin: 2% 1% 1% 1%;
padding: 1%;
border: solid black 1px; 
text-align:center; 
float:left; 
}

/*+++++++++++++++++++++++++++++++++++++++++++*/

p.head{
text-align:left;
font-weight: bold;
font-size: 110%;
}

/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Seite mit  Bild in grosser Aufloesung*/

#bildseite{
clear: both;
padding: 2%;
text-align: center;
}

/*+++++++++++++++++++++++++++++++++++++++++++*/
/*Seite mit  Video in grosser Aufloesung*/

iframe.videogross{
width: 320px;
height: 240px;
margin: 1%;
}

iframe.videoklein{
width: 200px;
height: 150px;
margin: 0%;
}

/*+++++++++++++++++++++++++++++++++++++++++++*/

img.bildrechts{
width:40%;
margin: 1% 1% 1% 2%;
float: right;
}
img.bildrechtsweiss{
width:40%;
margin: 1% 1% 1% 2%;
padding: 1%;
background-color: white;
float: right;
}
img.bildlinks{
width:40%;
margin: 1% 2% 1% 1%;
float: left;
}

dl.dlreihe{
float:left;
}
dl.dlreihe img{
width:200px;
}
dl.dlreihe a{
text-decoration:none;
}

.bildertable{
margin: 0 auto 0 auto;
}
.bildertable img{
width: 100%;
}


/*+++++++++++++++++++++++++++++++++++++++++++*/
#main article.configurator p, #main article.configurator table {
width: 100%;
margin: 1% auto 1% auto;
padding: 1%;
border:solid 1px var(--darkcolor);
}

#main article.configurator table tr td, #main article.configurator input{
vertical-align: top;
text-align:left;
}

#main article.configurator table img {
width: 200px;
}

/*+++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width:700px){

#page_header img{
float:none;
width: 40%;
margin: 0% auto 0% 1%;
padding: 1%;
}
#page_header_text{
width: 90%;
margin: 0% auto 0% auto;
padding: 1%;
float:none;
}
#page_header_contact{
width: 90%;
float:none;
padding: 1%;
}
#page_header_contact ul{
width: 90%;
float:none;
margin: 0%;
}
#page_header_contact ul li{
display: inline;
}
#sidebar{
display:none;
}
#main{
width: 100%;
padding: 0%;
float: none
}

dl img{
width: 100%;
}

}


@media screen and (max-width:500px){

#indexpage article.index_product{
height: 18em;
width: 90%;
margin: 2% 0% 2% 5%;
padding: 1%;
float: none;
}


#navigation nav{
height:54em;
}
#navigation nav ul.mainmenue{
position:absolute;
}
#navigation nav ul li{
width: 95%;
padding: 0.5% 1% 0.5% 1%;
float:none;
text-align:left;
display: block;
}
#navigation nav ul li.m:hover{
border-right: none;
border-left: none;
}
#navigation nav ul li ul {
display: block;
margin: 0% 0% 0% 0%;
padding: 0%;
}
#navigation nav ul li:hover ul {
display: block;
position: relative;
margin: 0% 0% 0% 0%;
padding: 0%;
}
#navigation nav ul li ul li{
width: 100%;
padding: 1% 5% 1% 10%;
}
#navigation nav ul li ul li ol li{
margin: 0 0 0 -5%;
padding: 1%;
}

span.menueausblenden {
display:block;
}
label.an {
margin: 0em auto 1em auto;
padding: 0em;
display: block;
}
input.an:checked ~ span.menueausblenden {
display: none;
}

.afm .bild {
float: none;
width:100%;
}
.afm table.info{
width: 100%;
padding: 1%;
}

img.bildrechts{
width: 90%;
float: none;
}
img.bildrechtsweiss{
width: 90%;
float: none;
}
img.bildlinks{
width: 90%;
float: none;
}

}