*, *:before, *:after {-webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */-moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */box-sizing: border-box; /* Opera/IE 8+ */}
html    { font-size: 100%;}
body { color: #282828; font-size: 0.9em; /* 16px */ font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.5em; background-color: #fff; /* 24px */}
#page-wrapper { margin: 0 auto; }
#content { width: 100%; padding: 0.8em 10px; }
a:link { color: #6e6e6e; text-decoration: none; outline-style: none }
a:visited { color: #6e6e6e; text-decoration: none; outline-style: none  }
a:hover, a:focus, a:active { color: #0079ab;}
p { color: #505050; font-size: 1em; line-height: 1.65em; margin-top: 4px; }
ul { margin: 0; padding: 0; }

h2,h3,h4,h5,h6  {font-weight: normal; }
h1 { color: #505050; font-size: 1.1em; line-height: 1em; letter-spacing: 0.02em; }
h1 a { color: #505050 }
h1 a:hover { color: #f628f0}
h2  { color: #505050; font-size: 1em; line-height: 1.3em; font-weight: bold; margin: 0 0 10px; padding-top: 5px; }
h2.dhl  { font-size: 1.5em; line-height: 1.4em  ; margin-bottom: 2px; }
h2.hlp  { padding-top: 30px  }
.eh { color:  #a1a1a1; display: inline     }
.hlb { color:  #a1a1a1; }

#about h2  { font-size: 2em; line-height: 1.3em; font-weight: bold }

h3  { color: #282828; font-size: 0.95em; font-weight: normal; line-height: 1.2em; margin-top: 1px; margin-bottom: 15px; }
h4  { color: #505050; font-weight: bold; font-size: 1.3em; line-height: 1.4em; margin-bottom: 8px; }

h6  { color: #282828; font-size: 4.2em; font-weight: bold; line-height: 1.2em; margin-top: 30px; margin-bottom: 10px; }
.ab { color: #a1a1a1; display: none }
.abb { color: #a1a1a1; display: block  }
h5  { color: #6e6e6e; font-size: 0.9em; line-height: 1.5em; margin: 0; }
h6 { color: #6e6e6e; font-size: 0.9em; font-style: ; line-height: 1.5em; margin: 0; }

#head  { margin-top: 20px; margin-left: 10px; }

#nav { display: none  }
#nav  { margin-top: px; margin-left: px; }
#nav ul > li { color: #828282; font-size: 1em; line-height: 1.3em; letter-spacing: 0.05em; list-style: none; display: inline; margin-right: 8px; }
#nav a { color: #282828; outline-style: none}
#nav a:hover { color: #f628f0; outline-style: none}
#nav li.aktiv a {color: #282828}
#nav li.aktiv a:hover { color: #0079ab}
#nav li.tt a { color: #00b1eb; font-size: 1.7em; font-family: monospace; font-style: italic; word-spacing: -0.25em; letter-spacing: -0.02em; padding-left: 20px; }

#subnav  { margin-top: 20px; margin-left: 10px; }
#subnav ul > li { color: #505050; font-size: 0.9em; line-height: 1.4em; margin-right: 6px; list-style: none; display: block; letter-spacing: 0.05em;}
#subnav a { color: #a1a1a1; outline-style: none}
#subnav a:hover { color: #282828; outline-style: none}
#subnav li.aktiv a {color: #282828}
#subnav li.aktiv a:hover { color: #0079ab}


#project { margin-top: 20px; }
#project ul{ margin-bottom: 10px; }
#project ul > li { color: #282828; font-size: 0.95em; line-height: 1.4em; list-style: none; display: block; }
#project ul.en > li { color:  #5f5f5a; font-style: italic; }
#project li.link, #project li.col { margin-top: 15px }

#project ul.en { margin-bottom: 20px }
#project img { max-width: 100%; }
#project p { color: #282828; font-size: 0.95em; line-height: 1.5em; padding-bottom: 10px; }
#project p.en { color: #5f5f5a; font-style: italic; margin-top: -18px; padding-bottom: 10px; }
#project a { color: #0080c0;}
#project a:hover { color: #f628f0;}

.arrow { margin-bottom: 10px; }
.videowrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */padding-top: 25px; margin-bottom: 20px; height: 0;}
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#archiv { float: left; margin-top: 13px; margin-bottom: 20px; }
#archiv ul { text-align: left; padding-top: 0.25em; padding-bottom: 0.25em; list-style-type: none; }
#archiv li { width: 285px; height: 300px; margin-right: px; float: left; margin-bottom: 6px; }
#archiv li:nth-child(2n+1) { clear: left }
#archiv li:nth-child(1n+1) { clear: none; }


#about{ margin-top: 10px }
#about p { color: #282828 }
#about p.en { color: #5f5f5a; font-style: italic;  }

#about dt{ font-size: 1em; line-height: 1.6em; margin-bottom: 10px; }
#about dt a { color: #0080c0 }
#about dt a:hover { color: #f628f0}


.arrow { margin-bottom: 10px; }



#about ul{ margin-bottom: 10px; }
#about ul > li { color: #505050; font-size: 1em; line-height: 1.6em; margin-bottom: 15px; list-style: none; display: block  }
.jahr{ display: block; }
.auswahl{ font-size: 0.8em; font-weight: normal; margin-left: 4px; margin-right: 6px; }




#kontakt { margin-top: 20px; margin-bottom: 20px  }
#kontaktbild { margin-bottom: 20px }
#kontakt img { max-width: 100%; }
#kontaktbox ul { margin-bottom: 20px; }
#kontaktbox li { color: #505050; font-size: 1em; line-height: 1.6em; margin-bottom: 14px; list-style-type: none; display: block; }
.kp { color: #282828; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 8px; }


#footer { margin-top: 40px; margin-bottom: 20px  }
#footer ul > li { color: #828282; font-size: 0.9em; line-height: 1.6em;  list-style: none; display: block; }
#footer li:first-child { margin-right: 12px; }
#footer a { color: #282828; outline-style: none}
#footer a:hover { color: #f628f0; outline-style: none}
#footer li.aktiv a {color: #282828}
#footer li.aktiv a:hover { color: #0079ab}

.tele a { color: #666; cursor: none }



@media screen and (min-width: 40em)
{

#nav { display: inline  }
#head  { height: 30px; }
#logo { height: 30px; width: 100px; float: left; margin-top: -6px }
#nav  { height: 30px; float: right; }
	.eh { display: inline  }
.ab { display: inline }
.abb { display: inline  }
.jahr{ display: inline; margin-right: 10px; }

#archiv img {max-width: 225px}
#archiv li {width: 225px; height: 265px; margin-right: 15px;}

#about { margin-top: 20px }
#about ul > li { margin-bottom: 5px  }
#footer ul > li { display: inline; margin-right: 6px; }

}

@media screen and (min-width: 55em) 
{
h2.dhl  { font-size: 2em; line-height: 1.5em; margin-top: 2px }


.entry { margin-bottom: 20px; }
.arrow { float: right; margin-top: -25px; margin-right: 10px;}
dl img { max-width: 350px }
.imgtitle { font-size: 0.8em; line-height: 1.5em; max-width: 350px}
	#footer { float: left;}
#about p { width: 650px  }
#about ul  { max-width: 650px  }
#about li  {   }
}


@media screen and (min-width: 72em) 
{ 
#page-wrapper { max-width: 1200px;  }

#head  { width: 1200px }
#content {width: 1000px;}

#project { width: 1000px; float: left; }
#project ul { max-width: 600px;   }
#project p { margin-top: 3px; max-width: 980px }
#project p.en { font-weight: normal; margin-bottom: 10px; }


#project img { max-width: 1000px; margin-bottom: -2px; padding-bottom: px; }

#archiv { width: 1200px; float: left; }

#about ul  { max-width: 800px  }

#kontakt { width: 1000px; float: left; }
#kontaktbild { float: left }
#kontakt img { max-width: 800px  }
#kontaktbox { width: 140px; float: right; margin-top: 6px; }
#kontaktbox li { font-size: 0.9em; line-height: em; margin-bottom: 20px;  }


.kp { display: block;}
.city { display: block;}