/* Responsive Design mit Flexbox */

/* === GLOBAL DEFINITION  === */

/* alternatives Boxmodell */

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  font: normal 1.1em Arial, sans-serif;
  color: black; /* wird als currentColor für die Akzentfarbe verwendet. */
  background-color: #ffffff;
}

p, ol, ul, dl {color: black;}   /** JW changed from #333 **/

/* === HEADER  === */

header {
  margin: 0;
  /** padding: 1em; **/ /** JW changed   **/
  background-color: #e7e8ee;  
}

header a {
  padding: .5em .5em .5em 3em;
  height: 3em;
  background: no-repeat left;
  text-decoration: none;
  border: 1px solid transparent;
}

header p {
  font-variant: small-caps;
  font-size: 2em;
}

header span {
  font-weight: bold;
}

.akzentfarbe1 {
  color:orange;
}

.akzentfarbe2 {
  color: black;
}

/* === CONTENT  === */

h1, h2 {
  color: currentColor;
}
h3 {
  color: #999;
}
h4 {
  margin-top: 0;  /** JW hinzugefügt  **/
}

a {
  color: currentColor;
  font-weight: bold;
}
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}
a:hover, a:focus {
  color: grey;   /** JW changed from #888 **/
}

a:focus, a:hover {
  text-decoration: underline;
  /** background-color:gold; **/ /** JW changed **/
}

img, a img {
  border: 0 none;
}

/* === NAV  === */

nav ul {
  box-shadow: 0 .6em .3em 0 rgba(0, 0, 0, .75);
  text-align: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav a {
  background-color: black;
  color: white;
  text-decoration: none;
  display: inline-block;
  width: 95%;
  margin: .3em 0;
  padding: .5em 1em;
  border-radius: .5em;
}

nav a[aria-current="page"]{
 color: orange;  
 font-weight: bold;
}

nav a:hover, nav a:focus {
  background-color: white;  /** JW changed from gold  **/
  color: currentColor;
}

nav a:hover::after, nav a:focus::after {
  color: transparent;
}


/* === FOOTER  === */

footer {
  font: normal 0.9em Arial, sans-serif;
  margin: 2em 0;
  display: flex;
  color: black;  /** JW changed from #989898 **/
}

footer ul, footer p {
  flex: 1 1 100%;
}

footer ul {
  padding-left: 0;
  margin-left: 0;
}

footer li  {
  list-style-type: none;
  display: inline-block;
  border-left: .2em solid #989898;
}
footer li:first-child  {
  border-left-color: transparent;
}

footer a {
  color: black;  /** JW changed from #999 **/
}

footer a:hover, footer a:focus {
  color: black;  /** JW changed from #333 **/
}

footer li a {
  padding: 0 .5em 0 .7em;
}

footer p {
  margin-top: 0;
  padding-top: 0;
  text-align: right;
}


/* === LAYOUT  === */

/* Mobile first ! alle Blöcke haben 100%, Navigation unten*/
main  {
  /** padding: 1em 0; **/  /** JW changed **/
  /** margin: 2em 0; **/   /** JW changed **/
}

/* Navigationselemente werden untereinander angezeigt */
nav ul {
  display: flex;
  flex-direction: column;
}

section {
  font-style: normal;
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 25em) {
  header {
    height: 0em;  /** JW: vorher 10em  **/
  }
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 45em) {
  header {
    background: #e7e8ee no-repeat right bottom ;
    background-size: contain;
  }

  /* Navigation wird nebeneinander ausgerichtet. */
  nav ul {
    flex-direction: row;
    background-color: black;
  }

  nav li {
    margin: 0;
    flex: 1 1 0%;
  }

  /* Main wird zum Flex-Container */
  main {
    display: flex;
    flex-flow: row wrap;
  }

  main > * {
    flex: 1 100%;  /* Alle Kindelemente werden über die volle Breite dargestellt */
  }

  section {
    font: normal 1.1em Arial, sans-serif;
    flex: 0 80%;  /* Diese Elemente erhalten eine halbe Breite */
    margin: 1%;
  }

  /** JW hinzugefügt  **/
  address {
    flex: 0 15%;  
    margin: 1%;
  }

  div-img {
    flex: 1 15%;
    margin: 1%;
  }

  div.desc {
  }
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 58em) {
  section, aside {
    flex: 1 31%;  /* Diese Elemente erhalten eine Breite von 1/3.  */
    margin: 1%;
  }

  article {
    flex: 0 0 100%;
    margin: 2%;
  }

  article li, article blockquote {
    max-width: 40em;
  }
}