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

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

    Stylesheet zur Gestaltung der Inhalte  
    - Hyperlinks im Inhaltsbereich 
    - Infoboxen 
    - Feedback (feedback-abschnitt)  
    - Beiträge und Linklisten ("News") 

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

/* Links als Buttons */
.site-content a.button {
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--color-primary);
  color: var(--color-base-light); 
  line-height: 1;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.25s ease;

  padding: 1rem;
  margin: 1rem; 
}

.site-content a.button:hover, 
.site-content a.button:focus {
  background: var(--color-accent);
  color: var(--color-base-light)
}

.gb-icon {
  display: inline-flex;
  padding-right: 0.5rem; 
}


/* Farbig hervorgehobene Kästen */
.site-content .kasten {
  background: var(--color-primary-very-light);
  padding: 1rem; 
  border: 3px solid var(--color-primary); 
  margin-bottom: 1rem; 
}
.site-content .kasten p:last-child { 
  margin-bottom: 0;
}
/** 
  * Startseite | Grundlegende Gestaltung der Infoboxen 
  */
.infoboxen {
    background-color: var(--grey-very-light, whitesmoke); 
    padding: 1rem; 
    margin-bottom: 1rem; 
  }
  
  .infobox {
    text-align: center; 
    background-color: var(--color-base-light, white); 
    padding: 1rem;
    margin: 1rem; 
  }  

  .infobox img {
    box-shadow: 0 2px 6px var(--color-shadow);
    transition: all 0.5s ease;
  }
  /* Flexible Boxes 2, 279ff */
  .infobox img:hover, 
  .infobox img:focus {
    transform: scale(1.05);
    transition: all 0.5s ease;
  }

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

    /* Buch und Videokurs nebeneinander */
    .infoboxen > .inside {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1rem;
    }

    /* Der Absatz unter den Bildern über beide Spalten */
    p.buch-und-videokurs {
      grid-column: 1/-1;
    }
    
  } /* Ende @media */

  
/** 
  * Startseite | Feedback - Übersicht  
  */ 

  .feedback-uebersicht > .inside { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem; 
  }

  .feedback-uebersicht > .inside > h2 {
    grid-column: 1/-1; 
  }

  .feedback {
    display: flex;
    flex-flow: column; 
    max-width: 72ch; 
    
    background-color: var(--grey-light, #eee);
    color: var(--color-base-dark, black);
    background-image: linear-gradient(to right, var(--grey-light, #eee), var(--grey-very-light, whitesmoke)); 
    box-shadow: 0 1px 3px var(--color-shadow); 
  
    padding: 1rem;
    border-left: 5px solid var(--color-primary, #07b);
    margin: 0; 
    margin-bottom: 1rem;
  } 

  .feedback > blockquote {
    margin: 0; 
    margin-bottom: 1rem; 
  }

  .feedback > blockquote > :first-child { 
    font-size: 1.15rem; 
    font-weight: bold; 
  }

  .feedback > blockquote > :last-child { 
    margin-bottom: 0; 
  }

  .feedback figcaption {
    margin-top: auto; 
  }


  /** 
  * Das Buch | Content-Intro - Buch und Beschreibung  
  */ 

  .buch-und-beschreibung figcaption { 
    margin-top: 1rem;
    margin-left: 5rem;
  }

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

    .buch-und-beschreibung {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .buch-und-beschreibung figcaption {
      margin: 0; 
    }
    
  } /* Ende @media */


  /** 
  * Das Buch | Aufbau des Buches 
  */ 
  .aufbau-buch {
    background-color: var(--grey-very-light, whitesmoke); 
    padding: 1rem; 
    margin-bottom: 1rem; 
  }

  .aufbau-buch ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .aufbau-buch li {
    background-color: var(--color-base-light);
    padding: 1rem;
    margin: 1rem 0; 
  }

  .aufbau-buch h3 {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 500;
  }

  .aufbau-buch .gb-icon svg {
    width: 2rem; 
    height: 2rem; 
  }
  .html .gb-icon { color: var(--color-accent); }
  .css-grundlagen .gb-icon { color: var(--color-primary); } 
  .css-layout .gb-icon { color: var(--color-accent-active); } 

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

    .aufbau-buch ol {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 1rem;
    }
    
  } /* Ende @media */



/** 
  * Der Videokurs | Abschnitte Webtechniken lernen 1 bis 3  
  */

  .webtechniken-lernen-1, 
  .webtechniken-lernen-3 {
    background-color: var(--grey-very-light, whitesmoke); 
    padding: 1rem; 
    margin-bottom: 1rem; 
  }

  .webtechniken-lernen-1 h2, 
  .webtechniken-lernen-2 h2,
  .webtechniken-lernen-3 h2 {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 500;
  }

  .seite-videokurs .gb-icon {
    display: inline-flex;
    line-height: 0;
    padding-right: 0.5rem; 
  }
  .seite-videokurs .gb-icon svg {
    width: 2rem; 
    height: 2rem; 
  }
  .webtechniken-lernen-1 .gb-icon { color: var(--color-accent); }
  .webtechniken-lernen-2 .gb-icon { color: var(--color-primary); } 
  .webtechniken-lernen-3 .gb-icon { color: var(--color-accent-active); } 

  /* Abstand in einspaltigen Layouts, mehrspaltig siehe Media Query */
  .webtechniken-lernen-1 figcaption,
  .webtechniken-lernen-2 figcaption, 
  .webtechniken-lernen-3 figcaption { 
    margin-top: 1rem;
  }

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

    .webtechniken-lernen-1 figure, 
    .webtechniken-lernen-2 figure, 
    .webtechniken-lernen-3 figure {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .webtechniken-lernen-1 figcaption, 
    .webtechniken-lernen-2 figcaption,
    .webtechniken-lernen-3 figcaption {
      margin-top: 0; 
      margin-left: 2rem; 
    }
    
  } /* Ende @media */


  
/** 
  * Die Übungswebsite 
  */

  /* Heading und Icons */
  .website-teil-1 h2, 
  .website-teil-2 h2,
  .website-teil-3 h2 {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 500;
  }

  .seite-website .gb-icon {
    display: inline-flex;
    line-height: 0;
    padding-right: 0.5rem; 
  }
  .seite-website .gb-icon svg {
    width: 2rem; 
    height: 2rem; 
  }
  .website-teil-1 .gb-icon { color: var(--color-accent); }
  .website-teil-2 .gb-icon { color: var(--color-primary); } 
  .website-teil-3 .gb-icon { color: var(--color-accent-active); } 


  /* Gallery  */
.website-teil-1,
.website-teil-3 {
  background-color: var(--grey-very-light, whitesmoke); 
  padding: 1rem; 
  margin-bottom: 1rem; 
}

.gallery img {
  box-shadow: 0 2px 6px var(--color-shadow);
}  

@media screen and (min-width: 600px) {  
  .gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem; 
  }  

} /* Ende @media */ 




/** 
  * Ende content.css 
  */ 