/** Schriftarten **/

/* baloo-2-regular - latin */

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/baloo-2-v1-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Baloo 2 Regular'), local('Baloo2-Regular'), url('fonts/baloo-2-v1-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/baloo-2-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/baloo-2-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('fonts/baloo-2-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/baloo-2-v1-latin-regular.svg#Baloo2') format('svg');
    /* Legacy iOS */
}

html {
    height: 100%;
}

body {
    font-family: 'Baloo 2', cursive;
    margin: 0;
    padding: 0;
    height: 100%;
}

h1 {
    margin: 0px;
    padding: 0px;
    clear:both;
}

h2 {
    margin: 0px;
    padding: 0px;
    clear:both;
}


p {
    padding: 0px;
    margin: 0px;
}

/** Gedöns **/

header img {
    width: 100%;
    max-width: 500px;
}

.screen {
    clear: both;
    display: none;
}

#about .left {
    width: 100px;
    float: left;
    margin-right: 10px;
}

.startscreen {
    display: block;
}

#karte {
    height: 100%;
}
#streetmap {
    height: 100%;
}

p#error {
    display: none;
    color: #ff0000;
}

/*----- Menu -----*/

nav .logowrapper {
    position: absolute;
    top: 20px;
    left: 70px;
    z-index: 1000;
    width: 200px;
}
@media screen and (min-width: 380px) {
    nav .logowrapper {
        top: 17px;
        width: 230px;
    }
}

@media screen and (min-width: 450px) {
    nav .logowrapper {
        top: 9px;
        width: 300px;
    }
}

/*Hamburger-Icon*/
nav>.close, nav a#navigation {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

nav a#navigation img, nav a.close img {
    width: 40px;
    height: auto;
}
nav>.close, nav a#navigation:target {
    display: none;
}

nav ul {
    margin: 0;
    position: absolute;
    top: 36px;
    right: 20px;
    z-index: 1000;
    text-shadow: 1px 1px white;
    font-weight: 600;
}

nav ul li {
    list-style: none;
    margin: 0;
    display: inline;
}

nav ul li a {
    color: #000;
    position: relative;
    padding: 0 0 0.5em 0;
    display: inline-block;
    text-decoration: none;
    /*text-transform: uppercase;*/
}

nav ul.menu li a:hover {
    color: #000;
    border-bottom: 2px solid #000;
}

/*----------------*/

/*----- Media Queries -----*/

@media screen and (min-width: 961px) {
    nav ul.menu {
        max-height: 20px;
        text-align: right;
    }
    nav a#navigation, nav a.close {
        display: none;
    }
    nav ul li {
        margin: 0 30px 0 0;
    }
}

@media screen and (max-width: 960px) {
    /*Formatierung Mobiles Menue*/
    nav ul {
        text-align: center;
        position: absolute;
        top: -100%;
        z-index: 10000;
        background: #fff;
        width: 100%;
        right: 0;
        list-style-type: none;
        margin: 0;
        padding: 0;
        -webkit-transition: top 0.3s ease;
        -moz-transition: top 0.3s ease;
        -o-transition: top 0.3s ease;
        transition: top 0.3s ease;
    }
    nav ul li {
        display: block;
        /*text-align: left;*/
        padding: 0em 0.5em;
        border-bottom: 1px solid #fff;
    }
    nav ul li a {
        color: #555;
        padding: 1em 0;
    }
    nav ul.menu li a:hover {
        border-bottom: 0;
    }

    nav a:target~ul, nav a:target~.close {
        display: inline-block;
    }
    nav a:target~.close {
        position: absolute;
        margin-left: -40px;
    }
    nav a:target~ul {
        top: 100px;
    }
}

#faq, #about, #impressum, #datenschutz, #input {
    margin: 0 auto;
    padding: 100px 15px 50px 15px;
    max-width: 600px;
}

/*--------------------------------------*/