.verteilt {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    div.diagrammbox {
        float:left; 
        width:56%;
    }
    @media all and (max-width: 1000px) {
        div.diagrammbox {
        width:100%;
        }
    }
    .tablebox {
        float:left; 
        width:39%; 
        color: black;
    }
    @media all and (max-width: 1000px) {
        .tablebox {
        width:100%;
        }
    }
    .Inhalt { list-style: none; width: 49%; list-style-position: outside; font-size: 1em; font-weight: normal;}
    .Inhalt li { border: 1px solid #C0C0C0; border-left: 10px solid #C0C0C0; padding: 0px 6px; margin-top: 20px; font-weight: normal; }
    .Inhalt li a { color: black; font-weight: normal;}
    .Inhalt li a:hover { color: red; font-weight: normal;}
    .Inhalt li ul { }
    .Inhalt li ul li{ border: 0; margin-top: 5px; font-size: 1em;}
    .Inhalt li ul li a { color: black; font-weight: bold;}
    .Inhalt li ul li a:hover { color: red; font-weight: bold;}
    
    .InhaltDivBlock {
        display: block;
        clear: both;
        padding: 2%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        background-color: #e6e6fa;
    }
    .InhaltDivBlock a {line-height: 1.5;}
    .InhaltDivBlock a:visited { color: #AA3939; font-weight: normal;}
    .InhaltDivBlock a:active { color: #AA3939; font-weight: normal;}
    .InhaltDivBlock a:link { color: #AA3939; font-weight: normal;}
    .InhaltDivBlock a:hover { color: white; background-color: #004C66; font-weight: normal;}
    
    .InhaltDiv { float:left; width:45%; overflow: hidden; margin-top: 2%; margin-right: 2%; padding: 5px; background-color: #e6e6fa;}
    @media all and (max-width: 800px) {
        .InhaltDiv { float:left; width:90%; overflow: hidden; margin-top: 2%; margin-right: 2%; padding: 5px; background-color: #e6e6fa;}
    }
    .InhaltDivEle { float:left; width:49%; margin: 0; padding: 0;}
    .InhaltDivEleR { float:right; width:49%; margin: 0; padding: 0;}
    .InhaltImg { float:left; margin-left:0px; margin-right:10px; margin-bottom:0px; width:30%; border: 1px solid #C5D8E1;border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
    .InhaltUl { list-style: none; margin: 0; padding:1%; font-size: 1em; margin-left: 0;}
    .InhaltUl li { margin-bottom: 5px; }
    .InhaltUl li a:visited {color:black;}
    .InhaltUl li a:active {color:grey;}
    .InhaltUl li a:link {width:100%;height:20px; background-color:#f5f5f5; color:black; font-weight:normal; text-decoration:none; padding-top: 10px; text-align:left; display:inline-block;box-shadow: 3px 3px 3px grey; margin-top:5px}
    .InhaltUl li a:hover {color:red;}
    
    .InhaltUlNav {list-style: none; margin-left:0em;padding-left:0.5em; font-size: 1em; }
    .InhaltUlNav li { margin-bottom: 10px; }
    .InhaltUlNav li a:link { color: #AA3939; font-weight: normal; text-decoration:none; }
    .InhaltUlNav li a:visited { color: #000000; font-weight: normal; text-decoration:none; }
    .InhaltUlNav li a:hover { color: red; font-weight: normal; text-decoration:none; }
    .InhaltUlNav li a:active { color: #AA3939; font-weight: normal; text-decoration:none; }
    
    #Master {
    overflow: auto; 
    
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    
    }
    #MasterRechts {
    width: 300px;
    padding-left: 2%;
    padding-right: 2%;
    hyphens: auto; 
    text-align: justify;
    float: right;
    display: block;
    box-shadow: 10px 10px 30px grey;
    }
    @media all and (max-width: 800px) {
        #MasterRechts {
        width: 95%;
        padding-left: 2%;
        padding-right: 2%;
        hyphens: auto; 
        text-align: justify;
        float: left;
        display: none;
        }
    }
    #MasterMitte {
    height: auto;
    padding: 2%;
    }
    @media all and (max-width: 800px) {
        #MasterMitte {
        height: auto;
        padding: 2%;
        }
    }
    #p_Ausblenden {
        font-size: 1.2em;
        font-weight:bold;
        color: black;
    }
    @media all and (max-width: 800px) {
        #p_Ausblenden {
            font-size: 1.2em;
            font-weight:bold;
            color: red;
        }
    }
    
    section a:link {color:black; font-weight:bold; text-decoration:none; padding-left: 5px; padding-right: 5px}
    section a:visited {color:black; font-weight:bold; text-decoration:none; padding-left: 5px; padding-right: 5px}
    section a:hover {color:red; font-weight:bold; text-decoration:none; padding-left: 5px; padding-right: 5px}
    section a:active {color:grey; font-weight:bold; text-decoration:none; padding-left: 5px; padding-right: 5px}
    
    .Marker {
        opacity:0;
    }
    
    .InputBox {
        font-size: 1.4em; 
        text-align: center; 
        margin-top: 10px;	
    }
    .FormelBox {
    float:left; 
    font-size: 1.4em; 
    text-align: center; 
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .ph {
     float:left; 
     width:45%;
    }
    .FormelBoxC {
	font-size: 0.95em !important;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
}

    .FormelBoxCh {
     float:left;
     font-size: 1.4em; 
     text-align: center;
     width: 45%; 
     margin-top: 10px; 
     margin-bottom: 10px;
    }
    @media all and (max-width: 1100px) {
        .FormelBoxCh {
         font-size: 1.2em; 
        }
    }
    @media all and (max-width: 800px) {
        .FormelBoxCh {
         font-size: 1.0em; 
        }
    }
    .FormelBoxK {
        clear:both; 
        font-size: 1.4em; 
        text-align: left; 
        margin: 10px; 
        padding-top:10px;
    }
    .FormelBoxL {
        max-width: 98%;
        float:left; 
        font-size: 1.4em; 
        text-align: left; 
        margin: 10px; 
        padding-top:10px;
    }
    @media all and (max-width: 1100px) {
        .FormelBoxL {
         float:left; 
         font-size: 1.2em; 
         text-align: left; 
         margin: 10px; 
         padding-top: 10px;
        }
    }
    @media all and (max-width: 800px) {
        .FormelBoxL {
         float:left; 
         font-size: 1.0em; 
         text-align: left; 
         margin: 5px; 
         padding-top: 10px;
        }
    }
    @media all and (max-width: 400px) {
        .FormelBoxL {
         float:left; 
         font-size: 0.8em; 
         text-align: left; 
         margin: 0; 
         padding-top: 10px;
        }
    }
    .Beispiel {
    float:left; width:47%;
    border-left: 1px solid #C0C0C0;
    margin-top: 5px;
    margin-left: 5px;
    }
    .Beispiel-Text {
    float:left; font-size: 0.8em; text-align: left; color: green; display: block; margin: 5px 0px 0 0; width:40%; 
    }
    .Beispiel-Num {
    font-family:'Algerian'; height: 25px;
    float:left; font-size: 0.9em; text-align: left; margin: 7px 5px 0 0; padding-left:5px; width:15px; color: green; border-left:1px solid green; display: inline;
    }
    
        
      .Formel {
        clear:both;
          font-family:Arial;
        font-size: 1.1em;
        color: black;
        margin-left: 10px;
        margin-bottom: 5px;
        font-weight: bold;
        }
        
      .Formelg {
        float: right;
          font-family:Arial;
        font-size: 1em;
        color: green;
        margin-left: 10px;
        margin-bottom: 5px;
        margin-right: 5px;
        font-weight: normal;
        }
    
      .Formel1 {
          font-family:Arial;
        font-size: 1.1em;
        color: black;
        margin-left: 10px;
        margin-bottom: 5px;
        font-weight: bold;
        }
        
      .matrix {
          font-family:Arial;
        font-size: 1.2em;
        line-height: 1.5;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 5px;
        float: left;
        border: 0px;
        font-weight: bold;
        }
    @media all and (max-width: 1100px) {
        .matrix {
         font-size: 1.2em; 
        }
    }
    @media all and (max-width: 800px) {
        .matrix {
         font-size: 1.0em; 
        }
    }
    @media all and (max-width: 400px) {
        .matrix {
         font-size: 0.8em; 
        }
    }	
      .matrixg {
          font-family:Arial;
        font-size: 1.2em;
        line-height: 1.5;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 5px;
        float: left;
        border: 0px;
        font-weight: bold;
        color:green;
        }
    @media all and (max-width: 1100px) {
        .matrixg {
         font-size: 1.2em; 
        }
    }
    @media all and (max-width: 800px) {
        .matrixg {
         font-size: 1.0em; 
        }
    }
    @media all and (max-width: 400px) {
        .matrixg {
         font-size: 0.8em; 
        }
    }
        
      .matrixb {
          font-family:Arial;
        font-size: 1.2em;
        line-height: 1.5;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 5px;
        float: left;
        border: 0px;
        font-weight: bold;
        color:blue;
        }
    @media all and (max-width: 1100px) {
        .matrixb {
         font-size: 1.2em; 
        }
    }
    @media all and (max-width: 800px) {
        .matrixb {
         font-size: 1.0em; 
        }
    }
    @media all and (max-width: 400px) {
        .matrixb {
         font-size: 0.8em; 
        }
    }
    
      .res_ {
          font-family:Arial;
        font-size: 1em;
        color: black;
        margin-left: 5px;
        margin-bottom: 5px;
        }
    
    .E-box-1 {
        box-sizing: border-box;
        float:left; 
        display: block;
        width: 100%;
        padding: 2%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 1%;
    }
    
    .enjoy-css {
      display: inline-block;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      padding: 2px 3px;
      height:32px; width:40px;
      text-align: center;
      border: 1px solid #b7b7b7;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      font: normal 16px/normal "Times New Roman", Times, serif;
      color: rgb(7, 7, 7);
      -o-text-overflow: clip;
      text-overflow: clip;
      background: rgba(252,252,252,1);
      -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
      box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
      text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
      -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
      -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
      -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
      transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    }
    
 
    .B1 {
	font-size: 15px;
	font-family: Arial;
	width: 140px;
	height: 48px;
	border-width: 1px;
	color: #ffffff;
	border-color: #74b807;
	font-weight: bold;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	box-shadow: inset 0px 1px 0px 0px #a4e271;
	text-shadow: inset 0px 1px 0px #528009;
	background: linear-gradient(#89c403, #77a809);
	margin: 20px 0px 0px 31px;
}

.B1:hover {
  background: linear-gradient(#77a809, #89c403);
}
#Box-out{background-color: #272727;border-radius: 10px 10px 0 0;width:100%;max-width: 580px; margin:0 auto}
    #cP {text-align: center; color: #eee; margin: 0 auto; width: 97%;}
 .header_{height:48px;background-color: #2d073b; border-radius: 10px 8px 0 0;}
 
 .B2 {
	font-size: 28px;
	font-family: Arial;
	display: block;
	width: 56px !important;
	height:48px;
	border-width: 1px;
	color: #fff;
	border-color: #d02718;
	font-weight: bold;
	border-top-left-radius: 8px;
	box-shadow: inset 0px 1px 0px 0px #f5978e;
	text-shadow: inset 0px 1px 0px #810e05;
	background: linear-gradient(#f24537, #c62d1f);
	text-align: center;
	padding: 1px 3px 5px;
}

.B2:hover {
  background: linear-gradient(#c62d1f, #f24537);
}
.B2 span{margin-top: 10px; display: block;}
.pare{display:inline-block; border: 2px solid black;width:max-content; border-bottom: 0; border-top: 0; border-radius: 12px;
    padding: 5px 10px;}
 .steps{height: 350px;
  overflow-y: auto;
  padding-bottom: 20px;}
  .ocultar{position: absolute !important; left:-9999999999px !important}  
  #formu{position:relative;width:300px; text-align: center; margin:0 auto}    
  input[type="number"] {
            -moz-appearance: textfield; /* Firefox */
            appearance: textfield; /* Otros navegadores */
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }   
        #lgif{position: absolute; left: 23%; transform: translateX(-50%); bottom:10px}