/*  ==========================================
    Einstieg in HTML und CSS  
    Stylesheet für die Übungswebsite 

    layout.css  
    wird in style.css per @import eingebunden  

    Stylesheet zur Gestaltung der Layoutbereiche
    1. Klassisches Seitenlayout (begrenzte Breite, zentriert, Sticky Footer vorbereiten) 
    2. Kopfbereich (inklusive Inhalte) 
    3. Inhaltsbereich (Inhalte in eigenem Stylesheet, Sticky Footer mit flex:1) 
    4. Site-Footer (inklusive Inhalte) 

    Die Gestaltung der Site-Navigation steht in eigenem Stylesheet. 

    ======================================= */


/** 
  * 1. Klassisches Seitenlayout (begrenzte Breite, zentriert) 
  */ 

/* Hintergrundfarbe für das Stammelement */ 
html { background-color: var(--grey-very-light, whitesmoke); }

/* Grundlegende Gestaltung für body */
body {
  /* Hintergrundfarbe und Begrenzung der Breite */ 
  background-color: var(--color-base-light, white); 
  min-width: 320px; 
  max-width: 600px; 

  /* Horizontal zentrieren */ 
  margin: 0 auto;   

  /* Sticky Footer, Schritt 1/2 */
  display: flex;
  flex-flow: column; 
  min-height: 100vh;    

}

/* Klassisches Layout: Für moderne Browser mehr Platz für mehrspaltige Layouts */
@supports (display: grid) {
  
  body {
    max-width: 960px; 
  }

} /* Ende @supports */ 


/** 
  * 2. Kopfbereich (inklusive Inhalte)  
  */ 

/* Innen- und Außenabstände */
.site-header { 
  padding: 1rem 1rem 0 1rem; 
  margin-bottom: 1rem; 
} 

/* Fine-Tuning: Die Abstände um Logo und Slogan anpassen */ 
.site-header h1 { margin-bottom: 0; }
.site-header p { margin-top: 0; }


/** 
  * 3. Inhaltsbereich (Inhalte in content.css)  
  */ 

/* Innen- und Außenabstände */
.site-content { 
  line-height: 1.5; 
  padding: 0 1rem; 
  margin-bottom: 2rem; 

  /* Sticky Footer, Schritt 2/2 */
  flex: 1; 
} 
 

/** 
  * 4. Fußbereich (inklusive Inhalte)  
  */ 

/* Grundlegende Gestaltung für den Footer */ 
.site-footer {
  font-size: smaller; 
  background-color: var(--grey-very-dark, #333);
  color: var(--color-base-light, white); 
  text-align: right; 
  padding: 1rem;
}

/* Die Navigation im Fußbereich */   
.footer-nav ul {
  display: flex;
  list-style: none; 

  padding: 0; 
  margin: 0; 
}

.footer-nav li {
  padding-right: 0.5rem; 
  border-right: 1px solid var(--grey-light); 
  margin-right: 0.5rem;
  
  display: flex;
  align-items: center;
}

.footer-nav li:first-child {
  padding-left: 0.5rem; 
  border-left: 1px solid var(--grey-light); 
}

.footer-nav li:last-child {
  border: none; 
  margin-right: 0; 
  margin-left: auto; 
}

.site-footer a {
  color: var(--color-base-light, white); 
  text-decoration: none; 
}

.site-footer a:hover, 
.site-footer a:focus {
  text-decoration: underline; 
}

.site-footer a:active {
  color: var(--color-accent-active); 
}

.site-footer .current a {
  text-decoration: underline;
}

/** 
  * Ende layout.css 
  */ 
