@charset "UTF-8";
/* --------------------------------------------------
        Allgemeine Grundeinstellungen       
 ----------------------------------------------------*/

/* ------------------------------------------------------------------
     CSS-Eigenschaften für mobile Geräte (<640 px)            
       + Alles in einer Spalte untereinander anordnen                                              
-------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
    .header {
        text-align: center;
        padding: 1em;
        background-color: lightgrey; /* #07889b; /* Teal */
        color: #efefef; /* Neutral */
        /*border-bottom: 1px solid #efefef;*/
    }
    .aside {
        border-top: 1px solid #a9a9a9;
        padding-top: 0.5em;
    }
    .container {
        background-color: #efefef; /*#fff; /* /* weiss */
        padding: 2em 2rem; /* 1em oder 1rem = 16px*/
    }
    .footer {
        background-color: aliceblue; /*  #a9a9a9; /* Carbon */
        color: darkblue; /* #efefef; /* Neutral */
        padding: 1em;
        text-align: center;
        border-top: 1px solid #efefef;
        margin: auto;
    }

}

/*-----------------------------------------------------   
     Tabletversion (>640 Pixel)
       640px / 16px/em = 40em  
       + 2 Spalten
         - Header und Navigation oben untereinander
		 - Hautpinhalt und Seitenleiste nebeneinander
		 - Fußleiste unten
------------------------------------------------------*/
@media screen and (min-width: 640px) {
    .header {
        padding: 1.5em;
        text-align: left;
    }

    .container {
        padding: 3rem 0;
        display: block;
        overflow: auto;
    }

    .content {
        display: block;
        float: left;
        width: 65%;
        padding: 0 1rem 0 2rem;
    }

    .aside {
        display: block;
        margin: 0 0 0 65%;
        width: 35%;
        padding: 0 2rem 0 2rem;
        border-top: none;
    }
}

/*------------------------------------------------------------------
    Bildschirme (>1024 Pixel)
      1024px / 16px/em = 64em
      + 3 Spalten
        - Header oben
        - Navigation, Hauptinhalt und Seitenleisten nebeneinander
        - Fußleiste unten		
 ------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
    .container {
        width: 85%;
        height: 100%;
        padding: 0;
        margin-left: 15%;
    }
    .content {
        width: 70%;
        padding: 1em 1.5em;
    }
    .aside {
        width: 30%;
        padding: 1em 1.5em;
        margin: 0 0 0 70%;
        background: aliceblue;
    }
}

/*------------------------------------------------------------------- 
    Große Bildschirme (>1280 Pixel) 
      1280px / 16px/em = 80em
	    + 3 Spalten
          - Header oben
          - Navigation, Hauptinhalt und Seitenleisten nebeneinander
			* Zwei Artikel im Hauptinhalt nebeneinander
          - Fußleiste unten	
  -------------------------------------------------------------------- */
@media screen and (min-width: 1280px) {
    .wrapper {
        margin: 0 auto;
        max-width: 1280px;
    }
    .article {
        display: block;
        width: 50%;
        float: left;
        padding: 0 1rem;
        text-align: justify;
    }

}