/* Eikmeiers Atelier 
Body, header, footer, Navigation, Überschriften, figcaption, Links */

body {
  width: 100%;
  height: 100%;  
  background-color: black;
  color: white;
  font-family: 'Oswald', sans-serif;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

header {
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto; 
  background-color: white;
}

header h1 {
  text-align: center;
  margin: 0 0;
  font-size: 2rem;
  padding: 0rem 0.3rem;
  color: #8c6b48;
  

  font-size: 2.5rem;
  padding: 0.5rem;
}

div.paservices {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
  top: 0;
  left: 0;
  height: 3em;
  max-width: 30vw;
  background-color: rgba(238, 2, 147, 0.3);
  opacity: 0.5;
}

.paservices img {
  height: 2.7em;
  width: auto;
  margin-left: 4px;
}

.paservices h1 {
  font-size: 1.2em;
  color: #ee0293;
}

img[id="logo"] {
  width: 3.5em;
  height: auto;
  margin: 3px 0px;
}

nav {
  width: 100%;
  border-bottom: 1px solid white;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0.8rem 0rem;
}

nav ul {
  width: 50%;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  padding: 0;
}

nav ul li {
  font-size: 1rem;
  list-style: none;
}

.button {
  font-weight: bold;
  text-align: center;
  border: 2px solid #8c6b48; 
  border-radius: 0.2rem;
  padding: 0.5rem 1rem;
}

.button:hover {
  background-color: #8c6b48;
}

/*Folgendes Styling der button.aktiv-Klasse führt dazu, dass der entsprechende Link in der Navigationsleiste braun hinterlegt bleibt
(die gleiche Farbe wie beim hovern. Das dient dazu dem User zu signalisieren, auf welcher Seite er sich gerade befindet.*/
.button.aktiv {
  background-color: #8c6b48;
}

footer {
  position: relative;
  bottom: 0;
  margin: 1rem 0rem 0rem;
  text-align: center;
  padding: 0.8rem 0rem;
  width: 100%;
  background-color: white;
}

footer a{
  color: #8c6b48;
}

h2 {
  font-size: 1.8rem;
  text-transform: uppercase;
  padding: 0rem 0.4rem;
}

h3 {
  font-size: 1.3rem;
}

p {
  line-height: 1.5;
  text-align: left;
  font-size: 1rem;
}

figcaption {
  font-size: 1rem;
}

em {
  font-size: 0.8rem;
}

a {
  text-decoration: none;
  color: white;
}

/*Folgendes Styling ist für die beiden Collage-Bilder auf der Seite atelier.html*/

.collage {
  width: 30vw;
}

 /*Anpassungen für kleinere Bildschirme*/
@media screen and (max-width: 48em){
  header h1 {
    font-size: 2rem;
    padding: 0rem 0.3rem;
  }

  .paservices h1 {
    display: none;
  }

  img[id="logo"] {
    width: 3em;
  }

  nav {
    padding: 0.4rem 0rem;
  }

  nav ul {
    width: 90%;
  }

  nav ul li {
    font-size: 0.8rem;
  }

  .button {
    padding: 0.25rem 0.5rem;
  }

  h3 {
    font-size: 1rem;
  }

  .collage {
    width: 70vw;
  }
}

/* Impressum */
p.impressum {
  margin: 0px 0px 0px 20px;
}

/* atelier.html */
.flex {
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: flex-end;
 justify-content: center;
 flex-wrap: wrap;
}

aside {
  text-align: center;
  font-size: 1rem;
}

aside h3 {
  display: inline-block;
}

/* Über uns */
.flex.ueberuns {
  align-items: flex-start;
}

.ueberuns figcaption {
  max-width: 300px;
}

.ueberuns p {
  width: 60vw;
}

/* Motivkarten, Landschaftsaquarelle */
.raster {
  width: 95%;  
  margin: 0rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  align-items: center;
  justify-items: center;
  align-content: start;
  justify-content: center;
}