/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all
   ---------------------------------------------------------*/

/*
    Was noch zu tun ist:

    Die verschiedenen Sektionen in diesem Dokument ordnen, durch Gruppennamen
    kennzeichnen und vor allem kommentieren.

    Die veränderten styles auch in die print styles uebernehmen.

    Alles zusammen in verschiedenen Browsern (ggf. auch für die Faelle, in
    denen Javascript ausgeschaltet ist) testen.

    @Thomas, sorry, dass ich hier so wild rumgefuhrwerkt habe! - St.

    Bekannte Fehler:
    1 - Wird z.B. die Startseite refreshed, ist die linke Spalte nicht mehr
        korrekt gefaerbt, d.h. content_main nicht korrekt gefaerbt.
*/

body {
}
/* Default link styling */
a:link {
    color: #000;
    text-decoration: none;
}

a:visited {
    color: #000;
}

a:hover, a:focus {
    color: #a4a92f;
    text-decoration: underline;
}

a:active {
    color: #fb0e02;
}



/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    width: 77%;
    /*max-width: 750px;*/
    margin: 0 auto;
    padding: 2%;
    font-size: 1em;
    color: #444;
    background-image: url(../bilder/Kachel.png);
}


header {
    margin: 0 auto;
    padding: 0 0 0 0;
    /*padding-left: 4%;
    padding-right: 4%;*/
    /*background-color: #c3c3c3;*/
    background: #ebf5d7;
}

    header h1 {
        font-size: 2em;
        text-align: center;
        text-shadow: 2px 2px 2px rgba(149, 150, 150, 1);
        margin: 0 auto;
        padding-top: 1.0em;
    }

b {
    font-weight: 600;
    color: #666;
}

h2 {
    font-weight: 700;
    font-size: 1.3em;
    text-align: center;
    color: #666;
    margin: 0.9em 0.9em 0.9em 0.9em;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 2px rgba(149, 150, 150, 1);
}

h3 {
    font-weight: 700;
    font-size: 1.3em;
    color: #666;
    margin: 0;
    padding: 0;
}

#KopfLinks {
    width: 20%;
    float: left;
    padding-left: 1.1em;
    padding-top: 0.4em;
}

#KopfMitte {
    width: 60%;
    float: left;
    padding-top: 1.1em;
}

#KopfRechts {
    width: 20%;
    float: left;
    padding-right: 1.1em;
    padding-top: 0.4em;
}

.clearfix {
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

clearfix:after {
    clear: both;
    content: "*";
    display: block;
    height: 0;
    visibility: hidden;
}

img {
    max-width: 100%;
    height: auto;
    float: left;
}

nav {
    margin: 0 auto;
    padding: 0.3em 1em 1.1em 1em;
    /*background-color: #c3c3c3;*/
    background: #ebf5d7;
    font-size: 0.9em;
}


    nav ul {
        margin: 0 1em 0 1em;
        padding: 0;
        list-style-type: none;
        text-align: center;
    }

        nav ul li {
            position: relative;
            display: inline;
            margin: 0 0.3em 0 0.3em;
            line-height: 4em;
        }

            nav ul li:first-child {
                margin: 0 0.3em 0 0.3em;
                padding: 0;
            }

            nav ul li a {
                white-space: nowrap;
                background: rgba(164,169,47,0.9);
                padding: 1.5%;
                text-decoration: none;
                /*border:1px solid silver;*/
                border-radius: 0.5em;
                box-shadow: 1px 1px 4px 1px #c9ce54;
            }

                nav ul li a:hover {
                    background: rgba(242,119,0,0.9);
                }

            nav ul li span {
                /*background: rgba(136,136,136,0.9);*/
                background: rgba(242,119,0,0.9);
                padding: 1.6%;
                text-decoration: none;
                /*border:1px solid silver;*/
                border-radius: 0.5em;
                box-shadow: 1px 1px 2px 1px #444444;
                color: #555;
            }

            nav ul li a:link {
                color: #ffffff;
            }

            nav ul li a:visited {
                /*color: #555555;*/
                color: #ffffff;
            }

            nav ul li a:focus {
                color: #ffffff;
            }

            nav ul li a:hover {
                color: #ffffff;
                text-decoration: none;
            }

            nav ul li a:active {
                color: #ffffff;
            }

main {
    margin: 0 auto;
    padding: 0;
    /*padding: 2em 2em;*/
    /*background: #ebf5d7;*/
    background: #efebe0;
}

    main ul {
        margin: 0 auto;
        padding: 0 8%;
    }

        main ul li {
            margin: 2% 0 auto;
            line-height: 1.1;
        }

#links {
    width: 25%;
    float: left;
}

#rechts {
    width: 75%;
    float: left;
}

/*
    ================================================================================
    Container

    ================================================================================
*/

/*  
    Container Klasse Main 
*/
.content_main {
    margin: 0 auto;
    padding: 0;
    background: #efebe0;
}

/*
    Container Klasse Main Header 
    
    nimmt auf Main Header Header und Main Header Right
*/
.content_main_header {
    margin: 0 auto;
    padding: 0;
    background: #efebe0;
}

.content_main_header_header {
    margin: 0 auto;
    padding: 1.3em 1em 0.6em 1em;
    float: left;
    width: 70%;
    min-width: 21em;
    background: #fffbf0;
}

/*
    Container Klasse Main Col Right

    nimmt auf Content Img Box / Content Teaser Box / Content Link Box
*/
.content_main_header_right {
    margin-left: 70.1%;
    width: 29.9%;
    min-width: 9em;
    padding: 1.3em 1em 0.6em 1em;
}

/*
    Container Klasse Main Col Text 
*/
.content_main_col_text {
    margin: 0 auto;
    padding: 0.6em 1em 0 1em;
    width: 70%;
    min-width: 21em;
    float: left;
    background: #fffbf0;
}

    .content_main_col_text p {
        font-size: 1em;
        line-height: 1.3em;
        margin-bottom: 0.5em;
        margin-top: 0.1em;
    }

.content_main_col_right {
    margin-left: 70.1%;
    width: 29.9%;
    min-width: 9em;
    padding: 0.6em 1em 0 1em;
    background: #efebe0;
}

.content_img_box {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0.9em 0;
}

    .content_img_box p {
        font-size: 0.9em;
        line-height: 1.1em;
        margin-bottom: 0.4em;
        margin-top: 0.1em;
    }

    .content_img_box img {
        float: none;
        width: 100%;
        height: auto;
    }

.content_teaser_box {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0.9em 0;
}

    .content_teaser_box p {
        font-size: 0.9em;
        line-height: 1.1em;
        margin-bottom: 0.4em;
        margin-top: 0.1em;
    }

    .content_teaser_box img {
        float: none;
        max-width: 100%;
        height: auto;
    }

.content_link_box {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0.9 0;
}

    .content_link_box ul {
        margin: 0 auto;
        padding: 0 0 0 0;
        list-style-type: none;
    }

        .content_link_box ul li {
            margin: 0 auto;
            padding: 0;
            font-size: 0.9em;
            line-height: 1.3em;
            font-weight: 600;
            color: #999;
            text-align: left;
        }

    .content_link_box a {
        color: #f27700;
    }

.content_footer {
    margin: 0 auto;
    padding: 0;
    background: #a4a92f;
}

    .content_footer p {
        font-size: 1.0em;
        line-height: 1.1em;
    }

    .content_footer a:link {
        color: #000;
    }

    .content_footer a:visited {
        color: #000;
    }

    .content_footer a:hover, a:focus {
        color: #fffbf0;
    }

    .content_footer a:active {
        color: #fb0e02;
    }

.content_footer_col_text {
    width: 70%;
    min-width: 21em;
    margin: 0 auto;
    padding: 0.9em 1em 1.3em 1em;
    float: left;
    font-size: 1em;
    line-height: 1.1em;
}

.content_footer_col_right {
    margin-left: 70.1%;
    width: 29.9%;
    min-width: 9em;
    padding: 0.9em 1em 1.3em 1em;
    font-size: 0.9em;
    text-align: right;
    background: #94991f;
}

    .content_footer_col_right ul {
        margin: 0 auto;
        padding: 0 0 0 0;
        list-style-type: none;
        text-align: right;
    }

        .content_footer_col_right ul li {
            margin: 0 auto;
            padding: 0;
        }



@media screen and (max-width:750px) {
    body {
        margin: 0 auto;
        font-size: 1em;
    }

    header h1 {
        font-size: 1.9rem;
        padding-top: 2%;
    }
}

@media screen and (max-width:670px) {
    header h1 {
        font-size: 1.6rem;
        padding-top: 3%;
    }

    body {
        font-size: .95em;
    }
}

@media screen and (max-width:560px) {
    header h1 {
        font-size: 1.4rem;
        padding-top: 3%;
    }

    body {
        font-size: 0.9em;
    }
}

@media screen and (max-width:490px) {
    body {
        font-size: 0.8rem;
    }

    header h1 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.0rem;
    }
}

@media screen and (max-width:440px) {
    #KopfLinks {
        width: 15%;
        float: left;
        padding-left: 2%;
        padding-top: 3%;
    }

    #KopfMitte {
        width: 70%;
        float: left;
        padding-top: 2%;
    }

    #KopfRechts {
        width: 15%;
        float: left;
        padding-right: 2%;
        padding-top: 3%;
    }
}
/*
		main ul li{
		margin:2% 0;
		line-height:1.1rem;
		}
		nav ul li a{
		padding:1.9% 0;
		}
	}*/

/*
	@media screen and (min-width: 500px){
		body {
		margin:2%;
		font-size:1.1rem;
		}
		header h1{
		font-size: 1.7rem;
		}
		nav ul li a{
		padding:1.7% 0;
		}
	}
	@media screen and (min-width: 580px){
		body {
		margin:2%;
		font-size:1.1rem;
		}
		header h1{
		font-size: 1.9rem;
		}
		nav ul li a{
		padding:1.8% 0;
		}
	}*/
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        background: transparent !important;
    }

    html {
        background-color: #fff;
    }
    /* Hide navigation */
    nav {
        display: none;
    }

    /* Show link destinations in brackets after the link text */
    a[href]:after {
        content: " (" attr(href) ") ";
    }

    a[href] {
        font-weight: bold;
        text-decoration: underline;
        color: #06c;
        border: none;
    }
    /* Don't show link destinations for JavaScript or internal links */
    a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }

    /* Show abbr title value in brackets after the text */
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    figure {
        margin-bottom: 1em;
        overflow: hidden;
    }

        figure img {
            border: 1px solid #000;
        }
}