@charset "UTF-8";
/* --------------------------------------------------
        Allgemeine Grundeinstellungen                              
 ----------------------------------------------------*/
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit; 
}
body {
   color: #1d2731;            /* Ivory Black*/
   background-color: white; 
   font-family: Georgia; 
   margin:0;
}
ul {
  padding: 0;
}
.grid {
  display: grid; 
  grid-template-rows: auto auto auto auto auto auto; 
  grid-template-columns: repeat(10, 10%); 
}

.header {
   grid-column: 1 / 11; 
   grid-row: 1 / 2; 
   text-align: center;
   background-color: rgba(245, 215, 110, 1); /* cream can */
   color: rgba(245, 215, 110, 1); /* cream can */
   
}
.nav {
   text-align: center;
   grid-column: 1 / 11; 
   grid-row: 2 / 3; 
}
.row {
   text-align: center;
   grid-column: 1 / 11; 
   grid-row: 3 / 4; 
   background-color: yellow;
   margin:0;
   padding: 8px;
}

label.hamburg { 
   display: block;
   background: yellow; width: 32px; height: 32px; 
   position: relative; 
   margin-left: auto; 
   margin-right: auto;
   border-radius: 4px;
   cursor: pointer;
}

input#hamburg {display:none}

.line { 
   position: absolute; 
   left:2px;
   height: 3px; width: 28px; 
   background: black; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}
.line:nth-child(1) { top: 7px; }
.line:nth-child(2) { top: 15px; }
.line:nth-child(3) { top: 23px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(8px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-8px) rotate(45deg);
}

.nav-ul {
   background-color: rgba(245, 215, 110, 1); /* cream can */
   margin:0;
}
.nav-li {
   list-style: none;
   margin-left: 0;
   border-bottom: 1px solid #efefef;
}
#login {
  float: right;
}

.login {
  display: block; 
  margin: 0;
  padding: 3em 3em;
}
.nav-li-a {
   /*  padding: 0.6em 2rem;*/
    display: block; 
}
.nav-ul a:link {
    text-decoration: none; 
}
.nav-ul a:link, .nav-ul a:visited {
   color: #fff; /* white*/
}
.nav-ul a:hover, .nav-ul a:focus, .nav-ul a:active {
   background-color: #000; /* Black */
   color: #efefef; /* Neutral */
   /*  padding: 0.6em 2rem;*/
   display: block; 
}
.nav-active {
   background-color: #000; /* Black */
   color: #efefef; /* Neutral */
   /*  padding: 0.6em 2rem;*/
     padding: 0.7em 1.2rem;
   display: block; 
}
  .nav-ul {
    /*padding: 0 2rem;*/
    overflow: hidden;	
  }
  .nav-li {
      float: left;
      display: inline-block;
      border: none;
      width: auto; 
   }
   .nav-li-a {
     padding: 0.7em 1.2rem;
     display: inline-block;
   }

.aside {
   grid-column: 1 / 11; 
   grid-row: 4 / 5; 
   border-top: 1px solid #a9a9a9;
   border-bottom: 1px solid #efefef;   
   padding: 0 1rem 0 2rem; 
}
.content {
   grid-column: 1 / 11; 
   grid-row: 5 / 6; 
   padding: 0 1rem 0 2rem; 
}
.back {
   text-align: right;
} 
.back a:link, .back a:visited {
   color:  #1d2731;            /* Ivory Black*/
   text-decoration: none;      /* Unterstrich entfernt*/
}
.footer {
   grid-column: 1 / 11; 
   grid-row: 6 / 7; 
   background-color: #a9a9a9; /* Carbon */
   color: #efefef;            /* Neutral */
   padding: 1em;
   text-align: center; 
   border-top: 1px solid #efefef;   
}
.img-art {
  float: left;
  margin: 0 1em 0.2em 0;
  max-width: 40%;
  height: auto;
}
.img-side {
  float: left;
  margin: 0.1em 1em 0.2em 0.2em;
  max-width: 40%;
  height: auto;
}
.img-logo {
  max-width: 100%;
  height: auto;
}

  .row { 
	display:none;
  }

  .content {
    grid-column: 1 / 8; 
    grid-row: 4 / 5; 
    padding: 0 1rem 0 2rem; 
  }
  .aside {
    grid-column: 8 / 11; 
    grid-row: 4 / 5; 
    padding: 1em 1.5em;
	border-top: none; 
  }

  .article_aside {
   padding: 0.7em 1.2rem;
   border: 1px solid black;   
   }