/*  ==========================================
    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) 
    2. Kopfbereich (inklusive Inhalte) 
    3. Inhaltsbereich (Inhalte in eigenem Stylesheet) 
    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: whitesmoke;
}
/* Grundlegende Gestaltung für body */
body {
  /* Hintergrundfarbe und Begrenzung der Breite */
  background-color: white;
  min-width: 320px;
  max-width: 600px;
  /* Horizontal zentrieren */
  margin: 0.25rem auto;
}
/** 
  * 2. Kopfbereich (inklusive Inhalte)  
  */
/* Innen- und Aussenabstände */
.site-header {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 4.25rem; /* Höhe Header oberhalb Navigation */
  background-color: var(--color-prim3-20);
}
/* Header-Visual */
.site-header img {
  width: 100%;
  height: 100%; /* Höhe Header oberhalb Navigation */
  object-fit: cover;
  object-position: top center;
}
/** 
  * 3. Inhaltsbereich (Inhalte in content.css)  
  */
/* Zeilenabstand & Innen- und Außenabstände */
.site-content {
  padding: 0 1rem;
}
/** 
  	=============================

  	LAYOUT INHALT

  	=============================*/
/** 
	-----------------------------
	1 Spalte
	-----------------------------*/
.layout-1-column {
  display: grid;
  grid-template-columns: 14% 72% 14%;
  column-gap: 0;
}
@media only screen and (max-width: 1024px) {
  .layout-1-column {
    grid-template-columns: 0% 100% 0%;
  }
}
/** 
	-----------------------------
	1 Spalte
	-----------------------------*/
.layout-two-columns {
  display: grid;
  grid-template-columns: 32% 68%;
  column-gap: 2rem;
}
.anchor-side-nav {
  position: sticky;
  top: 0;
}
/** 
  * 4. Fußbereich (inklusive Inhalte)  
  */
/* Grundlegende Gestaltung für den Footer */
.site-footer {
  margin-top: 0 !important; /* Garantiert kein vertikaler Abstand zw. Visual und Footer */
  padding: 0 1rem 1.25rem 1rem;
  font-size: 1rem;
  color: white;
  text-align: right;
  background-color: var(--color-prim3);
}
.site-footer .visual-footer {
  width: 100%;
  height: 4.25rem; /* Höhe Visual (gleiche Höhe wie im Header wählen) */
  margin-bottom: 1.25rem; /* Abstand nach unten zu Footer-Texten */
}
.site-footer .visual-footer img {
  width: 100%;
  height: 100%; /* Höhe Visual oberhalb Footer */
  object-fit: cover;
  object-position: top center;
}
/* Die Navigation im Fußbereich */
.footer-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav li {
  margin-right: 1.25rem;
  font-weight: 400;
}
.footer-nav li:first-child {
  padding-right: 1rem;
  text-align: left;
  font-weight: 500;
  color: var(--color-white-80);
}
.footer-nav li:first-child a {
  display: inline-block; /* Mobile */
  color: var(--color-white);
  text-decoration: none;
}
.footer-nav li:first-child a:hover, 
.footer-nav li:first-child a:focus {
  text-decoration: underline !important;
}
.footer-nav li:last-child { /* Top: Pfeil nach oben */
  margin-right: 0;
  margin-left: auto;
  padding-top: 0.1rem;
}
.footer-nav li:last-child a i.fa-square {
  color: var(--color-white-60);
}
.footer-nav li:last-child a i.fa-arrow-up {
  color: var(--color-prim3);
}
.footer-nav li:last-child a:hover i.fa-square {
  color: var(--color-white-80);
}
/** 
  * Ende layout.css 
  */