*::before,
*::after,
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* root */
:root {
    --grau: #141414;
    --rot: #D26D6C;
    --weiss: #FFFFFF;
    --hell: #E2E3E1;
  }

  .modal {
    display: none; /* hide the modal by default */
    position: fixed; /* position the modal in the center of the viewport */
    top: 50%; 
    left: 50%;
    transform: translate( -50%, -50%);
    background-color: var(--weiss);


    width: 80%;
    z-index: 100777777777; /* make sure the modal is on top of other content */
    padding: 3rem 3rem;
    overflow: auto;
    max-height: 80vh;
}



h2 {
    padding-top: 0.5rem;
    padding-bottom: 3rem;
}
h3 {
    color: var(--weiss);
    padding-bottom: 1rem;
}

.image {
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
}

.zutaten {
    width: 100%;
    padding: 0 !important;
}

.zutaten img{
    width: 100%;
}


.close button{
    background-color: var(--weiss);
    color: var(--grau);
    width: 3rem;
    height: 3rem;
    border: none;
    position: fixed; /* position the close button in the top right corner of the modal */
    top: 0;
    right: 0;
    font-size: 48px;
    cursor: pointer;
}

.open {
    align-self: center;
    padding: 1.5rem 2rem;
    margin-top: 8rem;
    background-color: var(--rot);
    border: none;
    color: var(--weiss);
    font-size: calc(100% + 0.3vw);
    font-style: uppercase;
    cursor: pointer;
    border-radius: 15rem;
}

.open:hover {
    font-size: calc(100% + 0.4vw);
}

@media (max-width: 576px) { 
    .modal {
        width: 100%;
        padding: 3rem 0;
    }

    .open {
        margin-top: 2rem;
    }

    .close button {
        font-size: 28px;
    }

}