/*Fonts*/
@font-face { 
    font-family: 'Rosarivo';
    src:    url('../fonts/Rosarivo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
@font-face { 
    font-family: 'Almendra';
    src:    url('../fonts/Almendra-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

/* reset */
* {
    margin: 0;
    padding: 0;
    }

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

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    }

body {
    font-size: 18px;
    font-family: 'Rosarivo', serif;
    background-color: #99978E;
    color: #000;
    margin 0;
    padding: 0;
    }

/* seite */
#wrap {
    width:100%; /* seitenbreite */
    margin: 0 auto;
    padding: 0;
    }

#header {
    max-width:100%;
    min-height: 19.444em;
    padding: 1.111em;
    background-image: url("../grafiken/header.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-bottom: 0.056em solid #000;
    }

#main {
    max-width: 80%;
    overflow: hidden;
    margin: auto;
    }

#content {
    min-height: 20em;
    max-width:100%;
    margin: auto;
    padding: 20px;
    }

#footer {
    background-color: #6C6956;
    min-height: 3.333em;
    max-width:100%;
    padding: 0.556em;
    box-shadow: 0px -5px 4px 0px rgba(0,0,0,0.7);
    -webkit-box-shadow: 0px -5px 4px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px -5px 4px 0px rgba(0,0,0,0.7);
    }
 #bild100 {
    max-width:100%;
    float:left;
    border:0px solid;
    color:#000000;
    margin-top:5px;
    margin-right:10px;
    }
 #bild70li {
    max-width:70%;
	float:left;
	border:0px solid;
	color:#000000;
	margin-top:5px;
	margin-right:10px;
	}
 #bild70re {
    max-width:70%;
	float:right;
	border:0px solid;
	color:#000000;
	margin-top:5px;
	margin-left:10px;
	}
 #bild50li {
    max-width:45%;
	float:left;
	border:0px solid;
	color:#000000;
	margin-top:5px;
	margin-right:10px;
	}
 #bild50re {
    max-width:45%;
	float:right;
	border:0px solid;
	color:#000000;
	margin-top:5px;
	margin-left:10px;
	}
 #bild30li {
    max-width:30%;
	float:left;
	border:0px solid;
	color:#000000;
	margin-top:5px;
	margin-right:10px;
	}	

 #bild30re {
    max-width:30%;
	float:right;
	border:0px solid;
	color:#000000;
	margin-top:5px;
	margin-left:10px;
	}


/* schriften */
#header h1 {
    font-size: 4.5em;
    text-align: center;
    color: rgba(0,0,0,.6);
    text-shadow: 3px 3px 4px rgba(255,255,255,.5),
               3px -3px 4px rgba(255,255,255,.5),
               -3px 3px 4px rgba(255,255,255,.5),
               -3px -3px 4px rgba(255,255,255,.5);
    }

#header h2 {
    font-size: 3em;
    text-align: center;
    color: rgba(0,0,0,.6);
    text-shadow: 3px 3px 4px rgba(255,255,255,.5),
               3px -3px 4px rgba(255,255,255,.5),
               -3px 3px 4px rgba(255,255,255,.5),
               -3px -3px 4px rgba(255,255,255,.5);
    }

h1, h2, h3 {
    font-family: 'Almendra', serif;
    text-align: left;
    }

h1 {
    font-size: 2.5em;
    }
h2 {
    font-size: 1.9em;
    }

h3 {
    font-size: 1.5em;
    }

#footer p {
    text-align: center;
    padding:1.111em;
    }

a {
    text-decoration:none;
    color: #333;
    }

a:visited {
    text-decoration:none;
    }

a:hover {
    color: #fff;
    text-decoration: underline;
    }

/* ----------- mozilo syntax ------------- */
hr {
    border:none;
    border-top: .063em #000 dotted;
    max-width: 100%;
	margin: .625em 0;
    }	

.leftcontentimage {
    float:left;
    }

.rightcontentimage {
    float: right;
    }

.alignleft {
    text-align: left;
    }

.aligncenter {
    text-align: center;
    }

.alignright {
    text-align: right;
    }

.highlight {
    padding: .059em;
    background: #dd0000;
    color: #fff;
    }

.unorderedlist, .orderedlist {
    padding-left: 1.471em;
    }

/* ----------- tabelle ------------- */
table.contenttable {
    width: 100%;
    height: 100%;
    border: .059em solid #000;
    border-collapse: collapse;
    padding: .294em;
    }

th.contenttable {
    border: .059em solid #000;
    text-align: center;
    padding: .294em;
    background: #6C6956;
    }

td.contenttable1, td.contenttable2{
    border: .059em solid #000;
    text-align: center;
    padding: .294em;
    }

/* ----------- sitemap ------------- */
.sitemap {
    padding: 0 0 .588em 1.176em;
    }

.sitemap h2 {
    margin: 1.176em .882em .588em 0;
    padding-bottom: .118em;
    border-bottom: .059em #000 dotted;
    }

.sitemap li {
    padding-bottom: .294em;
    }

.sitemap a {
    text-decoration: none;
    }

/* ----------- bilder ------------- */
img {
    border:none;
    max-width:100%;
	vertical-align:top;
    }

.contentimage {
    display:inline-block;
	max-width:100%;
    -webkit-box-shadow: 0.412em 0.412em 0.294em 0em rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0.412em 0.412em 0.294em 0em rgba(50, 50, 50, 0.75);
    box-shadow:         0.412em 0.412em 0.294em 0em rgba(50, 50, 50, 0.75);
    }

span.imagesubtitle {
    display: block;
	font-size: .706em;
	color: #000;
	line-height: .824em;
	text-align: center;
    }

img.leftcontentimage {
    max-width: 14.706em;
    }

span.leftcontentimage {
    float:left;
	max-width: 14.706em;
	margin: .235em .588em .588em 0;
    }

img.rightcontentimage {
    max-width: 14.706em;
    }

span.rightcontentimage {
    float:right;
	max-width: 14.706em;
	margin: .235em 0 .588em .588em;
    }

/* ----------- navigation ------------- */
input#responsive-nav,
label.responsive-nav-label {
    display: none;
    text-align: right;
    font-weight: bold;
}

nav {
    width: 100%;
    text-align: center;
    font-family: 'Almendra', serif;
    font-size: 1.222em;
    background-color: #6C6956;
    padding: 0.556em;
    box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
    -webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
}

nav ul.mainmenu {
    list-style: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    display: inline-block;
}

nav ul.mainmenu > li.mainmenu-item {
    float: left;
    position: relative;
}

nav ul.mainmenu a {
    display: inline-block;
    text-decoration: none;
    padding: 0.833em 0.556em 0.556em 0.556em;
    color: #000;
}

nav a.menuactive,
nav .active {
    background-color: #6C6956;
    color: #fff;
}

nav ul.mainmenu a:hover {
    color: #fff;
    background: #6C6956;
    text-decoration: none !important;
}

nav ul.detailmenu {
    display: none;
    text-decoration: none;
    position: absolute;
    text-align: left;
    min-width: 160px;
    z-index: 999;
    background: #6C6956;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li.mainmenu-item:hover > ul.detailmenu {
    display: block;
}

nav ul.detailmenu li.detailmenu-item a {
    display: block;
    background: #6C6956;
    color: #000;
    height: auto;
    padding: 0.6em 1em;
}

nav ul.detailmenu li.detailmenu-item a:hover {
    background: #6C6956;
    color: #fff;
    text-decoration: none;
}

nav ul.detailmenu li.detailmenu-item a:before {
    font-family: 'FontAwesome';
    content: "\f0da";
    padding-right: 10px;
}

nav li.mainmenu-item > a[aria-haspopup="menu"]:after {
    font-family: 'FontAwesome';
    content: " \f0d7";
}

nav li.mainmenu-item > a:only-child:after {
    content: "";
}

@media only screen and (max-width: 1024px) {
    label.responsive-nav-label {
        position: relative;
        display: block;
        padding: 1.176em;
        background: #6C6956;
        cursor: pointer;
        color: #000;
        box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
        -webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
        -moz-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
    }
   
    label.responsive-nav-label span {
        margin-right: .588em; 
    }
   
    nav {
        position: absolute;
        top: -9999px;
        padding: 0;
    }
   
    input#responsive-nav[type=checkbox]:checked ~ nav {
        position: relative;
        top: 0;
    }
   
    nav ul.mainmenu {
        background: #6C6956;
        text-align: left;
        display: block;
        width: 100%;
    }
   
    nav ul.mainmenu a {
        height: auto;
        width: 100%;
        display: block;
    }
   
    nav ul.mainmenu > li.mainmenu-item {
        float: none;
        display: block;
    }
   
    nav ul.detailmenu,
    nav li.mainmenu-item:hover > ul.detailmenu {
        position: relative;
        display: block;
        border-bottom: 0.056em dotted #000;
        width: 100%;
    }
   
    nav ul.detailmenu li.detailmenu-item a {
        width: auto;
        padding-left: 1.471em;
    }
}

/* ----------- Media Querry ------------- */
/* ----------- max-width 1024px ------------- */
@media only screen and (max-width: 1024px) {
label.responsive-nav-label {
    position: relative;
    display: block;
    padding: 1.176em;
    background: #6C6956;
    cursor: pointer;
    color: #000;
    box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
    -webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.7);
    }
    
label.responsive-nav-label span {
    margin-right: .588em;  
    }
    
nav {
    position: absolute;
    top: -9999px;
    padding: .588em;
    }
    
input#responsive-nav[type=checkbox]:checked ~ nav {
    position: relative;
    top: 0;
    }
    
nav > ul {
        background: #6C6956;
        text-align: left;
    }
    
    nav ul a {
        height: auto;
    }
    
    nav > ul,
    nav > ul > li {
        float: none;
    }
    
    nav > ul > li > ul,
    nav > ul > li:hover > ul {
        position: relative;
        border-bottom: 0.056em dotted #000;
    }
    
    nav > ul > li > ul > li:hover > ul {
        position: relative;
        left: 0;
    }
    
    nav ul > li > ul > li a {
        width: auto;
        padding-left: 1.471em;
    }
    
    nav > ul > li > ul > li > ul > li > a {
        font-style: italic;
        padding-left: 2.941em;
    }
    
    nav > ul > li {
        display: block;
    }
    
    nav > ul {
        display: block;
    }
    
    nav ul li ul {
        display:block;
    }
}

/* ----------- max-width 680px ------------- */
@media only screen and (max-width: 680px) {
#main {
    max-width: 90%;
    }
    
#header {
    min-height:17.444em;
    }
    
#header h1, #header h2 {
    text-align: center;
    text-shadow: 3px 3px 4px rgba(255,255,255,.5),
               3px -3px 4px rgba(255,255,255,.5),
               -3px 3px 4px rgba(255,255,255,.5),
               -3px -3px 4px rgba(255,255,255,.5);
    }
    
#header h1 {
    font-size:2.0em;
    text-shadow: 3px 3px 4px rgba(255,255,255,.5),
               3px -3px 4px rgba(255,255,255,.5),
               -3px 3px 4px rgba(255,255,255,.5),
               -3px -3px 4px rgba(255,255,255,.5);
    }
    
#header h2 {
    font-size: 1.5em;
    text-shadow: 3px 3px 4px rgba(255,255,255,.5),
               3px -3px 4px rgba(255,255,255,.5),
               -3px 3px 4px rgba(255,255,255,.5),
               -3px -3px 4px rgba(255,255,255,.5);
    }
}

/* ----------- max-width 420px ------------- */
@media only screen and (max-width: 420px) {
body {
    font-size: 90%; 
    }
    
#main, #content {
    max-width: 100%;
    }
    
#header {
    min-height:15.444em;
    }
    
#header h1 {
    font-size:2.0em;
     text-shadow: 3px 3px 4px rgba(255,255,255,.5),
               3px -3px 4px rgba(255,255,255,.5),
               -3px 3px 4px rgba(255,255,255,.5),
               -3px -3px 4px rgba(255,255,255,.5);
    }
    
#header h2 {
    font-size: 1.3em;
    text-shadow: 3px 3px 4px rgba(255,255,255,.5),
               3px -3px 4px rgba(255,255,255,.5),
               -3px 3px 4px rgba(255,255,255,.5),
               -3px -3px 4px rgba(255,255,255,.5);
    }
}