.site-container { /* zentriert den Inhalt innerhalb voller Breite */
    width: 100%;
    max-width: 70em;
    margin: 0 auto;
    padding: 0 2em;
}

header {
    position: relative;
    width: 100%;
    text-align: right;
    z-index: 100;
    background-color: white;
}

header .site-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 1.25em;
    padding-bottom: 1.25em;
}

main {
    padding: 0;
}

#yup-logo{
    height: 5em;
}

#nav { /*ul*/
    list-style: none;
    margin: 0;
}
#nav li {
    display: inline;
    color: #ED7D00;  /*orange*/
}
#nav li a{
    padding: 1em 0.7em;
    font-weight: bold;
    border: 0;
}
#nav li a:hover { /*wenn man mit Maus dran geht*/
    border: 1px solid;
    border-color: #ED7D00;
    color: #ED7D00;  /*orange*/;
    text-decoration: none;
    border-radius: 5px;
}

h1 {
    padding-bottom: 1em;
}
h4 {
    padding-top: 2em;
    padding-bottom: 1em;
}

#map {
    margin-bottom: 2em;
    padding-bottom: 2em;
}

footer {
    width: 100%;
    background: white;
    padding: 2.5em 0;
}

@media only screen and (max-width: 900px) {
    #yup-logo {
        height: 4em;
    }
}

@media only screen and (max-width: 500px) {
    #nav li a {
        display: inline-block;
        padding: .5em .6em;
    }

    .halb {
        width: 100%;
    }
}

.bg-green-300.active{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}