/* Sytlesheet für die Künster am Sennerand mit Grid und Dropdown */

/* erster Entwurf am 08.01.2018*/
/* Überarbeitung am 13.01.2018: Navigationsleiste im Header mit CSS gesteuert */
/* Überarbeitung am 22.01.2018: @supports-Abfrage für -ms-grid*/
/* Überarbeitung am 02.02.2018: -ms-grid verankert in den Elemente, da @supports nicht klappt */
/* Überarbeitung am 10.02.2018: Hintergrundfarbe spiegel.de; responsiv für smartphones */

/* Dieter Kuhlmann */

/* Einbinden des 'normalen' Grids in eine @supports - Abfrage */
@supports (display: grid) {
/* nutzung des Grids; Vergabe der Area-Bezeichnungen für kleinere Bildschirme */

	body {
		display: grid;
		}
	
	header {
		grid-area: head;
		}
		
	#logo {
		grid-area: logo;
		}
		
	#sidebar {
		grid-area: bar;	
		}
	
	article {
		grid-area: main;
		}

	#news {
		grid-area: news;
		}

	aside {
		grid-area: side;
		}

	footer {
		grid-area: foot;
		}

/* breites Browserfenster */
@media only screen and ( min-width: 950px ) {
	body {
		max-width: 85em;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto 200px 100px repeat(4, 1fr) 8em;
		}
	
	header {
		grid-column: 6 / 13;
		grid-row:    1 / 2;
		}
		
	#logo {
		grid-column: 1 / 4;
		grid-row:    1 / 2;
		}
		
	#sidebar {
		grid-column: 1 / 4;
		grid-row:    2 / 4;
		}
	
	article {
		grid-column: 4 / 10;
		grid-row:    2 / 8;
		}

	#news {
		grid-column: 10 / 13;
		grid-row:    2 / 4;
		}

	aside {
		grid-column: 10 / 13;
		grid-row:    4 / 6;
		}

	footer {
		grid-column: 3 / 13;
		grid-row:    8 / 9;	
		}
} /* Grid für breite Bildschirme endet hier */


/* mobile Geräte */
@media only screen and ( max-width: 380px ) {

    body {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: "logo logo"
                           "head head"
                           "bar  bar"
                           "main main"
                           "news side"
                           "foot foot";
     }
  } /* Grid für smartphones und andere kleinere Mobilgeräte endet hier */


/* Tablets und mittlere Bildschirme */
@media only screen and ( min-width: 381px ) and ( max-width: 949px ) {

/* mal testen, ob tablets damit gespeist werden können */
		body {
		grid-template-columns: auto auto 150px;
		grid-template-rows: 50px repeat(3, 1fr)6em;
		}
	
	header {
		grid-column: 2 / 3;
		grid-row:    1;
		}
		
	#logo {
		grid-column: 1;
		grid-row:    1;
		}
		
	#sidebar {
		grid-column: 3;
		grid-row:    2;
		}
	
	article {
		grid-column: 1 / 2;
		grid-row:    2 / 4;
		}

	#news {
		grid-column: 3;
		grid-row:    3;
		}

	aside {
		grid-column: 3;
		grid-row:    4;
		}

	footer {
		grid-column: 1 / 2;
		grid-row:    5;	
		}
    
    

/*
   body { 
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "logo head head "
                         "bar  news side"
                         "main main main"
                         "foot foot foot";
    } */
  } /* Grid für Tablets und mittlere Bildschirme endet hier */



} /* Grid für Geräte ohne IE oder Edge endet hier */

/* Einbinden des MS-Grids in eine @supports - Abfrage */
@supports (display: -ms-grid) and (not (display: grid)) {

	body {
		display: -ms-grid;
		max-width: 85em;
		-ms-grid-columns: (1fr)[12];
		-ms-grid-rows: 6em 200px 100px (1fr)[4] 8em;
		}
		
	#logo {
		-ms-grid-column: 1;
		-ms-grid-row:    1;
		-ms-grid-column-span: 3;
		
		}
		
	header {
		-ms-grid-column: 5;
		-ms-grid-row:    1;
		-ms-grid-column-span: 7;
		}

		
	#sidebar {
		-ms-grid-column: 1;
		-ms-grid-row:    2;
		-ms-grid-column-span: 3;
		-ms-grid-row-span: 3;
		}
	
	article {
		-ms-grid-column: 4;
		-ms-grid-row:    2;
		-ms-grid-column-span: 5;
		-ms-grid-row-span: 6;
		}

	#news {
		-ms-grid-column: 10;
		-ms-grid-row:    2;
		-ms-grid-column-span: 2;
		-ms-grid-row-span: 3;
		}

	aside {
		-ms-grid-column: 10;
		-ms-grid-row:    5;
		-ms-grid-column-span: 2;
		-ms-grid-row-span: 2;
		}


	footer {
		-ms-grid-column: 4;
		-ms-grid-row:    8;
		-ms-grid-column-span: 7;
		}

	}




body{
	margin: 5px auto;
	font-family: sans-serif;
	color: #333333;
	/* background: #f2f1ec; /* ursprung: #f6ffd5; etwas zu grün; ersetzt durch hintergrundfarbe spiegel.de*/
	background-image: linear-gradient(#937d14, #cdccc9); 
	display: -ms-grid; /* nicht oben, sondern im body, da IE diese Anweisung sonst ignoriert !! */
	-ms-grid-columns: (1fr)[12];
	-ms-grid-rows: 6em 200px 100px (1fr)[4] 8em;

}

header, nav, article, news, aside, footer {
	border-radius: 0.3em 0.3em;
	border: 1px solid;
	padding: 5px;
	margin: 5px;
	}


#logo {
	background: #e3e2fe; /* in der Vorlage #f1f3f4*/
	border-color: #d5d5d5;
	color: red;
	font-size: 1.0em;
	font-weight: bold;
	vertical-align: text-top;
	/*text-shadow: black 3px 2px 4px; */
	/* Ergänzung da über @supports nicht einfügbar */
		-ms-grid-column: 1;
		-ms-grid-row:    1;
		-ms-grid-column-span: 3;
	}

#logo p {
		margin: unset;
		}

header {
	background-image: url("../bilder/IMG_4163_bearbeitet_200x150.jpg"); /* kreidebild als Hintergrundbild */
	border-color: #d5d5d5;
	/* Ergänzung da über @supports nicht einfügbar */
		-ms-grid-column: 5;
		-ms-grid-row:    1;
		-ms-grid-column-span: 7;

	}



header nav, header nav > ul  {
  margin: 0px;
  padding: 0px;
} 

header nav > ul > li {
				float: right; /* hinzugefügt */
				position: relative;
				display: inline-block;
				padding: 2px;
				background-color: #e3e2fe; /* in der Vorlage #fea */
				width: 120px; /* 120px */
			}

header nav > ul > li > ul {
				position: absolute;
				
				
				list-style-type: none;
				margin: 0;
				padding: 2px;
				background-color: rgba(255, 255, 255, 0); /* Hintergrund wird transparent */
				top: 2em; /* 40px in der Vorlage; muss so gewählt werden, dass Dropdown noch im Kontakt mit Oberpunkt ist */
				left: 0;
				width: 120px;
				display: none; /* blendet die Unterpunkte aus */
			}
			header nav > ul > li:hover > ul {
				display: block; /* blendet die Unterpunkte ein */
				z-index: 2; /* damit werden die Unterpunkte nicht mehr verdeckt durch die Oberpunkte */
				
			}
			
@media (min-width: 45em) {
  header nav li {
	font-size: 1em;
  }  
}

header nav a {
  display: block;
  padding: 0.4em;
  text-decoration: none; 
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
  border: 1px solid darkblue;
  border-radius: 10px;
  box-shadow: 0 5px 10px white inset;
  color: gold; 
  background-color: darkblue; 
  transition: all .25s ease-in;	  
}

header nav li[aria-current] a,
header nav li a[aria-current] {
  background-color: firebrick; 
  color: gold;
}
	
header nav a:focus,
header nav a:hover,
header nav li[aria-current] a:focus,
header nav li[aria-current] a:hover {    
  color: darkblue; 
  background-color: gold;
}	

#sidebar {
	background: #dbe3de; /* in der Vorlage #ebf5d7*/
	border-color: #8db243;

	/* Ergänzung da über @supports nicht einfügbar */
		-ms-grid-column: 1;
		-ms-grid-row:    2;
		-ms-grid-column-span: 3;
		-ms-grid-row-span: 3;

	}

#sidebar ul {
		/* margin-left und padding-left = 0 + width = 100px rücken die Listenelmente nach links */
		margin-left: 0px;
		padding-left: 0px;
		width: 100px;
		}


/* Menu sidebar senkrecht angeordnet */
#sidebar > ul > li {
  margin: 0;
  padding: 0;
  display: inline-block;
  position: left;
} 

#sidebar ul li {
  list-style:none;
  font-size: 1.0em;  
  position: relative; /* relative funktioniert für 2 reihen Breite*/
  margin: 0 0 .2em 0; 
  width: 8em;
  display: inline-block;
  padding: 2px;
  background-color: #dbe3de; /* = Hintergrundfarbe des Abschnitts */
}
#sidebar ul li ul {
	position: absolute; /* absolute in der Vorlage */
	list-style-type: none;
	margin: 0;
	padding: 2px;
	background-color: rgba(255, 255, 255, 0); /* Hintergrund wird transparent */
	top: 0.5em; /* muss so gewählt werden, dass Dropdown noch im Kontakt mit Oberpunkt ist */
	left: 8em; /* muss so gewählt werden, dass Untermenü in Kontakt mit dem Oberpunkt steht */
	width: 120px;
	display: none; /*none blendet Unterpunkte aus */
	}
	
#sidebar ul > li:hover > ul {
	display: block; /* damit werden die Unterpunkte eingeblendet */
	z-index: 3; /* damit werden die Unterpunkte nicht mehr verdeckt durch die Oberpunkte */
	}


#sidebar a {
  display: block;
  padding: 0.4em;
  text-decoration: none; 
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
  border: 1px solid darkblue;
  border-radius: 10px;
  box-shadow: 0 5px 10px white inset;
  color: gold; 
  background-color: blue; 
  transition: all .25s ease-in;	  
}

#sidebar li[aria-current] a,
#sidebar li a[aria-current] {
  background-color: firebrick; 
  color: gold;
}
	
#sidebar a:focus,
#sidebar a:hover,
#sidebar li[aria-current] a:focus,
#sidebar li[aria-current] a:hover {    
  color: darkblue; 
  background-color: gold;
}	


/* damit erst mal genug für die Seitenleiste */

article {
	/* background: #f6f1f1; /* in der Vorlage #ffede0*/
	background-image: linear-gradient(#f2f1ec, #cbbb6e);
	border-color: #df6c20;
	/* Ergänzung da über @supports nicht einfügbar */
		-ms-grid-column: 4;
		-ms-grid-row:    2;
		-ms-grid-column-span: 5;
		-ms-grid-row-span: 6;

	}


#news {
	background: #ebf5d7;
	border-color: #8db243;
	/* Ergänzung da über @supports nicht einfügbar */
		-ms-grid-column: 10;
		-ms-grid-row:    2;
		-ms-grid-column-span: 2;
		-ms-grid-row-span: 3;

	}


aside {
	background: #ebf5d7;
	border-color: #8db243;
	/* Ergänzung da über @supports nicht einfügbar */
		-ms-grid-column: 10;
		-ms-grid-row:    5;
		-ms-grid-column-span: 2;
		-ms-grid-row-span: 2;
	}

aside a {
		font-size: 1em;
		}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
	/* Ergänzung da über @supports nicht einfügbar */
		-ms-grid-column: 4;
		-ms-grid-row:    8;
		-ms-grid-column-span: 7;

	}

footer a {
         display: inline-block;
         text-align: right;
         color: #484848; /* ein dunkles Grau */
         }

footer a[aria-current] {    
  color: lightblue; 
 }	

a {
	text-decoration: none; 
	font-weight: bold;
	}
	
a:hover {
	background-color: yellow; /* Test */
	}

blockquote a {
		color: red;
		font-size: 0.8em;
		}

article h3,
article #bild,
article figcaption {
               text-align: center;
               }


article #bild figcaption {
               font-size: 0.8em;
               font-weight: bold;
               color: red;
               }