html {scroll-behavior: smooth;}

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: 1.25rem;
    padding: 0; margin: 0;
    color: #333;
}

/* Einige allgemeine Angaben */
a {color: #09a; text-decoration: none;}
a:hover {color: #333;}
address {margin-bottom: 1rem;}

/* Der Innenbereich aller Sektionen */
.innen {
    max-width: 850px;
    margin: 0 auto; /* Die komplette Website horizontal zentrieren */
    padding: 1.5rem 1rem 2rem 1rem; /* Innere Abstände innerhalb der Sektionen */
}

#ueber-mich, #kontakt {background: #f7f4e9;}

/* Mehrere Bereiche nebeneinander anordnen */
header .innen, .brand, footer .innen, .portfolio {
    display: flex;
    justify-content: space-between;
}

/* Logo und Seitentitel */
.brand {padding: 1.75rem 0 2rem 0;}
.brand img {height: 110px; width: auto;}
.slogan h1, .slogan p {margin: 0; line-height: 1;}

.slogan {
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
h1, h2 {font-weight: normal;}

/* Die Navigation anordnen */
.navi {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navi ul {
    list-style: none; padding: 0; margin: 0;
    text-align: right;
}

/* Der bereich mit den Arbeitsproben */
.portfolio img {
    width: 100%; max-width: 100%; height: 25%; padding: 0px; margin: 0px;
    box-shadow: 6px 5px 2px 0 rgba(0,0,0,0.22);
}

.portfolio1, .portfolio2, .portfolio3, .portfolio4 {max-width: 25%; padding:5px;}

.portfolio h3 {font-size: 1.1rem;}

/* Mobil */

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