/* Kompaktes Layout für mobile Geräte */
@media all and (max-width: 30em) {
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
body {
  /*flex: 1 100%;*/
}
/*header, nav, nav a, article, aside, footer {
  flex: 1 100%; 
  }*/
picture {
	padding: 0em 3em 0em 3em;
	/*background: blue;*/
}
picture img {
}
img {
		width: 100%;
	}
nav {
		width: 100%;
		background-color: #b67521;
		position: fixed;
	}
ul  {
	list-style: none;
	/*padding: 0em 0.5em 0em 0.5em;*/
	}
	
	nav ul li:hover ul {
                display: block;
				list-style: none;
        }

	nav ul li {
                padding: 0.15em 0em 0em 0.5em;
				/*border: 0.1em solid #000;*/
                /*font-weight: bold;*/
                /*width: 8.5em;*/
                /*float: left;*/
                position: relative;
                height: 1em;
                /*text-align: center;*/
                background-color: #b67521; 
                /*border: 0.1em solid #000;*/
				/*text-decoration: none;*/
        }
	nav	ul #contact {
                width: 13.5em;
				text-align: left;
				/*background-color: green;*/
                padding: 0.5em 0em 0.5em 0.5em;
				/*float: right;*/
        }
		nav ul li ul {
				/*visibilty: hidden;*/
				display: none;
				position: absolute;
                /*width: 11.5em;*/
                padding: 0.5em 0em 0.5em 0.5em;
				/*height: 0;*/
				z-index: 10;
				/*text-decoration: none;*/

        	}
				nav ul li ul li {
				/*display: block;*/
				width: 8.5em;
				/*position: absolute;
				z-index: 10;*/
			}
		/* Unternavigation ausblenden */
		/*nav ul ul {
   				font: 0/0 serif;   
   				z-index: -1;
				dsiplay: none;
			}*/
		/*  Unternavigation einblenden */
		nav ul li:hover ul {
				display: block;   
  			}

			
	a:link {
                text-decoration: none; 
                color: white;
        }
	a:visited { 
                text-decoration: none; 
                color: white; 
        }
	a:hover {
                text-decoration: none; 
                color: black;
                /*background-color: lightblue;*/
        }
	a.textlink:link {
				text-decoration: none; 
                color: #b67521;
	}
	a.textlink:visited {
				text-decoration: none; 
                color: #b67521;
	}
	a.textlink:hover {
				text-decoration: none; 
                color: black;
	}
.letterbox{
		padding: 0.5em 0.25em 1em 0.25em;
		width:1em;
		height:2em;
		position:fixed;
		bottom:23.5em;
		left:90%;
		margin-left:0em;
		background:#b67521;
	}		  
}
  /* Verhalten für richtige Monitore */
@media (min-width: 30em) {
picture {
	padding: 0em 0em 0em 3em;
} 
img {
		/*width: 100%;*/
	}  
nav {	
		width: 100%;
		/*padding: 1em 2em;*/
		float: left;
		/*overflow: auto;*/
		z-index: 1;
		/*border: 0.1em solid #000;*/
		background-color: #b67521;
		position: fixed;
	}  
ul  {
	list-style: none;
	}
	
	nav ul li:hover ul {
                display: block;
				list-style: none;
        }

	nav ul li {
                padding: 0em 1em 0em 0.5em;
				/*border: 0.1em solid #000;*/
                /*font-weight: bold;*/
                /*width: 8.5em;*/
                float: left;
                position: relative;
                height: 1.6em;
                /*text-align: center;*/
                background-color: #b67521; 
                /*border: 0.1em solid #000;*/
				/*text-decoration: none;*/
        }
	nav	ul #contact {
                width: 12.5em;
				text-align: right;
				/*background-color: green;*/
                padding: 0.5em 3em 0.5em 0em;
				float: right;
        }
		
		
		nav ul li ul {
				/*visibilty: hidden;*/
				display: none;
				position: absolute;
                /*width: 11.5em;*/
                padding: 0.5em 0em 0.5em 0.5em;
				/*height: 0;*/
				z-index: 10;
				/*text-decoration: none;*/
        	}
		nav ul li ul li {
				/*display: block;*/
				padding: 0.5em 0em 0.5em 0.5em;
				width: 8.5em;
				/*position: absolute;
				z-index: 10;*/
			}
		/* Unternavigation ausblenden */
		/*nav ul ul {
   				font: 0/0 serif;   
   				z-index: -1;
				dsiplay: none;
			}*/
		/*  Unternavigation einblenden */
		nav ul li:hover ul {
				display: block;   
  			}

			
	a:link {
                text-decoration: none; 
                color: white;
        }
	a:visited { 
                text-decoration: none; 
                color: white; 
        }
	a:hover {
                text-decoration: none; 
                color: black;
                /*background-color: lightblue;*/
        }
	a:link {
                text-decoration: none; 
                color: white;
        }
	a:visited { 
                text-decoration: none; 
                color: white; 
        }
	a:active {
                text-decoration: none; 
                color: black;
                /*background-color: lightblue;*/
        }
	a.textlink:link {
				text-decoration: none; 
                color: #b67521;
	}
	a.textlink:visited {
				text-decoration: none; 
                color: #b67521;
	}
	a.textlink:hover {
				text-decoration: none; 
                color: black;
	}
.letterbox{
		padding: 0.5em 1em 1em 0.25em;
		width:1em;
		height:3em;
		position:fixed;
		bottom:23.5em;
		left:96%;
		margin-left:0em;
		background:#b67521;
	}		
}