/* Snap Scroll */
@media (prefers-reduced-motion: no-preference) {
  body {
    background-image: url('img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    scroll-snap-type: y mandatory; 
    scroll-behavior: smooth;
    scroll-padding: 0; 
  }
  section {
    height: 100vh;
    scroll-snap-align: start; 
    scroll-margin: 0;  /* nicht nötig */
  }
}
html, body {
position: relative;
}
* {
  font-family: "Poppins", sans-serif;
}
.parent {
  overflow: scroll;
  height: 100vh;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}
section {
min-height: 100vh;
scroll-snap-align: start;
position: relative;
padding: 1.5em;
}
/* Nav Bar */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
  }
  
li {
  float: right;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
    background-color: #111;
}
h1 {
  color: white;
  font-size: 3em;
}
.font-burly {
  color: burlywood;
}
h2 {
  color:burlywood; 
}
h3 {
  color:white;
}
p {
  font-size: 20px;
  color:white;
}
.contact_formular {
  color:burlywood;
}
.knopf {
  border-style: solid;
  border-width: 1px;
  border-radius: 4em;
  padding: 5px;
  font-size: 1em;
  color: white;
  background-color: transparent;
  text-decoration: none;
}
.knopf:hover {
  font-size: 1.2em;
}
.box {
  float: left; width: 32%; margin-right: 2%; padding: 20px; background:gray; box-sizing: border-box;
  background: linear-gradient(gray 50%, #deb887 50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: 0.5s;
}
.box:last-child {
  margin-right:  0;
}
.icon-wrapper {
  background-color: #deb887;
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.5em;
  width: 2.5em;
  color: gray;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.5s;
}
.box:hover {
  background-position: 0 100%;
}
.box:hover .icon-wrapper {
  background-color: gray;
  color: #deb887;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.column {
  float: left; width: 30%; margin-right: 2%; padding: 5px;
  text-align: center;
}
.card {
  width: 100%;
  height: 100%;
  background: linear-gradient(#ffffff 50%, #deb887 50%);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: 0.5s;
}
h3 {
  font-size: 20px;
  font-weight: 600;
  color: #964B00;
  margin: 1em 0;
}
p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.icon-wrapper {
  background-color: #deb887;
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.5em;
  width: 2.5em;
  color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.5s;
}
.card:hover {
  background-position: 0 100%;
}
.card:hover .icon-wrapper {
  background-color: #ffffff;
  color: #deb887;
}
.card:hover h3 {
  color: #ffffff;
}
.card:hover p {
  color: #f0f0f0;
}
/* divs */
.demo{
  text-align: center;
  vertical-align: middle;
}