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;
	padding: 0;
	margin: 0;
}

/* Inhaltsbreite begrenzen und zentrieren */
.innen {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 0 2rem 0;
}
#ueber-mich, #kontakt {background: #f4f1e6 /*#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;}

/* Listenzeichen bei nummereriten und bei Aufzählungslisten einfärben */
::marker {color: #09a;}

/* Optimierungen für Tablets */
@media only screen and (max-width: 980px) {
	.innen {max-width: 96%;}
}

/* Optimierungen für noch kleinere Bildschirme */
@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;}
}