body {
 font-family: cambria, 'hoefler text', utopia, 'liberation Serif', 
'nimbus roman no9 l regular', times, 'times new roman', serif;
 line-height: 1.5;
 font-size: 20px;
 }

 .innen {
 max-width: 960px;
 margin: 0 auto;
 padding: 1.5rem 0 2rem 0;
 }
  #ueber-mich, #kontakt {background: #f7f4e9;}

header .innen, .brand, footer .innen, .portfolio {
 display: flex;
 justify-content: space-between;
 }

 .brand {padding: 1.75rem 0 2rem 0;}
 .brand img {height: 110px; width: auto; border-radius: 50%;}
 .slogan h1, .slogan p {margin: 0; line-height: 1;}
 .slogan {
 padding-left: 1rem;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 }
 h1, h2 {font-weight: normal;}

 .navi {
 display: flex;
 flex-direction: column;
 justify-content: center;
 }
 .navi ul {
 list-style: none; padding: 0; margin: 0;
 text-align: right;
 }
 
 .portfolio img {width: 100%; max-width: 100%; height: auto;}
 .portfolio1, .portfolio2, .portfolio3 {max-width: 31%;}
 .portfolio h3 {font-size: 1.1rem;}

  a {color: #09a; text-decoration: none;}
 a:hover {color: #333;}
 address {margin-bottom: 1rem;} 

 ::marker {color: #09a;} 

  @media only screen and (max-width: 980px) {
    .innen {max-width: 96%;}
 }

  @media only screen and (max-width: 699px) {
 .portfolio1, .portfolio2, .portfolio3 {max-width: 100%;}
 header .innen, .brand, footer .innen, .portfolio {display: block;}
 .slogan {padding-left: 0;}
 .navi ul {text-align: left;}
 }