/** Farbschema 
  * 
  * body dunkelrot #680000
  * main dunkelrot #870000 
  * text gelb      #ffdb53 
  * text orange    #da7e12
  * active link    #da7e12 
  */
   
*, 
*::before, 
*::after { 
  box-sizing: border-box; 
}

body {
  min-height: 100vh; 

  background: #680000;
  color: #ffdb53; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0; 
  margin: 0; 
}

a { 
  color: #ffdb53; 
  text-decoration: none; 
}

a.current { 
  color: #da7e12; 
}

blockquote {
  margin: 0 0 2rem 0; 
}

.screen-reader-text {
  position:absolute;
  margin:-1px;
  padding:0;
  height:1px;
  width:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
  word-wrap:normal!important; 
}


/**
  * Site-Header 
  */ 

.site-header { 
  background: #870000; 
  padding: 2rem 0.5rem 0.5rem 0.5rem; 
  text-align: center;  
}
.site-title {
  text-transform: uppercase; 
  letter-spacing: 2px; 
  font-family: "Lucida Sans", sans-serif; 
  font-size: 222%; 
  padding: 0; 
  margin: 0; 
}
.site-slogan {
  letter-spacing: 1px;
}


/**
  * Site-Navigation 
  */ 

/* Menübutton */
button.menu-toggle {
  display: block; 
  background-color: transparent;
  color: #ffdb53; 
  font-size: 1rem; 
  text-align: center;
  padding: 0.5rem 1rem; 
  border: 0;
  margin: 0.5rem auto; 
}
button.menu-toggle:hover, 
button.menu-toggle:focus {
  cursor: pointer; 
}

/* Menü mobil ausblenden */
.site-nav {
  display: none; 
}

/* Menü auf mobil anzeigen */
.show-menu + .site-nav {
  display: block; 
  margin-bottom: 1rem; 
}
.show-menu + .site-nav .site-nav-list {
  display: flex; 
  flex-direction: column; 
}
.show-menu + .site-nav li {
  margin-bottom: 0.5rem; 
}

/* Basisformatierung */
.site-nav,
.site-meta {
  text-align: center; 
  background: #680000; 
}
.site-nav-list, 
.site-meta-list {
  display: flex; 
  list-style: none; 
  justify-content: space-between; 

  padding: 0;
  margin: 0;  
}
.site-meta-list {
  justify-content: center; 
}
.site-nav-list li {
  padding: 0 0.5rem;
}
.site-meta-list li {
  margin-right: 1rem; 
}
.site-nav-list li:nth-child(4) {
  display: none; 
}
.site-meta-list li:not(:last-child) {
  padding-right: 1rem; 
  border-right: 1px solid #ffdb53; 
}


/**
* Featured Image  
*/ 

.featured-image {
  text-align: center; 
  background: #870000;
  padding: 1rem; 
}
.featured-image img {
  border: 1px solid #ffdb53;
}

/**
  * Inhalte  
  */ 

main {
  padding: 0 1rem;
  line-height: 1.5; 
}
h2 {
  color: #da7e12; 
  font-size: 130%; 
}
p {
  hyphens: auto; 
}
main ul {
  list-style-type: square; 
}

/**
  * Site-Meta im Footer 
  */ 

.site-meta {
  font-size: 80%; 
  background: #680000;
  padding: 1rem; 
  border-top: 3px solid #870000; 
  margin-top: 2rem;
}


/**
  * Grid-Layout ab 768px 
  * Alte Browser bekommen die Mobilversion 
  */ 

@supports (display: grid) {

  @media screen and (min-width: 768px) {

    .site-nav {
      display: block; 
    }
    
    body { 
      margin: 0 auto; 
      max-width: 960px; 

      display: grid; 
      grid-template-columns: 160px 310px 1fr;  
      grid-template-areas:
        ".  header  ."
        "nav      aside     inhalt"
        ".  footer   ."
        ;
      grid-column-gap: 1rem;
    }

    .site-header     { grid-area: header; }
    .site-nav        { grid-area: nav; }
    .featured-image  { grid-area: aside; }
    .site-content    { grid-area: inhalt; }
    .site-meta       { grid-area: footer; }

    .site-header {
      padding: 2rem 0 2rem 0; 
      margin: 0; 
    }

    button.menu-toggle {
      display: none; 
    }
    
    .site-nav .site-nav-list {
      justify-content: flex-start;
      flex-direction: column; 
      align-items: flex-start; 
    }
    .site-nav-list li {
      margin-top: 1rem; 
    }
    .site-nav-list li:nth-child(4) {
      display: list-item; 
    }
    .site-nav-list li:last-child {
      margin-top: 2rem; 
    }
    .featured-image {
      min-height: 80vh; 
      padding: 0; 
      margin: 0; 
    }

    .site-meta {
      background: #680000; 
      margin: 0 0 1rem 0; 
    }
    .site-meta-list {
      justify-content: center; 
    }
    .site-meta-list li {
      margin-right: 1rem; 
    }

  } /* Ende @media */ 

} /* Ende @supports */