body {
    margin: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    background: #213B00;
}

html {
    font-family: 'Marmelad', sans-serif;
    background: #213B00;
}

a {
    color: #A9C5EA;
}

article {
    font-size: 13px;
    font-size: 0.8125rem;
}

h1,
h2,
h3 {
    font-family: 'Philosopher';
    color: #031A00;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

.h-mtzero {
    margin-top: 0;
}

h1 {
    font-size: 28px;
    font-size: 1.75rem;
}

header h1 {
    padding-left: 16px;
    padding-left: 1rem;
    padding-top: 16px;
    padding-top: 1rem;
}

h2 {
    font-size: 24px;
    font-size: 1.5rem;
}

h3 {
    font-size: 20px;
    font-size: 1.25rem;
}

img {
    width: 100%;
    border-radius: 16px 16px 16px 16px;
    border-radius: 1rem 1rem 1rem 1rem;
    border: 8px;
    border: 0.5rem;
    border-style: solid;
    border-color: #213B00;
    margin-bottom: 16px;
    margin-bottom: 1rem;
}

figure {
    width: 100%;
    margin-left: 0;
}

.unsichtbar {

    display: none;
}

.red{
    color: #d90b0b;
}

.placeholder-bplan{
    margin-bottom: 400px;
}

/*Header*/

.site-header h1 {
    color: #C8D9F8;
}

/*Anpassungen am Inhaltsbereich*/

.site-contentarea {
    background: #E5F06E;
    color: #031A00;
    max-width: 1200px;
    margin: auto;
    padding: 16px;
    padding: 1rem;
    padding-top: 32px;
    padding-top: 2rem;
    padding-bottom: 32px;
    padding-bottom: 2rem;
}

.site-contentarea ul li {
    display: inline-block;
    width: 100%;
    list-style: none;
    background: url(images/listenpunkt.png) no-repeat left center;
    height: 24px;
    height: 1.5rem;
    line-height: 24px;
    line-height: 1.5rem;
    padding: 0 0 0 30px;
    padding: 0 0 0 1.875rem;
}

.site-contentarea h2:first-child {
    padding: 0;
    margin: 0;
}

.site-contentarea h3:first-child {
    margin-top: 0;
}

.site-contentarea a {
    color: #031A00;
}

.center h2:first-child {
    text-align: center;
    padding: 16px;
    padding: 1rem;
}

/*Anpassungen an den Tabellen*/

table,
td,
th {
    border: 4px;
    border: 0.25rem;
    border-style: solid;
    border-color: #637404;
    background-color: #213B00;
    border-radius: 4px 4px 4px 4px;
    border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
    border-spacing: 4px;
    border-spacing: 0.25rem;
    padding: 1px;
    padding: 0.0625rem;
    text-align: center;
}

td,
th {
    color: #A9C5EA;
    padding: 4px;
    padding: 0.25rem;
}

table {
    width: 100%;
    border: 8px;
    border: 0.5rem;
    border-style: solid;
    border-color: #213B00;
    border-radius: 16px 16px 16px 16px;
    border-radius: 1rem 1rem 1rem 1rem;
}

/*Anpassungen an eingebundender Google Maps Karte*/

.googlemap {
    width: 100%;
    height: 450px;
    border: 8px;
    border: 0.5rem;
    border-style: solid;
    border-color: #213B00;
    border-radius: 16px 16px 16px 16px;
    border-radius: 1rem 1rem 1rem 1rem;
}

/*Anpassungen am Formular*/

.formular {
    font-family: 'Marmelad', sans-serif;
    font-size: 13px;
    font-size: 0.8125rem;
    width: 100%;
    background-color: #213B00;
    border: 8px;
    border: 0.5rem;
    border-style: solid;
    border-color: #213B00;
    border-radius: 16px 16px 16px 16px;
    border-radius: 1rem 1rem 1rem 1rem;
    padding: 16px;
    padding: 1rem;
    color: #A9C5EA;
}

input,
textarea,
select {
    font-family: 'Marmelad', sans-serif;
    font-size: 13px;
    font-size: 0.8125rem;
    width: 100%;
    background-color: #E5F06E;
    border-color: #637404;
    padding: 4px;
    padding: 0.25rem;
    margin-bottom: 8px;
    margin-bottom: 0.5rem;
}

textarea {
    resize: vertical;
}

/*Anpassungen am Adressenbereich*/

address {
    color: #A9C5EA;
    width: 192px;
    width: 12rem;
}

.footer-screen {
    background: #213B00;
}

.footer-contentarea {
    max-width: 1200px;
    margin: auto;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*Spalten*/

.columns {
    float: left;
    padding: 16px;
    padding: 1rem;
    padding-top: 0;
}

/*Erzeugen einer Reihe durch Aufhebung der Floats nach dieser.*/

.row {
    width: auto;
}

.row:before,
.row:after {
    content: '';
    display: table;
}

.row:after {
    clear: both;
}

/*Navigation für kleinere Darstellungen*/

.site-nav-small {
    float: left;
    width: 25%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    list-style: none;
    background: #213B00;
}

.site-nav-small ul {
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    list-style: none;
    background: #213B00;
}

.site-nav-small ul li ul li {
    width: 100%;
}

.site-nav-small li {
    width: 200px;
    border: 4px;
    border-bottom: 0;
    border-style: solid;
    border-color: #637404;
    text-transform: uppercase;
}

.site-nav-small ul li:last-child {
    border-bottom: 4px;
    border-style: solid;
    border-color: #637404;
}

.site-nav-small a {
    display: block;
    padding: 16px;
    padding: 1rem;
    margin-left: 0;
    color: #A9C5EA;
    font-size: 16px;
    font-size: 1rem;
    text-decoration: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

.site-nav-small ul li:hover > a,
.site-nav-small ul li.active > a {
    background: #E5F06E;
    color: #031A00;
}

.site-nav-small ul li a:hover + .hidden,
.hidden:hover {
    display: block;
}

.site-wrap {
    min-height: 100%;
    min-width: 100%;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
}

.site-nav-small-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="site-nav-small-trigger"] {
    position: fixed;
    left: 5px;
    top: 43px;
    z-index: 2;
    height: 20px;
    width: 20px;
    cursor: pointer;
    background-image: url(images/hamburger.png);
    background-size: contain;
}

.site-nav-small-trigger + label,
.site-wrap {
    transition: left 0.2s;
}

.site-nav-small-trigger:checked + label {
    left: 205px;
}

.site-nav-small-trigger:checked ~ .site-wrap {
    left: 200px;
}

.site-nav-small ul {
    padding-left: 0;
    margin-top: 0;
}

/*Navigation für mittlere Darstellungen*/

.site-nav-medium {
    border: 4px;
    border: 0.25rem;
    border-style: solid;
    border-color: #213B00;
}

/*Menü*/

.site-nav {
    background: #213B00;
    color: #A9C5EA;
    padding: 0;
    margin: 0;
    border-bottom: 4px;
    border-bottom: 0.25rem;
    border-style: solid;
    border-color: #E5F06E;
}

.site-nav ul,
.site-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav ul {
    position: relative;
}

.site-nav a {
    font-size: 18px;
    font-size: 1.125rem;
    color: #A9C5EA;
    padding: 0px 23px;
    padding: 0rem 1.4375rem;
    display: block;
    line-height: 16px;
    line-height: 1rem;
    text-decoration: none;
}

.site-nav ul {
    text-transform: uppercase;
}

.site-nav ul li {
    float: left;
    min-height: 1px;
    min-height: 0.0625rem;
    vertical-align: middle;
}

.site-nav ul li.hover,
.site-nav ul li:hover {
    color: #A9C5EA;
    position: relative;
}

.site-nav ul li.hover,
.site-nav ul li:hover a {
    color: #A9C5EA;
    line-height: 48px;
    line-height: 3rem;
    display: block;
}

.site-nav ul li ul {
    display: none;
    width: 100%;
    position: absolute;
}

.site-nav ul li a:hover + .hidden,
.hidden:hover {
    display: block;
}

.site-nav ul ul li {
    float: none;
    font-weight: normal;
}

.site-nav ul li ul li {
    background: #213B00;
}

.site-nav ul li:hover > a,
.site-nav ul li.active > a {
    background: #E5F06E;
    color: #031A00;
}

.site-nav > ul > li > a {
    line-height: 48px;
    line-height: 3rem;
}

.site-nav-dropdown {
    border: 5px;
    border: 0.3125rem;
    border-style: solid;
    border-bottom: 0;
}

.site-nav-dropdown a {
    background: #031A00;
}

.site-nav ul li ul li:last-child {
    border-bottom: 5px;
    border-bottom: 0.3125rem;
    border-style: solid;
    border-color: #637404;
}

.pointer {
    cursor: default;
}

/*Navigation im Footer*/

.footer-contentarea h2,
.footer-contentarea h3,
.footer-contentarea h4,
.footer-contentarea h5 {
    color: #A9C5EA;
}

.navi-footer {
    float: left;
    font-size: 12px;
    font-size: 0.75rem;
    padding-left: 32px;
    padding-left: 2rem;
}

.navi-footer ul {
    padding-left: 0;
    list-style-type: none;
}

.navi-footer li {
    padding: 8px;
    padding: 0.5rem;
    display: block;
    text-align: center;
}

.navi-footer ul li ul {
    padding-left: 0;
}

.navi-footer a {
    color: #A9C5EA;
}

.footer-aside {
    padding: 32px;
    padding: 2rem;
}

/* Belegungsplan */

.month {
    font-size: 18px;
    font-size: 1.125rem;
    background: #A9C5EA;
    display: table;
    content: '';
    border: 8px;
    border: 0.5rem;
    border-style: solid;
    border-color: #213B00;
    border-radius: 16px 16px 16px 16px;
    border-radius: 1rem 1rem 1rem 1rem;
    text-align: center;
    width: 100%;
    box-shadow: 0px 0px 0px 1px #213B00 inset;
}

.top,
.day,
.empty,
.belegt,
.an,
.ab,
.anundab,
.frei {
    float: left;
    width: 14.28571428571429%;
}

.top {
    width: 100%;
}

.top,
.day {
    background: #213B00;
    color: #A9C5EA;
}

.empty {
    border-radius: 16px 16px 16px 16px;
    border-radius: 1rem 1rem 1rem 1rem;
}

.belegt {
    background: #d90b0b;
}

.an {
    background: -moz-linear-gradient(45deg, #AAB633 50%, #d90b0b 50%);
    background: -webkit-linear-gradient(45deg, #AAB633 50%, #d90b0b 50%);
    background: -o-linear-gradient(45deg, #AAB633 50%, #d90b0b 50%);
    background: -ms-linear-gradient(45deg, #AAB633 50%, #d90b0b 50%);
    background: linear-gradient(135deg, #AAB633 50%, #d90b0b 50%);
}

.ab {
    background: -moz-linear-gradient(135deg, #d90b0b 50%, #AAB633 50%);
    background: -webkit-linear-gradient(135deg, #d90b0b 50%, #AAB633 50%);
    background: -o-linear-gradient(135deg, #d90b0b 50%, #AAB633 50%);
    background: -ms-linear-gradient(135deg, #d90b0b 50%, #AAB633 50%);
    background: linear-gradient(45deg, #d90b0b 50%, #AAB633 50%);
}

.anundab,
.frei {
    background: #AAB633;
}

.site-plan {
    padding-top: 16px;
    padding-bottom: 16px;
}

/*first*/

.small-1 {
    width: 100%;
}

.small-2 {
    width: 50%;
}

.site-nav-large {
    display: none;
}

.site-nav-medium {
    display: none;
}

.navi-footer li {
    text-align: left;
}

.placeholder {
    display: none;
}

.hidden {
    display: none;
}

/*Mediaqueries für Zentrierung des Footerinhaltes*/

@media (min-device-width: 370px) and (min-width: 370px) and (max-width: 765px) {
    .center-footer {
        margin: 0 25%;
    }
}

@media (min-device-width: 370px) and (min-width: 370px) and (max-width: 461px) {
    .center-footer {
        margin: 0 15%;
    }

    .center-footer-mid {
        margin: 0 15%;
    }
}

/*Mediaquerie für laden des Hintergrundbildes*/

@media (min-device-width: 1215px),
(min-width: 1215px) {
    body {
        background-image: url(images/kuh_01.jpg);
        background-repeat: no-repeat;
        background-position: 30%;
        background-size: cover;
    }

    .site-header {
        background-image: url(images/header.jpg);
        background-repeat: no-repeat;
        background-position: 30% 60%;
        background-size: cover;
        height: 200px;
    }
}

/*Mediaquerie für ausblenden des Hintergrundbildes falls es vorher schon einmal geladen wurde*/

@media (max-device-width: 1214px),
(max-width: 1214px) {
    body {
        background-image: none;
    }

    .site-header {
        background-image: url(images/header_small.jpg);
        background-repeat: no-repeat;
        background-position: 30% 60%;
        background-size: cover;
        height: 200px;
    }
}

/*Mediaquerie für sehr kleine Auflösungen*/

@media (min-device-width: 461px) and (min-width: 461px) and (max-width: 600px) {
}

@media (min-device-width: 461px) and (min-width: 461px) and (max-width: 600px) {
    .mid-2 {
        width: 50%;
    }

    html {
        font-size: 17px;
    }

    .formular {
        width: 75vw;
    }
}

@media screen and (min-device-width: 601px) and (min-width: 601px) {
    label {
        display: none;
    }

    .site-nav-small-trigger:checked ~ .site-wrap {
        left: 0;
    }
}

@media (min-device-width: 765px) and (min-width: 765px) {
    .center {
        margin: 0 25%;
    }
}

@media (min-device-width: 601px) and (min-width: 601px) and (max-width: 765px) {
    .mid-2 {
        width: 50%;
    }

    .site-nav-small-container {
        float: left;
        width: 25%;
        position: absolute;
        top: 200px;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .site-nav-small {
        float: left;
        width: 100%;
        position: relative;
        list-style: none;
        background: #213B00;
    }

    .site-nav-small ul {
        float: left;
        width: 100%;
        position: relative;
        list-style: none;
        background: #213B00;
    }

    .site-nav-small ul li {
        float: left;
        width: 100%;
        position: relative;
        list-style: none;
        background: #213B00;
    }

    .site-nav-small a {
        width: 100%;
    }

    .site-wrap-mid {
        float: right;
        width: 75%;
        border-top: 4px solid;
        border-color: #637404;
    }

    .site-nav-large {
        display: none;
    }

    .formular {
        width: 60vw;
    }

    .hidden-small {
        display: block;
    }

    .footer-screen {
        float: left;
    }
}

@media (max-device-width: 765px) (max-width:

765px

) {
    body {
        overflow-x: hidden;
    }

    html {
        overflow-x: hidden;
    }
}

@media screen and (min-device-width: 766px) and (min-width: 766px) {
    .monat {
        font-size: 28px;
        font-size: 1.75rem;
    }

    .site-nav-small {
        display: none;
    }
}

/*Mediaquerie für kleinere Auflösungen*/

@media (min-device-width: 766px) and (min-width: 766px) and (max-width: 1215px) {
    .medium-1 {
        width: 50%;
    }

    .medium-2 {
        width: 100%;
    }

    .medium-3 {
        width: 33.333333%;
    }

    html {
        font-size: 18px;
    }

    article {
        font-size: 13px;
        font-size: 0.7222222222222222rem;
    }

    .site-nav-medium {
        display: block;
    }

    .site-nav {
        border: 0;
        border-left: 5px;
        border-left: 0.2777777777777778rem;
        border-style: solid;
        border-color: #AAB633;
        border-top: 5px #637404 solid;
        border-top: 0.2777777777777778rem #637404 solid;
    }

    .site-nav-last {
        border-right: 5px #AAB633 solid;
    }

    .site-nav ul li {
        width: 100%;
        text-align: center;
        border-bottom: solid;
        border-width: 5px;
        border-width: 0.2777777777777778rem;
        border-color: #637404;
    }

    .site-nav a {
        font-size: 14px;
        font-size: 0.7777777777777778rem;
    }

    .site-nav-dropdown {
        border: 0;
        border-left: solid;
        border-right: solid;
    }

    .site-nav ul li ul li:first-child {
        border-top: 5px;
        border-top: 0.3125rem;
        border-style: solid;
        border-color: #637404;
    }

    .site-nav ul li ul li:last-child {
        border-top: 0px;
        border-top: 0rem;
    }

    .columns-medium {
        float: left;
        padding-left: 0px;
        padding-left: 0rem;
        padding-right: 0px;
        padding-right: 0rem;
    }
}

@media screen and (max-device-width: 1216px) and (max-width: 1216px) {
    .site-nav-large {
        display: none;
    }
}

@media screen and (min-device-width: 1216px) and (min-width: 1216px) {
    .large-1 {
        width: 50%;
    }

    .large-2 {
        width: 100%;
    }

    .large-3 {
        width: 33.333333%;
    }

    html {
        font-size: 18px;
    }

    article {
        font-size: 17px;
        font-size: 0.9444444444444444rem;
    }

    .site-nav-large {
        display: block;
    }

    .site-nav {
        border: 0;
        border-bottom: 4px;
        border-bottom: 0.2222222222222222rem;
        border-style: solid;
        border-color: #E5F06E;
    }

    .site-nav ul li {
        width: auto;
        border-right: solid;
        border-width: 5px;
        border-width: 0.2777777777777778rem;
        border-color: #637404;
    }

    .site-nav a {
        font-size: 15px;
        font-size: 0.8333333333333333rem;
    }

    header h1 {
        padding-top: 0;
    }
}

/*Mediaquerie für das ausblenden von Menüpunkten*/

@media screen and (min-device-width: 1216px) and (min-width: 1216px) and (max-width: 1641px) {
    .hidden-medium {
        display: none;
    }

    .site-nav ul li ul {
        width: 280px;
    }
}

/*Mediaquerie für das ausblenden von Menüpunkten*/

@media screen and (min-device-width: 1642px) and (min-width: 1642px) {
    .hidden-large {
        display: none;
    }
}