/* Globale Angaben */
 html, body {font-family: Arial; height:100%}
 h1 { color: blue; font-size:1em}
 /* Default-Verhalten für Sidebar und Content */ 
 .main { display:block; width:100%;background:#f4f5f8 }
 .sidebar { display:block; width:100%;background:#f4f5f8 }
 /* Breakpoint bei 576px = 36em für Smartphone im Querformat */
 /* Spalten untereinander 40:60, h1 = dunkelblau */
 @media all and (min-width: 36em){
	.main { float: left; width:60%;}
	.sidebar { float: left; width:40%;}
	h1 { color: darkblue; font-size:1.1em }
 }
 /* Breakpoint bei 800px=50em für Desktop im Querformat */
 /* Spalten nebeneinander 30:70, h1 = grün */
 @media all and (min-width: 50em){
 	.main { width:70%; }
 	.sidebar { width:30%;background:cornsilk }
 	 h1 { color: green; font-size:1.2em }
 }