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

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

    Stylesheet zur Gestaltung der Layoutbereiche
    - mehrere farbige Abschnitte über die gesamte Seitenbreite  
    - body reicht von ganz links bis ganz rechts 
    - die Begrenzung der Breite erfolgt durch div.inside 

    Die Gestaltung der Site-Navigation steht in eigenem Stylesheet. 

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


/* Stammelement und body gestalten - überschreibt Deklarationen aus layout.css */
html { 
  background-color: transparent; 
}

body { 
  max-width: none; 
  padding: 0; 
  margin: 0; 
}

/* Layoutbereiche in der Breite begrenzen und zentrieren */
.inside {
  max-width: 600px; 
  padding: 0 1rem; 
  margin: 0 auto; 
}

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

} /* Ende @supports */ 


/* Fine-Tuning der Abstände für die Infoboxen - zusätzliche Klasse erhöht die Spezifität */ 
.site-content .infoboxen { padding: 1rem 0; } 
.site-content .infobox { margin: 1rem 0; }

/* Layoutbereiche - horizontale Innenabstände entfernen */
.site-header, 
.site-nav, 
.site-content, 
.site-footer { 
  padding-left: 0; 
  padding-right: 0; 
}


/** 
  * Ende layout-modern.css 
  */ 