html, body {
  height: 100%;
  text-align: center;
  margin: 0;
  padding: 0;}
/* kein Unterstrich */
              a {text-decoration: none;}
/* keine Punkte */
              li {list-style-type: none;}
/* Section füllt das Bild aus */
              section {min-height: 100%;}

h1,h2,a {font-family: 'Roboto', sans-serif;font-weight: 500;color: #494949;text-transform: uppercase;}
h2 {color: #5d7177;}
h3 {font-size: 40px;padding-top: 8%;margin-bottom: 5px;}
h4, p {font-family: 'Roboto Slap', serif; color: #494949;}
h5 {font-size: 18px; align: top; margin-bottom: 5px;}
hr {width: 30px; height: 3px;background: #494949;border: 0;margin: 0 auto 40px auto;}

#logo, li, img, .material-symbols-outlined {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}

.material-symbols-outlined {display:none !important;}

header {
  width: 100%;
  height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  z-index: 1;}

#logo {width: 150px; float: left;margin: 10px 0 0 25px;}
#logo img {width: 100%;}
#logo:hover {opacity: 0.5;}

header nav {float: right; margin: 0px 25px 0 0;}
header nav ul li {float: left; margin-left: 25px;}
header nav ul li {font-size: 14px;}
header nav ul li:hover {padding-top: 3px;color: #b6b6b6;}

#home h1 {margin: 150px auto 0 auto;font-size: 50px;}
#home h2 {color: #5d7177; margin: 0 auto 0 auto;font-size: 25px;}
#home img {text-align: right; width: 50px; margin: 5px 0 0 80%; opacity: 0.7;}
#home img:hover {opacity: 1;}

#about img {width: 20%;}
#about h4 {font-size: 25;}
#about p {width: 60%;margin: 0 auto 0 auto;}
#about img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  }

#kurse h1 {margin: 150px auto 0 auto;font-size: 50px;}
#kurse h2 {color: #5d7177; margin: 0 auto 0 auto;font-size: 10px; text-align: center;}
#kurse h5 {margin: 0 auto 0 auto;font-size: 22px;}
table {width: 90%; border: 0px;border-collapse: collapse;}
td, th{
  vertical-align: top;
  text-align: left;
  border: 0px solid #b6b6b6;
  }

#kurse {margin: 0px;padding: 0px;box-sizing: wrap; margin-top: 100px;}
.fa-baby {padding-top: 20px;}
.fa-hands-holding-child {padding-top: 20px;}
.fa-music {padding-top: 20px;}
.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
  }

.card {
width: 325px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
margin: 20px;
}

.card img{width: 100%;height: auto;}
.card-content {padding: 16px;}
.card-content h6{font-size: 28px;margin-bottom: 8px;margin-top: 8px;}
.card-content p{color: #999;font-size: 15px;line-height: 1,3;}

.card-content .btn {
display: inline-block;
padding: 8px 16px;
background-color: #333;
text-decoration: none;
border-radius: 4px;
margin-top: 16px;
color: #fff;
}


#projects {width: 900px;margin: 0 auto 0 auto;}
#projects ul {padding: 0;}
#projects ul li {width: 33.3%;float:left; margin-bottom: 15px;}
#projects img {width: 280px;height: 170px;border-radius: 10px;}
#projects img:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  box-shadow: 0 5px 0 rgba 0,0,0,0.3;}

#kontakt p {text-align: left; width: 100%; margin: 0 auto 10 auto;}
#kontakt h1 {text-align: left; width: 20%; margin: 5px auto 0 auto;}
#kontakt h4 {text-align: left; width: 20%; margin: 5px auto 10 auto;}


@media screen and (max-width: 700px) {
header {height:Auto;}
header {margin:0; float: none;}

.material-symbols-outlined {display:inline-block !important;cursor: pointer;}
.material-symbols-outlined {opacity: 0.5;}

header nav {margin-top: 0;}
header nav ul {height: 0; overflow: hidden; margin: 0;padding: 0; width: 100%;}
header nav ul.open {height: auto;}
header nav ul li {width: 100%; padding: 5px 0; margin: 0; font-size: 11px; border-top: 1px solid #dddddd;}
header nav ul li:hover {background-color: #eeeeee;}

#logo {width:130px; margin-top: 5px;}

#home h1 {font-size: 30px;margin-top: 200px}
#home h2 {font-size: 22px;}
h3 {padding-top: 12%;}
#about p {width:80%;}

}