* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    /*background-image: url("../img/backgrounds/bg_kleckse_blau.webp");
    background-image: url("../img/backgrounds/bg_kleckse_beige.webp");
    background-image: url("../img/backgrounds/bg_baumwolle_blau.webp");*/
    background-image: url("../img/backgrounds/bg_spr%C3%BChnebel_beige.webp");
    background-repeat: repeat-y;
    background-size: cover;
}

#container{
    min-height:100%;
    position: relative;
}

/* FONTS */
h1, h2, h3, h4{
    font-family: 'MonteCarlo', sans-serif;
}

a, p, ul, li {
    font-family: "Quicksand", "sans-serif";
	text-decoration: none;
	color: black;
}
/* FONTS ENDE */

hr {
    margin: 10px;
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(101, 137, 144, 0.75), rgba(0, 0, 0, 0));
}

button {
    float: center;
    color: white;
    background-color: #658990;
    text-align: center;
    padding: 10px;
    margin: 4px 4px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 4px;
    border: none;
    letter-spacing: 1px;
}

button:hover {
    cursor: pointer;
    background-color: #2F5259;
}

a.active {
    background-color: #658990;
    color: white;
}

#logo img{
    overflow: hidden;
	padding-left: 3%;
	padding-top: 12px;
    position: fixed; /* Sticky/fixed navbar */
    top: 0; /* At the top */
    z-index: 100;
	width: 340px;
    transition: 0.4s;
}

/* Create a sticky/fixed navbar */
#navbar {
    overflow: hidden;
    padding: 30px 0px; /* Large padding which will shrink on scroll (using JS) */
    transition: 0.5s; /* Adds a transition effect when the padding is decreased */
    position: fixed; /* Sticky/fixed navbar */
    width: 100%;
    top: 0; /* At the top */
    z-index: 99;
}

/* Display some links to the right */
#navbar-right {
    float: right;
	margin-right: 50px;
}

/* Style the navbar links */
#navbar a {
    float: left;
    color: black;
    text-align: center;
    padding: 10px;
    margin: 0 2px;
    text-decoration: none;
    font-size: 18px;
    line-height: 20px;
    border-radius: 4px;
}

/* Style the logo */
#navbar #logo {
    font-size: 35px;
    font-weight: bold;
    transition: 0.4s;
}

/* Links on mouse-over */
#navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Style the active/current link */
#navbar a.active {
    background-color: #658990;
    color: white;
}


/* Hide the link that should open and close the topnav on small screens */
#navbar .icon {
    display: none;
}

.StartBild {
  /* The image used */
  background-image: url("../img/Startseite.webp");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

header .text h1{
    color: #658990;
    text-shadow: 0px 0px 15px white;
}

header .text h2{
    color: #658990;
    text-shadow: 0px 0px 15px white;
}

header .text{
    letter-spacing: 4px;
    font-size: 35px;
    margin-top: -450px;
    margin-left: 5%;
}

#HeaderTextSpan{
    padding-left: 400px;
}

.FooterKontakt p, .FooterKontakt label{
    margin: 0 auto;
    font-size: 12px;
    letter-spacing: 0px;
    color: grey;
}

.FooterKontakt h2{
    letter-spacing: 5px;
	font-size: 24px;
	color: #658990;
	margin: 5px 5px;
}

.FooterKontakt input {
    margin: 4px 4px;
    padding: 4px 10px;
    font-family: "Quicksand", "sans-serif";
}

.FooterKontakt input:focus{
    outline: none !important;
    border: 2px solid #2F5259 !important;
    box-shadow: 0 0 7px #2F5259;
}

.FooterKontakt input[type=text], select {
    width: 100%;
    max-width: 880px;
    height: 23px;
    display: inline-block;
    border: 2px solid #658990;
    border-radius: 4px;
    box-sizing: border-box;
}

.FooterKontakt input[type=submit] {
    width: 100%;
    max-width: 880px;
    background-color: #658990;
    color: white;
    margin: 4px 4px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size: 20px;
}

.FooterKontakt input[type=submit]:hover {
    background-color: #2F5259;
}

.FooterKontakt textarea {
    font-family: "Quicksand", "sans-serif";
    width: 100%;
    max-width: 880px;
    height: 90px;
    margin: 4px 4px;
    padding: 12px 10px;
    box-sizing: border-box;
    border: 2px solid #658990;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: vertical;
    cursor: auto;
    font-size: 16px;
}


.FooterKontakt textarea:focus {
    outline: none !important;
    border: 2px solid #2F5259 !important;
    box-shadow: 0 0 7px #2F5259;
}

/* Style the active/current link */
footer table a.active {
    background-color: #658990;
    color: white;
    border-radius: 4px;
    text-align: center;
    padding: 10px;
	margin: 0 2px;
    line-height: 40px;
}

footer {
    position:absolute;
    bottom:0;
    height: 418px;
    width: 100%;
	background-color: #faf4ee;
	box-shadow: 0 -10px 10px -8px rgba(0,0,0,.25);
}

footer table ,footer table a{
    color: #333232;
    font-weight: 800;
    border-collapse: collapse;
    width: 100%;
}

footer table td{
    align-content: center;
	text-align: center;
    line-height: 30px;
    font-family: "Quicksand", "sans-serif";
	text-decoration: none;
}

#FooterCopyright td{
    vertical-align: bottom;
    text-align: left;
    height: 10px;
    line-height: 20px;
    padding-left: 5px;
    padding-bottom: 5px;
}

#FooterLinks {
    width: 300px; 
    text-align: center;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1200px) {
    #navbar-right {
        float: none;
        margin: 0 10px;
        margin-top: 20px;
    }
    #navbar-right.responsive {
        float: none;
        margin: 0 10px;
        margin-top: 55px;
        transition: 0.2s;
    }
    #navbar a {
        display: none;
    }
    
    #logo img {
        overflow: hidden;
        padding-left: 1%;
        padding-top: 5px;
        position: fixed; /* Sticky/fixed navbar */
        top: 0; /* At the top */
        z-index: 100;
        width: 250px;
        transition: 0.4s;
    }
    
    #logo.responsive img {
        overflow: hidden;
        padding-left: 1%;
        padding-top: 5px;
        position: fixed; /* Sticky/fixed navbar */
        top: 0; /* At the top */
        z-index: 0;
        width: 220px;
        transition: 0.2s;
    }
    
    #navbar a.icon {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        font-size: 60px;
    }
    #navbar #logo {
        display: none;
    }
    
    .#navbar.responsive {
        background-color: #faf4ee;
        z-index: 1;
    }
    
    #navbar.responsive a.icon {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        text-align: center;
        color: #658990;
    }
    #navbar.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    
    header .text h1{
        color: #658990;
        text-shadow: 0px 0px 15px white;
    }

    header .text h2{
        color: #658990;
        text-shadow: 0px 0px 15px white;
    }
    
    header .text{
        letter-spacing: 4px;
        font-size: 100%;
        margin-top: -450px;
        margin-bottom: 180px;
        margin-left: 5%;
    }
    
    #HeaderTextSpan{
        padding-left: 100px;
    }
    
    .FooterKontakt{
        display: none;
    }
    
    #FooterLinks {
        width: 100%; 
        text-align: center;
    }
    
}