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


/*Styleshetangaben das Grundlayout betreffend, möcglichst nicht ändern*/
.clearfix {
    overflow: auto;
}

.clearing { 
    clear: both; 
}

.img150
{
float: left;
} 

.ma_body {
    /*layout do not change*/
    margin:0px;
    padding:0px;
    height:auto;
   /*content sitewide*/
    background-color:transparent;
    background-attachment:fixed;
    /*background-image:url(../design/textures/ma-bg-gradient-v-blue-04.png);*/
    /*background-repeat:repeat;*/
    color:#333333;
    font-size:10pt;
    font-family:verdana,geneva,sans-serif;
}

div{
    margin:0px;
    padding:0px;
}

.button_english{
	 width:30px;
     height:18px;
     background-color:transparent;
     background-image:url(../infomaterial/img/fl_br_18.gif);
     background-repeat:no-repeat;
	 z-index:1;
}

.button_german2{
	 width:30px;
     height:18px;
     background-color:transparent;
     background-image:url(../infomaterial/img/fl_de_18.gif);
     background-repeat:no-repeat;
	 z-index:1;
}

@media screen and (max-width: 640px) {
.button_english{
	 display: block;
     margin-left: auto;
     margin-right: auto;
	 width:30px;
     height:18px;
     background-color:transparent;
     background-image:url(../infomaterial/img/fl_br_18.gif);
     background-repeat:no-repeat;
	 z-index:1;
}

.button_german2{
	 display: block;
     margin-left: auto;
     margin-right: auto;
	 width:30px;
     height:18px;
     background-color:transparent;
     background-image:url(../infomaterial/img/fl_de_18.gif);
     background-repeat:no-repeat;
	 z-index:1;
}
}

.button_german {
     position:relative;	 
     bottom:41px;
	 left:62%;
	 width:30px;
     height:18px;
	 background-color:transparent;
     /*background-image:url(../infomaterial/img/fl_de_18.gif);*/
     background-repeat:no-repeat;
	 z-index:1;
}

.textfield_contact {
    position:relative;	 
    width:25%;
	max-width:250px;
    float:right;
	padding-right:20px;
	top:20px;
	z-index:1;
}

/* The header and footer */

.ma_wrapper_outside {
    postion:relative;
    top0px;
    left0px;
    background-color:white;
}

/*set width of the complete site, you can use a fix value instead of a % value*/
.ma_wrapper_inside {
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    width:100%;
    overflow:hidden;
    background-color:transparent;
}

/*use this box ditance to the top of the screen*/
.ma_box_header_1     {
    display:block;
    height:0px;
    background-color:red;
}
/*use this box tp place adwords or something else above the logo*/
.ma_box_header_2 {
    display:block;
    position:absolute;
    height:0px;
    background-color:transparent;
}
/*Setze hier die Angaben für die Logo-Box - ###*/

.ma_box_header_3 {
    position:relative;
	width:auto;
    background-color:#666666;
    background-repeat:repeat;
	z-index:0;
}

@media screen and (max-width: 640px) {
.ma_box_header_3 {
    position:relative;
	top:30px;
	width:auto;
    background-color:#666666;
    background-repeat:repeat;
}
}

.ma_box_header_3_img{
	position:relative;	 
    width:50%;
	max-width:300px;
	left:20px;
	top:10px;
	z-index:1;
}

/*Setze hier die Farbe und Dicke der Linie (Box) unterhalb des Logos*/
.ma_box_header_4 {
    position:relative;
	width:100%;
	bottom:0px;
	left:0px;
    height:9px;
	min-height: 1px; 
    background-color:#ff6600;
	z-index:2;
}

.ma_box_content_1 {
    display:block;
    background-color:transparent;
   /*min-height:980px;*/
   	z-index:3;
}

/*
@media screen and (max-width: 640px) {
.main_content_left{
    vertical-align:top;
    padding-top:100px;
	table-layout:auto;
    white-space: nowrap;
}
}
*/

@media screen and (min-width: 640px) {
.main_content_left{
    table-layout:auto;
    white-space: nowrap;
    vertical-align:top;
    width:140px; /*Achtung die Angabe padding vergrößert die gesamte box auf 180px!*/
    padding-left:20px;
    padding-top:20px;
    padding-right:20px;
    /*background-color:#ffcc99; Hintergrundfarbe des Menu*/
    background-color:#f6f6f6; /*Hintergrundfarbe des Menu*/
	border-spacing:0px;
    height:450px;
}
}

.main_content_middle{
	table-layout:auto;
    vertical-align:top;
    padding-left:20px; /*Bei Bedarf den Standardwert in der jeweiligen Datei kleiner setzten */
    padding-top:10px; /*Bei Bedarf den Satndardwert in der jeweiligen Datei kleiner setzten */
    padding-right:5px;
    padding-bottom:20px;
    background-color:white;
    border-spacing:0px;
    min-height:450px;
}

.ma_box_footer_1 {
    display:block;
    height:3px;
    background-color:#ff7225;
    text-align:center;
}

.ma_box_footer_2 {
    display:block;
    min-height:24px;
    background-color:white;
    text-align:center;
}


.ma_clear {clear:both;}

/* Stylesheetangaben für den Inhalt */

/* Vorsicht der *-Selektor betrifft auch html-tags, die dann nicht mehr 
/*
*{
   font-size:10pt;
   color:#333333;
}
*/

p {
    color:#333333;
    font-size:10pt;
    font-family:verdana,geneva,sans-serif;
    text-decoration:none;
    text-align:left;
}

/*Überschrift als tag definiert, einbinden mit <h1>Titel</h1>
/*Macht einen Zeilenumbruch*/
h1 {
    color:#333333;
    font-size:16pt;
    font-style:normal;
    font-weight:100;
    text-decoration:none;
}

/*Überschrift als Klasse definiert, einbinden mit <span class="h1">Titel</span>
/*macht keinen Zeilenumbruch*/
.h1 {
    color:#333333;
    font-size:16pt;
    font-style:normal;
    font-weight:100;
    text-decoration:none;
}

img{
   border:0px; 
}

.menu_actual_site{
    color:#990000;
}


.seitz_orange{
    color:#ff6600;
}

.menu_seperator{
    background-color:#333333;
    /*Die Hintergrundfarbe umfasst auch den Borderbereich!*/
    border:0px none transparent;
    width:140px;
    height:2px;
    /*Die Hintergrundfarbe umfasst auch den Borderbereich!*/
    margin-top:30px;
    margin-left:0px;
    margin-bottom:30px;
    margin-right:0px;
}

/* Für die Variante ohne Trennlinie einfach background-color:transparent;*/
.block_seperator_line{
    background-color:#333333; 
    /*Die Hintergrundfarbe umfasst auch den Borderbereich!*/
    border:0px none transparent;
    width:99%;
    height:1px;
    margin-top:10px;
    margin-left:0px;
    margin-bottom:10px;
    margin-right:0px;
}

.block_seperator_transparent{
    background-color:transparent;
    /*Die Hintergrundfarbe umfasst auch den Borderbereich!*/
    border:0px none transparent;
    width:99%;
    height:1px;
    margin-top:0px;
    margin-left:0px;
    margin-bottom:8px;
    margin-right:0px;
}

img {
    border:none;
}

table{
    border-collapse:collapse;
    border-spacing:0px;
}

.table_products {
    padding:0px;
    border-left:0px solid transparent;
    border-right:0px solid transparent;
    border-top:0px solid transparent;
    border-bottom:0px solid transparent;
    background-color:transparent;
    vertical-align:top;
}

.products_pdf{
  margin-left:0px;
  margin-right:0px;
  margin-top:0px;
  margin-bottom:2px;
  height:145px;
  width:103px;
  border-top:0px solid #999999;
  border-left:0px solid #999999;
  border-right:2px solid #bbbbbb;
  border-bottom:2px solid #999999;
}

.arrow_more{
    color:#ff6600;
    font-size:10pt;
}

a.arrow_more          {color:#ff6600; font-size:10pt;}
a.arrow_more:link     {color:#333333; font-size:10pt;}
a.arrow_more:visited  {color:#ff6600; font-size:10pt;}
a.arrow_more:hover    {color:#ff6600; font-size:10pt;}

.arrow_standard{
    color:#ff7225;
    font-size:11pt;
}

.arrow_big{
    color:#ff7225;
    font-size:18pt;
    /*background-color:transparent;*/
    /*background-image:url(../infomaterial/img/fl_br_18.gif);*/
    /*background-repeat:no-repeat;*/
}

a.arrow_big          {color:#ff7225; text-decoration:none; font-size:18pt;}
a.arrow_big:link     {color:#ff7225; text-decoration:none; font-size:18pt;}
a.arrow_big:visited  {color:#ff7225; text-decoration:none; font-size:18pt;}
a.arrow_big:hover    {color:#ff7225; text-decoration:none; font-size:18pt;}

/*Verbleibende Rahmen um bereits ausgewählte Links entfernen*/
/*Funktioniert möglicherweise nicht in allen Browsern, dann javascript-Methode einbauen*/
a:focus { outline: none; }

/*Für die Titel-Links die auf die Produktunterseite Verlinken*/
a.h1_link          {color:#333333; text-decoration:none; font-size:16pt;}
a.h1_link:link     {color:#333333; text-decoration:none; font-size:16pt;}
a.h1_link:visited  {color:#333333; text-decoration:none; font-size:16pt;}
a.h1_link:hover    {color:#ff7225; text-decoration:none; font-size:16pt;}


/*Alte Layout Angaben */

/* Links global, d.h. alle die nicht anders definiert sind: */
a          {color:#333; font-size:10pt; text-decoration:none;}
a:link     {color:#333; font-size:10pt; text-decoration:none;}
a:visited  {color:#333; font-size:10pt; text-decoration:none;}
a:hover    {color:#333; font-size:10pt; text-decoration:underline;}


/*Folgende Boxen sind für den Mouse-Over-Effekt bei Detailbildern nötig*/
/*Unter Umständen kann eine andere Funktion auf javascriptbasis angewendet werden*/
/*alter Wert für #box {height:40px;width:30px;float:left; padding:8;margin:5px; position:relative; top:15px; left:-20px;}*/

/*#box {position:relative; top:0px; left:0px;}*/

/* Für Textblöcke ohne Fotobutton zur identischen Formatierung*/
#placeholder_botton_foto{
    height:45px;
    width:45px;
    background-color:transparent;
    float:left;
}


.stop_float{
    clear:both;
}


#box {float:left;}

#box a:hover {
    width:auto;  /*Breite lokal in der html-Datei festlegen oder allgemein in detail_img*/
    height:auto; /*Höhe lokal in der html-Datei festlegen allgemein in detail_img*/
}

/* % Angaben noch auf Viewport Handy Tablet anpassen*/
.detail_img {
    width:100%;
    min-width: 300px; 
    max-width: 600px
    height:auto;
}

#box span{display:none;}
#box a:hover span {position:fixed; top:30px; left: 30%; z-index:1; border:1px solid black; display:block; background-color:#ffffff; padding:0px; margin:0px;}

/*Angaben zum Debuggen der Seite */

.ma_commentary{
    
    background-color:#ffff00;
    display:none; /* setze dies auf den Wert display:none; um sichtbare Kommentare abzuschalten*/
}


/*FLYOUT*/


.nav-open {
	display: none;	
}

#nav {
	position: relative;
	float: left;
	/*width: 900px;*/
	width: auto;
	margin: 20px auto;
	background: #666666;/*#333;*/
	font-family: Arial, sans-serif;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 5px #888;
	-moz-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
}

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav ul li {
	/*float: left;  sonst quer*/
}

#nav ul li.close {
	display: none;
}

#nav ul li a {
	padding: 10px 15px;
	display: block;
	color: #fff;
	text-decoration: none;
}

#nav ul li a:hover {
	background: #ff6600;
	color: #111;
}

#nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}
#nav .submenu li { 
  display: block; 
  /*width: 15em;*/
}

/**     Show the submenu on hover, focus     **/
#nav li:hover .submenu,
#nav li:active .submenu, 
#nav li:focus .submenu,
#nav li:focus-within .submenu { 
  visibility: visible;
  height: auto;
  background: #585858 /**/
}


@media screen and (max-width: 640px) {
	
.nav-open {
	position: fixed;
	top: 0;
	left: 0;
	background: #333;
	font-family: Arial, sans-serif;
	display: block;
	width: 100%;
	z-index:2;
}

.nav-open a {
	padding: 10px 15px;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;	
	z-index:2;
}
	
#nav {
	position: fixed;
	top: -200%;
	left: 0;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index:2;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#nav:target {
	top: 0;
}

#nav ul li {
	float: none;
	text-align: center;
	border-bottom: 1px solid #555;
}

#nav ul li.close {
	display: block;
}

#nav ul li:last-child {
	border-bottom: none;
}

#nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}
#nav .submenu li { 
  display: block; 
  /*width: 15em;*/
}

}


  /*FÜR KLAPPEN FAQ*/

body {
  font-family: Arial, sans-serif;
  background-color: rgba(0,0,0,.1);
}

h2 {
  margin: 20px auto 80px;
  font-size: 16px;
  text-align: left;
  /*font-weight: 300;
  letter-spacing: 2px;
  line-height: 1.5;*/
}

details {
  width: 100%;
  min-height: 5px;
  max-width: 1000px;
  padding: 20px 70px 20px 20px;
  margin: 0 auto;
  position: relative;
  font-size: 16px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 3px;
  box-sizing: border-box;
  transition: all .3s;
}

details + details {
  margin-top: 15px;
}

details[open] {
  min-height: 50px;
  background-color: #f6f7f8;
  box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}

details p {
  color: #96999d;
  font-weight: 300;
}

summary {
  font-weight: 500;
  cursor: pointer;
}

/* removed outline as for codepen only
  don't remove focus on elements
  it's bad accessibility
  don't be _that_ guy
*/
summary:focus {
  outline: none;
}

summary::-webkit-details-marker {
  display: none
}

/*
summary::after {
  padding: 20px;
  position: absolute;
  top: 50%;
  right: 0;
  color: rebeccapurple;
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f078";
  transform: translateY(-50%);
  transition: .3s ease;
}

details[open] summary::after {
  content: "\f057";
  font-size: 30px;
  top: 0;
  transform: translateY(0);
  transition: .3s ease;
}
*/

details[open] summary:hover::after {
  animation: pulse 1s ease;
}

@keyframes pulse {
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}