body {
   text-align: center;
   color: black;
   /*background-size: 100%;*/
   background-color: #FFFFFF;
margin: 0 auto;
font-family: 'Nanum Gothic';
}


/* nanum-gothic-regular - latin */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/nanum-gothic-v14-latin-regular.eot'); /* IE9 Compat
Modes */
  src: local('NanumGothic'),
       url('fonts/nanum-gothic-v14-latin-regular.eot?#iefix')
format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/nanum-gothic-v14-latin-regular.woff2')
format('woff2'), /* Super Modern Browsers */
       url('fonts/nanum-gothic-v14-latin-regular.woff')
format('woff'), /* Modern Browsers */
       url('fonts/nanum-gothic-v14-latin-regular.ttf')
format('truetype'), /* Safari, Android, iOS */
       url('fonts/nanum-gothic-v14-latin-regular.svg#NanumGothic')
format('svg'); /* Legacy iOS */
}
/* nanum-gothic-800 - latin */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/nanum-gothic-v14-latin-800.eot'); /* IE9 Compat
Modes */
  src: local('NanumGothic ExtraBold'), local('NanumGothic-ExtraBold'),
       url('fonts/nanum-gothic-v14-latin-800.eot?#iefix')
format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/nanum-gothic-v14-latin-800.woff2') format('woff2'),
/* Super Modern Browsers */
       url('fonts/nanum-gothic-v14-latin-800.woff') format('woff'),
/* Modern Browsers */
       url('fonts/nanum-gothic-v14-latin-800.ttf')
format('truetype'), /* Safari, Android, iOS */
       url('fonts/nanum-gothic-v14-latin-800.svg#NanumGothic')
format('svg'); /* Legacy iOS */
}
 


 
nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;        
} 

nav li {
  list-style: none;
  display: inline;
  margin: 0.5em;
  padding: 0;
  font-size: 1.5em;
  color: black;
  background-color: #FFFFFF;
  border-radius: 20px;
  text-decoration: none;  
}

@media (min-width: 45em) {
  nav ul {	
    flex-direction: row;  
  }
  nav li {
    font-size: 1.5em;
  }  
}

nav a {
padding: 0.1em;
display: inline;
text-align: center;
color: black;
background-color: #FFFFFF;
text-decoration: none;
border-radius: 21px;
transition: all 0.25s ease-in;	
}

nav a:hover,
nav a:focus {
color: black;
background-color: #87CEFA;
}

nav a:active {
  color: #a9a9a9;
  background-color: #fefdfc;
}


/* @media screen and (min-width: 600px) {

nav li {
      width: 120px;
      border-bottom: none;
      height: 50px;
font-size: 1.4em;
margin-right: -4px;
display: inline-block;
text-decoration: none;
    }
 
}

*/

.main {
/*padding: 0.4116064257028112% 3.4136546184738956%; 0.4116064257028112% 3.4136546184738956%;*/
border-top: 1.5px dashed #9f9f9f;
border-bottom: 1.5px dashed #9f9f9f;
margin: 0 auto;
width: 90%;
position: relative;
background-color: #ffffff;

}

h1 {
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-bottom: 1em;
text-align: center;
}

h2 {
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-bottom: 1em;
text-align: center;
}

.grau {
color: #9f9f9f;
text-align: center;
}

.port {
padding: 0;
margin: auto;
display: inline-block;
}

/*.bilder {
padding: 0 0 0.4016064257028112% 0.4016064257028112% 
}
*/

.ganzertextlinks {
text-align: left;
padding-left: 1.606425702811245%;
padding-right: 4.8192771084337349%;
margin-right: 4.8192771084337349%;
}

#itextlinks {
text-align: left;
padding-left: 1.606425702811245%;
padding-right: 4.8192771084337349%;
margin-right: 4.8192771084337349%;
}

li {
	font-size: 1.5em;
	margin-bottom: 1em;
list-style-type: none;
}

a {
	transition: all 0.3s ease-in;
}

a.fuss {
	text-decoration: none;
    list-style-type: none;
	border-bottom: 0.1em dashed #9f9f9f;
    margin-bottom: 6.4257028112449799%;
}

a:active,
a:hover,
a:focus {
	border-bottom-width: 0.3em;

}


/* -----------------------------------------------------------------------------  
                              Bildauszeichnungen für Portfolioseite              
  ----------------------------------------------------------------------------- */
 
img {
	/* width: 670px; */
    max-width: 100%;
	height: auto;
/*padding: 0;*/
    padding: 0.5em;
}


button {
    padding: 0.2em;
  /*padding: 0.5em;*/

}

button img {
		border: 0;
		position: absolute;
		left: 0%;
		top: 0%;
		z-index: 1;
		/*box-shadow: 0;*/
		width: 10em;		
		/*transition: all 1s;*/			
	}

/*button:focus,
button:hover{
	button:focus img, 
	button:hover img {
		border: 2em solid #eee;
		border-radius: 1em;
		box-shadow: 1px 1px 5px #333;
		width: 300%;
		position: absolute;
		left: -4%;
		top: -4%;
		z-index: 5;

		transition: all 1s;		
	}
}


}
*/
figure, figcaption {
				/*margin: 0;
				padding: 0;*/
				margin: 0.5em;
				padding: 0.5em;
			
			}

			figure.einzel {
				position: relative;
				display: inline-block;
				width: 23.8%;
			}
			
			figure.einzel {
				position: relative;
				display: inline-block;
				width: 23.8%;
			}

			figure {
				text-align: center;
			}

			figcaption {
				position: absolute;
				bottom: -16.0642570281124498%;
				width: 100%;
				text-align: center;
				line-height: 4em;
				color: black;
				/*background: rgba(0,0,0,0.5);*/
                background: rgb(0 0 0 / 0);
			}
.gesamt {
	position: relative;
	color: black;
	background: white;
}


article img {
  width: 100%;
}	
			
			
			@media only screen and (max-width:800px) {
				body {
					width: 100%;
					margin: 2% 0;
					padding: 1%;
				}

				figure.einzel {
					width: 48%;
				}
			}  

			@media only screen and (max-width:600px) {
				figure.einzel {
					width: 100%;
				}
			}


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

                              dingsbums

-----------------------------------------------------------------------------*/
.imp {
   color: #000; 
   text-decoration: none; 
   text-align: left;
}

#dingsbums a {
    color: #000; 
    text-decoration:none;
}

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

#dingsbums div {
    padding-top: 10px; 
    padding-left: 50px;
    padding-right: 50px;
}

#dingsbums {
   outline: #7b92a9 1px solid;
   text-align: right;
   font-size: 1.6em;
   border-top: 1px solid #fff;
   background: #d6e0eb;
   /*background: linear-gradient(to bottom, #d6e0eb 0%, #f2f6f9 100%);*/
   position:fixed;
   bottom: 0;
   z-index: 10000;
   width: 100%;
   height: auto;
   font-size: 14px;
   line-height: 20px;}

#dingsbumsCloser {
   color: #777;
   font: 16px/100% arial, sans-serif;
   position: absolute;
   right: 5px;
   text-decoration: none;
   /*text-shadow: 0 1px 0 #fff;*/
   top: 5px;
   cursor: pointer;
   border-top: 1px solid white;
   border-left: 1px solid white;
   border-bottom: 1px solid #7b92a9;
   border-right: 1px solid #7b92a9;
   padding: 4px;
   background: #ced6df; /* Old browsers */

 }

#dingsbumsCloser:hover {
border-bottom: 1px solid white;
border-right: 1px solid white; 
border-top: 1px solid #7b92a9;
border-left: 1px solid #7b92a9;
}