/* Start media query für mobile Navigation  */
@media only screen and (max-width: 767px) {

    #nav {
        transition: transform .3s ease-in-out;
        top: 0;
        bottom: 0;
        height: 100%;
        position: absolute; /* oder `fixed` wenn es nicht mitscollen soll*/
        width: 260px;
        left: -340px;
        background-color: #d1330e;
        opacity: .96;
        z-index: 1000;
    }

    #nav li {
        margin-left: 2em;
        border-bottom: 1px solid #F1F1F1;
        list-style: none;

    }

    #nav li a {
        color: #ffffff;
        line-height: 2em;
        font-size: 2rem;
        text-decoration: none;
    }
    #nav li a:hover {
        color: #878b8b;
        line-height: 2em;
        font-size: 2em;
    }
    .fon {
        top: 0;
        bottom: 0;
    }
    .inner-header-container{

    }

    #nav:target {
        transform: translateX(340px);
    }
    .inner-header-container .fon, .inner-header-container .kontakt {
        display:none;
        text-align: center;
    }
    .inner-header-container .logo{
        width:30%;
        margin: 0 auto;
    }
    .bilder img{
        width: 100%;
    }
    .open img{
        width:34px;
        height:34px;
    }
    .close {
        text-align: right;
        color: #ffffff;
        display: block;
        text-decoration: none;
        line-height: 1rem;
        font-size: 4rem;
        position: relative;
        top: 12px;
        margin-right: 12px;
    }
    .mobil-icon-container{
        display: grid;
        grid-template-columns: 1fr 12fr 1fr;
    }
    .fon, .kontakt, .mail, .instagram, .filialen, .facebook {
        width:40px;
        margin: 0 auto;
    }
    .mobil-pics img{
        margin-top: 20px;
    }
    .mobil-pics .fon-text{
        margin-top: 5px;
        font-size: 1.6rem;
        text-align: center;
    }
    .mobil-img{
        text-align: center;
    }
    .mobil-img img{
        width: 80%;
    }
    .image-slider {
        display: none;
    }

}
/* Ende media query für mobile Navigation */
@media only screen and (min-width: 48em) {

    /* grid */
    .mobil-pics {
        display: none;
    }

    #nav li a {
        color: rgba(0, 0, 0, .5);
        line-height: 2em;
        font-size: 2rem;
        text-decoration: none;
    }
    .inner-header-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
    }
    /* specific item styles */
    .container .image-slider {
        grid-column: span 3;
    }
    .image-slider {
        display: block;
    }

    .inner-main-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
    }

    .inner-main-container p{
        font-size: 1.6rem;
        padding: 0 6px

    }

    #nav .fon, #nav .kontakt{
        display: none;

    }

    .logo {
        margin: 0px auto;
    }
    .logo img {
        width: 100%;
        height: auto;
    }

    .fon img {
        width: 25px;
        height: 25px;
    }
    .fon-text{
        margin-right: 10px;
    }

    .kontakt {
        text-align: end;
    }

    .kontakt img {
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }

    .fon span, .kontakt span {
        font-size: .7em;
        color: #5c5c5c;
        vertical-align: top;
        line-height: 24px;
    }

    .container section, .container nav, .container footer {
    }

    /* nav styles */
    .container nav {
        text-align: center;
    }

    nav ul li {
        display: inline-block;
        padding: 0 10px 0 10px;
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav li.active, nav li:hover {
        border-bottom: 3px solid #6ead03;

    }

    nav a {
        font-size: 1.8rem;
        color: #878b8b;
        text-decoration: none;
    }

    nav a:hover {
        color: #5c5c5c;
        text-decoration: none;
    }

    /* hide toggle */
    .toggle {
        display: none;
    }
    .bilder{
        text-align: right;
    }
}




footer {
    border-top: 5px solid #f47005;
    background-color: #cccccc;
    padding-top: 2em;
    margin: 1em 0;
}
footer .logo{
}

footer .kontakt{
    text-align: center;
}
footer .kontakt img{
    margin:10px;
}
.footer-nav{
     padding:10px;
     color:#ffffff;
 }
.footer-nav a{
    padding:10px;
    font-size: 2em;
    color:#ffffff;
    font-weight: 600;
}
.footer-nav a:hover{

    color:#f47005;
}
.footer-nav.active{
    border-bottom: 3px solid #6ead03;
}


.footer-menu{
    text-align: center;
    color:#ffffff;
}
.spenden-frosch img{
    width:181px;
    height:auto;

}

.button.primary {
    color: #ffffff;
    background-color: #6ead03;
    font-size: 2em;
}
.button {
    display: inline-block;
    padding: 20px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s ease;
    font-style: normal;
}
.besucherzaehler{
    width:120px;
}
.copyright{
    font-size: 1.4em;

}

@media only screen and (max-width: 767px) {
    .spenden-frosch{
        width:181px;
        margin:auto;

    }
    .besucherzaehler{
        margin: 10px auto;
        width:120px;
    }
}