/*Formatierung der Seite Homepage */

/* Die ganze Seite */
* {
  box-sizing: border-box;
}

/* Der Körper der Seite */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/*Der Header */
.header {
  padding: 80px;
  text-align: center;
  background: #282A35!important;
  color: white;
}
/*Der Absatz im Header */
.header p{
  color: #FFC0C7;
  font-weight: 700;
  margin-top: 30px!important;
  font-size: 23px;
}

/*Der Überschrift*/
.header h1 {
  font-size: 70px;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
}

/* Die Listen unter dem Header*/
.navbar {
  overflow: hidden;
  background-color: #b2e6d3;
}
.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-weight: bolder;
}
.navbar a:hover {
  background-color: rgb(128, 204, 13);
  color: black;
}
.profile{
  display: none;
}
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
 .navbar .profile .profile2{
            display:none;
        }
        .navbar .profile:hover .profile2{
            display: block;
            position: absolute;
            margin-top: 15px;
            margin-left: -15px;
            background-color:#01d28e !important;
            width: 30%;
            text-align: justify;
            padding: 15px;
            color: #FFFFFF !important;
            border-radius:1%;
        } 
        .navbar .profile .profile2 strong{
            color:black;
            font-weight:bolder;
        }
        .info{
  display: none;
  margin-top: 10px;  
}

.überuns:hover .info{
  display: block;
  position: absolute;
  margin-top: 15px;
  margin-left: -15px;
  background-color:#01d28e !important;
  width: 40%;
  text-align: justify;
  padding: 15px;
  color: #FFFFFF !important;
}

.kontakt{
  display:none;
}

.kontakt:hover .kontakt{
  display: block;
  position: absolute;
  margin-top: 15px;
  margin-left: -15px;
  background-color:#01d28e !important;
  width: 40%;
  text-align: justify;
  padding: 15px;
  margin-right: 30%;
  color: #FFFFFF !important;
}

.material-icons{
 width: 50px;
 height: 50px;
 border-radius: 50%;
 border: 2px solid rgba(255, 255, 255, 0.2);
 justify-content: center !important;
 align-items: center !important;
 padding: 10px;
 margin: 10px;
}

/* Die Listen neben dem Körper der Seite */
.zeile {  
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
}

.seite {
  -ms-flex: 30%; 
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

@media screen and (max-width: 700px) {
  .zeile {   
    flex-direction: column;
  }
}

/* Der Körper */
.körper .css{
  margin-top: 400px;
  background-color: #FFF4A3!important;
  padding: 10px;
  height: 48.6%;
}

.körper .css .beispiel{
  width: 35%;
  float:right;
  margin-bottom: 40px;
}

.körper {   
  -ms-flex: 70%; 
  flex: 70%;
  float: left;
  background-color:#D9EEE1!important;
}

.körper h1{
  font-size: 100px;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
  margin-left: 50px;
}
.körper p{
  margin-left: 40px;
  font-weight:bolder;
  
}
.körper .lerne{
    margin-top: 40px;
    background-color: #04AA6D;
    color: white;
    font-size: 22px;
    width: 200px;
    height: 40px;
    margin-left: 70px;
    outline-style: none;
    text-decoration: none;
    text-align: center;
    padding: 8px 16px;
    font-weight: bolder;
    border-radius: 10px;
}

.beispiel .try {
  margin-top: 20px;
    background-color: #4CAF50;
    border: none;
    border-radius: 10px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    font-weight: bolder;
}

.körper .beispiel{
  float: right;
  background-color: #E7E9EB;
  margin-right: 100px;
  margin-top: 40px;
  font-size: 17px;
  padding: 30px;
  border-radius: 5px;
}

.körper .beispiel .code{
  background-color: #fff;
  padding: 15px;
  border-left: #04AA6D 10px solid;
  user-select: none;
}

/* Die Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}



